@tamagui/core 1.0.1-beta.193 → 1.0.1-beta.194

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (220) hide show
  1. package/dist/cjs/Tamagui.js +4 -2
  2. package/dist/cjs/Tamagui.js.map +2 -2
  3. package/dist/cjs/config.js +1 -2
  4. package/dist/cjs/config.js.map +2 -2
  5. package/dist/cjs/constants/constants.js +13 -8
  6. package/dist/cjs/constants/constants.js.map +2 -2
  7. package/dist/cjs/contexts/TextAncestorContext.js +3 -16
  8. package/dist/cjs/contexts/TextAncestorContext.js.map +3 -3
  9. package/dist/cjs/createComponent.js +194 -289
  10. package/dist/cjs/createComponent.js.map +2 -2
  11. package/dist/cjs/createTamagui.js +15 -16
  12. package/dist/cjs/createTamagui.js.map +3 -3
  13. package/dist/cjs/createVariable.js +1 -2
  14. package/dist/cjs/createVariable.js.map +2 -2
  15. package/dist/cjs/helpers/ThemeManager.js +7 -14
  16. package/dist/cjs/helpers/ThemeManager.js.map +2 -2
  17. package/dist/cjs/helpers/{createShallowUpdate.js → cache.js} +20 -21
  18. package/dist/cjs/helpers/cache.js.map +7 -0
  19. package/dist/cjs/helpers/createMediaStyle.js +14 -8
  20. package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
  21. package/dist/cjs/helpers/extendStaticConfig.js +0 -1
  22. package/dist/cjs/helpers/extendStaticConfig.js.map +2 -2
  23. package/dist/cjs/helpers/getSplitStyles.js +212 -93
  24. package/dist/cjs/helpers/getSplitStyles.js.map +3 -3
  25. package/dist/cjs/helpers/getStylesAtomic.js +16 -36
  26. package/dist/cjs/helpers/getStylesAtomic.js.map +3 -3
  27. package/dist/cjs/helpers/insertStyleRule.js +14 -6
  28. package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
  29. package/dist/cjs/helpers/matchMedia.js.map +2 -2
  30. package/dist/cjs/helpers/mergeTransform.js.map +1 -1
  31. package/dist/cjs/helpers/normalizeValueWithProperty.js +32 -2
  32. package/dist/cjs/helpers/normalizeValueWithProperty.js.map +2 -2
  33. package/dist/cjs/helpers/useShallowSetState.js.map +2 -2
  34. package/dist/cjs/hooks/getThemeUnwrapped.js +1 -3
  35. package/dist/cjs/hooks/getThemeUnwrapped.js.map +2 -2
  36. package/dist/cjs/hooks/useElementLayout.js +92 -0
  37. package/dist/cjs/hooks/useElementLayout.js.map +7 -0
  38. package/dist/cjs/hooks/useIsTouchDevice.js +2 -10
  39. package/dist/cjs/hooks/useIsTouchDevice.js.map +2 -2
  40. package/dist/cjs/hooks/useMedia.js +77 -84
  41. package/dist/cjs/hooks/useMedia.js.map +2 -2
  42. package/dist/cjs/hooks/useMedia.test.js +2 -0
  43. package/dist/cjs/{helpers/validate.js.map → hooks/useMedia.test.js.map} +0 -0
  44. package/dist/cjs/hooks/usePressablePressResponder.js +370 -0
  45. package/dist/cjs/hooks/usePressablePressResponder.js.map +7 -0
  46. package/dist/cjs/hooks/useSafeRef.js +13 -15
  47. package/dist/cjs/hooks/useSafeRef.js.map +2 -2
  48. package/dist/cjs/hooks/useTheme.js +3 -4
  49. package/dist/cjs/hooks/useTheme.js.map +2 -2
  50. package/dist/cjs/index.js +1 -17
  51. package/dist/cjs/index.js.map +2 -2
  52. package/dist/cjs/static.js +0 -20
  53. package/dist/cjs/static.js.map +2 -2
  54. package/dist/cjs/styled.js +4 -22
  55. package/dist/cjs/styled.js.map +2 -2
  56. package/dist/cjs/types.js.map +1 -1
  57. package/dist/cjs/{hooks/useIsSSR.js → views/AbsoluteFill.js} +18 -23
  58. package/dist/cjs/views/AbsoluteFill.js.map +7 -0
  59. package/dist/cjs/views/AbsoluteFill.native.js +45 -0
  60. package/dist/cjs/views/AbsoluteFill.native.js.map +7 -0
  61. package/dist/cjs/views/FontLanguage.native.js.map +2 -2
  62. package/dist/cjs/views/Stack.js.map +1 -1
  63. package/dist/cjs/views/TamaguiProvider.js +3 -2
  64. package/dist/cjs/views/TamaguiProvider.js.map +2 -2
  65. package/dist/cjs/views/Text.js.map +1 -1
  66. package/dist/cjs/views/ThemeReset.js +10 -10
  67. package/dist/cjs/views/ThemeReset.js.map +2 -2
  68. package/dist/esm/Tamagui.js +4 -2
  69. package/dist/esm/Tamagui.js.map +2 -2
  70. package/dist/esm/config.js +1 -2
  71. package/dist/esm/config.js.map +2 -2
  72. package/dist/esm/constants/constants.js +11 -7
  73. package/dist/esm/constants/constants.js.map +2 -2
  74. package/dist/esm/contexts/TextAncestorContext.js +2 -13
  75. package/dist/esm/contexts/TextAncestorContext.js.map +2 -2
  76. package/dist/esm/createComponent.js +193 -291
  77. package/dist/esm/createComponent.js.map +2 -2
  78. package/dist/esm/createTamagui.js +15 -16
  79. package/dist/esm/createTamagui.js.map +3 -3
  80. package/dist/esm/createVariable.js +1 -2
  81. package/dist/esm/createVariable.js.map +2 -2
  82. package/dist/esm/helpers/ThemeManager.js +7 -14
  83. package/dist/esm/helpers/ThemeManager.js.map +2 -2
  84. package/dist/esm/helpers/cache.js +18 -0
  85. package/dist/esm/helpers/cache.js.map +7 -0
  86. package/dist/esm/helpers/createMediaStyle.js +14 -8
  87. package/dist/esm/helpers/createMediaStyle.js.map +2 -2
  88. package/dist/esm/helpers/extendStaticConfig.js +0 -1
  89. package/dist/esm/helpers/extendStaticConfig.js.map +2 -2
  90. package/dist/esm/helpers/getSplitStyles.js +221 -94
  91. package/dist/esm/helpers/getSplitStyles.js.map +3 -3
  92. package/dist/esm/helpers/getStylesAtomic.js +13 -26
  93. package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
  94. package/dist/esm/helpers/insertStyleRule.js +14 -6
  95. package/dist/esm/helpers/insertStyleRule.js.map +2 -2
  96. package/dist/esm/helpers/matchMedia.js.map +2 -2
  97. package/dist/esm/helpers/mergeTransform.js.map +1 -1
  98. package/dist/esm/helpers/normalizeValueWithProperty.js +30 -1
  99. package/dist/esm/helpers/normalizeValueWithProperty.js.map +2 -2
  100. package/dist/esm/helpers/useShallowSetState.js.map +2 -2
  101. package/dist/esm/hooks/getThemeUnwrapped.js +1 -3
  102. package/dist/esm/hooks/getThemeUnwrapped.js.map +2 -2
  103. package/dist/esm/hooks/useElementLayout.js +66 -0
  104. package/dist/esm/hooks/useElementLayout.js.map +7 -0
  105. package/dist/esm/hooks/useIsTouchDevice.js +3 -11
  106. package/dist/esm/hooks/useIsTouchDevice.js.map +2 -2
  107. package/dist/esm/hooks/useMedia.js +74 -83
  108. package/dist/esm/hooks/useMedia.js.map +2 -2
  109. package/dist/esm/hooks/useMedia.test.js +1 -0
  110. package/dist/esm/{helpers/validate.js.map → hooks/useMedia.test.js.map} +0 -0
  111. package/dist/esm/hooks/usePressablePressResponder.js +346 -0
  112. package/dist/esm/hooks/usePressablePressResponder.js.map +7 -0
  113. package/dist/esm/hooks/useSafeRef.js +13 -15
  114. package/dist/esm/hooks/useSafeRef.js.map +2 -2
  115. package/dist/esm/hooks/useTheme.js +3 -4
  116. package/dist/esm/hooks/useTheme.js.map +2 -2
  117. package/dist/esm/index.js +1 -14
  118. package/dist/esm/index.js.map +2 -2
  119. package/dist/esm/static.js +0 -14
  120. package/dist/esm/static.js.map +2 -2
  121. package/dist/esm/styled.js +4 -22
  122. package/dist/esm/styled.js.map +2 -2
  123. package/dist/esm/views/AbsoluteFill.js +17 -0
  124. package/dist/esm/views/AbsoluteFill.js.map +7 -0
  125. package/dist/esm/views/AbsoluteFill.native.js +21 -0
  126. package/dist/esm/views/AbsoluteFill.native.js.map +7 -0
  127. package/dist/esm/views/FontLanguage.native.js.map +2 -2
  128. package/dist/esm/views/Stack.js.map +1 -1
  129. package/dist/esm/views/TamaguiProvider.js +5 -4
  130. package/dist/esm/views/TamaguiProvider.js.map +2 -2
  131. package/dist/esm/views/Text.js.map +1 -1
  132. package/dist/esm/views/ThemeReset.js +10 -10
  133. package/dist/esm/views/ThemeReset.js.map +2 -2
  134. package/package.json +14 -14
  135. package/src/Tamagui.ts +7 -3
  136. package/src/config.ts +2 -3
  137. package/src/constants/constants.ts +10 -6
  138. package/src/contexts/TextAncestorContext.tsx +1 -8
  139. package/src/createComponent.tsx +248 -418
  140. package/src/createTamagui.ts +16 -19
  141. package/src/createVariable.ts +1 -3
  142. package/src/helpers/ThemeManager.tsx +7 -15
  143. package/src/helpers/cache.ts +18 -0
  144. package/src/helpers/createMediaStyle.ts +16 -9
  145. package/src/helpers/extendStaticConfig.ts +0 -1
  146. package/src/helpers/getSplitStyles.tsx +257 -151
  147. package/src/helpers/getStylesAtomic.ts +14 -34
  148. package/src/helpers/insertStyleRule.tsx +16 -8
  149. package/src/helpers/matchMedia.ts +1 -0
  150. package/src/helpers/mergeTransform.ts +1 -1
  151. package/src/helpers/normalizeValueWithProperty.ts +30 -0
  152. package/src/helpers/useShallowSetState.tsx +0 -1
  153. package/src/hooks/getThemeUnwrapped.tsx +1 -2
  154. package/src/hooks/useElementLayout.tsx +90 -0
  155. package/src/hooks/useIsTouchDevice.tsx +3 -17
  156. package/src/hooks/useMedia.tsx +80 -87
  157. package/src/hooks/useSafeRef.ts +17 -18
  158. package/src/hooks/useTheme.tsx +4 -4
  159. package/src/index.ts +1 -11
  160. package/src/static.ts +0 -10
  161. package/src/styled.tsx +15 -33
  162. package/src/types.tsx +58 -55
  163. package/src/views/FontLanguage.native.tsx +1 -0
  164. package/src/views/Stack.tsx +1 -1
  165. package/src/views/TamaguiProvider.tsx +5 -5
  166. package/src/views/Text.tsx +1 -1
  167. package/src/views/ThemeReset.tsx +11 -11
  168. package/types/Tamagui.d.ts +6 -4
  169. package/types/constants/constants.d.ts +14 -3
  170. package/types/contexts/TextAncestorContext.d.ts +1 -3
  171. package/types/createComponent.d.ts +0 -15
  172. package/types/helpers/ThemeManager.d.ts +2 -3
  173. package/types/helpers/cache.d.ts +12 -0
  174. package/types/helpers/calc.d.ts +0 -16
  175. package/types/helpers/createMediaStyle.d.ts +1 -1
  176. package/types/helpers/getSplitStyles.d.ts +6 -10
  177. package/types/helpers/getStylesAtomic.d.ts +1 -5
  178. package/types/helpers/insertStyleRule.d.ts +2 -2
  179. package/types/helpers/mergeTransform.d.ts +1 -1
  180. package/types/helpers/normalizeValueWithProperty.d.ts +1 -0
  181. package/types/hooks/useElementLayout.d.ts +27 -0
  182. package/types/hooks/useMedia.d.ts +3 -1
  183. package/types/hooks/useMedia.test.d.ts +1 -0
  184. package/types/hooks/usePressablePressResponder.d.ts +84 -0
  185. package/types/index.d.ts +1 -11
  186. package/types/static.d.ts +0 -1
  187. package/types/types.d.ts +42 -44
  188. package/types/views/AbsoluteFill.d.ts +5 -0
  189. package/types/views/AbsoluteFill.native.d.ts +3 -0
  190. package/types/views/Stack.d.ts +1 -1
  191. package/types/views/Text.d.ts +1 -1
  192. package/dist/cjs/constants/platform.js +0 -74
  193. package/dist/cjs/constants/platform.js.map +0 -7
  194. package/dist/cjs/constants/platform.native.js +0 -62
  195. package/dist/cjs/constants/platform.native.js.map +0 -7
  196. package/dist/cjs/helpers/createShallowUpdate.js.map +0 -7
  197. package/dist/cjs/helpers/validate.js +0 -2
  198. package/dist/cjs/hooks/useDidFinishSSR.js +0 -60
  199. package/dist/cjs/hooks/useDidFinishSSR.js.map +0 -7
  200. package/dist/cjs/hooks/useIsSSR.js.map +0 -7
  201. package/dist/esm/constants/platform.js +0 -39
  202. package/dist/esm/constants/platform.js.map +0 -7
  203. package/dist/esm/constants/platform.native.js +0 -28
  204. package/dist/esm/constants/platform.native.js.map +0 -7
  205. package/dist/esm/helpers/createShallowUpdate.js +0 -20
  206. package/dist/esm/helpers/createShallowUpdate.js.map +0 -7
  207. package/dist/esm/helpers/validate.js +0 -1
  208. package/dist/esm/hooks/useDidFinishSSR.js +0 -35
  209. package/dist/esm/hooks/useDidFinishSSR.js.map +0 -7
  210. package/dist/esm/hooks/useIsSSR.js +0 -22
  211. package/dist/esm/hooks/useIsSSR.js.map +0 -7
  212. package/src/helpers/assignNativePropsToWeb.tsx +0 -178
  213. package/src/helpers/calc.ts +0 -68
  214. package/src/helpers/getFont.tsx +0 -43
  215. package/src/helpers/getStackSize.ts +0 -22
  216. package/src/helpers/startTransition.ts +0 -4
  217. package/src/hooks/useConstant.tsx +0 -19
  218. package/src/hooks/useIsMounted.ts +0 -16
  219. package/src/hooks/usePressable.tsx +0 -9
  220. package/src/hooks/useUnmountEffect.ts +0 -5
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/hooks/useElementLayout.tsx"],
4
+ "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { getBoundingClientRect } from '@tamagui/react-native-use-responder-events'\nimport { useEvent } from '@tamagui/use-event'\nimport { RefObject } from 'react'\n\nconst LayoutHandlers = new WeakMap<Element, Function>()\n\nexport type LayoutValue = {\n x: number\n y: number\n width: number\n height: number\n left: number\n top: number\n}\n\nexport type LayoutEvent = {\n nativeEvent: {\n layout: LayoutValue\n target: any\n }\n timeStamp: number\n}\n\nlet resizeObserver: ResizeObserver | null = null\n\nif (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n resizeObserver = new ResizeObserver((entries) => {\n for (const { target } of entries) {\n const onLayout = LayoutHandlers.get(target)\n if (typeof onLayout !== 'function') return\n measureLayout(target as HTMLElement, null, (x, y, width, height, left, top) => {\n onLayout({\n nativeEvent: {\n layout: { x, y, width, height, left, top },\n target,\n },\n timeStamp: Date.now(),\n })\n })\n }\n })\n}\n\nexport const getRect = (node: HTMLElement) => {\n const rect = getBoundingClientRect(node)\n if (!rect) return\n const { x, y, top, left } = rect\n return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left }\n}\n\nexport const measureLayout = (\n node: HTMLElement,\n relativeTo: HTMLElement | null,\n callback: Function\n) => {\n const relativeNode = relativeTo || node?.parentNode\n if (relativeNode instanceof HTMLElement) {\n setTimeout(() => {\n const relativeRect = getBoundingClientRect(relativeNode)!\n const { height, left, top, width } = getRect(node)!\n const x = left - relativeRect.left\n const y = top - relativeRect.top\n callback(x, y, width, height, left, top)\n }, 0)\n }\n}\n\nconst idFn = () => {}\n\nexport function useElementLayout(\n ref: RefObject<Element>,\n onLayout?: ((e: LayoutEvent) => void) | null\n) {\n const hasLayoutEvent = !!onLayout\n const onLayoutEvent = useEvent(onLayout || idFn)\n\n // Observing is done in a separate effect to avoid this effect running\n // when 'onLayout' changes.\n useIsomorphicLayoutEffect(() => {\n if (!resizeObserver || !hasLayoutEvent) return\n const node = ref.current\n if (!node) return\n LayoutHandlers.set(node, onLayoutEvent)\n resizeObserver.observe(node)\n return () => {\n resizeObserver?.unobserve(node)\n }\n }, [ref, hasLayoutEvent])\n}\n"],
5
+ "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AAGzB,MAAM,iBAAiB,oBAAI,QAA2B;AAmBtD,IAAI,iBAAwC;AAE5C,IAAI,OAAO,WAAW,eAAe,oBAAoB,QAAQ;AAC/D,mBAAiB,IAAI,eAAe,CAAC,YAAY;AAC/C,eAAW,EAAE,OAAO,KAAK,SAAS;AAChC,YAAM,WAAW,eAAe,IAAI,MAAM;AAC1C,UAAI,OAAO,aAAa;AAAY;AACpC,oBAAc,QAAuB,MAAM,CAAC,GAAG,GAAG,OAAO,QAAQ,MAAM,QAAQ;AAC7E,iBAAS;AAAA,UACP,aAAa;AAAA,YACX,QAAQ,EAAE,GAAG,GAAG,OAAO,QAAQ,MAAM,IAAI;AAAA,YACzC;AAAA,UACF;AAAA,UACA,WAAW,KAAK,IAAI;AAAA,QACtB,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACH;AAEO,MAAM,UAAU,CAAC,SAAsB;AAC5C,QAAM,OAAO,sBAAsB,IAAI;AACvC,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,GAAG,GAAG,KAAK,KAAK,IAAI;AAC5B,SAAO,EAAE,GAAG,GAAG,OAAO,KAAK,aAAa,QAAQ,KAAK,cAAc,KAAK,KAAK;AAC/E;AAEO,MAAM,gBAAgB,CAC3B,MACA,YACA,aACG;AACH,QAAM,eAAe,eAAc,6BAAM;AACzC,MAAI,wBAAwB,aAAa;AACvC,eAAW,MAAM;AACf,YAAM,eAAe,sBAAsB,YAAY;AACvD,YAAM,EAAE,QAAQ,MAAM,KAAK,MAAM,IAAI,QAAQ,IAAI;AACjD,YAAM,IAAI,OAAO,aAAa;AAC9B,YAAM,IAAI,MAAM,aAAa;AAC7B,eAAS,GAAG,GAAG,OAAO,QAAQ,MAAM,GAAG;AAAA,IACzC,GAAG,CAAC;AAAA,EACN;AACF;AAEA,MAAM,OAAO,MAAM;AAAC;AAEb,SAAS,iBACd,KACA,UACA;AACA,QAAM,iBAAiB,CAAC,CAAC;AACzB,QAAM,gBAAgB,SAAS,YAAY,IAAI;AAI/C,4BAA0B,MAAM;AAC9B,QAAI,CAAC,kBAAkB,CAAC;AAAgB;AACxC,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC;AAAM;AACX,mBAAe,IAAI,MAAM,aAAa;AACtC,mBAAe,QAAQ,IAAI;AAC3B,WAAO,MAAM;AACX,uDAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,CAAC;AAC1B;",
6
+ "names": []
7
+ }
@@ -1,15 +1,7 @@
1
- import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
2
- import { useState } from "react";
1
+ import { isTouchable, isWeb } from "@tamagui/constants";
2
+ import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
3
3
  const useIsTouchDevice = () => {
4
- const [touchOnly, setTouchOnly] = useState(false);
5
- if (isWeb && !isServer) {
6
- useIsomorphicLayoutEffect(() => {
7
- if (isTouchable) {
8
- setTouchOnly(true);
9
- }
10
- }, []);
11
- }
12
- return touchOnly;
4
+ return !isWeb ? true : useDidFinishSSR() ? isTouchable : false;
13
5
  };
