@opentui/react 0.1.34 → 0.1.36

package/README.md

@@ -19,13 +19,15 @@ bun install @opentui/react @opentui/core react
 ## Quick Start
 
 ```tsx
-import { render } from "@opentui/react"
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
 
 function App() {
   return <text>Hello, world!</text>
 }
 
-render(<App />)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
 ```
 
 ## TypeScript Configuration
@@ -83,23 +85,32 @@ Components can be styled using props or the `style` prop:
 
 ## API Reference
 
-### `render(element, config?)`
+### `createRoot(renderer)`
 
-Renders a React element to the terminal.
+Creates a root for rendering a React tree with the given CLI renderer.
 
 ```tsx
-import { render } from "@opentui/react"
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
 
-await render(<App />, {
+const renderer = await createCliRenderer({
   // Optional renderer configuration
   exitOnCtrlC: false,
 })
+createRoot(renderer).render(<App />)
 ```
 
 **Parameters:**
 
-- `element`: React element to render
-- `config?`: Optional `CliRendererConfig` object
+- `renderer`: A `CliRenderer` instance (typically created with `createCliRenderer()`)
+
+**Returns:** An object with a `render` method that accepts a React element.
+
+### `render(element, config?)` (Deprecated)
+
+> **Deprecated:** Use `createRoot(renderer).render(node)` instead.
+
+Renders a React element to the terminal. This function is deprecated in favor of `createRoot`.
 
 ### Hooks
 
