chore(vite): make devserver work

wmertens · wmertens · commit e905d3327997 · 2024-05-30T15:06:50.000+02:00
- support vite base
- build qrls on demand
diff --git a/packages/qwik/src/optimizer/src/plugins/plugin.ts b/packages/qwik/src/optimizer/src/plugins/plugin.ts
@@ -296,7 +296,6 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
     } else {
       opts.lint = updatedOpts.buildMode === 'development';
     }
-    console.dir(opts);
     return { ...opts };
   };
 
@@ -326,7 +325,6 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
   };
 
   let didAddQwikEntries = false;
-  const jsPacketIdSource = new Map<string, string>();
   const buildStart = async (ctx: Rollup.PluginContext) => {
     debug(`buildStart()`, opts.buildMode, opts.scope, opts.target);
     const optimizer = getOptimizer();
@@ -388,36 +386,20 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
           moduleSideEffects: false,
         };
       }
-      let firstInput: string;
-      if (Array.isArray(opts.input)) {
-        firstInput = opts.input[0];
-      } else {
-        firstInput = Object.values(opts.input)[0];
-      }
+
+      const firstInput = Object.values(opts.input)[0];
       return {
         id: normalizePath(getPath().resolve(firstInput, QWIK_CLIENT_MANIFEST_ID)),
         moduleSideEffects: false,
       };
     }
 
     const path = getPath();
-    const isSSR = resolveOpts?.ssr ?? opts.target === 'ssr';
+    const isSSR = !!resolveOpts?.ssr;
 
     if (importer) {
-      if (!isSSR && importer.endsWith('.html')) {
-        const match = id.match(/.js?qrl=(.*)$/);
-        console.log('dev server asking for jsPacket', path.isAbsolute(id), match);
-        if (match) {
-          const jsPacketId = match[1];
-          const sourceId = jsPacketIdSource.get(jsPacketId);
-          if (sourceId) {
-            await ctx.load({ id: sourceId });
-            // Now all jsPackets exist in the cache
-          }
-        }
-      }
-      // Only process relative links
-      if (!id.startsWith('.') && (!path.isAbsolute(id) || !importer.endsWith('.html'))) {
+      // Only process real files
+      if (!(id.startsWith('.') || path.isAbsolute(id))) {
         return;
       }
       const parsedId = parseId(id);
@@ -462,6 +444,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
         }
       }
     }
+    // we don't know what this is
     return null;
   };
   const load = async (
@@ -519,7 +502,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
       return generateQwikEntries(transformedOutputs);
     }
 
