feat(preloader): add @builder.io/qwik/preloader

separate shared chunk that does preloading and is also imported by qwik

Author: wmertens

packages/docs/src/repl/bundled.tsx

@@ -14,6 +14,7 @@ import qCoreDts from '../../node_modules/@builder.io/qwik/dist/core.d.ts?raw-sou
 import qCoreMinMjs from '../../node_modules/@builder.io/qwik/dist/core.min.mjs?raw-source';
 import qCoreMjs from '../../node_modules/@builder.io/qwik/dist/core.mjs?raw-source';
 import qOptimizerCjs from '../../node_modules/@builder.io/qwik/dist/optimizer.cjs?raw-source';
+import qPreloaderMjs from '../../node_modules/@builder.io/qwik/dist/preloader.mjs?raw-source';
 import qServerCjs from '../../node_modules/@builder.io/qwik/dist/server.cjs?raw-source';
 import qServerDts from '../../node_modules/@builder.io/qwik/dist/server.d.ts?raw-source';
 import qWasmCjs from '../../node_modules/@builder.io/qwik/bindings/qwik.wasm.cjs?raw-source';
@@ -55,6 +56,7 @@ export const bundled: PkgUrls = {
     '/dist/optimizer.cjs': qOptimizerCjs,
     '/dist/server.cjs': qServerCjs,
     '/dist/server.d.ts': qServerDts,
+    '/dist/preloader.mjs': qPreloaderMjs,
     '/bindings/qwik.wasm.cjs': qWasmCjs,
     '/bindings/qwik_wasm_bg.wasm': qWasmBinUrl,
   },

packages/docs/src/repl/worker/repl-plugins.ts

@@ -29,6 +29,9 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
       if (id === '@builder.io/qwik/server') {
         return '\0qwikServer';
       }
+      if (id === '@builder.io/qwik/preloader') {
+        return '\0qwikPreloader';
+      }
       // Simple relative file resolution
       if (id.startsWith('./')) {
         const extensions = ['', '.tsx', '.ts'];
@@ -69,6 +72,12 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
         }
         throw new Error(`Unable to load Qwik core`);
       }
+      if (id === '\0qwikPreloader') {
+        const rsp = await depResponse('@builder.io/qwik', '/preloader.mjs');
+        if (rsp) {
+          return rsp.text();
+        }
+      }
 
       // We're the fallback, we know all the files
       if (/\.[jt]sx?$/.test(id)) {

packages/docs/src/routes/api/qwik-optimizer/api.json

@@ -434,7 +434,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "The metadata of the build. One of its uses is storing where QRL symbols are located.\n\n\n```typescript\nexport interface QwikManifest \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[bundles](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[fileName: string\\]: [QwikBundle](#qwikbundle)<!-- -->; }\n\n\n</td><td>\n\nAll code bundles, used to know the import graph\n\n\n</td></tr>\n<tr><td>\n\n[injections?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[GlobalInjections](#globalinjections)<!-- -->\\[\\]\n\n\n</td><td>\n\n_(Optional)_ CSS etc to inject in the document head\n\n\n</td></tr>\n<tr><td>\n\n[manifestHash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nContent hash of the manifest, if this changes, the code changed\n\n\n</td></tr>\n<tr><td>\n\n[mapping](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: string; }\n\n\n</td><td>\n\nWhere QRLs are located\n\n\n</td></tr>\n<tr><td>\n\n[options?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ target?: string; buildMode?: string; entryStrategy?: { \\[key: string\\]: any; }; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[platform?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[name: string\\]: string; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[symbols](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: [QwikSymbol](#qwiksymbol)<!-- -->; }\n\n\n</td><td>\n\nQRL symbols\n\n\n</td></tr>\n<tr><td>\n\n[version](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
+      "content": "The metadata of the build. One of its uses is storing where QRL symbols are located.\n\n\n```typescript\nexport interface QwikManifest \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[bundles](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[fileName: string\\]: [QwikBundle](#qwikbundle)<!-- -->; }\n\n\n</td><td>\n\nAll code bundles, used to know the import graph\n\n\n</td></tr>\n<tr><td>\n\n[injections?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[GlobalInjections](#globalinjections)<!-- -->\\[\\]\n\n\n</td><td>\n\n_(Optional)_ CSS etc to inject in the document head\n\n\n</td></tr>\n<tr><td>\n\n[manifestHash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nContent hash of the manifest, if this changes, the code changed\n\n\n</td></tr>\n<tr><td>\n\n[mapping](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: string; }\n\n\n</td><td>\n\nWhere QRLs are located\n\n\n</td></tr>\n<tr><td>\n\n[options?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ target?: string; buildMode?: string; entryStrategy?: { \\[key: string\\]: any; }; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[platform?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[name: string\\]: string; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[preloader?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ The preloader bundle\n\n\n</td></tr>\n<tr><td>\n\n[symbols](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: [QwikSymbol](#qwiksymbol)<!-- -->; }\n\n\n</td><td>\n\nQRL symbols\n\n\n</td></tr>\n<tr><td>\n\n[version](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
       "mdFile": "qwik.qwikmanifest.md"
     },

packages/docs/src/routes/api/qwik-optimizer/index.md

@@ -1463,6 +1463,21 @@ _(Optional)_
 </td></tr>
 <tr><td>
 
