@opentui/react 0.1.10 → 0.1.12

package/README.md

@@ -1,6 +1,6 @@
 # @opentui/react
 
-A React renderer for building terminal user interfaces using OpenTUI core. Create rich, interactive console applications with familiar React patterns and components.
+A React renderer for building terminal user interfaces using [OpenTUI core](https://github.com/sst/opentui). Create rich, interactive console applications with familiar React patterns and components.
 
 ## Installation
 
@@ -148,7 +148,9 @@ function MyComponent() {
 
   return (
     <group>
-      <text>Terminal dimensions: {width}x{height}</text>
+      <text>
+        Terminal dimensions: {width}x{height}
+      </text>
       <box style={{ width: Math.floor(width / 2), height: Math.floor(height / 3) }}>
         <text>Half-width, third-height box</text>
       </box>

package/index.js

@@ -268,7 +268,7 @@ var hostConfig = {
     if (!components[type]) {
       throw new Error(`[Reconciler] Unknown component type: ${type}`);
     }
-    return new components[type](id, {});
+    return new components[type](rootContainerInstance.ctx, {});
   },
   appendChild(parent, child) {
     parent.add(child);
@@ -305,7 +305,8 @@ var hostConfig = {
   },
   createTextInstance(text, rootContainerInstance, hostContext) {
     const components = getComponentCatalogue();
-    return new components["text"](getNextId("text"), {
+    return new components["text"](rootContainerInstance.ctx, {
+      id: getNextId("text"),
       content: text
     });
   },

package/package.json

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

package/src/reconciler/renderer.js

@@ -219,7 +219,7 @@ var hostConfig = {
     if (!components[type]) {
       throw new Error(`[Reconciler] Unknown component type: ${type}`);
     }
-    return new components[type](id, {});
+    return new components[type](rootContainerInstance.ctx, {});
   },
   appendChild(parent, child) {
     parent.add(child);
@@ -256,7 +256,8 @@ var hostConfig = {
   },
   createTextInstance(text, rootContainerInstance, hostContext) {
     const components = getComponentCatalogue();
-    return new components["text"](getNextId("text"), {
+    return new components["text"](rootContainerInstance.ctx, {
+      id: getNextId("text"),
       content: text
     });
   },

package/src/types/components.d.ts

@@ -1,26 +1,26 @@
-import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, GroupRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, SelectOption, SelectRenderable, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextChunk, TextOptions, TextRenderable } from "@opentui/core";
+import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, GroupRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, RenderContext, 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 = "buffered" | "live" | "enableLayout" | "selectable";
+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 (id: string, options: any) => TRenderable;
+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 (id: string, options: infer TOptions) => any ? TOptions : never;
+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 (id: string, options: any) => infer TRenderable ? TRenderable : never;
+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" : 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" : 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 extends Renderable> = TOptions & {
+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 */