Merge pull request #7019 from QwikDev/v2-fix-repl

fix(repl): make it work again

packages/docs/src/repl/bundled.tsx

@@ -20,6 +20,7 @@ import qServerCjs from '../../node_modules/@qwik.dev/core/dist/server.cjs?raw-so
 import qServerDts from '../../node_modules/@qwik.dev/core/dist/server.d.ts?raw-source';
 
 export const QWIK_PKG_NAME = '@qwik.dev/core';
+export const QWIK_PKG_NAME_V1 = '@builder.io/qwik';
 const ROLLUP_VERSION = '2.75.6';
 
 export const getNpmCdnUrl = (
@@ -41,6 +42,11 @@ export const getNpmCdnUrl = (
       pkgVersion = pkgName === QWIK_PKG_NAME ? qwikVersion.split('-dev')[0] : '';
     }
   }
+  if (pkgName === QWIK_PKG_NAME) {
+    if (pkgVersion < '2') {
+      pkgName = QWIK_PKG_NAME_V1;
+    }
+  }
   return `https://cdn.jsdelivr.net/npm/${pkgName}${pkgVersion ? '@' + pkgVersion : ''}${pkgPath}`;
 };
 

packages/docs/src/repl/monaco.tsx

@@ -3,7 +3,7 @@ import { isServer } from '@qwik.dev/core/build';
 import type { Diagnostic } from '@qwik.dev/core/optimizer';
 import type MonacoTypes from 'monaco-editor';
 import { getColorPreference } from '../components/theme-toggle/theme-toggle';
-import { bundled, getNpmCdnUrl } from './bundled';
+import { QWIK_PKG_NAME, QWIK_PKG_NAME_V1, bundled, getNpmCdnUrl } from './bundled';
 import type { EditorProps, EditorStore } from './editor';
 import type { ReplStore } from './types';
 // We cannot use this, it causes the repl to use imports
