onejs-react 0.1.0 → 0.1.2

package/src/__tests__/mocks.ts

@@ -148,6 +148,15 @@ export class MockVisualElement {
     }
 }
 
+/**
+ * Mock TextElement - base text element for implicit text content
+ */
+export class MockTextElement extends MockVisualElement {
+    constructor() {
+        super('UnityEngine.UIElements.TextElement');
+    }
+}
+
 /**
  * Mock Label element
  */
@@ -225,6 +234,7 @@ export function createMockCS() {
             // UI Elements
             UIElements: {
                 VisualElement: MockVisualElement,
+                TextElement: MockTextElement,
                 Label: MockLabel,
                 Button: MockButton,
                 TextField: MockTextField,
@@ -279,7 +289,13 @@ export async function flushMicrotasks(): Promise<void> {
     for (let i = 0; i < 50; i++) {
         await Promise.resolve();
         // Also allow any setTimeout callbacks to run
-        await new Promise(resolve => setImmediate ? setImmediate(resolve) : setTimeout(resolve, 0));
+        await new Promise<void>(resolve => {
+            if (typeof setImmediate !== "undefined") {
+                setImmediate(resolve);
+            } else {
+                setTimeout(resolve, 0);
+            }
+        });
     }
 }
 

package/src/__tests__/setup.ts

@@ -8,23 +8,35 @@
  * - console: QuickJS built-in
  */
 
-import { vi } from 'vitest';
-import { createMockCS, resetAllMocks } from './mocks';
+import { vi, beforeEach, afterEach } from "vitest";
+import { createMockCS, resetAllMocks } from "./mocks";
+
+// Extend globalThis type for our mocks
+declare global {
+    // eslint-disable-next-line no-var
+    var CS: ReturnType<typeof createMockCS>;
+    // eslint-disable-next-line no-var
+    var __eventAPI: {
+        addEventListener: ReturnType<typeof vi.fn>;
+        removeEventListener: ReturnType<typeof vi.fn>;
+        removeAllEventListeners: ReturnType<typeof vi.fn>;
+    };
+}
 
 // Store original globals (Node.js provides these)
-const originalSetTimeout = globalThis.setTimeout;
-const originalClearTimeout = globalThis.clearTimeout;
-const originalQueueMicrotask = globalThis.queueMicrotask;
+const originalSetTimeout = global.setTimeout;
+const originalClearTimeout = global.clearTimeout;
+const originalQueueMicrotask = global.queueMicrotask;
 
 // Set up globals before each test
 beforeEach(() => {
     resetAllMocks();
 
     // Create fresh mock CS global
-    (globalThis as any).CS = createMockCS();
+    global.CS = createMockCS();
 
     // Mock event API with spies
-    (globalThis as any).__eventAPI = {
+    global.__eventAPI = {
         addEventListener: vi.fn(),
         removeEventListener: vi.fn(),
         removeAllEventListeners: vi.fn(),
@@ -32,18 +44,18 @@ beforeEach(() => {
 
     // Use real console but spy on it for test assertions
     // (React reconciler logs things we want to see during debugging)
-    (globalThis as any).console = {
+    (global as any).console = {
         log: vi.fn(),
         error: vi.fn(),
         warn: vi.fn(),
     };
 
     // Use real queueMicrotask - React scheduler depends on it
-    (globalThis as any).queueMicrotask = originalQueueMicrotask || ((cb: () => void) => Promise.resolve().then(cb));
+    (global as any).queueMicrotask = originalQueueMicrotask || ((cb: () => void) => Promise.resolve().then(cb));
 
     // Use real setTimeout/clearTimeout - React scheduler depends on them
-    (globalThis as any).setTimeout = originalSetTimeout;
-    (globalThis as any).clearTimeout = originalClearTimeout;
+    (global as any).setTimeout = originalSetTimeout;
+    (global as any).clearTimeout = originalClearTimeout;
 });
 
 // Clean up after each test

package/src/components.tsx

@@ -1,6 +1,7 @@
-import type { ReactElement } from 'react';
+import { forwardRef, type ReactElement, type Ref } from 'react';
 import type {
   ViewProps,
+  TextProps,
   LabelProps,
   ButtonProps,
   TextFieldProps,
@@ -8,24 +9,37 @@ import type {
   SliderProps,
   ScrollViewProps,
   ImageProps,
-  ListViewProps
+  ListViewProps,
+  VisualElement,
+  TextElement,
+  LabelElement,
+  ButtonElement,
+  TextFieldElement,
+  ToggleElement,
+  SliderElement,
+  ScrollViewElement,
+  ImageElement,
 } from './types';
 
+// Props with ref support for intrinsic elements
+type WithRef<Props, Element> = Props & { ref?: Ref<Element> };
+
 // Declare the intrinsic element types for JSX
 // Using 'ojs-' prefix to avoid conflicts with HTML/SVG element names in @types/react
 // For React 19 with jsx: "react-jsx", we need to augment 'react/jsx-runtime'
 declare module 'react/jsx-runtime' {
   namespace JSX {
     interface IntrinsicElements {
-      'ojs-view': ViewProps;
-      'ojs-label': LabelProps;
-      'ojs-button': ButtonProps;
-      'ojs-textfield': TextFieldProps;
-      'ojs-toggle': ToggleProps;
-      'ojs-slider': SliderProps;
-      'ojs-scrollview': ScrollViewProps;
-      'ojs-image': ImageProps;
-      'ojs-listview': ListViewProps;
+      'ojs-view': WithRef<ViewProps, VisualElement>;
+      'ojs-text': WithRef<TextProps, TextElement>;
+      'ojs-label': WithRef<LabelProps, LabelElement>;
+      'ojs-button': WithRef<ButtonProps, ButtonElement>;
+      'ojs-textfield': WithRef<TextFieldProps, TextFieldElement>;
+      'ojs-toggle': WithRef<ToggleProps, ToggleElement>;
+      'ojs-slider': WithRef<SliderProps, SliderElement>;
+      'ojs-scrollview': WithRef<ScrollViewProps, ScrollViewElement>;
+      'ojs-image': WithRef<ImageProps, ImageElement>;
+      'ojs-listview': WithRef<ListViewProps, VisualElement>;
     }
   }
 }
@@ -34,54 +48,69 @@ declare module 'react/jsx-runtime' {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'ojs-view': ViewProps;
-      'ojs-label': LabelProps;
-      'ojs-button': ButtonProps;
-      'ojs-textfield': TextFieldProps;
-      'ojs-toggle': ToggleProps;
-      'ojs-slider': SliderProps;
-      'ojs-scrollview': ScrollViewProps;
-      'ojs-image': ImageProps;
-      'ojs-listview': ListViewProps;
+      'ojs-view': WithRef<ViewProps, VisualElement>;
+      'ojs-text': WithRef<TextProps, TextElement>;
+      'ojs-label': WithRef<LabelProps, LabelElement>;
+      'ojs-button': WithRef<ButtonProps, ButtonElement>;
+      'ojs-textfield': WithRef<TextFieldProps, TextFieldElement>;
+      'ojs-toggle': WithRef<ToggleProps, ToggleElement>;
+      'ojs-slider': WithRef<SliderProps, SliderElement>;
+      'ojs-scrollview': WithRef<ScrollViewProps, ScrollViewElement>;
+      'ojs-image': WithRef<ImageProps, ImageElement>;
+      'ojs-listview': WithRef<ListViewProps, VisualElement>;
     }
   }
 }
 
 // Component wrappers that provide nice capitalized names
-// These return JSX elements with 'ojs-' prefixed type strings
+// These use forwardRef to pass refs through to the intrinsic elements
 
-export function View(props: ViewProps): ReactElement {
-  return <ojs-view {...props} />;
-}
+export const View = forwardRef<VisualElement, ViewProps>((props, ref) => {
+  return <ojs-view ref={ref} {...props} />;
+});
+View.displayName = 'View';
 
-export function Label(props: LabelProps): ReactElement {
-  return <ojs-label {...props} />;
-}
+export const Text = forwardRef<TextElement, TextProps>((props, ref) => {
+  return <ojs-text ref={ref} {...props} />;
+});
+Text.displayName = 'Text';
 
-export function Button(props: ButtonProps): ReactElement {
-  return <ojs-button {...props} />;
-}
+export const Label = forwardRef<LabelElement, LabelProps>((props, ref) => {
+  return <ojs-label ref={ref} {...props} />;
+});
+Label.displayName = 'Label';
 
-export function TextField(props: TextFieldProps): ReactElement {
-  return <ojs-textfield {...props} />;
-}
+export const Button = forwardRef<ButtonElement, ButtonProps>((props, ref) => {
+  return <ojs-button ref={ref} {...props} />;
+});
+Button.displayName = 'Button';
 
-export function Toggle(props: ToggleProps): ReactElement {
-  return <ojs-toggle {...props} />;
-}
+export const TextField = forwardRef<TextFieldElement, TextFieldProps>((props, ref) => {
+  return <ojs-textfield ref={ref} {...props} />;
+});
+TextField.displayName = 'TextField';
 
-export function Slider(props: SliderProps): ReactElement {
-  return <ojs-slider {...props} />;
-}
+export const Toggle = forwardRef<ToggleElement, ToggleProps>((props, ref) => {
+  return <ojs-toggle ref={ref} {...props} />;
+});
+Toggle.displayName = 'Toggle';
 
-export function ScrollView(props: ScrollViewProps): ReactElement {
-  return <ojs-scrollview {...props} />;
-}
+export const Slider = forwardRef<SliderElement, SliderProps>((props, ref) => {
+  return <ojs-slider ref={ref} {...props} />;
+});
+Slider.displayName = 'Slider';
 
-export function Image(props: ImageProps): ReactElement {
-  return <ojs-image {...props} />;
-}
+export const ScrollView = forwardRef<ScrollViewElement, ScrollViewProps>((props, ref) => {
+  return <ojs-scrollview ref={ref} {...props} />;
+});
+ScrollView.displayName = 'ScrollView';
 
-export function ListView(props: ListViewProps): ReactElement {
-  return <ojs-listview {...props} />;
-}
+export const Image = forwardRef<ImageElement, ImageProps>((props, ref) => {
+  return <ojs-image ref={ref} {...props} />;
+});
+Image.displayName = 'Image';
+
+export const ListView = forwardRef<VisualElement, ListViewProps>((props, ref) => {
+  return <ojs-listview ref={ref} {...props} />;
+});
+ListView.displayName = 'ListView';

package/src/error-boundary.tsx

@@ -0,0 +1,175 @@
+import { Component, type ReactNode, type ErrorInfo } from "react"
+import { View, Label } from "./components"
+
+declare const console: { log: (...args: unknown[]) => void; error: (...args: unknown[]) => void }
+
+export interface ErrorBoundaryProps {
+    children: ReactNode
+    /**
+     * Optional fallback to render when an error occurs.
+     * Can be a ReactNode or a function that receives error details.
+     */
+    fallback?: ReactNode | ((error: Error, errorInfo: ErrorInfo) => ReactNode)
+    /**
+     * Optional callback when an error is caught.
+     * Use this for logging or error reporting.
+     */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void
+    /**
+     * Optional callback when the boundary resets.
+     */
+    onReset?: () => void
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean
+    error: Error | null
+    errorInfo: ErrorInfo | null
+}
+
+/**
+ * Error boundary component for catching and displaying React errors.
+ *
+ * @example Basic usage with default fallback
+ * ```tsx
+ * <ErrorBoundary>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @example Custom fallback UI
+ * ```tsx
+ * <ErrorBoundary fallback={<Label>Something went wrong</Label>}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @example Fallback function with error details
+ * ```tsx
+ * <ErrorBoundary
+ *   fallback={(error, info) => (
+ *     <View>
+ *       <Label>Error: {error.message}</Label>
+ *       <Label>Stack: {info.componentStack}</Label>
+ *     </View>
+ *   )}
+ * >
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @example Error logging
+ * ```tsx
+ * <ErrorBoundary onError={(error, info) => logError(error, info)}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props)
+        this.state = {
+            hasError: false,
+            error: null,
+            errorInfo: null,
+        }
+    }
+
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+        return { hasError: true, error }
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+        this.setState({ errorInfo })
+
+        // Log to console with helpful formatting
+        console.error("[OneJS React] Error caught by ErrorBoundary:")
+        console.error("  Error:", error.message)
+        if (error.stack) {
+            console.error("  Stack:", error.stack)
+        }
+        if (errorInfo.componentStack) {
+            console.error("  Component Stack:", errorInfo.componentStack)
+        }
+
+        // Call user-provided error handler
+        this.props.onError?.(error, errorInfo)
+    }
+
+    /**
+     * Reset the error boundary to try rendering children again.
+     * Useful after the underlying issue has been fixed.
+     */
+    reset = (): void => {
+        this.setState({
+            hasError: false,
+            error: null,
+            errorInfo: null,
+        })
+        this.props.onReset?.()
+    }
+
+    render(): ReactNode {
+        if (this.state.hasError) {
+            const { fallback } = this.props
+            const { error, errorInfo } = this.state
+
+            // Render custom fallback if provided
+            if (fallback !== undefined) {
+                if (typeof fallback === "function") {
+                    return fallback(error!, errorInfo!)
+                }
+                return fallback
+            }
+
+            // Default fallback UI
+            return (
+                <View style={{
+                    padding: 16,
+                    backgroundColor: "#2d1b1b",
+                    borderColor: "#ff4444",
+                    borderWidth: 2,
+                }}>
+                    <Label style={{
+                        color: "#ff6666",
+                        fontSize: 16,
+                        marginBottom: 8,
+                    }}>
+                        Something went wrong
+                    </Label>
+                    <Label style={{
+                        color: "#ffaaaa",
+                        fontSize: 12,
+                    }}>
+                        {error?.message || "Unknown error"}
+                    </Label>
+                </View>
+            )
+        }
+
+        return this.props.children
+    }
+}
+
+/**
+ * Helper hook-style error info for functional components.
+ * Note: This is a simple utility. For actual error catching,
+ * you must use the ErrorBoundary class component.
+ */
+export function formatError(error: Error, componentStack?: string): string {
+    const parts = [`Error: ${error.message}`]
+
+    if (error.stack) {
+        // Get first few lines of stack
+        const stackLines = error.stack.split("\n").slice(0, 5)
+        parts.push(`Stack:\n${stackLines.join("\n")}`)
+    }
+
+    if (componentStack) {
+        // Get first few lines of component stack
+        const compLines = componentStack.split("\n").slice(0, 5)
+        parts.push(`Component:\n${compLines.join("\n")}`)
+    }
+
+    return parts.join("\n\n")
+}