onejs-react 0.1.0 → 0.1.2

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 {
@@ -30,18 +35,38 @@ export type {
   BreakpointName,
 } from './screen';
 
+// Vector Drawing
+export { Transform2D, useVectorContent } from './vector';
+
 // 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 +74,25 @@ 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,
+  // Vector drawing types
+  Vector2,
+  Color,
+  Angle,
+  ArcDirection,
+  Painter2D,
+  MeshGenerationContext,
+  GenerateVisualContentCallback,
 } 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

@@ -13,6 +13,17 @@ declare const CS: {
             Length: new (value: number, unit?: number) => CSLength;
             LengthUnit: { Pixel: number; Percent: number };
             StyleKeyword: { Auto: number; None: number; Initial: number };
+            // Enums for style properties
+            FlexDirection: Record<string, number>;
+            Wrap: Record<string, number>;
+            Align: Record<string, number>;
+            Justify: Record<string, number>;
+            Position: Record<string, number>;
+            Overflow: Record<string, number>;
+            DisplayStyle: Record<string, number>;
+            Visibility: Record<string, number>;
+            WhiteSpace: Record<string, number>;
+            TextAnchor: Record<string, number>;
         };
     };
 };
@@ -80,12 +91,119 @@ const NUMBER_PROPERTIES = new Set([
     "flexGrow", "flexShrink", "opacity",
 ])
 
-// Enum properties - these get passed through as-is (C# handles conversion)
-const ENUM_PROPERTIES = new Set([
-    "flexDirection", "flexWrap", "alignItems", "alignSelf", "alignContent", "justifyContent",
-    "position", "overflow", "display", "visibility", "whiteSpace",
-    "unityTextAlign", "fontStyle",
-])
+// Enum property mappings: React style value -> Unity enum value
+// Keys are camelCase (React/CSS style), values map to Unity enum member names
+const ENUM_MAPPINGS: Record<string, { enum: () => Record<string, number>, values: Record<string, string> }> = {
+    flexDirection: {
+        enum: () => CS.UnityEngine.UIElements.FlexDirection,
+        values: {
+            "row": "Row",
+            "row-reverse": "RowReverse",
+            "column": "Column",
+            "column-reverse": "ColumnReverse",
+        }
+    },
+    flexWrap: {
+        enum: () => CS.UnityEngine.UIElements.Wrap,
+        values: {
+            "nowrap": "NoWrap",
+            "wrap": "Wrap",
+            "wrap-reverse": "WrapReverse",
+        }
+    },
+    alignItems: {
+        enum: () => CS.UnityEngine.UIElements.Align,
+        values: {
+            "auto": "Auto",
+            "flex-start": "FlexStart",
+            "flex-end": "FlexEnd",
+            "center": "Center",
+            "stretch": "Stretch",
+        }
+    },
+    alignSelf: {
+        enum: () => CS.UnityEngine.UIElements.Align,
+        values: {
+            "auto": "Auto",
+            "flex-start": "FlexStart",
+            "flex-end": "FlexEnd",
+            "center": "Center",
+            "stretch": "Stretch",
+        }
+    },
+    alignContent: {
+        enum: () => CS.UnityEngine.UIElements.Align,
+        values: {
+            "auto": "Auto",
+            "flex-start": "FlexStart",
+            "flex-end": "FlexEnd",
+            "center": "Center",
+            "stretch": "Stretch",
+        }
+    },
+    justifyContent: {
+        enum: () => CS.UnityEngine.UIElements.Justify,
+        values: {
+            "flex-start": "FlexStart",
+            "flex-end": "FlexEnd",
+            "center": "Center",
+            "space-between": "SpaceBetween",
+            "space-around": "SpaceAround",
+        }
+    },
+    position: {
+        enum: () => CS.UnityEngine.UIElements.Position,
+        values: {
+            "relative": "Relative",
+            "absolute": "Absolute",
+        }
+    },
+    overflow: {
+        enum: () => CS.UnityEngine.UIElements.Overflow,
+        values: {
+            "visible": "Visible",
+            "hidden": "Hidden",
+        }
+    },
+    display: {
+        enum: () => CS.UnityEngine.UIElements.DisplayStyle,
+        values: {
+            "flex": "Flex",
+            "none": "None",
+        }
+    },
+    visibility: {
+        enum: () => CS.UnityEngine.UIElements.Visibility,
+        values: {
+            "visible": "Visible",
+            "hidden": "Hidden",
+        }
+    },
+    whiteSpace: {
+        enum: () => CS.UnityEngine.UIElements.WhiteSpace,
+        values: {
+            "normal": "Normal",
+            "nowrap": "NoWrap",
+        }
+    },
+}
+
+/**
+ * Parse an enum style value
+ * @param key - Style property name
+ * @param value - String value from React style (e.g., "row", "flex-start")
+ * @returns Unity enum value or null if not found
+ */
+function parseEnumValue(key: string, value: string): number | null {
+    const mapping = ENUM_MAPPINGS[key]
+    if (!mapping) return null
+
+    const unityEnumName = mapping.values[value]
+    if (!unityEnumName) return null
+
+    const enumType = mapping.enum()
+    return enumType[unityEnumName] ?? null
+}
 
 /**
  * Parse a length value from various formats
@@ -130,13 +248,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 +299,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
@@ -264,9 +354,11 @@ export function parseStyleValue(key: string, value: unknown): unknown {
         return value
     }
 
-    // Enum properties - pass through as-is (C# handles string -> enum)
-    if (ENUM_PROPERTIES.has(key)) {
-        return value
+    // Enum properties - convert string to Unity enum value
+    if (key in ENUM_MAPPINGS && typeof value === "string") {
+        const parsed = parseEnumValue(key, value)
+        if (parsed !== null) return parsed
+        // Fall through if parsing failed
     }
 
     // Unknown property - pass through unchanged