@opentui/solid 0.2.4 → 0.2.5

package/dist/index.d.ts

@@ -102,12 +102,30 @@ export class TextSlotRenderable extends TextNodeRenderable3 {
     constructor(id: any, parent: any);
     slotParent: any;
     destroyed: boolean;
+    detachFromSlot(): void;
+    disposeWithoutSlotCascade(): void;
 }
 export class SlotRenderable extends SlotBaseRenderable {
-    layoutNode: any;
-    textNode: any;
     destroyed: boolean;
+    layoutNodesByParent: Map<any, any>;
+    textNodesByParent: Map<any, any>;
+    layoutNodeCount: number;
+    textNodeCount: number;
+    get layoutNode(): any;
+    get textNode(): any;
+    isTextSlotParent(parent: any): parent is TextRenderable3 | TextNodeRenderable3;
+    getCurrentSlotChild(nodesByParent: any): any;
+    getTextNodeForParent(parent: any): any;
+    getLayoutNodeForParent(parent: any): any;
+    takeReusableTextNode(parent: any): any;
+    takeReusableLayoutNode(parent: any): any;
+    disposeDetachedTextNodes(): void;
+    disposeDetachedIncompatibleLayoutNodes(parent: any): void;
+    getAttachedSlotParent(excludedNode: any): any;
+    hasOtherAttachedSlotChildren(excludedNode: any): boolean;
     getSlotChild(parent: any): any;
+    getSlotChildForRemoval(parent: any): any;
+    didRemoveSlotChild(parent: any, child: any): void;
 }
 export function Slot(props: any): import("solid-js").Accessor<any>;
 export var RendererContext: import("solid-js").Context<any>;
