feat(router): refactor dev server, allow routes hot reload

- remove separate dev-server which duplicated route processing logic, instead use node adapter
- watch routes for changes and reload when needed
-  make route imports always dynamic (optionally static). This limits the amount of code to load when not all paths are visited, and reduces startup time.
- remove .testing condition on double import, the reason was the dev-server importing core separately from the test code

Still missing:
- transformindexhtml handling
- entry.ts support
- serviceworker support

Author: wmertens

e2e/qwik-cli-e2e/tests/serve.spec.ts

@@ -33,7 +33,7 @@ for (const type of ['empty', 'playground'] as QwikProjectType[]) {
         }
         config.cleanupFn();
       };
-    });
+    }, 120000);
 
     if (type === 'playground') {
       test(

packages/qwik-router/src/buildtime/context.ts

@@ -6,7 +6,8 @@ export function createBuildContext(
   rootDir: string,
   viteBasePath: string,
   userOpts?: PluginOptions,
-  target?: 'ssr' | 'client'
+  target?: 'ssr' | 'client',
+  dynamicImports?: boolean
 ) {
   const ctx: BuildContext = {
     rootDir: normalizePath(rootDir),
@@ -20,8 +21,7 @@ export function createBuildContext(
     diagnostics: [],
     frontmatter: new Map(),
     target: target || 'ssr',
-    isDevServer: false,
-    isDevServerClientOnly: false,
+    dynamicImports: target === 'client' || !!dynamicImports,
     isDirty: true,
     activeBuild: null,
   };

packages/qwik-router/src/buildtime/runtime-generation/generate-qwik-router-config.ts

@@ -15,6 +15,7 @@ export function generateQwikRouterConfig(
   const c: string[] = [];
 
   c.push(`\n/** Qwik Router Config */`);
+  c.push(`\nimport { isDev } from '@qwik.dev/core/build';`);
 
   createServerPlugins(ctx, qwikPlugin, c, esmImports, isSSR);
 
@@ -28,11 +29,10 @@ export function generateQwikRouterConfig(
 
   c.push(`export const basePathname = ${JSON.stringify(ctx.opts.basePathname)};`);
 
-  c.push(`export const cacheModules = ${JSON.stringify(!ctx.isDevServer)};`);
+  c.push(`export const cacheModules = !isDev;`);
 
   c.push(
     `export default { routes, serverPlugins, menus, trailingSlash, basePathname, cacheModules };`
   );
-
   return esmImports.join('\n') + c.join('\n');
 }

packages/qwik-router/src/buildtime/runtime-generation/generate-routes.ts

@@ -11,7 +11,7 @@ export function createRoutes(
   isSSR: boolean
 ) {
   const includeEndpoints = isSSR;
-  const dynamicImports = ctx.target === 'client';
+  const dynamicImports = ctx.dynamicImports;
 
   if (ctx.layouts.length > 0) {
     c.push(`\n/** Qwik Router Layouts (${ctx.layouts.length}) */`);

packages/qwik-router/src/buildtime/runtime-generation/generate-service-worker.ts

@@ -3,29 +3,17 @@ import type { BuildContext } from '../types';
 export function generateServiceWorkerRegister(ctx: BuildContext, swRegister: string) {
   let swReg: string;
 
-  if (ctx.isDevServer) {
-    swReg = SW_UNREGISTER;
-  } else {
-    swReg = swRegister;
+  swReg = swRegister;
 
-    let swUrl = '/service-worker.js';
-    if (ctx.serviceWorkers.length > 0) {
-      const sw = ctx.serviceWorkers.sort((a, b) =>
-        a.chunkFileName.length < b.chunkFileName.length ? -1 : 1
-      )[0];
-      swUrl = ctx.opts.basePathname + sw.chunkFileName;
-    }
-
-    swReg = swReg.replace('__url', swUrl);
+  let swUrl = '/service-worker.js';
+  if (ctx.serviceWorkers.length > 0) {
+    const sw = ctx.serviceWorkers.sort((a, b) =>
+      a.chunkFileName.length < b.chunkFileName.length ? -1 : 1
+    )[0];
+    swUrl = ctx.opts.basePathname + sw.chunkFileName;
   }
 
+  swReg = swReg.replace('__url', swUrl);
+
   return `export default ${JSON.stringify(swReg)};`;
 }
-
-const SW_UNREGISTER = `
-navigator.serviceWorker?.getRegistrations().then((regs) => {
-  for (const reg of regs) {
-    reg.unregister();
-  }
-});
-`;

packages/qwik-router/src/buildtime/types.ts

@@ -12,8 +12,7 @@ export interface BuildContext {
   frontmatter: Map<string, FrontmatterAttrs>;
   diagnostics: Diagnostic[];
   target: 'ssr' | 'client' | undefined;
-  isDevServer: boolean;
-  isDevServerClientOnly: boolean;
+  dynamicImports: boolean;
   isDirty: boolean;
   activeBuild: Promise<void> | null;
 }