feat(repl): show/hide large code blocks

Author: wmertens

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

@@ -1,4 +1,4 @@
-import { $, component$, useSignal } from '@builder.io/qwik';
+import { $, component$, createSignal, useSignal } from '@builder.io/qwik';
 import { CodeBlock } from '../components/code-block/code-block';
 import type { ReplModuleOutput } from './types';
 const FILE_MODULE_DIV_ID = 'file-modules-client-modules';
@@ -35,22 +35,34 @@ export const ReplOutputModules = component$(({ outputs, headerText }: ReplOutput
         </div>
       </div>
       <div class="file-modules" id={FILE_MODULE_DIV_ID}>
-        {outputs.map((o, i) => (
-          <div class="file-item" data-output-item={i} key={o.path}>
-            <div class="file-info">
-              <span>{o.path}</span>
-              {o.size ? <span class="file-size">({o.size})</span> : null}
+        {outputs.map((o, i) => {
+          const isLarge = o.code.length > 3000;
+          if (isLarge && !o.shorten) {
+            o.shorten = createSignal(true);
+          }
+          const code = o.shorten?.value ? o.code.slice(0, 3000) : o.code;
+          return (
+            <div class="file-item" data-output-item={i} key={o.path}>
+              <div class="file-info">
+                <span>{o.path}</span>
+                {o.size ? <span class="file-size">({o.size})</span> : null}
+              </div>
+              <div class="file-text">
+                <CodeBlock
+                  pathInView$={pathInView$}
+                  path={o.path}
+                  code={code}
+                  observerRootId={FILE_MODULE_DIV_ID}
+                />
+                {o.shorten && (
+                  <button onClick$={() => (o.shorten.value = !o.shorten.value)}>
+                    {o.shorten.value ? 'Truncated - show more' : 'Show less'}
+                  </button>
+                )}
+              </div>
             </div>
-            <div class="file-text">
-              <CodeBlock
-                pathInView$={pathInView$}
-                path={o.path}
-                code={o.code}
-                observerRootId={FILE_MODULE_DIV_ID}
-              />
-            </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

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

@@ -1,4 +1,4 @@
-import { component$, useComputed$ } from '@builder.io/qwik';
+import { component$ } 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,10 +8,6 @@ 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">
@@ -115,7 +111,7 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
         ) : null}
 
         {store.selectedOutputPanel === 'clientBundles' ? (
-          <ReplOutputModules headerText="/build/" outputs={clientBundlesNoCore.value} />
+          <ReplOutputModules headerText="/build/" outputs={store.clientBundles} />
         ) : null}
 
         {store.selectedOutputPanel === 'serverModules' ? (

packages/docs/src/repl/types.ts

@@ -1,10 +1,10 @@
+import type { NoSerialize, Signal } from '@builder.io/qwik';
 import type {
   Diagnostic,
   QwikManifest,
   QwikRollupPluginOptions,
   TransformModule,
 } from '@builder.io/qwik/optimizer';
-import type { NoSerialize } from '@builder.io/qwik';
 
 export interface ReplAppInput {
   buildId: number;
@@ -58,6 +58,7 @@ export interface ReplModuleOutput {
   path: string;
   code: string;
   size?: string;
+  shorten?: Signal<boolean>;
 }
 
 export interface ReplMessageBase {

packages/docs/src/repl/worker/app-bundle-client.ts

@@ -104,14 +104,6 @@ export const appBundleClient = async (
     });
   }
 
-  result.transformedModules = result.transformedModules.filter((f) => {
-    return (
-      !f.path.endsWith('app.js') &&
-      !f.path.endsWith('entry.server.js') &&
-      !f.path.endsWith('root.js')
-    );
-  });
-
   result.events.push({
     kind: 'console-log',
     scope: 'build',