fix: vite plugin client to ssr manifest (#490)

Author: adamdbradley

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "qwik-monorepo",
-  "version": "0.0.20-3",
+  "version": "0.0.20-4",
   "scripts": {
     "build": "yarn node scripts --tsc --build --platform-binding-wasm-copy",
     "build.full": "yarn node scripts --tsc --build --api --eslint --platform-binding --wasm",

packages/create-qwik/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.20-3",
+  "version": "0.0.20-4",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": "create-qwik",
   "main": "index.js",

packages/eslint-plugin-qwik/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-qwik",
-  "version": "0.0.20-3",
+  "version": "0.0.20-4",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
   "main": "index.js",
   "author": "",

packages/qwik/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/qwik",
-  "version": "0.0.20-3",
+  "version": "0.0.20-4",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
   "main": "./dist/core.cjs",
   "module": "./dist/core.mjs",

packages/qwik/src/optimizer/src/platform.ts

@@ -27,7 +27,7 @@ export async function getSystem() {
   sys.path = createPath(sys);
 
   if (globalThis.IS_ESM) {
-    sys.dynamicImport = (path: string) => import(path);
+    sys.dynamicImport = (path) => import(path);
   }
 
   if (globalThis.IS_CJS) {
@@ -39,7 +39,7 @@ export async function getSystem() {
       if (typeof TextEncoder === 'undefined') {
         // TextEncoder/TextDecoder needs to be on the global scope for the WASM file
         // https://nodejs.org/api/util.html#class-utiltextdecoder
-        const nodeUtil: any = sys.dynamicImport('util');
+        const nodeUtil: typeof import('util') = await sys.dynamicImport('util');
         global.TextEncoder = nodeUtil.TextEncoder;
         global.TextDecoder = nodeUtil.TextDecoder;
       }

packages/qwik/src/optimizer/src/plugins/plugin.ts

@@ -525,27 +525,9 @@ export const isBrowser = ${JSON.stringify(!isServer)};
 
   async function getQwikServerManifestModule(loadOpts: { ssr?: boolean }) {
     const isServer = opts.target === 'ssr' || !!loadOpts.ssr;
-
-    let manifest = opts.manifestInput;
-    if (isServer) {
-      const sys = getSys();
-      if (!manifest && sys.env === 'node') {
-        // manifest not provided, and in a nodejs environment
-        try {
-          // check if we can find q-manifest.json from the client build
-          const fs: typeof import('fs') = await sys.dynamicImport('fs');
-          const qSymbolsPath = sys.path.join(opts.outDir, Q_MANIFEST_FILENAME);
-          const qSymbolsContent = fs.readFileSync(qSymbolsPath, 'utf-8');
-          manifest = getValidManifest(JSON.parse(qSymbolsContent))!;
-        } catch (e) {
-          /** */
-        }
-      }
-    }
-
+    const manifest = isServer ? opts.manifestInput : null;
     return `// @qwik-client-manifest
-export const manifest = ${JSON.stringify(manifest)};
-`;
+export const manifest = ${JSON.stringify(manifest)};\n`;
   }
 
   return {

packages/qwik/src/optimizer/src/plugins/vite.ts

@@ -22,8 +22,7 @@ import { versions } from '../versions';
 export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
   let isClientDevOnly = false;
   let clientDevInput: undefined | string = undefined;
-  let serverInput: undefined | string = undefined;
-  let ssrInput: undefined | string = undefined;
+  let tmpClientManifestPath: undefined | string = undefined;
 
   const qwikPlugin = createPlugin(qwikViteOpts.optimizerOptions);
 
@@ -39,6 +38,9 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
     async config(viteConfig, viteEnv) {
       await qwikPlugin.init();
 
+      const sys = qwikPlugin.getSys();
+      const path = qwikPlugin.getPath();
+
       qwikPlugin.log(`vite config(), command: ${viteEnv.command}, env.mode: ${viteEnv.mode}`);
 
       isClientDevOnly = viteEnv.command === 'serve' && viteEnv.mode !== 'ssr';
@@ -91,19 +93,29 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
         pluginOpts.manifestOutput = qwikViteOpts.client?.manifestOutput;
       }
 
-      const opts = qwikPlugin.normalizeOptions(pluginOpts);
-      const path = qwikPlugin.getPath();
-
-      if (opts.target === 'ssr') {
-        if (typeof viteConfig.build?.ssr === 'string') {
-          // entry.express.tsx user config
-          serverInput = opts.input[0];
-        } else {
-          // entry.ssr.tsx render() input
-          ssrInput = opts.input[0];
+      if (sys.env === 'node') {
+        // In a NodeJs environment, create a path to a q-manifest.json file within the
+        // OS tmp directory. This path should always be the same for both client and ssr.
+        // Client build will write to this path, and SSR will read from it. For this reason,
+        // the Client build should always start and finish before the SSR build.
+        const nodeOs: typeof import('os') = await sys.dynamicImport('os');
+        tmpClientManifestPath = path.join(nodeOs.tmpdir(), `vite-plugin-qwik-q-manifest.json`);
+
+        if (target === 'ssr' && !pluginOpts.manifestInput) {
+          // This is a SSR build so we should load the client build's manifest
+          // so it can be used as the manifestInput of the SSR build
+          const fs: typeof import('fs') = await sys.dynamicImport('fs');
+          try {
+            const clientManifestStr = await fs.promises.readFile(tmpClientManifestPath, 'utf-8');
+            pluginOpts.manifestInput = JSON.parse(clientManifestStr);
+          } catch (e) {
+            /**/
+          }
         }
       }
 
+      const opts = qwikPlugin.normalizeOptions(pluginOpts);
+
       if (typeof qwikViteOpts.client?.devInput === 'string') {
         clientDevInput = path.resolve(opts.rootDir, qwikViteOpts.client.devInput);
       } else {
@@ -214,7 +226,6 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
 
     async generateBundle(_, rollupBundle) {
       const opts = qwikPlugin.getOptions();
-      const path = qwikPlugin.getPath();
 
       const outputAnalyzer = qwikPlugin.createOutputAnalyzer();
 
@@ -241,15 +252,23 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
 
       if (opts.target === 'client') {
         // client build
+        const clientManifestStr = JSON.stringify(manifest, null, 2);
         this.emitFile({
           type: 'asset',
           fileName: Q_MANIFEST_FILENAME,
-          source: JSON.stringify(manifest, null, 2),
+          source: clientManifestStr,
         });
 
         if (typeof opts.manifestOutput === 'function') {
           await opts.manifestOutput(manifest);
         }
+
+        const sys = qwikPlugin.getSys();
+        if (tmpClientManifestPath && sys.env === 'node') {
+          // Client build should write the manifest to a tmp dir
+          const fs: typeof import('fs') = await sys.dynamicImport('fs');
+          await fs.promises.writeFile(tmpClientManifestPath, clientManifestStr);
+        }
       }
     },
 
@@ -329,7 +348,7 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
 
             qwikPlugin.log(`handleSSR()`, 'symbols', manifest);
 
-            const renderInputModule = await server.moduleGraph.getModuleByUrl(ssrInput!);
+            const renderInputModule = await server.moduleGraph.getModuleByUrl(opts.input[0]!);
             if (renderInputModule) {
               renderInputModule.importedModules.forEach((moduleNode) => {
                 if (moduleNode.url.endsWith('.css')) {

yarn.lock

@@ -722,7 +722,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@builder.io/[email protected], @builder.io/qwik@workspace:packages/qwik":
+"@builder.io/qwik@npm:0.0.20-3":
+  version: 0.0.20-3
+  resolution: "@builder.io/qwik@npm:0.0.20-3"
+  checksum: 58f12ee450ae3970cc51b4dda2fd7f09211973d4f25bd3a937b9aac87f7295c5d8697d11fc1e2a5b8829aff7c1e34d158381106b388e7a9d908c25dddab39813
+  languageName: node
+  linkType: hard
+
+"@builder.io/qwik@workspace:packages/qwik":
   version: 0.0.0-use.local
   resolution: "@builder.io/qwik@workspace:packages/qwik"
   languageName: unknown