fix: charm reload on charm-list change (#1040)

Author: Gozala

jumble/src/components/CharmRunner.tsx

@@ -1,13 +1,14 @@
-import React, { useRef } from "react";
-import { render } from "@commontools/html";
+import React, { useMemo, useRef } from "react";
+import { render, type VNode } from "@commontools/html";
 import { UI } from "@commontools/builder";
 import { charmSchema, fixItCharm } from "@commontools/charm";
 import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
 import { useNavigate } from "react-router-dom";
 import { LuX } from "react-icons/lu";
 import { DitheredCube } from "@/components/DitherCube.tsx";
 import { createPath } from "@/routes.ts";
-import { charmId } from "@/utils/charms.ts";
+import { Cell, Charm, charmId } from "@/utils/charms.ts";
+
 interface CharmLoaderProps {
   charmImport: () => Promise<any>;
   argument?: any;
@@ -16,7 +17,7 @@ interface CharmLoaderProps {
 }
 
 interface CharmRendererProps {
-  charm: any;
+  charm: Cell<Charm>;
   argument?: any;
   className?: string;
 }
@@ -81,18 +82,19 @@ function RawCharmRenderer({ charm, className = "" }: CharmRendererProps) {
   const [runtimeError, setRuntimeError] = React.useState<Error | null>(null);
   const [isFixing, setIsFixing] = React.useState(false);
   const { charmManager, currentReplica } = useCharmManager();
+  const id = useMemo(() => charmId(charm), [charm]);
   const navigate = useNavigate();
 
   // Store a reference to the current charm to detect changes
-  const prevCharmRef = useRef(charm);
+  const prevCharmRef = useRef<Charm | null>(null);
 
   // Clear error when charm changes
   React.useEffect(() => {
     if (prevCharmRef.current !== charm) {
       setRuntimeError(null);
       prevCharmRef.current = charm;
     }
-  }, [charm]);
+  }, [id]);
 
   const handleFixIt = React.useCallback(async () => {
     if (!runtimeError || isFixing) return;
@@ -111,7 +113,7 @@ function RawCharmRenderer({ charm, className = "" }: CharmRendererProps) {
     } finally {
       setIsFixing(false);
     }
-  }, [runtimeError, isFixing, charmManager, charm, currentReplica, navigate]);
+  }, [runtimeError, isFixing, charmManager, id, currentReplica, navigate]);
 
   React.useEffect(() => {
     const container = containerRef.current;
@@ -127,7 +129,10 @@ function RawCharmRenderer({ charm, className = "" }: CharmRendererProps) {
 
     container.addEventListener("common-iframe-error", handleIframeError);
 
-    const cleanup = render(container, charm.asSchema(charmSchema).key(UI));
+    const cleanup = render(
+      container,
+      charm.asSchema(charmSchema).key(UI) as Cell<VNode>,
+    );
 
     return () => {
       cleanup();
@@ -136,7 +141,7 @@ function RawCharmRenderer({ charm, className = "" }: CharmRendererProps) {
         container.innerHTML = "";
       }
     };
-  }, [charm]);
+  }, [id]);
 
   return (
     <>

jumble/src/utils/charms.ts

@@ -2,6 +2,8 @@ import { type Charm, CharmManager } from "@commontools/charm";
 import { Cell, getEntityId } from "@commontools/runner";
 import { NAME } from "@commontools/builder";
 
+export type { Cell, Charm };
+
 export function charmId(charm: Charm): string | undefined {
   const id = getEntityId(charm);
   return id ? id["/"] : undefined;
@@ -12,50 +14,56 @@ export function charmId(charm: Charm): string | undefined {
  * @param charmManager The charm manager instance
  * @returns Promise that resolves to an array of mentionable charms (filtered out trash and pinned first)
  */
-export async function getMentionableCharms(charmManager: CharmManager): Promise<Cell<Charm>[]> {
+export async function getMentionableCharms(
+  charmManager: CharmManager,
+): Promise<Cell<Charm>[]> {
   // Sync all collections to ensure we have the latest data
   await Promise.all([
     charmManager.sync(charmManager.getCharms()),
     charmManager.sync(charmManager.getPinned()),
-    charmManager.sync(charmManager.getTrash())
+    charmManager.sync(charmManager.getTrash()),
   ]);
-  
+
   // Get all collections
   const allCharms = charmManager.getCharms().get();
   const pinnedCharms = charmManager.getPinned().get();
   const trashedCharms = charmManager.getTrash().get();
-  
+
   // Create a set of trashed charm IDs for quick lookup
   const trashedIds = new Set<string>(
-    trashedCharms.map(charm => charmId(charm)).filter((id): id is string => id !== undefined)
+    trashedCharms.map((charm) => charmId(charm)).filter((id): id is string =>
+      id !== undefined
+    ),
   );
-  
+
   // Create a set of pinned charm IDs for quick lookup
   const pinnedIds = new Set<string>(
-    pinnedCharms.map(charm => charmId(charm)).filter((id): id is string => id !== undefined)
+    pinnedCharms.map((charm) => charmId(charm)).filter((id): id is string =>
+      id !== undefined
+    ),
   );
-  
+
   // Filter out trashed charms and those without IDs
-  const mentionableCharms = allCharms.filter(charm => {
+  const mentionableCharms = allCharms.filter((charm) => {
     const id = charmId(charm);
     return id !== undefined && !trashedIds.has(id);
   });
-  
+
   // Sort charms with pinned first, then by name
   return mentionableCharms.sort((a, b) => {
     const aId = charmId(a);
     const bId = charmId(b);
-    
+
     // By this point both aId and bId should be defined, but check just in case
     if (!aId || !bId) {
       console.warn("Unexpected undefined ID in sort function");
       return 0;
     }
-    
+
     // Sort pinned first
     if (pinnedIds.has(aId) && !pinnedIds.has(bId)) return -1;
     if (!pinnedIds.has(aId) && pinnedIds.has(bId)) return 1;
-    
+
     // Then sort by name
     const aName = a.get()?.[NAME] ?? "Untitled";
     const bName = b.get()?.[NAME] ?? "Untitled";