@opentui/solid 0.1.25 → 0.1.27

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export function useTimeline(timeline: any, initialValue: any, targetValue: any, options: any, startTime?: number): import("solid-js").Accessor<any>;
+export function useTimeline(options?: {}): Timeline;
 export function useTerminalDimensions(): import("solid-js").Accessor<{
     width: any;
     height: any;
@@ -34,6 +34,7 @@ export function getComponentCatalogue(): {
     ascii_font: typeof ASCIIFontRenderable;
     tab_select: typeof TabSelectRenderable2;
     scrollbox: typeof ScrollBoxRenderable;
+    code: typeof CodeRenderable;
     span: typeof SpanRenderable;
     strong: typeof BoldSpanRenderable;
     b: typeof BoldSpanRenderable;
@@ -48,7 +49,6 @@ export var createTextNode: any;
 export function createSlotNode(): SlotRenderable;
 export var createElement: any;
 export function createDynamic(component: any, props: any): import("solid-js").Accessor<any>;
-export function createComponentTimeline(options?: {}): Timeline;
 declare var createComponent2: typeof createComponent;
 export namespace componentCatalogue {
     export { BoxRenderable as box };
@@ -58,6 +58,7 @@ export namespace componentCatalogue {
     export { ASCIIFontRenderable as ascii_font };
     export { TabSelectRenderable2 as tab_select };
     export { ScrollBoxRenderable as scrollbox };
+    export { CodeRenderable as code };
     export { SpanRenderable as span };
     export { BoldSpanRenderable as strong };
     export { BoldSpanRenderable as b };
@@ -104,6 +105,7 @@ export function Dynamic(props: any): import("solid-js").Accessor<any>;
 export class BoldSpanRenderable extends TextModifierRenderable {
     constructor(options: any);
 }
+import { Timeline } from "@opentui/core";
 import { mergeProps } from "solid-js";
 import { BoxRenderable } from "@opentui/core";
 import { TextRenderable as TextRenderable3 } from "@opentui/core";
@@ -112,12 +114,12 @@ import { SelectRenderable as SelectRenderable2 } from "@opentui/core";
 import { ASCIIFontRenderable } from "@opentui/core";
 import { TabSelectRenderable as TabSelectRenderable2 } from "@opentui/core";
 import { ScrollBoxRenderable } from "@opentui/core";
+import { CodeRenderable } from "@opentui/core";
 declare class SpanRenderable extends TextNodeRenderable3 {
     constructor(_ctx: any, options: any);
     _ctx: any;
 }
 import { createRenderEffect } from "solid-js";
-import { Timeline } from "@opentui/core";
 import { createComponent } from "solid-js";
 declare class TextModifierRenderable extends SpanRenderable {
 }
@@ -128,6 +130,7 @@ declare class SlotBaseRenderable extends BaseRenderable {
     remove(id: any): void;
     insertBefore(obj: any, anchor: any): void;
     getRenderable(id: any): void;
+    findDescendantById(id: any): void;
 }
 import { Yoga } from "@opentui/core";
 import { BaseRenderable } from "@opentui/core";

package/index.js

@@ -1,12 +1,13 @@
 // @bun
 // index.ts
-import { createCliRenderer } from "@opentui/core";
+import { createCliRenderer, engine as engine2 } from "@opentui/core";
 import { createTestRenderer } from "@opentui/core/testing";
 
 // src/elements/index.ts
 import {
   ASCIIFontRenderable,
   BoxRenderable,
+  CodeRenderable,
   InputRenderable as InputRenderable2,
   ScrollBoxRenderable,
   SelectRenderable as SelectRenderable2,
@@ -18,6 +19,7 @@ import {
 
 // src/elements/hooks.ts
 import {
+  engine,
   Timeline
 } from "@opentui/core";
 import { createContext, createSignal, onCleanup, onMount, useContext } from "solid-js";
@@ -77,35 +79,20 @@ var useSelectionHandler = (callback) => {
     renderer.off("selection", callback);
   });
 };
-var createComponentTimeline = (options = {}) => {
-  const renderer = useRenderer();
+var useTimeline = (options = {}) => {
   const timeline = new Timeline(options);
-  const frameCallback = async (dt) => timeline.update(dt);
   onMount(() => {
     if (options.autoplay !== false) {
       timeline.play();
     }
-    renderer.setFrameCallback(frameCallback);
+    engine.register(timeline);
   });
   onCleanup(() => {
-    renderer.removeFrameCallback(frameCallback);
     timeline.pause();
+    engine.unregister(timeline);
   });
   return timeline;
 };
-var useTimeline = (timeline, initialValue, targetValue, options, startTime = 0) => {
-  const [store, setStore] = createSignal(initialValue);
-  const { onUpdate, ...animationOptions } = options;
-  timeline.add(store(), {
-    ...targetValue,
-    ...animationOptions,
-    onUpdate: (values) => {
-      setStore({ ...values.targets[0] });
-      onUpdate?.(values);
-    }
-  }, startTime);
-  return store;
-};
 // src/elements/extras.ts
 import { createEffect, createMemo as createMemo2, getOwner, onCleanup as onCleanup2, runWithOwner, splitProps, untrack as untrack2 } from "solid-js";
 
@@ -470,15 +457,7 @@ function _removeNode(parent, node) {
     node.parent = null;
     node = node.getSlotChild(parent);
   }
-  if (isTextNodeRenderable(parent)) {
-    if (typeof node !== "string" && !isTextNodeRenderable(node)) {
-      console.warn("Node not a valid child of TextNode");
-    } else {
-      parent.remove(node);
-    }
-  } else {
-    parent.remove(node.id);
-  }
+  parent.remove(node.id);
   process.nextTick(() => {
     if (node instanceof BaseRenderable && !node.parent) {
       node.destroyRecursively();
@@ -756,6 +735,9 @@ class SlotBaseRenderable extends BaseRenderable2 {
     return 0;
   }
   requestRender() {}
+  findDescendantById(id) {
+    return;
+  }
 }
 
 class TextSlotRenderable extends TextNodeRenderable2 {
@@ -896,6 +878,7 @@ var baseComponents = {
   ascii_font: ASCIIFontRenderable,
   tab_select: TabSelectRenderable2,
   scrollbox: ScrollBoxRenderable,
+  code: CodeRenderable,
   span: SpanRenderable,
   strong: BoldSpanRenderable,
   b: BoldSpanRenderable,
@@ -915,6 +898,7 @@ function getComponentCatalogue() {
 // index.ts
 var render = async (node, renderConfig = {}) => {
   const renderer = await createCliRenderer(renderConfig);
+  engine2.attach(renderer);
   _render(() => createComponent2(RendererContext.Provider, {
     get value() {
       return renderer;
@@ -926,6 +910,7 @@ var render = async (node, renderConfig = {}) => {
 };
 var testRender = async (node, renderConfig = {}) => {
   const testSetup = await createTestRenderer(renderConfig);
+  engine2.attach(testSetup.renderer);
   _render(() => createComponent2(RendererContext.Provider, {
     get value() {
       return testSetup.renderer;
@@ -962,7 +947,6 @@ export {
   createSlotNode,
   createElement,
   createDynamic,
-  createComponentTimeline,
   createComponent2 as createComponent,
   componentCatalogue,
   baseComponents,

package/jsx-runtime.d.ts

@@ -2,6 +2,7 @@ import { Renderable } from "@opentui/core"
 import type {
   AsciiFontProps,
   BoxProps,
+  CodeProps,
   ExtendedIntrinsicElements,
   InputProps,
   OpenTUIComponents,
@@ -28,6 +29,7 @@ declare namespace JSX {
     ascii_font: AsciiFontProps
     tab_select: TabSelectProps
     scrollbox: ScrollBoxProps
+    code: CodeProps
 
     b: SpanProps
     strong: SpanProps

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
   "dependencies": {
     "@babel/core": "7.28.0",
     "@babel/preset-typescript": "7.27.1",
-    "@opentui/core": "0.1.25",
+    "@opentui/core": "0.1.27",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-preset-solid": "1.9.9",
     "s-js": "^0.4.9"
@@ -35,6 +35,7 @@
   "devDependencies": {
     "@types/babel__core": "7.20.5",
     "@types/bun": "latest",
+    "@types/node": "latest",
     "typescript": "^5"
   },
   "peerDependencies": {

package/src/elements/hooks.d.ts

@@ -1,4 +1,4 @@
-import { Selection, Timeline, type AnimationOptions, type CliRenderer, type JSAnimation, type ParsedKey, type TimelineOptions } from "@opentui/core";
+import { PasteEvent, Selection, Timeline, type CliRenderer, type KeyEvent, type TimelineOptions } from "@opentui/core";
 export declare const RendererContext: import("solid-js").Context<CliRenderer | undefined>;
 export declare const useRenderer: () => CliRenderer;
 export declare const onResize: (callback: (width: number, height: number) => void) => void;
@@ -6,16 +6,11 @@ export declare const useTerminalDimensions: () => import("solid-js").Accessor<{
     width: number;
     height: number;
 }>;
-export declare const useKeyboard: (callback: (key: ParsedKey) => void) => void;
-export declare const usePaste: (callback: (text: string) => void) => void;
+export declare const useKeyboard: (callback: (key: KeyEvent) => void) => void;
+export declare const usePaste: (callback: (event: PasteEvent) => void) => void;
 /**
  * @deprecated renamed to useKeyboard
  */
-export declare const useKeyHandler: (callback: (key: ParsedKey) => void) => void;
+export declare const useKeyHandler: (callback: (key: KeyEvent) => void) => void;
 export declare const useSelectionHandler: (callback: (selection: Selection) => void) => void;
-export declare const createComponentTimeline: (options?: TimelineOptions) => Timeline;
-export declare const useTimeline: <T extends Record<string, number>>(timeline: Timeline, initialValue: T, targetValue: T, options: AnimationOptions & {
-    onUpdate?: (values: JSAnimation & {
-        targets: T[];
-    }) => void;
-}, startTime?: number | string) => import("solid-js").Accessor<T>;
+export declare const useTimeline: (options?: TimelineOptions) => Timeline;

package/src/elements/index.d.ts

@@ -1,4 +1,4 @@
-import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextNodeRenderable, TextRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
+import { ASCIIFontRenderable, BoxRenderable, CodeRenderable, 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";
@@ -33,6 +33,7 @@ export declare const baseComponents: {
     ascii_font: typeof ASCIIFontRenderable;
     tab_select: typeof TabSelectRenderable;
     scrollbox: typeof ScrollBoxRenderable;
+    code: typeof CodeRenderable;
     span: typeof SpanRenderable;
     strong: typeof BoldSpanRenderable;
     b: typeof BoldSpanRenderable;

package/src/elements/slot.d.ts

@@ -8,6 +8,7 @@ declare class SlotBaseRenderable extends BaseRenderable {
     getRenderable(id: string): BaseRenderable | undefined;
     getChildrenCount(): number;
     requestRender(): void;
+    findDescendantById(id: string): BaseRenderable | undefined;
 }
 export declare class TextSlotRenderable extends TextNodeRenderable {
     protected slotParent?: SlotRenderable;

package/src/types/elements.d.ts

@@ -1,4 +1,4 @@
-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 { ASCIIFontOptions, ASCIIFontRenderable, BaseRenderable, BoxOptions, BoxRenderable, CodeOptions, CodeRenderable, 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 */
@@ -14,7 +14,7 @@ type ExtractRenderableOptions<TConstructor> = TConstructor extends new (ctx: Ren
 /** Extract the renderable type from a constructor */
 type ExtractRenderable<TConstructor> = TConstructor extends new (ctx: RenderContext, options: any) => infer TRenderable ? TRenderable : never;
 /** Determine which properties should be excluded from styling for different renderable types */
-export type GetNonStyledProperties<TConstructor> = TConstructor extends RenderableConstructor<TextRenderable> ? NonStyledProps | "content" : TConstructor extends RenderableConstructor<BoxRenderable> ? NonStyledProps | "title" : TConstructor extends RenderableConstructor<ASCIIFontRenderable> ? NonStyledProps | "text" | "selectable" : TConstructor extends RenderableConstructor<InputRenderable> ? NonStyledProps | "placeholder" | "value" : NonStyledProps;
+export type GetNonStyledProperties<TConstructor> = TConstructor extends RenderableConstructor<TextRenderable> ? NonStyledProps | "content" : TConstructor extends RenderableConstructor<BoxRenderable> ? NonStyledProps | "title" : TConstructor extends RenderableConstructor<ASCIIFontRenderable> ? NonStyledProps | "text" | "selectable" : TConstructor extends RenderableConstructor<InputRenderable> ? NonStyledProps | "placeholder" | "value" : TConstructor extends RenderableConstructor<CodeRenderable> ? NonStyledProps | "content" | "filetype" | "syntaxStyle" | "treeSitterClient" : NonStyledProps;
 /** Base props for container components that accept children */
 type ContainerProps<TOptions> = TOptions & {
     children?: JSX.Element;
@@ -54,6 +54,7 @@ export type ScrollBoxProps = ComponentProps<ContainerProps<ScrollBoxOptions>, Sc
     stickyScroll?: boolean;
     stickyStart?: "bottom" | "top" | "left" | "right";
 };
+export type CodeProps = ComponentProps<CodeOptions, CodeRenderable>;
 /** Convert renderable constructor to component props with proper style exclusions */
 export type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & {
     children?: JSX.Element;