@mittwald/react-tunnel 1.5.45 → 1.5.46

package/dist/index.js

@@ -10,6 +10,11 @@ var m = "default", h = "default", g = class e {
 	committedChildren = d.map({}, { deep: !1 });
 	renderPhaseChildren = /* @__PURE__ */ new Map();
 	nextIndex = 0;
+	indexGeneration = 0;
+	orderGeneration = 0;
+	orderListeners = /* @__PURE__ */ new Set();
+	committedIndices = /* @__PURE__ */ new Map();
+	isCommittedIndicesResetScheduled = !1;
 	constructor(e = h, t = h) {
 		this.id = e, this.instanceId = t, u(this, {
 			id: !1,
@@ -18,15 +23,41 @@ var m = "default", h = "default", g = class e {
 		});
 	}
 	static useNew(t) {
-		let n = r(), i = s(() => new e(t, n))[0];
-		return i.resetIndex(), i;
+		let n = r();
+		return s(() => new e(t, n))[0];
 	}
-	resetIndex() {
-		this.nextIndex = 0;
+	subscribeToOrder = (e) => (this.orderListeners.add(e), () => {
+		this.orderListeners.delete(e);
+	});
+	getOrderGeneration = () => this.orderGeneration;
+	takeIndex(e) {
+		return this.indexGeneration !== e && (this.indexGeneration = e, this.nextIndex = 0), this.nextIndex++;
+	}
+	isCommittedOutOfOrder(e = m, t, n) {
+		if (n !== this.orderGeneration) return !1;
+		let r = this.committedIndices.get(e);
+		return this.committedIndices.set(e, t), this.isCommittedIndicesResetScheduled || (this.isCommittedIndicesResetScheduled = !0, queueMicrotask(() => {
+			this.committedIndices.clear(), this.isCommittedIndicesResetScheduled = !1;
+		})), r !== void 0 && t < r;
 	}
-	useEntryIndex() {
-		let e = o(this.instanceId), t = o(null);
-		return (t.current === null || e.current !== this.instanceId) && (e.current = this.instanceId, t.current = this.nextIndex++), t.current;
+	useEntryIndex(e = m) {
+		let t = c(this.subscribeToOrder, this.getOrderGeneration, this.getOrderGeneration), n = o(null);
+		return (n.current?.instanceId !== this.instanceId || n.current.generation !== t) && (n.current = {
+			instanceId: this.instanceId,
+			generation: t,
+			index: this.takeIndex(t),
+			mountsNextToCommittedEntries: n.current === null && (this.committedChildren.get(e)?.size ?? 0) > 0
+		}), {
+			index: n.current.index,
+			generation: t,
+			needsReorder: n.current.mountsNextToCommittedEntries
+		};
+	}
+	reorderEntries(e) {
+		if (e === this.orderGeneration) {
+			this.orderGeneration++, this.committedIndices.clear();
+			for (let e of this.orderListeners) e();
+		}
 	}
 	buildEntryState(e, t, n, r, i) {
 		let a = new Set(e?.owners);
@@ -85,9 +116,9 @@ var m = "default", h = "default", g = class e {
 		children: n
 	});
 }, b = (e) => {
-	let { children: t, id: a, staticEntryId: s, providerId: c } = e, l = v(c), u = r(), d = s ?? u, f = l.useEntryIndex(), p = o(!1);
-	return p.current || l.setRenderPhaseChildren(a, d, u, f, t), i(() => {
-		p.current = !0, l.setChildren(a, d, u, f, t);
+	let { children: t, id: a, staticEntryId: s, providerId: c } = e, l = v(c), u = r(), d = s ?? u, { index: f, generation: p, needsReorder: m } = l.useEntryIndex(a), h = o(!1);
+	return h.current || l.setRenderPhaseChildren(a, d, u, f, t), i(() => {
+		h.current = !0, l.setChildren(a, d, u, f, t);
 	}, [
 		t,
 		a,
@@ -95,7 +126,10 @@ var m = "default", h = "default", g = class e {
 		u,
 		f,
 		c
-	]), n(() => () => {
+	]), i(() => {
+		let e = l.isCommittedOutOfOrder(a, f, p);
+		(m || e) && l.reorderEntries(p);
+	}), n(() => () => {
 		l.deleteChildren(a, d, u);
 	}, [
 		a,

package/dist/types/TunnelState.d.ts

@@ -26,10 +26,42 @@ export declare class TunnelState {
     readonly committedChildren: ObservableMap<string, ObservableMap<string, TunnelEntryState>>;
     private readonly renderPhaseChildren;
     private nextIndex;
+    private indexGeneration;
+    private orderGeneration;
+    private readonly orderListeners;
+    private readonly committedIndices;
+    private isCommittedIndicesResetScheduled;
     constructor(id?: string, instanceId?: string);
     static useNew(id?: string): TunnelState;
-    resetIndex(): void;
-    useEntryIndex(): number;
+    private readonly subscribeToOrder;
+    private readonly getOrderGeneration;
+    private takeIndex;
+    /**
+     * Whether `index` commits after a higher index in the same commit. Called
+     * from a layout effect: unlike a concurrent render, a commit does not yield,
+     * so the microtask clears the indices only between commits.
+     */
+    isCommittedOutOfOrder(tunnelId: string | undefined, index: number, generation: number): boolean;
+    /**
+     * An entry takes its index from a counter while it renders, so entries that
+     * render together are ordered like the tree. An entry that mounts next to
+     * committed ones only knows the count so far (it returns `needsReorder`), and
+     * a keyed reorder keeps the indices of the moved entries
+     * (`isCommittedOutOfOrder`). Either way the entry calls `reorderEntries` in a
+     * layout effect: every entry of this state renders again in one pass, in tree
+     * order, and takes its index anew.
+     */
+    useEntryIndex(tunnelId?: string): {
+        index: number;
+        generation: number;
+        needsReorder: boolean;
+    };
+    /**
+     * Re-renders every entry so it takes its index anew. `generation` is the one
+     * the calling entry rendered with: when a reorder is already pending, the
+     * call does nothing, so entries mounting in one commit reorder once.
+     */
+    reorderEntries(generation: number): void;
     private buildEntryState;
     setChildren(tunnelId: string | undefined, entryId: string, ownerId: string, index: number, children: TunnelChildren): void;
     setRenderPhaseChildren(tunnelId: string | undefined, entryId: string, ownerId: string, index: number, children: TunnelChildren): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/react-tunnel",
-  "version": "1.5.45",
+  "version": "1.5.46",
   "type": "module",
   "description": "It's like a Portal – but with React components",
   "keywords": [
@@ -39,8 +39,8 @@
     "mobx-react-lite": "^4.1.1"
   },
   "devDependencies": {
-    "@mittwald/flow-core": "1.5.45",
-    "@mittwald/typescript-config": "1.5.45",
+    "@mittwald/flow-core": "1.5.46",
+    "@mittwald/typescript-config": "1.5.46",
     "@types/node": "^25.9.3",
     "@types/react": "^19.2",
     "@types/react-dom": "^19.2",
@@ -62,5 +62,5 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
-  "gitHead": "be042090497de4dea27dd777bb49869f3c6599ca"
+  "gitHead": "4c6d9e48b1ccd4b7851396ce3ed3dde098dde8ec"
 }