@opentui/react 0.0.0-20250908-4906ddad

package/index.js

@@ -0,0 +1,455 @@
+// @bun
+// src/components/index.ts
+import {
+  ASCIIFontRenderable,
+  BoxRenderable,
+  InputRenderable,
+  ScrollBoxRenderable,
+  SelectRenderable,
+  TabSelectRenderable,
+  TextRenderable
+} from "@opentui/core";
+var baseComponents = {
+  box: BoxRenderable,
+  text: TextRenderable,
+  input: InputRenderable,
+  select: SelectRenderable,
+  scrollbox: ScrollBoxRenderable,
+  "ascii-font": ASCIIFontRenderable,
+  "tab-select": TabSelectRenderable
+};
+var componentCatalogue = { ...baseComponents };
+function extend(objects) {
+  Object.assign(componentCatalogue, objects);
+}
+function getComponentCatalogue() {
+  return componentCatalogue;
+}
+// src/components/app.tsx
+import { createContext, useContext } from "react";
+var AppContext = createContext({
+  keyHandler: null,
+  renderer: null
+});
+var useAppContext = () => {
+  return useContext(AppContext);
+};
+// src/hooks/use-keyboard.tsx
+import { useEffect } from "react";
+
+// src/hooks/use-event.tsx
+import { useCallback, useLayoutEffect, useRef } from "react";
+function useEvent(handler) {
+  const handlerRef = useRef(handler);
+  useLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return useCallback((...args) => {
+    const fn = handlerRef.current;
+    return fn(...args);
+  }, []);
+}
+
+// src/hooks/use-keyboard.tsx
+var useKeyboard = (handler) => {
+  const { keyHandler } = useAppContext();
+  const stableHandler = useEvent(handler);
+  useEffect(() => {
+    keyHandler?.on("keypress", stableHandler);
+    return () => {
+      keyHandler?.off("keypress", stableHandler);
+    };
+  }, [keyHandler, stableHandler]);
+};
+// src/hooks/use-renderer.tsx
+var useRenderer = () => {
+  const { renderer } = useAppContext();
+  if (!renderer) {
+    throw new Error("Renderer not found.");
+  }
+  return renderer;
+};
+// src/hooks/use-resize.tsx
+import { useEffect as useEffect2 } from "react";
+var useOnResize = (callback) => {
+  const renderer = useRenderer();
+  useEffect2(() => {
+    renderer.on("resize", callback);
+    return () => {
+      renderer.off("resize", callback);
+    };
+  }, [renderer, callback]);
+  return renderer;
+};
+// src/hooks/use-terminal-dimensions.tsx
+import { useState } from "react";
+var useTerminalDimensions = () => {
+  const renderer = useRenderer();
+  const [dimensions, setDimensions] = useState({
+    width: renderer.width,
+    height: renderer.height
+  });
+  const cb = (width, height) => {
+    setDimensions({ width, height });
+  };
+  useOnResize(cb);
+  return dimensions;
+};
+// src/reconciler/renderer.ts
+import { createCliRenderer, getKeyHandler } from "@opentui/core";
+import React from "react";
+
+// src/reconciler/reconciler.ts
+import ReactReconciler from "react-reconciler";
+import { ConcurrentRoot } from "react-reconciler/constants";
+
+// src/reconciler/host-config.ts
+import { createContext as createContext2 } from "react";
+import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
+
+// src/utils/id.ts
+var idCounter = new Map;
+function getNextId(type) {
+  if (!idCounter.has(type)) {
+    idCounter.set(type, 0);
+  }
+  const value = idCounter.get(type) + 1;
+  idCounter.set(type, value);
+  return `${type}-${value}`;
+}
+
+// src/utils/index.ts
+import {
+  InputRenderable as InputRenderable2,
+  InputRenderableEvents,
+  SelectRenderable as SelectRenderable2,
+  SelectRenderableEvents,
+  StyledText,
+  TabSelectRenderable as TabSelectRenderable2,
+  TabSelectRenderableEvents,
+  TextRenderable as TextRenderable2,
+  stringToStyledText
+} from "@opentui/core";
+function initEventListeners(instance, eventName, listener, previousListener) {
+  if (previousListener) {
+    instance.off(eventName, previousListener);
+  }
+  if (listener) {
+    instance.on(eventName, listener);
+  }
+}
+function handleTextChildren(textInstance, children) {
+  if (children == null) {
+    textInstance.content = stringToStyledText("");
+    return;
+  }
+  if (Array.isArray(children)) {
+    const chunks = [];
+    for (const child of children) {
+      if (typeof child === "string") {
+        chunks.push({
+          __isChunk: true,
+          text: new TextEncoder().encode(child),
+          plainText: child
+        });
+      } else if (child && typeof child === "object" && "__isChunk" in child) {
+        chunks.push(child);
+      } else if (child instanceof StyledText) {
+        chunks.push(...child.chunks);
+      } else if (child != null) {
+        const stringValue = String(child);
+        chunks.push({
+          __isChunk: true,
+          text: new TextEncoder().encode(stringValue),
+          plainText: stringValue
+        });
+      }
+    }
+    textInstance.content = new StyledText(chunks);
+    return;
+  }
+  if (typeof children === "string") {
+    textInstance.content = stringToStyledText(children);
+  } else if (children && typeof children === "object" && "__isChunk" in children) {
+    textInstance.content = new StyledText([children]);
+  } else if (children instanceof StyledText) {
+    textInstance.content = children;
+  } else {
+    textInstance.content = stringToStyledText(String(children));
+  }
+}
+function setStyle(instance, styles, oldStyles) {
+  if (styles && typeof styles === "object") {
+    if (oldStyles != null) {
+      for (const styleName in styles) {
+        const value = styles[styleName];
+        if (styles.hasOwnProperty(styleName) && oldStyles[styleName] !== value) {
+          instance[styleName] = value;
+        }
+      }
+    } else {
+      for (const styleName in styles) {
+        if (styles.hasOwnProperty(styleName)) {
+          const value = styles[styleName];
+          instance[styleName] = value;
+        }
+      }
+    }
+  }
+}
+function setProperty(instance, type, propKey, propValue, oldPropValue) {
+  switch (propKey) {
+    case "onChange":
+      if (instance instanceof InputRenderable2) {
+        initEventListeners(instance, InputRenderableEvents.CHANGE, propValue, oldPropValue);
+      } else if (instance instanceof SelectRenderable2) {
+        initEventListeners(instance, SelectRenderableEvents.SELECTION_CHANGED, propValue, oldPropValue);
+      } else if (instance instanceof TabSelectRenderable2) {
+        initEventListeners(instance, TabSelectRenderableEvents.SELECTION_CHANGED, propValue, oldPropValue);
+      }
+      break;
+    case "onInput":
+      if (instance instanceof InputRenderable2) {
+        initEventListeners(instance, InputRenderableEvents.INPUT, propValue, oldPropValue);
+      }
+      break;
+    case "onSubmit":
+      if (instance instanceof InputRenderable2) {
+        initEventListeners(instance, InputRenderableEvents.ENTER, propValue, oldPropValue);
+      }
+      break;
+    case "onSelect":
+      if (instance instanceof SelectRenderable2) {
+        initEventListeners(instance, SelectRenderableEvents.ITEM_SELECTED, propValue, oldPropValue);
+      } else if (instance instanceof TabSelectRenderable2) {
+        initEventListeners(instance, TabSelectRenderableEvents.ITEM_SELECTED, propValue, oldPropValue);
+      }
+      break;
+    case "focused":
+      if (!!propValue) {
+        instance.focus();
+      } else {
+        instance.blur();
+      }
+      break;
+    case "style":
+      setStyle(instance, propValue, oldPropValue);
+      break;
+    case "children":
+      if (type === "text" && instance instanceof TextRenderable2) {
+        handleTextChildren(instance, propValue);
+      }
+      break;
+    default:
+      instance[propKey] = propValue;
+  }
+}
+function setInitialProperties(instance, type, props) {
+  for (const propKey in props) {
+    if (!props.hasOwnProperty(propKey)) {
+      continue;
+    }
+    const propValue = props[propKey];
+    if (propValue == null) {
+      continue;
+    }
+    setProperty(instance, type, propKey, propValue);
+  }
+}
+function updateProperties(instance, type, oldProps, newProps) {
+  for (const propKey in oldProps) {
+    const oldProp = oldProps[propKey];
+    if (oldProps.hasOwnProperty(propKey) && oldProp != null && !newProps.hasOwnProperty(propKey)) {
+      setProperty(instance, type, propKey, null, oldProp);
+    }
+  }
+  for (const propKey in newProps) {
+    const newProp = newProps[propKey];
+    const oldProp = oldProps[propKey];
+    if (newProps.hasOwnProperty(propKey) && newProp !== oldProp && (newProp != null || oldProp != null)) {
+      setProperty(instance, type, propKey, newProp, oldProp);
+    }
+  }
+}
+
+// src/reconciler/host-config.ts
+var currentUpdatePriority = NoEventPriority;
+var hostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  createInstance(type, props, rootContainerInstance, hostContext) {
+    const id = getNextId(type);
+    const components = getComponentCatalogue();
+    if (!components[type]) {
+      throw new Error(`[Reconciler] Unknown component type: ${type}`);
+    }
+    return new components[type](rootContainerInstance.ctx, {
+      id,
+      ...props
+    });
+  },
+  appendChild(parent, child) {
+    parent.add(child);
+  },
+  removeChild(parent, child) {
+    parent.remove(child.id);
+  },
+  insertBefore(parent, child, beforeChild) {
+    parent.insertBefore(child, beforeChild);
+  },
+  insertInContainerBefore(parent, child, beforeChild) {
+    parent.insertBefore(child, beforeChild);
+  },
+  removeChildFromContainer(parent, child) {
+    parent.remove(child.id);
+  },
+  prepareForCommit(containerInfo) {
+    return null;
+  },
+  resetAfterCommit(containerInfo) {
+    containerInfo.requestRender();
+  },
+  getRootHostContext(rootContainerInstance) {
+    return {};
+  },
+  getChildHostContext(parentHostContext, type, rootContainerInstance) {
+    return parentHostContext;
+  },
+  shouldSetTextContent(type, props) {
+    if (type === "text") {
+      return true;
+    }
+    return false;
+  },
+  createTextInstance(text, rootContainerInstance, hostContext) {
+    const components = getComponentCatalogue();
+    return new components["text"](rootContainerInstance.ctx, {
+      id: getNextId("text"),
+      content: text
+    });
+  },
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  shouldAttemptEagerTransition() {
+    return false;
+  },
+  finalizeInitialChildren(instance, type, props, rootContainerInstance, hostContext) {
+    setInitialProperties(instance, type, props);
+    return false;
+  },
+  commitMount(instance, type, props, internalInstanceHandle) {},
+  commitUpdate(instance, type, oldProps, newProps, internalInstanceHandle) {
+    updateProperties(instance, type, oldProps, newProps);
+    instance.requestRender();
+  },
+  commitTextUpdate(textInstance, oldText, newText) {
+    textInstance.content = newText;
+    textInstance.requestRender();
+  },
+  appendChildToContainer(container, child) {
+    container.add(child);
+  },
+  appendInitialChild(parent, child) {
+    parent.add(child);
+  },
+  hideInstance(instance) {
+    instance.visible = false;
+    instance.requestRender();
+  },
+  unhideInstance(instance, props) {
+    instance.visible = true;
+    instance.requestRender();
+  },
+  hideTextInstance(textInstance) {
+    textInstance.visible = false;
+    textInstance.requestRender();
+  },
+  unhideTextInstance(textInstance, text) {
+    textInstance.visible = true;
+    textInstance.requestRender();
+  },
+  clearContainer(container) {
+    const children = container.getChildren();
+    children.forEach((child) => container.remove(child.id));
+  },
+  setCurrentUpdatePriority(newPriority) {
+    currentUpdatePriority = newPriority;
+  },
+  getCurrentUpdatePriority: () => currentUpdatePriority,
+  resolveUpdatePriority() {
+    if (currentUpdatePriority !== NoEventPriority) {
+      return currentUpdatePriority;
+    }
+    return DefaultEventPriority;
+  },
+  maySuspendCommit() {
+    return false;
+  },
+  NotPendingTransition: null,
+  HostTransitionContext: createContext2(null),
+  resetFormInstance() {},
+  requestPostPaintCallback() {},
+  trackSchedulerEvent() {},
+  resolveEventType() {
+    return null;
+  },
+  resolveEventTimeStamp() {
+    return -1.1;
+  },
+  preloadInstance() {
+    return true;
+  },
+  startSuspendingCommit() {},
+  suspendInstance() {},
+  waitForCommitToBeReady() {
+    return null;
+  },
+  detachDeletedInstance(instance) {
+    if (!instance.parent) {
+      instance.destroy();
+    }
+  },
+  getPublicInstance(instance) {
+    return instance;
+  },
+  preparePortalMount(containerInfo) {},
+  isPrimaryRenderer: true,
+  getInstanceFromNode() {
+    return null;
+  },
+  beforeActiveInstanceBlur() {},
+  afterActiveInstanceBlur() {},
+  prepareScopeUpdate() {},
+  getInstanceFromScope() {
+    return null;
+  }
+};
+
+// src/reconciler/reconciler.ts
+var reconciler = ReactReconciler(hostConfig);
+function _render(element, root) {
+  const container = reconciler.createContainer(root, ConcurrentRoot, null, false, null, "", console.error, console.error, console.error, console.error, null);
+  reconciler.updateContainer(element, container, null, () => {});
+}
+
+// src/reconciler/renderer.ts
+var keyHandler = getKeyHandler();
+async function render(node, rendererConfig = {}) {
+  const renderer = await createCliRenderer(rendererConfig);
+  _render(React.createElement(AppContext.Provider, { value: { keyHandler, renderer } }, node), renderer.root);
+}
+export {
+  useTerminalDimensions,
+  useRenderer,
+  useOnResize,
+  useKeyboard,
+  useAppContext,
+  render,
+  getComponentCatalogue,
+  extend,
+  componentCatalogue,
+  baseComponents,
+  AppContext
+};

