@tamagui/web 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/hooks/useMedia.cjs

@@ -3,26 +3,27 @@ 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: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  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;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var useMedia_exports = {};
 __export(useMedia_exports, {
   _disableMediaTouch: () => _disableMediaTouch,
   configureMedia: () => configureMedia,
-  getMedia: () => getMedia,
   getMediaImportanceIfMoreImportant: () => getMediaImportanceIfMoreImportant,
   getMediaKey: () => getMediaKey,
   getMediaKeyImportance: () => getMediaKeyImportance,
@@ -30,174 +31,208 @@ __export(useMedia_exports, {
   isMediaKey: () => isMediaKey,
   mediaKeyMatch: () => mediaKeyMatch,
   mediaKeyToQuery: () => mediaKeyToQuery,
-  mediaKeys: () => mediaKeys,
-  mediaObjectToString: () => mediaObjectToString,
-  mediaQueryConfig: () => mediaQueryConfig,
-  mediaState: () => mediaState,
   setMediaShouldUpdate: () => setMediaShouldUpdate,
   setupMediaListeners: () => setupMediaListeners,
   updateMediaListeners: () => updateMediaListeners,
   useMedia: () => useMedia
 });
 module.exports = __toCommonJS(useMedia_exports);
-var import_constants = require("@tamagui/constants"),
-  import_react = require("react"),
-  import_config = require("../config.cjs"),
-  import_createMediaStyle = require("../helpers/createMediaStyle.cjs"),
-  import_matchMedia = require("../helpers/matchMedia.cjs"),
-  import_pseudoDescriptors = require("../helpers/pseudoDescriptors.cjs");
-let mediaState =
-// development only safeguard
-process.env.NODE_ENV === "development" ? new Proxy({}, {
-  get(target, key) {
-    if (typeof key == "string" && key[0] === "$" &&
-    // dont error on $$typeof
-    key[1] !== "$") throw new Error(`Access mediaState should not use "$": ${key}`);
-    return Reflect.get(target, key);
-  }
-}) : {};
-const mediaQueryConfig = {},
-  getMedia = () => mediaState,
-  mediaKeys = /* @__PURE__ */new Set(),
-  mediaKeyRegex = /\$(platform|theme|group)-/,
-  isMediaKey = key => key[0] !== "$" ? !1 : !!(mediaKeys.has(key) || mediaKeyRegex.test(key)),
-  getMediaKey = key => {
-    if (key[0] !== "$") return !1;
-    if (mediaKeys.has(key)) return !0;
-    const match = key.match(mediaKeyRegex);
-    return match ? match[1] : !1;
-  };
-let initState, mediaKeysOrdered;
+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_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;
+let mediaKeysOrdered;
 const getMediaKeyImportance = key => {
-    if (process.env.NODE_ENV === "development" && key[0] === "$") throw new Error("use short key");
-    return mediaKeysOrdered.indexOf(key) + 100;
-  },
-  dispose = /* @__PURE__ */new Set();
+  if (process.env.NODE_ENV === "development" && key[0] === "$") {
+    throw new Error("use short key");
+  }
+  return mediaKeysOrdered.indexOf(key) + 100;
+};
+const dispose = /* @__PURE__ */new Set();
 let mediaVersion = 0;
 const configureMedia = config => {
   const {
-      media
-    } = config,
-    mediaQueryDefaultActive = (0, import_config.getSetting)("mediaQueryDefaultActive");
-  if (media) {
-    mediaVersion++, (0, import_createMediaStyle.resetMediaStyleCache)();
-    for (const key in media) mediaState[key] = mediaQueryDefaultActive?.[key] || !1, mediaKeys.add(`$${key}`);
-    Object.assign(mediaQueryConfig, media), initState = {
-      ...mediaState
-    }, mediaKeysOrdered = Object.keys(media), setupMediaListeners();
+    media
+  } = config;
+  const mediaQueryDefaultActive = (0, import_config.getSetting)("mediaQueryDefaultActive");
+  if (!media) return;
+  mediaVersion++;
+  (0, import_createMediaStyle.resetMediaStyleCache)();
+  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)()
+  };
+  mediaKeysOrdered = Object.keys(media);
+  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) && !process.env.IS_STATIC && setupVersion !== mediaVersion) {
-    setupVersion = mediaVersion, unlisten();
-    for (const key in mediaQueryConfig) {
-      let update = function () {
-        const next = !!getMatch().matches;
-        next !== mediaState[key] && (mediaState = {
-          ...mediaState,
-          [key]: next
-        }, updateMediaListeners());
-      };
-      const str = mediaObjectToString(mediaQueryConfig[key], key),
-        getMatch = () => (0, import_matchMedia.matchMedia)(str),
-        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("\u26A0\uFE0F No match");
     }
+    match.addListener(update);
+    dispose.add(() => {
+      match.removeListener(update);
+    });
+    update();
   }
 }
 const listeners = /* @__PURE__ */new Set();
 function updateMediaListeners() {
-  listeners.forEach(cb => cb(mediaState));
+  listeners.forEach(cb => cb((0, import_mediaState.getMedia)()));
 }
 const States = /* @__PURE__ */new WeakMap();
 function setMediaShouldUpdate(ref, enabled, keys) {
   const cur = States.get(ref);
-  (!cur || cur.enabled !== enabled || keys) && States.set(ref, {
-    ...cur,
-    enabled,
-    keys
-  });
+  if (!cur || cur.enabled !== enabled || keys) {
+    States.set(ref, {
+      ...cur,
+      enabled,
+      keys
+    });
+  }
 }
 function subscribe(subscriber) {
-  return listeners.add(subscriber), () => {
+  listeners.add(subscriber);
+  return () => {
     listeners.delete(subscriber);
   };
 }
 function useMedia(componentContext, debug) {
-  const componentState = componentContext ? States.get(componentContext) : null,
-    internalRef = (0, import_react.useRef)(null);
-  internalRef.current || (internalRef.current = {
-    keys: /* @__PURE__ */new Set(),
-    lastState: mediaState
-  }), internalRef.current.pendingState && (internalRef.current.lastState = internalRef.current.pendingState, internalRef.current.pendingState = void 0);
+  "use no memo";
+
+  const componentState = componentContext ? States.get(componentContext) : null;
+  const internalRef = (0, import_react.useRef)(null);
+  if (!internalRef.current) {
+    internalRef.current = {
+      keys: /* @__PURE__ */new Set(),
+      lastState: (0, import_mediaState.getMedia)()
+    };
+  }
+  if (internalRef.current.pendingState) {
+    internalRef.current.lastState = internalRef.current.pendingState;
+    internalRef.current.pendingState = void 0;
+  }
   const {
     keys
   } = internalRef.current;
-  keys.size && keys.clear();
+  if (keys.size) {
+    keys.clear();
+  }
   const state = (0, import_react.useSyncExternalStore)(subscribe, () => {
-    const curKeys = componentState?.keys || keys,
-      {
-        lastState,
-        pendingState
-      } = internalRef.current;
-    if (!curKeys.size) return lastState;
-    for (const key of curKeys) if (mediaState[key] !== (pendingState || lastState)[key]) return process.env.NODE_ENV === "development" && debug && console.warn("useMedia() \u270D\uFE0F", key, lastState[key], "=>", mediaState[key]), componentContext?.mediaEmit ? (componentContext.mediaEmit(mediaState), internalRef.current.pendingState = mediaState, lastState) : (internalRef.current.lastState = mediaState, mediaState);
+    const curKeys = componentState?.keys || keys;
+    const {
+      lastState,
+      pendingState
+    } = internalRef.current;
+    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" && debug) {
+          console.warn(`useMedia() \u270D\uFE0F`, key, lastState[key], "=>", ms[key]);
+        }
+        if (componentContext?.mediaEmit) {
+          componentContext.mediaEmit(ms);
+          internalRef.current.pendingState = ms;
+          return lastState;
+        }
+        internalRef.current.lastState = ms;
+        return ms;
+      }
+    }
     return lastState;
   }, getServerSnapshot);
   return new Proxy(state, {
     get(_, key) {
-      return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state, key);
+      if (!disableMediaTouch && typeof key === "string") {
+        keys.add(key);
+      }
+      return Reflect.get(state, key);
     }
   });
 }
 const getServerSnapshot = () => initState;
