@opentui/react 0.1.13 → 0.1.14

package/README.md

@@ -18,7 +18,7 @@ function App() {
     <box>
       <text fg="#00FF00">Hello, Terminal!</text>
       <box title="Welcome" padding={2}>
-        <text>Welcome to OpenTUI with React!"</text>
+        <text>Welcome to OpenTUI with React!</text>
       </box>
     </box>
   )
@@ -484,7 +484,7 @@ class ButtonRenderable extends BoxRenderable {
 
   set label(value: string) {
     this._label = value
-    this.needsUpdate()
+    this.requestRender()
   }
 }
 

package/index.js

@@ -34,14 +34,30 @@ var useAppContext = () => {
 };
 // 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", handler);
+    keyHandler?.on("keypress", stableHandler);
     return () => {
-      keyHandler?.off("keypress", handler);
+      keyHandler?.off("keypress", stableHandler);
     };
-  }, [keyHandler, handler]);
+  }, [keyHandler, stableHandler]);
 };
 // src/hooks/use-renderer.tsx
 var useRenderer = () => {
@@ -68,8 +84,8 @@ import { useState } from "react";
 var useTerminalDimensions = () => {
   const renderer = useRenderer();
   const [dimensions, setDimensions] = useState({
-    width: renderer.terminalWidth,
-    height: renderer.terminalHeight
+    width: renderer.width,
+    height: renderer.height
   });
   const cb = (width, height) => {
     setDimensions({ width, height });
@@ -287,7 +303,7 @@ var hostConfig = {
     return null;
   },
   resetAfterCommit(containerInfo) {
-    containerInfo.needsUpdate();
+    containerInfo.requestRender();
   },
   getRootHostContext(rootContainerInstance) {
     return {};
@@ -321,11 +337,11 @@ var hostConfig = {
   commitMount(instance, type, props, internalInstanceHandle) {},
   commitUpdate(instance, type, oldProps, newProps, internalInstanceHandle) {
     updateProperties(instance, type, oldProps, newProps);
-    instance.needsUpdate();
+    instance.requestRender();
   },
   commitTextUpdate(textInstance, oldText, newText) {
     textInstance.content = newText;
-    textInstance.needsUpdate();
+    textInstance.requestRender();
   },
   appendChildToContainer(container, child) {
     container.add(child);
@@ -335,19 +351,19 @@ var hostConfig = {
   },
   hideInstance(instance) {
     instance.visible = false;
-    instance.needsUpdate();
+    instance.requestRender();
   },
   unhideInstance(instance, props) {
     instance.visible = true;
-    instance.needsUpdate();
+    instance.requestRender();
   },
   hideTextInstance(textInstance) {
     textInstance.visible = false;
-    textInstance.needsUpdate();
+    textInstance.requestRender();
   },
   unhideTextInstance(textInstance, text) {
     textInstance.visible = true;
-    textInstance.needsUpdate();
+    textInstance.requestRender();
   },
   clearContainer(container) {
     const children = container.getChildren();

package/package.json

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

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/reconciler/renderer.js

@@ -238,7 +238,7 @@ var hostConfig = {
     return null;
   },
   resetAfterCommit(containerInfo) {
-    containerInfo.needsUpdate();
+    containerInfo.requestRender();
   },
   getRootHostContext(rootContainerInstance) {
     return {};
@@ -272,11 +272,11 @@ var hostConfig = {
   commitMount(instance, type, props, internalInstanceHandle) {},
   commitUpdate(instance, type, oldProps, newProps, internalInstanceHandle) {
     updateProperties(instance, type, oldProps, newProps);
-    instance.needsUpdate();
+    instance.requestRender();
   },
   commitTextUpdate(textInstance, oldText, newText) {
     textInstance.content = newText;
-    textInstance.needsUpdate();
+    textInstance.requestRender();
   },
   appendChildToContainer(container, child) {
     container.add(child);
@@ -286,19 +286,19 @@ var hostConfig = {
   },
   hideInstance(instance) {
     instance.visible = false;
-    instance.needsUpdate();
+    instance.requestRender();
   },
   unhideInstance(instance, props) {
     instance.visible = true;
-    instance.needsUpdate();
+    instance.requestRender();
   },
   hideTextInstance(textInstance) {
     textInstance.visible = false;
-    textInstance.needsUpdate();
+    textInstance.requestRender();
   },
   unhideTextInstance(textInstance, text) {
     textInstance.visible = true;
-    textInstance.needsUpdate();
+    textInstance.requestRender();
   },
   clearContainer(container) {
     const children = container.getChildren();