package/jsx-dev-runtime.d.ts

@@ -0,0 +1,2 @@
+export { Fragment, jsxDEV } from "react/jsx-dev-runtime"
+export type * from "./jsx-namespace.d.ts"

package/jsx-dev-runtime.js

@@ -0,0 +1 @@
+export { Fragment, jsxDEV } from "react/jsx-dev-runtime"

package/jsx-namespace.d.ts

@@ -0,0 +1,38 @@
+import type * as React from "react"
+import type {
+  AsciiFontProps,
+  BoxProps,
+  ExtendedIntrinsicElements,
+  InputProps,
+  OpenTUIComponents,
+  ScrollBoxProps,
+  SelectProps,
+  TabSelectProps,
+  TextProps,
+} from "./src/types/components"
+
+export namespace JSX {
+  type Element = React.ReactNode
+
+  interface ElementClass extends React.ComponentClass<any> {
+    render(): React.ReactNode
+  }
+
+  interface ElementAttributesProperty {
+    props: {}
+  }
+
+  interface ElementChildrenAttribute {
+    children: {}
+  }
+
+  interface IntrinsicElements extends React.JSX.IntrinsicElements, ExtendedIntrinsicElements<OpenTUIComponents> {
+    box: BoxProps
+    text: TextProps
+    input: InputProps
+    select: SelectProps
+    scrollbox: ScrollBoxProps
+    "ascii-font": AsciiFontProps
+    "tab-select": TabSelectProps
+  }
+}

