onejs-react 0.1.27 → 0.1.28

package/README.md

@@ -98,6 +98,12 @@ import { render, RenderContainer } from "onejs-react"
 render(<App />, __root)
 ```
 
+### Unmounting & hot-reload teardown
+
+`unmount(container)` tears a root down **synchronously** (`updateContainerSync` + `flushSyncWork` + `flushPassiveEffects`), so `useEffect`/`useLayoutEffect` cleanup functions fire immediately instead of on a later scheduler tick. `unmountAll()` does the same for every active root.
+
+The first `render()` call registers `unmountAll` as a runtime teardown hook (`globalThis.__onTeardown`). The OneJS runtime invokes it right before destroying the JS context on hot reload / stop, so component cleanups run while the context is still alive. Without this, cleanups would be skipped on hot reload and stale C# subscriptions (e.g. from `useEventSync`) would leak across reloads.
+
 ### Type Hierarchy
 
 ```

package/package.json

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

package/src/__tests__/mocks.ts

@@ -60,6 +60,7 @@ export class MockVisualElement {
 
     // Child management
     private _children: MockVisualElement[] = [];
+    private _parent: MockVisualElement | null = null;
 
     // Style object (simulates IStyle)
     style: Record<string, unknown> = {};
@@ -85,6 +86,7 @@ export class MockVisualElement {
     Add(child: MockVisualElement): void {
         if (child && !this._children.includes(child)) {
             this._children.push(child);
+            child._parent = this;
         }
     }
 
@@ -96,6 +98,7 @@ export class MockVisualElement {
                 this._children.splice(existingIndex, 1);
             }
             this._children.splice(index, 0, child);
+            child._parent = this;
         }
     }
 
@@ -103,20 +106,29 @@ export class MockVisualElement {
         const index = this._children.indexOf(child);
         if (index >= 0) {
             this._children.splice(index, 1);
+            child._parent = null;
         }
     }
 
     RemoveAt(index: number): void {
         if (index >= 0 && index < this._children.length) {
-            this._children.splice(index, 1);
+            const [child] = this._children.splice(index, 1);
+            if (child) child._parent = null;
         }
     }
 
+    // Mirrors UnityEngine.UIElements.VisualElement.RemoveFromHierarchy(): detach from
+    // the current parent, a no-op when already detached.
+    RemoveFromHierarchy(): void {
+        this._parent?.Remove(this);
+    }
+
     IndexOf(child: MockVisualElement): number {
         return this._children.indexOf(child);
     }
 
     Clear(): void {
+        for (const child of this._children) child._parent = null;
         this._children = [];
     }
 

package/src/__tests__/renderer.test.tsx

@@ -10,7 +10,7 @@
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import React, { useState, useEffect } from 'react';
-import { render, unmount, createPortal, getRoot } from '../renderer';
+import { render, unmount, unmountAll, createPortal, getRoot } from '../renderer';
 import { View, Label, Button } from '../components';
 import { MockVisualElement, MockLength, MockColor, createMockContainer, flushMicrotasks, getEventAPI } from './mocks';
 
@@ -402,6 +402,56 @@ describe('renderer', () => {
 
             expect(cleanupFn).toHaveBeenCalled();
         });
