onejs-react 0.1.8 → 0.1.10

package/src/__tests__/setup.ts

@@ -13,13 +13,13 @@ 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>;
+        setParent: ReturnType<typeof vi.fn>;
+        removeParent: ReturnType<typeof vi.fn>;
     };
 }
 
@@ -33,13 +33,15 @@ beforeEach(() => {
     resetAllMocks();
 
     // Create fresh mock CS global
-    global.CS = createMockCS();
+    (globalThis as any).CS = createMockCS();
 
     // Mock event API with spies
     global.__eventAPI = {
         addEventListener: vi.fn(),
         removeEventListener: vi.fn(),
         removeAllEventListeners: vi.fn(),
+        setParent: vi.fn(),
+        removeParent: vi.fn(),
     };
 
     // Use real console but spy on it for test assertions

package/src/__tests__/style-parser.test.ts

@@ -303,10 +303,12 @@ describe("style-parser", () => {
             expect(parseStyleValue("flexShrink", 0)).toBe(0)
         })
 
-        it("passes through enum properties unchanged", () => {
-            expect(parseStyleValue("flexDirection", "row")).toBe("row")
-            expect(parseStyleValue("display", "none")).toBe("none")
-            expect(parseStyleValue("position", "absolute")).toBe("absolute")
+        it("converts enum properties to Unity enum values", () => {
+            const CS = (globalThis as any).CS
+            const UIE = CS.UnityEngine.UIElements
+            expect(parseStyleValue("flexDirection", "row")).toBe(UIE.FlexDirection.Row)
+            expect(parseStyleValue("display", "none")).toBe(UIE.DisplayStyle.None)
+            expect(parseStyleValue("position", "absolute")).toBe(UIE.Position.Absolute)
         })
 
         it("passes through unknown properties unchanged", () => {

package/src/hooks.ts

@@ -1,30 +1,69 @@
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef, useReducer } from "react"
+
+// QuickJS environment declarations
+declare function requestAnimationFrame(callback: (time: number) => void): number;
+declare function cancelAnimationFrame(id: number): void;
 
 /**
  * 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.
+ * Has two modes depending on whether a `select` function is provided:
+ *
+ * **Simple mode** (no selector): Compares values with `Object.is`. Best for primitives
+ * (numbers, strings, booleans) and cases where the getter returns a new object each time.
+ *
+ * **Selector mode**: Extracts an array of comparable values to watch. Re-renders only when
+ * any selected value changes. Essential for C# proxy objects where the proxy reference is
+ * cached — without a selector, you'd be comparing the same proxy to itself.
+ * The returned value is always read fresh from the getter during render.
  *
  * @param getter - Function that returns the current value (called every frame)
- * @param deps - Optional dependency array (if getter depends on changing references)
+ * @param selectOrDeps - Either a selector function or a dependency array
+ * @param deps - Optional dependency array (only when using a selector)
  * @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)
+ * // Simple: sync a C# property (primitives)
+ * const health = useFrameSync(() => player.Health)
+ * const score = useFrameSync(() => gameManager.Score)
+ *
+ * @example
+ * // Selector: watch specific properties on a C# proxy object
+ * const place = useFrameSync(
+ *     () => gameState.currentPlace,
+ *     (p) => [p?.Name, p?.NPCs?.Count, p?.Items?.Count]
+ * )
  *
  * @example
- * // With dependencies (if the object reference can change)
- * const health = useFrameSync(() => currentPlayer.health, [currentPlayer])
+ * // Selector: with a version stamp from C#
+ * const quest = useFrameSync(
+ *     () => questManager.activeQuest ?? null,
+ *     (q) => [q?.Version]
+ * )
  *
  * @example
- * // Derived values work too
- * const healthPercent = useFrameSync(() => player.health / player.maxHealth * 100)
+ * // Simple with dependencies (if the source reference can change)
+ * const health = useFrameSync(() => currentPlayer.Health, [currentPlayer])
  */
-export function useFrameSync<T>(getter: () => T, deps: readonly unknown[] = []): T {
-    // Safely get initial value
+export function useFrameSync<T>(
+    getter: () => T,
+    selectOrDeps?: ((value: T) => readonly unknown[]) | readonly unknown[],
+    deps?: readonly unknown[]
+): T {
+    // Determine which mode we're in
+    const hasSelector = typeof selectOrDeps === "function"
+    const select = hasSelector ? selectOrDeps as (value: T) => readonly unknown[] : undefined
+    const effectDeps = hasSelector ? (deps ?? []) : (selectOrDeps as readonly unknown[] ?? [])
+
+    if (select) {
+        return useFrameSyncSelect(getter, select, effectDeps)
+    } else {
+        return useFrameSyncSimple(getter, effectDeps)
+    }
+}
+
+/** Simple mode: compare with Object.is. */
+function useFrameSyncSimple<T>(getter: () => T, deps: readonly unknown[]): T {
     const getInitialValue = (): T => {
         try {
             return getter()
@@ -38,11 +77,9 @@ export function useFrameSync<T>(getter: () => T, deps: readonly unknown[] = []):
     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
@@ -81,20 +118,103 @@ export function useFrameSync<T>(getter: () => T, deps: readonly unknown[] = []):
     return value
 }
 
+/** Selector mode: extract comparable values, always return fresh from getter. */
+function useFrameSyncSelect<T>(
+    getter: () => T,
+    select: (value: T) => readonly unknown[],
+    deps: readonly unknown[]
+): T {
+    const [, forceRender] = useReducer((x: number) => x + 1, 0)
+    const getterRef = useRef(getter)
+    const selectRef = useRef(select)
+    const lastSelectedRef = useRef<readonly unknown[]>([])
+    const runningRef = useRef(false)
+    const initializedRef = useRef(false)
+
+    getterRef.current = getter
+    selectRef.current = select
+
+    // Initialize dependency tracking on first render
+    if (!initializedRef.current) {
+        initializedRef.current = true
+        try {
+            const val = getter()
+            lastSelectedRef.current = select(val)
+        } catch {
+            // Getter or select failed, keep empty deps
+        }
+    }
+
+    useEffect(() => {
+        try {
+            const val = getterRef.current()
+            lastSelectedRef.current = selectRef.current(val)
+        } catch {
+            // Getter or select failed
+        }
+
+        runningRef.current = true
+
+        const check = () => {
+            if (!runningRef.current) return
+
+            try {
+                const current = getterRef.current()
+                const selected = selectRef.current(current)
+                const prev = lastSelectedRef.current
+                const changed = selected.length !== prev.length ||
+                    selected.some((val, i) => !Object.is(val, prev[i]))
+
+                if (changed) {
+                    lastSelectedRef.current = selected
+                    forceRender()
+                }
+            } catch {
+                // Getter or select might fail if object was destroyed
+            }
+
+            if (runningRef.current) {
+                requestAnimationFrame(check)
+            }
+        }
+
+        requestAnimationFrame(check)
+
+        return () => {
+            runningRef.current = false
+        }
+    }, deps)
+
+    // Always read fresh from getter during render.
+    // This ensures we return the latest proxy with current C# state.
+    try {
+        return getterRef.current()
+    } catch {
+        return undefined as T
+    }
+}
+
 /**
- * Similar to useFrameSync but with a custom equality function.
- * Useful for objects/structs where reference equality isn't sufficient.
+ * @deprecated Use `useFrameSync` with a selector instead.
  *
- * @param getter - Function that returns the current value
- * @param isEqual - Custom equality function
- * @param deps - Optional dependency array
+ * `useFrameSyncWith` compares the value returned by the getter using a custom
+ * equality function. However, this does NOT work with C# proxy objects because
+ * the proxy reference is cached — you end up comparing the same object to itself.
  *
- * @example
- * // Sync a Vector3, comparing by value not reference
+ * Instead, use `useFrameSync` with a selector that extracts comparable values:
+ * ```ts
+ * // Before (broken with C# proxies):
  * const pos = useFrameSyncWith(
  *     () => transform.position,
  *     (a, b) => a.x === b.x && a.y === b.y && a.z === b.z
  * )
+ *
+ * // After (works correctly):
+ * const pos = useFrameSync(
+ *     () => transform.position,
+ *     (p) => [p.x, p.y, p.z]
+ * )
+ * ```
  */
 export function useFrameSyncWith<T>(
     getter: () => T,
@@ -214,3 +334,45 @@ export function useThrottledSync<T>(
 
     return value
 }
+
+/**
+ * Converts a C# collection (List<T>, array, etc.) to a JavaScript array.
+ *
+ * C# collections exposed through the OneJS proxy are not JS arrays — they
+ * lack .map(), .filter(), and other array methods. This utility converts
+ * them for use in React rendering.
+ *
+ * Supports objects with a `.Count` property (List<T>, IList) or a `.Length`
+ * property (C# arrays). Returns an empty array for null/undefined input.
+ *
+ * @param collection - A C# collection, or null/undefined
+ * @returns A JavaScript array containing the elements
+ *
+ * @example
+ * // Map over a C# List in JSX
+ * {toArray(inventory.Items).map(item => <ItemView key={item.Id} item={item} />)}
+ *
+ * @example
+ * // Convert a C# array
+ * const renderers = toArray(go.GetComponentsInChildren(CS.UnityEngine.Renderer))
+ *
+ * @example
+ * // Safe with null — returns []
+ * const npcs = toArray(currentPlace?.NPCs)
+ *
+ * @example
+ * // With explicit type parameter
+ * const items = toArray<Item>(questLog.ActiveQuests)
+ */
+export function toArray<T = unknown>(collection: unknown): T[] {
+    if (collection == null) return []
+    const col = collection as Record<string, unknown>
+    const len = typeof col.Count === "number" ? col.Count
+              : typeof col.Length === "number" ? col.Length
+              : 0
+    const result: T[] = []
+    for (let i = 0; i < len; i++) {
+        result.push((col as any)[i])
+    }
+    return result
+}

package/src/host-config.ts

@@ -56,7 +56,10 @@ declare const CS: {
             CollectionVirtualizationMethod: CSEnum;
             DisplayStyle: CSEnum;
             PickingMode: CSEnum;
+            SliderDirection: CSEnum;
         };
+        ScaleMode: CSEnum;
+        Rect: new (...args: any[]) => any;
     };
     OneJS: {
         GPU: {
@@ -578,9 +581,10 @@ function removeMergedTextChild(parentInstance: Instance, child: Instance) {
 
 // Apply common props (text, value, label)
 function applyCommonProps(element: CSObject, props: Record<string, unknown>) {
-    if (props.text !== undefined) (element as { text: string }).text = props.text as string;
-    if (props.value !== undefined) (element as { value: unknown }).value = props.value;
-    if (props.label !== undefined) (element as { label: string }).label = props.label as string;
+    const el = element as any;
+    if (props.text !== undefined) el.text = props.text as string;
+    if (props.value !== undefined) el.value = props.value;
+    if (props.label !== undefined) el.label = props.label as string;
 }
 
 // Helper to set enum prop if defined
@@ -599,106 +603,62 @@ function setValueProp<T>(target: T, key: keyof T, props: Record<string, unknown>
 
 // Apply TextField-specific properties
 function applyTextFieldProps(element: CSObject, props: Record<string, unknown>) {
-    // Map readOnly prop to isReadOnly property
-    if (props.readOnly !== undefined) {
-        (element as { isReadOnly: boolean }).isReadOnly = props.readOnly as boolean;
-    }
-    if (props.multiline !== undefined) {
-        (element as { multiline: boolean }).multiline = props.multiline as boolean;
-    }
-    if (props.maxLength !== undefined) {
-        (element as { maxLength: number }).maxLength = props.maxLength as number;
-    }
-    if (props.isPasswordField !== undefined) {
-        (element as { isPasswordField: boolean }).isPasswordField = props.isPasswordField as boolean;
-    }
-    if (props.maskChar !== undefined) {
-        (element as { maskChar: string }).maskChar = (props.maskChar as string).charAt(0);
-    }
-    if (props.isDelayed !== undefined) {
-        (element as { isDelayed: boolean }).isDelayed = props.isDelayed as boolean;
-    }
-    if (props.selectAllOnFocus !== undefined) {
-        (element as { selectAllOnFocus: boolean }).selectAllOnFocus = props.selectAllOnFocus as boolean;
-    }
-    if (props.selectAllOnMouseUp !== undefined) {
-        (element as { selectAllOnMouseUp: boolean }).selectAllOnMouseUp = props.selectAllOnMouseUp as boolean;
-    }
-    if (props.hideMobileInput !== undefined) {
-        (element as { hideMobileInput: boolean }).hideMobileInput = props.hideMobileInput as boolean;
-    }
-    if (props.autoCorrection !== undefined) {
-        (element as { autoCorrection: boolean }).autoCorrection = props.autoCorrection as boolean;
-    }
+    const el = element as any;
+    if (props.readOnly !== undefined) el.isReadOnly = props.readOnly;
+    if (props.multiline !== undefined) el.multiline = props.multiline;
+    if (props.maxLength !== undefined) el.maxLength = props.maxLength;
+    if (props.isPasswordField !== undefined) el.isPasswordField = props.isPasswordField;
+    if (props.maskChar !== undefined) el.maskChar = (props.maskChar as string).charAt(0);
+    if (props.isDelayed !== undefined) el.isDelayed = props.isDelayed;
+    if (props.selectAllOnFocus !== undefined) el.selectAllOnFocus = props.selectAllOnFocus;
+    if (props.selectAllOnMouseUp !== undefined) el.selectAllOnMouseUp = props.selectAllOnMouseUp;
+    if (props.hideMobileInput !== undefined) el.hideMobileInput = props.hideMobileInput;
+    if (props.autoCorrection !== undefined) el.autoCorrection = props.autoCorrection;
     // Note: placeholder is handled differently in Unity - it's set via the textEdition interface
     // For now we skip it as it requires more complex handling
 }
 
 // Apply Slider-specific properties
 function applySliderProps(element: CSObject, props: Record<string, unknown>) {
-    if (props.lowValue !== undefined) {
-        (element as { lowValue: number }).lowValue = props.lowValue as number;
-    }
-    if (props.highValue !== undefined) {
-        (element as { highValue: number }).highValue = props.highValue as number;
-    }
-    if (props.showInputField !== undefined) {
-        (element as { showInputField: boolean }).showInputField = props.showInputField as boolean;
-    }
-    if (props.inverted !== undefined) {
-        (element as { inverted: boolean }).inverted = props.inverted as boolean;
-    }
-    if (props.pageSize !== undefined) {
-        (element as { pageSize: number }).pageSize = props.pageSize as number;
-    }
-    if (props.fill !== undefined) {
-        (element as { fill: boolean }).fill = props.fill as boolean;
-    }
+    const el = element as any;
+    if (props.lowValue !== undefined) el.lowValue = props.lowValue;
+    if (props.highValue !== undefined) el.highValue = props.highValue;
+    if (props.showInputField !== undefined) el.showInputField = props.showInputField;
+    if (props.inverted !== undefined) el.inverted = props.inverted;
+    if (props.pageSize !== undefined) el.pageSize = props.pageSize;
+    if (props.fill !== undefined) el.fill = props.fill;
     if (props.direction !== undefined) {
-        const UIE = CS.UnityEngine.UIElements;
-        (element as { direction: unknown }).direction = UIE.SliderDirection[props.direction as string];
+        el.direction = CS.UnityEngine.UIElements.SliderDirection[props.direction as string];
     }
 }
 
 // Apply Toggle-specific properties
 function applyToggleProps(element: CSObject, props: Record<string, unknown>) {
-    if (props.text !== undefined) {
-        (element as { text: string }).text = props.text as string;
-    }
-    if (props.toggleOnLabelClick !== undefined) {
-        (element as { toggleOnLabelClick: boolean }).toggleOnLabelClick = props.toggleOnLabelClick as boolean;
-    }
+    const el = element as any;
+    if (props.text !== undefined) el.text = props.text;
+    if (props.toggleOnLabelClick !== undefined) el.toggleOnLabelClick = props.toggleOnLabelClick;
 }
 
 // Apply Image-specific properties
 function applyImageProps(element: CSObject, props: Record<string, unknown>) {
-    if (props.image !== undefined) {
-        (element as { image: unknown }).image = props.image;
-    }
-    if (props.sprite !== undefined) {
-        (element as { sprite: unknown }).sprite = props.sprite;
-    }
-    if (props.vectorImage !== undefined) {
-        (element as { vectorImage: unknown }).vectorImage = props.vectorImage;
-    }
+    const el = element as any;
+    if (props.image !== undefined) el.image = props.image;
+    if (props.sprite !== undefined) el.sprite = props.sprite;
+    if (props.vectorImage !== undefined) el.vectorImage = props.vectorImage;
     if (props.scaleMode !== undefined) {
-        const scaleMode = CS.UnityEngine.ScaleMode[props.scaleMode as string];
-        (element as { scaleMode: unknown }).scaleMode = scaleMode;
+        el.scaleMode = CS.UnityEngine.ScaleMode[props.scaleMode as string];
     }
     if (props.tintColor !== undefined) {
-        // Parse color string to Unity Color
         const color = parseColor(props.tintColor as string);
-        if (color) {
-            (element as { tintColor: unknown }).tintColor = color;
-        }
+        if (color) el.tintColor = color;
     }
     if (props.sourceRect !== undefined) {
         const rect = props.sourceRect as { x: number; y: number; width: number; height: number };
-        (element as { sourceRect: unknown }).sourceRect = new CS.UnityEngine.Rect(rect.x, rect.y, rect.width, rect.height);
+        el.sourceRect = new CS.UnityEngine.Rect(rect.x, rect.y, rect.width, rect.height);
     }
     if (props.uv !== undefined) {
         const rect = props.uv as { x: number; y: number; width: number; height: number };
-        (element as { uv: unknown }).uv = new CS.UnityEngine.Rect(rect.x, rect.y, rect.width, rect.height);
+        el.uv = new CS.UnityEngine.Rect(rect.x, rect.y, rect.width, rect.height);
     }
 }
 

package/src/index.ts

@@ -38,8 +38,8 @@ export type {
 // Vector Drawing
 export { Transform2D, useVectorContent } from './vector';
 
-// Sync Hooks (C# interop)
-export { useFrameSync, useFrameSyncWith, useThrottledSync } from './hooks';
+// Sync Hooks & C# Interop Utilities
+export { useFrameSync, useFrameSyncWith, useThrottledSync, toArray } from './hooks';
 
 // Types
 export type {