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;
  };