@opentui/solid 0.1.11 → 0.1.13

package/README.md

@@ -1,6 +1,6 @@
 # @opentui/solid
 
-Solid.js support for OpenTUI.
+Solid.js support for [OpenTUI](https://github.com/sst/opentui).
 
 ## Installation
 

package/index.d.ts

@@ -1,5 +1,6 @@
 import { type CliRendererConfig } from "@opentui/core";
 import type { JSX } from "./jsx-runtime";
-export * from "./src/elements";
 export declare const render: (node: () => JSX.Element, renderConfig?: CliRendererConfig) => Promise<void>;
+export * from "./src/reconciler";
+export * from "./src/elements";
 export { type JSX };

package/index.js

@@ -6,7 +6,6 @@ import { createCliRenderer } from "@opentui/core";
 import {
   ASCIIFontRenderable,
   BoxRenderable,
-  GroupRenderable,
   InputRenderable,
   SelectRenderable,
   TabSelectRenderable,
@@ -97,7 +96,6 @@ var useTimeline = (timeline, initialValue, targetValue, options, startTime = 0)
 var elements = {
   ascii_font: ASCIIFontRenderable,
   box: BoxRenderable,
-  group: GroupRenderable,
   input: InputRenderable,
   select: SelectRenderable,
   tab_select: TabSelectRenderable,
@@ -235,15 +233,17 @@ class TextNode {
     if (lastChild instanceof GhostTextRenderable) {
       return lastChild;
     }
-    const ghostNode = new GhostTextRenderable(getNextId(GHOST_NODE_TAG), {});
+    const ghostNode = new GhostTextRenderable(parent.ctx, {
+      id: getNextId(GHOST_NODE_TAG)
+    });
     insertNode(parent, ghostNode, anchor);
     return ghostNode;
   }
 }
 
 class GhostTextRenderable extends TextRenderable2 {
-  constructor(id, options) {
-    super(id, options);
+  constructor(ctx, options) {
+    super(ctx, options);
   }
   static isGhostNode(node) {
     return node instanceof GhostTextRenderable;
@@ -251,6 +251,7 @@ class GhostTextRenderable extends TextRenderable2 {
 }
 
 // src/reconciler.ts
+import { useContext as useContext2 } from "solid-js";
 function _insertNode(parent, node, anchor) {
   log("Inserting node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
   if (node instanceof TextNode) {
@@ -298,7 +299,11 @@ var {
   createElement(tagName) {
     log("Creating element:", tagName);
     const id = getNextId(tagName);
-    const element = new elements[tagName](id, {});
+    const solidRenderer = useContext2(RendererContext);
+    if (!solidRenderer) {
+      throw new Error("No renderer found");
+    }
+    const element = new elements[tagName](solidRenderer, { id });
     log("Element created with id:", id);
     return element;
   },
@@ -493,6 +498,45 @@ var {
     return nextSibling;
   }
 });
+var insertStyledText = (parent, value, current, marker) => {
+  while (typeof current === "function")
+    current = current();
+  if (value === current)
+    return current;
+  if (current) {
+    if (typeof current === "object" && "__isChunk" in current) {
+      const node = TextNode.getTextNodeFromChunk(current);
+      if (node) {
+        _removeNode(parent, node);
+      }
+    } else if (current instanceof StyledText) {
+      for (const chunk of current.chunks) {
+        const chunkNode = TextNode.getTextNodeFromChunk(chunk);
+        if (!chunkNode)
+          continue;
+        _removeNode(parent, chunkNode);
+      }
+    }
+  }
+  if (value instanceof StyledText) {
+    log("Inserting styled text:", value.toString());
+    for (const chunk of value.chunks) {
+      insertNode(parent, createTextNode(chunk), marker);
+    }
+    return value;
+  } else if (value && typeof value === "object" && "__isChunk" in value) {
+    insertNode(parent, createTextNode(value), marker);
+    return value;
+  }
+  return solidUniversalInsert(parent, value, marker, current);
+};
+var insert = (parent, accessor, marker, initial) => {
+  if (marker !== undefined && !initial)
+    initial = [];
+  if (typeof accessor !== "function")
+    return insertStyledText(parent, accessor, initial, marker);
+  effect((current) => insertStyledText(parent, accessor(), current, marker), initial);
+};
 
 // index.ts
 var render = async (node, renderConfig = {}) => {
@@ -512,9 +556,22 @@ export {
   useSelectionHandler,
   useRenderer,
   useKeyHandler,
+  use,
+  spread,
+  solidUniversalInsert,
+  setProp,
   render,
   onResize,
+  mergeProps,
+  memo,
+  insertNode,
+  insert,
   elements,
+  effect,
+  createTextNode,
+  createElement,
   createComponentTimeline,
+  createComponent,
+  _render,
   RendererContext
 };

package/jsx-runtime.d.ts

@@ -2,7 +2,6 @@ import { Renderable } from "@opentui/core"
 import {
   ASCIIFontElementProps,
   BoxElementProps,
-  GroupElementProps,
   InputElementProps,
   SelectElementProps,
   TabSelectElementProps,
@@ -18,7 +17,6 @@ declare namespace JSX {
   interface IntrinsicElements {
     ascii_font: ASCIIFontElementProps
     box: BoxElementProps
-    group: GroupElementProps
     input: InputElementProps
     select: SelectElementProps
     tab_select: TabSelectElementProps

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -18,11 +18,6 @@
       "import": "./index.js",
       "require": "./index.js"
     },
-    "./reconciler": {
-      "types": "./src/reconciler.d.ts",
-      "import": "./src/reconciler.js",
-      "require": "./src/reconciler.js"
-    },
     "./preload": {
       "import": "./scripts/preload.ts"
     },
@@ -30,7 +25,7 @@
     "./jsx-dev-runtime": "./jsx-runtime.d.ts"
   },
   "dependencies": {
-    "@opentui/core": "0.1.11",
+    "@opentui/core": "0.1.13",
     "babel-plugin-module-resolver": "5.0.2",
     "@babel/core": "7.28.0",
     "@babel/preset-typescript": "7.27.1",

package/scripts/solid-plugin.ts

@@ -29,7 +29,7 @@ const solidTransformPlugin: BunPlugin = {
           [
             solid,
             {
-              moduleName: "@opentui/solid/reconciler",
+              moduleName: "@opentui/solid",
               generate: "universal",
             },
           ],

package/src/elements/index.d.ts

@@ -1,11 +1,10 @@
 import type { ASCIIFontOptions, BoxOptions, InputRenderableOptions, Renderable, RenderableOptions, SelectOption, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderableOptions, TextChunk, TextOptions } from "@opentui/core";
-import { ASCIIFontRenderable, BoxRenderable, GroupRenderable, InputRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
+import { ASCIIFontRenderable, BoxRenderable, InputRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
 import type { JSX, Ref } from "solid-js";
 export * from "./hooks";
 export declare const elements: {
     ascii_font: typeof ASCIIFontRenderable;
     box: typeof BoxRenderable;
-    group: typeof GroupRenderable;
     input: typeof InputRenderable;
     select: typeof SelectRenderable;
     tab_select: typeof TabSelectRenderable;
@@ -13,7 +12,7 @@ export declare const elements: {
 };
 export type Element = keyof typeof elements;
 type RenderableNonStyleKeys = "buffered";
-type ElementProps<T extends RenderableOptions, K extends Renderable = Renderable, NonStyleKeys extends keyof T = RenderableNonStyleKeys> = {
+type ElementProps<T extends RenderableOptions<K>, K extends Renderable = Renderable, NonStyleKeys extends keyof T = RenderableNonStyleKeys> = {
     style?: Omit<T, NonStyleKeys | RenderableNonStyleKeys>;
     ref?: Ref<K>;
 } & T;
@@ -22,8 +21,6 @@ type ContainerProps = {
 };
 export type BoxElementProps = ElementProps<BoxOptions, BoxRenderable, "title"> & ContainerProps;
 export type BoxStyle = BoxElementProps["style"];
-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;
     onSubmit?: (value: string) => void;

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

@@ -1,4 +1,4 @@
-import { Renderable, TextRenderable, type TextChunk, type TextOptions } from "@opentui/core";
+import { Renderable, TextRenderable, type RenderContext, type TextChunk, type TextOptions } from "@opentui/core";
 import { type DomNode } from "../reconciler";
 /**
  * Represents a text node in the SolidJS reconciler.
@@ -41,7 +41,7 @@ export declare class TextNode {
     private getOrCreateTextGhostNode;
 }
 declare class GhostTextRenderable extends TextRenderable {
-    constructor(id: string, options: TextOptions);
+    constructor(ctx: RenderContext, options: TextOptions);
     static isGhostNode(node: DomNode): node is GhostTextRenderable;
 }
 export {};

package/src/reconciler.js

@@ -1,474 +0,0 @@
-// @bun
-// src/reconciler.ts
-import {
-  InputRenderable as InputRenderable2,
-  InputRenderableEvents,
-  Renderable as Renderable2,
-  SelectRenderable as SelectRenderable2,
-  SelectRenderableEvents,
-  StyledText,
-  TabSelectRenderable as TabSelectRenderable2,
-  TabSelectRenderableEvents,
-  TextRenderable as TextRenderable3
-} from "@opentui/core";
-import { createRenderer } from "solid-js/universal";
-
-// src/elements/index.ts
-import {
-  ASCIIFontRenderable,
-  BoxRenderable,
-  GroupRenderable,
-  InputRenderable,
-  SelectRenderable,
-  TabSelectRenderable,
-  TextRenderable
-} from "@opentui/core";
-
-// src/elements/hooks.ts
-import {
-  getKeyHandler,
-  Timeline
-} from "@opentui/core";
-import { createContext, createSignal, onCleanup, onMount, useContext } from "solid-js";
-var RendererContext = createContext();
-
-// src/elements/index.ts
-var elements = {
-  ascii_font: ASCIIFontRenderable,
-  box: BoxRenderable,
-  group: GroupRenderable,
-  input: InputRenderable,
-  select: SelectRenderable,
-  tab_select: TabSelectRenderable,
-  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) {
-  if (!idCounter.has(elementType)) {
-    idCounter.set(elementType, 0);
-  }
-  const value = idCounter.get(elementType) + 1;
-  idCounter.set(elementType, value);
-  return `${elementType}-${value}`;
-}
-
-// src/utils/log.ts
-var log = (...args) => {
-  if (process.env.DEBUG) {
-    console.log("[Reconciler]", ...args);
-  }
-};
-
-// src/elements/text-node.ts
-var GHOST_NODE_TAG = "text-ghost";
-var ChunkToTextNodeMap = new WeakMap;
-
-class TextNode {
-  id;
-  chunk;
-  parent;
-  textParent;
-  constructor(chunk) {
-    this.id = getNextId("text-node");
-    this.chunk = chunk;
-    ChunkToTextNodeMap.set(chunk, this);
-  }
-  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);
-  }
-  static getTextNodeFromChunk(chunk) {
-    return ChunkToTextNodeMap.get(chunk);
-  }
-  insert(parent, anchor) {
-    if (!(parent instanceof Renderable)) {
-      log("Attaching text node to parent text node, impossible");
-      return;
-    }
-    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 {
-      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;
-  }
-  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();
-      }
-    }
-  }
-  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 node.insert(parent, anchor);
-  }
-  if (!(parent instanceof Renderable2)) {
-    return;
-  }
-  if (anchor) {
-    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);
-  }
-}
-function _removeNode(parent, node) {
-  log("Removing node:", node.id, "from parent:", parent.id);
-  if (node instanceof TextNode) {
-    return node.remove(parent);
-  }
-  if (parent instanceof Renderable2 && node instanceof Renderable2) {
-    parent.remove(node.id);
-    node.destroyRecursively();
-  }
-}
-var {
-  render: _render,
-  effect,
-  memo,
-  createComponent,
-  createElement,
-  createTextNode,
-  insertNode,
-  insert: solidUniversalInsert,
-  spread,
-  setProp,
-  mergeProps,
-  use
-} = createRenderer({
-  createElement(tagName) {
-    log("Creating element:", tagName);
-    const id = getNextId(tagName);
-    const element = new elements[tagName](id, {});
-    log("Element created with id:", id);
-    return element;
-  },
-  createTextNode(value) {
-    log("Creating text node:", value);
-    const chunk = typeof value === "object" && "__isChunk" in value ? value : {
-      __isChunk: true,
-      text: new TextEncoder().encode(`${value}`),
-      plainText: `${value}`
-    };
-    const textNode = new TextNode(chunk);
-    return textNode;
-  },
-  replaceText(textNode, value) {
-    log("Replacing text:", value, "in node:", textNode.id);
-    if (textNode instanceof Renderable2)
-      return;
-    const newChunk = {
-      __isChunk: true,
-      text: new TextEncoder().encode(value),
-      plainText: value
-    };
-    textNode.replaceText(newChunk);
-  },
-  setProperty(node, name, value, prev) {
-    if (node instanceof TextNode) {
-      console.warn("Cannot set property on text node:", node.id);
-      return;
-    }
-    if (name.startsWith("on:")) {
-      const eventName = name.slice(3);
-      if (value) {
-        node.on(eventName, value);
-      }
-      if (prev) {
-        node.off(eventName, prev);
-      }
-      return;
-    }
-    switch (name) {
-      case "focused":
-        if (value) {
-          node.focus();
-        } else {
-          node.blur();
-        }
-        break;
-      case "onChange":
-        let event = undefined;
-        if (node instanceof SelectRenderable2) {
-          event = SelectRenderableEvents.SELECTION_CHANGED;
-        } else if (node instanceof TabSelectRenderable2) {
-          event = TabSelectRenderableEvents.SELECTION_CHANGED;
-        } else if (node instanceof InputRenderable2) {
-          event = InputRenderableEvents.CHANGE;
-        }
-        if (!event)
-          break;
-        if (value) {
-          node.on(event, value);
-        }
-        if (prev) {
-          node.off(event, prev);
-        }
-        break;
-      case "onInput":
-        if (node instanceof InputRenderable2) {
-          if (value) {
-            node.on(InputRenderableEvents.INPUT, value);
-          }
-          if (prev) {
-            node.off(InputRenderableEvents.INPUT, prev);
-          }
-        }
-        break;
-      case "onSubmit":
-        if (node instanceof InputRenderable2) {
-          if (value) {
-            node.on(InputRenderableEvents.ENTER, value);
-          }
-          if (prev) {
-            node.off(InputRenderableEvents.ENTER, prev);
-          }
-        }
-        break;
-      case "onSelect":
-        if (node instanceof SelectRenderable2) {
-          if (value) {
-            node.on(SelectRenderableEvents.ITEM_SELECTED, value);
-          }
-          if (prev) {
-            node.off(SelectRenderableEvents.ITEM_SELECTED, prev);
-          }
-        } else if (node instanceof TabSelectRenderable2) {
-          if (value) {
-            node.on(TabSelectRenderableEvents.ITEM_SELECTED, value);
-          }
-          if (prev) {
-            node.off(TabSelectRenderableEvents.ITEM_SELECTED, prev);
-          }
-        }
-        break;
-      case "style":
-        for (const prop in value) {
-          const propVal = value[prop];
-          if (prev !== undefined && propVal === prev[prop])
-            continue;
-          node[prop] = propVal;
-        }
-        break;
-      case "text":
-      case "content":
-        node[name] = typeof value === "string" ? value : Array.isArray(value) ? value.join("") : `${value}`;
-        break;
-      default:
-        node[name] = value;
-    }
-  },
-  isTextNode(node) {
-    return node instanceof TextNode;
-  },
-  insertNode: _insertNode,
-  removeNode: _removeNode,
-  getParentNode(node) {
-    log("Getting parent of node:", node.id);
-    const parent = node.parent;
-    if (!parent) {
-      log("No parent found for node:", node.id);
-      return;
-    }
-    log("Parent found:", parent.id, "for node:", node.id);
-    return parent;
-  },
-  getFirstChild(node) {
-    log("Getting first child of node:", node.id);
-    if (node instanceof TextRenderable3) {
-      const chunk = node.content.chunks[0];
-      if (chunk) {
-        return TextNode.getTextNodeFromChunk(chunk);
-      } else {
-        return;
-      }
-    }
-    if (node instanceof TextNode) {
-      return;
-    }
-    const firstChild = node.getChildren()[0];
-    if (!firstChild) {
-      log("No first child found for node:", node.id);
-      return;
-    }
-    log("First child found:", firstChild.id, "for node:", node.id);
-    return firstChild;
-  },
-  getNextSibling(node) {
-    log("Getting next sibling of node:", node.id);
-    const parent = node.parent;
-    if (!parent) {
-      log("No parent found for node:", node.id);
-      return;
-    }
-    if (node instanceof TextNode) {
-      if (parent instanceof TextRenderable3) {
-        const siblings2 = parent.content.chunks;
-        const index2 = siblings2.indexOf(node.chunk);
-        if (index2 === -1 || index2 === siblings2.length - 1) {
-          log("No next sibling found for node:", node.id);
-          return;
-        }
-        const nextSibling2 = siblings2[index2 + 1];
-        if (!nextSibling2) {
-          log("Next sibling is null for node:", node.id);
-          return;
-        }
-        return TextNode.getTextNodeFromChunk(nextSibling2);
-      }
-      console.warn("Text parent is not a text node:", node.id);
-      return;
-    }
-    const siblings = parent.getChildren();
-    const index = siblings.indexOf(node);
-    if (index === -1 || index === siblings.length - 1) {
-      log("No next sibling found for node:", node.id);
-      return;
-    }
-    const nextSibling = siblings[index + 1];
-    if (!nextSibling) {
-      log("Next sibling is null for node:", node.id);
-      return;
-    }
-    log("Next sibling found:", nextSibling.id, "for node:", node.id);
-    return nextSibling;
-  }
-});
-var insertStyledText = (parent, value, current, marker) => {
-  while (typeof current === "function")
-    current = current();
-  if (value === current)
-    return current;
-  if (current) {
-    if (typeof current === "object" && "__isChunk" in current) {
-      const node = TextNode.getTextNodeFromChunk(current);
-      if (node) {
-        _removeNode(parent, node);
-      }
-    } else if (current instanceof StyledText) {
-      for (const chunk of current.chunks) {
-        const chunkNode = TextNode.getTextNodeFromChunk(chunk);
-        if (!chunkNode)
-          continue;
-        _removeNode(parent, chunkNode);
-      }
-    }
-  }
-  if (value instanceof StyledText) {
-    log("Inserting styled text:", value.toString());
-    for (const chunk of value.chunks) {
-      insertNode(parent, createTextNode(chunk), marker);
-    }
-    return value;
-  } else if (value && typeof value === "object" && "__isChunk" in value) {
-    insertNode(parent, createTextNode(value), marker);
-    return value;
-  }
-  return solidUniversalInsert(parent, value, marker, current);
-};
-var insert = (parent, accessor, marker, initial) => {
-  if (marker !== undefined && !initial)
-    initial = [];
-  if (typeof accessor !== "function")
-    return insertStyledText(parent, accessor, initial, marker);
-  effect((current) => insertStyledText(parent, accessor(), current, marker), initial);
-};
-export {
-  use,
-  spread,
-  solidUniversalInsert,
-  setProp,
-  mergeProps,
-  memo,
-  insertNode,
-  insert,
-  effect,
-  createTextNode,
-  createElement,
-  createComponent,
-  _render
-};