feat: docs repl transformed modules panel

packages/docs/package.json

@@ -18,7 +18,7 @@
     "fmt.check": "prettier --check ."
   },
   "devDependencies": {
-    "@builder.io/partytown": "^0.5.4",
+    "@builder.io/partytown": "^0.6.0",
     "@builder.io/qwik": "0.0.21",
     "@builder.io/qwik-city": "0.0.11",
     "@cloudflare/kv-asset-handler": "0.2.0",

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

@@ -50,14 +50,18 @@ export const initMonacoEditor = async (
   ts.typescriptDefaults.setEagerModelSync(true);
 
   if (typeof props.onChangeQrl === 'object') {
-    let tmrId: any = null;
+    let debounceTmrId: any = null;
+    let diagnosticsTmrId: any = null;
 
     editorStore.onChangeSubscription = noSerialize(
       editor.onDidChangeModelContent(async () => {
-        props.onChangeQrl?.invoke(props.selectedPath, editor.getValue());
+        clearTimeout(debounceTmrId);
+        debounceTmrId = setTimeout(() => {
+          props.onChangeQrl?.invoke(props.selectedPath, editor.getValue());
+        }, 200);
 
-        clearTimeout(tmrId);
-        tmrId = setTimeout(() => {
+        clearTimeout(diagnosticsTmrId);
+        diagnosticsTmrId = setTimeout(() => {
           checkDiagnostics(monaco, editor, replStore);
         }, 50);
       })

packages/docs/src/components/repl/repl-output-modules.tsx

@@ -1,11 +1,11 @@
 import { CodeBlock } from '../code-block/code-block';
 import type { ReplModuleOutput } from './types';
 
-export const ReplOutputModules = ({ outputs, buildPath }: ReplOutputModulesProps) => {
+export const ReplOutputModules = ({ outputs, headerText }: ReplOutputModulesProps) => {
   return (
     <div class="output-result output-modules">
       <div class="file-tree">
-        <div class="file-tree-header">{outputs.length > 0 ? buildPath : ''}</div>
+        <div class="file-tree-header">{outputs.length > 0 ? headerText : ''}</div>
         <div class="file-tree-items">
           {outputs.map((o, i) => (
             <a
@@ -29,7 +29,7 @@ export const ReplOutputModules = ({ outputs, buildPath }: ReplOutputModulesProps
           <div class="file-item" data-file-item={i} key={o.path}>
             <div class="file-info">
               <span>{o.path}</span>
-              <span class="file-size">({o.size})</span>
+              {o.size ? <span class="file-size">({o.size})</span> : null}
             </div>
             <div className="file-text">
               <CodeBlock path={o.path} code={o.code} theme="light" />
@@ -42,6 +42,6 @@ export const ReplOutputModules = ({ outputs, buildPath }: ReplOutputModulesProps
 };
 
 interface ReplOutputModulesProps {
-  buildPath: string;
+  headerText: string;
   outputs: ReplModuleOutput[];
 }

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

@@ -30,10 +30,20 @@ export const ReplOutputPanel = ({ input, store }: ReplOutputPanelProps) => {
 
         {store.enableClientOutput ? (
           <ReplTabButton
-            text="Client Modules"
-            isActive={store.selectedOutputPanel === 'clientModules'}
+            text="Modules"
+            isActive={store.selectedOutputPanel === 'transformedModules'}
             onClick$={() => {
-              store.selectedOutputPanel = 'clientModules';
+              store.selectedOutputPanel = 'transformedModules';
+            }}
+          />
+        ) : null}
+
+        {store.enableClientOutput ? (
+          <ReplTabButton
+            text="Client Bundles"
+            isActive={store.selectedOutputPanel === 'clientBundles'}
+            onClick$={() => {
+              store.selectedOutputPanel = 'clientBundles';
             }}
           />
         ) : null}
@@ -81,19 +91,25 @@ export const ReplOutputPanel = ({ input, store }: ReplOutputPanelProps) => {
           </div>
         ) : null}
 
-        {store.selectedOutputPanel === 'clientModules' ? (
-          <ReplOutputModules buildPath="/build/" outputs={store.clientModules} />
+        {store.selectedOutputPanel === 'transformedModules' ? (
+          <ReplOutputModules headerText="Transformed Modules" outputs={store.transformedModules} />
+        ) : null}
+
+        {store.selectedOutputPanel === 'clientBundles' ? (
+          <ReplOutputModules headerText="/build/" outputs={store.clientBundles} />
         ) : null}
 
         {store.selectedOutputPanel === 'serverModules' ? (
-          <ReplOutputModules buildPath="/server/" outputs={store.ssrModules} />
+          <ReplOutputModules headerText="/server/" outputs={store.ssrModules} />
         ) : null}
 
         {store.selectedOutputPanel === 'diagnostics' ? (
           <div class="output-result output-diagnostics">
-            {[...store.diagnostics, ...store.monacoDiagnostics].map((d) => (
-              <p>{d.message}</p>
-            ))}
+            {diagnosticsLen === 0 ? (
+              <p class="no-diagnostics">- No Reported Diagnostics -</p>
+            ) : (
+              [...store.diagnostics, ...store.monacoDiagnostics].map((d) => <p>{d.message}</p>)
+            )}
           </div>
         ) : null}
       </div>

packages/docs/src/components/repl/repl-output-update.ts

@@ -1,34 +1,19 @@
 import type { ReplResult, ReplStore } from './types';
 
 export const updateReplOutput = async (store: ReplStore, result: ReplResult) => {
-  if (result.diagnostics.length === 0) {
+  store.diagnostics = result.diagnostics;
+
+  if (store.diagnostics.length === 0) {
     store.html = result.html;
-    store.clientModules = result.clientModules;
+    store.transformedModules = result.transformedModules;
+    store.clientBundles = result.clientBundles;
     store.ssrModules = result.ssrModules;
+    store.events = result.events;
 
     if (store.selectedOutputPanel === 'diagnostics' && store.monacoDiagnostics.length === 0) {
       store.selectedOutputPanel = 'app';
     }
   }
-
-  store.diagnostics = result.diagnostics;
-  store.events = result.events;
-
-  if (!result.clientModules.some((m) => m.path === store.selectedClientModule)) {
-    if (result.clientModules.length > 0) {
-      store.selectedClientModule = result.clientModules[0].path;
-    } else {
-      store.selectedClientModule = '';
-    }
-  }
-
-  if (!result.ssrModules.some((m) => m.path === store.selectedSsrModule)) {
-    if (result.ssrModules.length > 0) {
-      store.selectedSsrModule = result.ssrModules[0].path;
-    } else {
-      store.selectedSsrModule = '';
-    }
-  }
 };
 
 const reapplyScripts = (elm: HTMLElement) => {

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

@@ -26,8 +26,8 @@ export const getReplVersion = async (version: string | undefined) => {
       if (v === version) {
         return true;
       }
-      if (npmData?.tags.latest === v || npmData?.tags.next === v) {
-        // always include "latest" and "next" tags
+      if (npmData?.tags.latest === v) {
+        // always include "latest"
         return true;
       }
       if (v.includes('-')) {
@@ -45,7 +45,7 @@ export const getReplVersion = async (version: string | undefined) => {
       }
       // mini-semver check, must be >= than 0.0.20
       if (parts[0] === '0' && parts[1] === '0') {
-        if (parseInt(parts[2], 10) < 20) {
+        if (parseInt(parts[2], 10) < 21) {
           return false;
         }
       }

packages/docs/src/components/repl/repl.css

@@ -236,10 +236,17 @@
   font-weight: bold;
   padding: 0 15px 0 15px;
 }
+
 .output-diagnostics p {
   padding-bottom: 20px;
 }
 
+.output-diagnostics p.no-diagnostics {
+  text-align: center;
+  color: rgb(180, 180, 180);
+  font-weight: normal;
+}
+
 .details-panel {
   grid-area: details-panel;
 }

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

@@ -16,6 +16,7 @@ import type { ReplStore, ReplUpdateMessage, ReplMessage, ReplAppInput } from './
 import { ReplDetailPanel } from './repl-detail-panel';
 import { getReplVersion } from './repl-version';
 import { updateReplOutput } from './repl-output-update';
+import replServerUrl from '@repl-server-url';
 
 export const Repl = component$(async (props: ReplProps) => {
   useScopedStyles$(styles);
@@ -24,9 +25,12 @@ export const Repl = component$(async (props: ReplProps) => {
 
   const store = useStore(() => {
     const initStore: ReplStore = {
-      clientId: Math.round(Math.random() * Number.MAX_SAFE_INTEGER).toString(36),
+      clientId: Math.round(Math.random() * Number.MAX_SAFE_INTEGER)
+        .toString(36)
+        .toLowerCase(),
       html: '',
-      clientModules: [],
+      transformedModules: [],
+      clientBundles: [],
       ssrModules: [],
       diagnostics: [],
       monacoDiagnostics: [],
@@ -37,8 +41,6 @@ export const Repl = component$(async (props: ReplProps) => {
       selectedInputPath: '',
       selectedOutputPanel: 'app',
       selectedOutputDetail: 'console',
-      selectedClientModule: '',
-      selectedSsrModule: '',
       ssrBuild: true,
       debug: false,
       serverUrl: 'about:blank',
@@ -79,11 +81,10 @@ export const Repl = component$(async (props: ReplProps) => {
   useClientEffect$(async () => {
     // only run on the client
     const v = await getReplVersion(input.version);
-
     if (v.version) {
       store.versions = v.versions;
       input.version = v.version;
-      store.serverUrl = `/repl/repl-server.html#${store.clientId}`;
+      store.serverUrl = new URL(replServerUrl + '#' + store.clientId, origin).href;
 
       window.addEventListener('message', (ev) => receiveMessageFromReplServer(ev, store));
     } else {
@@ -148,6 +149,7 @@ export const sendUserUpdateToReplServer = (input: ReplAppInput, store: ReplStore
           type: input.entryStrategy as any,
         },
         version: input.version,
+        serverUrl: store.serverUrl,
       },
     };