@opentui/solid 0.1.7 → 0.1.9

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`.
+4. Run with `bun index.tsx`.

package/index.js

@@ -108,16 +108,19 @@ var elements = {
 import {
   InputRenderable as InputRenderable2,
   InputRenderableEvents,
-  Renderable,
+  Renderable as Renderable2,
   SelectRenderable as SelectRenderable2,
   SelectRenderableEvents,
   StyledText,
   TabSelectRenderable as TabSelectRenderable2,
   TabSelectRenderableEvents,
-  TextRenderable as TextRenderable2
+  TextRenderable as TextRenderable3
 } from "@opentui/core";
 import { createRenderer } from "solid-js/universal";
 
+// src/elements/text-node.ts
+import { Renderable, TextRenderable as TextRenderable2 } from "@opentui/core";
+
 // src/utils/id-counter.ts
 var idCounter = new Map;
 function getNextId(elementType) {
@@ -129,8 +132,14 @@ function getNextId(elementType) {
   return `${elementType}-${value}`;
 }
 
-// src/reconciler.ts
+// src/utils/log.ts
+var log = (...args) => {
+  console.log("[Reconciler]", ...args);
+};
+
+// src/elements/text-node.ts
 var GHOST_NODE_TAG = "text-ghost";
+var ChunkToTextNodeMap = new WeakMap;
 
 class TextNode {
   id;
@@ -140,93 +149,112 @@ class TextNode {
   constructor(chunk) {
     this.id = getNextId("text-node");
     this.chunk = chunk;
+    ChunkToTextNodeMap.set(chunk, this);
   }
-}
-var ChunkToTextNodeMap = new WeakMap;
-var log = (...args) => {
-  console.log("[Reconciler]", ...args);
-};
-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;
+  replaceText(newChunk) {
+    const textParent = this.textParent;
+    if (!textParent) {
+      log("No parent found for text node:", this.id);
+      return;
     }
+    textParent.content = textParent.content.replace(newChunk, this.chunk);
+    this.chunk = newChunk;
+    ChunkToTextNodeMap.set(newChunk, this);
   }
-  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;
+  static getTextNodeFromChunk(chunk) {
+    return ChunkToTextNodeMap.get(chunk);
   }
-  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");
+  insert(parent, anchor) {
+    if (!(parent instanceof Renderable)) {
+      log("Attaching text node to parent text node, impossible");
       return;
     }
-    styledText.insert(node.chunk, anchorIndex);
-  } else {
-    const firstChunk = textParent.content.chunks[0];
-    if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
-      styledText.replace(node.chunk, firstChunk);
+    let textParent;
+    if (!(parent instanceof TextRenderable2)) {
+      textParent = this.getOrCreateTextGhostNode(parent, anchor);
+    } else {
+      textParent = parent;
+    }
+    this.textParent = textParent;
+    let styledText = textParent.content;
+    if (anchor && anchor instanceof TextNode) {
+      const anchorIndex = styledText.chunks.indexOf(anchor.chunk);
+      if (anchorIndex === -1) {
+        log("anchor not found");
+        return;
+      }
+      styledText = styledText.insert(this.chunk, anchorIndex);
     } else {
-      styledText.insert(node.chunk);
+      const firstChunk = textParent.content.chunks[0];
+      if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
+        styledText = styledText.replace(this.chunk, firstChunk);
+      } else {
+        styledText = styledText.insert(this.chunk);
+      }
     }
+    textParent.content = styledText;
+    this.parent = parent;
   }
-  textParent.content = styledText;
-  node.parent = parent;
-  return;
-}
-function removeTextNode(parent, node) {
-  if (!(parent instanceof Renderable)) {
-    ChunkToTextNodeMap.delete(node.chunk);
-    return;
+  remove(parent) {
+    if (!(parent instanceof Renderable)) {
+      ChunkToTextNodeMap.delete(this.chunk);
+      return;
+    }
+    if (parent === this.textParent && parent instanceof TextRenderable2) {
+      ChunkToTextNodeMap.delete(this.chunk);
+      parent.content = parent.content.remove(this.chunk);
+      return;
+    }
+    if (this.textParent) {
+      ChunkToTextNodeMap.delete(this.chunk);
+      let styledText = this.textParent.content;
+      styledText = styledText.remove(this.chunk);
+      if (styledText.chunks.length > 0) {
+        this.textParent.content = styledText;
+      } else {
+        this.parent?.remove(this.textParent.id);
+        this.textParent.destroyRecursively();
+      }
+    }
   }
-  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();
+  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 GhostTextRenderable) {
+        return beforeAnchor;
+      }
+    }
+    const lastChild = children.at(-1);
+    if (lastChild instanceof GhostTextRenderable) {
+      return lastChild;
+    }
+    const ghostNode = new GhostTextRenderable(getNextId(GHOST_NODE_TAG), {});
+    insertNode(parent, ghostNode, anchor);
+    return ghostNode;
+  }
+}
+
+class GhostTextRenderable extends TextRenderable2 {
+  constructor(id, options) {
+    super(id, options);
+  }
+  static isGhostNode(node) {
+    return node instanceof GhostTextRenderable;
   }
 }
+
+// src/reconciler.ts
 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);
+    return node.insert(parent, anchor);
   }
-  if (!(parent instanceof Renderable)) {
+  if (!(parent instanceof Renderable2)) {
     return;
   }
   if (anchor) {
@@ -244,9 +272,9 @@ function _insertNode(parent, node, anchor) {
 function _removeNode(parent, node) {
   log("Removing node:", node.id, "from parent:", parent.id);
   if (node instanceof TextNode) {
-    return removeTextNode(parent, node);
+    return node.remove(parent);
   }
-  if (parent instanceof Renderable && node instanceof Renderable) {
+  if (parent instanceof Renderable2 && node instanceof Renderable2) {
     parent.remove(node.id);
     node.destroyRecursively();
   }
@@ -280,30 +308,18 @@ var {
       plainText: `${value}`
     };
     const textNode = new TextNode(chunk);
-    ChunkToTextNodeMap.set(chunk, textNode);
     return textNode;
   },
   replaceText(textNode, value) {
     log("Replacing text:", value, "in node:", textNode.id);
-    if (textNode instanceof Renderable)
+    if (textNode instanceof Renderable2)
       return;
     const newChunk = {
       __isChunk: true,
       text: new TextEncoder().encode(value),
       plainText: value
     };
-    const textParent = textNode.textParent;
-    if (!textParent) {
-      log("No parent found for text node:", textNode.id);
-      return;
-    }
-    if (textParent instanceof TextRenderable2) {
-      const styledText = textParent.content;
-      styledText.replace(newChunk, textNode.chunk);
-      textParent.content = styledText;
-      textNode.chunk = newChunk;
-      ChunkToTextNodeMap.set(newChunk, textNode);
-    }
+    textNode.replaceText(newChunk);
   },
   setProperty(node, name, value, prev) {
     if (node instanceof TextNode) {
@@ -416,10 +432,10 @@ var {
   },
   getFirstChild(node) {
     log("Getting first child of node:", node.id);
-    if (node instanceof TextRenderable2) {
+    if (node instanceof TextRenderable3) {
       const chunk = node.content.chunks[0];
       if (chunk) {
-        return ChunkToTextNodeMap.get(chunk);
+        return TextNode.getTextNodeFromChunk(chunk);
       } else {
         return;
       }
@@ -443,7 +459,7 @@ var {
       return;
     }
     if (node instanceof TextNode) {
-      if (parent instanceof TextRenderable2) {
+      if (parent instanceof TextRenderable3) {
         const siblings2 = parent.content.chunks;
         const index2 = siblings2.indexOf(node.chunk);
         if (index2 === -1 || index2 === siblings2.length - 1) {
@@ -455,7 +471,7 @@ var {
           log("Next sibling is null for node:", node.id);
           return;
         }
-        return ChunkToTextNodeMap.get(nextSibling2);
+        return TextNode.getTextNodeFromChunk(nextSibling2);
       }
       console.warn("Text parent is not a text node:", node.id);
       return;

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.7",
+  "version": "0.1.9",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -30,18 +30,18 @@
     "./jsx-dev-runtime": "./jsx-runtime.d.ts"
   },
   "dependencies": {
-    "@opentui/core": "0.1.7"
+    "@opentui/core": "0.1.9"
   },
   "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,33 +1,24 @@
-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",
   setup: (build) => {
-    // build.onLoad({ filter: /\.(js|ts)$/ }, async (args) => {
-    //   const { readFile } = await import("node:fs/promises");
-    //   const code = await readFile(args.path, "utf8");
-    //   const transforms = await transformAsync(code, {
-    //     filename: args.path,
-    //     // env: {
-    //     //   development: {
-    //     //     plugins: ["solid-refresh/babel"],
-    //     //   },
-    //     // },
-    //     presets: [[ts, {}]],
-    //   });
-    //   return {
-    //     contents: transforms.code,
-    //     loader: "js",
-    //   };
-    // });
+    build.onLoad({ filter: /\/node_modules\/solid-js\/dist\/server\.js$/ }, async (args) => {
+      const { readFile } = await import("node:fs/promises")
+      const path = args.path.replace("server.js", "solid.js")
+      const file = Bun.file(path)
+      const code = await file.text()
+      return { contents: code, loader: "js" }
+    })
     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 file = Bun.file(args.path)
+      const code = await file.text()
       const transforms = await transformAsync(code, {
         filename: args.path,
         // env: {
@@ -46,13 +37,13 @@ const solidTransformPlugin: BunPlugin = {
           ],
           [ts],
         ],
-      });
+      })
       return {
         contents: transforms?.code ?? "",
         loader: "js",
-      };
-    });
+      }
+    })
   },
-};
+}
 
-export default solidTransformPlugin;
+export default solidTransformPlugin

package/src/elements/index.d.ts

@@ -17,12 +17,12 @@ type ElementProps<T extends RenderableOptions, K extends Renderable = Renderable
     style?: Omit<T, NonStyleKeys | RenderableNonStyleKeys>;
     ref?: Ref<K>;
 } & T;
-type ContianerProps = {
+type ContainerProps = {
     children?: JSX.Element;
 };
-export type BoxElementProps = ElementProps<BoxOptions, BoxRenderable, "title"> & ContianerProps;
+export type BoxElementProps = ElementProps<BoxOptions, BoxRenderable, "title"> & ContainerProps;
 export type BoxStyle = BoxElementProps["style"];
-export type GroupElementProps = ElementProps<RenderableOptions, GroupRenderable> & ContianerProps;
+export type GroupElementProps = ElementProps<RenderableOptions, GroupRenderable> & ContainerProps;
 export type GroupStyle = GroupElementProps["style"];
 export type InputElementProps = ElementProps<InputRenderableOptions, InputRenderable, "value" | "maxLength" | "placeholder"> & {
     onInput?: (value: string) => void;

package/src/elements/text-node.d.ts

@@ -0,0 +1,47 @@
+import { Renderable, TextRenderable, type TextChunk, type TextOptions } from "@opentui/core";
+import { type DomNode } from "../reconciler";
+/**
+ * Represents a text node in the SolidJS reconciler.
+ */
+export declare class TextNode {
+    id: string;
+    chunk: TextChunk;
+    parent?: Renderable;
+    textParent?: TextRenderable | GhostTextRenderable;
+    constructor(chunk: TextChunk);
+    /**
+     * Replaces the current text chunk with a new one.
+     * @param newChunk The new text chunk to replace with.
+     */
+    replaceText(newChunk: TextChunk): void;
+    /**
+     * Retrieves the TextNode associated with a given TextChunk.
+     * @param chunk The text chunk to look up.
+     * @returns The associated TextNode or undefined if not found.
+     */
+    static getTextNodeFromChunk(chunk: TextChunk): TextNode | undefined;
+    /**
+     * Inserts this text node into the DOM structure.
+     * @param parent The parent DOM node.
+     * @param anchor The anchor node for positioning.
+     */
+    insert(parent: DomNode, anchor?: DomNode): void;
+    /**
+     * Removes this text node from the DOM structure.
+     * @param parent The parent DOM node.
+     */
+    remove(parent: DomNode): void;
+    /**
+     * Gets or creates a ghost text node for rendering text content.
+     * @param parent The parent renderable.
+     * @param anchor The anchor node for positioning.
+     * @returns The text renderable ghost node.
+     * @private
+     */
+    private getOrCreateTextGhostNode;
+}
+declare class GhostTextRenderable extends TextRenderable {
+    constructor(id: string, options: TextOptions);
+    static isGhostNode(node: DomNode): node is GhostTextRenderable;
+}
+export {};

package/src/reconciler.d.ts

@@ -1,12 +1,5 @@
-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;
+import { Renderable } from "@opentui/core";
+import { TextNode } from "./elements/text-node";
+export type DomNode = Renderable | TextNode;
 export declare const _render: (code: () => DomNode, node: DomNode) => () => void, effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => DomNode, props: T) => DomNode, createElement: (tag: string) => DomNode, createTextNode: (value: string) => DomNode, insertNode: (parent: DomNode, node: DomNode, anchor?: DomNode | undefined) => void, solidUniversalInsert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => DomNode, spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void, setProp: <T>(node: DomNode, name: string, value: T, prev?: T | undefined) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: DomNode, arg: A) => T, element: DomNode, arg: A) => T;
 export declare const insert: typeof solidUniversalInsert;
-export {};

package/src/reconciler.js

@@ -3,13 +3,13 @@
 import {
   InputRenderable as InputRenderable2,
   InputRenderableEvents,
-  Renderable,
+  Renderable as Renderable2,
   SelectRenderable as SelectRenderable2,
   SelectRenderableEvents,
   StyledText,
   TabSelectRenderable as TabSelectRenderable2,
   TabSelectRenderableEvents,
-  TextRenderable as TextRenderable2
+  TextRenderable as TextRenderable3
 } from "@opentui/core";
 import { createRenderer } from "solid-js/universal";
 
@@ -43,6 +43,9 @@ var elements = {
   text: TextRenderable
 };
 
+// src/elements/text-node.ts
+import { Renderable, TextRenderable as TextRenderable2 } from "@opentui/core";
+
 // src/utils/id-counter.ts
 var idCounter = new Map;
 function getNextId(elementType) {
@@ -54,8 +57,14 @@ function getNextId(elementType) {
   return `${elementType}-${value}`;
 }
 
-// src/reconciler.ts
+// src/utils/log.ts
+var log = (...args) => {
+  console.log("[Reconciler]", ...args);
+};
+
+// src/elements/text-node.ts
 var GHOST_NODE_TAG = "text-ghost";
+var ChunkToTextNodeMap = new WeakMap;
 
 class TextNode {
   id;
@@ -65,93 +74,112 @@ class TextNode {
   constructor(chunk) {
     this.id = getNextId("text-node");
     this.chunk = chunk;
+    ChunkToTextNodeMap.set(chunk, this);
   }
-}
-var ChunkToTextNodeMap = new WeakMap;
-var log = (...args) => {
-  console.log("[Reconciler]", ...args);
-};
-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;
+  replaceText(newChunk) {
+    const textParent = this.textParent;
+    if (!textParent) {
+      log("No parent found for text node:", this.id);
+      return;
     }
+    textParent.content = textParent.content.replace(newChunk, this.chunk);
+    this.chunk = newChunk;
+    ChunkToTextNodeMap.set(newChunk, this);
   }
-  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;
+  static getTextNodeFromChunk(chunk) {
+    return ChunkToTextNodeMap.get(chunk);
   }
-  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");
+  insert(parent, anchor) {
+    if (!(parent instanceof Renderable)) {
+      log("Attaching text node to parent text node, impossible");
       return;
     }
-    styledText.insert(node.chunk, anchorIndex);
-  } else {
-    const firstChunk = textParent.content.chunks[0];
-    if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
-      styledText.replace(node.chunk, firstChunk);
+    let textParent;
+    if (!(parent instanceof TextRenderable2)) {
+      textParent = this.getOrCreateTextGhostNode(parent, anchor);
+    } else {
+      textParent = parent;
+    }
+    this.textParent = textParent;
+    let styledText = textParent.content;
+    if (anchor && anchor instanceof TextNode) {
+      const anchorIndex = styledText.chunks.indexOf(anchor.chunk);
+      if (anchorIndex === -1) {
+        log("anchor not found");
+        return;
+      }
+      styledText = styledText.insert(this.chunk, anchorIndex);
     } else {
-      styledText.insert(node.chunk);
+      const firstChunk = textParent.content.chunks[0];
+      if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
+        styledText = styledText.replace(this.chunk, firstChunk);
+      } else {
+        styledText = styledText.insert(this.chunk);
+      }
     }
+    textParent.content = styledText;
+    this.parent = parent;
   }
-  textParent.content = styledText;
-  node.parent = parent;
-  return;
-}
-function removeTextNode(parent, node) {
-  if (!(parent instanceof Renderable)) {
-    ChunkToTextNodeMap.delete(node.chunk);
-    return;
+  remove(parent) {
+    if (!(parent instanceof Renderable)) {
+      ChunkToTextNodeMap.delete(this.chunk);
+      return;
+    }
+    if (parent === this.textParent && parent instanceof TextRenderable2) {
+      ChunkToTextNodeMap.delete(this.chunk);
+      parent.content = parent.content.remove(this.chunk);
+      return;
+    }
+    if (this.textParent) {
+      ChunkToTextNodeMap.delete(this.chunk);
+      let styledText = this.textParent.content;
+      styledText = styledText.remove(this.chunk);
+      if (styledText.chunks.length > 0) {
+        this.textParent.content = styledText;
+      } else {
+        this.parent?.remove(this.textParent.id);
+        this.textParent.destroyRecursively();
+      }
+    }
   }
-  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();
+  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 GhostTextRenderable) {
+        return beforeAnchor;
+      }
+    }
+    const lastChild = children.at(-1);
+    if (lastChild instanceof GhostTextRenderable) {
+      return lastChild;
+    }
+    const ghostNode = new GhostTextRenderable(getNextId(GHOST_NODE_TAG), {});
+    insertNode(parent, ghostNode, anchor);
+    return ghostNode;
+  }
+}
+
+class GhostTextRenderable extends TextRenderable2 {
+  constructor(id, options) {
+    super(id, options);
+  }
+  static isGhostNode(node) {
+    return node instanceof GhostTextRenderable;
   }
 }
+
+// src/reconciler.ts
 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);
+    return node.insert(parent, anchor);
   }
-  if (!(parent instanceof Renderable)) {
+  if (!(parent instanceof Renderable2)) {
     return;
   }
   if (anchor) {
@@ -169,9 +197,9 @@ function _insertNode(parent, node, anchor) {
 function _removeNode(parent, node) {
   log("Removing node:", node.id, "from parent:", parent.id);
   if (node instanceof TextNode) {
-    return removeTextNode(parent, node);
+    return node.remove(parent);
   }
-  if (parent instanceof Renderable && node instanceof Renderable) {
+  if (parent instanceof Renderable2 && node instanceof Renderable2) {
     parent.remove(node.id);
     node.destroyRecursively();
   }
@@ -205,30 +233,18 @@ var {
       plainText: `${value}`
     };
     const textNode = new TextNode(chunk);
-    ChunkToTextNodeMap.set(chunk, textNode);
     return textNode;
   },
   replaceText(textNode, value) {
     log("Replacing text:", value, "in node:", textNode.id);
-    if (textNode instanceof Renderable)
+    if (textNode instanceof Renderable2)
       return;
     const newChunk = {
       __isChunk: true,
       text: new TextEncoder().encode(value),
       plainText: value
     };
-    const textParent = textNode.textParent;
-    if (!textParent) {
-      log("No parent found for text node:", textNode.id);
-      return;
-    }
-    if (textParent instanceof TextRenderable2) {
-      const styledText = textParent.content;
-      styledText.replace(newChunk, textNode.chunk);
-      textParent.content = styledText;
-      textNode.chunk = newChunk;
-      ChunkToTextNodeMap.set(newChunk, textNode);
-    }
+    textNode.replaceText(newChunk);
   },
   setProperty(node, name, value, prev) {
     if (node instanceof TextNode) {
@@ -341,10 +357,10 @@ var {
   },
   getFirstChild(node) {
     log("Getting first child of node:", node.id);
-    if (node instanceof TextRenderable2) {
+    if (node instanceof TextRenderable3) {
       const chunk = node.content.chunks[0];
       if (chunk) {
-        return ChunkToTextNodeMap.get(chunk);
+        return TextNode.getTextNodeFromChunk(chunk);
       } else {
         return;
       }
@@ -368,7 +384,7 @@ var {
       return;
     }
     if (node instanceof TextNode) {
-      if (parent instanceof TextRenderable2) {
+      if (parent instanceof TextRenderable3) {
         const siblings2 = parent.content.chunks;
         const index2 = siblings2.indexOf(node.chunk);
         if (index2 === -1 || index2 === siblings2.length - 1) {
@@ -380,7 +396,7 @@ var {
           log("Next sibling is null for node:", node.id);
           return;
         }
-        return ChunkToTextNodeMap.get(nextSibling2);
+        return TextNode.getTextNodeFromChunk(nextSibling2);
       }
       console.warn("Text parent is not a text node:", node.id);
       return;
@@ -407,13 +423,13 @@ var insertStyledText = (parent, value, current, marker) => {
     return current;
   if (current) {
     if (typeof current === "object" && "__isChunk" in current) {
-      const node = ChunkToTextNodeMap.get(current);
+      const node = TextNode.getTextNodeFromChunk(current);
       if (node) {
         _removeNode(parent, node);
       }
     } else if (current instanceof StyledText) {
       for (const chunk of current.chunks) {
-        const chunkNode = ChunkToTextNodeMap.get(chunk);
+        const chunkNode = TextNode.getTextNodeFromChunk(chunk);
         if (!chunkNode)
           continue;
         _removeNode(parent, chunkNode);

package/src/utils/log.d.ts

@@ -0,0 +1 @@
+export declare const log: (...args: any[]) => void;