@tamagui/web 3.0.5 → 3.0.7

package/dist/cjs/helpers/nativeStyleEngine.cjs

@@ -20,10 +20,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var nativeStyleEngine_exports = {};
 __export(nativeStyleEngine_exports, {
+	createNativeStyleLinkState: () => createNativeStyleLinkState,
 	flushNativeStyleLinks: () => flushNativeStyleLinks,
 	getNativeStyleEngine: () => getNativeStyleEngine,
 	getNativeStyleEngineCacheStats: () => getNativeStyleEngineCacheStats,
-	linkNativeStyleMapping: () => linkNativeStyleMapping,
+	linkNativeStyleHost: () => linkNativeStyleHost,
 	nativeTextInputColorProps: () => nativeTextInputColorProps,
 	normalizeNativeStyle: () => normalizeNativeStyle,
 	queueNativeViewState: () => queueNativeViewState,
@@ -31,6 +32,7 @@ __export(nativeStyleEngine_exports, {
 	resolveNativeStyleMapping: () => resolveNativeStyleMapping,
 	setNativeStyleEngine: () => setNativeStyleEngine,
 	setNativeStyleEngineFlushListener: () => setNativeStyleEngineFlushListener,
+	supersedeNativeViewStates: () => supersedeNativeViewStates,
 	updateNativeStyleLink: () => updateNativeStyleLink,
 	updateNativeStyleScope: () => updateNativeStyleScope
 });
@@ -137,11 +139,10 @@ function syncTableState(compiled, stateName, theme) {
 }
 function setNativeStyleEngine(next) {
 	if (engine !== next) {
-		settleReleases();
 		compiledMappings.clear();
 		scopeMappings.clear();
-		pendingLinks = [];
-		unlinkedPending = 0;
+		pendingHosts = [];
+		pendingStates = [];
 	}
 	engine = next;
 	if (next) {
@@ -164,7 +165,7 @@ function updateNativeStyleScope(scopeId, stateName, theme) {
 	if (engine) {
 		const linked = scopeMappings.get(scopeId);
 		if (linked) {
-			for (const compiled of linked.keys()) {
+			for (const compiled of linked) {
 				syncTableState(compiled, stateName, theme);
 			}
 		}
@@ -173,137 +174,83 @@ function updateNativeStyleScope(scopeId, stateName, theme) {
 }
 function removeNativeStyleScope(scopeId) {
 	if (!scopeStates.delete(scopeId)) return;
+	queueMicrotask(() => {
+		if (!scopeStates.has(scopeId)) scopeMappings.delete(scopeId);
+	});
 	engine?.removeScope(scopeId);
 }
 function resolveNativeStyleMapping(mapping, stateName, theme) {
 	return resolveCompiledMapping(getCompiledMapping(mapping), stateName, theme).renderProps;
 }
-let pendingLinks = [];
-let unlinkedPending = 0;
-function trackScopeMapping(link, delta) {
-	let linked = scopeMappings.get(link.scopeId);
-	if (!linked) scopeMappings.set(link.scopeId, linked = /* @__PURE__ */ new Map());
-	const count = (linked.get(link.compiled) ?? 0) + delta;
-	if (count) {
-		linked.set(link.compiled, count);
-	} else {
-		linked.delete(link.compiled);
-		if (!linked.size) scopeMappings.delete(link.scopeId);
-	}
+function createNativeStyleLinkState(mapping, scopeId, stateName, theme) {
+	return {
+		mapping,
+		scopeId,
+		stateName,
+		theme
+	};
+}
+let pendingHosts = [];
+let pendingStates = [];
+const maxPendingHosts = 4096;
+let idleFlushQueued = false;
+function idleFlush() {
+	idleFlushQueued = false;
+	flushNativeStyleLinks();
+}
+function addScopeMapping(scopeId, compiled) {
+	let linked = scopeMappings.get(scopeId);
+	if (!linked) scopeMappings.set(scopeId, linked = /* @__PURE__ */ new Set());
+	linked.add(compiled);
 }
 function flushNativeStyleLinks() {
-	settleReleases();
-	if (!pendingLinks.length) return;
-	const links = pendingLinks;
-	pendingLinks = [];
-	unlinkedPending = 0;
+	if (!pendingHosts.length) return;
+	const hosts = pendingHosts;
+	const states = pendingStates;
+	pendingHosts = [];
+	pendingStates = [];
 	if (!engine) return;
-	const live = links.filter((link) => link.id === 0);
-	if (!live.length) return;
-	const refs = [];
-	const tableIds = [];
-	const scopeIndexes = [];
+	const tableIds = new Array(hosts.length);
+	const scopeIndexes = new Array(hosts.length);
 	const scopes = [];
-	for (const link of live) {
-		let scopeIndex = scopes.indexOf(link.scopeId);
-		if (scopeIndex === -1) scopeIndex = scopes.push(link.scopeId) - 1;
-		refs.push(link.ref);
-		tableIds.push(link.compiled.tableId);
-		scopeIndexes.push(scopeIndex);
-	}
-	const firstId = engine.linkTables(refs, tableIds, scopeIndexes, scopes);
-	for (let i = 0; i < live.length; i++) {
-		const link = live[i];
-		link.id = firstId + i;
-		link.owner = engine;
-		link.ref = null;
-		trackScopeMapping(link, 1);
-	}
-}
-const releases = /* @__PURE__ */ new Map();
-let settleQueued = false;
-function settleReleases() {
-	settleQueued = false;
-	if (!releases.size) return;
-	const settling = [...releases.values()];
-	releases.clear();
-	for (const release of settling) release.settle();
-}
-function releasable(ref, compiled, scopeId, id, settle) {
-	const handle = {
-		id,
-		unlink: () => {
-			const prior = releases.get(ref);
-			if (prior && prior.handle !== handle) prior.settle();
-			releases.set(ref, {
-				compiled,
-				scopeId,
-				handle,
-				settle
-			});
-			if (!settleQueued) {
-				settleQueued = true;
-				queueMicrotask(settleReleases);
-			}
+	let last;
+	let tableId = 0;
+	let scopeIndex = 0;
+	for (let i = 0; i < hosts.length; i++) {
+		const state = states[i];
+		if (state !== last) {
+			last = state;
+			const compiled = getCompiledMapping(state.mapping);
+			syncTableState(compiled, state.stateName, state.theme);
+			addScopeMapping(state.scopeId, compiled);
+			tableId = compiled.tableId;
+			scopeIndex = scopes.indexOf(state.scopeId);
+			if (scopeIndex === -1) scopeIndex = scopes.push(state.scopeId) - 1;
 		}
-	};
-	return handle;
+		tableIds[i] = tableId;
+		scopeIndexes[i] = scopeIndex;
+	}
+	engine.linkTables(hosts, tableIds, scopeIndexes, scopes);
 }
-function linkNativeStyleMapping(ref, mapping, scopeId, stateName, theme) {
-	if (!engine) return null;
-	const compiled = getCompiledMapping(mapping);
-	const scopeState = scopeStates.get(scopeId);
-	const stale = scopeState && (scopeState.name !== stateName || scopeState.theme !== theme);
-	const kept = releases.get(ref);
-	if (kept) {
-		releases.delete(ref);
-		if (!stale && kept.compiled === compiled && kept.scopeId === scopeId) return kept.handle;
-		kept.settle();
+function linkNativeStyleHost(host, state) {
+	if (!engine) return;
+	const live = scopeStates.get(state.scopeId);
+	if (live && (live.name !== state.stateName || live.theme !== state.theme)) {
+		const compiled = getCompiledMapping(state.mapping);
+		syncTableState(compiled, live.name, live.theme);
+		addScopeMapping(state.scopeId, compiled);
+		engine.link(host, compiled.tableId, state.scopeId, true);
+		return;
 	}
-	if (stale) {
-		syncTableState(compiled, scopeState.name, scopeState.theme);
-		const handle = engine.link(ref, compiled.tableId, scopeId, true);
-		if (!handle) return null;
-		const link2 = {
-			ref: null,
-			compiled,
-			scopeId,
-			id: handle.id,
-			owner: engine
-		};
-		trackScopeMapping(link2, 1);
-		return releasable(ref, compiled, scopeId, handle.id, () => {
-			if (link2.id === -1) return;
-			link2.id = -1;
-			if (link2.owner === engine) trackScopeMapping(link2, -1);
-			handle.unlink();
-		});
+	pendingHosts.push(host);
+	pendingStates.push(state);
+	if (pendingHosts.length >= maxPendingHosts && !idleFlushQueued) {
+		idleFlushQueued = true;
+		requestIdleCallback(idleFlush);
 	}
-	syncTableState(compiled, stateName, theme);
-	const link = {
-		ref,
-		compiled,
-		scopeId,
-		id: 0,
-		owner: null
-	};
-	pendingLinks.push(link);
-	return releasable(ref, compiled, scopeId, 0, () => {
-		const id = link.id;
-		if (id === -1) return;
-		link.id = -1;
-		link.ref = null;
-		if (id > 0) {
-			if (link.owner === engine) trackScopeMapping(link, -1);
-			link.owner.unlink(id);
-		} else if (++unlinkedPending > 512 && unlinkedPending * 2 > pendingLinks.length) {
-			pendingLinks = pendingLinks.filter((pending2) => pending2.id === 0);
-			unlinkedPending = 0;
-		}
-	});
 }
 const getNativeStyleEngineCacheStats = () => {
-	const active = new Set([...scopeMappings.values()].flatMap((linked) => [...linked.keys()]));
+	const active = new Set([...scopeMappings.values()].flatMap((linked) => [...linked]));
 	return {
 		mappings: compiledMappings.size,
 		activeMappings: active.size,
@@ -325,16 +272,27 @@ function updateNativeStyleLink(ref, host) {
 		ref.nativeLink = engine.link(host, {});
 	}
 }
+let superseded = null;
 function queueNativeViewState(entry) {
 	if (!engine) return;
 	if (!pending) {
 		pending = [];
 		queueMicrotask(() => {
-			const entries = pending;
+			let entries = pending;
+			const dropped = superseded;
 			pending = null;
+			superseded = null;
+			if (dropped) {
+				entries = entries.filter((queued, index) => index >= (dropped.get(queued.id) ?? 0));
+			}
+			if (!entries.length) return;
 			engine?.applyViewStates(entries);
 			flushListener?.(entries);
 		});
 	}
 	pending.push(entry);
 }
+function supersedeNativeViewStates(id) {
+	if (!pending) return;
+	(superseded ||= /* @__PURE__ */ new Map()).set(id, pending.length);
+}

package/dist/cjs/helpers/nativeStyleEngine.native.cjs

@@ -22,10 +22,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var nativeStyleEngine_exports = {};
 __export(nativeStyleEngine_exports, {
+	createNativeStyleLinkState: () => createNativeStyleLinkState,
 	flushNativeStyleLinks: () => flushNativeStyleLinks,
 	getNativeStyleEngine: () => getNativeStyleEngine,
 	getNativeStyleEngineCacheStats: () => getNativeStyleEngineCacheStats,
-	linkNativeStyleMapping: () => linkNativeStyleMapping,
+	linkNativeStyleHost: () => linkNativeStyleHost,
 	nativeTextInputColorProps: () => nativeTextInputColorProps,
 	normalizeNativeStyle: () => normalizeNativeStyle,
 	queueNativeViewState: () => queueNativeViewState,
@@ -33,6 +34,7 @@ __export(nativeStyleEngine_exports, {
 	resolveNativeStyleMapping: () => resolveNativeStyleMapping,
 	setNativeStyleEngine: () => setNativeStyleEngine,
 	setNativeStyleEngineFlushListener: () => setNativeStyleEngineFlushListener,
+	supersedeNativeViewStates: () => supersedeNativeViewStates,
 	updateNativeStyleLink: () => updateNativeStyleLink,
 	updateNativeStyleScope: () => updateNativeStyleScope
 });
@@ -177,11 +179,10 @@ function syncTableState(compiled, stateName, theme) {
 }
 function setNativeStyleEngine(next) {
 	if (engine !== next) {
-		settleReleases();
 		compiledMappings.clear();
 		scopeMappings.clear();
-		pendingLinks = [];
-		unlinkedPending = 0;
+		pendingHosts = [];
+		pendingStates = [];
 	}
 	engine = next;
 	if (next) {
@@ -223,7 +224,7 @@ function updateNativeStyleScope(scopeId, stateName, theme) {
 		if (linked) {
 			var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 			try {
-				for (var _iterator = linked.keys()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				for (var _iterator = linked[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
 					var compiled = _step.value;
 					syncTableState(compiled, stateName, theme);
 				}
@@ -247,179 +248,84 @@ function updateNativeStyleScope(scopeId, stateName, theme) {
 }
 function removeNativeStyleScope(scopeId) {
 	if (!scopeStates.delete(scopeId)) return;
+	queueMicrotask(function() {
+		if (!scopeStates.has(scopeId)) scopeMappings.delete(scopeId);
+	});
 	engine === null || engine === void 0 ? void 0 : engine.removeScope(scopeId);
 }
 function resolveNativeStyleMapping(mapping, stateName, theme) {
 	return resolveCompiledMapping(getCompiledMapping(mapping), stateName, theme).renderProps;
 }
-var pendingLinks = [];
-var unlinkedPending = 0;
-function trackScopeMapping(link, delta) {
-	var linked = scopeMappings.get(link.scopeId);
-	if (!linked) scopeMappings.set(link.scopeId, linked = /* @__PURE__ */ new Map());
-	var _linked_get;
-	var count = ((_linked_get = linked.get(link.compiled)) !== null && _linked_get !== void 0 ? _linked_get : 0) + delta;
-	if (count) {
-		linked.set(link.compiled, count);
-	} else {
-		linked.delete(link.compiled);
-		if (!linked.size) scopeMappings.delete(link.scopeId);
-	}
+function createNativeStyleLinkState(mapping, scopeId, stateName, theme) {
+	return {
+		mapping,
+		scopeId,
+		stateName,
+		theme
+	};
+}
+var pendingHosts = [];
+var pendingStates = [];
+var maxPendingHosts = 4096;
+var idleFlushQueued = false;
+function idleFlush() {
+	idleFlushQueued = false;
+	flushNativeStyleLinks();
+}
+function addScopeMapping(scopeId, compiled) {
+	var linked = scopeMappings.get(scopeId);
+	if (!linked) scopeMappings.set(scopeId, linked = /* @__PURE__ */ new Set());
+	linked.add(compiled);
 }
 function flushNativeStyleLinks() {
-	settleReleases();
-	if (!pendingLinks.length) return;
-	var links = pendingLinks;
-	pendingLinks = [];
-	unlinkedPending = 0;
+	if (!pendingHosts.length) return;
+	var hosts = pendingHosts;
+	var states = pendingStates;
+	pendingHosts = [];
+	pendingStates = [];
 	if (!engine) return;
-	var live = links.filter(function(link2) {
-		return link2.id === 0;
-	});
-	if (!live.length) return;
-	var refs = [];
-	var tableIds = [];
-	var scopeIndexes = [];
+	var tableIds = new Array(hosts.length);
+	var scopeIndexes = new Array(hosts.length);
 	var scopes = [];
-	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-	try {
-		for (var _iterator = live[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-			var link = _step.value;
-			var scopeIndex = scopes.indexOf(link.scopeId);
-			if (scopeIndex === -1) scopeIndex = scopes.push(link.scopeId) - 1;
-			refs.push(link.ref);
-			tableIds.push(link.compiled.tableId);
-			scopeIndexes.push(scopeIndex);
+	var last;
+	var tableId = 0;
+	var scopeIndex = 0;
+	for (var i = 0; i < hosts.length; i++) {
+		var state = states[i];
+		if (state !== last) {
+			last = state;
+			var compiled = getCompiledMapping(state.mapping);
+			syncTableState(compiled, state.stateName, state.theme);
+			addScopeMapping(state.scopeId, compiled);
+			tableId = compiled.tableId;
+			scopeIndex = scopes.indexOf(state.scopeId);
+			if (scopeIndex === -1) scopeIndex = scopes.push(state.scopeId) - 1;
 		}
-	} catch (err) {
-		_didIteratorError = true;
-		_iteratorError = err;
-	} finally {
-		try {
-			if (!_iteratorNormalCompletion && _iterator.return != null) {
-				_iterator.return();
-			}
-		} finally {
-			if (_didIteratorError) {
-				throw _iteratorError;
-			}
-		}
-	}
-	var firstId = engine.linkTables(refs, tableIds, scopeIndexes, scopes);
-	for (var i = 0; i < live.length; i++) {
-		var link1 = live[i];
-		link1.id = firstId + i;
-		link1.owner = engine;
-		link1.ref = null;
-		trackScopeMapping(link1, 1);
+		tableIds[i] = tableId;
+		scopeIndexes[i] = scopeIndex;
 	}
+	engine.linkTables(hosts, tableIds, scopeIndexes, scopes);
 }
-var releases = /* @__PURE__ */ new Map();
-var settleQueued = false;
-function settleReleases() {
-	settleQueued = false;
-	if (!releases.size) return;
-	var settling = [...releases.values()];
-	releases.clear();
-	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-	try {
-		for (var _iterator = settling[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-			var release = _step.value;
-			release.settle();
-		}
-	} catch (err) {
-		_didIteratorError = true;
-		_iteratorError = err;
-	} finally {
-		try {
-			if (!_iteratorNormalCompletion && _iterator.return != null) {
-				_iterator.return();
-			}
-		} finally {
-			if (_didIteratorError) {
-				throw _iteratorError;
-			}
-		}
-	}
-}
-function releasable(ref, compiled, scopeId, id, settle) {
-	var handle = {
-		id,
-		unlink: function() {
-			var prior = releases.get(ref);
-			if (prior && prior.handle !== handle) prior.settle();
-			releases.set(ref, {
-				compiled,
-				scopeId,
-				handle,
-				settle
-			});
-			if (!settleQueued) {
-				settleQueued = true;
-				queueMicrotask(settleReleases);
-			}
-		}
-	};
-	return handle;
-}
-function linkNativeStyleMapping(ref, mapping, scopeId, stateName, theme) {
-	if (!engine) return null;
-	var compiled = getCompiledMapping(mapping);
-	var scopeState = scopeStates.get(scopeId);
-	var stale = scopeState && (scopeState.name !== stateName || scopeState.theme !== theme);
-	var kept = releases.get(ref);
-	if (kept) {
-		releases.delete(ref);
-		if (!stale && kept.compiled === compiled && kept.scopeId === scopeId) return kept.handle;
-		kept.settle();
+function linkNativeStyleHost(host, state) {
+	if (!engine) return;
+	var live = scopeStates.get(state.scopeId);
+	if (live && (live.name !== state.stateName || live.theme !== state.theme)) {
+		var compiled = getCompiledMapping(state.mapping);
+		syncTableState(compiled, live.name, live.theme);
+		addScopeMapping(state.scopeId, compiled);
+		engine.link(host, compiled.tableId, state.scopeId, true);
+		return;
 	}
-	if (stale) {
-		syncTableState(compiled, scopeState.name, scopeState.theme);
-		var handle = engine.link(ref, compiled.tableId, scopeId, true);
-		if (!handle) return null;
-		var link = {
-			ref: null,
-			compiled,
-			scopeId,
-			id: handle.id,
-			owner: engine
-		};
-		trackScopeMapping(link, 1);
-		return releasable(ref, compiled, scopeId, handle.id, function() {
-			if (link.id === -1) return;
-			link.id = -1;
-			if (link.owner === engine) trackScopeMapping(link, -1);
-			handle.unlink();
-		});
+	pendingHosts.push(host);
+	pendingStates.push(state);
+	if (pendingHosts.length >= maxPendingHosts && !idleFlushQueued) {
+		idleFlushQueued = true;
+		requestIdleCallback(idleFlush);
 	}
-	syncTableState(compiled, stateName, theme);
-	var link1 = {
-		ref,
-		compiled,
-		scopeId,
-		id: 0,
-		owner: null
-	};
-	pendingLinks.push(link1);
-	return releasable(ref, compiled, scopeId, 0, function() {
-		var id = link1.id;
-		if (id === -1) return;
-		link1.id = -1;
-		link1.ref = null;
-		if (id > 0) {
-			if (link1.owner === engine) trackScopeMapping(link1, -1);
-			link1.owner.unlink(id);
-		} else if (++unlinkedPending > 512 && unlinkedPending * 2 > pendingLinks.length) {
-			pendingLinks = pendingLinks.filter(function(pending2) {
-				return pending2.id === 0;
-			});
-			unlinkedPending = 0;
-		}
-	});
 }
 var getNativeStyleEngineCacheStats = function() {
 	var active = new Set([...scopeMappings.values()].flatMap(function(linked) {
-		return [...linked.keys()];
+		return [...linked];
 	}));
 	return {
 		mappings: compiledMappings.size,
@@ -444,16 +350,30 @@ function updateNativeStyleLink(ref, host) {
 		ref.nativeLink = engine.link(host, {});
 	}
 }
+var superseded = null;
 function queueNativeViewState(entry) {
 	if (!engine) return;
 	if (!pending) {
 		pending = [];
 		queueMicrotask(function() {
 			var entries = pending;
+			var dropped = superseded;
 			pending = null;
+			superseded = null;
+			if (dropped) {
+				entries = entries.filter(function(queued, index) {
+					var _dropped_get;
+					return index >= ((_dropped_get = dropped.get(queued.id)) !== null && _dropped_get !== void 0 ? _dropped_get : 0);
+				});
+			}
+			if (!entries.length) return;
 			engine === null || engine === void 0 ? void 0 : engine.applyViewStates(entries);
 			flushListener === null || flushListener === void 0 ? void 0 : flushListener(entries);
 		});
 	}
 	pending.push(entry);
 }
+function supersedeNativeViewStates(id) {
+	if (!pending) return;
+	(superseded || (superseded = /* @__PURE__ */ new Map())).set(id, pending.length);
+}