docs: fix repl app inputs (#506)

.prettierignore

@@ -12,10 +12,6 @@ dist-dev
 etc
 external
 node_modules
-temp
-tsc-out
-tsdoc-metadata.json
-integration/**/*.js
 target
 output
 rollup.config.js
@@ -27,4 +23,5 @@ build
 node_modules
 tsconfig.tsbuildinfo
 packages/docs/pages/**/*.mdx
-packages/docs/server/
+packages/docs/server/
+starters/**/*.js

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "qwik-monorepo",
-  "version": "0.0.20-6",
+  "version": "0.0.20-7",
   "scripts": {
     "build": "yarn node scripts --tsc --build --api --platform-binding-wasm-copy",
     "build.full": "yarn node scripts --tsc --build --api --eslint --platform-binding --wasm",

packages/create-qwik/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.20-6",
+  "version": "0.0.20-7",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": "create-qwik",
   "main": "index.js",

packages/docs/public/repl/index.html

@@ -68,6 +68,10 @@
           }
         };
 
+        const postReplReady = () => {
+          sendMessageToMain({ type: 'replready', clientId: location.hash.split('#')[1] });
+        };
+
         window.addEventListener('message', receiveMessageFromMainApp);
 
         navigator.serviceWorker
@@ -79,12 +83,12 @@
               swRegistration = reg;
               if (swRegistration.active) {
                 navigator.serviceWorker.addEventListener('message', receiveMessageFromSw);
-                sendMessageToMain({ type: 'replready' });
+                postReplReady();
               } else if (swRegistration.installing) {
                 swRegistration.installing.addEventListener('statechange', (ev) => {
                   if (ev.target.state == 'activated') {
                     navigator.serviceWorker.addEventListener('message', receiveMessageFromSw);
-                    sendMessageToMain({ type: 'replready' });
+                    postReplReady();
                   }
                 });
               }

packages/docs/src/components/repl/monaco.tsx

@@ -88,8 +88,6 @@ export const updateMonacoEditor = async (props: EditorProps, store: EditorStore)
       const existingModel = monaco.editor.getModel(uri);
       if (!existingModel) {
         monaco.editor.createModel(input.code, undefined, uri);
-      } else {
-        existingModel.setValue(input.code);
       }
     } catch (e) {
       console.error(input.path, e);

packages/docs/src/components/repl/repl-input-panel.tsx

@@ -48,10 +48,8 @@ export const ReplInputPanel = ({
 };
 
 const formatFilePath = (path: string) => {
-  if (path.startsWith('/')) {
-    return path.substring(1);
-  }
-  return path;
+  const parts = path.split('/');
+  return parts[parts.length - 1];
 };
 
 interface ReplInputPanelProps {

packages/docs/src/components/repl/repl.tsx

@@ -17,7 +17,8 @@ import { ReplDetailPanel } from './repl-detail-panel';
 export const Repl = component$(async (props: ReplProps) => {
   useScopedStyles$(styles);
 
-  const store = useStore<ReplStore>({
+  const store = useStore<ReplStore>(() => ({
+    clientId: Math.round(Math.random() * Number.MAX_SAFE_INTEGER).toString(36),
     inputs: props.inputs || [],
     outputHtml: '',
     clientModules: [],
@@ -40,19 +41,19 @@ export const Repl = component$(async (props: ReplProps) => {
     entryStrategy: props.entryStrategy || 'hook',
     buildMode: props.buildMode || 'development',
     versions: [],
-  });
+  }));
 
   if (props.inputs) {
     store.inputs = props.inputs;
   }
 
-  if (!store.selectedInputPath) {
-    if (store.inputs.some((i) => i.path === props.selectedInputPath)) {
-      store.selectedInputPath = props.selectedInputPath!;
-    } else if (store.inputs.length > 0) {
+  useWatch$((track) => {
+    track(store, 'inputs');
+
+    if (!store.inputs.some((i) => i.path === props.selectedInputPath)) {
       store.selectedInputPath = store.inputs[0].path;
     }
-  }
+  });
 
   const onInputChange = $((path: string, code: string) => {
     const input = store.inputs.find((i) => i.path === path);
@@ -85,22 +86,22 @@ export const Repl = component$(async (props: ReplProps) => {
     store.versions = data.versions;
 
     if (!store.version || !data.versions.includes(store.version)) {
-      store.version = '0.0.20-4';
+      store.version = '0.0.20-7';
       // store.version = data.tags.latest;
     }
 
     store.iframeUrl = '/repl/';
     if (location.hostname === 'localhost') {
       store.iframeUrl += 'index.html';
     }
+    store.iframeUrl += '#' + store.clientId;
 
     // TODO!
     // if (location.hostname === 'qwik.builder.io') {
     //   // use a different domain on purpose
     //   store.iframeUrl = 'https://qwik-docs.pages.dev' + store.iframeUrl;
     // }
 
-    // how do I not use window event listener here?
     window.addEventListener('message', (ev) => onMessageFromIframe(ev, store));
   });
 
@@ -158,14 +159,13 @@ export const updateReplOutput = (store: ReplStore, result: ReplResult) => {
 };
 
 export const onMessageFromIframe = (ev: MessageEvent, store: ReplStore) => {
-  switch (ev.data?.type) {
-    case 'replready': {
+  const type = ev.data?.type;
+  const clientId = ev.data?.clientId;
+  if (clientId === store.clientId) {
+    if (type === 'replready') {
       store.iframeWindow = noSerialize(ev.source as any);
-      break;
-    }
-    case 'result': {
+    } else if (type === 'result') {
       updateReplOutput(store, ev.data);
-      break;
     }
   }
 };
@@ -175,6 +175,7 @@ export const postReplInputUpdate = (store: ReplStore) => {
     const msg: ReplMessageEvent = {
       type: 'update',
       options: {
+        clientId: store.clientId,
         debug: store.debug,
         srcInputs: store.inputs,
         buildMode: store.buildMode,

packages/docs/src/components/repl/types.ts

@@ -2,12 +2,14 @@ import type { Diagnostic, QwikRollupPluginOptions, QwikManifest } from '@builder
 import type { NoSerialize } from '@builder.io/qwik';
 
 export interface ReplInputOptions extends Omit<QwikRollupPluginOptions, 'srcDir' | 'minify'> {
+  clientId: string;
   srcInputs: ReplModuleInput[];
   version: string;
   buildMode: 'development' | 'production';
 }
 
 export interface ReplStore {
+  clientId: string;
   inputs: ReplModuleInput[];
   outputHtml: string;
   clientModules: ReplModuleOutput[];
@@ -52,6 +54,7 @@ export interface ReplMessageEvent {
 
 export interface ReplResult {
   type: 'result';
+  clientId: string;
   outputHtml: string;
   clientModules: ReplModuleOutput[];
   ssrModules: ReplModuleOutput[];

packages/docs/src/components/repl/worker/context.ts

@@ -0,0 +1,25 @@
+import type { RollupCache } from 'rollup';
+import type { ReplModuleOutput } from '../types';
+
+export interface QwikReplContext {
+  clientModules?: ReplModuleOutput[];
+  clientCache?: RollupCache;
+  ssrCache?: RollupCache;
+}
+
+const ctxs: { id: string; ctx: QwikReplContext }[] = [];
+
+export const getCtx = (id: string) => {
+  let c = ctxs.find((r) => r.id === id);
+  if (!c) {
+    c = {
+      id,
+      ctx: {},
+    };
+    ctxs.push(c);
+    if (ctxs.length > 3) {
+      ctxs.shift();
+    }
+  }
+  return c?.ctx;
+};