@opentui/react 0.1.42 → 0.1.43

package/index.js

@@ -181,7 +181,7 @@ var useTimeline = (options = {}) => {
   return timeline;
 };
 // src/reconciler/renderer.ts
-import { createCliRenderer, engine as engine2 } from "@opentui/core";
+import { engine as engine2 } from "@opentui/core";
 import React2 from "react";
 
 // src/components/error-boundary.tsx
@@ -504,19 +504,24 @@ 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, () => {});
+  return container;
 }
 
 // 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) {
+  let container = null;
   return {
     render: (node) => {
       engine2.attach(renderer);
-      _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
+      container = _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
+    },
+    unmount: () => {
+      if (!container) {
+        return;
+      }
+      reconciler.updateContainer(null, container, null, () => {});
+      reconciler.flushSyncWork();
+      container = null;
     }
   };
 }
@@ -527,7 +532,6 @@ export {
   useOnResize,
   useKeyboard,
   useAppContext,
-  render,
   getComponentCatalogue,
   extend,
   createRoot,

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -23,6 +23,11 @@
       "import": "./src/reconciler/renderer.js",
       "require": "./src/reconciler/renderer.js"
     },
+    "./test-utils": {
+      "types": "./src/test-utils.d.ts",
+      "import": "./src/test-utils/test-utils.js",
+      "require": "./src/test-utils/test-utils.js"
+    },
     "./jsx-runtime": {
       "types": "./jsx-runtime.d.ts",
       "import": "./jsx-runtime.js",
@@ -35,7 +40,7 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.1.42",
+    "@opentui/core": "0.1.43",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {

package/src/reconciler/reconciler.d.ts

@@ -2,4 +2,4 @@ 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").BaseRenderable, import("@opentui/core").TextNodeRenderable, unknown, unknown, import("@opentui/core").BaseRenderable>;
-export declare function _render(element: React.ReactNode, root: RootRenderable): void;
+export declare function _render(element: React.ReactNode, root: RootRenderable): any;

package/src/reconciler/renderer.d.ts

@@ -1,9 +1,9 @@
-import { CliRenderer, type CliRendererConfig } from "@opentui/core";
+import { CliRenderer } 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>;
+export type Root = {
+    render: (node: ReactNode) => void;
+    unmount: () => void;
+};
 /**
  * Creates a root for rendering a React tree with the given CLI renderer.
  * @param renderer The CLI renderer to use
@@ -14,6 +14,4 @@ export declare function render(node: ReactNode, rendererConfig?: CliRendererConf
  * createRoot(renderer).render(<App />)
  * ```
  */
-export declare function createRoot(renderer: CliRenderer): {
-    render: (node: ReactNode) => void;
-};
+export declare function createRoot(renderer: CliRenderer): Root;

package/src/reconciler/renderer.js

@@ -1,6 +1,6 @@
 // @bun
 // src/reconciler/renderer.ts
-import { createCliRenderer, engine } from "@opentui/core";
+import { engine } from "@opentui/core";
 import React2 from "react";
 
 // src/components/app.tsx
@@ -421,23 +421,27 @@ 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, () => {});
+  return container;
 }
 
 // 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) {
+  let container = null;
   return {
     render: (node) => {
       engine.attach(renderer);
-      _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
+      container = _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
+    },
+    unmount: () => {
+      if (!container) {
+        return;
+      }
+      reconciler.updateContainer(null, container, null, () => {});
+      reconciler.flushSyncWork();
+      container = null;
     }
   };
 }
 export {
-  render,
   createRoot
 };

package/src/test-utils/test-utils.js

