@opentui/solid 0.1.6 → 0.1.8

package/README.md

@@ -11,6 +11,7 @@ bun install solid-js @opentui/solid
 ## Usage
 
 1. Add jsx config to tsconfig.json:
+
 ```json
 {
   "compilerOptions": {
@@ -21,16 +22,17 @@ bun install solid-js @opentui/solid
 ```
 
 2. Add preload script to bunfig.toml:
+
 ```toml
 preload = ["@opentui/solid/preload"]
 ```
 
 3. Add render function to index.tsx:
+
 ```tsx
-import { render } from "@opentui/solid";
+import { render } from "@opentui/solid"
 
-render(() => <text>Hello, World!</text>);
+render(() => <text>Hello, World!</text>)
 ```
 
-
 4. Run with `bun --conditions=browser index.tsx`.

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,94 @@ 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;
+  let 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 = styledText.insert(node.chunk, anchorIndex);
+  } else {
+    const firstChunk = textParent.content.chunks[0];
+    if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
+      styledText = 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 = 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);
+    parent.content = parent.content.remove(node.chunk);
+  } else if (node.textParent) {
+    ChunkToTextNodeMap.delete(node.chunk);
+    let styledText = node.textParent.content;
+    styledText = 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 +241,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 +290,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/jsx-runtime.d.ts

@@ -1,4 +1,4 @@
-import { Renderable } from "@opentui/core";
+import { Renderable } from "@opentui/core"
 import {
   ASCIIFontElementProps,
   BoxElementProps,
@@ -7,25 +7,25 @@ import {
   SelectElementProps,
   TabSelectElementProps,
   TextElementProps,
-} from "./src/elements/index";
+} from "./src/elements/index"
 
 declare namespace JSX {
   // Replace Node with Renderable
-  type Element = Renderable | ArrayElement | (string & {}) | number | boolean | null | undefined;
+  type Element = Renderable | ArrayElement | (string & {}) | number | boolean | null | undefined
 
   interface ArrayElement extends Array<Element> {}
 
   interface IntrinsicElements {
-    ascii_font: ASCIIFontElementProps;
-    box: BoxElementProps;
-    group: GroupElementProps;
-    input: InputElementProps;
-    select: SelectElementProps;
-    tab_select: TabSelectElementProps;
-    text: TextElementProps;
+    ascii_font: ASCIIFontElementProps
+    box: BoxElementProps
+    group: GroupElementProps
+    input: InputElementProps
+    select: SelectElementProps
+    tab_select: TabSelectElementProps
+    text: TextElementProps
   }
 
   interface ElementChildrenAttribute {
-    children: {};
+    children: {}
   }
 }

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -30,18 +30,18 @@
     "./jsx-dev-runtime": "./jsx-runtime.d.ts"
   },
   "dependencies": {
-    "@opentui/core": "0.1.6"
+    "@opentui/core": "0.1.8"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.5",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "@babel/core": "^7.28.0",
-    "@babel/preset-typescript": "^7.27.1",
-    "babel-preset-solid": "^1.9.9",
+    "@types/babel__core": "7.20.5",
+    "babel-plugin-module-resolver": "5.0.2",
+    "@babel/core": "7.28.0",
+    "@babel/preset-typescript": "7.27.1",
+    "babel-preset-solid": "1.9.9",
     "@types/bun": "latest"
   },
   "peerDependencies": {
-    "solid-js": "^1.9.9",
+    "solid-js": "1.9.9",
     "typescript": "^5"
   }
 }

package/scripts/preload.ts

@@ -1,4 +1,4 @@
-import solidTransformPlugin from "./solid-plugin";
-import { plugin, type BunPlugin } from "bun";
+import solidTransformPlugin from "./solid-plugin"
+import { plugin, type BunPlugin } from "bun"
 
-plugin(solidTransformPlugin);
+plugin(solidTransformPlugin)

package/scripts/solid-plugin.ts

@@ -1,9 +1,9 @@
-import { transformAsync } from "@babel/core";
+import { transformAsync } from "@babel/core"
 // @ts-expect-error - Types not important.
-import ts from "@babel/preset-typescript";
+import ts from "@babel/preset-typescript"
 // @ts-expect-error - Types not important.
-import solid from "babel-preset-solid";
-import { type BunPlugin } from "bun";
+import solid from "babel-preset-solid"
+import { type BunPlugin } from "bun"
 
 const solidTransformPlugin: BunPlugin = {
   name: "bun-plugin-solid",
@@ -26,8 +26,8 @@ const solidTransformPlugin: BunPlugin = {
     //   };
     // });
     build.onLoad({ filter: /\.(js|ts)x$/ }, async (args) => {
-      const { readFile } = await import("node:fs/promises");
-      const code = await readFile(args.path, "utf8");
+      const { readFile } = await import("node:fs/promises")
+      const code = await readFile(args.path, "utf8")
       const transforms = await transformAsync(code, {
         filename: args.path,
         // env: {
@@ -46,13 +46,13 @@ const solidTransformPlugin: BunPlugin = {
           ],
           [ts],
         ],
-      });
+      })
       return {
         contents: transforms?.code ?? "",
         loader: "js",
-      };
-    });
+      }
+    })
   },
-};
+}
 
-export default solidTransformPlugin;
+export default solidTransformPlugin

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,94 @@ 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;
+  let 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 = styledText.insert(node.chunk, anchorIndex);
+  } else {
+    const firstChunk = textParent.content.chunks[0];
+    if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
+      styledText = 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 = 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);
+    parent.content = parent.content.remove(node.chunk);
+  } else if (node.textParent) {
+    ChunkToTextNodeMap.delete(node.chunk);
+    let styledText = node.textParent.content;
+    styledText = 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 +166,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 +215,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);
     }