@@ -193,7 +204,7 @@ function App() {
 Create and manage animations using OpenTUI's timeline system. This hook automatically registers and unregisters the timeline with the animation engine.
 
 ```tsx
-import { render, useTimeline } from "@opentui/react"
+import { useTimeline } from "@opentui/react"
 import { useEffect, useState } from "react"
 
 function App() {
@@ -326,6 +337,66 @@ function App() {
 }
 ```
 
+### Textarea Component
+
+```tsx
+import type { TextareaRenderable } from "@opentui/core"
+import { useKeyboard, useRenderer } from "@opentui/react"
+import { useEffect, useRef } from "react"
+
+function App() {
+  const renderer = useRenderer()
+  const textareaRef = useRef<TextareaRenderable>(null)
+
+  useEffect(() => {
+    renderer.console.show()
+  }, [renderer])
+
+  useKeyboard((key) => {
+    if (key.name === "return") {
+      console.log(textareaRef.current?.plainText)
+    }
+  })
+
+  return (
+    <box title="Interactive Editor" style={{ border: true, flexGrow: 1 }}>
+      <textarea ref={textareaRef} placeholder="Type here..." focused />
+    </box>
+  )
+}
+```
+
+### Code Component
+
+```tsx
+import { RGBA, SyntaxStyle } from "@opentui/core"
+
+const syntaxStyle = SyntaxStyle.fromStyles({
+  keyword: { fg: RGBA.fromHex("#ff6b6b"), bold: true }, // red, bold
+  string: { fg: RGBA.fromHex("#51cf66") }, // green
+  comment: { fg: RGBA.fromHex("#868e96"), italic: true }, // gray, italic
+  number: { fg: RGBA.fromHex("#ffd43b") }, // yellow
+  default: { fg: RGBA.fromHex("#ffffff") }, // white
+})
+
+const codeExample = `function hello() {
+  // This is a comment
+
+  const message = "Hello, world!"
+  const count = 42
+
+  return message + " " + count
+}`
+
+function App() {
+  return (
+    <box style={{ border: true, flexGrow: 1 }}>
+      <code content={codeExample} filetype="javascript" syntaxStyle={syntaxStyle} />
+    </box>
+  )
+}
+```
+
 ### Select Component
 
 Dropdown selection component.
@@ -470,7 +541,8 @@ function App() {
 ### Login Form
 
 ```tsx
-import { render, useKeyboard } from "@opentui/react"
+import { createCliRenderer } from "@opentui/core"
+import { createRoot, useKeyboard } from "@opentui/react"
 import { useCallback, useState } from "react"
 
 function App() {
@@ -526,13 +598,15 @@ function App() {
   )
 }
 
-render(<App />)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
 ```
 
 ### Counter with Timer
 
 ```tsx
-import { render } from "@opentui/react"
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
 import { useEffect, useState } from "react"
 
 function App() {
@@ -553,14 +627,15 @@ function App() {
   )
 }
 
-render(<App />)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
 ```
 
 ### System Monitor Animation
 
 ```tsx
-import { TextAttributes } from "@opentui/core"
-import { render, useTimeline } from "@opentui/react"
+import { createCliRenderer, TextAttributes } from "@opentui/core"
+import { createRoot, useTimeline } from "@opentui/react"
 import { useEffect, useState } from "react"
 
 type Stats = {
@@ -636,13 +711,15 @@ export const App = () => {
   )
 }
 
-render(<App />)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
 ```
 
 ### Styled Text Showcase
 
 ```tsx
-import { render } from "@opentui/react"
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
 
 function App() {
   return (
@@ -670,7 +747,8 @@ function App() {
   )
 }
 
-render(<App />)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
 ```
 
 ## Component Extension
@@ -678,8 +756,15 @@ render(<App />)
 You can create custom components by extending OpenTUIs base renderables:
 
 ```tsx
-import { BoxRenderable, OptimizedBuffer, RGBA, type BoxOptions, type RenderContext } from "@opentui/core"
-import { extend, render } from "@opentui/react"
+import {
+  BoxRenderable,
+  createCliRenderer,
+  OptimizedBuffer,
+  RGBA,
+  type BoxOptions,
+  type RenderContext,
+} from "@opentui/core"
+import { createRoot, extend } from "@opentui/react"
 
 // Create custom component class
 class ButtonRenderable extends BoxRenderable {
@@ -733,5 +818,6 @@ function App() {
   )
 }
 
-render(<App />)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
 ```

package/index.js

@@ -3,10 +3,12 @@
 import {
   ASCIIFontRenderable,
   BoxRenderable,
+  CodeRenderable,
   InputRenderable,
   ScrollBoxRenderable,
   SelectRenderable,
   TabSelectRenderable,
+  TextareaRenderable,
   TextRenderable
 } from "@opentui/core";
 
@@ -68,8 +70,10 @@ class LineBreakRenderable extends SpanRenderable {
 var baseComponents = {
   box: BoxRenderable,
   text: TextRenderable,
+  code: CodeRenderable,
   input: InputRenderable,
   select: SelectRenderable,
+  textarea: TextareaRenderable,
   scrollbox: ScrollBoxRenderable,
   "ascii-font": ASCIIFontRenderable,
   "tab-select": TabSelectRenderable,
@@ -180,6 +184,35 @@ var useTimeline = (options = {}) => {
 import { createCliRenderer, engine as engine2 } from "@opentui/core";
 import React2 from "react";
 
+// src/components/error-boundary.tsx
+import React from "react";
+
+// jsx-dev-runtime.js
+import { Fragment, jsxDEV } from "react/jsx-dev-runtime";
+
+// src/components/error-boundary.tsx
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  render() {
+    if (this.state.hasError && this.state.error) {
+      return /* @__PURE__ */ jsxDEV("box", {
+        style: { flexDirection: "column", padding: 2 },
+        children: /* @__PURE__ */ jsxDEV("text", {
+          fg: "red",
+          children: this.state.error.stack || this.state.error.message
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this);
+    }
+    return this.props.children;
+  }
+}
+
 // src/reconciler/reconciler.ts
 import ReactReconciler from "react-reconciler";
 import { ConcurrentRoot } from "react-reconciler/constants";
@@ -473,41 +506,20 @@ function _render(element, root) {
   reconciler.updateContainer(element, container, null, () => {});
 }
 
-// src/components/error-boundary.tsx
-import React from "react";
-
-// jsx-dev-runtime.js
-import { Fragment, jsxDEV } from "react/jsx-dev-runtime";
-
-// src/components/error-boundary.tsx
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  render() {
-    if (this.state.hasError && this.state.error) {
-      return /* @__PURE__ */ jsxDEV("box", {
-        style: { flexDirection: "column", padding: 2 },
-        children: /* @__PURE__ */ jsxDEV("text", {
-          fg: "red",
-          children: this.state.error.stack || this.state.error.message
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this);
-    }
-    return this.props.children;
-  }
-}
-
 // src/reconciler/renderer.ts
 async function render(node, rendererConfig = {}) {
   const renderer = await createCliRenderer(rendererConfig);
   engine2.attach(renderer);
   _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
 }
+function createRoot(renderer) {
+  return {
+    render: (node) => {
+      engine2.attach(renderer);
+      _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
+    }
+  };
+}
 export {
   useTimeline,
   useTerminalDimensions,
@@ -518,6 +530,7 @@ export {
   render,
   getComponentCatalogue,
   extend,
+  createRoot,
   componentCatalogue,
   baseComponents,
   AppContext

package/jsx-namespace.d.ts

@@ -2,6 +2,7 @@ import type * as React from "react"
 import type {
   AsciiFontProps,
   BoxProps,
+  CodeProps,
   ExtendedIntrinsicElements,
   InputProps,
   LineBreakProps,
@@ -10,6 +11,7 @@ import type {
   SelectProps,
   SpanProps,
   TabSelectProps,
+  TextareaProps,
   TextProps,
 } from "./src/types/components"
 
@@ -34,7 +36,9 @@ export namespace JSX {
     box: BoxProps
     text: TextProps
     span: SpanProps
+    code: CodeProps
     input: InputProps
+    textarea: TextareaProps
     select: SelectProps
     scrollbox: ScrollBoxProps
     "ascii-font": AsciiFontProps

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.1.34",
+    "@opentui/core": "0.1.36",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {

package/src/components/index.d.ts

@@ -1,11 +1,13 @@
-import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
+import { ASCIIFontRenderable, BoxRenderable, CodeRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextareaRenderable, TextRenderable } from "@opentui/core";
 import type { RenderableConstructor } from "../types/components";
 import { BoldSpanRenderable, ItalicSpanRenderable, LineBreakRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text";
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
+    code: typeof CodeRenderable;
     input: typeof InputRenderable;
     select: typeof SelectRenderable;
+    textarea: typeof TextareaRenderable;
     scrollbox: typeof ScrollBoxRenderable;
     "ascii-font": typeof ASCIIFontRenderable;
     "tab-select": typeof TabSelectRenderable;

package/src/reconciler/renderer.d.ts

@@ -1,3 +1,19 @@
-import { type CliRendererConfig } from "@opentui/core";
+import { CliRenderer, type CliRendererConfig } from "@opentui/core";
 import { type ReactNode } from "react";
+/**
+ * @deprecated Use `createRoot(renderer).render(node)` instead
+ */
 export declare function render(node: ReactNode, rendererConfig?: CliRendererConfig): Promise<void>;
+/**
+ * Creates a root for rendering a React tree with the given CLI renderer.
+ * @param renderer The CLI renderer to use
+ * @returns A root object with a `render` method
+ * @example
+ * ```tsx
+ * const renderer = await createCliRenderer()
+ * createRoot(renderer).render(<App />)
+ * ```
+ */
+export declare function createRoot(renderer: CliRenderer): {
+    render: (node: ReactNode) => void;
+};

package/src/reconciler/renderer.js

@@ -10,6 +10,35 @@ var AppContext = createContext({
   renderer: null
 });
 
+// src/components/error-boundary.tsx
+import React from "react";
+
+// jsx-dev-runtime.js
+import { Fragment, jsxDEV } from "react/jsx-dev-runtime";
+
+// src/components/error-boundary.tsx
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  render() {
+    if (this.state.hasError && this.state.error) {
+      return /* @__PURE__ */ jsxDEV("box", {
+        style: { flexDirection: "column", padding: 2 },
+        children: /* @__PURE__ */ jsxDEV("text", {
+          fg: "red",
+          children: this.state.error.stack || this.state.error.message
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this);
+    }
+    return this.props.children;
+  }
+}
+
 // src/reconciler/reconciler.ts
 import ReactReconciler from "react-reconciler";
 import { ConcurrentRoot } from "react-reconciler/constants";
@@ -23,10 +52,12 @@ import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constant
 import {
   ASCIIFontRenderable,
   BoxRenderable,
+  CodeRenderable,
   InputRenderable,
   ScrollBoxRenderable,
   SelectRenderable,
   TabSelectRenderable,
+  TextareaRenderable,
   TextRenderable
 } from "@opentui/core";
 
@@ -88,8 +119,10 @@ class LineBreakRenderable extends SpanRenderable {
 var baseComponents = {
   box: BoxRenderable,
   text: TextRenderable,
+  code: CodeRenderable,
   input: InputRenderable,
   select: SelectRenderable,
+  textarea: TextareaRenderable,
   scrollbox: ScrollBoxRenderable,
   "ascii-font": ASCIIFontRenderable,
   "tab-select": TabSelectRenderable,
@@ -390,41 +423,21 @@ function _render(element, root) {
   reconciler.updateContainer(element, container, null, () => {});
 }
 
-// src/components/error-boundary.tsx
-import React from "react";
-
-// jsx-dev-runtime.js
-import { Fragment, jsxDEV } from "react/jsx-dev-runtime";
-
-// src/components/error-boundary.tsx
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  render() {
-    if (this.state.hasError && this.state.error) {
-      return /* @__PURE__ */ jsxDEV("box", {
-        style: { flexDirection: "column", padding: 2 },
-        children: /* @__PURE__ */ jsxDEV("text", {
-          fg: "red",
-          children: this.state.error.stack || this.state.error.message
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this);
-    }
-    return this.props.children;
-  }
-}
-
 // src/reconciler/renderer.ts
 async function render(node, rendererConfig = {}) {
   const renderer = await createCliRenderer(rendererConfig);
   engine.attach(renderer);
   _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
 }
+function createRoot(renderer) {
+  return {
+    render: (node) => {
+      engine.attach(renderer);
+      _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
+    }
+  };
+}
 export {
-  render
+  render,
+  createRoot
 };

package/src/types/components.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, TextNodeOptions, 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, TextareaOptions, TextareaRenderable, TextNodeOptions, TextNodeRenderable, TextOptions, TextRenderable } from "@opentui/core";
 import type React from "react";
 /** Properties that should not be included in the style prop */
 export type NonStyledProps = "id" | "buffered" | "live" | "enableLayout" | "selectable" | "renderAfter" | "renderBefore" | `on${string}`;
@@ -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<TextareaRenderable> ? NonStyledProps | "placeholder" | "initialValue" : TConstructor extends RenderableConstructor<CodeRenderable> ? NonStyledProps | "content" | "filetype" | "syntaxStyle" | "treeSitterClient" | "conceal" | "drawUnstyledText" : NonStyledProps;
 /** Base props for container components that accept children */
 type ContainerProps<TOptions> = TOptions & {
     children?: React.ReactNode;
@@ -39,6 +39,10 @@ export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable>
     onChange?: (value: string) => void;
     onSubmit?: (value: string) => void;
 };
+export type TextareaProps = ComponentProps<TextareaOptions, TextareaRenderable> & {
+    focused?: boolean;
+};
+export type CodeProps = ComponentProps<CodeOptions, CodeRenderable>;
 export type SelectProps = ComponentProps<SelectRenderableOptions, SelectRenderable> & {
     focused?: boolean;
     onChange?: (index: number, option: SelectOption | null) => void;