-    const isSSR = loadOpts?.ssr ?? opts.target === 'ssr';
+    const isSSR = !!loadOpts?.ssr;
     if (opts.resolveQwikBuild && id.endsWith(QWIK_BUILD_ID)) {
       debug(`load()`, QWIK_BUILD_ID, opts.buildMode);
       return {
@@ -543,31 +526,22 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
 
     if (transformedModule) {
       debug(`load()`, 'Found', id);
+      let { code } = transformedModule[0];
+      const { map, hook } = transformedModule[0];
 
-      let code = transformedModule[0].code;
-      let firstInput: string;
-      if (Array.isArray(opts.input)) {
-        firstInput = opts.input[0];
-      } else {
-        firstInput = Object.values(opts.input)[0];
-      }
       if (opts.target === 'ssr') {
+        const firstInput = Object.values(opts.input)[0];
         // doing this because vite will not use resolveId() when "noExternal" is false
         // so we need to turn the @qwik-client-manifest import into a relative import
         code = code.replace(
           /@qwik-client-manifest/g,
           normalizePath(path.resolve(firstInput, QWIK_CLIENT_MANIFEST_ID))
         );
       }
-      return {
-        code,
-        map: transformedModule[0].map,
-        meta: {
-          hook: transformedModule[0].hook,
-        },
-      };
+      return { code, map, meta: { hook } };
     }
 
+    debug('load()', 'Not found', id);
     return null;
   };
 
@@ -580,7 +554,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
     if (id.startsWith('\0') || id.startsWith('/@fs/')) {
       return;
     }
-    const isSSR = transformOpts.ssr ?? opts.target === 'ssr';
+    const isSSR = transformOpts.ssr;
     const currentOutputs = isSSR ? ssrTransformedOutputs : transformedOutputs;
     if (currentOutputs.has(id)) {
       return;
@@ -644,7 +618,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
 
       const newOutput = optimizer.transformModulesSync(transformOpts);
       // uncomment to show transform results
-      debug({ isSSR, strip }, transformOpts, newOutput);
+      // debug({ isSSR, strip }, transformOpts, newOutput);
       diagnosticsCallback(newOutput.diagnostics, optimizer, srcDir);
 
       if (isSSR) {
@@ -664,47 +638,6 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
           ctx.addWatchFile(key);
         }
       }
-      if (isSSR && strip) {
-        // We also need a client build with the server code stripped
-        // so that we know all the possible jsPackets that are used
-        const clientTransformOpts: TransformModulesOptions = {
-          input: [{ code, path: filePath }],
-          entryStrategy: opts.entryStrategy,
-          minify: 'simplify',
-          sourceMaps: opts.sourcemap || 'development' === opts.buildMode,
-          transpileTs: true,
-          transpileJsx: true,
-          explicitExtensions: true,
-          preserveFilenames: true,
-          srcDir: srcDir,
-          rootDir: opts.rootDir,
-          mode: mode,
-          scope: opts.scope ? opts.scope : void 0,
-          stripCtxName: SERVER_STRIP_CTX_NAME,
-          stripExports: SERVER_STRIP_EXPORTS,
-          isServer: false,
-        };
-        const clientNewOutput = optimizer.transformModulesSync(clientTransformOpts);
-        debug('client build', transformOpts, newOutput);
-
-        diagnosticsCallback(clientNewOutput.diagnostics, optimizer, srcDir);
-
-        results.set(normalizedID, clientNewOutput);
-        for (const mod of clientNewOutput.modules) {
-          if (isAdditionalFile(mod)) {
-            const key = normalizePath(path.join(srcDir, mod.path));
-            transformedOutputs.set(key, [mod, id]);
-            // these are in ssr context and should be in client context
-            // deps.add(key);
-            // ctx.addWatchFile(key);
-            if (mod.hook) {
-              currentOutputs.set(mod.hook.name, [mod, id]);
-              jsPacketIdSource.set(mod.hook.name, id);
-              console.log('hook', mod.hook.name.toLowerCase(), id);
-            }
-          }
-        }
-      }
 
       // Force loading generated submodules into Rollup cache so later
       // unchanged imports are not missing in our internal transform cache
@@ -779,7 +712,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
   };
 
   const debug = (...str: any[]) => {
-    if (true || opts.debug) {
+    if (opts.debug) {
       // eslint-disable-next-line no-console
       console.debug(`[QWIK PLUGIN: ${id}]`, ...str);
     }
diff --git a/packages/qwik/src/optimizer/src/plugins/vite-server.ts b/packages/qwik/src/optimizer/src/plugins/vite-server.ts
@@ -28,6 +28,7 @@ function getOrigin(req: IncomingMessage) {
 }
 
 export async function configureDevServer(
+  base: string,
   server: ViteDevServer,
   opts: NormalizedQwikPluginOptions,
   sys: OptimizerSystem,
@@ -54,7 +55,7 @@ export async function configureDevServer(
   }
 
   // qwik middleware injected BEFORE vite internal middlewares
-  server.middlewares.use(async (req: any, res: any, next: any) => {
+  server.middlewares.use(async (req, res, next) => {
     try {
       const { ORIGIN } = process.env;
       const domain = ORIGIN ?? getOrigin(req);
@@ -152,16 +153,16 @@ export async function configureDevServer(
                   if (symbolName === SYNC_QRL) {
                     return [symbolName, ''];
                   }
-                  const defaultChunk = [
-                    symbolName,
-                    `${import.meta.env.BASE_URL}${parent ? `${srcBase}/${parent}?qrl=` : '@qrl/'}${symbolName.toLowerCase()}`,
-                  ] as const;
-                  if (mapper) {
-                    const hash = getSymbolHash(symbolName);
-                    return mapper[hash] ?? defaultChunk;
-                  } else {
-                    return defaultChunk;
+                  const chunk = mapper && mapper[getSymbolHash(symbolName)];
+                  if (chunk) {
+                    return chunk;
                   }
+                  if (!parent) {
+                    console.error('unknown qrl requested without parent:', symbolName);
+                    return [symbolName, `${base}${symbolName.toLowerCase()}.js`];
+                  }
+                  const packetFile = `${path.dirname(parent)}/${symbolName.toLowerCase()}.js?_qrl_parent=/${srcBase}/${parent}`;
+                  return [symbolName, `${base}${srcBase}/${packetFile}`];
                 },
             prefetchStrategy: null,
             serverData,
@@ -206,6 +207,17 @@ export async function configureDevServer(
           next();
         }
       } else {
+        // We didn't ssr, but maybe a qrl was requested
+        const parent = url.searchParams.get('_qrl_parent');
+        if (parent && url.pathname.endsWith('.js')) {
+          // load the parent so it populates the qrl cache
+          await server.transformRequest(parent);
+          const result = await server.transformRequest(url.pathname);
+          if (result) {
+            res.write(result.code);
+            res.end();
+          }
+        }
         next();
       }
     } catch (e: any) {
diff --git a/packages/qwik/src/optimizer/src/plugins/vite.ts b/packages/qwik/src/optimizer/src/plugins/vite.ts
@@ -649,7 +649,15 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
             const opts = qwikPlugin.getOptions();
             const sys = qwikPlugin.getSys();
             const path = qwikPlugin.getPath();
-            await configureDevServer(server, opts, sys, path, isClientDevOnly, clientDevInput);
+            await configureDevServer(
+              basePathname,
+              server,
+              opts,
+              sys,
+              path,
+              isClientDevOnly,
+              clientDevInput
+            );
           };
           const isNEW = (globalThis as any).__qwikCityNew === true;
           if (isNEW) {
