@opentui/react 0.1.87 → 0.1.89

package/{chunk-6x3h6qt2.js → chunk-m242ttx8.js}

@@ -166,7 +166,7 @@ import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
 // package.json
 var package_default = {
   name: "@opentui/react",
-  version: "0.1.87",
+  version: "0.1.89",
   description: "React renderer for building terminal user interfaces using OpenTUI core",
   license: "MIT",
   repository: {
@@ -187,6 +187,10 @@ var package_default = {
       import: "./src/test-utils.ts",
       types: "./src/test-utils.d.ts"
     },
+    "./runtime-plugin-support": {
+      import: "./scripts/runtime-plugin-support.ts",
+      types: "./scripts/runtime-plugin-support.ts"
+    },
     "./jsx-runtime": {
       import: "./jsx-runtime.js",
       types: "./jsx-runtime.d.ts"
@@ -198,6 +202,7 @@ var package_default = {
   },
   scripts: {
     build: "bun run scripts/build.ts",
+    "build:examples": "bun examples/build.ts",
     "build:dev": "bun run scripts/build.ts --dev",
     publish: "bun run scripts/publish.ts",
     test: "bun test"
@@ -569,4 +574,4 @@ function createRoot(renderer) {
   };
 }
 
-export { baseComponents, componentCatalogue, extend, getComponentCatalogue, AppContext, useAppContext, flushSync, createPortal, createRoot };
+export { baseComponents, componentCatalogue, extend, getComponentCatalogue, AppContext, useAppContext, Fragment, jsxDEV, flushSync, createPortal, createRoot };

package/index.js

@@ -1,6 +1,7 @@
 // @bun
 import {
   AppContext,
+  Fragment,
   baseComponents,
   componentCatalogue,
   createPortal,
@@ -8,8 +9,9 @@ import {
   extend,
   flushSync,
   getComponentCatalogue,
+  jsxDEV,
   useAppContext
-} from "./chunk-6x3h6qt2.js";
+} from "./chunk-m242ttx8.js";
 import"./chunk-2mx7fq49.js";
 // src/hooks/use-keyboard.ts
 import { useEffect } from "react";
@@ -96,6 +98,213 @@ var useTimeline = (options = {}) => {
   }, []);
   return timeline;
 };
+// src/plugins/slot.tsx
+import {
+  createSlotRegistry
+} from "@opentui/core";
+import React, { Fragment as Fragment2, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState2 } from "react";
+function createReactSlotRegistry(renderer, context, options = {}) {
+  return createSlotRegistry(renderer, "react:slot-registry", context, options);
+}
+function renderPluginFailurePlaceholder(registry, pluginFailurePlaceholder, failure, pluginId, slot) {
+  if (!pluginFailurePlaceholder) {
+    return null;
+  }
+  try {
+    return pluginFailurePlaceholder(failure);
+  } catch (error) {
+    registry.reportPluginError({
+      pluginId,
+      slot,
+      phase: "error_placeholder",
+      source: "react",
+      error
+    });
+    return null;
+  }
+}
+
+class PluginErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { failure: null };
+  }
+  componentDidCatch(error) {
+    const failure = this.props.registry.reportPluginError({
+      pluginId: this.props.pluginId,
+      slot: this.props.slotName,
+      phase: "render",
+      source: "react",
+      error
+    });
+    this.setState({ failure });
+  }
+  componentDidUpdate(previousProps) {
+    if (previousProps.resetToken !== this.props.resetToken && this.state.failure) {
+      this.setState({ failure: null });
+    }
+  }
+  render() {
+    if (this.state.failure) {
+      const placeholder = renderPluginFailurePlaceholder(this.props.registry, this.props.pluginFailurePlaceholder, this.state.failure, this.props.pluginId, this.props.slotName);
+      if (placeholder === null || placeholder === undefined || placeholder === false) {
+        return this.props.fallbackOnFailure ?? null;
+      }
+      return placeholder;
+    }
+    return this.props.children;
+  }
+}
+function getSlotProps(props) {
+  const {
+    children: _children,
+    mode: _mode,
+    name: _name,
+    registry: _registry,
+    pluginFailurePlaceholder: _pluginFailurePlaceholder,
+    ...slotProps
+  } = props;
+  return slotProps;
+}
+function createSlot(registry, options = {}) {
+  return function BoundSlot(props) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      ...props,
+      registry,
+      pluginFailurePlaceholder: options.pluginFailurePlaceholder
+    }, undefined, false, undefined, this);
+  };
+}
+function Slot(props) {
+  const [version, setVersion] = useState2(0);
+  const registry = props.registry;
+  const slotName = String(props.name);
+  const renderFailuresByPluginRef = useRef2(new Map);
+  const pendingRenderReportsRef = useRef2(new Map);
+  useEffect4(() => {
+    return registry.subscribe(() => {
+      setVersion((current) => current + 1);
+    });
+  }, [registry]);
+  useEffect4(() => {
+    if (pendingRenderReportsRef.current.size === 0) {
+      return;
+    }
+    const pendingReports = [...pendingRenderReportsRef.current.values()];
+    pendingRenderReportsRef.current.clear();
+    for (const report of pendingReports) {
+      const failure = registry.reportPluginError({
+        pluginId: report.pluginId,
+        slot: report.slot,
+        phase: "render",
+        source: "react",
+        error: report.error
+      });
+      renderFailuresByPluginRef.current.set(`${report.slot}:${report.pluginId}:render`, failure);
+    }
+  });
+  const entries = useMemo(() => registry.resolveEntries(props.name), [registry, props.name, version]);
+  const slotProps = getSlotProps(props);
+  const renderEntry = (entry, fallbackOnFailure) => {
+    const key = `${slotName}:${entry.id}`;
+    const failureKey = `${slotName}:${entry.id}:render`;
+    try {
+      const rendered = entry.renderer(registry.context, slotProps);
+      renderFailuresByPluginRef.current.delete(failureKey);
+      pendingRenderReportsRef.current.delete(failureKey);
+      return /* @__PURE__ */ jsxDEV(PluginErrorBoundary, {
+        registry,
+        pluginFailurePlaceholder: props.pluginFailurePlaceholder,
+        pluginId: entry.id,
+        slotName,
+        resetToken: version,
+        fallbackOnFailure,
+        children: rendered
+      }, key, false, undefined, this);
+    } catch (error) {
+      const normalizedError = error instanceof Error ? error : typeof error === "string" ? new Error(error) : new Error(String(error));
+      const lastFailure = renderFailuresByPluginRef.current.get(failureKey);
+      const isSameFailure = lastFailure && lastFailure.error.message === normalizedError.message;
+      if (!isSameFailure) {
+        const queued = pendingRenderReportsRef.current.get(failureKey);
+        if (!queued || queued.error.message !== normalizedError.message) {
+          pendingRenderReportsRef.current.set(failureKey, {
+            pluginId: entry.id,
+            slot: slotName,
+            error: normalizedError
+          });
+        }
+      }
+      const failure = isSameFailure && lastFailure ? lastFailure : {
+        pluginId: entry.id,
+        slot: slotName,
+        phase: "render",
+        source: "react",
+        error: normalizedError,
+        timestamp: Date.now()
+      };
+      renderFailuresByPluginRef.current.set(failureKey, failure);
+      const placeholder = renderPluginFailurePlaceholder(registry, props.pluginFailurePlaceholder, failure, entry.id, slotName);
+      if (placeholder === null || placeholder === undefined || placeholder === false) {
+        return fallbackOnFailure ?? null;
+      }
+      return /* @__PURE__ */ jsxDEV(Fragment2, {
+        children: placeholder
+      }, key, false, undefined, this);
+    }
+  };
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxDEV(Fragment, {
+      children: props.children
+    }, undefined, false, undefined, this);
+  }
+  if (props.mode === "single_winner") {
+    const winner = entries[0];
+    if (!winner) {
+      return /* @__PURE__ */ jsxDEV(Fragment, {
+        children: props.children
+      }, undefined, false, undefined, this);
+    }
+    const rendered = renderEntry(winner, props.children);
+    if (rendered === null || rendered === undefined || rendered === false) {
+      return /* @__PURE__ */ jsxDEV(Fragment, {
+        children: props.children
+      }, undefined, false, undefined, this);
+    }
+    return /* @__PURE__ */ jsxDEV(Fragment, {
+      children: rendered
+    }, undefined, false, undefined, this);
+  }
+  if (props.mode === "replace") {
+    if (entries.length === 1) {
+      const rendered = renderEntry(entries[0], props.children);
+      if (rendered === null || rendered === undefined || rendered === false) {
+        return /* @__PURE__ */ jsxDEV(Fragment, {
+          children: props.children
+        }, undefined, false, undefined, this);
+      }
+      return /* @__PURE__ */ jsxDEV(Fragment, {
+        children: rendered
+      }, undefined, false, undefined, this);
+    }
+    const renderedEntries = entries.map((entry) => renderEntry(entry));
+    const hasPluginOutput = renderedEntries.some((node) => node !== null && node !== undefined && node !== false);
+    if (!hasPluginOutput) {
+      return /* @__PURE__ */ jsxDEV(Fragment, {
+        children: props.children
+      }, undefined, false, undefined, this);
+    }
+    return /* @__PURE__ */ jsxDEV(Fragment, {
+      children: renderedEntries
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children: [
+      props.children,
+      entries.map((entry) => renderEntry(entry))
+    ]
+  }, undefined, true, undefined, this);
+}
 // src/time-to-first-draw.tsx
 import { TimeToFirstDrawRenderable } from "@opentui/core";
 import { createElement } from "react";
