|
1 | 1 | import { Fragment, jsx, type JSXNode } from '@builder.io/qwik'; |
2 | 2 | import { flattenPrefetchResources, getMostReferenced, workerFetchScript } from './prefetch-utils'; |
3 | 3 | import type { PrefetchImplementation, PrefetchResource, PrefetchStrategy } from './types'; |
| 4 | +import { makeMakePreloadLink } from '../core/qrl/preload'; |
4 | 5 |
|
5 | 6 | export function applyPrefetchImplementation( |
6 | 7 | base: string, |
@@ -31,7 +32,7 @@ export function applyPrefetchImplementation( |
31 | 32 | } |
32 | 33 |
|
33 | 34 | if (prefetchImpl.linkInsert === 'js-append') { |
34 | | - linkJsImplementation(prefetchNodes, prefetchResources, prefetchImpl, nonce); |
| 35 | + linkJsImplementation(base, manifestHash, nonce, prefetchNodes, prefetchResources, prefetchImpl); |
35 | 36 | } else if (prefetchImpl.workerFetchInsert === 'always') { |
36 | 37 | workerFetchImplementation(prefetchNodes, prefetchResources, nonce); |
37 | 38 | } |
@@ -90,7 +91,7 @@ function linkHtmlImplementation( |
90 | 91 | href: `${base}q-bundle-graph-${manifestHash}.json`, |
91 | 92 | as: 'fetch', |
92 | 93 | crossorigin: 'anonymous', |
93 | | - priority: prefetchImpl.linkFetchPriority || undefined, |
| 94 | + fetchpriority: prefetchImpl.linkFetchPriority || undefined, |
94 | 95 | }) |
95 | 96 | ); |
96 | 97 | } |
@@ -119,57 +120,48 @@ function linkHtmlImplementation( |
119 | 120 | * TODO use idle event |
120 | 121 | */ |
121 | 122 | function linkJsImplementation( |
| 123 | + base: string, |
| 124 | + manifestHash: string | undefined, |
| 125 | + nonce: string | undefined, |
122 | 126 | prefetchNodes: JSXNode[], |
123 | 127 | prefetchResources: PrefetchResource[], |
124 | | - prefetchImpl: Required<PrefetchImplementation>, |
125 | | - nonce?: string |
| 128 | + prefetchImpl: Required<PrefetchImplementation> |
126 | 129 | ) { |
127 | | - const rel = prefetchImpl.linkRel || 'modulepreload'; |
128 | | - const priority = prefetchImpl.linkFetchPriority; |
129 | | - let s = ``; |
130 | | - |
131 | | - if (prefetchImpl.workerFetchInsert === 'no-link-support') { |
132 | | - s += `let supportsLinkRel = true;`; |
133 | | - } |
134 | | - |
135 | | - s += `const u=${JSON.stringify(flattenPrefetchResources(prefetchResources).keys())};`; |
136 | | - s += `u.map((u,i)=>{`; |
137 | | - |
138 | | - s += `const l=document.createElement('link');`; |
139 | | - s += `l.setAttribute("href",u);`; |
140 | | - s += `l.setAttribute("rel","${rel}");`; |
141 | | - if (priority) { |
142 | | - s += `l.setAttribute("fetchpriority","${priority}");`; |
143 | | - } |
144 | | - |
145 | | - if (prefetchImpl.workerFetchInsert === 'no-link-support') { |
146 | | - s += `if(i===0){`; |
147 | | - s += `try{`; |
148 | | - s += `supportsLinkRel=l.relList.supports("${rel}");`; |
149 | | - s += `}catch(e){}`; |
150 | | - s += `}`; |
151 | | - } |
152 | | - |
153 | | - s += `document.body.appendChild(l);`; |
154 | | - |
155 | | - s += `});`; |
156 | | - |
157 | | - if (prefetchImpl.workerFetchInsert === 'no-link-support') { |
158 | | - s += `if(!supportsLinkRel){`; |
159 | | - s += workerFetchScript(); |
160 | | - s += `}`; |
| 130 | + const injector = makeMakePreloadLink.toString(); |
| 131 | + const urls = flattenPrefetchResources(prefetchResources); |
| 132 | + const fetchPriority = prefetchImpl.linkFetchPriority; |
| 133 | + const forceLow = fetchPriority === 'low'; |
| 134 | + const prio = []; |
| 135 | + const low = []; |
| 136 | + for (const [url, priority] of urls) { |
| 137 | + if (!priority || forceLow) { |
| 138 | + low.push(url); |
| 139 | + } else { |
| 140 | + prio.push(url); |
| 141 | + } |
161 | 142 | } |
162 | 143 |
|
163 | | - if (prefetchImpl.workerFetchInsert === 'always') { |
164 | | - s += workerFetchScript(); |
165 | | - } |
| 144 | + // Maybe this needs to be delayed |
| 145 | + const script = ` |
| 146 | + var _=(${injector})(null); |
| 147 | + ${prio.length ? `${JSON.stringify(prio)}.forEach(u=>_(u,1));` : ''} |
| 148 | + ${low.length ? `${JSON.stringify(low)}.forEach(u=>_(u,0));` : ''} |
| 149 | + `.replaceAll(/^\s+|\s*\n/gm, ''); |
166 | 150 |
|
167 | 151 | prefetchNodes.push( |
168 | 152 | jsx('script', { |
169 | 153 | type: 'module', |
170 | 154 | 'q:type': 'link-js', |
171 | | - dangerouslySetInnerHTML: s, |
| 155 | + dangerouslySetInnerHTML: script, |
172 | 156 | nonce, |
| 157 | + }), |
| 158 | + jsx('link', { |
| 159 | + rel: 'fetch', |
| 160 | + id: `qwik-bg-${manifestHash}`, |
| 161 | + href: `${base}q-bundle-graph-${manifestHash}.json`, |
| 162 | + as: 'fetch', |
| 163 | + crossorigin: 'anonymous', |
| 164 | + fetchpriority: prefetchImpl.linkFetchPriority || undefined, |
173 | 165 | }) |
174 | 166 | ); |
175 | 167 | } |
@@ -199,7 +191,7 @@ function normalizePrefetchImplementation( |
199 | 191 | } |
200 | 192 |
|
201 | 193 | const PrefetchImplementationDefault: Required<PrefetchImplementation> = { |
202 | | - linkInsert: 'html-append', |
| 194 | + linkInsert: 'js-append', |
203 | 195 | linkRel: 'modulepreload', |
204 | 196 | linkFetchPriority: null, |
205 | 197 | workerFetchInsert: null, |
|
0 commit comments