fix(repl): store update issues

Author: wmertens

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

@@ -9,12 +9,14 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
     selectedPath.value = path;
   });
 
+  const segments = outputs.filter((o) => !!o.segment);
+
   return (
     <div class="output-result output-modules">
       <div class="file-tree">
         <div class="file-tree-header">Symbols</div>
         <div class="file-tree-items">
-          {outputs.map((o, i) => (
+          {segments.map((o, i) => (
             <div key={o.path}>
               <a
                 href="#"
@@ -36,23 +38,21 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
         </div>
       </div>
       <div class="file-modules" id={FILE_MODULE_DIV_ID}>
-        {outputs
-          .filter((o) => !!o.segment)
-          .map((o, i) => (
-            <div class="file-item" data-symbol-item={i} key={o.path}>
-              <div class="file-info">
-                <span>{o.segment?.canonicalFilename}</span>
-              </div>
-              <div class="file-text">
-                <CodeBlock
-                  pathInView$={pathInView$}
-                  path={o.path}
-                  code={o.code}
-                  observerRootId={FILE_MODULE_DIV_ID}
-                />
-              </div>
+        {segments.map((o, i) => (
+          <div class="file-item" data-symbol-item={i} key={o.path}>
+            <div class="file-info">
+              <span>{o.segment?.canonicalFilename}</span>
             </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/ui/repl-output-update.ts

@@ -1,21 +1,20 @@
+import { unwrapStore } from '@builder.io/qwik';
 import type { ReplResult, ReplStore } from '../types';
 
-// TODO fix useStore to recursively notify subscribers
+// Maybe we should change useStore to recursively notify subscribers when a top-level property changes
 const deepUpdate = (prev: any, next: any) => {
   for (const key in next) {
     if (prev[key] && typeof next[key] === 'object' && typeof prev[key] === 'object') {
       deepUpdate(prev[key], next[key]);
     } else {
-      if (prev[key] !== next[key]) {
+      if (unwrapStore(prev[key]) !== next[key]) {
         prev[key] = next[key];
       }
     }
   }
   if (Array.isArray(prev)) {
-    for (const item of prev) {
-      if (!next.includes(item)) {
-        prev.splice(prev.indexOf(item), 1);
-      }
+    if (prev.length !== next.length) {
+      prev.length = next.length;
     }
   } else {
     for (const key in prev) {
@@ -28,14 +27,6 @@ const deepUpdate = (prev: any, next: any) => {
 
 export const updateReplOutput = async (store: ReplStore, result: ReplResult) => {
   deepUpdate(store.diagnostics, result.diagnostics);
-
-  if (result.diagnostics.length === 0) {
-    if (result.html && store.html !== result.html) {
-      store.html = result.html;
-      store.reload++;
-    }
-  }
-
   deepUpdate(store.transformedModules, result.transformedModules);
   deepUpdate(store.clientBundles, result.clientBundles);
   deepUpdate(store.ssrModules, result.ssrModules);
@@ -47,6 +38,13 @@ export const updateReplOutput = async (store: ReplStore, result: ReplResult) =>
     store.events = result.events;
   }
 
+  if (result.diagnostics.length === 0) {
+    if (result.html && store.html !== result.html) {
+      store.html = result.html;
+      store.reload++;
+    }
+  }
+
   if (store.selectedOutputPanel === 'diagnostics' && store.monacoDiagnostics.length === 0) {
     store.selectedOutputPanel = 'app';
   }