-let disableMediaTouch = !1;
+let disableMediaTouch = false;
 function _disableMediaTouch(val) {
   disableMediaTouch = val;
 }
 function getMediaState(mediaGroups, layout) {
-  disableMediaTouch = !0;
+  disableMediaTouch = true;
   let res;
   try {
-    res = Object.fromEntries([...mediaGroups].map(mediaKey => [mediaKey, mediaKeyMatch(mediaKey, layout)]));
+    res = Object.fromEntries([...mediaGroups].map(mediaKey => {
+      return [mediaKey, mediaKeyMatch(mediaKey, layout)];
+    }));
   } finally {
-    disableMediaTouch = !1;
+    disableMediaTouch = false;
   }
   return res;
 }
 const getMediaImportanceIfMoreImportant = (mediaKey, key, styleState, isSizeMedia) => {
-  const importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : import_pseudoDescriptors.defaultMediaImportance,
-    usedKeys = styleState.usedKeys;
+  const importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : import_pseudoDescriptors.defaultMediaImportance;
+  const usedKeys = styleState.usedKeys;
   return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
 };
-function camelToHyphen(str) {
-  return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).toLowerCase();
-}
-const cache = /* @__PURE__ */new WeakMap(),
-  cachedMediaKeyToQuery = {};
-function mediaObjectToString(query, key) {
-  if (typeof query == "string") return query;
-  if (cache.has(query)) return cache.get(query);
-  const res = Object.entries(query).map(([feature, value]) => (feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`))).join(" and ");
-  return key && (cachedMediaKeyToQuery[key] = res), cache.set(query, res), res;
-}
+const cachedMediaKeyToQuery = {};
 function mediaKeyToQuery(key) {
-  return cachedMediaKeyToQuery[key] || mediaObjectToString(mediaQueryConfig[key], key);
+  return cachedMediaKeyToQuery[key] || (cachedMediaKeyToQuery[key] = (0, import_mediaObjectToString.mediaObjectToString)(import_mediaState.mediaQueryConfig[key]));
 }
 function mediaKeyMatch(key, dimensions) {
-  const mediaQueries = mediaQueryConfig[key];
-  return Object.keys(mediaQueries).every(query => {
-    const expectedVal = +mediaQueries[query],
-      isMax = query.startsWith("max"),
-      isWidth = query.endsWith("Width"),
-      givenVal = dimensions[isWidth ? "width" : "height"];
+  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;
 }