Skip to content

Commit

Permalink
add magic attr to select Link
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordanw66
jordanw66 committed Mar 17, 2024
1 parent 9959b18 commit ad46a8f
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 39 deletions.
19 changes: 1 addition & 18 deletions packages/docs/src/routes/api/qwik-city/api.json
View file
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
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
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
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
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

0 comments on commit ad46a8f

Please sign in to comment.