@@ -118,14 +136,20 @@ export class LineBreakRenderable extends SpanRenderable {
     add(): number;
 }
 export class LayoutSlotRenderable extends SlotBaseRenderable {
-    constructor(id: any, parent: any);
-    yogaNode: Yoga.Node;
+    constructor(id: any, parent: any, layoutParent: any);
+    yogaNode: any;
     slotParent: any;
     destroyed: boolean;
-    getLayoutNode(): Yoga.Node;
+    yogaNodeConstructor: any;
+    yogaNodeFreed: boolean;
+    getLayoutNode(): any;
     updateFromLayout(): void;
     updateLayout(): void;
     onRemove(): void;
+    isCompatibleWith(layoutParent: any): boolean;
+    detachFromSlot(): void;
+    freeYogaNode(): void;
+    disposeWithoutSlotCascade(): void;
 }
 export class ItalicSpanRenderable extends TextModifierRenderable {
     constructor(options: any);
@@ -165,6 +189,5 @@ declare class SlotBaseRenderable extends BaseRenderable {
     getRenderable(id: any): void;
     findDescendantById(id: any): void;
 }
-import { Yoga } from "@opentui/core";
 import { BaseRenderable } from "@opentui/core";
 export { mergeProps3 as mergeProps, memo2 as memo, createComponent2 as createComponent };

package/index.js

@@ -483,11 +483,20 @@ function _insertNode(parent, node, anchor) {
 }
 function _removeNode(parent, node) {
   log("Removing node:", logId(node), "from parent:", logId(parent));
+  let slotParent;
   if (node instanceof SlotRenderable) {
-    node.parent = null;
-    node = node.getSlotChild(parent);
+    slotParent = node;
+    const slotChild = slotParent.getSlotChildForRemoval(parent);
+    if (!slotChild) {
+      if (slotParent.parent === parent) {
+        slotParent.parent = null;
+      }
+      return;
+    }
+    node = slotChild;
   }
   parent.remove(node.id);
+  slotParent?.didRemoveSlotChild(parent, node);
   process.nextTick(() => {
     if (node instanceof BaseRenderable && !node.parent) {
       node.destroyRecursively();
@@ -753,6 +762,13 @@ function Dynamic(props) {
 }
 // src/elements/slot.ts
 import { BaseRenderable as BaseRenderable2, isTextNodeRenderable as isTextNodeRenderable2, TextNodeRenderable as TextNodeRenderable2, TextRenderable as TextRenderable2, Yoga } from "@opentui/core";
+function getLayoutNodeConstructor(parent) {
+  const parentLayoutNode = parent?.getLayoutNode?.();
+  return parentLayoutNode?.constructor;
+}
+function createLayoutSlotYogaNode(parentNodeConstructor) {
+  return parentNodeConstructor?.create?.() ?? Yoga.default.Node.create();
+}
 
 class SlotBaseRenderable extends BaseRenderable2 {
   constructor(id) {
@@ -790,12 +806,24 @@ class TextSlotRenderable extends TextNodeRenderable2 {
     this._visible = false;
     this.slotParent = parent;
   }
+  detachFromSlot() {
+    this.slotParent = undefined;
+  }
+  disposeWithoutSlotCascade() {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
+    this.detachFromSlot();
+  }
   destroy() {
     if (this.destroyed) {
       return;
     }
     this.destroyed = true;
-    this.slotParent?.destroy();
+    const slotParent = this.slotParent;
+    this.slotParent = undefined;
+    slotParent?.destroy();
     super.destroy();
   }
 }
@@ -804,11 +832,14 @@ class LayoutSlotRenderable extends SlotBaseRenderable {
   yogaNode;
   slotParent;
   destroyed = false;
-  constructor(id, parent) {
+  yogaNodeConstructor;
+  yogaNodeFreed = false;
+  constructor(id, parent, layoutParent) {
     super(id);
     this._visible = false;
     this.slotParent = parent;
-    this.yogaNode = Yoga.default.Node.create();
+    this.yogaNodeConstructor = getLayoutNodeConstructor(layoutParent);
+    this.yogaNode = createLayoutSlotYogaNode(this.yogaNodeConstructor);
     this.yogaNode.setDisplay(Yoga.Display.None);
   }
   getLayoutNode() {
@@ -817,46 +848,216 @@ class LayoutSlotRenderable extends SlotBaseRenderable {
   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 {}
+  }
+  disposeWithoutSlotCascade() {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
+    this.detachFromSlot();
+    this.freeYogaNode();
+  }
   destroy() {
     if (this.destroyed) {
       return;
     }
     this.destroyed = true;
-    super.destroy();
-    this.slotParent?.destroy();
+    const slotParent = this.slotParent;
+    this.slotParent = undefined;
+    this.freeYogaNode();
+    slotParent?.destroy();
   }
 }
 
 class SlotRenderable extends SlotBaseRenderable {
-  layoutNode;
-  textNode;
   destroyed = false;
+  layoutNodesByParent = new Map;
+  textNodesByParent = new Map;
+  layoutNodeCount = 0;
+  textNodeCount = 0;
   constructor(id) {
     super(id);
     this._visible = false;
   }
+  get layoutNode() {
+    return this.getCurrentSlotChild(this.layoutNodesByParent);
+  }
+  get textNode() {
+    return this.getCurrentSlotChild(this.textNodesByParent);
+  }
+  isTextSlotParent(parent) {
+    return isTextNodeRenderable2(parent) || parent instanceof TextRenderable2;
+  }
+  getCurrentSlotChild(nodesByParent) {
+    for (const node of nodesByParent.values()) {
+      if (node.parent) {
+        return node;
+      }
+    }
+    return nodesByParent.values().next().value;
+  }
+  getTextNodeForParent(parent) {
+    const mappedNode = this.textNodesByParent.get(parent);
+    if (mappedNode) {
+      return mappedNode;
+    }
+    for (const [mappedParent, textNode] of this.textNodesByParent) {
+      if (textNode.parent !== parent) {
+        continue;
+      }
+      this.textNodesByParent.delete(mappedParent);
+      this.textNodesByParent.set(parent, textNode);
+      return textNode;
+    }
+  }
+  getLayoutNodeForParent(parent) {
+    const mappedNode = this.layoutNodesByParent.get(parent);
+    if (mappedNode) {
+      return mappedNode;
+    }
+    for (const [mappedParent, layoutNode] of this.layoutNodesByParent) {
+      if (layoutNode.parent !== parent) {
+        continue;
+      }
+      this.layoutNodesByParent.delete(mappedParent);
+      this.layoutNodesByParent.set(parent, layoutNode);
+      return layoutNode;
+    }
+  }
+  takeReusableTextNode(parent) {
+    for (const [mappedParent, textNode] of this.textNodesByParent) {
+      if (textNode.parent) {
+        continue;
+      }
+      this.textNodesByParent.delete(mappedParent);
+      this.textNodesByParent.set(parent, textNode);
+      return textNode;
+    }
+  }
+  takeReusableLayoutNode(parent) {
+    for (const [mappedParent, layoutNode] of this.layoutNodesByParent) {
+      if (layoutNode.parent) {
+        continue;
+      }
+      if (!layoutNode.isCompatibleWith(parent)) {
+        continue;
+      }
+      this.layoutNodesByParent.delete(mappedParent);
+      this.layoutNodesByParent.set(parent, layoutNode);
+      return layoutNode;
+    }
+  }
+  disposeDetachedTextNodes() {
+    for (const [parent, textNode] of this.textNodesByParent) {
+      if (textNode.parent) {
+        continue;
+      }
+      this.textNodesByParent.delete(parent);
+      textNode.disposeWithoutSlotCascade();
+    }
+  }
+  disposeDetachedIncompatibleLayoutNodes(parent) {
+    for (const [mappedParent, layoutNode] of this.layoutNodesByParent) {
+      if (layoutNode.parent || layoutNode.isCompatibleWith(parent)) {
+        continue;
+      }
+      this.layoutNodesByParent.delete(mappedParent);
+      layoutNode.disposeWithoutSlotCascade();
+    }
+  }
+  getAttachedSlotParent(excludedNode) {
+    for (const textNode of this.textNodesByParent.values()) {
+      if (textNode !== excludedNode && textNode.parent) {
+        return textNode.parent;
+      }
+    }
+    for (const layoutNode of this.layoutNodesByParent.values()) {
+      if (layoutNode !== excludedNode && layoutNode.parent) {
+        return layoutNode.parent;
+      }
+    }
+    return null;
+  }
+  hasOtherAttachedSlotChildren(excludedNode) {
+    return this.getAttachedSlotParent(excludedNode) !== null;
+  }
   getSlotChild(parent) {
-    if (isTextNodeRenderable2(parent) || parent instanceof TextRenderable2) {
-      if (!this.textNode) {
-        this.textNode = new TextSlotRenderable(`slot-text-${this.id}`, this);
+    if (this.isTextSlotParent(parent)) {
+      const existingTextNode = this.getTextNodeForParent(parent);
+      if (existingTextNode) {
+        return existingTextNode;
+      }
+      const reusableTextNode = this.takeReusableTextNode(parent);
+      if (reusableTextNode) {
+        return reusableTextNode;
       }
-      return this.textNode;
+      this.disposeDetachedIncompatibleLayoutNodes(parent);
+      const textNode = new TextSlotRenderable(`slot-text-${this.id}-${++this.textNodeCount}`, this);
+      this.textNodesByParent.set(parent, textNode);
+      return textNode;
+    }
+    const existingLayoutNode = this.getLayoutNodeForParent(parent);
+    if (existingLayoutNode) {
+      return existingLayoutNode;
+    }
+    const reusableLayoutNode = this.takeReusableLayoutNode(parent);
+    if (reusableLayoutNode) {
+      return reusableLayoutNode;
+    }
+    this.disposeDetachedTextNodes();
+    this.disposeDetachedIncompatibleLayoutNodes(parent);
+    const layoutNode = new LayoutSlotRenderable(`slot-layout-${this.id}-${++this.layoutNodeCount}`, this, parent);
+    this.layoutNodesByParent.set(parent, layoutNode);
+    return layoutNode;
+  }
+  getSlotChildForRemoval(parent) {
+    if (this.isTextSlotParent(parent)) {
+      return this.getTextNodeForParent(parent);
+    }
+    return this.getLayoutNodeForParent(parent);
+  }
+  didRemoveSlotChild(parent, child) {
+    const hasOtherAttachedSlotChildren = this.hasOtherAttachedSlotChildren(child);
+    if (hasOtherAttachedSlotChildren && child instanceof TextSlotRenderable && this.getTextNodeForParent(parent) === child) {
+      this.textNodesByParent.delete(parent);
+      child.disposeWithoutSlotCascade();
+    }
+    if (hasOtherAttachedSlotChildren && child instanceof LayoutSlotRenderable && this.getLayoutNodeForParent(parent) === child) {
+      this.layoutNodesByParent.delete(parent);
+      child.disposeWithoutSlotCascade();
     }
-    if (!this.layoutNode) {
-      this.layoutNode = new LayoutSlotRenderable(`slot-layout-${this.id}`, this);
+    if (this.parent === parent) {
+      this.parent = this.getAttachedSlotParent(child);
     }
-    return this.layoutNode;
   }
   destroy() {
     if (this.destroyed) {
       return;
     }
     this.destroyed = true;
-    if (this.layoutNode) {
-      this.layoutNode.destroy();
+    const layoutNodes = new Set(this.layoutNodesByParent.values());
+    this.layoutNodesByParent.clear();
+    for (const layoutNode of layoutNodes) {
+      layoutNode.destroy();
     }
-    if (this.textNode) {
-      this.textNode.destroy();
+    const textNodes = new Set(this.textNodesByParent.values());
+    this.textNodesByParent.clear();
+    for (const textNode of textNodes) {
+      textNode.destroy();
     }
   }
 }

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -39,7 +39,7 @@
   "dependencies": {
     "@babel/core": "7.28.0",
     "@babel/preset-typescript": "7.27.1",
-    "@opentui/core": "0.2.4",
+    "@opentui/core": "0.2.5",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-preset-solid": "1.9.12",
     "entities": "7.0.1",

package/src/elements/slot.d.ts

@@ -14,25 +14,49 @@ export declare class TextSlotRenderable extends TextNodeRenderable {
     protected slotParent?: SlotRenderable;
     protected destroyed: boolean;
     constructor(id: string, parent?: SlotRenderable);
+    detachFromSlot(): void;
+    disposeWithoutSlotCascade(): void;
     destroy(): void;
 }
 export declare class LayoutSlotRenderable extends SlotBaseRenderable {
     protected yogaNode: Yoga.Node;
     protected slotParent?: SlotRenderable;
     protected destroyed: boolean;
-    constructor(id: string, parent?: SlotRenderable);
+    private yogaNodeConstructor;
+    private yogaNodeFreed;
+    constructor(id: string, parent?: SlotRenderable, layoutParent?: BaseRenderable);
     getLayoutNode(): Yoga.Node;
     updateFromLayout(): void;
     updateLayout(): void;
     onRemove(): void;
+    isCompatibleWith(layoutParent?: BaseRenderable): boolean;
+    detachFromSlot(): void;
+    private freeYogaNode;
+    disposeWithoutSlotCascade(): void;
     destroy(): void;
 }
 export declare class SlotRenderable extends SlotBaseRenderable {
-    layoutNode?: LayoutSlotRenderable;
-    textNode?: TextSlotRenderable;
     protected destroyed: boolean;
+    private readonly layoutNodesByParent;
+    private readonly textNodesByParent;
+    private layoutNodeCount;
+    private textNodeCount;
     constructor(id: string);
+    get layoutNode(): LayoutSlotRenderable | undefined;
+    get textNode(): TextSlotRenderable | undefined;
+    private isTextSlotParent;
+    private getCurrentSlotChild;
+    private getTextNodeForParent;
+    private getLayoutNodeForParent;
+    private takeReusableTextNode;
+    private takeReusableLayoutNode;
+    private disposeDetachedTextNodes;
+    private disposeDetachedIncompatibleLayoutNodes;
+    private getAttachedSlotParent;
+    private hasOtherAttachedSlotChildren;
     getSlotChild(parent: BaseRenderable): TextSlotRenderable | LayoutSlotRenderable;
+    getSlotChildForRemoval(parent: BaseRenderable): BaseRenderable | undefined;
+    didRemoveSlotChild(parent: BaseRenderable, child: BaseRenderable): void;
     destroy(): void;
 }
 export {};