@cascadetui/react 0.1.5 → 0.1.7

package/{chunk-emgt0q8h.js → chunk-c79msnsf.js}

@@ -96,6 +96,7 @@ var baseComponents = {
   textarea: TextareaRenderable,
   scrollbox: ScrollBoxRenderable,
   "ascii-font": ASCIIFontRenderable,
+  asciifont: ASCIIFontRenderable,
   "tab-select": TabSelectRenderable,
   "line-number": LineNumberRenderable,
   span: SpanRenderable,
@@ -128,6 +129,7 @@ var useAppContext = () => {
 // src/reconciler/renderer.ts
 import { CliRenderEvents, engine } from "@cascadetui/core";
 import React2 from "react";
+import { ConcurrentRoot as ConcurrentRoot2 } from "react-reconciler/constants";
 
 // src/components/error-boundary.tsx
 import React from "react";
@@ -144,13 +146,16 @@ class ErrorBoundary extends React.Component {
   static getDerivedStateFromError(error) {
     return { hasError: true, error };
   }
+  componentDidCatch(error, info) {
+    this.props.onCrash?.(error, info);
+  }
   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
+          content: this.state.error.stack || this.state.error.message
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this);
     }
@@ -163,11 +168,11 @@ import ReactReconciler from "react-reconciler";
 import { ConcurrentRoot } from "react-reconciler/constants";
 
 // src/reconciler/host-config.ts
-import { TextNodeRenderable as TextNodeRenderable2 } from "@cascadetui/core";
+import { ASCIIFont, TextNodeRenderable as TextNodeRenderable2, instantiate } from "@cascadetui/core";
 // package.json
 var package_default = {
   name: "@cascadetui/react",
-  version: "0.1.5",
+  version: "0.1.7",
   description: "React renderer for building terminal user interfaces using Cascade core",
   license: "MIT",
   repository: {
@@ -373,6 +378,9 @@ var hostConfig = {
       throw new Error(`Component of type "${type}" must be created inside of a text node`);
     }
     const id = getNextId(type);
+    if (type === "asciifont") {
+      return instantiate(rootContainerInstance.ctx, ASCIIFont({ id, ...props }));
+    }
     const components = getComponentCatalogue();
     if (!components[type]) {
       throw new Error(`Unknown component type: ${type}`);
@@ -493,12 +501,9 @@ var hostConfig = {
   },
   startSuspendingCommit() {},
   suspendInstance() {},
-  waitForCommitToBeReady() {
-    return null;
-  },
   detachDeletedInstance(instance) {
     if (!instance.parent) {
-      instance.destroyRecursively();
+      instance.destroy();
     }
   },
   getPublicInstance(instance) {
@@ -541,16 +546,10 @@ $ bun add react-devtools-core@7 -d
   }
 }
 reconciler.injectIntoDevTools();
-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
 var _r = reconciler;
 var flushSync = _r.flushSyncFromReconciler ?? _r.flushSync;
-var { createPortal } = reconciler;
 function createRoot(renderer) {
   let container = null;
   const cleanup = () => {
@@ -564,10 +563,20 @@ function createRoot(renderer) {
   return {
     render: (node) => {
       engine.attach(renderer);
-      container = _render(React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, null, node)), renderer.root);
+      const element = React2.createElement(AppContext.Provider, { value: { keyHandler: renderer.keyInput, renderer } }, React2.createElement(ErrorBoundary, {
+        onCrash: (error, info) => {
+          renderer.reportCrash(error, "react-error-boundary", {
+            componentStack: info.componentStack
+          });
+        }
+      }, node));
+      if (!container) {
+        container = reconciler.createContainer(renderer.root, ConcurrentRoot2, null, false, null, "", console.error, console.error, console.error, console.error, null);
+      }
+      reconciler.updateContainer(element, container, null, () => {});
     },
     unmount: cleanup
   };
 }
 
-export { baseComponents, componentCatalogue, extend, getComponentCatalogue, AppContext, useAppContext, flushSync, createPortal, createRoot };
+export { baseComponents, componentCatalogue, extend, getComponentCatalogue, AppContext, useAppContext, flushSync, createRoot };

package/index.js

@@ -3,13 +3,12 @@ import {
   AppContext,
   baseComponents,
   componentCatalogue,
-  createPortal,
   createRoot,
   extend,
   flushSync,
   getComponentCatalogue,
   useAppContext
-} from "./chunk-emgt0q8h.js";
+} from "./chunk-c79msnsf.js";
 import"./chunk-e11q5a3p.js";
 // src/hooks/use-keyboard.ts
 import { useEffect } from "react";
@@ -109,7 +108,6 @@ export {
   flushSync,
   extend,
   createRoot,
-  createPortal,
   createElement,
   componentCatalogue,
   baseComponents,

package/jsx-namespace.d.ts

@@ -46,9 +46,10 @@ export namespace JSX {
     input: InputProps
     textarea: TextareaProps
     select: SelectProps
-    scrollbox: ScrollBoxProps
-    "ascii-font": AsciiFontProps
-    "tab-select": TabSelectProps
+    scrollbox: ScrollBoxProps
+    "ascii-font": AsciiFontProps
+    asciifont: AsciiFontProps
+    "tab-select": TabSelectProps
     "line-number": LineNumberProps
     // Text modifiers
     b: SpanProps

package/package.json

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

package/src/components/error-boundary.d.ts

@@ -1,16 +1,19 @@
 import React from "react";
 export declare class ErrorBoundary extends React.Component<{
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    onCrash?: (error: Error, info: React.ErrorInfo) => void;
 }, {
     hasError: boolean;
     error: Error | null;
 }> {
     constructor(props: {
-        children: React.ReactNode;
+        children?: React.ReactNode;
+        onCrash?: (error: Error, info: React.ErrorInfo) => void;
     });
     static getDerivedStateFromError(error: Error): {
         hasError: boolean;
         error: Error;
     };
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
     render(): any;
 }

package/src/components/index.d.ts

@@ -12,6 +12,7 @@ export declare const baseComponents: {
     textarea: typeof TextareaRenderable;
     scrollbox: typeof ScrollBoxRenderable;
     "ascii-font": typeof ASCIIFontRenderable;
+    asciifont: typeof ASCIIFontRenderable;
     "tab-select": typeof TabSelectRenderable;
     "line-number": typeof LineNumberRenderable;
     span: typeof SpanRenderable;

package/src/components/text.d.ts

@@ -21,7 +21,7 @@ export declare class LineBreakRenderable extends SpanRenderable {
     constructor(_ctx: RenderContext | null, options: TextNodeOptions);
     add(): number;
 }
-export interface LinkOptions extends TextNodeOptions {
+interface LinkOptions extends TextNodeOptions {
     href: string;
 }
 export declare class LinkRenderable extends SpanRenderable {

package/src/reconciler/renderer.d.ts

@@ -4,7 +4,6 @@ declare const flushSync: {
     (): void;
     <R>(fn: () => R): R;
 };
-declare const createPortal: (children: ReactNode, containerInfo: any, implementation: any, key?: string | null) => import("react-reconciler").ReactPortal;
 export type Root = {
     render: (node: ReactNode) => void;
     unmount: () => void;
@@ -20,4 +19,4 @@ export type Root = {
  * ```
  */
 export declare function createRoot(renderer: CliRenderer): Root;
-export { createPortal, flushSync };
+export { flushSync };

package/src/types/components.d.ts

@@ -25,10 +25,21 @@ type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable
 } & ReactProps<TRenderable>;
 /** Valid text content types for Text component children */
 type TextChildren = string | number | boolean | null | undefined | React.ReactNode;
-export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
+type TextStyleFlags = {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    dim?: boolean;
+    blink?: boolean;
+    inverse?: boolean;
+    hidden?: boolean;
+    strikethrough?: boolean;
+};
+export type TextProps = ComponentProps<TextOptions, TextRenderable> & TextStyleFlags & {
     children?: TextChildren;
 };
-export type SpanProps = ComponentProps<TextNodeOptions, TextNodeRenderable> & {
+export type SpanProps = Omit<ComponentProps<TextNodeOptions, TextNodeRenderable>, "style"> & {
+    style?: Partial<Omit<TextNodeOptions, GetNonStyledProperties<RenderableConstructor<TextNodeRenderable>>>> & TextStyleFlags;
     children?: TextChildren;
 };
 export type LinkProps = SpanProps & {

package/test-utils.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   createRoot
-} from "./chunk-emgt0q8h.js";
+} from "./chunk-c79msnsf.js";
 import"./chunk-e11q5a3p.js";
 
 // src/test-utils.ts