onejs-react 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "React 19 renderer for OneJS (Unity UI Toolkit)",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/hooks.ts

@@ -0,0 +1,216 @@
+import { useState, useEffect, useRef } from "react"
+
+/**
+ * Syncs a value from C# (or any external source) to React state, checking every frame.
+ *
+ * This hook eliminates the need for C# events or codegen - just read any property
+ * and React will automatically update when it changes.
+ *
+ * @param getter - Function that returns the current value (called every frame)
+ * @param deps - Optional dependency array (if getter depends on changing references)
+ * @returns The current value, updated each frame if changed
+ *
+ * @example
+ * // Sync a C# property to React
+ * const health = useFrameSync(() => player.health)
+ * const position = useFrameSync(() => transform.position)
+ *
+ * @example
+ * // With dependencies (if the object reference can change)
+ * const health = useFrameSync(() => currentPlayer.health, [currentPlayer])
+ *
+ * @example
+ * // Derived values work too
+ * const healthPercent = useFrameSync(() => player.health / player.maxHealth * 100)
+ */
+export function useFrameSync<T>(getter: () => T, deps: readonly unknown[] = []): T {
+    // Safely get initial value
+    const getInitialValue = (): T => {
+        try {
+            return getter()
+        } catch {
+            return undefined as T
+        }
+    }
+
+    const [value, setValue] = useState<T>(getInitialValue)
+    const lastValueRef = useRef<T>(value)
+    const getterRef = useRef(getter)
+    const runningRef = useRef(false)
+
+    // Keep getter ref updated
+    getterRef.current = getter
+
+    useEffect(() => {
+        // Re-initialize when deps change
+        try {
+            const initial = getterRef.current()
+            lastValueRef.current = initial
+            setValue(initial)
+        } catch {
+            // Getter failed, keep current value
+        }
+
+        runningRef.current = true
+
+        const check = () => {
+            if (!runningRef.current) return
+
+            try {
+                const current = getterRef.current()
+                if (!Object.is(current, lastValueRef.current)) {
+                    lastValueRef.current = current
+                    setValue(current)
+                }
+            } catch {
+                // Getter might fail if object was destroyed - that's ok
+            }
+
+            if (runningRef.current) {
+                requestAnimationFrame(check)
+            }
+        }
+
+        requestAnimationFrame(check)
+
+        return () => {
+            runningRef.current = false
+        }
+    }, deps)
+
+    return value
+}
+
+/**
+ * Similar to useFrameSync but with a custom equality function.
+ * Useful for objects/structs where reference equality isn't sufficient.
+ *
+ * @param getter - Function that returns the current value
+ * @param isEqual - Custom equality function
+ * @param deps - Optional dependency array
+ *
+ * @example
+ * // Sync a Vector3, comparing by value not reference
+ * const pos = useFrameSyncWith(
+ *     () => transform.position,
+ *     (a, b) => a.x === b.x && a.y === b.y && a.z === b.z
+ * )
+ */
+export function useFrameSyncWith<T>(
+    getter: () => T,
+    isEqual: (a: T, b: T) => boolean,
+    deps: readonly unknown[] = []
+): T {
+    const getInitialValue = (): T => {
+        try {
+            return getter()
+        } catch {
+            return undefined as T
+        }
+    }
+
+    const [value, setValue] = useState<T>(getInitialValue)
+    const lastValueRef = useRef<T>(value)
+    const getterRef = useRef(getter)
+    const isEqualRef = useRef(isEqual)
+    const runningRef = useRef(false)
+
+    getterRef.current = getter
+    isEqualRef.current = isEqual
+
+    useEffect(() => {
+        try {
+            const initial = getterRef.current()
+            lastValueRef.current = initial
+            setValue(initial)
+        } catch {
+            // Getter failed, keep current value
+        }
+
+        runningRef.current = true
+
+        const check = () => {
+            if (!runningRef.current) return
+
+            try {
+                const current = getterRef.current()
+                if (!isEqualRef.current(current, lastValueRef.current)) {
+                    lastValueRef.current = current
+                    setValue(current)
+                }
+            } catch {
+                // Getter might fail if object was destroyed
+            }
+
+            if (runningRef.current) {
+                requestAnimationFrame(check)
+            }
+        }
+
+        requestAnimationFrame(check)
+
+        return () => {
+            runningRef.current = false
+        }
+    }, deps)
+
+    return value
+}
+
+/**
+ * Throttled version of useFrameSync that only checks at a specified interval.
+ * Useful when you don't need per-frame updates and want to reduce overhead.
+ *
+ * @param getter - Function that returns the current value
+ * @param intervalMs - How often to check for changes (in milliseconds)
+ * @param deps - Optional dependency array
+ *
+ * @example
+ * // Check every 100ms instead of every frame
+ * const score = useThrottledSync(() => gameState.score, 100)
+ */
+export function useThrottledSync<T>(
+    getter: () => T,
+    intervalMs: number,
+    deps: readonly unknown[] = []
+): T {
+    const getInitialValue = (): T => {
+        try {
+            return getter()
+        } catch {
+            return undefined as T
+        }
+    }
+
+    const [value, setValue] = useState<T>(getInitialValue)
+    const lastValueRef = useRef<T>(value)
+    const getterRef = useRef(getter)
+
+    getterRef.current = getter
+
+    useEffect(() => {
+        try {
+            const initial = getterRef.current()
+            lastValueRef.current = initial
+            setValue(initial)
+        } catch {
+            // Getter failed, keep current value
+        }
+
+        const id = setInterval(() => {
+            try {
+                const current = getterRef.current()
+                if (!Object.is(current, lastValueRef.current)) {
+                    lastValueRef.current = current
+                    setValue(current)
+                }
+            } catch {
+                // Getter might fail if object was destroyed
+            }
+        }, intervalMs)
+
+        return () => clearInterval(id)
+    }, [...deps, intervalMs])
+
+    return value
+}

