onejs-react 0.1.0 → 0.1.1

package/src/index.ts

@@ -1,6 +1,7 @@
 // Components
 export {
   View,
+  Text,
   Label,
   Button,
   TextField,
@@ -12,7 +13,11 @@ export {
 } from './components';
 
 // Renderer
-export { render, unmount } from './renderer';
+export { render, unmount, flushSync, batchedUpdates, getDebugInfo } from './renderer';
+
+// Error Handling
+export { ErrorBoundary, formatError } from './error-boundary';
+export type { ErrorBoundaryProps } from './error-boundary';
 
 // Responsive Design
 export {
@@ -33,15 +38,32 @@ export type {
 // Types
 export type {
   ViewStyle,
+  // Event data types
   PointerEventData,
+  MouseEventData,
+  WheelEventData,
   KeyEventData,
   ChangeEventData,
+  FocusEventData,
+  DragEventData,
+  GeometryEventData,
+  NavigationEventData,
+  TransitionEventData,
+  // Event handler types
   PointerEventHandler,
+  MouseEventHandler,
+  WheelEventHandler,
   KeyEventHandler,
   ChangeEventHandler,
   FocusEventHandler,
+  DragEventHandler,
+  GeometryEventHandler,
+  NavigationEventHandler,
+  TransitionEventHandler,
+  // Component props
   BaseProps,
   ViewProps,
+  TextProps,
   LabelProps,
   ButtonProps,
   TextFieldProps,
@@ -49,6 +71,17 @@ export type {
   SliderProps,
   ScrollViewProps,
   ImageProps,
-  VisualElement,
   ListViewProps,
+  // Container type for render()
+  RenderContainer,
+  // Element types for refs
+  VisualElement,
+  TextElement,
+  LabelElement,
+  ButtonElement,
+  TextFieldElement,
+  ToggleElement,
+  SliderElement,
+  ScrollViewElement,
+  ImageElement,
 } from './types';

package/src/renderer.ts

@@ -1,30 +1,30 @@
 import Reconciler from 'react-reconciler';
 import type { ReactNode } from 'react';
 import { hostConfig, type Container } from './host-config';
+import type { RenderContainer, VisualElement } from './types';
 
 declare const console: { log: (...args: unknown[]) => void; error: (...args: unknown[]) => void };
 
 // Create the reconciler
 const reconciler = Reconciler(hostConfig);
 
-// Inject into dev tools (helps with proper initialization)
+// Inject into dev tools with full configuration
+// This enables React DevTools to inspect the component tree
 reconciler.injectIntoDevTools({
-  bundleType: 1, // 0 for prod, 1 for dev
-  version: '19.0.0',
-  rendererPackageName: 'onejs-react',
+    bundleType: 1, // 0 for prod, 1 for dev
+    version: '19.0.0',
+    rendererPackageName: 'onejs-react',
 });
 
 // Track roots for hot reload / re-render
-const roots = new Map<Container, ReturnType<typeof reconciler.createContainer>>();
+const roots = new Map<RenderContainer, ReturnType<typeof reconciler.createContainer>>();
 
-export function render(element: ReactNode, container: Container): void {
-  console.log('[onejs-react] render() called');
+export function render(element: ReactNode, container: RenderContainer): void {
   let root = roots.get(container);
 
   if (!root) {
-    console.log('[onejs-react] creating new container');
     root = reconciler.createContainer(
-      container,
+      container as Container,
       0, // LegacyRoot (0) vs ConcurrentRoot (1)
       null, // hydrationCallbacks
       false, // isStrictMode
@@ -36,30 +36,21 @@ export function render(element: ReactNode, container: Container): void {
     roots.set(container, root);
   }
 
-  console.log('[onejs-react] calling updateContainer');
-  reconciler.updateContainer(element, root, null, () => {
-    console.log('[onejs-react] updateContainer callback fired');
-  });
+  reconciler.updateContainer(element, root, null, () => {});
 
   // Try to flush synchronous work
-  console.log('[onejs-react] attempting to flush sync work');
   try {
-    // flushSync may be exported differently - try flushSyncWork first
     if (typeof (reconciler as any).flushSyncWork === 'function') {
       (reconciler as any).flushSyncWork();
-      console.log('[onejs-react] flushSyncWork completed');
     } else if (typeof (reconciler as any).flushSync === 'function') {
       (reconciler as any).flushSync(() => {});
-      console.log('[onejs-react] flushSync completed');
-    } else {
-      console.log('[onejs-react] no sync flush method available, relying on microtasks');
     }
   } catch (e) {
-    console.log('[onejs-react] sync flush failed, relying on microtasks:', e);
+    // Sync flush failed, rely on microtasks
   }
 }
 
-export function unmount(container: Container): void {
+export function unmount(container: RenderContainer): void {
   const root = roots.get(container);
   if (root) {
     reconciler.updateContainer(null, root, null, () => {});
@@ -67,7 +58,43 @@ export function unmount(container: Container): void {
   }
 }
 
+/**
+ * Execute a callback synchronously, flushing all updates before returning.
+ * Useful for tests or when you need immediate UI updates.
+ */
+export function flushSync<T>(callback: () => T): T {
+    if (typeof (reconciler as any).flushSync === 'function') {
+        return (reconciler as any).flushSync(callback);
+    }
+    // Fallback: just call the callback
+    return callback();
+}
+
+/**
+ * Batch multiple updates together for better performance.
+ * All updates inside the callback are batched into a single render.
+ */
+export function batchedUpdates<T>(callback: () => T): T {
+    if (typeof (reconciler as any).batchedUpdates === 'function') {
+        return (reconciler as any).batchedUpdates(callback);
+    }
+    // Fallback: just call the callback
+    return callback();
+}
+
 // Export for testing/debugging
-export function getRoot(container: Container) {
-  return roots.get(container);
+export function getRoot(container: RenderContainer) {
+    return roots.get(container);
+}
+
+/**
+ * Get debug info about all active render roots.
+ * Useful for debugging and DevTools integration.
+ */
+export function getDebugInfo() {
+    return {
+        activeRoots: roots.size,
+        reconcilerVersion: '0.31.0',
+        reactVersion: '19.0.0',
+    };
 }

package/src/screen.tsx

@@ -7,7 +7,7 @@
  * Mobile-first: At 1400px width, sm/md/lg/xl are all active (not just xl).
  */
 
-import { createContext, useContext, useState, useEffect, ReactNode } from "react"
+import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
 
 // Globals from QuickJS environment
 declare const __root: {

package/src/style-parser.ts

@@ -130,13 +130,39 @@ export function parseLength(value: number | string): CSLength | number | null {
 }
 
 /**
- * Parse a hex color component (1 or 2 characters)
+ * Clamp a number to [0, 1] range
  */
-function parseHexComponent(hex: string): number {
-    if (hex.length === 1) {
-        hex = hex + hex  // Expand shorthand: "f" -> "ff"
+function clamp01(n: number): number {
+    return n < 0 ? 0 : n > 1 ? 1 : n
+}
+
+/**
+ * Create a Unity Color with clamped values
+ */
+function createColor(r: number, g: number, b: number, a: number): CSColor {
+    return new CS.UnityEngine.Color(clamp01(r), clamp01(g), clamp01(b), clamp01(a))
+}
+
+/**
+ * Parse hex color string into RGBA components
+ * Supports: #rgb, #rgba, #rrggbb, #rrggbbaa
+ */
+function parseHexColor(hex: string): CSColor | null {
+    const len = hex.length
+    const isShort = len === 3 || len === 4
+    const isLong = len === 6 || len === 8
+    if (!isShort && !isLong) return null
+
+    const step = isShort ? 1 : 2
+    const parse = (i: number): number => {
+        const slice = hex.slice(i * step, i * step + step)
+        const expanded = isShort ? slice + slice : slice
+        return parseInt(expanded, 16) / 255
     }
-    return parseInt(hex, 16) / 255
+
+    const r = parse(0), g = parse(1), b = parse(2)
+    const a = (len === 4 || len === 8) ? parse(3) : 1
+    return createColor(r, g, b, a)
 }
 
 /**
@@ -155,75 +181,21 @@ export function parseColor(value: string): CSColor | null {
         return new CS.UnityEngine.Color(r, g, b, a)
     }
 
-    // Hex colors: #rgb, #rgba, #rrggbb, #rrggbbaa
+    // Hex colors
     if (trimmed.startsWith("#")) {
-        const hex = trimmed.slice(1)
-
-        if (hex.length === 3) {
-            // #rgb
-            const r = parseHexComponent(hex[0])
-            const g = parseHexComponent(hex[1])
-            const b = parseHexComponent(hex[2])
-            return new CS.UnityEngine.Color(r, g, b, 1)
-        }
-
-        if (hex.length === 4) {
-            // #rgba
-            const r = parseHexComponent(hex[0])
-            const g = parseHexComponent(hex[1])
-            const b = parseHexComponent(hex[2])
-            const a = parseHexComponent(hex[3])
-            return new CS.UnityEngine.Color(r, g, b, a)
-        }
-
-        if (hex.length === 6) {
-            // #rrggbb
-            const r = parseHexComponent(hex.slice(0, 2))
-            const g = parseHexComponent(hex.slice(2, 4))
-            const b = parseHexComponent(hex.slice(4, 6))
-            return new CS.UnityEngine.Color(r, g, b, 1)
-        }
-
-        if (hex.length === 8) {
-            // #rrggbbaa
-            const r = parseHexComponent(hex.slice(0, 2))
-            const g = parseHexComponent(hex.slice(2, 4))
-            const b = parseHexComponent(hex.slice(4, 6))
-            const a = parseHexComponent(hex.slice(6, 8))
-            return new CS.UnityEngine.Color(r, g, b, a)
-        }
-
-        return null
+        return parseHexColor(trimmed.slice(1))
     }
 
-    // rgb(r, g, b) or rgba(r, g, b, a)
-    const rgbMatch = trimmed.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/)
+    // rgb(r, g, b) or rgba(r, g, b, a) - supports both integer and percentage values
+    const rgbMatch = trimmed.match(/^rgba?\s*\(\s*([\d.]+)(%?)\s*,\s*([\d.]+)(%?)\s*,\s*([\d.]+)(%?)\s*(?:,\s*([\d.]+))?\s*\)$/)
     if (rgbMatch) {
-        const r = parseInt(rgbMatch[1]) / 255
-        const g = parseInt(rgbMatch[2]) / 255
-        const b = parseInt(rgbMatch[3]) / 255
-        const a = rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1
-        return new CS.UnityEngine.Color(
-            Math.min(1, Math.max(0, r)),
-            Math.min(1, Math.max(0, g)),
-            Math.min(1, Math.max(0, b)),
-            Math.min(1, Math.max(0, a))
-        )
-    }
-
-    // rgb with percentages: rgb(100%, 0%, 0%)
-    const rgbPercentMatch = trimmed.match(/^rgba?\s*\(\s*([\d.]+)%\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+))?\s*\)$/)
-    if (rgbPercentMatch) {
-        const r = parseFloat(rgbPercentMatch[1]) / 100
-        const g = parseFloat(rgbPercentMatch[2]) / 100
-        const b = parseFloat(rgbPercentMatch[3]) / 100
-        const a = rgbPercentMatch[4] !== undefined ? parseFloat(rgbPercentMatch[4]) : 1
-        return new CS.UnityEngine.Color(
-            Math.min(1, Math.max(0, r)),
-            Math.min(1, Math.max(0, g)),
-            Math.min(1, Math.max(0, b)),
-            Math.min(1, Math.max(0, a))
-        )
+        const isPercent = rgbMatch[2] === "%"
+        const divisor = isPercent ? 100 : 255
+        const r = parseFloat(rgbMatch[1]) / divisor
+        const g = parseFloat(rgbMatch[3]) / divisor
+        const b = parseFloat(rgbMatch[5]) / divisor
+        const a = rgbMatch[7] !== undefined ? parseFloat(rgbMatch[7]) : 1
+        return createColor(r, g, b, a)
     }
 
     return null

package/src/types.ts

@@ -81,6 +81,15 @@ export interface ViewStyle {
   // Background
   /** Background color. Examples: "#3498db", "rgba(0,0,0,0.5)", "red" */
   backgroundColor?: StyleColor;
+  /**
+   * Background image - accepts a Texture2D, RenderTexture, or RenderTexture object from GPU compute.
+   *
+   * For GPU compute RenderTextures, you can pass the RenderTexture object directly:
+   * @example
+   * const rt = compute.renderTexture({ width: 100, height: 100 })
+   * <View style={{ backgroundImage: rt }} />
+   */
+  backgroundImage?: object | null;
 
   // Border
   /** Border color for all sides. Examples: "#ccc", "rgba(0,0,0,0.1)" */
@@ -127,6 +136,23 @@ export interface PointerEventData {
   y: number;
   button: number;
   pointerId: number;
+  modifiers?: number;
+}
+
+export interface MouseEventData {
+  type: string;
+  x: number;
+  y: number;
+  button: number;
+  modifiers?: number;
+}
+
+export interface WheelEventData {
+  type: string;
+  x: number;
+  y: number;
+  delta: { x: number; y: number };
+  modifiers?: number;
 }
 
 export interface KeyEventData {
@@ -145,10 +171,47 @@ export interface ChangeEventData<T = unknown> {
   value: T;
 }
 
+export interface FocusEventData {
+  type: string;
+  relatedTarget?: unknown;
+}
+
+export interface DragEventData {
+  type: string;
+  x: number;
+  y: number;
+  // Drag-specific properties
+  getData?: (type: string) => unknown;
+}
+
+export interface GeometryEventData {
+  type: string;
+  oldRect: { x: number; y: number; width: number; height: number };
+  newRect: { x: number; y: number; width: number; height: number };
+}
+
+export interface NavigationEventData {
+  type: string;
+  direction?: string;
+  modifiers?: number;
+}
+
+export interface TransitionEventData {
+  type: string;
+  styleProperty: string;
+  elapsedTime: number;
+}
+
 export type PointerEventHandler = (event: PointerEventData) => void;
+export type MouseEventHandler = (event: MouseEventData) => void;
+export type WheelEventHandler = (event: WheelEventData) => void;
 export type KeyEventHandler = (event: KeyEventData) => void;
 export type ChangeEventHandler<T = unknown> = (event: ChangeEventData<T>) => void;
-export type FocusEventHandler = () => void;
+export type FocusEventHandler = (event?: FocusEventData) => void;
+export type DragEventHandler = (event: DragEventData) => void;
+export type GeometryEventHandler = (event: GeometryEventData) => void;
+export type NavigationEventHandler = (event: NavigationEventData) => void;
+export type TransitionEventHandler = (event: TransitionEventData) => void;
 
 // Base props for all components
 export interface BaseProps {
@@ -157,26 +220,76 @@ export interface BaseProps {
   style?: ViewStyle;
   className?: string;
 
-  // Pointer events
+  // Click
   onClick?: PointerEventHandler;
+
+  // Pointer events
   onPointerDown?: PointerEventHandler;
   onPointerUp?: PointerEventHandler;
   onPointerMove?: PointerEventHandler;
   onPointerEnter?: PointerEventHandler;
   onPointerLeave?: PointerEventHandler;
+  onPointerCancel?: PointerEventHandler;
+  onPointerCapture?: PointerEventHandler;
+  onPointerCaptureOut?: PointerEventHandler;
+  onPointerStationary?: PointerEventHandler;
+
+  // Mouse events
+  onMouseDown?: MouseEventHandler;
+  onMouseUp?: MouseEventHandler;
+  onMouseMove?: MouseEventHandler;
+  onMouseEnter?: MouseEventHandler;
+  onMouseLeave?: MouseEventHandler;
+  onMouseOver?: MouseEventHandler;
+  onMouseOut?: MouseEventHandler;
+  onWheel?: WheelEventHandler;
+  onContextClick?: MouseEventHandler;
 
   // Focus events
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
+  onFocusIn?: FocusEventHandler;
+  onFocusOut?: FocusEventHandler;
 
   // Keyboard events
   onKeyDown?: KeyEventHandler;
   onKeyUp?: KeyEventHandler;
+
+  // Input events
+  onInput?: ChangeEventHandler;
+
+  // Drag events
+  onDragEnter?: DragEventHandler;
+  onDragLeave?: DragEventHandler;
+  onDragUpdated?: DragEventHandler;
+  onDragPerform?: DragEventHandler;
+  onDragExited?: DragEventHandler;
+
+  // Geometry events
+  onGeometryChanged?: GeometryEventHandler;
+
+  // Navigation events
+  onNavigationMove?: NavigationEventHandler;
+  onNavigationSubmit?: NavigationEventHandler;
+  onNavigationCancel?: NavigationEventHandler;
+
+  // Tooltip
+  onTooltip?: () => void;
+
+  // Transition events
+  onTransitionRun?: TransitionEventHandler;
+  onTransitionStart?: TransitionEventHandler;
+  onTransitionEnd?: TransitionEventHandler;
+  onTransitionCancel?: TransitionEventHandler;
 }
 
 // Component-specific props
 export interface ViewProps extends BaseProps {}
 
+export interface TextProps extends BaseProps {
+  text?: string;
+}
+
 export interface LabelProps extends BaseProps {
   text?: string;
 }
@@ -235,18 +348,96 @@ export interface ImageProps extends BaseProps {
   scaleMode?: 'stretch-to-fill' | 'scale-and-crop' | 'scale-to-fit';
 }
 
-// VisualElement type for ListView callbacks
-// This is the C# VisualElement exposed to JS
-export interface VisualElement {
+/**
+ * Minimal container type for render() function.
+ * Accepts any Unity VisualElement (CS.UnityEngine.UIElements.VisualElement)
+ * or the detailed VisualElement interface below.
+ */
+export interface RenderContainer {
   __csHandle: number;
   __csType: string;
+}
+
+// VisualElement - base type for all UI Toolkit elements
+// This is the C# VisualElement exposed to JS via refs
+// Note: This interface represents the JS-side view of Unity's VisualElement
+export interface VisualElement extends RenderContainer {
   style: Record<string, unknown>;
+  name: string;
+  visible: boolean;
+  enabledSelf: boolean;
+  enabledInHierarchy: boolean;
+
+  // Text content (for TextElement-derived types)
   text?: string;
+
+  // Label (for labeled controls like Toggle)
+  label?: string;
+
+  // Value (for input controls)
   value?: unknown;
+
+  // Hierarchy
   Add: (child: VisualElement) => void;
+  Insert: (index: number, child: VisualElement) => void;
   Remove: (child: VisualElement) => void;
+  RemoveAt: (index: number) => void;
+  Clear: () => void;
+  IndexOf: (child: VisualElement) => number;
+  childCount: number;
+  parent: VisualElement | null;
+
+  // Classes
   AddToClassList: (className: string) => void;
   RemoveFromClassList: (className: string) => void;
+  ClearClassList: () => void;
+  ClassListContains: (className: string) => boolean;
+
+  // Focus
+  Focus: () => void;
+  Blur: () => void;
+  focusable: boolean;
+
+  // Layout
+  MarkDirtyRepaint: () => void;
+}
+
+// Specific element types for better ref typing
+export interface TextElement extends VisualElement {
+  text: string;
+}
+
+export interface LabelElement extends TextElement {}
+
+export interface ButtonElement extends TextElement {}
+
+export interface TextFieldElement extends VisualElement {
+  value: string;
+  text: string;
+  isReadOnly: boolean;
+  isPasswordField: boolean;
+  maxLength: number;
+  SelectAll: () => void;
+}
+
+export interface ToggleElement extends VisualElement {
+  value: boolean;
+  text: string;
+}
+
+export interface SliderElement extends VisualElement {
+  value: number;
+  lowValue: number;
+  highValue: number;
+}
+
+export interface ScrollViewElement extends VisualElement {
+  scrollOffset: { x: number; y: number };
+  ScrollTo: (child: VisualElement) => void;
+}
+
+export interface ImageElement extends VisualElement {
+  // Image-specific properties handled via style.backgroundImage
 }
 
 // ListView uses Unity's virtualization callbacks directly