fix(dev): vite base and qrl segment fixes

- fixes nx monorepo path lookup in dev mode
- fix vite prefix for css etc
- fix qrl segment path encoding for windows in dev mode
- only pass parent filename since path is always the same
- simplify resolveId path handling
- change starter to only add service worker in production
- add base url to manifest

Author: wmertens

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

@@ -494,17 +494,28 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
         }
         return;
       }
-      let isAbsoluteDevFile;
+      importerId = normalizePath(importerId);
+      const parsedImporterId = parseId(importerId);
+      const dir = path.dirname(parsedImporterId.pathId);
       if (opts.target === 'ssr' && !isSSR && importerId.endsWith('.html') && server) {
         // This is a request from a dev-mode browser
         // we uri-encode chunk paths in dev mode, and other imported files don't have % in their paths (hopefully)
         // These will be individual source files and their QRL segments
         id = decodeURIComponent(id);
+        // Support absolute paths for qrl segments, due to e.g. pnpm linking
+        const isAbsoluteFile = id.startsWith('/@fs/');
+        if (isAbsoluteFile) {
+          id = id.slice(4);
+        }
         // Check for parent passed via QRL
         const match = /^([^?]*)\?_qrl_parent=(.*)/.exec(id);
         if (match) {
           id = match[1];
-          const parentId = match[2];
+          const parentId = id.slice(0, id.lastIndexOf('/') + 1) + match[2];
+          if (!isAbsoluteFile) {
+            // We know for sure that the path is relative to the html importer even though it starts with /
+            id = normalizePath(path.join(dir, id));
+          }
           // building here via ctx.load doesn't seem to work (target is always ssr?)
           // instead we use the devserver directly
           if (!clientResults.has(parentId)) {
@@ -513,41 +524,20 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
             // The QRL segment should exist now
           }
         }
-        // Support absolute paths for qrl segments, due to e.g. pnpm linking
-        isAbsoluteDevFile = id.startsWith('/@fs/');
-        if (isAbsoluteDevFile) {
-          id = id.slice(4);
-        }
       }
       const parsedId = parseId(id);
       let importeePathId = normalizePath(parsedId.pathId);
-      if (isAbsoluteDevFile) {
+      const ext = path.extname(importeePathId).toLowerCase();
+      if (ext in RESOLVE_EXTS) {
+        debug(`resolveId("${importeePathId}", "${importerId}")`);
+        // resolve relative paths
+        importeePathId = normalizePath(path.resolve(dir, importeePathId));
+
         if (transformedOutputs.has(importeePathId)) {
           debug(`resolveId() Resolved ${importeePathId} from transformedOutputs`);
-          return { id: importeePathId + parsedId.query };
-        }
-        // fall through to standard resolve
-      } else {
-        const ext = path.extname(importeePathId).toLowerCase();
-        if (ext in RESOLVE_EXTS) {
-          importerId = normalizePath(importerId);
-          debug(`resolveId("${importeePathId}", "${importerId}")`);
-          const parsedImporterId = parseId(importerId);
-          const dir = path.dirname(parsedImporterId.pathId);
-          if (parsedImporterId.pathId.endsWith('.html') && !importeePathId.endsWith('.html')) {
-            // dev mode browser requests, add rootDir
-            importeePathId = normalizePath(path.join(dir, importeePathId));
-          } else {
-            importeePathId = normalizePath(path.resolve(dir, importeePathId));
-          }
-          const transformedOutput = transformedOutputs.get(importeePathId);
-
-          if (transformedOutput) {
-            debug(`resolveId() Resolved ${importeePathId} from transformedOutputs`);
-            return {
-              id: importeePathId + parsedId.query,
-            };
-          }
+          return {
+            id: importeePathId + parsedId.query,
+          };
         }
       }
     } else if (path.isAbsolute(id)) {
@@ -556,9 +546,8 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
       const ext = path.extname(importeePathId).toLowerCase();
       if (ext in RESOLVE_EXTS) {
         debug(`resolveId("${importeePathId}", "${importerId}")`);
-        const transformedOutput = transformedOutputs.get(importeePathId);
 
-        if (transformedOutput) {
+        if (transformedOutputs.has(importeePathId)) {
           debug(`resolveId() Resolved ${importeePathId} from transformedOutputs`);
           return {
             id: importeePathId + parsedId.query,
@@ -929,20 +918,20 @@ export function parseId(originalId: string) {
   };
 }
 
-const TRANSFORM_EXTS: { [ext: string]: boolean } = {
+const TRANSFORM_EXTS = {
   '.jsx': true,
   '.ts': true,
   '.tsx': true,
-};
+} as const;
 
-const RESOLVE_EXTS: { [ext: string]: boolean } = {
+const RESOLVE_EXTS = {
   '.tsx': true,
   '.ts': true,
   '.jsx': true,
   '.js': true,
   '.mjs': true,
   '.cjs': true,
-};
+} as const;
 
 const TRANSFORM_REGEX = /\.qwik\.[mc]?js$/;
 

packages/qwik/src/optimizer/src/plugins/vite-dev-server.ts

@@ -126,7 +126,7 @@ export async function configureDevServer(
                   location: 'head',
                   attributes: {
                     rel: 'stylesheet',
-                    href: url,
+                    href: `${base}${url.slice(1)}`,
                   },
                 });
               }
@@ -161,12 +161,13 @@ export async function configureDevServer(
                     return [symbolName, `${base}${symbolName.toLowerCase()}.js`];
                   }
                   const parentPath = path.dirname(parent);
+                  const parentFile = path.basename(parent);
                   // DX: if the file isn't under the source dir (e.g. a symlink from node_modules)
                   // use the full path, otherwise relative to the source
                   const qrlPath = parentPath.startsWith(opts.rootDir)
-                    ? path.relative(opts.rootDir, parentPath)
-                    : `@fs${parentPath}`;
-                  const qrlFile = `${encode(qrlPath)}/${symbolName.toLowerCase()}.js?_qrl_parent=${encode(parent)}`;
+                    ? path.posix.normalize(path.relative(opts.rootDir, parentPath))
+                    : `@fs${path.posix.normalize(parentPath)}`;
+                  const qrlFile = `${encode(qrlPath)}/${symbolName.toLowerCase()}.js?_qrl_parent=${encode(parentFile)}`;
                   return [symbolName, `${base}${qrlFile}`];
                 },
             prefetchStrategy: null,
@@ -193,7 +194,7 @@ export async function configureDevServer(
                   pathId.endsWith(ext)
                 )
               ) {
-                res.write(`<link rel="stylesheet" href="${v.url}">`);
+                res.write(`<link rel="stylesheet" href="${base}${v.url.slice(1)}">`);
               }
             });
           });

starters/apps/basic/src/root.tsx

@@ -1,4 +1,5 @@
 import { component$ } from "@builder.io/qwik";
+import { isDev } from "@builder.io/qwik/build";
 import {
   QwikCityProvider,
   RouterOutlet,
@@ -20,9 +21,14 @@ export default component$(() => {
     <QwikCityProvider>
       <head>
         <meta charset="utf-8" />
-        <link rel="manifest" href="/manifest.json" />
+        {!isDev && (
+          <link
+            rel="manifest"
+            href={`${import.meta.env.BASE_URL}manifest.json`}
+          />
+        )}
         <RouterHead />
-        <ServiceWorkerRegister />
+        {!isDev && <ServiceWorkerRegister />}
       </head>
       <body lang="en">
         <RouterOutlet />