+[preloader?](#)
+
+</td><td>
+
+</td><td>
+
+string
+
+</td><td>
+
+_(Optional)_ The preloader bundle
+
+</td></tr>
+<tr><td>
+
 [symbols](#)
 
 </td><td>

packages/qwik-city/src/buildtime/vite/get-route-imports.ts

@@ -12,15 +12,15 @@ export function getRouteImports(routes: BuildRoute[], manifest: QwikManifest) {
       : [];
     const routeAndLayoutPaths = [routePath, ...layoutPaths];
 
-    const imports = [];
+    const bundles = [];
 
     for (const [bundleName, bundle] of Object.entries(manifest.bundles)) {
       if (isBundlePartOfRoute(bundle, routeAndLayoutPaths)) {
-        imports.push(bundleName);
+        bundles.push(bundleName);
       }
     }
-    if (imports.length > 0) {
-      result[route.routeName] = { imports };
+    if (bundles.length > 0) {
+      result[route.routeName] = { dynamicImports: bundles };
     }
   });
   for (const bundleName of Object.keys(manifest.bundles)) {

packages/qwik-city/src/buildtime/vite/get-route-imports.unit.ts

@@ -56,12 +56,12 @@ describe('modifyBundleGraph', () => {
     expect(actualResult).toMatchInlineSnapshot(`
       {
         "/": {
-          "imports": [
+          "dynamicImports": [
             "fake-bundle1.js",
           ],
         },
         "/subroute": {
-          "imports": [
+          "dynamicImports": [
             "fake-bundle-part-of-sub-route.js",
             "fake-bundle-part-of-layout.js",
           ],
@@ -102,7 +102,7 @@ describe('modifyBundleGraph', () => {
     expect(actualResult).toMatchInlineSnapshot(`
       {
         "/": {
-          "imports": [
+          "dynamicImports": [
             "fake-bundle1.js",
             "fake-bundle2.js",
           ],

packages/qwik-city/src/runtime/src/client-navigate.ts

@@ -1,4 +1,6 @@
-import { isBrowser, _preload } from '@builder.io/qwik';
+import { isBrowser } from '@builder.io/qwik';
+// @ts-expect-error we don't have types for the preloader yet
+import { p as preload } from '@builder.io/qwik/preloader';
 import type { NavigationType, ScrollState } from './types';
 import { isSamePath, toPath } from './utils';
 
@@ -43,6 +45,6 @@ export const prefetchSymbols = (path: string) => {
   if (isBrowser) {
     path = path.endsWith('/') ? path : path + '/';
     path = path.length > 1 && path.startsWith('/') ? path.slice(1) : path;
-    _preload(path, true);
+    preload(path);
   }
 };

packages/qwik-labs/src-vite/insights/index.ts

@@ -1,4 +1,4 @@
-import { type QwikVitePlugin } from '@builder.io/qwik/optimizer';
+import { type QwikVitePlugin, type SmartEntryStrategy } from '@builder.io/qwik/optimizer';
 import { existsSync, mkdirSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
 import { join, resolve } from 'node:path';
@@ -63,9 +63,6 @@ export async function qwikInsights(qwikInsightsOpts: {
           throw new Error('Missing vite-plugin-qwik');
         }
         const opts = qwikVitePlugin.api.getOptions();
-        if (opts.entryStrategy.type !== 'smart') {
-          return;
-        }
         if (isProd) {
           try {
             const qManifest: InsightManifest = { manual: {}, prefetch: [] };
@@ -85,9 +82,12 @@ export async function qwikInsights(qwikInsightsOpts: {
         }
 
         if (data) {
-          opts.entryStrategy.manual = { ...data.manual, ...opts.entryStrategy.manual };
+          (opts.entryStrategy as SmartEntryStrategy).manual = {
+            ...data.manual,
+            ...(opts.entryStrategy as SmartEntryStrategy).manual,
+          };
 
-          qwikVitePlugin.api.registerBundleGraphAdder(() => {
+          qwikVitePlugin.api.registerBundleGraphAdder((manifest) => {
             const result: Record<
               string,
               { imports?: string[] | undefined; dynamicImports?: string[] | undefined }
@@ -101,7 +101,7 @@ export async function qwikInsights(qwikInsightsOpts: {
                 if (!route.endsWith('/')) {
                   route += '/';
                 }
-                result[route] = { imports: item.symbols };
+                result[route] = { ...manifest.bundles[route], imports: item.symbols };
               }
             }
             return result;

packages/qwik/package.json

@@ -109,6 +109,9 @@
       "import": "./dist/optimizer.mjs",
       "require": "./dist/optimizer.cjs"
     },
+    "./preloader": {
+      "import": "./dist/preloader.mjs"
+    },
     "./server.cjs": "./dist/server.cjs",
     "./server.mjs": "./dist/server.mjs",
     "./server": {

packages/qwik/src/core/api.md

@@ -624,9 +624,6 @@ export const PrefetchServiceWorker: (opts: {
     nonce?: string;
 }) => JSXNode_2<'script'>;
 
-// @internal (undocumented)
-export const _preload: (name: string, priority: boolean) => void;
-
 // @public (undocumented)
 export interface ProgressHTMLAttributes<T extends Element> extends Attrs<'progress', T> {
 }