diff --git a/.changeset/fuzzy-pumas-end.md b/.changeset/fuzzy-pumas-end.md new file mode 100644 index 000000000000..9d204286ec33 --- /dev/null +++ b/.changeset/fuzzy-pumas-end.md @@ -0,0 +1,5 @@ +--- +'@builder.io/qwik': patch +--- + +Support fetchpriority attribute for linkInsert prefetch strategy diff --git a/packages/docs/src/routes/api/qwik-server/api.json b/packages/docs/src/routes/api/qwik-server/api.json index 4b827313a195..0d2674684584 100644 --- a/packages/docs/src/routes/api/qwik-server/api.json +++ b/packages/docs/src/routes/api/qwik-server/api.json @@ -82,7 +82,7 @@ } ], "kind": "Interface", - "content": "```typescript\nexport interface PrefetchImplementation \n```\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[linkInsert?](#)\n\n\n\n\n\n\n\n'js-append' \\| 'html-append' \\| null\n\n\n\n\n_(Optional)_ `js-append`: Use JS runtime to create each `` and append to the body.\n\n`html-append`: Render each `` within html, appended at the end of the body.\n\n\n
\n\n[linkRel?](#)\n\n\n\n\n\n\n\n'prefetch' \\| 'preload' \\| 'modulepreload' \\| null\n\n\n\n\n_(Optional)_ Value of the `` attribute when link is used. Defaults to `prefetch` if links are inserted.\n\n\n
\n\n[prefetchEvent?](#)\n\n\n\n\n\n\n\n'always' \\| null\n\n\n\n\n_(Optional)_ Dispatch a `qprefetch` event with detail data containing the bundles that should be prefetched. The event dispatch script will be inlined into the document's HTML so any listeners of this event should already be ready to handle the event.\n\nThis implementation will inject a script similar to:\n\n```\n\n```\nBy default, the `prefetchEvent` implementation will be set to `always`.\n\n\n
\n\n[workerFetchInsert?](#)\n\n\n\n\n\n\n\n'always' \\| 'no-link-support' \\| null\n\n\n\n\n_(Optional)_ `always`: Always include the worker fetch JS runtime.\n\n`no-link-support`: Only include the worker fetch JS runtime when the browser doesn't support `` prefetch/preload/modulepreload.\n\n\n
", + "content": "```typescript\nexport interface PrefetchImplementation \n```\n\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[linkFetchPriority?](#)\n\n\n\n\n\n\n\n'auto' \\| 'low' \\| 'high' \\| null\n\n\n\n\n_(Optional)_ Value of the `` attribute when link is used. Defaults to `null` if links are inserted.\n\n\n
\n\n[linkInsert?](#)\n\n\n\n\n\n\n\n'js-append' \\| 'html-append' \\| null\n\n\n\n\n_(Optional)_ `js-append`: Use JS runtime to create each `` and append to the body.\n\n`html-append`: Render each `` within html, appended at the end of the body.\n\n\n
\n\n[linkRel?](#)\n\n\n\n\n\n\n\n'prefetch' \\| 'preload' \\| 'modulepreload' \\| null\n\n\n\n\n_(Optional)_ Value of the `` attribute when link is used. Defaults to `prefetch` if links are inserted.\n\n\n
\n\n[prefetchEvent?](#)\n\n\n\n\n\n\n\n'always' \\| null\n\n\n\n\n_(Optional)_ Dispatch a `qprefetch` event with detail data containing the bundles that should be prefetched. The event dispatch script will be inlined into the document's HTML so any listeners of this event should already be ready to handle the event.\n\nThis implementation will inject a script similar to:\n\n```\n\n```\nBy default, the `prefetchEvent` implementation will be set to `always`.\n\n\n
\n\n[workerFetchInsert?](#)\n\n\n\n\n\n\n\n'always' \\| 'no-link-support' \\| null\n\n\n\n\n_(Optional)_ `always`: Always include the worker fetch JS runtime.\n\n`no-link-support`: Only include the worker fetch JS runtime when the browser doesn't support `` prefetch/preload/modulepreload.\n\n\n
", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/server/types.ts", "mdFile": "qwik.prefetchimplementation.md" }, diff --git a/packages/docs/src/routes/api/qwik-server/index.md b/packages/docs/src/routes/api/qwik-server/index.md index a20bdbca343d..819658c38ecb 100644 --- a/packages/docs/src/routes/api/qwik-server/index.md +++ b/packages/docs/src/routes/api/qwik-server/index.md @@ -233,6 +233,21 @@ Description +[linkFetchPriority?](#) + + + + + +'auto' \| 'low' \| 'high' \| null + + + +_(Optional)_ Value of the `` attribute when link is used. Defaults to `null` if links are inserted. + + + + [linkInsert?](#) diff --git a/packages/docs/src/routes/api/qwik/api.json b/packages/docs/src/routes/api/qwik/api.json index c0ea1e399df9..381b20888d6f 100644 --- a/packages/docs/src/routes/api/qwik/api.json +++ b/packages/docs/src/routes/api/qwik/api.json @@ -1760,7 +1760,7 @@ } ], "kind": "Function", - "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n base?: string;\n manifestHash?: string;\n manifestURL?: string;\n nonce?: string;\n}) => JSXNode<\"script\">\n```\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\nopts\n\n\n\n\n{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; }\n\n\n\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n
\n**Returns:**\n\n[JSXNode](#jsxnode)<\"script\">", + "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n base?: string;\n manifestHash?: string;\n manifestURL?: string;\n nonce?: string;\n}) => JSXNode<\"script\">\n```\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\nopts\n\n\n\n\n{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; }\n\n\n\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n
\n**Returns:**\n\nJSXNode<\"script\">", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts", "mdFile": "qwik.prefetchgraph.md" }, diff --git a/packages/docs/src/routes/docs/(qwik)/advanced/modules-prefetching/index.mdx b/packages/docs/src/routes/docs/(qwik)/advanced/modules-prefetching/index.mdx index 41fa22c0153c..18b263987dd0 100644 --- a/packages/docs/src/routes/docs/(qwik)/advanced/modules-prefetching/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/advanced/modules-prefetching/index.mdx @@ -78,6 +78,7 @@ export default function (opts: RenderToStreamOptions) { | `prefetchEvent` | Dispatch a `qprefetch` event with `detail` data containing the urls that should be prefetched. The event dispatch script will be inlined into the document's HTML. By default, the `prefetchEvent` implementation will be set to `always`. | | `linkInsert` | Insert the `` element into the document. When using `html-append`, it will render each `` directly within the html, appended at the end of the body. Using the `js-append` option, it will instead insert some JavaScript, which creates the elements at runtime and appends them at the end of the body. | | `linkRel` | This option is used to define the [`rel` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) of the `` element. When the `linkInsert` option is used, the default is `prefetch`. Other options include `preload` and `modulepreload`. | +| `linkFetchPriority` | This option is used to define the [`fetchpriority` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#fetchpriority) of the `` element. When the `linkInsert` option is used, the default is `null`. Other options include `low`, `high` and `auto`. | | `workerFetchInsert` | Prefetch urls by calling a `fetch()` for each module, with the goal of populating the network cache. | #### Dispatched Prefetch Event diff --git a/packages/qwik/src/optimizer/src/qwik-binding-map.ts b/packages/qwik/src/optimizer/src/qwik-binding-map.ts index cceeb2736682..b1233616d769 100644 --- a/packages/qwik/src/optimizer/src/qwik-binding-map.ts +++ b/packages/qwik/src/optimizer/src/qwik-binding-map.ts @@ -30,15 +30,5 @@ export const QWIK_BINDING_MAP = { "platformArchABI": "qwik.win32-x64-msvc.node" } ] - }, - "linux": { - "x64": [ - { - "platform": "linux", - "arch": "x64", - "abi": "gnu", - "platformArchABI": "qwik.linux-x64-gnu.node" - } - ] } }; diff --git a/packages/qwik/src/server/api.md b/packages/qwik/src/server/api.md index 3de7e5176681..4e0a9fbb0a38 100644 --- a/packages/qwik/src/server/api.md +++ b/packages/qwik/src/server/api.md @@ -43,6 +43,7 @@ export type InOrderStreaming = InOrderAuto | InOrderDisabled | InOrderDirect; // @public (undocumented) export interface PrefetchImplementation { + linkFetchPriority?: 'auto' | 'low' | 'high' | null; linkInsert?: 'js-append' | 'html-append' | null; linkRel?: 'prefetch' | 'preload' | 'modulepreload' | null; prefetchEvent?: 'always' | null; diff --git a/packages/qwik/src/server/prefetch-implementation.ts b/packages/qwik/src/server/prefetch-implementation.ts index 1a159f1cdab9..ac401c104050 100644 --- a/packages/qwik/src/server/prefetch-implementation.ts +++ b/packages/qwik/src/server/prefetch-implementation.ts @@ -75,11 +75,15 @@ function linkHtmlImplementation( ) { const urls = flattenPrefetchResources(prefetchResources); const rel = prefetchImpl.linkRel || 'prefetch'; + const priority = prefetchImpl.linkFetchPriority; for (const url of urls) { const attributes: Record = {}; attributes['href'] = url; attributes['rel'] = rel; + if (priority) { + attributes['fetchpriority'] = priority; + } if (rel === 'prefetch' || rel === 'preload') { if (url.endsWith('.js')) { attributes['as'] = 'script'; @@ -101,6 +105,7 @@ function linkJsImplementation( nonce?: string ) { const rel = prefetchImpl.linkRel || 'prefetch'; + const priority = prefetchImpl.linkFetchPriority; let s = ``; if (prefetchImpl.workerFetchInsert === 'no-link-support') { @@ -113,6 +118,9 @@ function linkJsImplementation( s += `const l=document.createElement('link');`; s += `l.setAttribute("href",u);`; s += `l.setAttribute("rel","${rel}");`; + if (priority) { + s += `l.setAttribute("fetchpriority","${priority}");`; + } if (prefetchImpl.workerFetchInsert === 'no-link-support') { s += `if(i===0){`; @@ -173,6 +181,7 @@ function normalizePrefetchImplementation( const PrefetchImplementationDefault: Required = { linkInsert: null, linkRel: null, + linkFetchPriority: null, workerFetchInsert: null, prefetchEvent: 'always', }; diff --git a/packages/qwik/src/server/types.ts b/packages/qwik/src/server/types.ts index cd8acfd5561b..c9158054cb63 100644 --- a/packages/qwik/src/server/types.ts +++ b/packages/qwik/src/server/types.ts @@ -32,6 +32,11 @@ export interface PrefetchImplementation { * are inserted. */ linkRel?: 'prefetch' | 'preload' | 'modulepreload' | null; + /** + * Value of the `` attribute when link is used. Defaults to `null` if + * links are inserted. + */ + linkFetchPriority?: 'auto' | 'low' | 'high' | null; /** * `always`: Always include the worker fetch JS runtime. *