@opentui/solid 0.1.6 → 0.1.7

package/index.js

@@ -106,7 +106,6 @@ var elements = {
 
 // src/reconciler.ts
 import {
-  GroupRenderable as GroupRenderable2,
   InputRenderable as InputRenderable2,
   InputRenderableEvents,
   Renderable,
@@ -131,10 +130,13 @@ function getNextId(elementType) {
 }
 
 // src/reconciler.ts
+var GHOST_NODE_TAG = "text-ghost";
+
 class TextNode {
   id;
   chunk;
   parent;
+  textParent;
   constructor(chunk) {
     this.id = getNextId("text-node");
     this.chunk = chunk;
@@ -144,43 +146,96 @@ var ChunkToTextNodeMap = new WeakMap;
 var log = (...args) => {
   console.log("[Reconciler]", ...args);
 };
-function _insertNode(parent, node, anchor) {
-  log("Inserting node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
-  if (node instanceof TextNode) {
-    if (!(parent instanceof TextRenderable2)) {
-      console.warn(`Cannot insert text:"${node.chunk.plainText}" unless wrapped with a <text> element.`);
-      const ghostNode = new GroupRenderable2(getNextId("ghost-group"), {});
-      ghostNode.getLayoutNode().yogaNode.setDisplay(2);
-      if (parent instanceof Renderable) {
-        parent.add(ghostNode);
-      }
+function getOrCreateTextGhostNode(parent, anchor) {
+  if (anchor instanceof TextNode && anchor.textParent) {
+    return anchor.textParent;
+  }
+  const children = parent.getChildren();
+  if (anchor instanceof Renderable) {
+    const anchorIndex = children.findIndex((el) => el.id === anchor.id);
+    const beforeAnchor = children[anchorIndex - 1];
+    if (beforeAnchor instanceof TextRenderable2 && beforeAnchor.id.startsWith(GHOST_NODE_TAG)) {
+      return beforeAnchor;
+    }
+  }
+  const lastChild = children.at(-1);
+  if (lastChild instanceof TextRenderable2 && lastChild.id.startsWith(GHOST_NODE_TAG)) {
+    return lastChild;
+  }
+  const ghostNode = new TextRenderable2(getNextId(GHOST_NODE_TAG), {});
+  _insertNode(parent, ghostNode, anchor);
+  return ghostNode;
+}
+function insertTextNode(parent, node, anchor) {
+  if (!(parent instanceof Renderable)) {
+    console.warn("Attaching text node to parent text node, impossible");
+    return;
+  }
+  log("Inserting text node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
+  let textParent;
+  if (!(parent instanceof TextRenderable2)) {
+    textParent = getOrCreateTextGhostNode(parent, anchor);
+  } else {
+    textParent = parent;
+  }
+  node.textParent = textParent;
+  const styledText = textParent.content;
+  if (anchor && anchor instanceof TextNode) {
+    const anchorIndex = styledText.chunks.indexOf(anchor.chunk);
+    if (anchorIndex == -1) {
+      console.log("anchor not found");
       return;
     }
-    const styledText = parent.content;
-    if (anchor && anchor instanceof TextNode) {
-      const anchorIndex = styledText.chunks.indexOf(anchor.chunk);
-      if (anchorIndex == -1) {
-        console.log("anchor not found");
-        return;
-      }
-      styledText.insert(node.chunk, anchorIndex);
+    styledText.insert(node.chunk, anchorIndex);
+  } else {
+    const firstChunk = textParent.content.chunks[0];
+    if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
+      styledText.replace(node.chunk, firstChunk);
     } else {
-      const firstChunk = parent.content.chunks[0];
-      if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
-        styledText.replace(node.chunk, firstChunk);
-      } else {
-        styledText.insert(node.chunk);
-      }
+      styledText.insert(node.chunk);
     }
-    parent.content = styledText;
-    node.parent = parent;
+  }
+  textParent.content = styledText;
+  node.parent = parent;
+  return;
+}
+function removeTextNode(parent, node) {
+  if (!(parent instanceof Renderable)) {
+    ChunkToTextNodeMap.delete(node.chunk);
     return;
   }
+  if (parent === node.textParent && parent instanceof TextRenderable2) {
+    ChunkToTextNodeMap.delete(node.chunk);
+    const styledText = parent.content;
+    styledText.remove(node.chunk);
+    parent.content = styledText;
+  } else if (node.textParent) {
+    ChunkToTextNodeMap.delete(node.chunk);
+    const styledText = node.textParent.content;
+    styledText.remove(node.chunk);
+    if (styledText.chunks.length > 0) {
+      node.textParent.content = styledText;
+    } else {
+      node.parent?.remove(node.textParent.id);
+      node.textParent.destroyRecursively();
+    }
+  }
+}
+function _insertNode(parent, node, anchor) {
+  log("Inserting node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
+  if (node instanceof TextNode) {
+    return insertTextNode(parent, node, anchor);
+  }
   if (!(parent instanceof Renderable)) {
     return;
   }
   if (anchor) {
-    const anchorIndex = parent.getChildren().findIndex((el) => el.id === anchor.id);
+    const anchorIndex = parent.getChildren().findIndex((el) => {
+      if (anchor instanceof TextNode) {
+        return el.id === anchor.textParent?.id;
+      }
+      return el.id === anchor.id;
+    });
     parent.add(node, anchorIndex);
   } else {
     parent.add(node);
@@ -188,14 +243,12 @@ function _insertNode(parent, node, anchor) {
 }
 function _removeNode(parent, node) {
   log("Removing node:", node.id, "from parent:", parent.id);
-  if (parent instanceof TextRenderable2 && node instanceof TextNode) {
-    ChunkToTextNodeMap.delete(node.chunk);
-    const styledText = parent.content;
-    styledText.remove(node.chunk);
-    parent.content = styledText;
-  } else if (parent instanceof Renderable && node instanceof Renderable) {
-    node.destroyRecursively();
+  if (node instanceof TextNode) {
+    return removeTextNode(parent, node);
+  }
+  if (parent instanceof Renderable && node instanceof Renderable) {
     parent.remove(node.id);
+    node.destroyRecursively();
   }
 }
 var {
@@ -239,15 +292,15 @@ var {
       text: new TextEncoder().encode(value),
       plainText: value
     };
-    const parent = textNode.parent;
-    if (!parent) {
+    const textParent = textNode.textParent;
+    if (!textParent) {
       log("No parent found for text node:", textNode.id);
       return;
     }
-    if (parent instanceof TextRenderable2) {
-      const styledText = parent.content;
+    if (textParent instanceof TextRenderable2) {
+      const styledText = textParent.content;
       styledText.replace(newChunk, textNode.chunk);
-      parent.content = styledText;
+      textParent.content = styledText;
       textNode.chunk = newChunk;
       ChunkToTextNodeMap.set(newChunk, textNode);
     }

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
     "./jsx-dev-runtime": "./jsx-runtime.d.ts"
   },
   "dependencies": {
-    "@opentui/core": "0.1.6"
+    "@opentui/core": "0.1.7"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",

package/src/reconciler.d.ts

@@ -1,8 +1,9 @@
-import { Renderable, type TextChunk } from "@opentui/core";
+import { Renderable, TextRenderable, type TextChunk } from "@opentui/core";
 declare class TextNode {
     id: string;
     chunk: TextChunk;
     parent?: Renderable;
+    textParent?: TextRenderable;
     constructor(chunk: TextChunk);
 }
 type DomNode = Renderable | TextNode;

package/src/reconciler.js

@@ -1,7 +1,6 @@
 // @bun
 // src/reconciler.ts
 import {
-  GroupRenderable as GroupRenderable2,
   InputRenderable as InputRenderable2,
   InputRenderableEvents,
   Renderable,
@@ -56,10 +55,13 @@ function getNextId(elementType) {
 }
 
 // src/reconciler.ts
+var GHOST_NODE_TAG = "text-ghost";
+
 class TextNode {
   id;
   chunk;
   parent;
+  textParent;
   constructor(chunk) {
     this.id = getNextId("text-node");
     this.chunk = chunk;
@@ -69,43 +71,96 @@ var ChunkToTextNodeMap = new WeakMap;
 var log = (...args) => {
   console.log("[Reconciler]", ...args);
 };
-function _insertNode(parent, node, anchor) {
-  log("Inserting node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
-  if (node instanceof TextNode) {
-    if (!(parent instanceof TextRenderable2)) {
-      console.warn(`Cannot insert text:"${node.chunk.plainText}" unless wrapped with a <text> element.`);
-      const ghostNode = new GroupRenderable2(getNextId("ghost-group"), {});
-      ghostNode.getLayoutNode().yogaNode.setDisplay(2);
-      if (parent instanceof Renderable) {
-        parent.add(ghostNode);
-      }
+function getOrCreateTextGhostNode(parent, anchor) {
+  if (anchor instanceof TextNode && anchor.textParent) {
+    return anchor.textParent;
+  }
+  const children = parent.getChildren();
+  if (anchor instanceof Renderable) {
+    const anchorIndex = children.findIndex((el) => el.id === anchor.id);
+    const beforeAnchor = children[anchorIndex - 1];
+    if (beforeAnchor instanceof TextRenderable2 && beforeAnchor.id.startsWith(GHOST_NODE_TAG)) {
+      return beforeAnchor;
+    }
+  }
+  const lastChild = children.at(-1);
+  if (lastChild instanceof TextRenderable2 && lastChild.id.startsWith(GHOST_NODE_TAG)) {
+    return lastChild;
+  }
+  const ghostNode = new TextRenderable2(getNextId(GHOST_NODE_TAG), {});
+  _insertNode(parent, ghostNode, anchor);
+  return ghostNode;
+}
+function insertTextNode(parent, node, anchor) {
+  if (!(parent instanceof Renderable)) {
+    console.warn("Attaching text node to parent text node, impossible");
+    return;
+  }
+  log("Inserting text node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
+  let textParent;
+  if (!(parent instanceof TextRenderable2)) {
+    textParent = getOrCreateTextGhostNode(parent, anchor);
+  } else {
+    textParent = parent;
+  }
+  node.textParent = textParent;
+  const styledText = textParent.content;
+  if (anchor && anchor instanceof TextNode) {
+    const anchorIndex = styledText.chunks.indexOf(anchor.chunk);
+    if (anchorIndex == -1) {
+      console.log("anchor not found");
       return;
     }
-    const styledText = parent.content;
-    if (anchor && anchor instanceof TextNode) {
-      const anchorIndex = styledText.chunks.indexOf(anchor.chunk);
-      if (anchorIndex == -1) {
-        console.log("anchor not found");
-        return;
-      }
-      styledText.insert(node.chunk, anchorIndex);
+    styledText.insert(node.chunk, anchorIndex);
+  } else {
+    const firstChunk = textParent.content.chunks[0];
+    if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
+      styledText.replace(node.chunk, firstChunk);
     } else {
-      const firstChunk = parent.content.chunks[0];
-      if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
-        styledText.replace(node.chunk, firstChunk);
-      } else {
-        styledText.insert(node.chunk);
-      }
+      styledText.insert(node.chunk);
     }
-    parent.content = styledText;
-    node.parent = parent;
+  }
+  textParent.content = styledText;
+  node.parent = parent;
+  return;
+}
+function removeTextNode(parent, node) {
+  if (!(parent instanceof Renderable)) {
+    ChunkToTextNodeMap.delete(node.chunk);
     return;
   }
+  if (parent === node.textParent && parent instanceof TextRenderable2) {
+    ChunkToTextNodeMap.delete(node.chunk);
+    const styledText = parent.content;
+    styledText.remove(node.chunk);
+    parent.content = styledText;
+  } else if (node.textParent) {
+    ChunkToTextNodeMap.delete(node.chunk);
+    const styledText = node.textParent.content;
+    styledText.remove(node.chunk);
+    if (styledText.chunks.length > 0) {
+      node.textParent.content = styledText;
+    } else {
+      node.parent?.remove(node.textParent.id);
+      node.textParent.destroyRecursively();
+    }
+  }
+}
+function _insertNode(parent, node, anchor) {
+  log("Inserting node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
+  if (node instanceof TextNode) {
+    return insertTextNode(parent, node, anchor);
+  }
   if (!(parent instanceof Renderable)) {
     return;
   }
   if (anchor) {
-    const anchorIndex = parent.getChildren().findIndex((el) => el.id === anchor.id);
+    const anchorIndex = parent.getChildren().findIndex((el) => {
+      if (anchor instanceof TextNode) {
+        return el.id === anchor.textParent?.id;
+      }
+      return el.id === anchor.id;
+    });
     parent.add(node, anchorIndex);
   } else {
     parent.add(node);
@@ -113,14 +168,12 @@ function _insertNode(parent, node, anchor) {
 }
 function _removeNode(parent, node) {
   log("Removing node:", node.id, "from parent:", parent.id);
-  if (parent instanceof TextRenderable2 && node instanceof TextNode) {
-    ChunkToTextNodeMap.delete(node.chunk);
-    const styledText = parent.content;
-    styledText.remove(node.chunk);
-    parent.content = styledText;
-  } else if (parent instanceof Renderable && node instanceof Renderable) {
-    node.destroyRecursively();
+  if (node instanceof TextNode) {
+    return removeTextNode(parent, node);
+  }
+  if (parent instanceof Renderable && node instanceof Renderable) {
     parent.remove(node.id);
+    node.destroyRecursively();
   }
 }
 var {
@@ -164,15 +217,15 @@ var {
       text: new TextEncoder().encode(value),
       plainText: value
     };
-    const parent = textNode.parent;
-    if (!parent) {
+    const textParent = textNode.textParent;
+    if (!textParent) {
       log("No parent found for text node:", textNode.id);
       return;
     }
-    if (parent instanceof TextRenderable2) {
-      const styledText = parent.content;
+    if (textParent instanceof TextRenderable2) {
+      const styledText = textParent.content;
       styledText.replace(newChunk, textNode.chunk);
-      parent.content = styledText;
+      textParent.content = styledText;
       textNode.chunk = newChunk;
       ChunkToTextNodeMap.set(newChunk, textNode);
     }