onejs-react 0.1.21 → 0.1.23

package/package.json

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

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

@@ -644,6 +644,47 @@ describe('host-config', () => {
             expect(parentEl.children[2]).toBe(child3.element);
         });
 
+        it('insertBefore moving an existing child before a trailing sibling does not overshoot', () => {
+            // Reproduces the keyed-array-next-to-static-sibling reorder bug.
+            // React reorders [a, b, static] -> [b, a, static] by giving the reused
+            // child `a` a Placement and committing insertBefore(parent, a, static).
+            // Unity's Insert(i, child) removes the child *before* placing it at i, so a
+            // naive IndexOf(static) + Insert overshoots and lands `a` past `static`.
+            const parent = createInstance('ojs-view', {});
+            const a = createInstance('ojs-label', { text: 'a' });
+            const b = createInstance('ojs-label', { text: 'b' });
+            const staticSibling = createInstance('ojs-button', { text: 'STATIC' });
+
+            appendChild(parent, a);
+            appendChild(parent, b);
+            appendChild(parent, staticSibling);
+
+            // React moves `a` to sit right before the (unchanged) static sibling.
+            insertBefore(parent, a, staticSibling);
+
+            const parentEl = getMockElement(parent);
+            expect(parentEl.children.map((c) => c.text)).toEqual(['b', 'a', 'STATIC']);
+        });
+
+        it('insertBefore moving an existing child after another keeps order', () => {
+            // The mirror case: child currently sits *after* beforeChild. Removal does
+            // not shift beforeChild, so the index must not be decremented.
+            const parent = createInstance('ojs-view', {});
+            const a = createInstance('ojs-label', { text: 'a' });
+            const b = createInstance('ojs-label', { text: 'b' });
+            const c = createInstance('ojs-label', { text: 'c' });
+
+            appendChild(parent, a);
+            appendChild(parent, b);
+            appendChild(parent, c);
+
+            // Move `c` to sit right before `b`: [a, b, c] -> [a, c, b].
+            insertBefore(parent, c, b);
+
+            const parentEl = getMockElement(parent);
+            expect(parentEl.children.map((el) => el.text)).toEqual(['a', 'c', 'b']);
+        });
+
         it('removeChild removes child from parent', () => {
             const parent = createInstance('ojs-view', {});
             const child = createInstance('ojs-label', {});

package/src/__tests__/mocks.ts

@@ -338,6 +338,22 @@ export function createMockCS() {
                     ClearElementBackgroundImage: () => {},
                 },
             },
+            // Mirrors the real CS.OneJS.StyleBridge batched path: ApplyStyles writes
+            // each parsed style value onto element.style; AddClassesBatch adds each
+            // class. host-config sends pre-parsed values (MockLength/MockColor/etc.),
+            // so a direct assignment is faithful for assertions.
+            StyleBridge: {
+                ApplyStyles: (element: MockVisualElement, styles: Record<string, unknown>) => {
+                    for (const key in styles) {
+                        element.style[key] = styles[key];
+                    }
+                },
+                AddClassesBatch: (element: MockVisualElement, classes: string[]) => {
+                    for (const cls of classes) {
+                        element.AddToClassList(cls);
+                    }
+                },
+            },
         },
     };
 }

package/src/__tests__/renderer.test.tsx

@@ -383,5 +383,72 @@ describe('renderer', () => {
             expect(view.childCount).toBe(3);
             expect((view.children[2] as MockVisualElement).text).toBe('C');
         });
