@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/hooks/useMedia.cjs

@@ -1,303 +1,376 @@
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useMedia_exports = {};
 __export(useMedia_exports, {
-  _disableMediaTouch: () => _disableMediaTouch,
-  configureMedia: () => configureMedia,
-  getMediaImportanceIfMoreImportant: () => getMediaImportanceIfMoreImportant,
-  getMediaKey: () => getMediaKey,
-  getMediaKeyImportance: () => getMediaKeyImportance,
-  getMediaState: () => getMediaState,
-  isMediaKey: () => isMediaKey,
-  mediaKeyMatch: () => mediaKeyMatch,
-  mediaKeyToQuery: () => mediaKeyToQuery,
-  setMediaShouldUpdate: () => setMediaShouldUpdate,
-  setupMediaListeners: () => setupMediaListeners,
-  updateMediaListeners: () => updateMediaListeners,
-  useMedia: () => useMedia
+	_disableMediaTouch: () => _disableMediaTouch,
+	_mediaListenerStats: () => _mediaListenerStats,
+	configureMedia: () => configureMedia,
+	getMediaState: () => getMediaState,
+	mediaKeyMatch: () => mediaKeyMatch,
+	mediaKeyToQuery: () => mediaKeyToQuery,
+	setMediaShouldUpdate: () => setMediaShouldUpdate,
+	setupMediaListeners: () => setupMediaListeners,
+	updateMediaListeners: () => updateMediaListeners,
+	useMedia: () => useMedia
 });
 module.exports = __toCommonJS(useMedia_exports);
 var import_constants = require("@tamagui/constants");
 var import_react = require("react");
 var import_config = require("../config.cjs");
-var import_createMediaStyle = require("../helpers/createMediaStyle.cjs");
+var import_formatDiagnostic = require("../helpers/formatDiagnostic.cjs");
+var import_isOptimizedForFirstRender = require("./isOptimizedForFirstRender.cjs");
 var import_matchMedia = require("../helpers/matchMedia.cjs");
 var import_mediaObjectToString = require("../helpers/mediaObjectToString.cjs");
 var import_mediaState = require("../helpers/mediaState.cjs");
-var import_pseudoDescriptors = require("../helpers/pseudoDescriptors.cjs");
-const mediaKeyRegex = /\$(platform|theme|group)-/;
-const isMediaKey = key => {
-  if (key[0] !== "$") return false;
-  if (import_mediaState.mediaKeys.has(key)) return true;
-  if (mediaKeyRegex.test(key)) return true;
-  return false;
-};
-const getMediaKey = key => {
-  if (key[0] !== "$") return false;
-  if (import_mediaState.mediaKeys.has(key)) return true;
-  const match = key.match(mediaKeyRegex);
-  if (match) return match[1];
-  return false;
-};
 let initState;
-const getMediaKeyImportance = key => {
-  if (process.env.NODE_ENV === "development" && key[0] === "$") {
-    throw new Error("use short key");
-  }
-  return import_mediaState.mediaKeysOrdered.indexOf(key) + 100;
-};
-const dispose = /* @__PURE__ */new Set();
+const dispose = /* @__PURE__ */ new Set();
 let mediaVersion = 0;
