onejs-react 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.22",
+  "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

@@ -677,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
@@ -1046,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
     },