+
+        it('fires effect cleanup synchronously on unmount (no tick needed)', async () => {
+            // On hot-reload teardown the JS context is destroyed immediately after
+            // unmount, so cleanups must run synchronously rather than on a later tick.
+            const container = createMockContainer();
+            const cleanupFn = vi.fn();
+
+            function CleanupComponent() {
+                useEffect(() => cleanupFn, []);
+                return <ojs-view />;
+            }
+
+            render(<CleanupComponent />, container as any);
+            await flushMicrotasks();
+            expect(cleanupFn).not.toHaveBeenCalled();
+
+            unmount(container as any);
+            // No flushMicrotasks: cleanup must already have run.
+            expect(cleanupFn).toHaveBeenCalledTimes(1);
+            expect(getRoot(container as any)).toBeUndefined();
+        });
+
+        it('unmountAll tears down every root and fires cleanups (hot reload)', async () => {
+            // unmountAll is what the runtime teardown hook (__runTeardown) invokes
+            // before destroying the context on hot reload / stop.
+            const containerA = createMockContainer();
+            const containerB = createMockContainer();
+            const cleanupA = vi.fn();
+            const cleanupB = vi.fn();
+
+            function CompA() {
+                useEffect(() => cleanupA, []);
+                return <ojs-view />;
+            }
+            function CompB() {
+                useEffect(() => cleanupB, []);
+                return <ojs-view />;
+            }
+
+            render(<CompA />, containerA as any);
+            render(<CompB />, containerB as any);
+            await flushMicrotasks();
+
+            unmountAll();
+
+            expect(cleanupA).toHaveBeenCalledTimes(1);
+            expect(cleanupB).toHaveBeenCalledTimes(1);
+            expect(getRoot(containerA as any)).toBeUndefined();
+            expect(getRoot(containerB as any)).toBeUndefined();
+        });
     });
 
     describe('conditional rendering', () => {

package/src/host-config.ts

@@ -1132,14 +1132,20 @@ export const hostConfig = {
             removeMergedTextChild(parentInstance, child);
         } else {
             __eventAPI.removeAllEventListeners(child.element);
-            parentInstance.element.Remove(child.element);
+            // RemoveFromHierarchy() detaches the element from its current parent and
+            // is a safe no-op if it's already detached. Using it instead of
+            // parentInstance.element.Remove(child.element) keeps unmount from throwing
+            // when the root was cleared before React tore the tree down (hot reload).
+            child.element.RemoveFromHierarchy();
         }
         untrackParent(child.element);
     },
 
     removeChildFromContainer(container: Container, child: Instance) {
         __eventAPI.removeAllEventListeners(child.element);
-        container.Remove(child.element);
+        // See removeChild: tolerant of an already-detached element so a hot-reload
+        // teardown (which clears the root first) can still unmount cleanly.
+        child.element.RemoveFromHierarchy();
         untrackParent(child.element);
     },
 

package/src/index.ts

@@ -19,7 +19,7 @@ export {
 export { registerElement } from './host-config';
 
 // Renderer
-export { render, unmount, createPortal, flushSync, batchedUpdates, getDebugInfo } from './renderer';
+export { render, unmount, unmountAll, createPortal, flushSync, batchedUpdates, getDebugInfo } from './renderer';
 
 // Portals
 export { Portal } from './portal';

package/src/renderer.ts

@@ -19,7 +19,24 @@ reconciler.injectIntoDevTools({
 // Track roots for hot reload / re-render
 const roots = new Map<RenderContainer, ReturnType<typeof reconciler.createContainer>>();
 
+// Register unmountAll as a runtime teardown hook exactly once. The OneJS runtime
+// (QuickJSUIBridge.Dispose) invokes __runTeardown() right before destroying the JS
+// context on hot reload / stop. Unmounting here fires useEffect/useLayoutEffect
+// cleanups while the context is still alive; otherwise they never run and stale
+// C# subscriptions (e.g. from useEventSync) leak across reloads.
+let teardownHookRegistered = false;
+function ensureTeardownHook(): void {
+  if (teardownHookRegistered) return;
+  const g = globalThis as any;
+  if (typeof g !== 'undefined' && typeof g.__onTeardown === 'function') {
+    g.__onTeardown(unmountAll);
+    teardownHookRegistered = true;
+  }
+}
+
 export function render(element: ReactNode, container: RenderContainer): void {
+  ensureTeardownHook();
+
   let root = roots.get(container);
 
   if (!root) {
@@ -52,9 +69,33 @@ export function render(element: ReactNode, container: RenderContainer): void {
 
 export function unmount(container: RenderContainer): void {
   const root = roots.get(container);
-  if (root) {
+  if (!root) return;
+  roots.delete(container);
+
+  const r = reconciler as any;
+  // Tear the tree down synchronously. updateContainer(null, ...) only *schedules*
+  // the unmount, which never gets a scheduler tick during a hot-reload teardown
+  // (the context is destroyed immediately after). updateContainerSync + flushSyncWork
+  // runs the commit now, firing useLayoutEffect cleanups during it.
+  if (typeof r.updateContainerSync === 'function') {
+    r.updateContainerSync(null, root, null, null);
+    if (typeof r.flushSyncWork === 'function') r.flushSyncWork();
+  } else {
     reconciler.updateContainer(null, root, null, () => {});
-    roots.delete(container);
+  }
+  // useEffect (passive) cleanups are queued by the unmount commit, not run by it.
+  // Flush them now so they also fire before the context goes away.
+  if (typeof r.flushPassiveEffects === 'function') r.flushPassiveEffects();
+}
+
+/**
+ * Unmount every active root. Invoked by the OneJS runtime teardown hook before the
+ * JS context is destroyed (hot reload / stop) so component cleanups run.
+ */
+export function unmountAll(): void {
+  // Snapshot keys first: unmount() mutates the roots map.
+  for (const container of Array.from(roots.keys())) {
+    unmount(container);
   }
 }
 

package/src/types.ts

@@ -675,6 +675,7 @@ export interface VisualElement extends RenderContainer {
   Insert: (index: number, child: VisualElement) => void;
   Remove: (child: VisualElement) => void;
   RemoveAt: (index: number) => void;
+  RemoveFromHierarchy: () => void;
   Clear: () => void;
   IndexOf: (child: VisualElement) => number;
   childCount: number;