@mittwald/react-tunnel 1.6.0-next.5 → 1.6.0-next.50

package/dist/index.js

@@ -1,32 +1,63 @@
 
-import { createContext as e, useContext as t, useEffect as n, useId as r, useLayoutEffect as i, useReducer as a, useRef as o, useState as s, useSyncExternalStore as c } from "react";
-import { action as l, makeObservable as u, observable as d } from "mobx";
-import { jsx as f } from "react/jsx-runtime";
-import { observer as p } from "mobx-react-lite";
+import { createContext as e, useContext as t, useEffect as n, useId as r, useLayoutEffect as i, useMemo as a, useReducer as o, useRef as s, useState as c, useSyncExternalStore as l } from "react";
+import { action as u, makeObservable as d, observable as f } from "mobx";
+import { jsx as p } from "react/jsx-runtime";
+import { observer as m } from "mobx-react-lite";
 //#region src/TunnelState.ts
-var m = "default", h = "default", g = class e {
+var h = "default", g = "default", _ = class e {
 	id;
 	instanceId;
-	committedChildren = d.map({}, { deep: !1 });
+	committedChildren = f.map({}, { deep: !1 });
 	renderPhaseChildren = /* @__PURE__ */ new Map();
 	nextIndex = 0;
-	constructor(e = h, t = h) {
-		this.id = e, this.instanceId = t, u(this, {
+	indexGeneration = 0;
+	orderGeneration = 0;
+	orderListeners = /* @__PURE__ */ new Set();
+	committedIndices = /* @__PURE__ */ new Map();
+	isCommittedIndicesResetScheduled = !1;
+	constructor(e = g, t = g) {
+		this.id = e, this.instanceId = t, d(this, {
 			id: !1,
-			deleteChildren: l.bound,
-			setChildren: l.bound
+			deleteChildren: u.bound,
+			setChildren: u.bound
 		});
 	}
 	static useNew(t) {
-		let n = r(), i = s(() => new e(t, n))[0];
-		return i.resetIndex(), i;
+		let n = r();
+		return c(() => 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 = h, 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 = h) {
+		let t = l(this.subscribeToOrder, this.getOrderGeneration, this.getOrderGeneration), n = s(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);
@@ -37,11 +68,11 @@ var m = "default", h = "default", g = class e {
 			owners: a
 		};
 	}
-	setChildren(e = m, t, n, r, i) {
-		let a = this.committedChildren.get(e) ?? d.map({}, { deep: !1 });
+	setChildren(e = h, t, n, r, i) {
+		let a = this.committedChildren.get(e) ?? f.map({}, { deep: !1 });
 		a.set(t, this.buildEntryState(a.get(t), t, n, r, i)), this.deleteOwnerFromMap(this.renderPhaseChildren, e, t, n), this.committedChildren.set(e, a);
 	}
-	setRenderPhaseChildren(e = m, t, n, r, i) {
+	setRenderPhaseChildren(e = h, t, n, r, i) {
 		let a = this.renderPhaseChildren.get(e) ?? /* @__PURE__ */ new Map();
 		a.set(t, this.buildEntryState(a.get(t), t, n, r, i)), this.renderPhaseChildren.set(e, a);
 	}
@@ -58,36 +89,36 @@ var m = "default", h = "default", g = class e {
 		}
 		i.delete(n), i.size === 0 && e.delete(t);
 	}
-	deleteChildren(e = m, t, n) {
+	deleteChildren(e = h, t, n) {
 		this.deleteOwnerFromMap(this.committedChildren, e, t, n), this.deleteOwnerFromMap(this.renderPhaseChildren, e, t, n);
 	}
-	getEntries(e = m, t = !1) {
+	getEntries(e = h, t = !1) {
 		let n = this.committedChildren.get(e)?.values(), r = t ? this.renderPhaseChildren.get(e)?.values() : void 0, i = n ?? r;
 		if (i) return {
 			committed: !!n,
 			entries: Array.from(i).sort((e, t) => e.index - t.index)
 		};
 	}
-}, _ = e({ state: new g() }), v = (e = h) => {
-	let n = t(_);
+}, v = e({ state: new _() }), y = (e = g) => {
+	let n = t(v);
 	for (; n;) {
 		if (n.state.id === e) return n.state;
 		n = n.parentContext;
 	}
 	throw Error(`Could not get tunnel for provider ${e}. Please provider a TunnelProvider with this ID.`);
-}, y = (e) => {
-	let { children: n, id: r } = e, i = t(_), a = g.useNew(r);
-	return /* @__PURE__ */ f(_.Provider, {
-		value: {
-			state: a,
-			parentContext: i
-		},
+}, b = (e) => {
+	let { children: n, id: r } = e, i = t(v), o = _.useNew(r), s = a(() => ({
+		state: o,
+		parentContext: i
+	}), [o, i]);
+	return /* @__PURE__ */ p(v.Provider, {
+		value: s,
 		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);
+}, x = (e) => {
+	let { children: t, id: a, staticEntryId: o, providerId: c } = e, l = y(c), u = r(), d = o ?? u, { index: f, generation: p, needsReorder: m } = l.useEntryIndex(a), h = s(!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,
@@ -103,20 +137,20 @@ var m = "default", h = "default", g = class e {
 		u,
 		c
 	]), null;
-}, x = (e) => {
+}, S = (e) => {
 	let { children: t } = e;
 	return typeof t == "function" ? t() : t;
-}, S = p((e) => {
-	let { children: t, id: n, providerId: r } = e, s = c(() => () => null, () => !1, () => !0), l = o(!0);
+}, C = m((e) => {
+	let { children: t, id: n, providerId: r } = e, a = l(() => () => null, () => !1, () => !0), c = s(!0);
 	i(() => {
-		l.current = !1;
+		c.current = !1;
 	}, []);
-	let u = v(r).getEntries(n, s || l.current), [, d] = a((e) => e + 1, 0), p = u?.committed === !0;
+	let u = y(r).getEntries(n, a || c.current), [, d] = o((e) => e + 1, 0), f = u?.committed === !0;
 	i(() => {
-		p || d();
-	}, [p]);
-	let m = u?.entries.map((e) => /* @__PURE__ */ f(x, { children: e.children }, e.id));
+		f || d();
+	}, [f]);
+	let m = u?.entries.map((e) => /* @__PURE__ */ p(S, { children: e.children }, e.id));
 	return typeof t == "function" ? t(m) : m ?? t;
 });
 //#endregion
-export { b as TunnelEntry, S as TunnelExit, y as TunnelProvider };
+export { x as TunnelEntry, C as TunnelExit, b as TunnelProvider };

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.6.0-next.5",
+  "version": "1.6.0-next.50",
   "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.6.0-next.5",
-    "@mittwald/typescript-config": "1.6.0-next.5",
+    "@mittwald/flow-core": "1.6.0-next.50",
+    "@mittwald/typescript-config": "1.6.0-next.50",
     "@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": "740150500bab2cd36aa92f13894892e4629f8f7c"
+  "gitHead": "a0fb5378707e92fe9a240a3c453b549cd2499734"
 }