-const configureMedia = config => {
-  const {
-    media
-  } = config;
-  const mediaQueryDefaultActive = (0, import_config.getSetting)("mediaQueryDefaultActive");
-  if (!media) return;
-  mediaVersion++;
-  (0, import_createMediaStyle.resetMediaStyleCache)();
-  resetMediaTouchTracker();
-  for (const key in media) {
-    (0, import_mediaState.getMedia)()[key] = mediaQueryDefaultActive?.[key] || false;
-    import_mediaState.mediaKeys.add(`$${key}`);
-  }
-  Object.assign(import_mediaState.mediaQueryConfig, media);
-  initState = {
-    ...(0, import_mediaState.getMedia)()
-  };
-  import_mediaState.mediaKeysOrdered.length = 0;
-  import_mediaState.mediaKeysOrdered.push(...Object.keys(media));
-  setupMediaListeners();
+const configureMedia = (config) => {
+	const { media } = config;
+	const mediaQueryDefaultActive = (0, import_config.getSetting)("mediaQueryDefaultActive");
+	if (!media) return;
+	mediaVersion++;
+	resetMediaTouchTracker();
+	publishedState = null;
+	for (const key in media) {
+		(0, import_mediaState.getMedia)()[key] = mediaQueryDefaultActive?.[key] || false;
+		import_mediaState.mediaKeys.add(key);
+	}
+	Object.assign(import_mediaState.mediaQueryConfig, media);
+	initState = { ...(0, import_mediaState.getMedia)() };
+	setupMediaListeners();
 };
 function unlisten() {
-  dispose.forEach(cb => cb());
-  dispose.clear();
+	dispose.forEach((cb) => cb());
+	dispose.clear();
 }
 let setupVersion = -1;
 function setupMediaListeners() {
-  if (import_constants.isWeb && import_constants.isServer) return;
-  if (process.env.IS_STATIC) return;
-  if (setupVersion === mediaVersion) return;
-  setupVersion = mediaVersion;
-  unlisten();
-  for (const key in import_mediaState.mediaQueryConfig) {
-    let update = function () {
-      const next = !!getMatch().matches;
-      if (next === (0, import_mediaState.getMedia)()[key]) return;
-      (0, import_mediaState.setMediaState)({
-        ...(0, import_mediaState.getMedia)(),
-        [key]: next
-      });
-      updateMediaListeners();
-    };
-    const str = (0, import_mediaObjectToString.mediaObjectToString)(import_mediaState.mediaQueryConfig[key]);
-    const getMatch = () => (0, import_matchMedia.matchMedia)(str);
-    const match = getMatch();
-    if (!match) {
-      throw new Error("\u26A0\uFE0F No match");
-    }
-    match.addListener(update);
-    dispose.add(() => {
-      match.removeListener(update);
-    });
-    update();
-  }
+	if (import_constants.isWeb && import_constants.isServer) return;
+	if (process.env.IS_STATIC) return;
+	if (setupVersion === mediaVersion) return;
+	setupVersion = mediaVersion;
+	unlisten();
+	for (const key in import_mediaState.mediaQueryConfig) {
+		let update = function() {
+			const next = !!getMatch().matches;
+			if (next === (0, import_mediaState.getMedia)()[key]) return;
+			(0, import_mediaState.setMediaState)({
+				...(0, import_mediaState.getMedia)(),
+				[key]: next
+			});
+			updateMediaListeners();
+		};
+		const str = (0, import_mediaObjectToString.mediaObjectToString)(import_mediaState.mediaQueryConfig[key]);
+		const getMatch = () => (0, import_matchMedia.matchMedia)(str);
+		const match = getMatch();
+		if (!match) {
+			throw new Error((0, import_formatDiagnostic.formatDiagnostic)("TAMAGUI_MEDIA_MATCH", "useMedia", "matchMedia returned no MediaQueryList", "Provide a matchMedia implementation that returns a MediaQueryList", "key,query,platform", {
+				key,
+				query: str,
+				platform: import_constants.isWeb ? "web" : "native"
+			}));
+		}
+		match.addListener(update);
+		dispose.add(() => {
+			match.removeListener(update);
+		});
+		update();
+	}
 }
-const listeners = /* @__PURE__ */new Set();
+const listenersByKey = /* @__PURE__ */ new Map();
+const globalListeners = /* @__PURE__ */ new Set();
+let publishedState = null;
+const _mediaListenerStats = {
+	publishes: 0,
+	notified: 0
+};
 function updateMediaListeners() {
-  listeners.forEach(cb => cb((0, import_mediaState.getMedia)()));
+	_mediaListenerStats.publishes++;
+	const media = (0, import_mediaState.getMedia)();
+	const prev = publishedState;
+	publishedState = media;
+	if (listenersByKey.size) {
+		const woken = /* @__PURE__ */ new Set();
+		for (const key of import_mediaState.mediaKeys) {
+			if (prev !== null && media[key] === prev[key]) continue;
+			const bucket = listenersByKey.get(key);
+			if (bucket) {
+				for (const cb of bucket) woken.add(cb);
+			}
+		}
+		for (const cb of woken) {
+			_mediaListenerStats.notified++;
+			cb(media);
+		}
+	}
+	globalListeners.forEach((cb) => {
+		_mediaListenerStats.notified++;
+		cb(media);
+	});
 }
-const States = /* @__PURE__ */new WeakMap();
+const States = /* @__PURE__ */ new WeakMap();
 let touchTrackerProto = null;
-const refSlot = /* @__PURE__ */Symbol("mediaRefSlot");
+const refSlot = /* @__PURE__ */ Symbol("mediaRefSlot");
 function buildTouchTrackerProto() {
-  const proto = {};
-  for (const fullKey of import_mediaState.mediaKeys) {
-    const key = fullKey[0] === "$" ? fullKey.slice(1) : fullKey;
-    proto[key] = {
-      enumerable: true,
-      configurable: true,
-      get() {
-        const slot = this[refSlot];
-        if (!disableMediaTouch) {
-          slot.keys.add(key);
-        }
-        return slot.proxyTarget[key];
-      }
-    };
-  }
-  return Object.create(null, proto);
+	const proto = {};
+	for (const key of import_mediaState.mediaKeys) {
+		proto[key] = {
+			enumerable: true,
+			configurable: true,
+			get() {
+				const slot = this[refSlot];
+				if (!disableMediaTouch) {
+					slot.keys.add(key);
+				}
+				return slot.proxyTarget[key];
+			}
+		};
+	}
+	return Object.create(null, proto);
 }
 function getTouchTrackerProto() {
-  if (!touchTrackerProto) touchTrackerProto = buildTouchTrackerProto();
-  return touchTrackerProto;
+	if (!touchTrackerProto) touchTrackerProto = buildTouchTrackerProto();
+	return touchTrackerProto;
 }
 function resetMediaTouchTracker() {
-  touchTrackerProto = null;
+	touchTrackerProto = null;
 }
-function setMediaShouldUpdate(ref, enabled, keys) {
-  const cur = States.get(ref);
-  if (!cur || cur.enabled !== enabled || keys) {
-    States.set(ref, {
-      ...cur,
-      enabled,
-      keys
-    });
-  }
+function setMediaShouldUpdate(ref, enabled, keys, optimizeForFirstRender = false) {
+	if (optimizeForFirstRender) return;
+	const cur = States.get(ref);
+	if (!cur || cur.enabled !== enabled || keys) {
+		States.set(ref, {
+			...cur,
+			enabled,
+			keys
+		});
+	}
 }
-function subscribe(subscriber) {
-  listeners.add(subscriber);
-  return () => {
-    listeners.delete(subscriber);
-  };
+function mediaListenKeys(ref) {
+	if (ref.optimizeForFirstRender) return null;
+	return (ref.uid ? States.get(ref.uid)?.keys : void 0) || ref.keys;
 }
-function useMedia(componentContext, debug) {
-  "use no memo";
-
-  const internalRef = (0, import_react.useRef)(null);
-  if (!internalRef.current) {
-    const initial = (0, import_mediaState.getMedia)();
-    const r = {
-      keys: /* @__PURE__ */new Set(),
-      lastState: initial,
-      renderVersion: 0,
-      proxyTarget: initial,
-      proxy: void 0,
-      getSnapshot: void 0,
-      componentContext,
-      debug
-    };
-    const tracker = Object.create(getTouchTrackerProto());
-    tracker[refSlot] = {
-      proxyTarget: initial,
-      keys: r.keys
-    };
-    r.proxy = tracker;
-    r.getSnapshot = () => {
-      const curKeys = r.componentContext ? States.get(r.componentContext)?.keys || r.keys : r.keys;
-      const {
-        lastState,
-        pendingState
-      } = r;
-      if (!curKeys.size) {
-        return lastState;
-      }
-      const ms = (0, import_mediaState.getMedia)();
-      for (const key of curKeys) {
-        if (ms[key] !== (pendingState || lastState)[key]) {
-          if (process.env.NODE_ENV === "development" && r.debug) {
-            console.warn(`useMedia() \u270D\uFE0F`, key, lastState[key], "=>", ms[key]);
-          }
-          if (r.componentContext?.mediaEmit) {
-            r.componentContext.mediaEmit(ms);
-            r.pendingState = ms;
-            return lastState;
-          }
-          r.lastState = ms;
-          return ms;
-        }
-      }
-      return lastState;
-    };
-    internalRef.current = r;
-  } else {
-    internalRef.current.componentContext = componentContext;
-    internalRef.current.debug = debug;
-  }
-  const ref = internalRef.current;
-  ref.renderVersion++;
-  if (ref.pendingState) {
-    ref.lastState = ref.pendingState;
-    ref.pendingState = void 0;
-  }
-  if (ref.keys.size) {
-    ref.keys.clear();
-  }
-  const [, forceUpdate] = (0, import_react.useReducer)(incReducer, 0);
-  const state = import_constants.isServer ? initState : ref.getSnapshot();
-  ref.proxyTarget = state;
-  ref.proxy[refSlot].proxyTarget = state;
-  (0, import_react.useEffect)(() => {
-    const renderVersion = ref.renderVersion;
-    const shouldSubscribe = !ref.componentContext || !!States.get(ref.componentContext)?.enabled;
-    if (shouldSubscribe) {
-      if (!ref.unsubscribe) {
-        ref.unsubscribe = subscribe(() => {
-          const next = ref.getSnapshot();
-          if (next !== ref.proxyTarget) {
-            ref.proxyTarget = next;
-            ref.proxy[refSlot].proxyTarget = next;
-            forceUpdate();
-          }
-        });
-      }
-    } else if (ref.unsubscribe) {
-      ref.unsubscribe();
-      ref.unsubscribe = void 0;
-    }
-    return () => {
-      if (ref.renderVersion === renderVersion) {
-        ref.unsubscribe?.();
-        ref.unsubscribe = void 0;
-      }
-    };
-  });
-  return ref.proxy;
+function indexMediaListener(ref) {
+	const keys = mediaListenKeys(ref);
+	const cur = ref.listeningTo;
+	if (cur !== void 0 && sameMediaKeys(cur, keys)) return;
+	unindexMediaListener(ref);
+	const cb = ref.onChange;
+	if (keys === null) {
+		globalListeners.add(cb);
+		ref.listeningTo = null;
+		return;
+	}
+	ref.listeningTo = new Set(keys);
+	for (const key of keys) {
+		let bucket = listenersByKey.get(key);
+		if (!bucket) {
+			bucket = /* @__PURE__ */ new Set();
+			listenersByKey.set(key, bucket);
+		}
+		bucket.add(cb);
+	}
 }
-const incReducer = c => c + 1;
+function unindexMediaListener(ref) {
+	const keys = ref.listeningTo;
+	if (keys === void 0) return;
+	ref.listeningTo = void 0;
+	const cb = ref.onChange;
+	if (keys === null) {
+		globalListeners.delete(cb);
+		return;
+	}
+	for (const key of keys) {
+		const bucket = listenersByKey.get(key);
+		if (!bucket) continue;
+		bucket.delete(cb);
+		if (!bucket.size) listenersByKey.delete(key);
+	}
+}
+function sameMediaKeys(a, b) {
+	if (a === null || b === null) return a === b;
+	if (a.size !== b.size) return false;
+	for (const key of b) {
+		if (!a.has(key)) return false;
+	}
+	return true;
+}
+function useMedia(componentContext, debug, uid) {
+	"use no memo";
+	const internalRef = (0, import_react.useRef)(null);
+	if (!internalRef.current) {
+		const initial = import_constants.isWeb && !import_constants.isServer && !(0, import_config.getSetting)("disableSSR") ? initState : (0, import_mediaState.getMedia)();
+		const optimizeForFirstRender = (0, import_isOptimizedForFirstRender.isOptimizedForFirstRender)();
+		const r = {
+			keys: optimizeForFirstRender ? null : /* @__PURE__ */ new Set(),
+			lastState: initial,
+			renderVersion: 0,
+			proxyTarget: initial,
+			proxy: void 0,
+			getSnapshot: void 0,
+			componentContext,
+			uid,
+			debug,
+			optimizeForFirstRender
+		};
+		if (optimizeForFirstRender) {
+			r.proxy = initial;
+		} else {
+			const tracker = Object.create(getTouchTrackerProto());
+			tracker[refSlot] = {
+				proxyTarget: initial,
+				keys: r.keys
+			};
+			r.proxy = tracker;
+		}
+		r.getSnapshot = () => {
+			if (r.optimizeForFirstRender) {
+				const ms2 = (0, import_mediaState.getMedia)();
+				if (ms2 === r.lastState) {
+					return r.lastState;
+				}
+				if (r.componentContext?.mediaEmit) {
+					r.componentContext.mediaEmit(ms2);
+					r.pendingState = ms2;
+					return r.lastState;
+				}
+				r.lastState = ms2;
+				return ms2;
+			}
+			const curKeys = mediaListenKeys(r);
+			const { lastState, pendingState } = r;
+			if (!curKeys.size) {
+				return lastState;
+			}
+			const ms = (0, import_mediaState.getMedia)();
+			for (const key of curKeys) {
+				if (ms[key] !== (pendingState || lastState)[key]) {
+					if (process.env.NODE_ENV === "development" && r.debug) {
+						console.warn(`useMedia() \u270D\uFE0F`, key, lastState[key], "=>", ms[key]);
+					}
+					if (r.componentContext?.mediaEmit) {
+						r.componentContext.mediaEmit(ms);
+						r.pendingState = ms;
+						return lastState;
+					}
+					r.lastState = ms;
+					return ms;
+				}
+			}
+			return lastState;
+		};
+		internalRef.current = r;
+	} else {
+		internalRef.current.componentContext = componentContext;
+		internalRef.current.uid = uid;
+		internalRef.current.debug = debug;
+	}
+	const ref = internalRef.current;
+	ref.renderVersion++;
+	if (ref.pendingState) {
+		ref.lastState = ref.pendingState;
+		ref.pendingState = void 0;
+	}
+	if (ref.keys?.size) {
+		ref.keys.clear();
+	}
+	const [, forceUpdate] = (0, import_react.useReducer)(incReducer, 0);
+	const state = import_constants.isServer ? initState : ref.optimizeForFirstRender && ref.renderVersion === 1 ? ref.lastState : ref.getSnapshot();
+	ref.proxyTarget = state;
+	if (!ref.optimizeForFirstRender) {
+		;
+		ref.proxy[refSlot].proxyTarget = state;
+	}
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		const synced = ref.getSnapshot();
+		if (synced !== ref.proxyTarget) {
+			ref.proxyTarget = synced;
+			if (!ref.optimizeForFirstRender) {
+				;
+				ref.proxy[refSlot].proxyTarget = synced;
+			}
+			forceUpdate();
+		}
+	}, []);
+	(0, import_react.useEffect)(() => {
+		const renderVersion = ref.renderVersion;
+		const shouldSubscribe = ref.optimizeForFirstRender || !ref.uid || !!States.get(ref.uid)?.enabled;
+		if (shouldSubscribe) {
+			ref.onChange ||= () => {
+				const next = ref.getSnapshot();
+				if (next !== ref.proxyTarget) {
+					ref.proxyTarget = next;
+					if (!ref.optimizeForFirstRender) {
+						;
+						ref.proxy[refSlot].proxyTarget = next;
+					}
+					if (ref.uid?.nativeMediaUpdate?.(forceUpdate)) return;
+					forceUpdate();
+				}
+			};
+			indexMediaListener(ref);
+		} else {
+			unindexMediaListener(ref);
+		}
+		return () => {
+			if (ref.renderVersion === renderVersion) {
+				unindexMediaListener(ref);
+			}
+		};
+	});
+	return ref.optimizeForFirstRender ? state : ref.proxy;
+}
+const incReducer = (c) => c + 1;
 let disableMediaTouch = false;
 function _disableMediaTouch(val) {
-  disableMediaTouch = val;
+	disableMediaTouch = val;
 }
 function getMediaState(mediaGroups, layout) {
-  disableMediaTouch = true;
-  let res;
-  try {
-    res = Object.fromEntries([...mediaGroups].map(mediaKey => {
-      return [mediaKey, mediaKeyMatch(mediaKey, layout)];
-    }));
-  } finally {
-    disableMediaTouch = false;
-  }
-  return res;
+	disableMediaTouch = true;
+	let res;
+	try {
+		res = Object.fromEntries([...mediaGroups].map((mediaKey) => {
+			return [mediaKey, mediaKeyMatch(mediaKey, layout)];
+		}));
+	} finally {
+		disableMediaTouch = false;
+	}
+	return res;
 }
-const getMediaImportanceIfMoreImportant = (mediaKey, key, styleState, isSizeMedia) => {
-  const importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : import_pseudoDescriptors.defaultMediaImportance;
-  const usedKeys = styleState.usedKeys;
-  return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
-};
 const cachedMediaKeyToQuery = {};
 function mediaKeyToQuery(key) {
-  return cachedMediaKeyToQuery[key] || (cachedMediaKeyToQuery[key] = (0, import_mediaObjectToString.mediaObjectToString)(import_mediaState.mediaQueryConfig[key]));
+	return cachedMediaKeyToQuery[key] || (cachedMediaKeyToQuery[key] = (0, import_mediaObjectToString.mediaObjectToString)(import_mediaState.mediaQueryConfig[key]));
 }
 function mediaKeyMatch(key, dimensions) {
-  const mediaQueries = import_mediaState.mediaQueryConfig[key];
-  const result = Object.keys(mediaQueries).every(query => {
-    const expectedVal = +mediaQueries[query];
-    const isMax = query.startsWith("max");
-    const isWidth = query.endsWith("Width");
-    const givenVal = dimensions[isWidth ? "width" : "height"];
-    return isMax ? givenVal < expectedVal : givenVal > expectedVal;
-  });
-  return result;
-}
+	const mediaQueries = import_mediaState.mediaQueryConfig[key];
+	for (const query in mediaQueries) {
+		const expectedVal = +mediaQueries[query];
+		const isMax = query.startsWith("max");
+		const isWidth = query.endsWith("Width");
+		const givenVal = dimensions[isWidth ? "width" : "height"];
+		if (isMax ? givenVal >= expectedVal : givenVal <= expectedVal) {
+			return false;
+		}
+	}
+	return true;
+}