@@ -223,28 +223,29 @@ export const addQwikLibs = async (version: string) => {
 
 const loadDeps = async (qwikVersion: string) => {
   const [M, m, p] = qwikVersion.split('-')[0].split('.').map(Number);
+  const isV1 = M < 2;
   const prefix =
     qwikVersion === 'bundled' || M > 1 || (M == 1 && (m > 7 || (m == 7 && p >= 2)))
       ? '/dist/'
       : '/';
   const deps: NodeModuleDep[] = [
     // qwik
     {
-      pkgName: '@qwik.dev/core',
+      pkgName: isV1 ? QWIK_PKG_NAME_V1 : QWIK_PKG_NAME,
       pkgVersion: qwikVersion,
       pkgPath: `${prefix}core.d.ts`,
       import: '',
     },
     // server API
     {
-      pkgName: '@qwik.dev/core',
+      pkgName: isV1 ? QWIK_PKG_NAME_V1 : QWIK_PKG_NAME,
       pkgVersion: qwikVersion,
       pkgPath: `${prefix}server.d.ts`,
       import: '/server',
     },
     // build constants
     {
-      pkgName: '@qwik.dev/core',
+      pkgName: isV1 ? QWIK_PKG_NAME_V1 : QWIK_PKG_NAME,
       pkgVersion: qwikVersion,
       pkgPath: `${prefix}build/index.d.ts`,
       import: '/build',

packages/docs/src/repl/repl-version.ts

@@ -98,7 +98,7 @@ export const getReplVersion = async (version: string | undefined, offline: boole
   });
 
   versions.unshift('bundled');
-  if (!hasVersion || !version) {
+  if ((!offline && !hasVersion) || !version) {
     version = 'bundled';
   }
 

packages/docs/src/repl/repl.tsx

@@ -9,7 +9,7 @@ import {
   useVisibleTask$,
 } from '@qwik.dev/core';
 import { isServer } from '@qwik.dev/core/build';
-import { QWIK_PKG_NAME, bundled, getNpmCdnUrl } from './bundled';
+import { QWIK_PKG_NAME, QWIK_PKG_NAME_V1, bundled, getNpmCdnUrl } from './bundled';
 import { ReplDetailPanel } from './repl-detail-panel';
 import { ReplInputPanel } from './repl-input-panel';
 import { ReplOutputPanel } from './repl-output-panel';
@@ -80,10 +80,6 @@ export const Repl = component$((props: ReplProps) => {
 
   useVisibleTask$(
     async () => {
-      if (isServer) {
-        return;
-      }
-      // only run on the client
       // Get the version asap, most likely it will be cached.
       const v = await getReplVersion(input.version, true);
       store.versions = v.versions;
@@ -170,9 +166,14 @@ const getDependencies = (input: ReplAppInput) => {
   if (input.version !== 'bundled') {
     const [M, m, p] = input.version.split('-')[0].split('.').map(Number);
     const prefix = M > 1 || (M == 1 && (m > 7 || (m == 7 && p >= 2))) ? '/dist/' : '/';
-    out[QWIK_PKG_NAME] = {
-      version: input.version,
-    };
+    // we must always provide the qwik.dev package so the worker can find the version
+    out[QWIK_PKG_NAME] = { version: input.version };
+    let bundles;
+    if (M < 2) {
+      bundles = out[QWIK_PKG_NAME_V1] = { version: input.version };
+    } else {
+      bundles = out[QWIK_PKG_NAME];
+    }
     for (const p of [
       `${prefix}core.cjs`,
       `${prefix}core.mjs`,
@@ -182,7 +183,7 @@ const getDependencies = (input: ReplAppInput) => {
       `/bindings/qwik.wasm.cjs`,
       `/bindings/qwik_wasm_bg.wasm`,
     ]) {
-      out[QWIK_PKG_NAME][p] = getNpmCdnUrl(bundled, QWIK_PKG_NAME, input.version, p);
+      bundles[p] = getNpmCdnUrl(bundled, QWIK_PKG_NAME, input.version, p);
     }
   }
   return out;

packages/docs/src/repl/worker/repl-constants.ts

@@ -1,4 +1,5 @@
 export const QWIK_PKG_NAME = '@qwik.dev/core';
+export const QWIK_PKG_NAME_V1 = '@builder.io/qwik';
 
 export const QWIK_REPL_DEPS_CACHE = 'QwikReplDeps';
 export const QWIK_REPL_RESULT_CACHE = 'QwikReplResults';

packages/docs/src/repl/worker/repl-dependencies.ts

@@ -1,25 +1,27 @@
 /* eslint-disable no-console */
 import type { ReplInputOptions } from '../types';
-import { QWIK_PKG_NAME, QWIK_REPL_DEPS_CACHE } from './repl-constants';
+import { QWIK_PKG_NAME, QWIK_PKG_NAME_V1, QWIK_REPL_DEPS_CACHE } from './repl-constants';
 import type { QwikWorkerGlobal } from './repl-service-worker';
 
 let options: ReplInputOptions;
 let cache: Cache;
 
 export const depResponse = async (pkgName: string, pkgPath: string) => {
+  let dep = options.deps[pkgName];
   if (pkgName === QWIK_PKG_NAME) {
-    const version = options.deps[pkgName].version;
+    const version = dep.version;
+    const [M, m, p] = version.split('-')[0].split('.').map(Number);
     if (!pkgPath.startsWith('/bindings')) {
-      const [M, m, p] = version.split('-')[0].split('.').map(Number);
       if (M > 1 || (M == 1 && (m > 7 || (m == 7 && p >= 2)))) {
         pkgPath = `/dist${pkgPath}`;
       }
-      if (version < '2') {
-        pkgName = '@builder.io/qwik';
-      }
+    }
+    if (version < '2') {
+      pkgName = QWIK_PKG_NAME_V1;
+      dep = options.deps[pkgName];
     }
   }
-  const url = options.deps[pkgName][pkgPath];
+  const url = dep[pkgPath];
   if (!url) {
     throw new Error(`No URL given for dep: ${pkgName}${pkgPath}`);
   }
@@ -78,27 +80,29 @@ const _loadDependencies = async (replOptions: ReplInputOptions) => {
   if (!isSameQwikVersion(self.qwikCore?.version)) {
     await exec(QWIK_PKG_NAME, '/core.cjs');
     if (self.qwikCore) {
-      console.debug(`Loaded @qwik.dev/core: ${self.qwikCore.version}`);
+      console.debug(`Loaded ${QWIK_PKG_NAME}: ${self.qwikCore.version}`);
     } else {
-      throw new Error(`Unable to load @qwik.dev/core ${qwikVersion}`);
+      throw new Error(`Unable to load ${QWIK_PKG_NAME} ${qwikVersion}`);
     }
   }
 
   if (!isSameQwikVersion(self.qwikOptimizer?.versions.qwik)) {
     await exec(QWIK_PKG_NAME, '/optimizer.cjs');
     if (self.qwikOptimizer) {
-      console.debug(`Loaded @qwik.dev/core/optimizer: ${self.qwikOptimizer.versions.qwik}`);
+      console.debug(`Loaded ${QWIK_PKG_NAME}/optimizer: ${self.qwikOptimizer.versions.qwik}`);
     } else {
-      throw new Error(`Unable to load @qwik.dev/core/optimizer ${qwikVersion}`);
+      throw new Error(`Unable to load ${QWIK_PKG_NAME}/optimizer ${qwikVersion}`);
     }
   }
 
   if (!isSameQwikVersion(self.qwikServer?.versions.qwik)) {
+    // clear out the require shim that is version specific
+    (globalThis as any).require = undefined;
     await exec(QWIK_PKG_NAME, '/server.cjs');
     if (self.qwikServer) {
-      console.debug(`Loaded @qwik.dev/core/server: ${self.qwikServer.versions.qwik}`);
+      console.debug(`Loaded ${QWIK_PKG_NAME}/server: ${self.qwikServer.versions.qwik}`);
     } else {
-      throw new Error(`Unable to load @qwik.dev/core/server ${qwikVersion}`);
+      throw new Error(`Unable to load ${QWIK_PKG_NAME}/server ${qwikVersion}`);
     }
   }
 

packages/docs/src/repl/worker/repl-plugins.ts

@@ -19,15 +19,15 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
       if (!importer) {
         return id;
       }
-      if (
-        id === '@qwik.dev/core' ||
-        id === '@qwik.dev/core/jsx-runtime' ||
-        id === '@qwik.dev/core/jsx-dev-runtime'
-      ) {
-        return '\0qwikCore';
-      }
-      if (id === '@builder.io/qwik/server' || id === '@qwik.dev/core/server') {
-        return '\0qwikServer';
+      const match = id.match(/(@builder\.io\/qwik|@qwik\.dev\/core)(.*)/);
+      if (match) {
+        const pkgPath = match[2];
+        if (pkgPath === '/server') {
+          return '\0qwikServer';
+        }
+        if (/^(|jsx(-dev)?-runtime)$/.test(pkgPath)) {
+          return '\0qwikCore';
+        }
       }
       // Simple relative file resolution
       if (id.startsWith('./')) {