onejs-react 0.1.9 → 0.1.10

package/package.json

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

package/src/__tests__/collection-sync.test.tsx

@@ -0,0 +1,436 @@
+/**
+ * End-to-end tests for collection state sync patterns.
+ *
+ * Simulates the real-world use case of syncing dynamic C# game state
+ * (inventories, quest logs, NPC lists) to React components using
+ * useFrameSync selector mode + toArray.
+ *
+ * Tests the parent/child pattern:
+ * - Parent watches list structure (Count) via selector
+ * - Child components each watch their own item properties via selector
+ * - When an item property changes, only that child re-renders
+ * - When items are added/removed, the parent re-renders
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import React from "react"
+import { useFrameSync, toArray } from "../hooks"
+import { render, unmount } from "../renderer"
+import { createMockContainer, flushMicrotasks } from "./mocks"
+
+// ---------------------------------------------------------------------------
+// RAF mock
+// ---------------------------------------------------------------------------
+
+type RafCallback = (time: number) => void
+
+let rafQueue: Array<{ id: number; callback: RafCallback }> = []
+let nextRafId = 0
+
+function flushRaf() {
+    const queue = [...rafQueue]
+    rafQueue = []
+    const now = Date.now()
+    for (const { callback } of queue) {
+        callback(now)
+    }
+}
+
+async function advanceFrame() {
+    flushRaf()
+    await flushMicrotasks()
+}
+
+beforeEach(() => {
+    rafQueue = []
+    nextRafId = 0
+    ;(globalThis as any).requestAnimationFrame = vi.fn((cb: RafCallback) => {
+        const id = ++nextRafId
+        rafQueue.push({ id, callback: cb })
+        return id
+    })
+    ;(globalThis as any).cancelAnimationFrame = vi.fn((id: number) => {
+        rafQueue = rafQueue.filter((e) => e.id !== id)
+    })
+})
+
+afterEach(() => {
+    delete (globalThis as any).requestAnimationFrame
+    delete (globalThis as any).cancelAnimationFrame
+})
+
+// ---------------------------------------------------------------------------
+// Mock C# proxy objects — simulates proxy caching behavior
+//
+// In real OneJS, accessing a C# object from JS always returns the same
+// proxy reference (cached by handle). Properties read through to C# on
+// each access, so mutations are visible through the same reference.
+// ---------------------------------------------------------------------------
+
+interface MockItem {
+    Id: number
+    Name: string
+    Durability: number
+    StackCount: number
+    Version: number
+}
+
+interface MockInventory {
+    Items: { Count: number; [index: number]: MockItem }
+}
+
+function createMockInventory(items: MockItem[]): MockInventory {
+    // Simulates a C# List<Item> — same proxy object, Count and indexer
+    // read live values (mutating the items array is visible immediately)
+    const proxy: any = {
+        get Count() { return items.length },
+    }
+    // Numeric indexer — proxy reads live from the array
+    return {
+        Items: new Proxy(proxy, {
+            get(target, prop) {
+                if (prop === "Count") return items.length
+                const idx = Number(prop)
+                if (!isNaN(idx) && idx >= 0 && idx < items.length) {
+                    return items[idx]
+                }
+                return target[prop]
+            }
+        })
+    }
+}
+
+function createMockItem(id: number, name: string, durability: number): MockItem {
+    return { Id: id, Name: name, Durability: durability, StackCount: 1, Version: 1 }
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("collection sync: parent/child pattern", () => {
+    let container: ReturnType<typeof createMockContainer>
+
+    beforeEach(() => {
+        container = createMockContainer()
+    })
+
+    afterEach(() => {
+        unmount(container as any)
+    })
+
+    it("parent re-renders when items are added, children render per item", async () => {
+        const items: MockItem[] = [
+            createMockItem(1, "Sword", 100),
+            createMockItem(2, "Shield", 80),
+        ]
+        const inventory = createMockInventory(items)
+
+        let parentRenders = 0
+        const childRenders: Record<number, number> = {}
+
+        function ItemView({ item }: { item: MockItem }) {
+            const data = useFrameSync(
+                () => item,
+                (i) => [i.Name, i.Durability, i.StackCount]
+            )
+            childRenders[data.Id] = (childRenders[data.Id] || 0) + 1
+            return null
+        }
+
+        function InventoryList() {
+            const inv = useFrameSync(
+                () => inventory,
+                (i) => [i.Items.Count]
+            )
+            parentRenders++
+            return (
+                <>
+                    {toArray<MockItem>(inv.Items).map(item => (
+                        <ItemView key={item.Id} item={item} />
+                    ))}
+                </>
+            )
+        }
+
+        render(<InventoryList />, container as any)
+        await flushMicrotasks()
+        await advanceFrame()
+
+        expect(parentRenders).toBeGreaterThanOrEqual(1)
+        expect(childRenders[1]).toBeGreaterThanOrEqual(1)
+        expect(childRenders[2]).toBeGreaterThanOrEqual(1)
+
+        const parentRendersAfterInit = parentRenders
+        const child1RendersAfterInit = childRenders[1]
+        const child2RendersAfterInit = childRenders[2]
+
+        // Add a new item
+        items.push(createMockItem(3, "Potion", 1))
+        await advanceFrame()
+
+        // Parent should re-render (Count changed from 2 to 3)
+        expect(parentRenders).toBeGreaterThan(parentRendersAfterInit)
+        // New child should have rendered
+        expect(childRenders[3]).toBeGreaterThanOrEqual(1)
+    })
+
+    it("only the affected child re-renders when an item property changes", async () => {
+        const items: MockItem[] = [
+            createMockItem(1, "Sword", 100),
+            createMockItem(2, "Shield", 80),
+            createMockItem(3, "Potion", 1),
+        ]
+        const inventory = createMockInventory(items)
+
+        let parentRenders = 0
+        const childRenders: Record<number, number> = {}
+
+        function ItemView({ item }: { item: MockItem }) {
+            const data = useFrameSync(
+                () => item,
+                (i) => [i.Name, i.Durability, i.StackCount]
+            )
+            childRenders[data.Id] = (childRenders[data.Id] || 0) + 1
+            return null
+        }
+
+        function InventoryList() {
+            const inv = useFrameSync(
+                () => inventory,
+                (i) => [i.Items.Count]
+            )
+            parentRenders++
+            return (
+                <>
+                    {toArray<MockItem>(inv.Items).map(item => (
+                        <ItemView key={item.Id} item={item} />
+                    ))}
+                </>
+            )
+        }
+
+        render(<InventoryList />, container as any)
+        await flushMicrotasks()
+        await advanceFrame()
+
+        const parentRendersAfterInit = parentRenders
+        const child1After = childRenders[1]
+        const child2After = childRenders[2]
+        const child3After = childRenders[3]
+
+        // Change only Sword's durability (simulates using the item)
+        items[0].Durability = 90
+        await advanceFrame()
+
+        // Parent should NOT re-render (Count unchanged)
+        expect(parentRenders).toBe(parentRendersAfterInit)
+        // Only Sword's child should re-render
+        expect(childRenders[1]).toBeGreaterThan(child1After)
+        // Shield and Potion should NOT re-render
+        expect(childRenders[2]).toBe(child2After)
+        expect(childRenders[3]).toBe(child3After)
+    })
+
+    it("version stamp on items catches any property change", async () => {
+        const items: MockItem[] = [
+            createMockItem(1, "Sword", 100),
+            createMockItem(2, "Shield", 80),
+        ]
+        const inventory = createMockInventory(items)
+
+        const childRenders: Record<number, number> = {}
+
+        function ItemView({ item }: { item: MockItem }) {
+            // Watch only Version — catches all changes without listing every property
+            const data = useFrameSync(
+                () => item,
+                (i) => [i.Version]
+            )
+            childRenders[data.Id] = (childRenders[data.Id] || 0) + 1
+            return null
+        }
+
+        function InventoryList() {
+            const inv = useFrameSync(
+                () => inventory,
+                (i) => [i.Items.Count]
+            )
+            return (
+                <>
+                    {toArray<MockItem>(inv.Items).map(item => (
+                        <ItemView key={item.Id} item={item} />
+                    ))}
+                </>
+            )
+        }
+
+        render(<InventoryList />, container as any)
+        await flushMicrotasks()
+        await advanceFrame()
+
+        const child1After = childRenders[1]
+        const child2After = childRenders[2]
+
+        // Change Sword's durability AND bump its version (simulates Fody)
+        items[0].Durability = 90
+        items[0].Version = 2
+        await advanceFrame()
+
+        // Sword re-renders (version changed)
+        expect(childRenders[1]).toBeGreaterThan(child1After)
+        // Shield does NOT re-render (version unchanged)
+        expect(childRenders[2]).toBe(child2After)
+    })
+
+    it("handles item removal correctly", async () => {
+        const items: MockItem[] = [
+            createMockItem(1, "Sword", 100),
+            createMockItem(2, "Shield", 80),
+            createMockItem(3, "Potion", 1),
+        ]
+        const inventory = createMockInventory(items)
+
+        let parentRenders = 0
+        const childRenders: Record<number, number> = {}
+
+        function ItemView({ item }: { item: MockItem }) {
+            const data = useFrameSync(
+                () => item,
+                (i) => [i.Name, i.Durability]
+            )
+            childRenders[data.Id] = (childRenders[data.Id] || 0) + 1
+            return null
+        }
+
+        function InventoryList() {
+            const inv = useFrameSync(
+                () => inventory,
+                (i) => [i.Items.Count]
+            )
+            parentRenders++
+            return (
+                <>
+                    {toArray<MockItem>(inv.Items).map(item => (
+                        <ItemView key={item.Id} item={item} />
+                    ))}
+                </>
+            )
+        }
+
+        render(<InventoryList />, container as any)
+        await flushMicrotasks()
+        await advanceFrame()
+
+        const parentRendersAfterInit = parentRenders
+        expect(childRenders[1]).toBeGreaterThanOrEqual(1)
+        expect(childRenders[2]).toBeGreaterThanOrEqual(1)
+        expect(childRenders[3]).toBeGreaterThanOrEqual(1)
+
+        // Remove Shield (index 1)
+        items.splice(1, 1)
+        await advanceFrame()
+
+        // Parent should re-render (Count changed from 3 to 2)
+        expect(parentRenders).toBeGreaterThan(parentRendersAfterInit)
+    })
+
+    it("nullable parent with optional chaining works end-to-end", async () => {
+        let currentPlace: { Name: string; NPCs: { Count: number; [i: number]: { Name: string; Dialogue: string } } } | null = {
+            Name: "Tavern",
+            NPCs: {
+                Count: 2,
+                0: { Name: "Barkeep", Dialogue: "Welcome!" },
+                1: { Name: "Bard", Dialogue: "La la la~" },
+            },
+        }
+
+        let parentRenders = 0
+        const npcRenders: Record<string, number> = {}
+
+        function NPCView({ npc }: { npc: { Name: string; Dialogue: string } }) {
+            const data = useFrameSync(
+                () => npc,
+                (n) => [n.Name, n.Dialogue]
+            )
+            npcRenders[data.Name] = (npcRenders[data.Name] || 0) + 1
+            return null
+        }
+
+        function PlaceUI() {
+            const place = useFrameSync(
+                () => currentPlace,
+                (p) => [p?.Name, p?.NPCs?.Count]
+            )
+            parentRenders++
+
+            if (!place) return null
+
+            return (
+                <>
+                    {toArray<{ Name: string; Dialogue: string }>(place.NPCs).map((npc, i) => (
+                        <NPCView key={npc.Name} npc={npc} />
+                    ))}
+                </>
+            )
+        }
+
+        render(<PlaceUI />, container as any)
+        await flushMicrotasks()
+        await advanceFrame()
+
+        expect(parentRenders).toBeGreaterThanOrEqual(1)
+        expect(npcRenders["Barkeep"]).toBeGreaterThanOrEqual(1)
+        expect(npcRenders["Bard"]).toBeGreaterThanOrEqual(1)
+
+        const parentAfterInit = parentRenders
+        const barkeepAfter = npcRenders["Barkeep"]
+
+        // Change Barkeep's dialogue (NPC property change)
+        currentPlace!.NPCs[0].Dialogue = "What'll ya have?"
+        await advanceFrame()
+
+        // Parent should NOT re-render (Name and NPC Count unchanged)
+        expect(parentRenders).toBe(parentAfterInit)
+        // Only Barkeep should re-render
+        expect(npcRenders["Barkeep"]).toBeGreaterThan(barkeepAfter)
+
+        const parentAfterDialogue = parentRenders
+
+        // Player leaves the tavern (set to null)
+        currentPlace = null
+        await advanceFrame()
+
+        // Parent should re-render (place changed to null)
+        expect(parentRenders).toBeGreaterThan(parentAfterDialogue)
+    })
+
+    it("multiple property changes in one frame only cause one re-render", async () => {
+        const item = createMockItem(1, "Sword", 100)
+
+        let renderCount = 0
+
+        function ItemView() {
+            const data = useFrameSync(
+                () => item,
+                (i) => [i.Name, i.Durability, i.StackCount, i.Version]
+            )
+            renderCount++
+            return null
+        }
+
+        render(<ItemView />, container as any)
+        await flushMicrotasks()
+        await advanceFrame()
+        const afterInit = renderCount
+
+        // Change multiple properties at once (between frames)
+        item.Name = "Broken Sword"
+        item.Durability = 0
+        item.Version = 2
+        await advanceFrame()
+
+        // Should only re-render once for all changes in the same frame
+        expect(renderCount).toBe(afterInit + 1)
+    })
+})

package/src/__tests__/components.test.tsx

@@ -58,7 +58,9 @@ describe('components', () => {
             const el = container.children[0] as MockVisualElement;
             expect(getStyleValue(el.style.width)).toBe(200);
             expect(getStyleValue(el.style.height)).toBe(100);
-            expect(el.style.flexDirection).toBe('row');
+            // flexDirection 'row' is converted to the Unity enum value FlexDirection.Row
+            const FlexDirection = (globalThis as any).CS.UnityEngine.UIElements.FlexDirection;
+            expect(el.style.flexDirection).toBe(FlexDirection.Row);
             expect(getStyleValue(el.style.paddingTop)).toBe(10);
         });
 

package/src/__tests__/host-config.test.ts

@@ -663,21 +663,23 @@ describe('host-config', () => {
     });
 
     describe('visibility', () => {
-        it('hideInstance sets display to none', () => {
+        it('hideInstance sets display to DisplayStyle.None', () => {
             const instance = createInstance('ojs-view', {});
 
             hideInstance(instance);
 
-            expect(instance.element.style.display).toBe('none');
+            const DisplayStyle = (globalThis as any).CS.UnityEngine.UIElements.DisplayStyle;
+            expect(instance.element.style.display).toBe(DisplayStyle.None);
         });
 
-        it('unhideInstance clears display', () => {
+        it('unhideInstance sets display to DisplayStyle.Flex', () => {
             const instance = createInstance('ojs-view', {});
-            instance.element.style.display = 'none';
+            const DisplayStyle = (globalThis as any).CS.UnityEngine.UIElements.DisplayStyle;
+            instance.element.style.display = DisplayStyle.None;
 
             unhideInstance(instance, {});
 
-            expect(instance.element.style.display).toBe('');
+            expect(instance.element.style.display).toBe(DisplayStyle.Flex);
         });
     });
 

package/src/__tests__/mocks.ts

@@ -225,12 +225,17 @@ export class MockImage extends MockVisualElement {
 
 /**
  * Create the mock CS global object that mirrors QuickJSBootstrap.js proxy
+ *
+ * Enum values match Unity's actual enum definitions so that tests
+ * verify the real mapping behavior (CSS string -> Unity enum number).
  */
 export function createMockCS() {
     return {
         UnityEngine: {
             // Core types
             Color: MockColor,
+            Rect: class { constructor(public x: number, public y: number, public width: number, public height: number) {} },
+            ScaleMode: { StretchToFill: 0, ScaleAndCrop: 1, ScaleToFit: 2 },
             // UI Elements
             UIElements: {
                 VisualElement: MockVisualElement,
@@ -246,6 +251,39 @@ export function createMockCS() {
                 Length: MockLength,
                 LengthUnit: MockLengthUnit,
                 StyleKeyword: MockStyleKeyword,
+                // Enums (values match Unity's actual enum definitions)
+                FlexDirection: { Column: 0, ColumnReverse: 1, Row: 2, RowReverse: 3 },
+                Wrap: { NoWrap: 0, Wrap: 1, WrapReverse: 2 },
+                Align: { Auto: 0, FlexStart: 1, Center: 2, FlexEnd: 3, Stretch: 4 },
+                Justify: { FlexStart: 0, Center: 1, FlexEnd: 2, SpaceBetween: 3, SpaceAround: 4 },
+                Position: { Relative: 0, Absolute: 1 },
+                Overflow: { Visible: 0, Hidden: 1 },
+                DisplayStyle: { Flex: 0, None: 1 },
+                Visibility: { Visible: 0, Hidden: 1 },
+                WhiteSpace: { Normal: 0, NoWrap: 1 },
+                TextOverflow: { Clip: 0, Ellipsis: 1 },
+                TextOverflowPosition: { End: 0, Start: 1, Middle: 2 },
+                OverflowClipBox: { PaddingBox: 0, ContentBox: 1 },
+                PickingMode: { Position: 0, Ignore: 1 },
+                SliderDirection: { Horizontal: 0, Vertical: 1 },
+                // ScrollView enums
+                ScrollViewMode: { Vertical: 0, Horizontal: 1, VerticalAndHorizontal: 2 },
+                ScrollerVisibility: { Auto: 0, AlwaysVisible: 1, Hidden: 2 },
+                TouchScrollBehavior: { Unrestricted: 0, Elastic: 1, Clamped: 2 },
+                NestedInteractionKind: { Default: 0, StopScrolling: 1, ForwardScrolling: 2 },
+                // ListView enums
+                SelectionType: { None: 0, Single: 1, Multiple: 2 },
+                ListViewReorderMode: { Simple: 0, Animated: 1 },
+                AlternatingRowBackground: { None: 0, ContentOnly: 1, All: 2 },
+                CollectionVirtualizationMethod: { FixedHeight: 0, DynamicHeight: 1 },
+            },
+        },
+        OneJS: {
+            GPU: {
+                GPUBridge: {
+                    SetElementBackgroundImage: () => {},
+                    ClearElementBackgroundImage: () => {},
+                },
             },
         },
     };
@@ -323,5 +361,7 @@ export function getEventAPI() {
         addEventListener: ReturnType<typeof import('vitest').vi.fn>;
         removeEventListener: ReturnType<typeof import('vitest').vi.fn>;
         removeAllEventListeners: ReturnType<typeof import('vitest').vi.fn>;
+        setParent: ReturnType<typeof import('vitest').vi.fn>;
+        removeParent: ReturnType<typeof import('vitest').vi.fn>;
     };
 }

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,5 +1,9 @@
 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.
  *

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);
     }
 }