Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(qwik-city): add explicit magic attr to select Link for SPA resume #6022

Merged
merged 1 commit into from
Mar 17, 2024
Merged

fix(qwik-city): add explicit magic attr to select Link for SPA resume #6022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 1 addition & 18 deletions packages/docs/src/routes/api/qwik-city/api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,6 @@
"id": "qwik-city",
"package": "@builder.io/qwik-city",
"members": [
{
"name": "\"link:app\"",
"id": "linkprops-_link_app_",
"hierarchy": [
{
"name": "LinkProps",
"id": "linkprops-_link_app_"
},
{
"name": "\"link:app\"",
"id": "linkprops-_link_app_"
}
],
"kind": "PropertySignature",
"content": "```typescript\n'link:app'?: boolean;\n```",
"mdFile": "qwik-city.linkprops._link_app_.md"
},
{
"name": "Action",
"id": "action",
Expand Down Expand Up @@ -379,7 +362,7 @@
}
],
"kind": "Interface",
"content": "```typescript\nexport interface LinkProps extends AnchorAttributes \n```\n**Extends:** AnchorAttributes\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [\"link:app\"?](#linkprops-_link_app_) | | boolean | _(Optional)_ |\n| [prefetch?](#) | | boolean \\| 'js' | <p>_(Optional)_ \\*\\*Defaults to \\_true\\_.\\*\\*</p><p>Whether Qwik should prefetch and cache the target page of this \\*\\*<code>Link</code>\\*\\*, this includes invoking any \\*\\*<code>routeLoader$</code>\\*\\*, \\*\\*<code>onGet</code>\\*\\*, etc.</p><p>This \\*\\*improves UX performance\\*\\* for client-side (\\*\\*SPA\\*\\*) navigations.</p><p>Prefetching occurs when a the Link enters the viewport in production (\\*\\*<code>on:qvisibile</code>\\*\\*), or with \\*\\*<code>mouseover</code>/<code>focus</code>\\*\\* during dev.</p><p>Prefetching will not occur if the user has the \\*\\*data saver\\*\\* setting enabled.</p><p>Setting this value to \\*\\*<code>&quot;js&quot;</code>\\*\\* will prefetch only javascript bundles required to render this page on the client, \\*\\*<code>false</code>\\*\\* will disable prefetching altogether.</p> |\n| [reload?](#) | | boolean | _(Optional)_ |\n| [replaceState?](#) | | boolean | _(Optional)_ |\n| [scroll?](#) | | boolean | _(Optional)_ |",
"content": "```typescript\nexport interface LinkProps extends AnchorAttributes \n```\n**Extends:** AnchorAttributes\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [prefetch?](#) | | boolean \\| 'js' | <p>_(Optional)_ \\*\\*Defaults to \\_true\\_.\\*\\*</p><p>Whether Qwik should prefetch and cache the target page of this \\*\\*<code>Link</code>\\*\\*, this includes invoking any \\*\\*<code>routeLoader$</code>\\*\\*, \\*\\*<code>onGet</code>\\*\\*, etc.</p><p>This \\*\\*improves UX performance\\*\\* for client-side (\\*\\*SPA\\*\\*) navigations.</p><p>Prefetching occurs when a the Link enters the viewport in production (\\*\\*<code>on:qvisibile</code>\\*\\*), or with \\*\\*<code>mouseover</code>/<code>focus</code>\\*\\* during dev.</p><p>Prefetching will not occur if the user has the \\*\\*data saver\\*\\* setting enabled.</p><p>Setting this value to \\*\\*<code>&quot;js&quot;</code>\\*\\* will prefetch only javascript bundles required to render this page on the client, \\*\\*<code>false</code>\\*\\* will disable prefetching altogether.</p> |\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"
},
Expand Down
19 changes: 6 additions & 13 deletions packages/docs/src/routes/api/qwik-city/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,6 @@ title: \@builder.io/qwik-city API Reference

# [API](/api) &rsaquo; @builder.io/qwik-city

## "link:app"

```typescript
'link:app'?: boolean;
```

## Action