package/jsx-runtime.d.ts

@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxs } from "react/jsx-runtime"
+export type * from "./jsx-namespace.d.ts"

package/jsx-runtime.js

@@ -0,0 +1 @@
+export { Fragment, jsx, jsxs } from "react/jsx-runtime"

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@opentui/react",
+  "module": "index.js",
+  "main": "index.js",
+  "types": "src/index.d.ts",
+  "type": "module",
+  "version": "0.0.0-20250908-4906ddad",
+  "description": "React renderer for building terminal user interfaces using OpenTUI core",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sst/opentui",
+    "directory": "packages/react"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./index.js",
+      "require": "./index.js"
+    },
+    "./renderer": {
+      "types": "./src/reconciler/renderer.d.ts",
+      "import": "./src/reconciler/renderer.js",
+      "require": "./src/reconciler/renderer.js"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime.d.ts",
+      "import": "./jsx-runtime.js",
+      "require": "./jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx-dev-runtime.d.ts",
+      "import": "./jsx-dev-runtime.js",
+      "require": "./jsx-dev-runtime.js"
+    }
+  },
+  "dependencies": {
+    "@opentui/core": "0.0.0-20250908-4906ddad",
+    "react-reconciler": "^0.32.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react-reconciler": "^0.32.0"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "typescript": "^5"
+  }
+}

