refactor: q-manifest for prefetching (#451)

Author: adamdbradley

packages/create-qwik/interface/log.ts

@@ -20,13 +20,17 @@ export function logResult(result: GenerateResult) {
 
   console.log(``);
 
-  console.log(`📟 ${color.cyan(`Next steps:`)}`);
+  console.log(`🤖 ${color.cyan(`Next steps:`)}`);
   if (!isCwdDir) {
     console.log(`   cd ${relativeProjectPath}`);
   }
   console.log(`   npm install`);
   console.log(`   npm start`);
   console.log(``);
+  console.log(`💬 ${color.cyan('Questions? Start the conversation at:')}`);
+  console.log(`   https://qwik.builder.io/chat`);
+  console.log(`   https://twitter.com/QwikDev`);
+  console.log(``);
 }
 
 export function panic(msg: string) {

packages/docs/functions/[[path]].ts

@@ -2,6 +2,10 @@
 
 // @ts-ignore
 import { render } from '../server/entry.server.js';
+import type { RenderToStringOptions, RenderToStringResult } from '@builder.io/qwik/server';
+
+// @ts-ignore
+import manifest from '../dist/q-manifest.json';
 
 export const onRequestGet: PagesFunction = async ({ request, next, waitUntil }) => {
   try {
@@ -11,6 +15,10 @@ export const onRequestGet: PagesFunction = async ({ request, next, waitUntil })
       return Response.redirect('https://qwik.builder.io/guide/overview', 302);
     }
 
+    if (url.pathname === '/chat') {
+      return Response.redirect('https://discord.gg/bNVSQmPzqy');
+    }
+
     // Handle static assets
     if (/\.\w+$/.test(url.pathname) || url.pathname === '/repl/') {
       return next(request);
@@ -28,13 +36,21 @@ export const onRequestGet: PagesFunction = async ({ request, next, waitUntil })
       }
     }
 
-    // Generate Qwik SSR response
-    const ssrResult = await render({
+    // Render To String Options
+    const opts: RenderToStringOptions = {
       url: request.url,
       base: '/build/',
-    });
+      manifest,
+      prefetchStrategy: {
+        symbolsToPrefetch: 'all',
+        implementation: 'worker-fetch',
+      },
+    };
+
+    // Generate Qwik SSR response
+    const result: RenderToStringResult = await render(opts);
 
-    const response = new Response(ssrResult.html, {
+    const response = new Response(result.html, {
       headers: {
         'Cross-Origin-Embedder-Policy': 'credentialless',
         'Cross-Origin-Opener-Policy': 'same-origin',

packages/docs/package.json

@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@builder.io/partytown": "^0.5.2",
-    "@builder.io/qwik": "0.0.19",
+    "@builder.io/qwik": "workspace:*",
     "@builder.io/qwik-city": "0.0.4",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "@cloudflare/workers-types": "^3.7.1",

packages/docs/src/components/repl/repl.tsx

@@ -89,10 +89,13 @@ export const Repl = component$(async (props: ReplProps) => {
     if (location.hostname === 'localhost') {
       store.iframeUrl += 'index.html';
     }
-    if (location.hostname === 'qwik.builder.io') {
-      // use a different domain on purpose
-      store.iframeUrl = 'https://qwik-docs.pages.dev' + store.iframeUrl;
-    }
+
+    // TODO: enable when this ships
+    // https://github.com/BuilderIO/qwik/commit/9fb3b9b72593c76fd80a5739a77adefd88a07651
+    // if (location.hostname === 'qwik.builder.io') {
+    //   // use a different domain on purpose
+    //   store.iframeUrl = 'https://qwik-docs.pages.dev' + store.iframeUrl;
+    // }
 
     // how do I not use window event listener here?
     window.addEventListener('message', (ev) => onMessageFromIframe(ev, store));

packages/docs/src/components/repl/types.ts

@@ -1,8 +1,4 @@
-import type {
-  Diagnostic,
-  QwikRollupPluginOptions,
-  SymbolsEntryMap,
-} from '@builder.io/qwik/optimizer';
+import type { Diagnostic, QwikRollupPluginOptions, QwikManifest } from '@builder.io/qwik/optimizer';
 import type { NoSerialize } from '@builder.io/qwik';
 
 export interface ReplInputOptions extends Omit<QwikRollupPluginOptions, 'srcDir' | 'minify'> {
@@ -59,7 +55,7 @@ export interface ReplResult {
   outputHtml: string;
   clientModules: ReplModuleOutput[];
   ssrModules: ReplModuleOutput[];
-  symbolsEntryMap: SymbolsEntryMap | null;
+  manifest: QwikManifest | undefined;
   diagnostics: Diagnostic[];
   qwikloader: string;
   docElementAttributes: ReplResultAttributes;

packages/docs/src/components/repl/worker/ssr-html.ts

@@ -20,7 +20,7 @@ export const ssrHtml = async (options: ReplInputOptions, result: ReplResult) =>
 
   const ssrResult = await server.render({
     base: '/repl/',
-    symbols: result.symbolsEntryMap,
+    manifest: result.manifest,
   });
 
   const doc = self.qwikServer.createDocument({ html: ssrResult.html });

packages/docs/src/components/repl/worker/update.ts

@@ -16,7 +16,7 @@ export const update = async (options: ReplInputOptions) => {
     type: 'result',
     outputHtml: '',
     clientModules: [],
-    symbolsEntryMap: null,
+    manifest: undefined,
     ssrModules: [],
     diagnostics: [],
     docElementAttributes: {},
@@ -61,8 +61,8 @@ const bundleClient = async (options: ReplInputOptions, result: ReplResult) => {
     debug: options.debug,
     srcInputs: options.srcInputs,
     entryStrategy: options.entryStrategy,
-    symbolsOutput: (s) => {
-      result.symbolsEntryMap = s;
+    manifestOutput: (m) => {
+      result.manifest = m;
     },
   };
   console.debug('client opts', qwikRollupClientOpts);
@@ -95,7 +95,7 @@ const bundleClient = async (options: ReplInputOptions, result: ReplResult) => {
   });
 
   result.clientModules = generated.output.map(getOutput).filter((f) => {
-    return !f.path.endsWith('app.js') && !f.path.endsWith('symbols-manifest.json');
+    return !f.path.endsWith('app.js') && !f.path.endsWith('q-manifest.json');
   });
 
   console.timeEnd(`Bundle client`);
@@ -110,7 +110,7 @@ const bundleSSR = async (options: ReplInputOptions, result: ReplResult) => {
     debug: options.debug,
     srcInputs: options.srcInputs,
     entryStrategy: options.entryStrategy,
-    symbolsInput: result.symbolsEntryMap,
+    manifestInput: result.manifest,
   };
 
   console.debug('ssr opts', qwikRollupSsrOpts);

packages/qwik/src/optimizer/src/api.md

@@ -64,15 +64,21 @@ export interface HookAnalysis {
     // (undocumented)
     canonicalFilename: string;
     // (undocumented)
-    entry: string | null;
+    captures: boolean;
+    // (undocumented)
+    ctxKind: 'event' | 'function';
+    // (undocumented)
+    ctxName: string;
     // (undocumented)
-    localDecl: string[];
+    entry: string | null;
     // (undocumented)
-    localIdents: string[];
+    extension: string;
     // (undocumented)
     name: string;
     // (undocumented)
     origin: string;
+    // (undocumented)
+    parent: string | null;
 }
 
 // @alpha (undocumented)
@@ -167,6 +173,36 @@ export interface Path {
     readonly win32: null;
 }
 
+// @alpha (undocumented)
+export interface QwikBundle {
+    // (undocumented)
+    dynamicImports?: string[];
+    // (undocumented)
+    imports?: string[];
+    // (undocumented)
+    size: number;
+}
+
+// @alpha (undocumented)
+export interface QwikManifest {
+    // (undocumented)
+    bundles: {
+        [fileName: string]: QwikBundle;
+    };
+    // (undocumented)
+    injections?: GlobalInjections[];
+    // (undocumented)
+    mapping: {
+        [symbolName: string]: string;
+    };
+    // (undocumented)
+    symbols: {
+        [symbolName: string]: QwikSymbol;
+    };
+    // (undocumented)
+    version: string;
+}
+
 // @alpha (undocumented)
 export function qwikRollup(qwikRollupOpts?: QwikRollupPluginOptions): any;
 
@@ -184,6 +220,18 @@ export interface QwikRollupPluginOptions extends BasePluginOptions {
     rootDir?: string;
 }
 
+// @alpha (undocumented)
+export interface QwikSymbol {
+    // (undocumented)
+    captures: boolean;
+    // (undocumented)
+    ctxKind: 'function' | 'event';
+    // (undocumented)
+    ctxName: string;
+    // (undocumented)
+    parent: string | null;
+}
+
 // @alpha (undocumented)
 export function qwikVite(qwikViteOpts?: QwikVitePluginOptions): any;
 
@@ -222,18 +270,6 @@ export interface SourceLocation {
 // @alpha (undocumented)
 export type SourceMapsOption = 'external' | 'inline' | undefined | null;
 
-// @alpha (undocumented)
-export interface SymbolsEntryMap {
-    // (undocumented)
-    injections?: GlobalInjections[];
-    // (undocumented)
-    mapping: {
-        [canonicalName: string]: string;
-    };
-    // (undocumented)
-    version: string;
-}
-
 // @alpha (undocumented)
 export type SystemEnvironment = 'node' | 'deno' | 'webworker' | 'browsermain' | 'unknown';
 

packages/qwik/src/optimizer/src/index.ts

@@ -15,7 +15,9 @@ export type {
   Optimizer,
   OptimizerOptions,
   OptimizerSystem,
-  SymbolsEntryMap,
+  QwikManifest,
+  QwikBundle,
+  QwikSymbol,
   SystemEnvironment,
   Path,
   SingleEntryStrategy,