@opentui/react 0.0.0-20250908-4906ddad

package/src/reconciler/renderer.js

@@ -0,0 +1,380 @@
+// @bun
+// src/reconciler/renderer.ts
+import { createCliRenderer, getKeyHandler } from "@opentui/core";
+import React from "react";
+
+// src/components/app.tsx
+import { createContext, useContext } from "react";
+var AppContext = createContext({
+  keyHandler: null,
+  renderer: null
+});
+
+// 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/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 getComponentCatalogue() {
+  return componentCatalogue;
+}
+
+// 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 {
+  render
+};

package/src/types/components.d.ts

@@ -0,0 +1,68 @@
+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 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}`;
+/** React-specific props for all components */
+export type ReactProps<TRenderable = unknown> = {
+    key?: React.Key;
+    ref?: React.Ref<TRenderable>;
+};
+/** Base type for any renderable constructor */
+export type RenderableConstructor<TRenderable extends Renderable = Renderable> = 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 */
+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;
+/** Base props for container components that accept children */
+type ContainerProps<TOptions> = TOptions & {
+    children?: React.ReactNode;
+};
+/** Smart component props that automatically determine excluded properties */
+type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends Renderable> = TOptions & {
+    style?: Partial<Omit<TOptions, GetNonStyledProperties<RenderableConstructor<TRenderable>>>>;
+} & ReactProps<TRenderable>;
+/** Valid text content types for Text component children */
+type TextChildren = string | number | boolean | null | undefined;
+export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
+    children?: TextChildren | StyledText | TextChunk | Array<TextChildren | StyledText | TextChunk>;
+};
+export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable>;
+export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
+    focused?: boolean;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+};
+export type SelectProps = ComponentProps<SelectRenderableOptions, SelectRenderable> & {
+    focused?: boolean;
+    onChange?: (index: number, option: SelectOption | null) => void;
+    onSelect?: (index: number, option: SelectOption | null) => void;
+};
+export type ScrollBoxProps = ComponentProps<ContainerProps<ScrollBoxOptions>, ScrollBoxRenderable> & {
+    focused?: boolean;
+};
+export type AsciiFontProps = ComponentProps<ASCIIFontOptions, ASCIIFontRenderable>;
+export type TabSelectProps = ComponentProps<TabSelectRenderableOptions, TabSelectRenderable> & {
+    focused?: boolean;
+    onChange?: (index: number, option: TabSelectOption | null) => void;
+    onSelect?: (index: number, option: TabSelectOption | null) => void;
+};
+/** Convert renderable constructor to component props with proper style exclusions */
+export type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & {
+    children?: React.ReactNode;
+    style?: Partial<Omit<TOptions, GetNonStyledProperties<TConstructor>>>;
+} & ReactProps<ExtractRenderable<TConstructor>>;
+/** Helper type to create JSX element properties from a component catalogue */
+export type ExtendedIntrinsicElements<TComponentCatalogue extends Record<string, RenderableConstructor>> = {
+    [TComponentName in keyof TComponentCatalogue]: ExtendedComponentProps<TComponentCatalogue[TComponentName]>;
+};
+/**
+ * Global augmentation interface for extended components
+ * This will be augmented by user code using module augmentation
+ */
+export interface OpenTUIComponents {
+    [componentName: string]: RenderableConstructor;
+}
+export {};

package/src/types/host.d.ts

@@ -0,0 +1,9 @@
+import type { Renderable, RootRenderable, TextRenderable } from "@opentui/core";
+import { baseComponents } from "../components";
+export type Type = keyof typeof baseComponents;
+export type Props = Record<string, any>;
+export type Container = RootRenderable;
+export type Instance = Renderable;
+export type TextInstance = TextRenderable;
+export type PublicInstance = Instance;
+export type HostContext = Record<string, any>;

package/src/utils/id.d.ts

@@ -0,0 +1,2 @@
+import type { Type } from "../types/host";
+export declare function getNextId(type: Type): string;

package/src/utils/index.d.ts

@@ -0,0 +1,3 @@
+import type { Instance, Props, Type } from "../types/host";
+export declare function setInitialProperties(instance: Instance, type: Type, props: Props): void;
+export declare function updateProperties(instance: Instance, type: Type, oldProps: Props, newProps: Props): void;