package/src/components/app.d.ts

@@ -0,0 +1,8 @@
+import type { CliRenderer, KeyHandler } from "@opentui/core";
+interface AppContext {
+    keyHandler: KeyHandler | null;
+    renderer: CliRenderer | null;
+}
+export declare const AppContext: import("react").Context<AppContext>;
+export declare const useAppContext: () => AppContext;
+export {};

package/src/components/index.d.ts

@@ -0,0 +1,28 @@
+import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
+import type { RenderableConstructor } from "../types/components";
+export declare const baseComponents: {
+    box: typeof BoxRenderable;
+    text: typeof TextRenderable;
+    input: typeof InputRenderable;
+    select: typeof SelectRenderable;
+    scrollbox: typeof ScrollBoxRenderable;
+    "ascii-font": typeof ASCIIFontRenderable;
+    "tab-select": typeof TabSelectRenderable;
+};
+type ComponentCatalogue = Record<string, RenderableConstructor>;
+export declare const componentCatalogue: ComponentCatalogue;
+/**
+ * Extend the component catalogue with new renderable components
+ *
+ * @example
+ * ```tsx
+ * // Extend with an object of components
+ * extend({
+ *   consoleButton: ConsoleButtonRenderable,
+ *   customBox: CustomBoxRenderable
+ * })
+ * ```
+ */
+export declare function extend<T extends ComponentCatalogue>(objects: T): void;
+export declare function getComponentCatalogue(): ComponentCatalogue;
+export type { ExtendedComponentProps, ExtendedIntrinsicElements, RenderableConstructor } from "../types/components";