+
+        it('keeps a trailing static sibling last when a keyed list reorders', async () => {
+            // Regression: a keyed array followed by a static sibling, where reordering
+            // the array moves a reused child. React commits that move as
+            // insertBefore(view, movedChild, staticButton); the child must land before
+            // the button, not overshoot past it.
+            const container = createMockContainer();
+            let setOrder: (order: string[]) => void;
+
+            function Palette() {
+                const [order, _setOrder] = useState(['a', 'b']);
+                setOrder = _setOrder;
+                return (
+                    <ojs-view>
+                        {order.map((id) => (
+                            <ojs-label key={id} text={id} />
+                        ))}
+                        <ojs-button text="ADD" />
+                    </ojs-view>
+                );
+            }
+
+            render(<Palette />, container as any);
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(view.children.map((c) => c.text)).toEqual(['a', 'b', 'ADD']);
+
+            // Swap the two keyed children; the static ADD button must stay last.
+            setOrder!(['b', 'a']);
+            await flushMicrotasks();
+
+            expect(view.children.map((c) => c.text)).toEqual(['b', 'a', 'ADD']);
+        });
+
+        it('keeps a trailing static sibling last across remove-then-add reorders', async () => {
+            // Closer to the reported scenario: blocks are removed and added such that a
+            // surviving block reorders relative to its old position. The trailing
+            // button must remain the last child throughout.
+            const container = createMockContainer();
+            let setIds: (ids: string[]) => void;
+
+            function Palette() {
+                const [ids, _setIds] = useState(['x', 'y', 'z']);
+                setIds = _setIds;
+                return (
+                    <ojs-view>
+                        {ids.map((id) => (
+                            <ojs-label key={id} text={id} />
+                        ))}
+                        <ojs-button text="ADD" />
+                    </ojs-view>
+                );
+            }
+
+            render(<Palette />, container as any);
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(view.children.map((c) => c.text)).toEqual(['x', 'y', 'z', 'ADD']);
+
+            // Remove 'x' and reintroduce a block such that survivors reorder.
+            setIds!(['z', 'y', 'w']);
+            await flushMicrotasks();
+
+            expect(view.children.map((c) => c.text)).toEqual(['z', 'y', 'w', 'ADD']);
+        });
     });
 });

package/src/host-config.ts

@@ -71,6 +71,10 @@ declare const CS: {
             };
             FrostedGlassElement: new () => CSObject;
         };
+        StyleBridge: {
+            ApplyStyles: (element: CSObject, styles: Record<string, unknown>) => void;
+            AddClassesBatch: (element: CSObject, classes: string[]) => void;
+        };
     };
 };
 
@@ -385,47 +389,73 @@ function getRenderTextureHandle(value: RenderTextureRef): number {
     return value.__rtHandle ?? value.__handle ?? -1;
 }
 
-// Apply style properties to element, returns the set of applied keys
+// Apply style properties to element, returns the set of applied keys.
+//
+// Batched path: parsed style values are collected into a single dict and sent
+// to CS.OneJS.StyleBridge.ApplyStyles in one __cs.invoke crossing instead of
+// one per property. On WebGL each crossing is ~3ms (JSON marshal + reflection),
+// so the difference is ~N invokes vs 1 invoke per element. backgroundImage
+// stays on its individual GPU-bridge path since it's not a plain IStyle setter.
 function applyStyle(element: CSObject, style: ViewStyle | undefined): Set<string> {
     const appliedKeys = new Set<string>();
     if (!style) return appliedKeys;
 
-    const s = element.style;
+    const batched: Record<string, unknown> = {}
+
     for (const [key, value] of Object.entries(style)) {
         if (value === undefined) continue;
 
-        // Handle shorthand properties
         const expanded = STYLE_SHORTHANDS[key];
         if (expanded) {
-            // Parse the value once, apply to all expanded properties
-            const parsed = parseStyleValue(expanded[0], value);
+            const parsed = resolveForBatch(parseStyleValue(expanded[0], value));
             for (const prop of expanded) {
-                s[prop] = parsed;
+                batched[prop] = parsed;
                 appliedKeys.add(prop);
             }
         } else if (key === "backgroundImage") {
             if (value == null) {
                 CS.OneJS.GPU.GPUBridge.ClearElementBackgroundImage(element);
             } else if (isRenderTextureHandle(value)) {
-                // GPU compute RenderTexture handles (via rt.getUnityObject())
                 const handle = getRenderTextureHandle(value);
                 if (handle >= 0) {
                     CS.OneJS.GPU.GPUBridge.SetElementBackgroundImage(element, handle);
                 }
             } else if (typeof value === "object" && "__csHandle" in value) {
-                // C# objects: Texture2D, Sprite, VectorImage, RenderTexture
                 CS.OneJS.GPU.GPUBridge.SetElementBackgroundFromObject(element, value);
             }
             appliedKeys.add(key);
         } else {
-            // Parse and apply individual property
-            s[key] = parseStyleValue(key, value);
+            batched[key] = resolveForBatch(parseStyleValue(key, value));
             appliedKeys.add(key);
         }
     }
+
+    if (Object.keys(batched).length > 0) {
+        CS.OneJS.StyleBridge.ApplyStyles(element, batched);
+    }
+
     return appliedKeys;
 }
 