```typescript
Expand Down Expand Up @@ -482,13 +476,12 @@ export interface LinkProps extends AnchorAttributes

**Extends:** AnchorAttributes

| Property | Modifiers | Type | Description |
| ------------------------------------ | --------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ["link:app"?](#linkprops-_link_app_) | | boolean | _(Optional)_ |
| [prefetch?](#) | | boolean \| 'js' | <p>_(Optional)_ \*\*Defaults to \_true\_.\*\*</p><p>Whether Qwik should prefetch and cache the target page of this \*\*<code>Link</code>\*\*, this includes invoking any \*\*<code>routeLoader$</code>\*\*, \*\*<code>onGet</code>\*\*, etc.</p><p>This \*\*improves UX performance\*\* for client-side (\*\*SPA\*\*) navigations.</p><p>Prefetching occurs when a the Link enters the viewport in production (\*\*<code>on:qvisibile</code>\*\*), or with \*\*<code>mouseover</code>/<code>focus</code>\*\* during dev.</p><p>Prefetching will not occur if the user has the \*\*data saver\*\* setting enabled.</p><p>Setting this value to \*\*<code>&quot;js&quot;</code>\*\* will prefetch only javascript bundles required to render this page on the client, \*\*<code>false</code>\*\* will disable prefetching altogether.</p> |
| [reload?](#) | | boolean | _(Optional)_ |
| [replaceState?](#) | | boolean | _(Optional)_ |
| [scroll?](#) | | boolean | _(Optional)_ |
| Property | Modifiers | Type | Description |
| ------------------ | --------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [prefetch?](#) | | boolean \| 'js' | <p>_(Optional)_ \*\*Defaults to \_true\_.\*\*</p><p>Whether Qwik should prefetch and cache the target page of this \*\*<code>Link</code>\*\*, this includes invoking any \*\*<code>routeLoader$</code>\*\*, \*\*<code>onGet</code>\*\*, etc.</p><p>This \*\*improves UX performance\*\* for client-side (\*\*SPA\*\*) navigations.</p><p>Prefetching occurs when a the Link enters the viewport in production (\*\*<code>on:qvisibile</code>\*\*), or with \*\*<code>mouseover</code>/<code>focus</code>\*\* during dev.</p><p>Prefetching will not occur if the user has the \*\*data saver\*\* setting enabled.</p><p>Setting this value to \*\*<code>&quot;js&quot;</code>\*\* will prefetch only javascript bundles required to render this page on the client, \*\*<code>false</code>\*\* will disable prefetching altogether.</p> |
| [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)

Expand Down
2 changes: 0 additions & 2 deletions packages/qwik-city/runtime/src/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,8 +261,6 @@ export const Link: Component<LinkProps>;
//
// @public (undocumented)
export interface LinkProps extends AnchorAttributes {
// (undocumented)
'link:app'?: boolean;
prefetch?: boolean | 'js';
// (undocumented)
reload?: boolean;
Expand Down
6 changes: 2 additions & 4 deletions packages/qwik-city/runtime/src/link-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export const Link = component$<LinkProps>((props) => {
...linkProps
} = (() => props)();
const clientNavPath = untrack(() => getClientNavPath({ ...linkProps, reload }, loc));
linkProps['link:app'] = !!clientNavPath;
linkProps.href = clientNavPath || originalHref;

const prefetchData = untrack(
Expand Down Expand Up @@ -80,6 +79,8 @@ export const Link = component$<LinkProps>((props) => {
: undefined;
return (
<a
// Attr 'q:link' is used as a selector for bootstrapping into spa after context loss
{...{ 'q:link': !!clientNavPath }}
{...linkProps}
onClick$={[preventDefault, onClick$, handleClick]}
data-prefetch={prefetchData}
Expand Down Expand Up @@ -118,7 +119,4 @@ export interface LinkProps extends AnchorAttributes {
reload?: boolean;
replaceState?: boolean;
scroll?: boolean;
/// Is this a link to the current app?
/// If so than we need to prevent:default (but only if no modifier keys are pressed)
'link:app'?: boolean;
}
4 changes: 2 additions & 2 deletions packages/qwik-city/runtime/src/spa-init.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,9 @@ export default $((currentScript: HTMLScriptElement) => {
if (currentPath !== location.pathname + location.search) {
// Hook into useNavigate context, if available.
// We hijack a <Link> here, goes through the loader, resumes, app, etc. Simple.
// TODO Will only work with <Link>, is there a better way? Will `q:key` change?
// TODO Will only work with <Link>, is there a better way?
const container = currentScript!.closest('[q\\:container]')!;
const link = container.querySelector('a[q\\:key="AD_1"]');
const link = container.querySelector('a[q\\:link]');

if (link) {
// Re-acquire container, link may be in a nested container.
Expand Down
Loading