fix(repl): correctly update store, fix CSS

Author: wmertens

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

@@ -41,7 +41,17 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
           .map((o, i) => (
             <div class="file-item" data-symbol-item={i} key={o.path}>
               <div class="file-info">
-                <span>{o.segment?.canonicalFilename}</span>
+                <span>{o.segment!.canonicalFilename}</span>
+                {o.segment!.paramNames && (
+                  <div>
+                    Params: <code>{o.segment!.paramNames.join(', ')}</code>
+                  </div>
+                )}
+                {o.segment!.captureNames && (
+                  <div>
+                    Captures: <code>{o.segment!.captureNames.join(', ')}</code>
+                  </div>
+                )}
               </div>
               <div class="file-text">
                 <CodeBlock

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

@@ -1,7 +1,7 @@
 import type { ReplResult, ReplStore } from './types';
 
 // TODO fix useStore to recursively notify subscribers
-const deepUpdate = (prev: any, next: any) => {
+const deepUpdate = (prev: any, next: any, matcher?: (a: any, b: any) => boolean) => {
   for (const key in next) {
     if (prev[key] && typeof next[key] === 'object' && typeof prev[key] === 'object') {
       deepUpdate(prev[key], next[key]);
@@ -13,13 +13,7 @@ const deepUpdate = (prev: any, next: any) => {
   }
   if (Array.isArray(prev)) {
     for (const item of prev) {
-      // can't use Object as a matcher
-      // because it will be a different object
-      // so we need to use the path or code
-
-      if (
-        next.some((nextItem: any) => (nextItem.path || nextItem.code) === (item.path || item.code))
-      ) {
+      if (!next.some((nextItem: any) => (matcher ? matcher(nextItem, item) : nextItem === item))) {
         prev.splice(prev.indexOf(item), 1);
       }
     }
@@ -32,6 +26,8 @@ const deepUpdate = (prev: any, next: any) => {
   }
 };
 
+const matchByPath = (a: any, b: any) => a.path === b.path;
+
 export const updateReplOutput = async (store: ReplStore, result: ReplResult) => {
   deepUpdate(store.diagnostics, result.diagnostics);
 
@@ -40,9 +36,9 @@ export const updateReplOutput = async (store: ReplStore, result: ReplResult) =>
       store.html = result.html;
     }
 
-    deepUpdate(store.transformedModules, result.transformedModules);
-    deepUpdate(store.clientBundles, result.clientBundles);
-    deepUpdate(store.ssrModules, result.ssrModules);
+    deepUpdate(store.transformedModules, result.transformedModules, matchByPath);
+    deepUpdate(store.clientBundles, result.clientBundles, matchByPath);
+    deepUpdate(store.ssrModules, result.ssrModules, matchByPath);
     if (
       result.events.length !== store.events.length ||
       result.events.some((ev, i) => ev?.start !== store.events[i]?.start)

packages/docs/src/repl/repl.css

@@ -230,7 +230,7 @@
 .output-modules .file-tree {
   padding: 0 15px 15px 15px;
   grid-area: repl-file-tree;
-  overflow-y: auto;
+  overflow: auto;
 }
 
 .output-modules .file-tree-header {
@@ -242,8 +242,6 @@
   display: block;
   margin: 4px 0px 2px 9px;
   white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
 }
 
 .output-modules .file-tree-items a:hover,
@@ -270,8 +268,7 @@
   margin-bottom: 15px;
   background-color: rgb(33 104 170 / 15%);
   padding: 5px 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-word;
 }
 
 .output-modules .file-size {