+// Force-resolve CS path proxies (e.g. CS.UnityEngine.UIElements.Justify.Center)
+// to their underlying int value. parseEnumValue and parseLength's StyleKeyword
+// cases return path proxies whose .valueOf() reads the int via GetField. The
+// non-batched __cs.invoke path resolved these implicitly via __resolveValue;
+// the batched path JSON.stringifies the whole dict, so path proxies serialize
+// via toJSON to {__csTypeRef:...} which C# can't interpret as an enum value.
+// CS object proxies (with __csHandle) keep their toJSON shape — only path
+// proxies need coercion.
+function resolveForBatch(value: unknown): unknown {
+    // Path proxies (e.g. CS.UnityEngine.UIElements.Justify.Center) have a
+    // function as their underlying Proxy target so they can also be invoked
+    // as constructors — so typeof is "function", not "object". Just check the
+    // __csPathProxy sentinel and rely on truthy/property semantics.
+    if (value && (value as any).__csPathProxy) {
+        return Number(value)
+    }
+    return value
+}
+
 // Clear style properties that are no longer in the new style
 function clearRemovedStyles(element: CSObject, oldKeys: Set<string>, newKeys: Set<string>) {
     const s = element.style;
@@ -458,13 +488,18 @@ function parseClassNames(className: string | undefined): Set<string> {
     return result;
 }
 
-// Apply className(s) to element (with escaping for Tailwind/USS compatibility)
+// Apply className(s) to element (with escaping for Tailwind/USS compatibility).
+// Routes through StyleBridge.AddClassesBatch so a multi-class string is one
+// __cs.invoke crossing instead of one per class.
 function applyClassName(element: CSObject, className: string | undefined) {
     if (!className) return;
 
-    const classes = className.split(/\s+/).filter(Boolean);
-    for (const cls of classes) {
-        element.AddToClassList(escapeClassName(cls));
+    const classes: string[] = [];
+    for (const cls of className.split(/\s+/)) {
+        if (cls) classes.push(escapeClassName(cls));
+    }
+    if (classes.length > 0) {
+        CS.OneJS.StyleBridge.AddClassesBatch(element, classes);
     }
 }
 
@@ -642,6 +677,32 @@ function removeMergedTextChild(parentInstance: Instance, child: Instance) {
     rebuildMergedText(parentInstance);
 }
 
+// Insert childEl immediately before beforeChildEl in parentEl's child list.
+//
+// Unity's VisualElement.Insert(i, child) calls child.RemoveFromHierarchy() *before*
+// placing it at index i. So when childEl is already a child of parentEl sitting
+// *before* beforeChildEl (a reorder/move, which is exactly what react-reconciler
+// commits via insertBefore for a reused keyed child), that internal removal shifts
+// beforeChildEl down one slot and childEl overshoots its target, landing one
+// position too late (e.g. past a static sibling kept last). Target one slot earlier
+// in precisely that case. Fresh inserts (childEl not yet in parentEl) and children
+// sitting after beforeChildEl are unaffected.
+//
+// IndexOf/Insert/Add all route through contentContainer identically, so the indices
+// and the insertion share one coordinate space (correct for ScrollView-style parents).
+function insertElementBefore(parentEl: CSObject, childEl: CSObject, beforeChildEl: CSObject) {
+    const beforeIndex = parentEl.IndexOf(beforeChildEl);
+    if (beforeIndex < 0) {
+        // beforeChild isn't actually in the parent (should not normally happen).
+        // Fall back to appending, preserving the previous fallback behavior.
+        parentEl.Add(childEl);
+        return;
+    }
+    const childIndex = parentEl.IndexOf(childEl);
+    const target = childIndex >= 0 && childIndex < beforeIndex ? beforeIndex - 1 : beforeIndex;
+    parentEl.Insert(target, childEl);
+}
+
 // MARK: Component-specific prop handlers
 
 // Apply common props (text, value, label) - skip unchanged values
@@ -1011,23 +1072,13 @@ export const hostConfig = {
             insertMergedTextChild(parentInstance, child, beforeChild);
         } else {
             handleNonTextChild(parentInstance);
-            const index = parentInstance.element.IndexOf(beforeChild.element);
-            if (index >= 0) {
-                parentInstance.element.Insert(index, child.element);
-            } else {
-                parentInstance.element.Add(child.element);
-            }
+            insertElementBefore(parentInstance.element, child.element, beforeChild.element);
         }
         trackParent(child.element, parentInstance.element);
     },
 
     insertInContainerBefore(container: Container, child: Instance, beforeChild: Instance) {
-        const index = container.IndexOf(beforeChild.element);
-        if (index >= 0) {
-            container.Insert(index, child.element);
-        } else {
-            container.Add(child.element);
-        }
+        insertElementBefore(container, child.element, beforeChild.element);
         // Container is the root - no parent to track
     },