14
6
  export {
15
7
  useIsTouchDevice
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/useIsTouchDevice.tsx"],
4
- "sourcesContent": ["import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useState } from 'react'\n\n// ssr friendly\n\nexport const useIsTouchDevice = () => {\n const [touchOnly, setTouchOnly] = useState(false)\n\n if (isWeb && !isServer) {\n // only ever false on web SSR (env), so run effect conditionally\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useIsomorphicLayoutEffect(() => {\n if (isTouchable) {\n setTouchOnly(true)\n }\n }, [])\n }\n\n return touchOnly\n}\n"],
5
- "mappings": "AAAA,SAAS,UAAU,aAAa,OAAO,iCAAiC;AACxE,SAAS,gBAAgB;AAIlB,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,MAAI,SAAS,CAAC,UAAU;AAGtB,8BAA0B,MAAM;AAC9B,UAAI,aAAa;AACf,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
4
+ "sourcesContent": ["import { isTouchable, isWeb } from '@tamagui/constants'\nimport { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'\n\nexport const useIsTouchDevice = () => {\n return !isWeb ? true : useDidFinishSSR() ? isTouchable : false\n}\n"],
5
+ "mappings": "AAAA,SAAS,aAAa,aAAa;AACnC,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,MAAM;AACpC,SAAO,CAAC,QAAQ,OAAO,gBAAgB,IAAI,cAAc;AAC3D;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
1
  import { useIsomorphicLayoutEffect } from "@tamagui/constants";
2
- import { startTransition, useEffect, useMemo, useState } from "react";
2
+ import { useEffect, useMemo, useState } from "react";
3
3
  import { getConfig } from "../config";
4
4
  import { createProxy } from "../helpers/createProxy";
5
5
  import { matchMedia } from "../helpers/matchMedia";
@@ -15,31 +15,30 @@ const mediaState = process.env.NODE_ENV === "development" ? createProxy(
15
15
  }
16
16
  }
