feat: Initial attempt at wrapping Runtime in a worker within shell.

Author: jsantell

packages/cli/lib/charm-render.ts

@@ -1,5 +1,6 @@
 import { render, vdomSchema, VNode } from "@commontools/html";
-import { Cell, UI } from "@commontools/runner";
+import { UI } from "@commontools/runner";
+import { type RemoteCell } from "@commontools/runner/worker";
 import { loadManager } from "./charm.ts";
 import { CharmsController } from "@commontools/charm/ops";
 import type { CharmConfig } from "./charm.ts";
@@ -53,7 +54,11 @@ export async function renderCharm(
   if (options.watch) {
     // 4a. Reactive rendering - pass the Cell directly
     const uiCell = cell.key(UI);
-    const cancel = render(container, uiCell as Cell<VNode>, renderOptions); // FIXME: types
+    const cancel = render(
+      container,
+      uiCell as unknown as RemoteCell<VNode>,
+      renderOptions,
+    ); // FIXME: types
 
     // 5a. Set up monitoring for changes
     let updateCount = 0;

packages/html/deno.jsonc

@@ -7,7 +7,8 @@
     ".": "./src/index.ts",
     "./utils": "./src/utils.ts",
     "./jsx-runtime": "./src/jsx-runtime.ts",
-    "./jsx-dev-runtime": "./src/jsx-dev-runtime.ts"
+    "./jsx-dev-runtime": "./src/jsx-dev-runtime.ts",
+    "./mock-doc": "./src/mock-doc.ts"
   },
   "imports": {
     "htmlparser2": "npm:htmlparser2",

packages/html/src/mock-doc.ts

@@ -80,6 +80,11 @@ export class MockDoc {
           return DomUtils.removeElement(this as any);
         },
       },
+      replaceWith: {
+        value(newNode: any) {
+          return DomUtils.replaceElement(this as any, newNode);
+        },
+      },
       innerHTML: {
         get() {
           return domserializer.render((this as any).children);

packages/html/src/render.ts

@@ -1,14 +1,13 @@
 import { isObject, isRecord } from "@commontools/utils/types";
 import {
   type Cancel,
-  type Cell,
   convertCellsToLinks,
   effect,
-  isCell,
   type JSONSchema,
   UI,
   useCancelGroup,
 } from "@commontools/runner";
+import { isRemoteCell, type RemoteCell } from "@commontools/runner/worker";
 import { isVNode, type Props, type RenderNode, type VNode } from "./jsx.ts";
 import * as logger from "./logger.ts";
 
@@ -22,7 +21,7 @@ export interface RenderOptions {
   setProp?: SetPropHandler;
   document?: Document;
   /** The root cell for auto-wrapping with ct-cell-context on [UI] traversal */
-  rootCell?: Cell;
+  rootCell?: RemoteCell<VNode>;
 }
 
 export const vdomSchema: JSONSchema = {
@@ -60,25 +59,30 @@ export const vdomSchema: JSONSchema = {
  */
 export const render = (
   parent: HTMLElement,
-  view: VNode | Cell<VNode>,
+  view: VNode | RemoteCell<VNode>,
   options: RenderOptions = {},
 ): Cancel => {
-  // Initialize visited set with the original cell for cycle detection
-  const visited = new Set<object>();
-  let rootCell: Cell | undefined;
-
-  if (isCell(view)) {
-    visited.add(view);
-    rootCell = view; // Capture the original cell for ct-cell-context wrapping
-    view = view.asSchema(vdomSchema);
+  let rootCell: RemoteCell<VNode> | undefined;
+
+  if (isRemoteCell(view)) {
+    rootCell = view as RemoteCell<VNode>; // Capture the original cell for ct-cell-context wrapping
+    view = rootCell.asSchema(vdomSchema) as RemoteCell<VNode>;
   }
 
   // Pass rootCell through options if we have one
   const optionsWithCell = rootCell ? { ...options, rootCell } : options;
 
   return effect(
-    view,
-    (view: VNode) => renderImpl(parent, view, optionsWithCell, visited),
+    view as VNode,
+    (view: VNode) => {
+      // Create a fresh visited set for each render pass.
+      // This prevents false cycle detection when re-rendering with updated values.
+      const visited = new Set<object>();
+      if (rootCell) {
+        visited.add(rootCell);
+      }
+      return renderImpl(parent, view, optionsWithCell, visited);
+    },
   );
 };
 
@@ -131,7 +135,7 @@ const createCyclePlaceholder = (document: Document): HTMLSpanElement => {
 /** Check if a cell has been visited, using .equals() for cell comparison */
 const hasVisitedCell = (
   visited: Set<object>,
-  cell: Cell<unknown>,
+  cell: { equals(other: unknown): boolean },
 ): boolean => {
   for (const item of visited) {
     if (cell.equals(item)) {
@@ -207,7 +211,7 @@ const renderNode = (
   if (cellForContext && element) {
     const wrapper = document.createElement(
       "ct-cell-context",
-    ) as HTMLElement & { cell?: Cell };
+    ) as HTMLElement & { cell?: RemoteCell<VNode> };
     wrapper.cell = cellForContext;
     wrapper.appendChild(element);
     return [wrapper, cancel];
@@ -235,13 +239,16 @@ const bindChildren = (
     const document = options.document ?? globalThis.document;
 
     // Check for cell cycle before setting up effect (using .equals() for comparison)
-    if (isCell(child) && hasVisitedCell(visited, child)) {
+    if (
+      isRenderableCell(child) &&
+      hasVisitedCell(visited, child as unknown as RemoteCell<unknown>)
+    ) {
       logger.warn("render", "Cycle detected in cell graph", child);
       return { node: createCyclePlaceholder(document), cancel: () => {} };
     }
 
     // Track if this child is a cell for the visited set
-    const childIsCell = isCell(child);
+    const childIsCell = isRenderableCell(child);
 
     let currentNode: ChildNode | null = null;
     const cancel = effect(child, (childValue) => {
@@ -377,7 +384,7 @@ const bindProps = (
   const setProperty = options.setProp ?? setProp;
   const [cancel, addCancel] = useCancelGroup();
   for (const [propKey, propValue] of Object.entries(props)) {
-    if (isCell(propValue)) {
+    if (isRenderableCell(propValue)) {
       // If prop is an event, we need to add an event listener
       if (isEventProp(propKey)) {
         const key = cleanEventProp(propKey);
@@ -538,10 +545,10 @@ const sanitizeScripts = (node: VNode): VNode | null => {
   if (node.name === "script") {
     return null;
   }
-  if (!isCell(node.props) && !isObject(node.props)) {
+  if (!isRenderableCell(node.props) && !isObject(node.props)) {
     node = { ...node, props: {} };
   }
-  if (!isCell(node.children) && !Array.isArray(node.children)) {
+  if (!isRenderableCell(node.children) && !Array.isArray(node.children)) {
     node = { ...node, children: [] };
   }
 
@@ -654,3 +661,12 @@ function isSelectElement(value: unknown): value is HTMLSelectElement {
     typeof value.tagName === "string" &&
     value.tagName.toUpperCase() === "SELECT");
 }
+
+type RenderableCell = {
+  send(value: unknown): void;
+};
+function isRenderableCell(value: unknown): value is RenderableCell {
+  // Check for any object with a send() method (Cell, RemoteCell, or Stream)
+  return !!value && typeof value === "object" && "send" in value &&
+    typeof (value as RenderableCell).send === "function";
+}

packages/html/test/html-recipes.test.ts

@@ -7,6 +7,7 @@ import {
   type IExtendedStorageTransaction,
   Runtime,
 } from "@commontools/runner";
+import { type RemoteCell } from "@commontools/runner/worker";
 import { StorageManager } from "@commontools/runner/storage/cache.deno";
 import * as assert from "./assert.ts";
 import { Identity } from "@commontools/identity";
@@ -167,7 +168,7 @@ describe("recipes with HTML", () => {
 
     const root = document.getElementById("root")!;
     const cell = result.key(UI);
-    render(root, cell, renderOptions);
+    render(root, cell as unknown as RemoteCell<VNode>, renderOptions);
     assert.equal(root.innerHTML, "<div><div>test</div></div>");
   });
 
@@ -277,7 +278,11 @@ describe("recipes with HTML", () => {
     await runtime.idle();
 
     const root = document.getElementById("root")!;
-    render(root, cell1.key("ui"), renderOptions);
+    render(
+      root,
+      cell1.key("ui") as unknown as RemoteCell<VNode>,
+      renderOptions,
+    );
 
     // Should detect the cycle and render placeholder, not infinite loop
     // MockDoc doesn't properly reflect textContent/title in innerHTML,

packages/identity/src/identity.ts

@@ -46,14 +46,17 @@ export class Identity<ID extends DIDKey = DIDKey> implements Signer<ID> {
   }
 
   // Derive a new `Identity` given a seed string.
-  async derive<ID extends DIDKey>(name: string): Promise<Identity<ID>> {
+  async derive<ID extends DIDKey>(
+    name: string,
+    config: IdentityCreateConfig = {},
+  ): Promise<Identity<ID>> {
     const seed = textEncoder.encode(name);
     const { ok: signed, error } = await this.sign(seed);
     if (error) {
       throw error;
     }
     const signedHash = await hash(signed);
-    return await Identity.fromRaw(new Uint8Array(signedHash));
+    return await Identity.fromRaw(new Uint8Array(signedHash), config);
   }
 
   // Derive PKCS8/PEM bytes from this identity.

packages/runner/deno.json

@@ -2,10 +2,12 @@
   "name": "@commontools/runner",
   "tasks": {
     "test": "deno test --allow-ffi --allow-env --allow-read test/*.test.ts",
-    "integration": "LOG_LEVEL=warn deno test -A ./integration/*.test.ts"
+    "integration": "LOG_LEVEL=warn deno test -A ./integration/worker.test.ts"
   },
   "exports": {
     ".": "./src/index.ts",
+    "./worker": "./src/worker/index.ts",
+    "./worker-script": "./src/worker/worker-runtime.ts",
     "./storage/inspector": "./src/storage/inspector.ts",
     "./storage/telemetry": "./src/storage/telemetry.ts",
     "./traverse": "./src/traverse.ts",