@@ -0,0 +1,480 @@
+// @bun
+// src/test-utils.ts
+import { createTestRenderer } from "@opentui/core/testing";
+import { act } from "react";
+
+// src/reconciler/renderer.ts
+import { engine } from "@opentui/core";
+import React2 from "react";
+
+// src/components/app.tsx
+import { createContext, useContext } from "react";
+var AppContext = createContext({
+  keyHandler: null,
+  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";
+
+// src/reconciler/host-config.ts
+import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
+import { createContext as createContext2 } from "react";
+import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
+
+// src/components/index.ts
+import {
+  ASCIIFontRenderable,
+  BoxRenderable,
+  CodeRenderable,
+  InputRenderable,
+  ScrollBoxRenderable,
+  SelectRenderable,
+  TabSelectRenderable,
+  TextareaRenderable,
+  TextRenderable
+} from "@opentui/core";
+
+// src/components/text.ts
+import { TextAttributes, TextNodeRenderable } from "@opentui/core";
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
+
+class SpanRenderable extends TextNodeRenderable {
+  ctx;
+  constructor(ctx, options) {
+    super(options);
+    this.ctx = ctx;
+  }
+}
+
+class TextModifierRenderable extends SpanRenderable {
+  constructor(options, modifier) {
+    super(null, options);
+    if (modifier === "b" || modifier === "strong") {
+      this.attributes = (this.attributes || 0) | TextAttributes.BOLD;
+    } else if (modifier === "i" || modifier === "em") {
+      this.attributes = (this.attributes || 0) | TextAttributes.ITALIC;
+    } else if (modifier === "u") {
+      this.attributes = (this.attributes || 0) | TextAttributes.UNDERLINE;
+    }
+  }
+}
+
+class BoldSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "b");
+  }
+}
+
+class ItalicSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "i");
+  }
+}
+
+class UnderlineSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "u");
+  }
+}
+
+class LineBreakRenderable extends SpanRenderable {
+  constructor(_ctx, options) {
+    super(null, options);
+    this.add();
+  }
+  add() {
+    return super.add(`
+`);
+  }
+}
+
+// src/components/index.ts
+var baseComponents = {
+  box: BoxRenderable,
+  text: TextRenderable,
+  code: CodeRenderable,
+  input: InputRenderable,
+  select: SelectRenderable,
+  textarea: TextareaRenderable,
+  scrollbox: ScrollBoxRenderable,
+  "ascii-font": ASCIIFontRenderable,
+  "tab-select": TabSelectRenderable,
+  span: SpanRenderable,
+  br: LineBreakRenderable,
+  b: BoldSpanRenderable,
+  strong: BoldSpanRenderable,
+  i: ItalicSpanRenderable,
+  em: ItalicSpanRenderable,
+  u: UnderlineSpanRenderable
+};
+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,
+  isRenderable,
+  SelectRenderable as SelectRenderable2,
+  SelectRenderableEvents,
+  TabSelectRenderable as TabSelectRenderable2,
+  TabSelectRenderableEvents
+} from "@opentui/core";
+function initEventListeners(instance, eventName, listener, previousListener) {
+  if (previousListener) {
+    instance.off(eventName, previousListener);
+  }
+  if (listener) {
+    instance.on(eventName, listener);
+  }
+}
+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 (isRenderable(instance)) {
+        if (!!propValue) {
+          instance.focus();
+        } else {
+          instance.blur();
+        }
+      }
+      break;
+    case "style":
+      setStyle(instance, propValue, oldPropValue);
+      break;
+    case "children":
+      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) {
+    if (textNodeKeys.includes(type) && !hostContext.isInsideText) {
+      throw new Error(`Component of type "${type}" must be created inside of a text node`);
+    }
+    const id = getNextId(type);
+    const components = getComponentCatalogue();
+    if (!components[type]) {
+      throw new Error(`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 { isInsideText: false };
+  },
+  getChildHostContext(parentHostContext, type, rootContainerInstance) {
+    const isInsideText = ["text", ...textNodeKeys].includes(type);
+    return { ...parentHostContext, isInsideText };
+  },
+  shouldSetTextContent(type, props) {
+    return false;
+  },
+  createTextInstance(text, rootContainerInstance, hostContext) {
+    if (!hostContext.isInsideText) {
+      throw new Error("Text must be created inside of a text node");
+    }
+    return TextNodeRenderable2.fromString(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.children = [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.destroyRecursively();
+    }
+  },
+  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, () => {});
+  return container;
+}
+
+// src/reconciler/renderer.ts
+function createRoot(renderer) {
+  let container = null;
+  return {
+    render: (node) => {
+      engine.attach(renderer);
+      container = _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
+    },
+    unmount: () => {
+      if (!container) {
+        return;
+      }
+      reconciler.updateContainer(null, container, null, () => {});
+      reconciler.flushSyncWork();
+      container = null;
+    }
+  };
+}
+
+// src/test-utils.ts
+function setIsReactActEnvironment(isReactActEnvironment) {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
+}
+async function testRender(node, testRendererOptions) {
+  let root = null;
+  setIsReactActEnvironment(true);
+  const testSetup = await createTestRenderer({
+    ...testRendererOptions,
+    onDestroy() {
+      act(() => {
+        if (root) {
+          root.unmount();
+          root = null;
+        }
+      });
+      testRendererOptions.onDestroy?.();
+      setIsReactActEnvironment(false);
+    }
+  });
+  root = createRoot(testSetup.renderer);
+  act(() => {
+    if (root) {
+      root.render(node);
+    }
+  });
+  return testSetup;
+}
+export {
+  testRender
+};

package/src/test-utils.d.ts

@@ -0,0 +1,10 @@
+import { type TestRendererOptions } from "@opentui/core/testing";
+import { type ReactNode } from "react";
+export declare function testRender(node: ReactNode, testRendererOptions: TestRendererOptions): Promise<{
+    renderer: import("@opentui/core/testing").TestRenderer;
+    mockInput: import("@opentui/core/testing").MockInput;
+    mockMouse: import("@opentui/core/testing").MockMouse;
+    renderOnce: () => Promise<void>;
+    captureCharFrame: () => string;
+    resize: (width: number, height: number) => void;
+}>;