Merge pull request #6945 from QwikDev/refactor-plugin

fix(qwikVite): stale QRL segments in dev mode
QwikDev · Oct 15, 2024 · 8f806b1 · 8f806b1
2 parents 03689b7 + 6d70625
commit 8f806b1
Show file tree

Hide file tree

Showing 18 changed files with 429 additions and 408 deletions.
diff --git a/.changeset/ninety-planets-search.md b/.changeset/ninety-planets-search.md
@@ -0,0 +1,6 @@
+---
+'@builder.io/qwik-city': patch
+'@builder.io/qwik': patch
+---
+
+FIX: `vite` is now a peer dependency of `qwik` and `qwik-city`, so that there can be no duplicate imports. This should not have consequences, since all apps also directly depend on `vite`.
diff --git a/flake.lock b/flake.lock
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
           "dependencies": [
             "@playwright/test"
           ],
-          "pinVersion": "1.40.0"
+          "pinVersion": "1.47.0"
         },
         {
           "label": "Undici should always be * until we remove it",
@@ -109,7 +109,7 @@
     "@napi-rs/triples": "1.2.0",
     "@node-rs/helper": "1.6.0",
     "@octokit/action": "6.1.0",
-    "@playwright/test": "1.40.0",
+    "@playwright/test": "1.47.0",
     "@types/brotli": "1.3.4",
     "@types/bun": "1.1.6",
     "@types/cross-spawn": "6.0.6",

diff --git a/packages/docs/src/repl/repl-console.tsx b/packages/docs/src/repl/repl-console.tsx
@@ -7,7 +7,7 @@ export interface ReplConsoleProps {
 export const ReplConsole = component$(({ store }: ReplConsoleProps) => {
   return (
     <div class="detail-logs">
-      {store.events.map((ev) => (
+      {store.events.filter(Boolean).map((ev) => (
         <ReplLog log={ev} key={ev.start} />
       ))}
     </div>

diff --git a/packages/docs/src/repl/repl-output-modules.tsx b/packages/docs/src/repl/repl-output-modules.tsx
@@ -26,6 +26,7 @@ export const ReplOutputModules = component$(({ outputs, headerText }: ReplOutput
                 class={{ 'in-view': selectedPath.value === o.path }}
                 preventdefault:click
                 key={o.path}
+                title={o.path}
               >
                 {o.path}
               </a>

diff --git a/packages/docs/src/repl/repl-output-panel.tsx b/packages/docs/src/repl/repl-output-panel.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useComputed$ } from '@builder.io/qwik';
 import { CodeBlock } from '../components/code-block/code-block';
 import { ReplOutputModules } from './repl-output-modules';
 import { ReplOutputSymbols } from './repl-output-symbols';
@@ -8,6 +8,10 @@ import type { ReplAppInput, ReplStore } from './types';
 
 export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProps) => {
   const diagnosticsLen = store.diagnostics.length + store.monacoDiagnostics.length;
+  const clientBundlesNoCore = useComputed$(() =>
+    // Qwik Core is not interesting and is large, slowing down the UI
+    store.clientBundles.filter((b) => !b.path.endsWith('qwikCore.js'))
+  );
 
   return (
     <div class="repl-panel repl-output-panel">
@@ -111,7 +115,7 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
         ) : null}
 
         {store.selectedOutputPanel === 'clientBundles' ? (
-          <ReplOutputModules headerText="/build/" outputs={store.clientBundles} />
+          <ReplOutputModules headerText="/build/" outputs={clientBundlesNoCore.value} />
         ) : null}
 
         {store.selectedOutputPanel === 'serverModules' ? (

diff --git a/packages/docs/src/repl/repl-output-symbols.tsx b/packages/docs/src/repl/repl-output-symbols.tsx
@@ -27,6 +27,7 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
                 }}
                 class={{ 'in-view': selectedPath.value === o.path }}
                 preventdefault:click
+                title={o.segment?.canonicalFilename}
               >
                 {o.segment?.canonicalFilename}
               </a>

diff --git a/packages/docs/src/repl/repl-output-update.ts b/packages/docs/src/repl/repl-output-update.ts
@@ -24,7 +24,12 @@ export const updateReplOutput = async (store: ReplStore, result: ReplResult) =>
     deepUpdate(store.transformedModules, result.transformedModules);
     deepUpdate(store.clientBundles, result.clientBundles);
     deepUpdate(store.ssrModules, result.ssrModules);
-    deepUpdate(store.events, result.events);
+    if (
+      result.events.length !== store.events.length ||
+      result.events.some((ev, i) => ev?.start !== store.events[i]?.start)
+    ) {
+      store.events = result.events;
+    }
 
     if (store.selectedOutputPanel === 'diagnostics' && store.monacoDiagnostics.length === 0) {
       store.selectedOutputPanel = 'app';

diff --git a/packages/docs/src/repl/worker/app-bundle-client.ts b/packages/docs/src/repl/worker/app-bundle-client.ts
@@ -36,7 +36,6 @@ export const appBundleClient = async (
 
   const rollupInputOpts: InputOptions = {
     input: entry.path,
-    cache: self.rollupCache,
     plugins: [
       replCss(options),
       self.qwikOptimizer?.qwikRollup(qwikRollupClientOpts),
@@ -71,8 +70,6 @@ export const appBundleClient = async (
 
   const bundle = await self.rollup?.rollup(rollupInputOpts);
   if (bundle) {
-    self.rollupCache = bundle.cache;
-
     const generated = await bundle.generate({
       sourcemap: false,
     });
@@ -96,7 +93,7 @@ export const appBundleClient = async (
       })
     );
 
-    // clear out old cache
+    // clear out old results cache
     // no need to wait
     cache.keys().then((keys) => {
       if (keys.length > 500) {

diff --git a/packages/docs/src/repl/worker/repl-plugins.ts b/packages/docs/src/repl/worker/repl-plugins.ts
@@ -15,6 +15,7 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
     name: 'repl-resolver',
 
     resolveId(id, importer) {
+      // Entry point
       if (!importer) {
         return id;
       }
@@ -25,12 +26,10 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
       ) {
         return '\0qwikCore';
       }
-      if (id === '@builder.io/qwik/build') {
-        return '\0qwikBuild';
-      }
       if (id === '@builder.io/qwik/server') {
         return '\0qwikServer';
       }
+      // Simple relative file resolution
       if (id.startsWith('./')) {
         const extensions = ['', '.tsx', '.ts'];
         id = id.slice(1);
@@ -41,10 +40,6 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
           }
         }
       }
-      return {
-        id,
-        external: true,
-      };
     },
 
     async load(id) {
@@ -59,20 +54,6 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
         if (id === '\0qwikServer') {
           return getRuntimeBundle('qwikServer');
         }
-        if (id === '\0qwikBuild') {
-          return `
-          export const isServer = true;
-          export const isBrowser = false;
-          export const isDev = false;
-        `;
-        }
-      }
-      if (id === '\0qwikBuild') {
-        return `
-        export const isServer = false;
-        export const isBrowser = true;
-        export const isDev = false;
-      `;
       }
       if (id === '\0qwikCore') {
         if (options.buildMode === 'production') {
@@ -88,7 +69,11 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
         }
         throw new Error(`Unable to load Qwik core`);
       }
-      return null;
+
+      // We're the fallback, we know all the files
+      if (/\.[jt]sx?$/.test(id)) {
+        throw new Error(`load: unknown module ${id}`);
+      }
     },
   };
 };

diff --git a/packages/qwik-city/package.json b/packages/qwik-city/package.json
@@ -11,7 +11,6 @@
     "undici": "*",
     "valibot": ">=0.36.0 <2",
     "vfile": "6.0.1",
-    "vite": "^5",
     "vite-imagetools": "^7",
     "zod": "3.22.4"
   },
@@ -174,6 +173,9 @@
   "homepage": "https://qwik.dev/",
   "license": "MIT",
   "main": "./lib/index.qwik.mjs",
+  "peerDependencies": {
+    "vite": "^5"
+  },
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/qwik/package.json b/packages/qwik/package.json
@@ -25,8 +25,7 @@
     }
   ],
   "dependencies": {
-    "csstype": "^3.1",
-    "vite": "^5"
+    "csstype": "^3.1"
   },
   "devDependencies": {
     "@builder.io/qwik": "workspace:^",
@@ -156,6 +155,14 @@
   ],
   "license": "MIT",
   "main": "./dist/core.mjs",
+  "peerDependencies": {
+    "vite": "^5"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/QwikDev/qwik.git",

diff --git a/packages/qwik/src/core/qrl/qrl-class.ts b/packages/qwik/src/core/qrl/qrl-class.ts
@@ -12,7 +12,7 @@ import {
   type InvokeTuple,
 } from '../use/use-core';
 import { getQFuncs, QInstance } from '../util/markers';
-import { maybeThen } from '../util/promises';
+import { isPromise, maybeThen } from '../util/promises';
 import { qDev, qSerialize, qTest, seal } from '../util/qdev';
 import { isArray, isFunction, type ValueOrPromise } from '../util/types';
 import type { QRLDev } from './qrl';
@@ -106,7 +106,6 @@ export const createQRL = <TYPE>(
         if (context.$event$ === undefined) {
           context.$event$ = this as Event;
         }
-        // const result = invoke.call(this, context, f, ...(args as Parameters<typeof f>));
         try {
           return fn.apply(this, args);
         } finally {
@@ -147,7 +146,17 @@ export const createQRL = <TYPE>(
       const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
       symbolRef = maybeThen(imported, (ref) => (qrl.resolved = symbolRef = wrapFn(ref)));
     }
-    (symbolRef as Promise<TYPE>).finally(() => emitUsedSymbol(symbol, ctx?.$element$, start));
+    if (typeof symbolRef === 'object' && isPromise(symbolRef)) {
+      symbolRef.then(
+        () => emitUsedSymbol(symbol, ctx?.$element$, start),
+        (err) => {
+          console.error(`qrl ${symbol} failed to load`, err);
+          // We shouldn't cache rejections, we can try again later
+          symbolRef = null;
+          throw err;
+        }
+      );
+    }
     return symbolRef;
   };