@tamagui/core 1.0.1-beta.217 → 1.0.1-beta.218
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.
- package/dist/cjs/createComponent.js +6 -4
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +8 -4
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +2 -4
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/hooks/useMedia.js +1 -9
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +28 -12
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/esm/createComponent.js +6 -4
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +8 -4
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +2 -4
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/hooks/useMedia.js +1 -9
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +28 -12
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/package.json +12 -12
- package/src/createComponent.tsx +8 -6
- package/src/helpers/getSplitStyles.tsx +7 -4
- package/src/helpers/getStylesAtomic.ts +2 -4
- package/src/hooks/useMedia.tsx +2 -10
- package/src/hooks/useTheme.tsx +35 -20
- package/types/hooks/useTheme.d.ts +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getStylesAtomic.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { StyleObject, simpleHash } from '@tamagui/helpers'\nimport type { TextStyle, ViewStyle } from '@tamagui/types-react-native'\n\nimport { getConfig } from '../config'\nimport { TamaguiInternalConfig } from '../types'\nimport { Style, cache } from './cache'\nimport { defaultOffset } from './expandStyles'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'\n\n// refactor this file away next...\n\ntype ViewOrTextStyle = ViewStyle | TextStyle\n\nexport type ViewStyleWithPseudos = ViewOrTextStyle & {\n hoverStyle?: ViewOrTextStyle\n pressStyle?: ViewOrTextStyle\n focusStyle?: ViewOrTextStyle\n}\n\n// matching order of the below *0\nconst pseudosOrdered = [\n pseudoDescriptors.hoverStyle,\n pseudoDescriptors.pressStyle,\n pseudoDescriptors.focusStyle,\n]\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {\n // performance optimization\n if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {\n return getAtomicStyle(stylesIn)\n }\n\n // only for pseudos\n const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n let res: StyleObject[] = []\n // *1 order matched to *0\n for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n if (!style) continue\n const pseudo = pseudosOrdered[index]\n res = [...res, ...getAtomicStyle(style, pseudo)]\n }\n return res\n}\n\nexport function getAtomicStyle(style: ViewOrTextStyle, pseudo?: PseudoDescriptor): StyleObject[] {\n if (process.env.NODE_ENV === 'development') {\n if (!style || typeof style !== 'object') {\n throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n }\n } else {\n if (!style) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(`Invalid style`)\n }\n return []\n }\n }\n\n return generateAtomicStyles(style, pseudo)\n}\n\nlet conf: TamaguiInternalConfig\n\nconst generateAtomicStyles = (\n styleIn: ViewStyle & TextStyle,\n pseudo?: PseudoDescriptor\n): StyleObject[] => {\n conf = conf || getConfig()\n\n // were converting to css styles\n const style = styleIn as Record<string, string | null | undefined>\n\n // transform\n if (style.transform
|
|
5
|
-
"mappings": "AAKA,SAAsB,kBAAkB;AAGxC,SAAS,iBAAiB;AAE1B,SAAgB,aAAa;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAC3C,SAA2B,yBAAyB;AAapD,MAAM,iBAAiB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEO,SAAS,gBAAgB,UAAgC;AAE9D,MAAI,CAAC,SAAS,cAAc,CAAC,SAAS,cAAc,CAAC,SAAS,YAAY;AACxE,WAAO,eAAe,QAAQ;AAAA,EAChC;AAGA,QAAM,EAAE,YAAY,YAAY,eAAe,KAAK,IAAI;AACxD,MAAI,MAAqB,CAAC;AAE1B,aAAW,CAAC,OAAO,KAAK,KAAK,CAAC,YAAY,YAAY,YAAY,IAAI,EAAE,QAAQ,GAAG;AACjF,QAAI,CAAC;AAAO;AACZ,UAAM,SAAS,eAAe;AAC9B,UAAM,CAAC,GAAG,KAAK,GAAG,eAAe,OAAO,MAAM,CAAC;AAAA,EACjD;AACA,SAAO;AACT;AAEO,SAAS,eAAe,OAAwB,QAA0C;AAC/F,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,SAAS,OAAO,UAAU,UAAU;AACvC,YAAM,IAAI,MAAM,sBAAsB,OAAO,WAAW,OAAO;AAAA,IACjE;AAAA,EACF,OAAO;AACL,QAAI,CAAC,OAAO;AACV,UAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,gBAAQ,KAAK,eAAe;AAAA,MAC9B;AACA,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AAEA,SAAO,qBAAqB,OAAO,MAAM;AAC3C;AAEA,IAAI;AAEJ,MAAM,uBAAuB,CAC3B,SACA,WACkB;AAClB,SAAO,QAAQ,UAAU;AAGzB,QAAM,QAAQ;AAGd,MAAI,MAAM,
|
|
4
|
+
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { StyleObject, simpleHash } from '@tamagui/helpers'\nimport type { TextStyle, ViewStyle } from '@tamagui/types-react-native'\n\nimport { getConfig } from '../config'\nimport { TamaguiInternalConfig } from '../types'\nimport { Style, cache } from './cache'\nimport { defaultOffset } from './expandStyles'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'\n\n// refactor this file away next...\n\ntype ViewOrTextStyle = ViewStyle | TextStyle\n\nexport type ViewStyleWithPseudos = ViewOrTextStyle & {\n hoverStyle?: ViewOrTextStyle\n pressStyle?: ViewOrTextStyle\n focusStyle?: ViewOrTextStyle\n}\n\n// matching order of the below *0\nconst pseudosOrdered = [\n pseudoDescriptors.hoverStyle,\n pseudoDescriptors.pressStyle,\n pseudoDescriptors.focusStyle,\n]\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {\n // performance optimization\n if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {\n return getAtomicStyle(stylesIn)\n }\n\n // only for pseudos\n const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n let res: StyleObject[] = []\n // *1 order matched to *0\n for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n if (!style) continue\n const pseudo = pseudosOrdered[index]\n res = [...res, ...getAtomicStyle(style, pseudo)]\n }\n return res\n}\n\nexport function getAtomicStyle(style: ViewOrTextStyle, pseudo?: PseudoDescriptor): StyleObject[] {\n if (process.env.NODE_ENV === 'development') {\n if (!style || typeof style !== 'object') {\n throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n }\n } else {\n if (!style) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(`Invalid style`)\n }\n return []\n }\n }\n\n return generateAtomicStyles(style, pseudo)\n}\n\nlet conf: TamaguiInternalConfig\n\nconst generateAtomicStyles = (\n styleIn: ViewStyle & TextStyle,\n pseudo?: PseudoDescriptor\n): StyleObject[] => {\n conf = conf || getConfig()\n\n // were converting to css styles\n const style = styleIn as Record<string, string | null | undefined>\n\n // transform\n if (style.transform && Array.isArray(style.transform)) {\n style.transform = style.transform.map(mapTransform).join(' ')\n }\n\n styleToCSS(style)\n\n const out: StyleObject[] = []\n for (const key in style) {\n const value = style[key]\n if (value != null && value != undefined) {\n const uid = key + (pseudo?.name || '')\n const cachedResult = cache.get(uid, value)\n if (cachedResult != undefined) {\n out.push(cachedResult)\n } else {\n const hash = presetHashes[value]\n ? value\n : typeof value === 'string'\n ? simpleHash(value)\n : `${value}`.replace('.', 'dot')\n\n const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''\n const shortProp = conf.inverseShorthands[key] || key\n const identifier = `_${shortProp}-${pseudoPrefix}${hash}`\n const rules = createAtomicRules(identifier, key, value, pseudo)\n const styleObject: StyleObject = {\n property: key,\n pseudo: pseudo?.name as any,\n value,\n identifier,\n rules,\n }\n\n cache.set(uid, value, styleObject)\n out.push(styleObject)\n }\n }\n }\n return out\n}\n\nconst presetHashes = {\n none: true,\n}\n\nconst n = (val: any) => normalizeValueWithProperty(val)\n\nexport function styleToCSS(style: Record<string, any>) {\n // box-shadow\n const { shadowOffset, shadowRadius, shadowColor } = style\n if (style.shadowRadius !== undefined) {\n const offset = shadowOffset || defaultOffset\n const shadow = `${n(offset.width)} ${n(offset.height)} ${n(shadowRadius)} ${shadowColor}`\n style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow\n delete style.shadowOffset\n delete style.shadowRadius\n delete style.shadowColor\n }\n\n // text-shadow\n const { textShadowColor, textShadowOffset, textShadowRadius } = style\n if (textShadowColor || textShadowOffset || textShadowRadius) {\n const { height, width } = textShadowOffset || defaultOffset\n const radius = textShadowRadius || 0\n const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n if (color && (height !== 0 || width !== 0 || radius !== 0)) {\n const blurRadius = normalizeValueWithProperty(radius)\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n delete style.textShadowColor\n delete style.textShadowOffset\n delete style.textShadowRadius\n }\n}\n\n// { scale: 2 } => 'scale(2)'\n// { translateX: 20 } => 'translateX(20px)'\n// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'\nconst mapTransform = (transform) => {\n const type = Object.keys(transform)[0]\n const value = transform[type]\n if (type === 'matrix' || type === 'matrix3d') {\n return `${type}(${value.join(',')})`\n } else {\n const normalizedValue = normalizeValueWithProperty(value, type)\n return `${type}(${normalizedValue})`\n }\n}\n\nfunction createDeclarationBlock(style: Style, important = false) {\n let next = ''\n for (const key in style) {\n const prop = hyphenateStyleName(key)\n const value = style[key]\n next += `${prop}:${value}${important ? ` !important` : ''};`\n }\n return `{${next}}`\n}\n\nconst hcache = {}\nconst toHyphenLower = (match: string) => `-${match.toLowerCase()}`\nconst hyphenateStyleName = (key: string) => {\n let val = hcache[key]\n if (val) return val\n hcache[key] = val = key.replace(/[A-Z]/g, toHyphenLower)\n return val\n}\n\nconst pseudoSelectorPrefixes = (() => {\n const res: Record<string, string> = {}\n for (const key in pseudoDescriptors) {\n const pseudo = pseudoDescriptors[key]\n res[pseudo.name] = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n }\n return res\n})()\n\nfunction createAtomicRules(\n identifier: string,\n property: string,\n value: any,\n pseudo?: PseudoDescriptor\n): string[] {\n const selector = pseudo\n ? `${pseudoSelectorPrefixes[pseudo.name]} .${identifier}:${pseudo.name}`\n : `.${identifier}`\n const important = !!pseudo\n\n let rules: string[] = []\n\n // Handle non-standard properties and object values that require multiple\n // CSS rules to be created.\n switch (property) {\n // Equivalent to using '::placeholder'\n case 'placeholderTextColor': {\n const block = createDeclarationBlock({ color: value, opacity: 1 }, important)\n rules.push(`${selector}::placeholder${block}`)\n break\n }\n\n // all webkit prefixed rules\n case 'backgroundClip':\n case 'userSelect': {\n const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`\n const webkitProperty = `Webkit${propertyCapitalized}`\n const block = createDeclarationBlock(\n { [property]: value, [webkitProperty]: value },\n important\n )\n rules.push(`${selector}${block}`)\n break\n }\n\n // Polyfill for additional 'pointer-events' values\n case 'pointerEvents': {\n let finalValue = value\n if (value === 'auto' || value === 'box-only') {\n finalValue = 'auto'\n if (value === 'box-only') {\n rules.push(`${selector}>*${boxOnly}`)\n }\n } else if (value === 'none' || value === 'box-none') {\n finalValue = 'none'\n if (value === 'box-none') {\n rules.push(`${selector}>*${boxNone}`)\n }\n }\n const block = createDeclarationBlock({ pointerEvents: finalValue }, true)\n rules.push(`${selector}${block}`)\n break\n }\n\n default: {\n const block = createDeclarationBlock({ [property]: value }, important)\n rules.push(`${selector}${block}`)\n break\n }\n }\n\n // hover styles need to be conditional\n // perhaps this can be generalized but for now lets just shortcut\n // and hardcode for hover styles, if we need to later we can\n // WEIRD SYNTAX, SEE:\n // https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n if (pseudo && pseudo.name === 'hover') {\n rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n }\n\n return rules\n}\n\nconst boxNone = createDeclarationBlock({ pointerEvents: 'auto' }, true)\nconst boxOnly = createDeclarationBlock({ pointerEvents: 'none' }, true)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -95,17 +95,9 @@ function useMediaListeners(config) {
|
|
|
95
95
|
return unlisten;
|
|
96
96
|
}, []);
|
|
97
97
|
}
|
|
98
|
-
const nextTick = process.nextTick || setImmediate;
|
|
99
98
|
const currentStateListeners = /* @__PURE__ */ new Set();
|
|
100
|
-
let isUpdating = false;
|
|
101
99
|
function updateCurrentState() {
|
|
102
|
-
|
|
103
|
-
return;
|
|
104
|
-
isUpdating = true;
|
|
105
|
-
nextTick(() => {
|
|
106
|
-
currentStateListeners.forEach((cb) => cb(mediaState));
|
|
107
|
-
isUpdating = false;
|
|
108
|
-
});
|
|
100
|
+
currentStateListeners.forEach((cb) => cb(mediaState));
|
|
109
101
|
}
|
|
110
102
|
function subscribe(subscriber) {
|
|
111
103
|
currentStateListeners.add(subscriber);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useMedia.tsx"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useSyncExternalStore } 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 (\n typeof key === 'string' &&\n key[0] === '$' &&\n // dont error on $$typeof\n key[1] !== '$'\n ) {\n throw new Error(`Access mediaState should not use \"$\": ${key}`)\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 = () => mediaState\n\n// for SSR capture it at time of startup\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n return (getConfig().disableSSR ? mediaState : 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 initState = { ...mediaState }\n updateCurrentState()\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 updateCurrentState()\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\nconst currentStateListeners = new Set<any>()\nfunction updateCurrentState() {\n currentStateListeners.forEach((cb) => cb(mediaState))\n}\nfunction subscribe(subscriber: any) {\n currentStateListeners.add(subscriber)\n return () => currentStateListeners.delete(subscriber)\n}\n\ntype MediaKeysState = {\n [key: string]: any\n}\n\nexport function useMedia(): {\n [key in MediaQueryKey]: boolean\n} {\n const keys = useSafeRef<MediaKeysState>({ prev: initState })\n\n const state = useSyncExternalStore<MediaQueryState>(\n subscribe,\n () => {\n const { prev, ...curKeys } = keys.current\n const shouldUpdate = !prev || Object.keys(curKeys).some((k) => mediaState[k] !== prev[k])\n if (shouldUpdate) {\n const next = { ...mediaState }\n keys.current.prev = next\n return next\n }\n return prev\n },\n () => initState\n )\n\n return useMemo(() => {\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 }, [state])\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": "AAAA,SAAS,WAAW,SAAS,4BAA4B;AAEzD,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAQ3B,SAAS,kBAAkB;AAEpB,MAAM,aAEX,QAAQ,IAAI,aAAa,gBACrB;AAAA,EACE,CAAC;AAAA,EACD;AAAA,IACE,IAAI,QAAQ,KAAK;AACf,UACE,OAAO,QAAQ,YACf,IAAI,OAAO,OAEX,IAAI,OAAO,KACX;AACA,cAAM,IAAI,MAAM,yCAAyC,KAAK;AAAA,MAChE;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF;AACF,IACC,CAAC;AAIR,MAAM,YAAmD,CAAC;AAEnD,SAAS,sBAAsB,KAAoB,IAAmB;AAC3E,MAAI,QAAQ,IAAI,aAAa,iBAAiB,IAAI,OAAO,KAAK;AAE5D,YAAQ,KAAK,kEAAkE;AAAA,EACjF;AACA,YAAU,OAAO,UAAU,QAAQ,oBAAI,IAAI;AAC3C,YAAU,KAAK,IAAI,EAAE;AACrB,SAAO,MAAM,yBAAyB,KAAK,EAAE;AAC/C;AAEO,SAAS,yBAAyB,KAAoB,IAAmB;AAjDhF;AAkDE,kBAAU,SAAV,mBAAgB,OAAO;AACzB;AAEO,MAAM,mBAAiC,CAAC;AAExC,MAAM,WAAW,MAAM;AAG9B,IAAI;AACG,MAAM,uBAAuB,MAAM;AACxC,UAAQ,UAAU,EAAE,aAAa,aAAa,cAAc,CAAC;AAC/D;AAEA,IAAI;AACG,MAAM,wBAAwB,CAAC,QAEpC,iBAAiB,QAAQ,IAAI,OAAO,MAAM,IAAI,MAAM,CAAC,IAAI,GAAG,IAAI;AAElE,MAAM,UAAU,oBAAI,IAAc;AAE3B,MAAM,iBAAiB,CAAC,WAAkC;AAC/D,QAAM,EAAE,OAAO,wBAAwB,IAAI;AAC3C,MAAI,CAAC;AAAO;AACZ,aAAW,OAAO,OAAO;AACvB,eAAW,QAAO,mEAA0B,SAAQ;AAAA,EACtD;AACA,SAAO,OAAO,kBAAkB,KAAK;AACrC,cAAY,EAAE,GAAG,WAAW;AAC5B,qBAAmB;AACnB,qBAAmB,OAAO,KAAK,KAAK;AACpC,MAAI,OAAO,YAAY;AACrB,wBAAoB;AAAA,EACtB;AACF;AAEA,SAAS,WAAW;AAClB,UAAQ,QAAQ,CAAC,OAAO,GAAG,CAAC;AAC5B,UAAQ,MAAM;AAChB;AAOA,IAAI,gBAAgB;AACpB,SAAS,sBAAsB;AAE7B,QAAM,UAAU,KAAK,UAAU,gBAAgB;AAC/C,MAAI,YAAY,eAAe;AAC7B;AAAA,EACF;AACA,kBAAgB;AAGhB,WAAS;AAET,aAAW,OAAO,kBAAkB;AAalC,QAASA,UAAT,WAAkB;AAChB,YAAM,OAAO,CAAC,CAAC,SAAS,EAAE;AAC1B,UAAI,SAAS,WAAW;AAAM;AAC9B,iBAAW,OAAO;AAClB,yBAAmB;AACnB,YAAM,MAAM,UAAU;AACtB,UAAI,2BAAK,MAAM;AACb,YAAI,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,MAC9B;AAAA,IACF;AATS,iBAAAA;AAZT,UAAM,MAAM,oBAAoB,iBAAiB,IAAI;AACrD,UAAM,WAAW,MAAM,WAAW,GAAG;AACrC,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,uBAAa;AAAA,IAC/B;AAEA,UAAM,YAAYA,OAAM;AACxB,YAAQ,IAAI,MAAM,MAAM,eAAeA,OAAM,CAAC;AAE9C,IAAAA,QAAO;AAAA,EAYT;AACF;AAEO,SAAS,kBAAkB,QAA+B;AAC/D,MAAI,OAAO;AAAY;AACvB,YAAU,MAAM;AACd,wBAAoB;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACP;AAEA,MAAM,wBAAwB,oBAAI,IAAS;AAC3C,SAAS,qBAAqB;AAC5B,wBAAsB,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC;AACtD;AACA,SAAS,UAAU,YAAiB;AAClC,wBAAsB,IAAI,UAAU;AACpC,SAAO,MAAM,sBAAsB,OAAO,UAAU;AACtD;AAMO,SAAS,WAEd;AACA,QAAM,OAAO,WAA2B,EAAE,MAAM,UAAU,CAAC;AAE3D,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA,MAAM;AACJ,YAAM,EAAE,SAAS,QAAQ,IAAI,KAAK;AAClC,YAAM,eAAe,CAAC,QAAQ,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC,MAAM,WAAW,OAAO,KAAK,EAAE;AACxF,UAAI,cAAc;AAChB,cAAM,OAAO,EAAE,GAAG,WAAW;AAC7B,aAAK,QAAQ,OAAO;AACpB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA,IACA,MAAM;AAAA,EACR;AAEA,SAAO,QAAQ,MAAM;AACnB,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,YAAI,CAAC,KAAK,QAAQ,MAAM;AACtB,eAAK,QAAQ,OAAO;AAAA,QACtB;AACA,eAAO,QAAQ,IAAI,OAAO,GAAG;AAAA,MAC/B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,KAAK,CAAC;AACZ;AASO,SAAS,oBACd,OAIA;AACA,QAAM,QAAQ,SAAS;AAEvB,SAAO,QAAQ,MAAM;AACnB,UAAM,OAAO,CAAC;AACd,UAAM,kBAAkB,CAAC;AACzB,UAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,aAAS,IAAI,UAAU,SAAS,GAAG,KAAK,GAAG,KAAK;AAC9C,YAAM,MAAM,UAAU;AACtB,YAAM,MAAM,MAAM;AAClB,UAAI,IAAI,OAAO,KAAK;AAClB,YAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI;AACxB;AAAA,QACF;AACA,YAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,gBAAM,UAAU,OAAO,KAAK,GAAG;AAC/B,mBAAS,IAAI,QAAQ,QAAQ,KAAK,KAAK,GAAG;AACxC,kBAAM,SAAS,QAAQ;AACvB,mCAAuB,MAAM,QAAQ,IAAI,SAAS,eAAe;AAAA,UACnE;AAAA,QACF;AAAA,MACF,OAAO;AACL,+BAAuB,MAAM,KAAK,KAAK,eAAe;AAAA,MACxD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,KAAK,CAAC;AACnB;AAEO,SAAS,uBACd,MACA,KACA,OACA,iBACA;AACA,QAAM,aAAa,sBAAsB,GAAG;AAC5C,MAAI,gBAAgB,OAAO,YAAY;AACrC,WAAO;AAAA,EACT;AACA,kBAAgB,OAAO;AACvB,OAAK,OAAO;AACZ,SAAO;AACT;AAEA,SAAS,cAAc,KAAa;AAClC,SAAO,IAAI,QAAQ,UAAU,CAAC,MAAM,IAAI,EAAE,YAAY,GAAG,EAAE,YAAY;AACzE;AAEO,SAAS,oBAAoB,OAAkC;AACpE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO,OAAO,QAAQ,KAAK,EACxB,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM;AACzB,cAAU,cAAc,OAAO;AAC/B,QAAI,OAAO,UAAU,UAAU;AAC7B,aAAO,IAAI,YAAY;AAAA,IACzB;AACA,QAAI,OAAO,UAAU,YAAY,kBAAkB,KAAK,OAAO,GAAG;AAChE,cAAQ,GAAG;AAAA,IACb;AACA,WAAO,IAAI,YAAY;AAAA,EACzB,CAAC,EACA,KAAK,OAAO;AACjB;",
|
|
6
6
|
"names": ["update"]
|
|
7
7
|
}
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
} from "../helpers/ThemeManager";
|
|
14
14
|
import { GetThemeUnwrapped } from "./getThemeUnwrapped";
|
|
15
15
|
import { useServerRef } from "./useServerHooks";
|
|
16
|
-
const useTheme = (themeName, componentName, props, forceUpdate) => {
|
|
16
|
+
const useTheme = (themeName, componentName, props, forceUpdate, disableTracking) => {
|
|
17
17
|
if (isRSC) {
|
|
18
18
|
const config = getConfig();
|
|
19
19
|
return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme);
|
|
@@ -60,10 +60,33 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
|
|
|
60
60
|
return themes[Object.keys(themes)[0]];
|
|
61
61
|
}
|
|
62
62
|
return useMemo(() => {
|
|
63
|
-
return getThemeProxied(
|
|
64
|
-
|
|
63
|
+
return getThemeProxied({
|
|
64
|
+
theme,
|
|
65
|
+
name,
|
|
66
|
+
className,
|
|
67
|
+
themeManager,
|
|
68
|
+
onStringKeyAccess(key) {
|
|
69
|
+
if (disableTracking)
|
|
70
|
+
return;
|
|
71
|
+
if (state) {
|
|
72
|
+
if (state.current.isRendering && !state.current.keys.has(key)) {
|
|
73
|
+
state.current.keys.add(key);
|
|
74
|
+
if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
|
|
75
|
+
console.log(" \u{1F538} tracking theme", key);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}, [theme, name, className, themeManager, debugProp, disableTracking]);
|
|
65
82
|
};
|
|
66
|
-
function getThemeProxied(
|
|
83
|
+
function getThemeProxied({
|
|
84
|
+
theme,
|
|
85
|
+
name,
|
|
86
|
+
className,
|
|
87
|
+
themeManager,
|
|
88
|
+
onStringKeyAccess
|
|
89
|
+
}) {
|
|
67
90
|
return createProxy(theme, {
|
|
68
91
|
has(_, key) {
|
|
69
92
|
if (typeof key === "string" && key[0] === "$") {
|
|
@@ -93,14 +116,7 @@ function getThemeProxied(theme, name, className, themeManager, state, debugProp)
|
|
|
93
116
|
if (!themeManager) {
|
|
94
117
|
return theme[key];
|
|
95
118
|
}
|
|
96
|
-
|
|
97
|
-
if (state.current.isRendering && !state.current.keys.has(key)) {
|
|
98
|
-
state.current.keys.add(key);
|
|
99
|
-
if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
|
|
100
|
-
console.log(" \u{1F538} tracking theme", key);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
119
|
+
onStringKeyAccess == null ? void 0 : onStringKeyAccess(key);
|
|
104
120
|
return themeManager.getValue(key);
|
|
105
121
|
}
|
|
106
122
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n GetNextThemeProps,\n ThemeManager,\n ThemeManagerContext,\n emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n className?: string\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n componentName?: string\n children?: any\n reset?: boolean\n debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nexport const useTheme = (\n themeName?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdate?: any\n): ThemeParsed => {\n // TODO this can use useChangeThemeEffect almost ready\n if (isRSC) {\n const config = getConfig()\n // @ts-ignore\n return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n }\n\n const state = useServerRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\n isRendering: true,\n }\n }\n\n const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate,\n state.current.uuid\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 useTheme =>', name)\n const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n for (const key in logs) {\n // eslint-disable-next-line no-console\n console.log(' ', key, logs[key])\n }\n // eslint-disable-next-line no-console\n console.groupEnd()\n }\n }\n\n // track usage\n state.current.isRendering = true\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n const cur = themeManager?.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n themeManager?.track(st.uuid, st.keys)\n }\n })\n\n const debugProp = props && props['debug']\n\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('No theme with name', themeName)\n }\n return themes[Object.keys(themes)[0]]\n }\n\n return useMemo(() => {\n return getThemeProxied(theme
|
|
5
|
-
"mappings": "AAAA,SAAS,OAAO,UAAU,iCAAiC;AAC3D,SAAS,sBAAsB;AAC/B,SAAgB,YAAY,iBAAiB,SAAiB,gBAAgB;AAE9E,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAkBtB,MAAM,WAAW,CACtB,WACA,eACA,OACA,
|
|
4
|
+
"sourcesContent": ["import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n GetNextThemeProps,\n ThemeManager,\n ThemeManagerContext,\n emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n className?: string\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n componentName?: string\n children?: any\n reset?: boolean\n debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nexport const useTheme = (\n themeName?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdate?: any,\n disableTracking?: boolean\n): ThemeParsed => {\n // TODO this can use useChangeThemeEffect almost ready\n if (isRSC) {\n const config = getConfig()\n // @ts-ignore\n return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n }\n\n const state = useServerRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\n isRendering: true,\n }\n }\n\n const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate,\n state.current.uuid\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 useTheme =>', name)\n const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n for (const key in logs) {\n // eslint-disable-next-line no-console\n console.log(' ', key, logs[key])\n }\n // eslint-disable-next-line no-console\n console.groupEnd()\n }\n }\n\n // track usage\n state.current.isRendering = true\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n const cur = themeManager?.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n themeManager?.track(st.uuid, st.keys)\n }\n })\n\n const debugProp = props && props['debug']\n\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('No theme with name', themeName)\n }\n return themes[Object.keys(themes)[0]]\n }\n\n return useMemo(() => {\n return getThemeProxied({\n theme,\n name,\n className,\n themeManager,\n onStringKeyAccess(key) {\n if (disableTracking) return\n if (state) {\n if (state.current.isRendering && !state.current.keys.has(key)) {\n state.current.keys.add(key)\n if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD38 tracking theme', key)\n }\n }\n }\n },\n })\n }, [theme, name, className, themeManager, debugProp, disableTracking])\n}\n\nfunction getThemeProxied({\n theme,\n name,\n className,\n themeManager,\n onStringKeyAccess,\n}: {\n theme: any\n name: string\n onStringKeyAccess?: (cb: string) => void\n className?: string\n themeManager?: ThemeManager | null\n}) {\n return createProxy(theme, {\n has(_, key) {\n if (typeof key === 'string' && key[0] === '$') {\n key = key.slice(1)\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (key === GetThemeManager) {\n return themeManager\n }\n if (key === 'name') {\n return name\n }\n if (key === 'className') {\n return className\n }\n if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n return Reflect.get(_, key)\n }\n // auto convert variables to plain\n if (key[0] === '$') {\n key = key.slice(1)\n }\n if (!themeManager) {\n return theme[key]\n }\n onStringKeyAccess?.(key)\n return themeManager.getValue(key)\n },\n })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n if (!theme) return\n return theme[GetThemeManager]\n}\n\nexport function useThemeName(opts?: { parent?: true }): ThemeName {\n if (isRSC) {\n const config = getConfig()\n return config.themes[Object.keys(config.themes)[0]] as any\n }\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent?.name || '')\n\n useIsomorphicLayoutEffect(() => {\n if (!parent) return\n return parent.onChangeTheme((next, manager) => {\n const name = opts?.parent ? manager.parentName || next : next\n if (!name) return\n setName(name)\n })\n }, [parent])\n\n return name\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n name?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdateProp?: any,\n uuid?: Object\n): {\n themes: Record<string, ThemeParsed>\n themeManager: ThemeManager | null\n name: string\n theme: ThemeParsed | null\n className?: string\n} => {\n const config = getConfig()\n\n if (process.env.NODE_ENV === 'development') {\n if (!config) {\n throw new Error(\n `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`\n )\n }\n }\n\n const { themes } = config\n\n if (isRSC) {\n // we need context working for this to work well\n const parentManager = new ThemeManager('light', 'light', themes.light)\n const next = parentManager.getNextTheme({\n name,\n componentName,\n themes,\n reset: props?.reset,\n })\n return {\n ...next,\n themes,\n themeManager: null,\n }\n }\n\n const debug = props && props['debug']\n const parentManager = useContext(ThemeManagerContext) || emptyManager\n const reset = props?.reset || false\n const getThemeProps: GetNextThemeProps = {\n name,\n componentName,\n themes,\n reset,\n }\n const next = parentManager.getNextTheme(getThemeProps, debug)\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forceUpdate = forceUpdateProp || useForceUpdate()\n\n const themeManager = useMemo(() => {\n return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n // not concurrent safe but fixes native (but breaks SSR and not needed on web (i think) so leave only on native)\n let didChange = false\n if (process.env.TAMAGUI_TARGET === 'native') {\n didChange = Boolean(\n next?.name !== themeManager.name || next?.className !== themeManager.className\n )\n if (didChange) {\n themeManager.update(next, false, false)\n }\n }\n\n if (!isServer) {\n useLayoutEffect(() => {\n themeManager.update(next, didChange)\n activeThemeManagers.add(themeManager)\n\n const disposeParentOnChange = parentManager.onChangeTheme(() => {\n const next = parentManager.getNextTheme(getThemeProps, debug)\n if (!next) return\n if (themeManager.update(next)) {\n if (uuid && !themeManager.isTracking(uuid)) {\n // no need to re-render if not tracking any keys\n return\n }\n if (process.env.NODE_ENV === 'development' && debug) {\n // eslint-disable-next-line no-console\n console.log('Changed theme', componentName, next, { props })\n }\n forceUpdate()\n }\n })\n\n return () => {\n activeThemeManagers.delete(themeManager)\n disposeParentOnChange()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [didChange, themes, next?.name, next?.className, componentName, debug])\n }\n\n return {\n ...(parentManager && {\n name: parentManager.name,\n theme: parentManager.theme,\n }),\n ...next,\n className: next.className === parentManager.className ? undefined : next.className,\n themes,\n themeManager,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["name", "parentManager", "next"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.218",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -28,23 +28,23 @@
|
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@expo/match-media": "^0.3.0",
|
|
31
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/constants": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/helpers": "^1.0.1-beta.
|
|
34
|
-
"@tamagui/normalize-css-color-lite": "^1.0.1-beta.
|
|
35
|
-
"@tamagui/react-native-use-pressable": "^1.0.1-beta.
|
|
36
|
-
"@tamagui/react-native-use-responder-events": "^1.0.1-beta.
|
|
37
|
-
"@tamagui/types-react-native": "^1.0.1-beta.
|
|
38
|
-
"@tamagui/use-did-finish-ssr": "^1.0.1-beta.
|
|
39
|
-
"@tamagui/use-event": "^1.0.1-beta.
|
|
40
|
-
"@tamagui/use-force-update": "^1.0.1-beta.
|
|
31
|
+
"@tamagui/compose-refs": "^1.0.1-beta.218",
|
|
32
|
+
"@tamagui/constants": "^1.0.1-beta.218",
|
|
33
|
+
"@tamagui/helpers": "^1.0.1-beta.218",
|
|
34
|
+
"@tamagui/normalize-css-color-lite": "^1.0.1-beta.218",
|
|
35
|
+
"@tamagui/react-native-use-pressable": "^1.0.1-beta.218",
|
|
36
|
+
"@tamagui/react-native-use-responder-events": "^1.0.1-beta.218",
|
|
37
|
+
"@tamagui/types-react-native": "^1.0.1-beta.218",
|
|
38
|
+
"@tamagui/use-did-finish-ssr": "^1.0.1-beta.218",
|
|
39
|
+
"@tamagui/use-event": "^1.0.1-beta.218",
|
|
40
|
+
"@tamagui/use-force-update": "^1.0.1-beta.218"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"react": ">=18",
|
|
44
44
|
"react-dom": ">=18"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
47
|
+
"@tamagui/build": "^1.0.1-beta.218",
|
|
48
48
|
"@types/node": "^16.11.9",
|
|
49
49
|
"@types/react": "^18.0.15",
|
|
50
50
|
"@types/react-native": "^0.69.2",
|
package/src/createComponent.tsx
CHANGED
|
@@ -212,8 +212,13 @@ export function createComponent<
|
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
+
const shouldAvoidClasses =
|
|
216
|
+
!isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
|
|
217
|
+
const shouldForcePseudo = !!propsIn.forceStyle
|
|
218
|
+
const noClassNames = shouldAvoidClasses || shouldForcePseudo
|
|
219
|
+
|
|
215
220
|
const forceUpdate = useForceUpdate()
|
|
216
|
-
const theme = useTheme(props.theme, componentName, props, forceUpdate)
|
|
221
|
+
const theme = useTheme(props.theme, componentName, props, forceUpdate, !noClassNames)
|
|
217
222
|
|
|
218
223
|
const shouldSetMounted = needsMount && state.unmounted
|
|
219
224
|
const setMounted = shouldSetMounted
|
|
@@ -230,12 +235,7 @@ export function createComponent<
|
|
|
230
235
|
}
|
|
231
236
|
: undefined
|
|
232
237
|
|
|
233
|
-
const shouldAvoidClasses =
|
|
234
|
-
!isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
|
|
235
|
-
|
|
236
|
-
const shouldForcePseudo = !!propsIn.forceStyle
|
|
237
238
|
const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
|
|
238
|
-
const noClassNames = shouldAvoidClasses || shouldForcePseudo
|
|
239
239
|
const languageContext = isRSC ? null : useContext(FontLanguageContext)
|
|
240
240
|
const isDisabled = props.disabled ?? props.accessibilityState?.disabled
|
|
241
241
|
|
|
@@ -676,6 +676,8 @@ export function createComponent<
|
|
|
676
676
|
for (const style of styles) {
|
|
677
677
|
if (style?.fontFamily) {
|
|
678
678
|
style.fontFamily = overrideFace
|
|
679
|
+
delete style.fontWeight
|
|
680
|
+
delete style.fontStyle
|
|
679
681
|
}
|
|
680
682
|
}
|
|
681
683
|
}
|
|
@@ -196,7 +196,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
196
196
|
const shouldDoClasses =
|
|
197
197
|
staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
|
|
198
198
|
|
|
199
|
-
|
|
199
|
+
let style: ViewStyle = {}
|
|
200
200
|
let flatTransforms: Record<string, any> | undefined
|
|
201
201
|
|
|
202
202
|
const len = propKeys.length
|
|
@@ -537,7 +537,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
537
537
|
conf,
|
|
538
538
|
languageContext,
|
|
539
539
|
true,
|
|
540
|
-
|
|
540
|
+
state.noClassNames
|
|
541
541
|
)
|
|
542
542
|
|
|
543
543
|
const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
|
|
@@ -554,6 +554,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
554
554
|
|
|
555
555
|
if (shouldDoClasses) {
|
|
556
556
|
const pseudoStyles = getAtomicStyle(pseudoStyleObject, descriptor)
|
|
557
|
+
if (debug) console.log('pseudoStyles', pseudoStyles)
|
|
557
558
|
for (const psuedoStyle of pseudoStyles) {
|
|
558
559
|
const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`
|
|
559
560
|
if (!usedKeys[fullKey]) {
|
|
@@ -612,7 +613,7 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
612
613
|
languageContext,
|
|
613
614
|
// TODO try true like pseudo
|
|
614
615
|
false,
|
|
615
|
-
|
|
616
|
+
state.noClassNames
|
|
616
617
|
)
|
|
617
618
|
|
|
618
619
|
if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
|
|
@@ -656,7 +657,6 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
656
657
|
}
|
|
657
658
|
|
|
658
659
|
if (validStyleProps[key]) {
|
|
659
|
-
usedKeys[key] = 1
|
|
660
660
|
mergeStyle(key, val)
|
|
661
661
|
continue
|
|
662
662
|
}
|
|
@@ -725,6 +725,9 @@ export const getSplitStyles: StyleSplitter = (
|
|
|
725
725
|
addStyleToInsertRules(rulesToInsert, atomicStyle)
|
|
726
726
|
mergeClassName(transforms, classNames, key, atomicStyle.identifier)
|
|
727
727
|
}
|
|
728
|
+
if (!IS_STATIC) {
|
|
729
|
+
style = {}
|
|
730
|
+
}
|
|
728
731
|
}
|
|
729
732
|
}
|
|
730
733
|
|
|
@@ -78,10 +78,8 @@ const generateAtomicStyles = (
|
|
|
78
78
|
const style = styleIn as Record<string, string | null | undefined>
|
|
79
79
|
|
|
80
80
|
// transform
|
|
81
|
-
if (style.transform) {
|
|
82
|
-
|
|
83
|
-
style.transform = style.transform.map(mapTransform).join(' ')
|
|
84
|
-
}
|
|
81
|
+
if (style.transform && Array.isArray(style.transform)) {
|
|
82
|
+
style.transform = style.transform.map(mapTransform).join(' ')
|
|
85
83
|
}
|
|
86
84
|
|
|
87
85
|
styleToCSS(style)
|
package/src/hooks/useMedia.tsx
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { MutableRefObject, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
|
|
1
|
+
import { useEffect, useMemo, useSyncExternalStore } from 'react'
|
|
3
2
|
|
|
4
3
|
import { getConfig } from '../config'
|
|
5
4
|
import { createProxy } from '../helpers/createProxy'
|
|
@@ -140,16 +139,9 @@ export function useMediaListeners(config: TamaguiInternalConfig) {
|
|
|
140
139
|
}, [])
|
|
141
140
|
}
|
|
142
141
|
|
|
143
|
-
const nextTick = process.nextTick || setImmediate
|
|
144
142
|
const currentStateListeners = new Set<any>()
|
|
145
|
-
let isUpdating = false
|
|
146
143
|
function updateCurrentState() {
|
|
147
|
-
|
|
148
|
-
isUpdating = true
|
|
149
|
-
nextTick(() => {
|
|
150
|
-
currentStateListeners.forEach((cb) => cb(mediaState))
|
|
151
|
-
isUpdating = false
|
|
152
|
-
})
|
|
144
|
+
currentStateListeners.forEach((cb) => cb(mediaState))
|
|
153
145
|
}
|
|
154
146
|
function subscribe(subscriber: any) {
|
|
155
147
|
currentStateListeners.add(subscriber)
|
package/src/hooks/useTheme.tsx
CHANGED
|
@@ -37,7 +37,8 @@ export const useTheme = (
|
|
|
37
37
|
themeName?: string | null,
|
|
38
38
|
componentName?: string,
|
|
39
39
|
props?: ThemeProps,
|
|
40
|
-
forceUpdate?: any
|
|
40
|
+
forceUpdate?: any,
|
|
41
|
+
disableTracking?: boolean
|
|
41
42
|
): ThemeParsed => {
|
|
42
43
|
// TODO this can use useChangeThemeEffect almost ready
|
|
43
44
|
if (isRSC) {
|
|
@@ -99,18 +100,40 @@ export const useTheme = (
|
|
|
99
100
|
}
|
|
100
101
|
|
|
101
102
|
return useMemo(() => {
|
|
102
|
-
return getThemeProxied(
|
|
103
|
-
|
|
103
|
+
return getThemeProxied({
|
|
104
|
+
theme,
|
|
105
|
+
name,
|
|
106
|
+
className,
|
|
107
|
+
themeManager,
|
|
108
|
+
onStringKeyAccess(key) {
|
|
109
|
+
if (disableTracking) return
|
|
110
|
+
if (state) {
|
|
111
|
+
if (state.current.isRendering && !state.current.keys.has(key)) {
|
|
112
|
+
state.current.keys.add(key)
|
|
113
|
+
if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
|
|
114
|
+
// eslint-disable-next-line no-console
|
|
115
|
+
console.log(' 🔸 tracking theme', key)
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
})
|
|
121
|
+
}, [theme, name, className, themeManager, debugProp, disableTracking])
|
|
104
122
|
}
|
|
105
123
|
|
|
106
|
-
function getThemeProxied(
|
|
107
|
-
theme
|
|
108
|
-
name
|
|
109
|
-
className
|
|
110
|
-
themeManager
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
124
|
+
function getThemeProxied({
|
|
125
|
+
theme,
|
|
126
|
+
name,
|
|
127
|
+
className,
|
|
128
|
+
themeManager,
|
|
129
|
+
onStringKeyAccess,
|
|
130
|
+
}: {
|
|
131
|
+
theme: any
|
|
132
|
+
name: string
|
|
133
|
+
onStringKeyAccess?: (cb: string) => void
|
|
134
|
+
className?: string
|
|
135
|
+
themeManager?: ThemeManager | null
|
|
136
|
+
}) {
|
|
114
137
|
return createProxy(theme, {
|
|
115
138
|
has(_, key) {
|
|
116
139
|
if (typeof key === 'string' && key[0] === '$') {
|
|
@@ -141,15 +164,7 @@ function getThemeProxied(
|
|
|
141
164
|
if (!themeManager) {
|
|
142
165
|
return theme[key]
|
|
143
166
|
}
|
|
144
|
-
|
|
145
|
-
if (state.current.isRendering && !state.current.keys.has(key)) {
|
|
146
|
-
state.current.keys.add(key)
|
|
147
|
-
if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
|
|
148
|
-
// eslint-disable-next-line no-console
|
|
149
|
-
console.log(' 🔸 tracking theme', key)
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
}
|
|
167
|
+
onStringKeyAccess?.(key)
|
|
153
168
|
return themeManager.getValue(key)
|
|
154
169
|
},
|
|
155
170
|
})
|
|
@@ -9,7 +9,7 @@ export interface ThemeProps {
|
|
|
9
9
|
reset?: boolean;
|
|
10
10
|
debug?: boolean | 'verbose';
|
|
11
11
|
}
|
|
12
|
-
export declare const useTheme: (themeName?: string | null, componentName?: string, props?: ThemeProps, forceUpdate?: any) => ThemeParsed;
|
|
12
|
+
export declare const useTheme: (themeName?: string | null, componentName?: string, props?: ThemeProps, forceUpdate?: any, disableTracking?: boolean) => ThemeParsed;
|
|
13
13
|
export declare const getThemeManager: (theme: any) => ThemeManager | undefined;
|
|
14
14
|
export declare function useThemeName(opts?: {
|
|
15
15
|
parent?: true;
|