@@ -116,11 +325,14 @@ export {
   getComponentCatalogue,
   flushSync,
   extend,
+  createSlot,
   createRoot,
+  createReactSlotRegistry,
   createPortal,
   createElement2 as createElement,
   componentCatalogue,
   baseComponents,
   TimeToFirstDraw,
+  Slot,
   AppContext
 };

package/jsx-namespace.d.ts

@@ -17,12 +17,12 @@ import type {
   TabSelectProps,
   TextareaProps,
   TextProps,
-} from "./src/types/components"
+} from "./src/types/components.js"
 
 export namespace JSX {
   type Element = React.ReactNode
 
-  interface ElementClass extends React.ComponentClass<any> {
+  interface ElementClass extends React.Component<any> {
     render(): React.ReactNode
   }
 

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.1.87",
+  "version": "0.1.89",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -28,6 +28,10 @@
       "import": "./test-utils.js",
       "require": "./test-utils.js"
     },
+    "./runtime-plugin-support": {
+      "types": "./scripts/runtime-plugin-support.d.ts",
+      "import": "./scripts/runtime-plugin-support.ts"
+    },
     "./jsx-runtime": {
       "types": "./jsx-runtime.d.ts",
       "import": "./jsx-runtime.js",
@@ -40,7 +44,7 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.1.87",
+    "@opentui/core": "0.1.89",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {

package/scripts/runtime-plugin-support.d.ts

@@ -0,0 +1 @@
+export declare function ensureRuntimePluginSupport(): boolean;

package/scripts/runtime-plugin-support.ts

@@ -0,0 +1,42 @@
+import { plugin as registerBunPlugin } from "bun"
+import * as coreRuntime from "@opentui/core"
+import { createRuntimePlugin, type RuntimeModuleEntry } from "@opentui/core/runtime-plugin"
+import * as reactRuntime from "react"
+import * as reactJsxRuntime from "react/jsx-runtime"
+import * as reactJsxDevRuntime from "react/jsx-dev-runtime"
+import * as opentuiReactRuntime from "../src/index"
+
+const runtimePluginSupportInstalledKey = "__opentuiReactRuntimePluginSupportInstalled__"
+
+type RuntimePluginSupportState = typeof globalThis & {
+  [runtimePluginSupportInstalledKey]?: boolean
+}
+
+const additionalRuntimeModules: Record<string, RuntimeModuleEntry> = {
+  "@opentui/react": opentuiReactRuntime as Record<string, unknown>,
+  "@opentui/react/jsx-runtime": reactJsxRuntime as Record<string, unknown>,
+  "@opentui/react/jsx-dev-runtime": reactJsxDevRuntime as Record<string, unknown>,
+  react: reactRuntime as Record<string, unknown>,
+  "react/jsx-runtime": reactJsxRuntime as Record<string, unknown>,
+  "react/jsx-dev-runtime": reactJsxDevRuntime as Record<string, unknown>,
+}
+
+export function ensureRuntimePluginSupport(): boolean {
+  const state = globalThis as RuntimePluginSupportState
+
+  if (state[runtimePluginSupportInstalledKey]) {
+    return false
+  }
+
+  registerBunPlugin(
+    createRuntimePlugin({
+      core: coreRuntime as Record<string, unknown>,
+      additional: additionalRuntimeModules,
+    }),
+  )
+
+  state[runtimePluginSupportInstalledKey] = true
+  return true
+}
+
+ensureRuntimePluginSupport()

package/src/components/index.d.ts

@@ -1,6 +1,6 @@
 import { ASCIIFontRenderable, BoxRenderable, CodeRenderable, DiffRenderable, InputRenderable, LineNumberRenderable, MarkdownRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextareaRenderable, TextRenderable } from "@opentui/core";
-import type { RenderableConstructor } from "../types/components";
-import { BoldSpanRenderable, ItalicSpanRenderable, LineBreakRenderable, LinkRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text";
+import type { RenderableConstructor } from "../types/components.js";
+import { BoldSpanRenderable, ItalicSpanRenderable, LineBreakRenderable, LinkRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text.js";
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
@@ -39,4 +39,4 @@ export declare const componentCatalogue: ComponentCatalogue;
  */
 export declare function extend<T extends ComponentCatalogue>(objects: T): void;
 export declare function getComponentCatalogue(): ComponentCatalogue;
-export type { ExtendedComponentProps, ExtendedIntrinsicElements, RenderableConstructor } from "../types/components";
+export type { ExtendedComponentProps, ExtendedIntrinsicElements, RenderableConstructor } from "../types/components.js";

package/src/hooks/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./use-keyboard";
-export * from "./use-renderer";
-export * from "./use-resize";
-export * from "./use-terminal-dimensions";
-export * from "./use-timeline";
+export * from "./use-keyboard.js";
+export * from "./use-renderer.js";
+export * from "./use-resize.js";
+export * from "./use-terminal-dimensions.js";
+export * from "./use-timeline.js";

package/src/index.d.ts

@@ -1,7 +1,8 @@
-export * from "./components";
-export * from "./components/app";
-export * from "./hooks";
-export * from "./reconciler/renderer";
-export * from "./time-to-first-draw";
-export * from "./types/components";
+export * from "./components/index.js";
+export * from "./components/app.js";
+export * from "./hooks/index.js";
+export * from "./plugins/slot.js";
+export * from "./reconciler/renderer.js";
+export * from "./time-to-first-draw.js";
+export * from "./types/components.js";
 export { createElement } from "react";

package/src/plugins/slot.d.ts

@@ -0,0 +1,25 @@
+import { SlotRegistry, type CliRenderer, type Plugin, type PluginContext, type PluginErrorEvent, type SlotMode, type SlotRegistryOptions } from "@opentui/core";
+import type { ReactNode } from "react";
+export type { SlotMode };
+type SlotMap = Record<string, object>;
+export type ReactPlugin<TSlots extends SlotMap, TContext extends PluginContext = PluginContext> = Plugin<ReactNode, TSlots, TContext>;
+export type ReactSlotProps<TSlots extends SlotMap, K extends keyof TSlots, TContext extends PluginContext = PluginContext> = {
+    registry: SlotRegistry<ReactNode, TSlots, TContext>;
+    name: K;
+    mode?: SlotMode;
+    children?: ReactNode;
+    pluginFailurePlaceholder?: (failure: PluginErrorEvent) => ReactNode;
+} & TSlots[K];
+export type ReactBoundSlotProps<TSlots extends SlotMap, K extends keyof TSlots> = {
+    name: K;
+    mode?: SlotMode;
+    children?: ReactNode;
+} & TSlots[K];
+export type ReactRegistrySlotComponent<TSlots extends SlotMap, TContext extends PluginContext = PluginContext> = <K extends keyof TSlots>(props: ReactSlotProps<TSlots, K, TContext>) => ReactNode;
+export type ReactSlotComponent<TSlots extends SlotMap> = <K extends keyof TSlots>(props: ReactBoundSlotProps<TSlots, K>) => ReactNode;
+export interface ReactSlotOptions {
+    pluginFailurePlaceholder?: (failure: PluginErrorEvent) => ReactNode;
+}
+export declare function createReactSlotRegistry<TSlots extends SlotMap, TContext extends PluginContext = PluginContext>(renderer: CliRenderer, context: TContext, options?: SlotRegistryOptions): SlotRegistry<ReactNode, TSlots, TContext>;
+export declare function createSlot<TSlots extends SlotMap, TContext extends PluginContext = PluginContext>(registry: SlotRegistry<ReactNode, TSlots, TContext>, options?: ReactSlotOptions): ReactSlotComponent<TSlots>;
+export declare function Slot<TSlots extends SlotMap, TContext extends PluginContext = PluginContext, K extends keyof TSlots = keyof TSlots>(props: ReactSlotProps<TSlots, K, TContext>): ReactNode;

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

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

package/src/types/host.d.ts

@@ -1,5 +1,5 @@
 import type { BaseRenderable, RootRenderable, TextNodeRenderable } from "@opentui/core";
-import { baseComponents } from "../components";
+import { baseComponents } from "../components/index.js";
 export type Type = keyof typeof baseComponents;
 export type Props = Record<string, any>;
 export type Container = RootRenderable;

package/src/utils/id.d.ts

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

package/src/utils/index.d.ts

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

package/test-utils.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   createRoot
-} from "./chunk-6x3h6qt2.js";
+} from "./chunk-m242ttx8.js";
 import"./chunk-2mx7fq49.js";
 
 // src/test-utils.ts