feat: scroll opt-out on nav() and Link (#4622)

QwikDev · Jun 28, 2023 · 9c0b307 · 9c0b307
1 parent b459153
commit 9c0b307
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 6 deletions.
diff --git a/packages/docs/src/routes/api/qwik-city/api.json b/packages/docs/src/routes/api/qwik-city/api.json
@@ -320,7 +320,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface LinkProps extends AnchorAttributes \n```\n**Extends:** AnchorAttributes\n\n\n|  Property | Modifiers | Type | Description |\n|  --- | --- | --- | --- |\n|  [prefetch?](#) |  | boolean | _(Optional)_ |\n|  [reload?](#) |  | boolean | _(Optional)_ |\n|  [replaceState?](#) |  | boolean | _(Optional)_ |",
+      "content": "```typescript\nexport interface LinkProps extends AnchorAttributes \n```\n**Extends:** AnchorAttributes\n\n\n|  Property | Modifiers | Type | Description |\n|  --- | --- | --- | --- |\n|  [prefetch?](#) |  | boolean | _(Optional)_ |\n|  [reload?](#) |  | boolean | _(Optional)_ |\n|  [replaceState?](#) |  | boolean | _(Optional)_ |\n|  [scroll?](#) |  | boolean | _(Optional)_ |",
       "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/link-component.tsx",
       "mdFile": "qwik-city.linkprops.md"
     },
@@ -586,7 +586,7 @@
         }
       ],
       "kind": "TypeAlias",
-      "content": "```typescript\nexport type RouteNavigate = QRL<(path?: string, options?: {\n    type?: Exclude<NavigationType, 'initial'>;\n    forceReload?: boolean;\n    replaceState?: boolean;\n} | boolean) => Promise<void>>;\n```\n**References:** [NavigationType](#navigationtype)",
+      "content": "```typescript\nexport type RouteNavigate = QRL<(path?: string, options?: {\n    type?: Exclude<NavigationType, 'initial'>;\n    forceReload?: boolean;\n    replaceState?: boolean;\n    scroll?: boolean;\n} | boolean) => Promise<void>>;\n```\n**References:** [NavigationType](#navigationtype)",
       "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/types.ts",
       "mdFile": "qwik-city.routenavigate.md"
     },

diff --git a/packages/docs/src/routes/api/qwik-city/index.md b/packages/docs/src/routes/api/qwik-city/index.md
@@ -334,6 +334,7 @@ export interface LinkProps extends AnchorAttributes
 | [prefetch?](#)     |           | boolean | _(Optional)_ |
 | [reload?](#)       |           | boolean | _(Optional)_ |
 | [replaceState?](#) |           | boolean | _(Optional)_ |
+| [scroll?](#)       |           | boolean | _(Optional)_ |
 
 [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/link-component.tsx)
 
@@ -539,6 +540,7 @@ export type RouteNavigate = QRL<
           type?: Exclude<NavigationType, "initial">;
           forceReload?: boolean;
           replaceState?: boolean;
+          scroll?: boolean;
         }
       | boolean
   ) => Promise<void>

diff --git a/packages/qwik-city/runtime/src/api.md b/packages/qwik-city/runtime/src/api.md
@@ -251,6 +251,8 @@ export interface LinkProps extends AnchorAttributes {
     reload?: boolean;
     // (undocumented)
     replaceState?: boolean;
+    // (undocumented)
+    scroll?: boolean;
 }
 
 // @public (undocumented)
@@ -384,6 +386,7 @@ export type RouteNavigate = QRL<(path?: string, options?: {
     type?: Exclude<NavigationType, 'initial'>;
     forceReload?: boolean;
     replaceState?: boolean;
+    scroll?: boolean;
 } | boolean) => Promise<void>>;
 
 // @public (undocumented)

diff --git a/packages/qwik-city/runtime/src/link-component.tsx b/packages/qwik-city/runtime/src/link-component.tsx
@@ -10,7 +10,7 @@ export const Link = component$<LinkProps>((props) => {
   const nav = useNavigate();
   const loc = useLocation();
   const originalHref = props.href;
-  const { onClick$, reload, replaceState, ...linkProps } = (() => props)();
+  const { onClick$, reload, replaceState, scroll, ...linkProps } = (() => props)();
   const clientNavPath = untrack(() => getClientNavPath(linkProps, loc));
   const prefetchDataset = untrack(() => getPrefetchDataset(props, clientNavPath, loc));
   linkProps['preventdefault:click'] = !!clientNavPath;
@@ -32,7 +32,7 @@ export const Link = component$<LinkProps>((props) => {
       await nav(location.href, { type: 'popstate' });
     } else if (elm.href) {
       elm.setAttribute('aria-pressed', 'true');
-      await nav(elm.href, { forceReload: reload, replaceState });
+      await nav(elm.href, { forceReload: reload, replaceState, scroll });
       elm.removeAttribute('aria-pressed');
     }
   });
@@ -78,4 +78,5 @@ export interface LinkProps extends AnchorAttributes {
   prefetch?: boolean;
   reload?: boolean;
   replaceState?: boolean;
+  scroll?: boolean;
 }
diff --git a/packages/qwik-city/runtime/src/qwik-city-component.tsx b/packages/qwik-city/runtime/src/qwik-city-component.tsx
@@ -119,6 +119,7 @@ export const QwikCityProvider = component$<QwikCityProps>((props) => {
     dest: url,
     forceReload: false,
     replaceState: false,
+    scroll: true,
   });
   const documentHead = useStore<Editable<ResolvedDocumentHead>>(createDocumentHead);
   const content = useStore<Editable<ContentState>>({
@@ -148,6 +149,7 @@ export const QwikCityProvider = component$<QwikCityProps>((props) => {
       type = 'link',
       forceReload = path === undefined, // Hack for nav() because this API is already set.
       replaceState = false,
+      scroll = true,
     } = typeof opt === 'object' ? opt : { forceReload: opt };
     const lastDest = routeInternal.value.dest;
     const dest = path === undefined ? lastDest : toUrl(path, routeLocation.url);
@@ -182,7 +184,7 @@ export const QwikCityProvider = component$<QwikCityProps>((props) => {
       return;
     }
 
-    routeInternal.value = { type, dest, forceReload, replaceState };
+    routeInternal.value = { type, dest, forceReload, replaceState, scroll };
 
     if (isBrowser) {
       loadClientData(dest, _getContextElement());
@@ -301,6 +303,7 @@ export const QwikCityProvider = component$<QwikCityProps>((props) => {
           }
 
           if (
+            navigation.scroll &&
             (!navigation.forceReload || !isSamePath(trackUrl, prevUrl)) &&
             (navType === 'link' || navType === 'popstate')
           ) {

diff --git a/packages/qwik-city/runtime/src/types.ts b/packages/qwik-city/runtime/src/types.ts
@@ -78,6 +78,7 @@ export type RouteStateInternal = {
   dest: URL;
   forceReload?: boolean;
   replaceState?: boolean;
+  scroll?: boolean;
 };
 
 export type ScrollState = {
@@ -94,7 +95,12 @@ export type RouteNavigate = QRL<
   (
     path?: string,
     options?:
-      | { type?: Exclude<NavigationType, 'initial'>; forceReload?: boolean; replaceState?: boolean }
+      | {
+          type?: Exclude<NavigationType, 'initial'>;
+          forceReload?: boolean;
+          replaceState?: boolean;
+          scroll?: boolean;
+        }
       | boolean
   ) => Promise<void>
 >;