@opentui/solid 0.5.16 → 0.6.0

package/README.md

@@ -87,7 +87,7 @@ OpenTUI Solid exposes intrinsic JSX elements that map to OpenTUI renderables:
 
 ### `render(node, rendererOrConfig?)`
 
-Render a Solid component tree into a CLI renderer. If `rendererOrConfig` is omitted, a renderer is created with default options.
+Render a Solid component tree into a CLI renderer. If you omit `rendererOrConfig`, `render()` creates a renderer with default options. `render()` returns a promise that resolves after the initial mount. Destroying the renderer disposes the Solid root.
 
 ```tsx
 import { render } from "@opentui/solid"
@@ -120,6 +120,9 @@ import { extend } from "@opentui/solid"
 extend({ customBox: CustomBoxRenderable })
 ```
 
+Solid calls the constructor with `{ id }` only. After construction, Solid applies each JSX prop to the instance. A class
+that reads a value only from its constructor options does not get that value from JSX.
+
 ### `getComponentCatalogue()`
 
 Returns the current component catalogue that powers JSX tag lookup.
@@ -138,7 +141,7 @@ Returns the current component catalogue that powers JSX tag lookup.
 
 ### `Portal`
 
-Render children into a different mount node, useful for overlays and tooltips.
+Render children into a different mount node. Use it for overlays and tooltips.
 
 ```tsx
 import { Portal } from "@opentui/solid"
@@ -165,7 +168,7 @@ import { Dynamic } from "@opentui/solid"
 - `scrollbox`: scrollable container
 - `ascii_font`: ASCII art text renderer
 
-QR code support is available from `@opentui/qrcode/solid` and must be registered explicitly with `registerQRCode()`.
+For QR codes, call `registerQRCode()` from `@opentui/qrcode/solid`. It registers the `qr_code` element.
 
 ### Input
 
@@ -182,7 +185,7 @@ QR code support is available from `@opentui/qrcode/solid` and must be registered
 
 ### Text Modifiers
 
-These must appear inside a `text` component:
+Use these only inside a `text` component:
 
 - `span`: inline styled text
 - `strong`/`b`: bold text

package/index.bun.js

@@ -1,6 +1,6 @@
 // @bun
 // index.ts
-import { CliRenderer, createCliRenderer, engine as engine2 } from "@opentui/core";
+import { CliRenderer, createCliRenderer, engine } from "@opentui/core";
 import { createTestRenderer } from "@opentui/core/testing";
 
 // src/elements/catalogue.ts
@@ -114,7 +114,7 @@ function getComponentCatalogue() {
 }
 // src/elements/hooks.ts
 import {
-  engine,
+  getTimelineEngine,
   Timeline
 } from "@opentui/core";
 import { createContext, createSignal, onCleanup, onMount, useContext } from "solid-js";
@@ -199,6 +199,7 @@ var useSelectionHandler = (callback) => {
   });
 };
 var useTimeline = (options = {}) => {
+  const engine = getTimelineEngine(useRenderer());
   const timeline = new Timeline(options);
   onMount(() => {
     if (options.autoplay !== false) {
@@ -207,12 +208,16 @@ var useTimeline = (options = {}) => {
     engine.register(timeline);
   });
   onCleanup(() => {
-    timeline.pause();
-    engine.unregister(timeline);
+    try {
+      timeline.pause();
+    } finally {
+      engine.unregister(timeline);
+    }
   });
   return timeline;
 };
 // src/elements/extras.ts
+import { Renderable as Renderable2 } from "@opentui/core";
 import { createEffect, createMemo as createMemo2, getOwner, onCleanup as onCleanup3, runWithOwner, splitProps, untrack as untrack2 } from "solid-js";
 
 // src/reconciler.ts
@@ -224,7 +229,6 @@ import {
   InputRenderableEvents,
   isTextNodeRenderable,
   isEditBufferRenderable,
-  parseColor,
   Renderable,
   RootTextNodeRenderable,
   ScrollBoxRenderable as ScrollBoxRenderable2,
@@ -233,10 +237,11 @@ import {
   TabSelectRenderable as TabSelectRenderable2,
   TabSelectRenderableEvents,
   TextNodeRenderable as TextNodeRenderable2,
-  TextRenderable as TextRenderable2
+  TextRenderable as TextRenderable2,
+  TextTableRenderable
 } from "@opentui/core";
 import { decodeHTMLStrict } from "entities";
-import { onCleanup as onCleanup2, useContext as useContext2 } from "solid-js";
+import { createContext as createContext2, onCleanup as onCleanup2, useContext as useContext2 } from "solid-js";
 
 // src/renderer/universal.js
 import { createRoot, createRenderEffect, createMemo, createComponent, untrack, mergeProps } from "solid-js";
@@ -532,6 +537,7 @@ class TextNode extends TextNodeRenderable2 {
     return node;
   }
 }
+var RenderableContext = createContext2();
 var logId = (node) => {
   if (!node)
     return;
@@ -626,7 +632,7 @@ function _getParentNode(childNode) {
   return parent;
 }
 var {
-  render: _render,
+  render: renderRoot,
   effect,
   memo: memo2,
   createComponent: createComponent2,
@@ -642,7 +648,7 @@ var {
   createElement(tagName) {
     log("Creating element:", tagName);
     const id = getNextId(tagName);
-    const solidRenderer = useContext2(RendererContext);
+    const solidRenderer = useContext2(RenderableContext)?.() ?? useContext2(RendererContext);
     if (!solidRenderer) {
       throw new Error("No renderer found");
     }
@@ -685,9 +691,9 @@ var {
         return;
       }
       if (name === "style") {
-        node.attributes |= createTextAttributes(value);
-        node.fg = value.fg ? parseColor(value.fg) : node.fg;
-        node.bg = value.bg ? parseColor(value.bg) : node.bg;
+        node.attributes = node.attributes & ~createTextAttributes(prev) | createTextAttributes(value);
+        node.fg = value?.fg;
+        node.bg = value?.bg;
         return;
       }
       return;
@@ -787,7 +793,11 @@ var {
         break;
       case "text":
       case "content": {
-        const textValue = typeof value === "string" ? value : Array.isArray(value) ? value.join("") : `${value}`;
+        if (name === "content" && node instanceof TextTableRenderable) {
+          node.content = value;
+          break;
+        }
+        const textValue = typeof value === "string" ? value : Array.isArray(value) ? value.join("") : `${value ?? ""}`;
         node[name] = textValue;
         break;
       }
@@ -839,33 +849,63 @@ var {
     return nextSibling;
   }
 });
+function _render(code, root) {
+  return renderRoot(() => RenderableContext.Provider({
+    value: root instanceof Renderable ? () => root.ctx : undefined,
+    get children() {
+      return code();
+    }
+  }), root);
+}
 
 // src/elements/extras.ts
 function Portal(props) {
   const renderer = useRenderer();
-  const marker = createSlotNode(), mount = () => props.mount || renderer.root, owner = getOwner();
+  const marker = createSlotNode(), owner = getOwner();
   let content;
+  let container;
   createEffect(() => {
-    content || (content = runWithOwner(owner, () => createMemo2(() => props.children)));
-    const el = mount();
-    const container = createElement("box"), renderRoot = container;
-    Object.defineProperty(container, "_$host", {
-      get() {
-        return marker.parent;
-      },
-      configurable: true
+    const mount = createMemo2(() => {
+      const el = props.mount || renderer.root;
+      const scene = el instanceof Renderable2 ? el.ctx.nativeScene : renderer.nativeScene;
+      const currentScene = container instanceof Renderable2 ? container.ctx.nativeScene : renderer.nativeScene;
+      if (container && scene !== currentScene && container.getChildrenCount() !== 0) {
+        throw new Error("Cannot retarget a Portal with existing nodes between native scenes");
+      }
+      return el;
     });
-    insert(renderRoot, content);
-    el.add(container);
-    props.ref && props.ref(container);
-    onCleanup3(() => {
-      el.remove(container);
-      process.nextTick(() => {
-        if (!container.parent) {
-          container.destroyRecursively();
+    const context = () => {
+      const el = untrack2(mount);
+      return el instanceof Renderable2 && el.ctx.nativeScene !== renderer.nativeScene ? el.ctx : renderer;
+    };
+    createEffect(() => {
+      const el = mount();
+      content ||= runWithOwner(owner, () => RenderableContext.Provider({
+        value: context,
+        get children() {
+          return props.children;
+        }
+      }));
+      let nextContainer;
+      RenderableContext.Provider({
+        value: context,
+        get children() {
+          nextContainer = createElement("box");
+          return;
         }
       });
-    });
+      Object.defineProperty(nextContainer, "_$host", {
+        get() {
+          return marker.parent;
+        },
+        configurable: true
+      });
+      insert(nextContainer, content);
+      el.add(nextContainer);
+      container = nextContainer;
+      onCleanup3(() => _removeNode(el, nextContainer));
+      props.ref && props.ref(nextContainer);
+    }, undefined, { render: true });
   }, undefined, { render: true });
   return marker;
 }
@@ -890,14 +930,7 @@ function Dynamic(props) {
   return createDynamic(() => props.component, others);
 }
 // src/elements/slot.ts
-import { BaseRenderable as BaseRenderable2, isTextNodeRenderable as isTextNodeRenderable2, TextNodeRenderable as TextNodeRenderable3, TextRenderable as TextRenderable3, Yoga } from "@opentui/core";
-function getLayoutNodeConstructor(parent) {
-  const parentLayoutNode = parent?.getLayoutNode?.();
-  return parentLayoutNode?.constructor;
-}
-function createLayoutSlotYogaNode(parentNodeConstructor) {
-  return parentNodeConstructor?.create?.() ?? Yoga.default.Node.create();
-}
+import { BaseRenderable as BaseRenderable2, isTextNodeRenderable as isTextNodeRenderable2, Renderable as Renderable3, TextNodeRenderable as TextNodeRenderable3, TextRenderable as TextRenderable3 } from "@opentui/core";
 
 class SlotBaseRenderable extends BaseRenderable2 {
   constructor(id) {
@@ -954,64 +987,29 @@ class TextSlotRenderable extends TextNodeRenderable3 {
     this.slotParent = undefined;
     this.parent?.remove(this);
     slotParent?.didDestroySlotChild(this);
+    super.destroy();
+  }
+  destroyRecursively() {
+    this.destroy();
   }
 }
 
-class LayoutSlotRenderable extends SlotBaseRenderable {
-  yogaNode;
+class LayoutSlotRenderable extends Renderable3 {
   slotParent;
-  destroyed = false;
-  yogaNodeConstructor;
-  yogaNodeFreed = false;
   constructor(id, parent, layoutParent) {
-    super(id);
-    this._visible = false;
+    super(layoutParent.ctx, { id, visible: false });
     this.slotParent = parent;
-    this.yogaNodeConstructor = getLayoutNodeConstructor(layoutParent);
-    this.yogaNode = createLayoutSlotYogaNode(this.yogaNodeConstructor);
-    this.yogaNode.setDisplay(Yoga.Display.None);
   }
-  getLayoutNode() {
-    return this.yogaNode;
-  }
-  updateFromLayout() {}
-  updateLayout() {}
-  onRemove() {}
   isCompatibleWith(layoutParent) {
-    return this.yogaNodeConstructor === getLayoutNodeConstructor(layoutParent);
-  }
-  detachFromSlot() {
-    this.slotParent = undefined;
-  }
-  freeYogaNode() {
-    if (this.yogaNodeFreed) {
-      return;
-    }
-    this.yogaNodeFreed = true;
-    try {
-      this.yogaNode.free();
-    } catch {}
+    return layoutParent instanceof Renderable3 && layoutParent.ctx.nativeScene === this.ctx.nativeScene;
   }
   disposeWithoutSlotCascade() {
-    if (this.destroyed) {
-      return;
-    }
-    this.destroyed = true;
-    this.detachFromSlot();
-    this.freeYogaNode();
-  }
-  destroyRecursively() {
+    this.slotParent = undefined;
     this.destroy();
   }
-  destroy() {
-    if (this.destroyed) {
-      return;
-    }
-    this.destroyed = true;
+  destroySelf() {
     const slotParent = this.slotParent;
     this.slotParent = undefined;
-    this.parent?.remove(this);
-    this.freeYogaNode();
     slotParent?.didDestroySlotChild(this);
   }
 }
@@ -1105,7 +1103,7 @@ class SlotRenderable extends SlotBaseRenderable {
   }
   disposeDetachedIncompatibleLayoutNodes(parent) {
     for (const [mappedParent, layoutNode] of this.layoutNodesByParent) {
-      if (layoutNode.parent || layoutNode.isCompatibleWith(parent)) {
+      if (layoutNode.parent || !this.isTextSlotParent(parent) && layoutNode.isCompatibleWith(parent)) {
         continue;
       }
       this.layoutNodesByParent.delete(mappedParent);
@@ -1153,7 +1151,10 @@ class SlotRenderable extends SlotBaseRenderable {
     }
     this.disposeDetachedTextNodes();
     this.disposeDetachedIncompatibleLayoutNodes(parent);
-    const layoutNode = new LayoutSlotRenderable(`slot-layout-${this.id}-${++this.layoutNodeCount}`, this, parent);
+    const id = `slot-layout-${this.id}-${++this.layoutNodeCount}`;
+    if (!(parent instanceof Renderable3))
+      throw new Error("Layout slots require a renderable parent");
+    const layoutNode = new LayoutSlotRenderable(id, this, parent);
     this.layoutNodesByParent.set(parent, layoutNode);
     return layoutNode;
   }
@@ -1165,6 +1166,9 @@ class SlotRenderable extends SlotBaseRenderable {
   }
   didRemoveSlotChild(parent, child) {
     const hasOtherAttachedSlotChildren = this.hasOtherAttachedSlotChildren(child);
+    if (this.parent === parent) {
+      this.parent = this.getAttachedSlotParent(child);
+    }
     if (hasOtherAttachedSlotChildren && child instanceof TextSlotRenderable && this.getTextNodeForParent(parent) === child) {
       this.textNodesByParent.delete(parent);
       child.disposeWithoutSlotCascade();
@@ -1173,12 +1177,9 @@ class SlotRenderable extends SlotBaseRenderable {
       this.layoutNodesByParent.delete(parent);
       child.disposeWithoutSlotCascade();
     }
-    if (this.parent === parent) {
-      this.parent = this.getAttachedSlotParent(child);
-    }
   }
   didDestroySlotChild(child) {
-    const nodesByParent = child instanceof LayoutSlotRenderable ? this.layoutNodesByParent : this.textNodesByParent;
+    const nodesByParent = child instanceof TextSlotRenderable ? this.textNodesByParent : this.layoutNodesByParent;
     for (const [parent, node] of nodesByParent) {
       if (node !== child)
         continue;
@@ -1193,22 +1194,24 @@ class SlotRenderable extends SlotBaseRenderable {
     }
     this.destroyed = true;
     this.parent = null;
-    const layoutNodes = new Set(this.layoutNodesByParent.values());
+    const nodes = new Set([...this.layoutNodesByParent.values(), ...this.textNodesByParent.values()]);
     this.layoutNodesByParent.clear();
-    for (const layoutNode of layoutNodes) {
-      layoutNode.destroy();
-    }
-    const textNodes = new Set(this.textNodesByParent.values());
     this.textNodesByParent.clear();
-    for (const textNode of textNodes) {
-      textNode.destroy();
+    let failure;
+    for (const node of nodes) {
+      try {
+        node.destroy();
+      } catch (error) {
+        failure ??= { error };
+      }
     }
+    if (failure)
+      throw failure.error;
   }
 }
 // src/scrollback.ts
 import {
-  BoxRenderable as BoxRenderable2,
-  RootRenderable
+  BoxRenderable as BoxRenderable2
 } from "@opentui/core";
 import { createSignal as createSignal2 } from "solid-js";
 var solidScrollbackRootCounter = 0;
@@ -1222,17 +1225,12 @@ function normalizeSnapshotDimension(value, axis) {
   }
   return Math.max(1, Math.trunc(value));
 }
-function createSnapshotRendererValue(renderContext, root, width, height, firstLineOffset) {
+function createSnapshotRendererValue(renderContext, width, height, firstLineOffset) {
   const [snapshotWidth] = createSignal2(width);
   const [snapshotHeight, setSnapshotHeight] = createSignal2(height);
   const renderer = Object.create(renderContext);
   let offset = firstLineOffset;
   Object.defineProperties(renderer, {
-    root: {
-      value: root,
-      enumerable: true,
-      configurable: true
-    },
     width: {
       get: snapshotWidth,
       enumerable: true,
@@ -1262,40 +1260,21 @@ function createSnapshotRendererValue(renderContext, root, width, height, firstLi
     }
   };
 }
-function runLifecyclePasses(renderContext) {
-  for (const renderable of renderContext.getLifecyclePasses()) {
-    renderable.onLifecyclePass?.call(renderable);
-  }
-}
 function clearLifecyclePasses(renderContext) {
   for (const renderable of [...renderContext.getLifecyclePasses()]) {
     renderContext.unregisterLifecyclePass(renderable);
   }
 }
-function measureSnapshotHeight(renderContext, root) {
-  const measureRoot = new RootRenderable(renderContext);
-  try {
-    measureRoot.add(root);
-    runLifecyclePasses(renderContext);
-    measureRoot.calculateLayout();
-    return Math.max(1, Math.trunc(root.getLayoutNode().getComputedLayout().height));
-  } finally {
-    if (root.parent === measureRoot) {
-      measureRoot.remove(root);
-    }
-    measureRoot.destroyRecursively();
-  }
-}
 function resolveSnapshotHeight(renderContext, root, snapshotRenderer) {
   for (let pass = 0;pass < MAX_AUTO_HEIGHT_PASSES; pass++) {
-    const measuredHeight = measureSnapshotHeight(renderContext, root);
+    const measuredHeight = renderContext.nativeScene.measureSnapshot(root);
     if (measuredHeight === snapshotRenderer.getHeight()) {
       clearLifecyclePasses(renderContext);
       return measuredHeight;
     }
     snapshotRenderer.setHeight(measuredHeight);
   }
-  return measureSnapshotHeight(renderContext, root);
+  return renderContext.nativeScene.measureSnapshot(root);
 }
 function createScrollbackWriter(node, options = {}) {
   return (ctx) => {
@@ -1304,7 +1283,8 @@ function createScrollbackWriter(node, options = {}) {
     const startOnNewLine = options.startOnNewLine ?? true;
     const firstLineWidth = !startOnNewLine && ctx.tailColumn > 0 && ctx.tailColumn < ctx.width ? Math.min(width, ctx.width - ctx.tailColumn) : width;
     const firstLineOffset = width - firstLineWidth;
-    const root = new BoxRenderable2(ctx.renderContext, {
+    const snapshotRenderer = createSnapshotRendererValue(ctx.renderContext, width, height ?? Math.max(1, ctx.renderContext.height), firstLineOffset);
+    const root = new BoxRenderable2(snapshotRenderer.renderer, {
       id: `solid-scrollback-root-${solidScrollbackRootCounter++}`,
       position: "absolute",
       left: 0,
@@ -1316,7 +1296,7 @@ function createScrollbackWriter(node, options = {}) {
       shouldFill: false,
       flexDirection: "column"
     });
-    const snapshotRenderer = createSnapshotRendererValue(ctx.renderContext, root, width, height ?? Math.max(1, ctx.renderContext.height), firstLineOffset);
+    Object.defineProperty(snapshotRenderer.renderer, "root", { value: root, enumerable: true, configurable: true });
     let dispose;
     let disposed = false;
     const teardown = () => {
@@ -1538,6 +1518,9 @@ function Slot(props) {
 
 // index.ts
 var mountSolidRoot = (renderer, node) => {
+  if (renderer.isDestroyed)
+    return;
+  engine.attach(renderer);
   let dispose;
   let disposeRequested = false;
   let disposed = false;
@@ -1590,7 +1573,6 @@ var render = async (node, rendererOrConfig = {}) => {
       rendererOrConfig.onDestroy?.();
     }
   });
-  engine2.attach(renderer);
   mountSolidRoot(renderer, node);
 };
 var testRender = async (node, renderConfig = {}) => {
@@ -1600,7 +1582,6 @@ var testRender = async (node, renderConfig = {}) => {
       renderConfig.onDestroy?.();
     }
   });
-  engine2.attach(testSetup.renderer);
   mountSolidRoot(testSetup.renderer, node);
   return testSetup;
 };
@@ -1612,6 +1593,7 @@ export {
   LineBreakRenderable,
   LinkRenderable,
   Portal,
+  RenderableContext,
   RendererContext,
   Slot,
   SlotRenderable,
@@ -1639,6 +1621,7 @@ export {
   onBlur,
   onFocus,
   onResize,
+  _removeNode as removeNode,
   render,
   setProp,
   spread,
@@ -1655,4 +1638,4 @@ export {
   writeSolidToScrollback
 };
 
-//# debugId=F9161E10B307223364756E2164756E21
+//# debugId=37F996794E25432664756E2164756E21