@opentui/solid 0.1.22 → 0.1.24

package/jsx-runtime.d.ts

@@ -5,24 +5,36 @@ import type {
   ExtendedIntrinsicElements,
   InputProps,
   OpenTUIComponents,
+  ScrollBoxProps,
   SelectProps,
+  SpanProps,
   TabSelectProps,
   TextProps,
 } from "./src/types/elements"
+import type { DomNode } from "./dist"
 
 declare namespace JSX {
   // Replace Node with Renderable
-  type Element = Renderable | ArrayElement | (string & {}) | number | boolean | null | undefined
+  type Element = DomNode | ArrayElement | string | number | boolean | null | undefined
 
-  interface ArrayElement extends Array<Element> {}
+  type ArrayElement = Array<Element>
 
   interface IntrinsicElements extends ExtendedIntrinsicElements<OpenTUIComponents> {
     box: BoxProps
     text: TextProps
+    span: SpanProps
     input: InputProps
     select: SelectProps
     ascii_font: AsciiFontProps
     tab_select: TabSelectProps
+    scrollbox: ScrollBoxProps
+
+    b: SpanProps
+    strong: SpanProps
+    i: SpanProps
+    em: SpanProps
+    u: SpanProps
+    br: {}
   }
 
   interface ElementChildrenAttribute {

package/package.json

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

package/scripts/solid-plugin.ts

@@ -14,6 +14,12 @@ const solidTransformPlugin: BunPlugin = {
       const code = await file.text()
       return { contents: code, loader: "js" }
     })
+    build.onLoad({ filter: /\/node_modules\/solid-js\/store\/dist\/server\.js$/ }, async (args) => {
+      const path = args.path.replace("server.js", "store.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 file = Bun.file(args.path)
       const code = await file.text()

package/src/elements/extras.d.ts

@@ -0,0 +1,41 @@
+import { type DomNode } from "../reconciler";
+import type { JSX } from "../../jsx-runtime";
+import type { ValidComponent, ComponentProps } from "solid-js";
+/**
+ * Renders components somewhere else in the DOM
+ *
+ * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted on the root renderable; it is wrapped in a `<box>`
+ *
+ * @description https://docs.solidjs.com/reference/components/portal
+ */
+export declare function Portal(props: {
+    mount?: DomNode;
+    ref?: (el: {}) => void;
+    children: JSX.Element;
+}): DomNode;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T | undefined;
+};
+/**
+ * Renders an arbitrary component or element with the given props
+ *
+ * This is a lower level version of the `Dynamic` component, useful for
+ * performance optimizations in libraries. Do not use this unless you know
+ * what you are doing.
+ * ```typescript
+ * const element = () => multiline() ? 'textarea' : 'input';
+ * createDynamic(element, { value: value() });
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+/**
+ * Renders an arbitrary custom or native component and passes the other props
+ * ```typescript
+ * <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;

package/src/elements/index.d.ts

@@ -1,6 +1,30 @@
-import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
+import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextNodeRenderable, TextRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
 import type { RenderableConstructor } from "../types/elements";
 export * from "./hooks";
+export * from "./extras";
+export * from "./slot";
+declare class SpanRenderable extends TextNodeRenderable {
+    private readonly _ctx;
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+}
+export declare const textNodeKeys: readonly ["span", "b", "strong", "i", "em", "u"];
+export type TextNodeKey = (typeof textNodeKeys)[number];
+declare class TextModifierRenderable extends SpanRenderable {
+    constructor(options: any, modifier?: TextNodeKey);
+}
+export declare class BoldSpanRenderable extends TextModifierRenderable {
+    constructor(options: any);
+}
+export declare class ItalicSpanRenderable extends TextModifierRenderable {
+    constructor(options: any);
+}
+export declare class UnderlineSpanRenderable extends TextModifierRenderable {
+    constructor(options: any);
+}
+export declare class LineBreakRenderable extends SpanRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+    add(): number;
+}
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
@@ -9,6 +33,13 @@ export declare const baseComponents: {
     ascii_font: typeof ASCIIFontRenderable;
     tab_select: typeof TabSelectRenderable;
     scrollbox: typeof ScrollBoxRenderable;
+    span: typeof SpanRenderable;
+    strong: typeof BoldSpanRenderable;
+    b: typeof BoldSpanRenderable;
+    em: typeof ItalicSpanRenderable;
+    i: typeof ItalicSpanRenderable;
+    u: typeof UnderlineSpanRenderable;
+    br: typeof LineBreakRenderable;
 };
 type ComponentCatalogue = Record<string, RenderableConstructor>;
 export declare const componentCatalogue: ComponentCatalogue;

package/src/elements/slot.d.ts

@@ -0,0 +1,37 @@
+import { BaseRenderable, TextNodeRenderable, Yoga } from "@opentui/core";
+declare class SlotBaseRenderable extends BaseRenderable {
+    constructor(id: string);
+    add(obj: BaseRenderable | unknown, index?: number): number;
+    getChildren(): BaseRenderable[];
+    remove(id: string): void;
+    insertBefore(obj: BaseRenderable | unknown, anchor: BaseRenderable | unknown): void;
+    getRenderable(id: string): BaseRenderable | undefined;
+    getChildrenCount(): number;
+    requestRender(): void;
+}
+export declare class TextSlotRenderable extends TextNodeRenderable {
+    protected slotParent?: SlotRenderable;
+    protected destroyed: boolean;
+    constructor(id: string, parent?: SlotRenderable);
+    destroy(): void;
+}
+export declare class LayoutSlotRenderable extends SlotBaseRenderable {
+    protected yogaNode: Yoga.Node;
+    protected slotParent?: SlotRenderable;
+    protected destroyed: boolean;
+    constructor(id: string, parent?: SlotRenderable);
+    getLayoutNode(): Yoga.Node;
+    updateFromLayout(): void;
+    updateLayout(): void;
+    onRemove(): void;
+    destroy(): void;
+}
+export declare class SlotRenderable extends SlotBaseRenderable {
+    layoutNode?: LayoutSlotRenderable;
+    textNode?: TextSlotRenderable;
+    protected destroyed: boolean;
+    constructor(id: string);
+    getSlotChild(parent: BaseRenderable): TextSlotRenderable | LayoutSlotRenderable;
+    destroy(): void;
+}
+export {};

package/src/reconciler.d.ts

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

package/src/renderer/index.d.ts

@@ -0,0 +1,3 @@
+import type { RendererOptions, Renderer } from "./universal.js";
+export type { RendererOptions, Renderer } from "./universal.js";
+export declare function createRenderer<NodeType>(options: RendererOptions<NodeType>): Renderer<NodeType>;

package/src/renderer/universal.d.ts

@@ -0,0 +1,29 @@
+export function createRenderer({ createElement, createTextNode, createSlotNode, isTextNode, replaceText, insertNode, removeNode, setProperty, getParentNode, getFirstChild, getNextSibling, }: {
+    createElement: any;
+    createTextNode: any;
+    createSlotNode: any;
+    isTextNode: any;
+    replaceText: any;
+    insertNode: any;
+    removeNode: any;
+    setProperty: any;
+    getParentNode: any;
+    getFirstChild: any;
+    getNextSibling: any;
+}): {
+    render(code: any, element: any): undefined;
+    insert: (parent: any, accessor: any, marker: any, initial: any) => any;
+    spread(node: any, accessor: any, skipChildren: any): void;
+    createElement: any;
+    createTextNode: any;
+    insertNode: any;
+    setProp(node: any, name: any, value: any, prev: any): any;
+    mergeProps: typeof mergeProps;
+    effect: typeof createRenderEffect;
+    memo: (fn: any) => import("solid-js").Accessor<any>;
+    createComponent: typeof createComponent;
+    use(fn: any, element: any, arg: any): any;
+};
+import { mergeProps } from "solid-js";
+import { createRenderEffect } from "solid-js";
+import { createComponent } from "solid-js";

package/src/types/elements.d.ts

@@ -1,5 +1,6 @@
-import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextChunk, TextOptions, TextRenderable } from "@opentui/core";
-import type { JSX, Ref } from "solid-js";
+import type { ASCIIFontOptions, ASCIIFontRenderable, BaseRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextNodeRenderable, TextOptions, TextRenderable } from "@opentui/core";
+import type { Ref } from "solid-js";
+import type { JSX } from "../../jsx-runtime";
 /** Properties that should not be included in the style prop */
 export type NonStyledProps = "id" | "buffered" | "live" | "enableLayout" | "selectable" | "renderAfter" | "renderBefore" | `on${string}`;
 /** Solid-specific props for all components */
@@ -7,7 +8,7 @@ export type ElementProps<TRenderable = unknown> = {
     ref?: Ref<TRenderable>;
 };
 /** Base type for any renderable constructor */
-export type RenderableConstructor<TRenderable extends Renderable = Renderable> = new (ctx: RenderContext, options: any) => TRenderable;
+export type RenderableConstructor<TRenderable extends BaseRenderable = BaseRenderable> = new (ctx: RenderContext, options: any) => TRenderable;
 /** Extract the options type from a renderable constructor */
 type ExtractRenderableOptions<TConstructor> = TConstructor extends new (ctx: RenderContext, options: infer TOptions) => any ? TOptions : never;
 /** Extract the renderable type from a constructor */
@@ -19,13 +20,16 @@ type ContainerProps<TOptions> = TOptions & {
     children?: JSX.Element;
 };
 /** Smart component props that automatically determine excluded properties */
-type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends Renderable> = TOptions & {
+type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends BaseRenderable> = TOptions & {
     style?: Partial<Omit<TOptions, GetNonStyledProperties<RenderableConstructor<TRenderable>>>>;
 } & ElementProps<TRenderable>;
 /** Valid text content types for Text component children */
-type TextChildren = (string & {}) | number | boolean | null | undefined;
+type TextChildren = string | number | boolean | null | undefined | JSX.Element;
 export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
-    children?: TextChildren | StyledText | TextChunk | Array<TextChildren | StyledText | TextChunk>;
+    children?: TextChildren | Array<TextChildren>;
+};
+export type SpanProps = ComponentProps<{}, TextNodeRenderable> & {
+    children?: TextChildren | Array<TextChildren>;
 };
 export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable>;
 export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
@@ -47,6 +51,8 @@ export type TabSelectProps = ComponentProps<TabSelectRenderableOptions, TabSelec
 };
 export type ScrollBoxProps = ComponentProps<ContainerProps<ScrollBoxOptions>, ScrollBoxRenderable> & {
     focused?: boolean;
+    stickyScroll?: boolean;
+    stickyStart?: "bottom" | "top" | "left" | "right";
 };
 /** Convert renderable constructor to component props with proper style exclusions */
 export type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & {

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

@@ -1,48 +0,0 @@
-import { Renderable, TextRenderable, type RenderContext, type TextChunk, type TextOptions } from "@opentui/core";
-import { type DomNode } from "../reconciler";
-export declare const isTextChunk: (node: any) => node is TextChunk;
-/**
- * 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(ctx: RenderContext, options: TextOptions);
-    static isGhostNode(node: DomNode): node is GhostTextRenderable;
-}
-export {};