17
17
  ) : {};
18
- const mediaQueryListeners = {};
18
+ const listeners = {};
19
19
  function addMediaQueryListener(key, cb) {
20
20
  if (process.env.NODE_ENV === "development" && key[0] === "$") {
21
21
  console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`);
22
22
  }
23
- mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
24
- mediaQueryListeners[key].add(cb);
23
+ listeners[key] = listeners[key] || /* @__PURE__ */ new Set();
24
+ listeners[key].add(cb);
25
25
  return () => removeMediaQueryListener(key, cb);
26
26
  }
27
27
  function removeMediaQueryListener(key, cb) {
28
28
  var _a;
29
- (_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
29
+ (_a = listeners[key]) == null ? void 0 : _a.delete(cb);
30
30
  }
31
31
  const mediaQueryConfig = {};
32
32
  const getMedia = () => {
33
33
  return mediaState;
34
34
  };
35
- let currentMediaState;
36
- let initialMediaState;
35
+ let curState;
36
+ let initState;
37
37
  const getInitialMediaState = () => {
38
- if (getConfig().disableSSR) {
39
- return currentMediaState || {};
40
- }
41
- return initialMediaState || {};
38
+ return (getConfig().disableSSR ? curState : initState) || {};
42
39
  };
40
+ let mediaKeysOrdered;
41
+ const getMediaKeyImportance = (key) => mediaKeysOrdered.indexOf(key[0] === "$" ? key.slice(1) : key) + 2;
43
42
  const dispose = /* @__PURE__ */ new Set();
44
43
  const configureMedia = (config) => {
45
44
  const { media, mediaQueryDefaultActive } = config;
@@ -49,8 +48,9 @@ const configureMedia = (config) => {
49
48
  mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false;
50
49
  }
51
50
  Object.assign(mediaQueryConfig, media);
52
- currentMediaState = { ...mediaState };
53
- initialMediaState = currentMediaState;
51
+ curState = { ...mediaState };
52
+ initState = curState;
53
+ mediaKeysOrdered = Object.keys(media);
54
54
  if (config.disableSSR) {
55
55
  setupMediaListeners();
56
56
  }
@@ -67,119 +67,108 @@ function setupMediaListeners() {
67
67
  }
68
68
  configuredKey = nextKey;
69
69
  unlisten();
70
- startTransition(() => {
71
- for (const key in mediaQueryConfig) {
72
- let update2 = function() {
73
- const next = !!getMatch().matches;
74
- if (next === mediaState[key])
75
- return;
76
- mediaState[key] = next;
77
- currentMediaState = { ...mediaState };
78
- const listeners = mediaQueryListeners[key];
79
- if (listeners == null ? void 0 : listeners.size) {
80
- listeners.forEach((cb) => cb(next));
81
- }
82
- };
83
- var update = update2;
84
- const str = mediaObjectToString(mediaQueryConfig[key]);
85
- const getMatch = () => matchMedia(str);
86
- const match = getMatch();
87
- if (!match) {
88
- throw new Error("\u26A0\uFE0F No match");
70
+ for (const key in mediaQueryConfig) {
71
+ let update2 = function() {
72
+ const next = !!getMatch().matches;
73
+ if (next === mediaState[key])
74
+ return;
75
+ mediaState[key] = next;
76
+ curState = { ...mediaState };
77
+ const cur = listeners[key];
78
+ if (cur == null ? void 0 : cur.size) {
79
+ cur.forEach((cb) => cb(next));
89
80
  }
90
- match.addListener(update2);
91
- dispose.add(() => match.removeListener(update2));
92
- update2();
81
+ };
82
+ var update = update2;
83
+ const str = mediaObjectToString(mediaQueryConfig[key]);
84
+ const getMatch = () => matchMedia(str);
85
+ const match = getMatch();
86
+ if (!match) {
87
+ throw new Error("\u26A0\uFE0F No match");
93
88
  }
94
- });
89
+ match.addListener(update2);
90
+ dispose.add(() => match.removeListener(update2));
91
+ update2();
92
+ }
95
93
  }
96
- function useMediaQueryListeners(config) {
97
- if (config.disableSSR) {
94
+ function useMediaListeners(config) {
95
+ if (config.disableSSR)
98
96
  return;
99
- }
100
97
  useEffect(() => {
101
98
  setupMediaListeners();
102
99
  return unlisten;
103
100
  }, []);
104
101
  }
105
102
  function useMedia() {
106
- const [state, setState] = useState(initialMediaState || {});
107
103
  const keys = useSafeRef({});
104
+ const [state, setState] = useState(() => getMediaState(initState || {}, keys));
108
105
  function updateState() {
109
106
  setState((prev) => {
110
107
  for (const key in keys.current) {
111
108
  if (prev[key] !== mediaState[key]) {
112
- return { ...mediaState };
109
+ return getMediaState({ ...mediaState }, keys);
113
110
  }
114
111
  }
115
112
  return prev;
116
113
  });
117
114
  }
118
115
  useIsomorphicLayoutEffect(() => {
119
- const disposes = Object.keys(keys.current).map(
116
+ updateState();
117
+ const disposers = Object.keys(keys.current).map(
120
118
  (key) => addMediaQueryListener(key, updateState)
121
119
  );
122
- updateState();
123
120
  return () => {
124
- disposes.forEach((cb) => cb());
121
+ disposers.forEach((cb) => cb());
125
122
  };
126
- });
127
- return useMemo(
128
- () => new Proxy(state, {
129
- get(_, key) {
130
- if (process.env.NODE_ENV === "development") {
131
- if (!currentMediaState) {
132
- throw new Error(
133
- `To use useMedia() you must pass in media configuration to createTamagui, none was found.`
134
- );
135
- }
136
- }
137
- if (!keys.current[key]) {
138
- keys.current[key] = true;
139
- }
140
- return Reflect.get(state, key);
123
+ }, [keys.current]);
124
+ return state;
125
+ }
126
+ function getMediaState(state, keys) {
127
+ return new Proxy(state, {
128
+ get(_, key) {
129
+ if (!keys.current[key]) {
130
+ keys.current[key] = true;
141
131
  }
142
- }),
143
- [state, keys]
144
- );
132
+ return Reflect.get(state, key);
133
+ }
134
+ });
145
135
  }
146
136
  function useMediaPropsActive(props) {
147
137
  const media = useMedia();
148
138
  return useMemo(() => {
149
- const evaluated = {};
150
- const lastSetImportanceForKey = {};
139
+ const next = {};
140
+ const importancesUsed = {};
151
141
  const propNames = Object.keys(props);
152
- const mediaKeysOrdered = Object.keys(getMedia());
153
- function update(k, v, importance = 0) {
154
- if (lastSetImportanceForKey[k] > importance) {
155
- return;
156
- }
157
- lastSetImportanceForKey[k] = importance;
158
- evaluated[k] = v;
159
- }
160
142
  for (let i = propNames.length - 1; i >= 0; i--) {
161
143
  const key = propNames[i];
162
144
  const val = props[key];
163
145
  if (key[0] === "$") {
164
- const shortKey = key.slice(1);
165
- if (!media[shortKey]) {
146
+ if (!media[key.slice(1)]) {
166
147
  continue;
167
148
  }
168
149
  if (val && typeof val === "object") {
169
- const subPropNames = Object.keys(val);
170
- const mediaImportance = mediaKeysOrdered.indexOf(shortKey);
171
- for (let j = subPropNames.length; j--; j >= 0) {
172
- const skey = subPropNames[j];
173
- update(skey, val[skey], mediaImportance);
150
+ const subKeys = Object.keys(val);
151
+ for (let j = subKeys.length; j--; j >= 0) {
152
+ const subKey = subKeys[j];
153
+ mergeMediaByImportance(next, subKey, val[subKey], importancesUsed);
174
154
  }
175
155
  }
176
156
  } else {
177
- update(key, val);
157
+ mergeMediaByImportance(next, key, val, importancesUsed);
178
158
  }
179
159
  }
180
- return evaluated;
160
+ return next;
181
161
  }, [media, props]);
182
162
  }
163
+ function mergeMediaByImportance(onto, key, value, importancesUsed) {
164
+ const importance = getMediaKeyImportance(key);
165
+ if (importancesUsed[key] > importance) {
166
+ return false;
167
+ }
168
+ importancesUsed[key] = importance;
169
+ onto[key] = value;
170
+ return true;
171
+ }
183
172
  function camelToHyphen(str) {
184
173
  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
185
174
  }
@@ -203,12 +192,14 @@ export {
203
192
  configureMedia,
204
193
  getInitialMediaState,
205
194
  getMedia,
195
+ getMediaKeyImportance,
206
196
  mediaObjectToString,
207
197
  mediaQueryConfig,
208
198
  mediaState,
199
+ mergeMediaByImportance,
209
200
  removeMediaQueryListener,
210
201
  useMedia,
211
- useMediaPropsActive,
212
- useMediaQueryListeners
202
+ useMediaListeners,
203
+ useMediaPropsActive
213
204
  };
214
205
  //# sourceMappingURL=useMedia.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/useMedia.tsx"],
4
- "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { startTransition, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n // development time safeguard\n process.env.NODE_ENV === 'development'\n ? createProxy(\n {},\n {\n get(target, key) {\n if (typeof key === 'string' && key[0] === '$') {\n throw new Error(`Access of mediaState should never include $`)\n }\n return Reflect.get(target, key)\n },\n }\n )\n : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst mediaQueryListeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n // eslint-disable-next-line no-console\n console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n }\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\n// for SSR capture it at time of startup\nlet currentMediaState: MediaQueryState | null\nlet initialMediaState: MediaQueryState | null\n\nexport const getInitialMediaState = () => {\n if (getConfig().disableSSR) {\n return currentMediaState || {}\n }\n return initialMediaState || {}\n}\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n const { media, mediaQueryDefaultActive } = config\n if (!media) return\n for (const key in media) {\n mediaState[key] = mediaQueryDefaultActive?.[key] || false\n }\n Object.assign(mediaQueryConfig, media)\n currentMediaState = { ...mediaState }\n initialMediaState = currentMediaState\n if (config.disableSSR) {\n setupMediaListeners()\n }\n}\n\nfunction unlisten() {\n dispose.forEach((cb) => cb())\n dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n // avoid setting up more than once per config\n const nextKey = JSON.stringify(mediaQueryConfig)\n if (nextKey === configuredKey) {\n return\n }\n configuredKey = nextKey\n\n // hmr, undo existing before re-binding\n unlisten()\n\n // theoretically this should make media reactions smoother but potentially delayed?\n // but i believe consistent, so that's a nicer default (we'll see)\n startTransition(() => {\n for (const key in mediaQueryConfig) {\n const str = mediaObjectToString(mediaQueryConfig[key])\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match) {\n throw new Error('\u26A0\uFE0F No match')\n }\n // react native needs these deprecated apis for now\n match.addListener(update)\n dispose.add(() => match.removeListener(update))\n\n update()\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n currentMediaState = { ...mediaState }\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n listeners.forEach((cb) => cb(next))\n }\n }\n }\n })\n}\n\nexport function useMediaQueryListeners(config: TamaguiInternalConfig) {\n if (config.disableSSR) {\n return\n }\n useEffect(() => {\n setupMediaListeners()\n return unlisten\n }, [])\n}\n\nexport function useMedia(): {\n [key in MediaQueryKey]: boolean\n} {\n const [state, setState] = useState<MediaQueryState>(initialMediaState || {})\n const keys = useSafeRef({} as Record<string, boolean>)\n\n function updateState() {\n setState((prev) => {\n for (const key in keys.current) {\n if (prev[key] !== mediaState[key]) {\n return { ...mediaState }\n }\n }\n return prev\n })\n }\n\n useIsomorphicLayoutEffect(() => {\n const disposes: Function[] = Object.keys(keys.current).map((key) =>\n addMediaQueryListener(key, updateState)\n )\n updateState()\n return () => {\n disposes.forEach((cb) => cb())\n }\n })\n\n return useMemo(\n () =>\n new Proxy(state, {\n get(_, key: string) {\n if (process.env.NODE_ENV === 'development') {\n if (!currentMediaState) {\n throw new Error(\n `To use useMedia() you must pass in media configuration to createTamagui, none was found.`\n )\n }\n }\n if (!keys.current[key]) {\n keys.current[key] = true\n }\n return Reflect.get(state, key)\n },\n }),\n [state, keys]\n )\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n props: A\n): {\n // remove all media\n [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n const media = useMedia()\n\n return useMemo(() => {\n const evaluated = {} as A\n const lastSetImportanceForKey = {}\n const propNames = Object.keys(props)\n const mediaKeysOrdered = Object.keys(getMedia())\n\n function update(k: string, v: any, importance = 0) {\n if (lastSetImportanceForKey[k] > importance) {\n return\n }\n lastSetImportanceForKey[k] = importance\n evaluated[k] = v\n }\n\n for (let i = propNames.length - 1; i >= 0; i--) {\n const key = propNames[i]\n const val = props[key]\n if (key[0] === '$') {\n const shortKey = key.slice(1)\n if (!media[shortKey]) {\n continue\n }\n if (val && typeof val === 'object') {\n const subPropNames = Object.keys(val)\n const mediaImportance = mediaKeysOrdered.indexOf(shortKey)\n for (let j = subPropNames.length; j--; j >= 0) {\n const skey = subPropNames[j]\n update(skey, val[skey], mediaImportance)\n }\n }\n } else {\n update(key, val)\n }\n }\n\n return evaluated\n }, [media, props])\n}\n\nfunction camelToHyphen(str: string) {\n return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n if (typeof query === 'string') {\n return query\n }\n return Object.entries(query)\n .map(([feature, value]) => {\n feature = camelToHyphen(feature)\n if (typeof value === 'string') {\n return `(${feature}: ${value})`\n }\n if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n value = `${value}px`\n }\n return `(${feature}: ${value})`\n })\n .join(' and ')\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n // development time safeguard\n process.env.NODE_ENV === 'development'\n ? createProxy(\n {},\n {\n get(target, key) {\n if (typeof key === 'string' && key[0] === '$') {\n throw new Error(`Access of mediaState should never include $`)\n }\n return Reflect.get(target, key)\n },\n }\n )\n : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst listeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n // eslint-disable-next-line no-console\n console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n }\n listeners[key] = listeners[key] || new Set()\n listeners[key].add(cb)\n return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n listeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\n// for SSR capture it at time of startup\nlet curState: MediaQueryState\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n return (getConfig().disableSSR ? curState : initState) || {}\n}\n\nlet mediaKeysOrdered: string[]\nexport const getMediaKeyImportance = (key: string) =>\n // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1\n mediaKeysOrdered.indexOf(key[0] === '$' ? key.slice(1) : key) + 2\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n const { media, mediaQueryDefaultActive } = config\n if (!media) return\n for (const key in media) {\n mediaState[key] = mediaQueryDefaultActive?.[key] || false\n }\n Object.assign(mediaQueryConfig, media)\n curState = { ...mediaState }\n initState = curState\n mediaKeysOrdered = Object.keys(media)\n if (config.disableSSR) {\n setupMediaListeners()\n }\n}\n\nfunction unlisten() {\n dispose.forEach((cb) => cb())\n dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n // avoid setting up more than once per config\n const nextKey = JSON.stringify(mediaQueryConfig)\n if (nextKey === configuredKey) {\n return\n }\n configuredKey = nextKey\n\n // hmr, undo existing before re-binding\n unlisten()\n\n for (const key in mediaQueryConfig) {\n const str = mediaObjectToString(mediaQueryConfig[key])\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match) {\n throw new Error('\u26A0\uFE0F No match')\n }\n // react native needs these deprecated apis for now\n match.addListener(update)\n dispose.add(() => match.removeListener(update))\n\n update()\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n curState = { ...mediaState }\n const cur = listeners[key]\n if (cur?.size) {\n cur.forEach((cb) => cb(next))\n }\n }\n }\n}\n\nexport function useMediaListeners(config: TamaguiInternalConfig) {\n if (config.disableSSR) return\n useEffect(() => {\n setupMediaListeners()\n return unlisten\n }, [])\n}\n\nexport function useMedia(): {\n [key in MediaQueryKey]: boolean\n} {\n const keys = useSafeRef({} as Record<string, boolean>)\n const [state, setState] = useState<MediaQueryState>(() => getMediaState(initState || {}, keys))\n\n function updateState() {\n setState((prev) => {\n for (const key in keys.current) {\n if (prev[key] !== mediaState[key]) {\n return getMediaState({ ...mediaState }, keys)\n }\n }\n return prev\n })\n }\n\n useIsomorphicLayoutEffect(() => {\n updateState()\n const disposers = Object.keys(keys.current).map((key) =>\n addMediaQueryListener(key, updateState)\n )\n return () => {\n disposers.forEach((cb) => cb())\n }\n }, [keys.current])\n\n return state\n}\n\nfunction getMediaState(state: MediaQueryState, keys: MutableRefObject<Record<string, boolean>>) {\n return new Proxy(state, {\n get(_, key: string) {\n if (!keys.current[key]) {\n keys.current[key] = true\n }\n return Reflect.get(state, key)\n },\n })\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n props: A\n): {\n // remove all media\n [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n const media = useMedia()\n\n return useMemo(() => {\n const next = {} as A\n const importancesUsed = {}\n const propNames = Object.keys(props)\n\n for (let i = propNames.length - 1; i >= 0; i--) {\n const key = propNames[i]\n const val = props[key]\n if (key[0] === '$') {\n if (!media[key.slice(1)]) {\n continue\n }\n if (val && typeof val === 'object') {\n const subKeys = Object.keys(val)\n for (let j = subKeys.length; j--; j >= 0) {\n const subKey = subKeys[j]\n mergeMediaByImportance(next, subKey, val[subKey], importancesUsed)\n }\n }\n } else {\n mergeMediaByImportance(next, key, val, importancesUsed)\n }\n }\n\n return next\n }, [media, props])\n}\n\nexport function mergeMediaByImportance(\n onto: Record<string, any>,\n key: string,\n value: any,\n importancesUsed: Record<string, number>\n) {\n const importance = getMediaKeyImportance(key)\n if (importancesUsed[key] > importance) {\n return false\n }\n importancesUsed[key] = importance\n onto[key] = value\n return true\n}\n\nfunction camelToHyphen(str: string) {\n return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n if (typeof query === 'string') {\n return query\n }\n return Object.entries(query)\n .map(([feature, value]) => {\n feature = camelToHyphen(feature)\n if (typeof value === 'string') {\n return `(${feature}: ${value})`\n }\n if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n value = `${value}px`\n }\n return `(${feature}: ${value})`\n })\n .join(' and ')\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["update"]
7
7
  }
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=useMedia.test.js.map