package/src/hooks/use-event.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns a stable callback that always calls the latest version of the provided handler.
+ * This prevents unnecessary re-renders and effect re-runs while ensuring the callback
+ * always has access to the latest props and state.
+ *
+ * Useful for event handlers that need to be passed to effects with empty dependency arrays
+ * or memoized child components.
+ */
+export declare function useEvent<T extends (...args: any[]) => any>(handler: T): T;

package/src/hooks/use-keyboard.d.ts

@@ -0,0 +1,2 @@
+import type { ParsedKey } from "@opentui/core";
+export declare const useKeyboard: (handler: (key: ParsedKey) => void) => void;

package/src/hooks/use-renderer.d.ts

@@ -0,0 +1 @@
+export declare const useRenderer: () => import("@opentui/core").CliRenderer;

package/src/hooks/use-resize.d.ts

@@ -0,0 +1 @@
+export declare const useOnResize: (callback: (width: number, height: number) => void) => import("@opentui/core").CliRenderer;

package/src/hooks/use-terminal-dimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useTerminalDimensions: () => {
+    width: number;
+    height: number;
+};

package/src/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./components";
+export * from "./components/app";
+export * from "./hooks/use-keyboard";
+export * from "./hooks/use-renderer";
+export * from "./hooks/use-resize";
+export * from "./hooks/use-terminal-dimensions";
+export * from "./reconciler/renderer";
+export * from "./types/components";

package/src/reconciler/host-config.d.ts

@@ -0,0 +1,9 @@
+import type { HostConfig } from "react-reconciler";
+import type { Container, HostContext, Instance, Props, PublicInstance, TextInstance, Type } from "../types/host";
+export declare const hostConfig: HostConfig<Type, Props, Container, Instance, TextInstance, unknown, // SuspenseInstance
+unknown, // HydratableInstance
+unknown, // FormInstance
+PublicInstance, HostContext, unknown, // ChildSet
+unknown, // TimeoutHandle
+unknown, // NoTimeout
+unknown>;

package/src/reconciler/reconciler.d.ts

@@ -0,0 +1,5 @@
+import type { RootRenderable } from "@opentui/core";
+import React from "react";
+import ReactReconciler from "react-reconciler";
+export declare const reconciler: ReactReconciler.Reconciler<RootRenderable, import("@opentui/core").Renderable, import("@opentui/core").TextRenderable, unknown, unknown, import("@opentui/core").Renderable>;
+export declare function _render(element: React.ReactNode, root: RootRenderable): void;

package/src/reconciler/renderer.d.ts

@@ -0,0 +1,3 @@
+import { type CliRendererConfig } from "@opentui/core";
+import { type ReactNode } from "react";
+export declare function render(node: ReactNode, rendererConfig?: CliRendererConfig): Promise<void>;