package/src/host-config.ts

@@ -3,7 +3,7 @@ import type {BaseProps, ViewStyle, VisualElement, GenerateVisualContentCallback}
 import {parseStyleValue, parseColor} from './style-parser';
 
 // CSObject is an alias for VisualElement - they represent the same C# objects
-type CSObject = VisualElement;
+type CSObject = VisualElement & { pickingMode?: number };
 
 // Global declarations for QuickJS environment
 declare function setTimeout(callback: () => void, ms?: number): number;
@@ -54,6 +54,7 @@ declare const CS: {
             AlternatingRowBackground: CSEnum;
             CollectionVirtualizationMethod: CSEnum;
             DisplayStyle: CSEnum;
+            PickingMode: CSEnum;
         };
     };
     OneJS: {
@@ -70,6 +71,8 @@ declare const __eventAPI: {
     addEventListener: (element: CSObject, eventType: string, callback: Function) => void;
     removeEventListener: (element: CSObject, eventType: string, callback: Function) => void;
     removeAllEventListeners: (element: CSObject) => void;
+    setParent: (childHandle: number, parentHandle: number) => void;
+    removeParent: (childHandle: number) => void;
 };
 
 interface CSStyle {
@@ -416,6 +419,22 @@ function updateClassNames(element: CSObject, oldClassName: string | undefined, n
     }
 }
 
+// Track parent-child relationships for event bubbling
+function trackParent(child: CSObject, parent: CSObject) {
+    const childHandle = (child as unknown as { __csHandle: number }).__csHandle;
+    const parentHandle = (parent as unknown as { __csHandle: number }).__csHandle;
+    if (childHandle > 0 && parentHandle > 0) {
+        __eventAPI.setParent(childHandle, parentHandle);
+    }
+}
+
+function untrackParent(child: CSObject) {
+    const childHandle = (child as unknown as { __csHandle: number }).__csHandle;
+    if (childHandle > 0) {
+        __eventAPI.removeParent(childHandle);
+    }
+}
+
 // Apply event handlers
 function applyEvents(instance: Instance, props: BaseProps) {
     for (const [propName, eventType] of Object.entries(EVENT_PROPS)) {
@@ -778,6 +797,11 @@ function createInstance(type: string, props: BaseProps): Instance {
     applyVisualContentCallback(instance, props);
     applyComponentProps(element, type, props as Record<string, unknown>);
 
+    // Apply pickingMode
+    if (props.pickingMode !== undefined) {
+        element.pickingMode = CS.UnityEngine.UIElements.PickingMode[props.pickingMode];
+    }
+
     return instance;
 }
 
@@ -806,6 +830,16 @@ function updateInstance(instance: Instance, oldProps: BaseProps, newProps: BaseP
     // Update component-specific props
     applyComponentProps(element, instance.type, newProps as Record<string, unknown>);
 
+    // Update pickingMode
+    if (oldProps.pickingMode !== newProps.pickingMode) {
+        if (newProps.pickingMode !== undefined) {
+            element.pickingMode = CS.UnityEngine.UIElements.PickingMode[newProps.pickingMode];
+        } else {
+            // Reset to default (Position)
+            element.pickingMode = CS.UnityEngine.UIElements.PickingMode.Position;
+        }
+    }
+
     instance.props = newProps;
 }
 
@@ -862,31 +896,31 @@ export const hostConfig = {
         if (shouldMergeText(parentInstance, child)) {
             appendMergedTextChild(parentInstance, child);
         } else {
-            // Non-text child - unmerge any previously merged text first
             handleNonTextChild(parentInstance);
             parentInstance.element.Add(child.element);
         }
+        trackParent(child.element, parentInstance.element);
     },
 
     appendChild(parentInstance: Instance, child: Instance) {
         if (shouldMergeText(parentInstance, child)) {
             appendMergedTextChild(parentInstance, child);
         } else {
-            // Non-text child - unmerge any previously merged text first
             handleNonTextChild(parentInstance);
             parentInstance.element.Add(child.element);
         }
+        trackParent(child.element, parentInstance.element);
     },
 
     appendChildToContainer(container: Container, child: Instance) {
         container.Add(child.element);
+        // Container is the root - no parent to track
     },
 
     insertBefore(parentInstance: Instance, child: Instance, beforeChild: Instance) {
         if (shouldMergeText(parentInstance, child)) {
             insertMergedTextChild(parentInstance, child, beforeChild);
         } else {
-            // Non-text child - unmerge any previously merged text first
             handleNonTextChild(parentInstance);
             const index = parentInstance.element.IndexOf(beforeChild.element);
             if (index >= 0) {
@@ -895,6 +929,7 @@ export const hostConfig = {
                 parentInstance.element.Add(child.element);
             }
         }
+        trackParent(child.element, parentInstance.element);
     },
 
     insertInContainerBefore(container: Container, child: Instance, beforeChild: Instance) {
@@ -904,21 +939,23 @@ export const hostConfig = {
         } else {
             container.Add(child.element);
         }
+        // Container is the root - no parent to track
     },
 
     removeChild(parentInstance: Instance, child: Instance) {
         if (child.mergedInto === parentInstance) {
-            // Child was merged into parent's text - remove from merged children
             removeMergedTextChild(parentInstance, child);
         } else {
             __eventAPI.removeAllEventListeners(child.element);
             parentInstance.element.Remove(child.element);
         }
+        untrackParent(child.element);
     },
 
     removeChildFromContainer(container: Container, child: Instance) {
         __eventAPI.removeAllEventListeners(child.element);
         container.Remove(child.element);
+        untrackParent(child.element);
     },
 
     prepareUpdate(_instance: Instance, _type: string, oldProps: BaseProps, newProps: BaseProps) {

package/src/index.ts

@@ -38,6 +38,9 @@ export type {
 // Vector Drawing
 export { Transform2D, useVectorContent } from './vector';
 
+// Sync Hooks (C# interop)
+export { useFrameSync, useFrameSyncWith, useThrottledSync } from './hooks';
+
 // Types
 export type {
   ViewStyle,

package/src/types.ts

@@ -331,6 +331,14 @@ export interface BaseProps {
   onTransitionEnd?: TransitionEventHandler;
   onTransitionCancel?: TransitionEventHandler;
 
+  // Picking mode - controls whether the element receives pointer events
+  /**
+   * Controls whether this element is pickable by pointer events.
+   * - "Position" (default): Element receives pointer events based on its rectangle
+   * - "Ignore": Element is transparent to pointer events (clicks pass through)
+   */
+  pickingMode?: 'Position' | 'Ignore';
+
   // Vector drawing
   /**
    * Callback for custom vector drawing via Unity's generateVisualContent.