@opentui/solid 0.5.17 → 0.6.0

package/index.js

@@ -1,5 +1,5 @@
 // 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
@@ -99,7 +99,7 @@ function getComponentCatalogue() {
   return componentCatalogue;
 }
 // src/elements/hooks.ts
-import { engine, Timeline } from "@opentui/core";
+import { getTimelineEngine, Timeline } from "@opentui/core";
 import { createContext, createSignal, onCleanup, onMount, useContext } from "solid-js/dist/solid.js";
 var RendererContext = createContext();
 var useRenderer = () => {
@@ -188,6 +188,7 @@ var useSelectionHandler = (callback) => {
   });
 };
 var useTimeline = (options = {}) => {
+  const engine = getTimelineEngine(useRenderer());
   const timeline = new Timeline(options);
   onMount(() => {
     if (options.autoplay !== false) {
@@ -196,18 +197,22 @@ 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/dist/solid.js";
 
 // src/reconciler.ts
-import { BaseRenderable, createTextAttributes, ImageRenderable as ImageRenderable2, InputRenderable as InputRenderable2, InputRenderableEvents, isTextNodeRenderable, isEditBufferRenderable, parseColor, Renderable, RootTextNodeRenderable, ScrollBoxRenderable as ScrollBoxRenderable2, SelectRenderable as SelectRenderable2, SelectRenderableEvents, TabSelectRenderable as TabSelectRenderable2, TabSelectRenderableEvents, TextNodeRenderable as TextNodeRenderable2, TextRenderable as TextRenderable2 } from "@opentui/core";
+import { BaseRenderable, createTextAttributes, ImageRenderable as ImageRenderable2, InputRenderable as InputRenderable2, InputRenderableEvents, isTextNodeRenderable, isEditBufferRenderable, Renderable, RootTextNodeRenderable, ScrollBoxRenderable as ScrollBoxRenderable2, SelectRenderable as SelectRenderable2, SelectRenderableEvents, TabSelectRenderable as TabSelectRenderable2, TabSelectRenderableEvents, TextNodeRenderable as TextNodeRenderable2, TextRenderable as TextRenderable2, TextTableRenderable } from "@opentui/core";
 import { decodeHTMLStrict } from "entities";
-import { onCleanup as onCleanup2, useContext as useContext2 } from "solid-js/dist/solid.js";
+import { createContext as createContext2, onCleanup as onCleanup2, useContext as useContext2 } from "solid-js/dist/solid.js";
 
 // src/renderer/universal.js
 import { createRoot, createRenderEffect, createMemo, createComponent, untrack, mergeProps } from "solid-js/dist/solid.js";
@@ -503,6 +508,7 @@ class TextNode extends TextNodeRenderable2 {
     return node;
   }
 }
+var RenderableContext = createContext2();
 var logId = (node) => {
   if (!node)
     return;
@@ -599,7 +605,7 @@ function _getParentNode(childNode) {
   return parent;
 }
 var {
-  render: _render,
+  render: renderRoot,
   effect,
   memo: memo2,
   createComponent: createComponent2,
@@ -615,7 +621,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");
     }
@@ -662,9 +668,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;
@@ -764,7 +770,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;
       }
@@ -816,32 +826,64 @@ 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
@@ -869,14 +911,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) {
@@ -934,61 +969,31 @@ class TextSlotRenderable extends TextNodeRenderable3 {
     this.slotParent = undefined;
     this.parent?.remove(this);
     slotParent?.didDestroySlotChild(this);
+    super.destroy();
+  }
+  destroyRecursively() {
+    this.destroy();
   }
 }
 
-class LayoutSlotRenderable extends SlotBaseRenderable {
-  destroyed = false;
-  yogaNodeFreed = false;
+class LayoutSlotRenderable extends Renderable3 {
   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);
   }
 }
@@ -1082,7 +1087,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);
@@ -1130,7 +1135,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;
   }
@@ -1142,6 +1150,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();
@@ -1150,12 +1161,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;
@@ -1170,20 +1178,25 @@ 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 } from "@opentui/core";
+import { BoxRenderable as BoxRenderable2 } from "@opentui/core";
 import { createSignal as createSignal2 } from "solid-js/dist/solid.js";
 var solidScrollbackRootCounter = 0;
 var MAX_AUTO_HEIGHT_PASSES = 4;
@@ -1196,17 +1209,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,
@@ -1236,40 +1244,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) => {
@@ -1278,7 +1267,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,
@@ -1290,7 +1280,11 @@ 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 = () => {
@@ -1512,6 +1506,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;
@@ -1564,7 +1561,6 @@ var render = async (node, rendererOrConfig = {}) => {
       rendererOrConfig.onDestroy?.();
     }
   });
-  engine2.attach(renderer);
   mountSolidRoot(renderer, node);
 };
 var testRender = async (node, renderConfig = {}) => {
@@ -1574,7 +1570,6 @@ var testRender = async (node, renderConfig = {}) => {
       renderConfig.onDestroy?.();
     }
   });
-  engine2.attach(testSetup.renderer);
   mountSolidRoot(testSetup.renderer, node);
   return testSetup;
 };
@@ -1586,6 +1581,7 @@ export {
   LineBreakRenderable,
   LinkRenderable,
   Portal,
+  RenderableContext,
   RendererContext,
   Slot,
   SlotRenderable,
@@ -1613,6 +1609,7 @@ export {
   onBlur,
   onFocus,
   onResize,
+  _removeNode as removeNode,
   render,
   setProp,
   spread,
@@ -1629,4 +1626,4 @@ export {
   writeSolidToScrollback
 };
 
-//# debugId=4E43020CDEA5CEE364756E2164756E21
+//# debugId=8E8E054AAA0C759464756E2164756E21