@tamagui/core 1.0.1-beta.104 → 1.0.1-beta.105
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/createTamagui.js +2 -2
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/hooks/useMedia.js +2 -0
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/insertFont.js +2 -1
- package/dist/cjs/insertFont.js.map +2 -2
- package/dist/esm/createTamagui.js +2 -2
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/hooks/useMedia.js +2 -0
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/esm/insertFont.js +2 -1
- package/dist/esm/insertFont.js.map +2 -2
- package/package.json +8 -8
- package/types/hooks/useMedia.d.ts.map +1 -1
- package/types/insertFont.d.ts.map +1 -1
|
@@ -67,8 +67,8 @@ function createTamagui(config) {
|
|
|
67
67
|
throw new Error(`No fonts provided to Tamagui config`);
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
if ((0, import_conf.getHasConfigured)()) {
|
|
71
|
-
console.
|
|
70
|
+
if ((0, import_conf.getHasConfigured)() && process.env.IS_STATIC !== "is_static") {
|
|
71
|
+
console.trace(`Warning: createTamagui called twice (maybe HMR)`);
|
|
72
72
|
}
|
|
73
73
|
(0, import_useMedia.configureMedia)({
|
|
74
74
|
queries: config.media,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTamagui.ts"],
|
|
4
|
-
"sourcesContent": ["import { configListeners, getHasConfigured, setConfig } from './conf'\nimport { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { isWeb } from './constants/platform'\nimport { SpacerProps } from './createComponent'\nimport { themeToVariableToValueMap } from './createTheme'\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getInsertedRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokenRules,\n tokensValueToVariable,\n} from './helpers/registerCSSVariable'\nimport { GetThemeUnwrapped } from './hooks/getThemeUnwrapped'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport {\n AnimationDriver,\n CreateTamaguiConfig,\n GenericTamaguiConfig,\n MediaQueryKey,\n StackProps,\n TamaguiInternalConfig,\n TextProps,\n ThemeObject,\n} from './types'\n\nexport type CreateTamaguiProps =\n // user then re-defines the types after createTamagui returns the typed object they want\n Partial<Omit<GenericTamaguiConfig, 'themes' | 'tokens' | 'animations'>> & {\n animations?: AnimationDriver<any>\n tokens: GenericTamaguiConfig['tokens']\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n\n defaultProps?: Record<string, any> & {\n Stack?: StackProps\n Text?: TextProps\n Spacer?: SpacerProps\n }\n\n // for the first render, determines which media queries are true\n // useful for SSR\n mediaQueryDefaultActive?: MediaQueryKey[]\n\n // what's between each CSS style rule, set to \"\\n\" to be easier to read\n // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n cssStyleSeparator?: string\n\n // (Advanced)\n // on the web, tamagui treats `dark` and `light` themes as special and\n // generates extra CSS to avoid having to re-render the entire page.\n // this CSS relies on specificity hacks that multiply by your sub-themes.\n // this sets the maxiumum number of nested dark/light themes you can do\n // defaults to 3 for a balance, but can be higher if you nest them deeply.\n maxDarkLightNesting?: number\n\n // adds @media(prefers-color-scheme) media queries for dark/light\n shouldAddPrefersColorThemes?: boolean\n\n // only if you put the theme classname on the html element we have to generate diff\n themeClassNameOnRoot?: boolean\n }\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport type InferTamaguiConfig<Conf extends CreateTamaguiProps> = Conf extends Partial<\n CreateTamaguiConfig<infer A, infer B, infer C, infer D, infer E, infer F>\n>\n ? TamaguiInternalConfig<A, B, C, D, E, F>\n : unknown\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): InferTamaguiConfig<Conf> {\n if (createdConfigs.has(config)) {\n return config as any\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (!config.tokens) {\n throw new Error(`No tokens provided to Tamagui config`)\n }\n if (!config.themes) {\n throw new Error(`No themes provided to Tamagui config`)\n }\n if (!config.fonts) {\n throw new Error(`No fonts provided to Tamagui config`)\n }\n }\n\n // test env loads a few times as it runs diff tests\n if (getHasConfigured()) {\n console.warn(`Warning: createTamagui called twice (maybe HMR)`)\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n const fontTokens = createVariables(config.fonts!)\n const fontsParsed = (() => {\n const res = {} as typeof fontTokens\n for (const familyName in fontTokens) {\n res[`$${familyName}`] = parseFont(fontTokens[familyName])\n }\n return res!\n })()\n\n const themeConfig = (() => {\n const themes = { ...config.themes }\n const cssRules: string[] = []\n\n if (isWeb) {\n for (const key in config.tokens) {\n for (const skey in config.tokens[key]) {\n const val = config.tokens[key][skey]\n registerCSSVariable(val)\n }\n }\n\n for (const key in fontsParsed) {\n const fontParsed = fontsParsed[key]\n registerFontVariables(fontParsed)\n }\n\n const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n cssRules.push(`:root {${sep}${[...tokenRules].join(`;${sep}`)}${sep}}`)\n }\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n\n // dedupe themes to avoid duplicate CSS generation\n type DedupedTheme = {\n names: string[]\n theme: ThemeObject\n }\n const dedupedThemes: {\n [key: string]: DedupedTheme\n } = {}\n const existing = new WeakMap<ThemeObject, DedupedTheme>()\n\n // first, de-dupe and parse them\n for (const themeName in themes) {\n const rawTheme = themes[themeName]\n\n // if existing, avoid\n if (existing.has(rawTheme)) {\n const e = existing.get(rawTheme)!\n themes[themeName] = e.theme\n e.names.push(themeName)\n continue\n }\n\n // parse into variables\n const theme = { ...config.themes[themeName] }\n for (const key in theme) {\n // make sure properly names theme variables\n ensureThemeVariable(theme, key)\n }\n themes[themeName] = theme\n\n // set deduped\n dedupedThemes[themeName] = {\n names: [themeName],\n theme,\n }\n existing.set(config.themes[themeName], dedupedThemes[themeName])\n }\n\n // then, generate from de-duped\n if (isWeb) {\n for (const themeName in dedupedThemes) {\n const { theme, names } = dedupedThemes[themeName]\n let vars = ''\n\n themeToVariableToValueMap.set(theme, {})\n const varToValMap = themeToVariableToValueMap.get(theme)\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n if (varToValMap) {\n varToValMap[variable.variable] = variable.val\n }\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const max = config.maxDarkLightNesting ?? 3\n\n new Array(Math.round(max * 1.5)).fill(undefined).forEach((_, pi) => {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) return\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n selectors.push(`${parentSelectors.join(' ')} ${childSelector}`)\n })\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRules.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRules.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\n body { background:${theme.background}; color: ${theme.color} }\n :root {${vars} } \n }`\n )\n }\n }\n }\n\n // proxy upwards to get parent variables (themes are subset going down)\n for (const themeName in themes) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n if (!parents.length) continue\n\n const og = themes[themeName]\n themes[themeName] = new Proxy(og, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return og\n }\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n }\n\n tokensValueToVariable.clear()\n Object.freeze(cssRules)\n const css = cssRules.join('\\n')\n\n return {\n themes,\n cssRules,\n css,\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n\n const getCSS = () => {\n return `${themeConfig.css}\\n${getInsertedRules().join('\\n')}`\n }\n\n if (config.shorthands) {\n for (const key in config.shorthands) {\n reversedShorthands[config.shorthands[key]] = key\n }\n }\n\n const next: TamaguiInternalConfig = {\n defaultTheme: 'light',\n fonts: {},\n animations: {} as any,\n shorthands: {},\n media: {},\n ...config,\n themes: themeConfig.themes,\n fontsParsed,\n themeConfig,\n tokensParsed,\n parsed: true,\n getCSS,\n Provider: null as any,\n }\n\n next.Provider = createTamaguiProvider(next)\n\n setConfig(next)\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n createdConfigs.set(next, true)\n\n if (process.env.NODE_ENV === 'development') {\n if (!globalThis['Tamagui']) {\n globalThis['Tamagui'] = Tamagui\n }\n }\n\n // @ts-expect-error\n return next\n}\n\nexport const reversedShorthands: Record<string, string> = {}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\n\n// for quick testing types:\n// const x = createTamagui({\n// shorthands: {},\n// media: {},\n// themes: {},\n// tokens: {\n// font: {},\n// color: {},\n// radius: {},\n// size: {},\n// space: {},\n// zIndex: {},\n// },\n// })\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6D;AAC7D,uBAAuC;AACvC,sBAAsB;AAEtB,yBAA0C;AAC1C,4BAAqD;AACrD,6BAAgC;AAChC,mCAAsC;AACtC,6BAAiC;AACjC,iCAIO;AACP,+BAAkC;AAClC,sBAA+B;AAC/B,wBAAiD;AACjD,qBAAwB;AAqDxB,MAAM,iBAAiB,oBAAI,QAAsB;AAQ1C,uBACL,QAC0B;AAC1B,MAAI,eAAe,IAAI,MAAM,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,OAAO,QAAQ;AAClB,YAAM,IAAI,MAAM,sCAAsC;AAAA,IACxD;AACA,QAAI,CAAC,OAAO,QAAQ;AAClB,YAAM,IAAI,MAAM,sCAAsC;AAAA,IACxD;AACA,QAAI,CAAC,OAAO,OAAO;AACjB,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAAA,EACF;AAGA,MAAI,kCAAiB,
|
|
4
|
+
"sourcesContent": ["import { configListeners, getHasConfigured, setConfig } from './conf'\nimport { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { isWeb } from './constants/platform'\nimport { SpacerProps } from './createComponent'\nimport { themeToVariableToValueMap } from './createTheme'\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getInsertedRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokenRules,\n tokensValueToVariable,\n} from './helpers/registerCSSVariable'\nimport { GetThemeUnwrapped } from './hooks/getThemeUnwrapped'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport {\n AnimationDriver,\n CreateTamaguiConfig,\n GenericTamaguiConfig,\n MediaQueryKey,\n StackProps,\n TamaguiInternalConfig,\n TextProps,\n ThemeObject,\n} from './types'\n\nexport type CreateTamaguiProps =\n // user then re-defines the types after createTamagui returns the typed object they want\n Partial<Omit<GenericTamaguiConfig, 'themes' | 'tokens' | 'animations'>> & {\n animations?: AnimationDriver<any>\n tokens: GenericTamaguiConfig['tokens']\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n\n defaultProps?: Record<string, any> & {\n Stack?: StackProps\n Text?: TextProps\n Spacer?: SpacerProps\n }\n\n // for the first render, determines which media queries are true\n // useful for SSR\n mediaQueryDefaultActive?: MediaQueryKey[]\n\n // what's between each CSS style rule, set to \"\\n\" to be easier to read\n // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n cssStyleSeparator?: string\n\n // (Advanced)\n // on the web, tamagui treats `dark` and `light` themes as special and\n // generates extra CSS to avoid having to re-render the entire page.\n // this CSS relies on specificity hacks that multiply by your sub-themes.\n // this sets the maxiumum number of nested dark/light themes you can do\n // defaults to 3 for a balance, but can be higher if you nest them deeply.\n maxDarkLightNesting?: number\n\n // adds @media(prefers-color-scheme) media queries for dark/light\n shouldAddPrefersColorThemes?: boolean\n\n // only if you put the theme classname on the html element we have to generate diff\n themeClassNameOnRoot?: boolean\n }\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport type InferTamaguiConfig<Conf extends CreateTamaguiProps> = Conf extends Partial<\n CreateTamaguiConfig<infer A, infer B, infer C, infer D, infer E, infer F>\n>\n ? TamaguiInternalConfig<A, B, C, D, E, F>\n : unknown\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): InferTamaguiConfig<Conf> {\n if (createdConfigs.has(config)) {\n return config as any\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (!config.tokens) {\n throw new Error(`No tokens provided to Tamagui config`)\n }\n if (!config.themes) {\n throw new Error(`No themes provided to Tamagui config`)\n }\n if (!config.fonts) {\n throw new Error(`No fonts provided to Tamagui config`)\n }\n }\n\n // test env loads a few times as it runs diff tests\n if (getHasConfigured() && process.env.IS_STATIC !== 'is_static') {\n console.trace(`Warning: createTamagui called twice (maybe HMR)`)\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n const fontTokens = createVariables(config.fonts!)\n const fontsParsed = (() => {\n const res = {} as typeof fontTokens\n for (const familyName in fontTokens) {\n res[`$${familyName}`] = parseFont(fontTokens[familyName])\n }\n return res!\n })()\n\n const themeConfig = (() => {\n const themes = { ...config.themes }\n const cssRules: string[] = []\n\n if (isWeb) {\n for (const key in config.tokens) {\n for (const skey in config.tokens[key]) {\n const val = config.tokens[key][skey]\n registerCSSVariable(val)\n }\n }\n\n for (const key in fontsParsed) {\n const fontParsed = fontsParsed[key]\n registerFontVariables(fontParsed)\n }\n\n const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n cssRules.push(`:root {${sep}${[...tokenRules].join(`;${sep}`)}${sep}}`)\n }\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n\n // dedupe themes to avoid duplicate CSS generation\n type DedupedTheme = {\n names: string[]\n theme: ThemeObject\n }\n const dedupedThemes: {\n [key: string]: DedupedTheme\n } = {}\n const existing = new WeakMap<ThemeObject, DedupedTheme>()\n\n // first, de-dupe and parse them\n for (const themeName in themes) {\n const rawTheme = themes[themeName]\n\n // if existing, avoid\n if (existing.has(rawTheme)) {\n const e = existing.get(rawTheme)!\n themes[themeName] = e.theme\n e.names.push(themeName)\n continue\n }\n\n // parse into variables\n const theme = { ...config.themes[themeName] }\n for (const key in theme) {\n // make sure properly names theme variables\n ensureThemeVariable(theme, key)\n }\n themes[themeName] = theme\n\n // set deduped\n dedupedThemes[themeName] = {\n names: [themeName],\n theme,\n }\n existing.set(config.themes[themeName], dedupedThemes[themeName])\n }\n\n // then, generate from de-duped\n if (isWeb) {\n for (const themeName in dedupedThemes) {\n const { theme, names } = dedupedThemes[themeName]\n let vars = ''\n\n themeToVariableToValueMap.set(theme, {})\n const varToValMap = themeToVariableToValueMap.get(theme)\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n if (varToValMap) {\n varToValMap[variable.variable] = variable.val\n }\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const max = config.maxDarkLightNesting ?? 3\n\n new Array(Math.round(max * 1.5)).fill(undefined).forEach((_, pi) => {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) return\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n selectors.push(`${parentSelectors.join(' ')} ${childSelector}`)\n })\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRules.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRules.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\n body { background:${theme.background}; color: ${theme.color} }\n :root {${vars} } \n }`\n )\n }\n }\n }\n\n // proxy upwards to get parent variables (themes are subset going down)\n for (const themeName in themes) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n if (!parents.length) continue\n\n const og = themes[themeName]\n themes[themeName] = new Proxy(og, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return og\n }\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n }\n\n tokensValueToVariable.clear()\n Object.freeze(cssRules)\n const css = cssRules.join('\\n')\n\n return {\n themes,\n cssRules,\n css,\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n\n const getCSS = () => {\n return `${themeConfig.css}\\n${getInsertedRules().join('\\n')}`\n }\n\n if (config.shorthands) {\n for (const key in config.shorthands) {\n reversedShorthands[config.shorthands[key]] = key\n }\n }\n\n const next: TamaguiInternalConfig = {\n defaultTheme: 'light',\n fonts: {},\n animations: {} as any,\n shorthands: {},\n media: {},\n ...config,\n themes: themeConfig.themes,\n fontsParsed,\n themeConfig,\n tokensParsed,\n parsed: true,\n getCSS,\n Provider: null as any,\n }\n\n next.Provider = createTamaguiProvider(next)\n\n setConfig(next)\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n createdConfigs.set(next, true)\n\n if (process.env.NODE_ENV === 'development') {\n if (!globalThis['Tamagui']) {\n globalThis['Tamagui'] = Tamagui\n }\n }\n\n // @ts-expect-error\n return next\n}\n\nexport const reversedShorthands: Record<string, string> = {}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\n\n// for quick testing types:\n// const x = createTamagui({\n// shorthands: {},\n// media: {},\n// themes: {},\n// tokens: {\n// font: {},\n// color: {},\n// radius: {},\n// size: {},\n// space: {},\n// zIndex: {},\n// },\n// })\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -66,6 +66,8 @@ const configureMedia = ({
|
|
|
66
66
|
defaultActive = ["sm", "xs"]
|
|
67
67
|
} = {}) => {
|
|
68
68
|
if (hasConfigured) {
|
|
69
|
+
if (process.env.IS_STATIC === "is_static")
|
|
70
|
+
return;
|
|
69
71
|
console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
|
|
70
72
|
}
|
|
71
73
|
if (queries) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useMedia.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: MediaQueryState = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nlet hasConfigured = false\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (hasConfigured) {\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n Object.assign(mediaQueryConfig, queries)\n hasConfigured = true\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[key])\n const propKey = `$${key}`\n try {\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match || typeof match.addListener !== 'function') {\n // caught below\n throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n }\n mediaState[propKey] = !!match.matches\n match.addListener(update)\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[propKey]) return\n mediaState[propKey] = next\n const listeners = mediaQueryListeners[propKey]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n }\n\n update()\n } catch (err: any) {\n console.error('Error running media query', str, err.message, err.stack)\n const isDefaultActive = defaultActive?.includes(key as any) ?? true\n mediaState[propKey] = isDefaultActive\n }\n }\n}\n\ntype UseMediaState = {\n selections: { [key: string]: boolean }\n nextSelections: { [key: string]: boolean }\n isRendering: boolean\n isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n const forceUpdate = useForceUpdate()\n const state = useRef() as React.MutableRefObject<UseMediaState>\n if (!state.current) {\n state.current = {\n selections: {},\n nextSelections: {},\n isUnmounted: false,\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n // delete old\n for (const key in st.selections) {\n if (!(key in st.nextSelections)) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n // add new\n for (const key in st.nextSelections) {\n if (!(key in st.selections)) {\n addMediaQueryListener(key, forceUpdate)\n }\n }\n })\n\n // unmount\n useIsomorphicLayoutEffect(() => {\n return () => {\n const st = state.current\n st.isUnmounted = true\n const allKeys = {\n ...st.selections,\n ...st.nextSelections,\n }\n for (const key in allKeys) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n }, [])\n\n return useConstant(() => {\n const st = state.current\n return new Proxy(\n mediaState as {\n [key in MediaQueryKey]: boolean\n },\n {\n get(target, key: string) {\n if (key[0] !== '$') {\n key = `$${key}`\n }\n if (!(key in mediaState)) {\n return Reflect.get(target, key)\n }\n if (!st.isUnmounted) {\n if (st.isRendering) {\n st.nextSelections[key] = true\n }\n }\n if (key in mediaState) {\n return mediaState[key]\n }\n return Reflect.get(mediaState, key)\n },\n }\n )\n })\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 { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: MediaQueryState = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nlet hasConfigured = false\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (hasConfigured) {\n if (process.env.IS_STATIC === 'is_static') return\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n Object.assign(mediaQueryConfig, queries)\n hasConfigured = true\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[key])\n const propKey = `$${key}`\n try {\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match || typeof match.addListener !== 'function') {\n // caught below\n throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n }\n mediaState[propKey] = !!match.matches\n match.addListener(update)\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[propKey]) return\n mediaState[propKey] = next\n const listeners = mediaQueryListeners[propKey]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n }\n\n update()\n } catch (err: any) {\n console.error('Error running media query', str, err.message, err.stack)\n const isDefaultActive = defaultActive?.includes(key as any) ?? true\n mediaState[propKey] = isDefaultActive\n }\n }\n}\n\ntype UseMediaState = {\n selections: { [key: string]: boolean }\n nextSelections: { [key: string]: boolean }\n isRendering: boolean\n isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n const forceUpdate = useForceUpdate()\n const state = useRef() as React.MutableRefObject<UseMediaState>\n if (!state.current) {\n state.current = {\n selections: {},\n nextSelections: {},\n isUnmounted: false,\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n // delete old\n for (const key in st.selections) {\n if (!(key in st.nextSelections)) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n // add new\n for (const key in st.nextSelections) {\n if (!(key in st.selections)) {\n addMediaQueryListener(key, forceUpdate)\n }\n }\n })\n\n // unmount\n useIsomorphicLayoutEffect(() => {\n return () => {\n const st = state.current\n st.isUnmounted = true\n const allKeys = {\n ...st.selections,\n ...st.nextSelections,\n }\n for (const key in allKeys) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n }, [])\n\n return useConstant(() => {\n const st = state.current\n return new Proxy(\n mediaState as {\n [key in MediaQueryKey]: boolean\n },\n {\n get(target, key: string) {\n if (key[0] !== '$') {\n key = `$${key}`\n }\n if (!(key in mediaState)) {\n return Reflect.get(target, key)\n }\n if (!st.isUnmounted) {\n if (st.isRendering) {\n st.nextSelections[key] = true\n }\n }\n if (key in mediaState) {\n return mediaState[key]\n }\n return Reflect.get(mediaState, key)\n },\n }\n )\n })\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": []
|
|
7
7
|
}
|
package/dist/cjs/insertFont.js
CHANGED
|
@@ -41,6 +41,7 @@ function insertFont(name, fontIn) {
|
|
|
41
41
|
return parsed;
|
|
42
42
|
}
|
|
43
43
|
function parseFont(definition) {
|
|
44
|
+
var _a;
|
|
44
45
|
const parsed = {};
|
|
45
46
|
for (const attrKey in definition) {
|
|
46
47
|
const attr = definition[attrKey];
|
|
@@ -51,7 +52,7 @@ function parseFont(definition) {
|
|
|
51
52
|
parsed[attrKey] = {};
|
|
52
53
|
for (const key in attr) {
|
|
53
54
|
let val = attr[key];
|
|
54
|
-
if (val.val[0] === "$") {
|
|
55
|
+
if (((_a = val.val) == null ? void 0 : _a[0]) === "$") {
|
|
55
56
|
val = val.val;
|
|
56
57
|
}
|
|
57
58
|
parsed[attrKey][`$${key}`] = val;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/insertFont.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { setConfigFont } from './conf'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\nexport function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {\n const font = createFont(fontIn)\n const tokened = createVariables(font, name) as GenericFont\n const parsed = parseFont(tokened) as DeepVariableObject<A>\n if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {\n const css = registerFontVariables(parsed, true)\n const style = document.createElement('style')\n style.innerText = `:root {${css}}`\n style.setAttribute('data-tamagui-font', name)\n document.head.appendChild(style)\n }\n setConfigFont(name, tokened, parsed)\n return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n const parsed: any = {}\n for (const attrKey in definition) {\n const attr = definition[attrKey]\n if (attrKey === 'family') {\n parsed[attrKey] = attr\n continue\n }\n parsed[attrKey] = {}\n for (const key in attr) {\n let val = attr[key] as any as Variable\n // is a theme reference\n if (val.val?.[0] === '$') {\n val = val.val\n }\n parsed[attrKey][`$${key}`] = val\n }\n }\n return parsed\n}\n\nexport function registerFontVariables(parsedFont: any, collect = false) {\n let vals = ''\n for (const fkey in parsedFont) {\n if (fkey === 'family') {\n const val = registerCSSVariable(parsedFont[fkey])\n if (collect) vals += val + ';'\n } else {\n for (const fskey in parsedFont[fkey]) {\n const fval = parsedFont[fkey][fskey]\n if (typeof fval === 'string') {\n // no need to add its a theme reference like \"$borderColor\"\n } else {\n const val = registerCSSVariable(parsedFont[fkey][fskey])\n if (collect) vals += val + ';'\n }\n }\n }\n }\n return vals\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA8B;AAC9B,wBAA2B;AAE3B,6BAAoD;AACpD,iCAAoC;AAG7B,oBAA2C,MAAc,QAAkC;AAChG,QAAM,OAAO,kCAAW,MAAM;AAC9B,QAAM,UAAU,4CAAgB,MAAM,IAAI;AAC1C,QAAM,SAAS,UAAU,OAAO;AAChC,MAAI,QAAQ,IAAI,mBAAmB,SAAS,OAAO,aAAa,aAAa;AAC3E,UAAM,MAAM,sBAAsB,QAAQ,IAAI;AAC9C,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,UAAU;AAC5B,UAAM,aAAa,qBAAqB,IAAI;AAC5C,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AACA,iCAAc,MAAM,SAAS,MAAM;AACnC,SAAO;AACT;AAEO,mBAA0C,YAAsC;AAtBvF;AAuBE,QAAM,SAAc,CAAC;AACrB,aAAW,WAAW,YAAY;AAChC,UAAM,OAAO,WAAW;AACxB,QAAI,YAAY,UAAU;AACxB,aAAO,WAAW;AAClB;AAAA,IACF;AACA,WAAO,WAAW,CAAC;AACnB,eAAW,OAAO,MAAM;AACtB,UAAI,MAAM,KAAK;AAEf,UAAI,WAAI,QAAJ,mBAAU,QAAO,KAAK;AACxB,cAAM,IAAI;AAAA,MACZ;AACA,aAAO,SAAS,IAAI,SAAS;AAAA,IAC/B;AAAA,EACF;AACA,SAAO;AACT;AAEO,+BAA+B,YAAiB,UAAU,OAAO;AACtE,MAAI,OAAO;AACX,aAAW,QAAQ,YAAY;AAC7B,QAAI,SAAS,UAAU;AACrB,YAAM,MAAM,oDAAoB,WAAW,KAAK;AAChD,UAAI;AAAS,gBAAQ,MAAM;AAAA,IAC7B,OAAO;AACL,iBAAW,SAAS,WAAW,OAAO;AACpC,cAAM,OAAO,WAAW,MAAM;AAC9B,YAAI,OAAO,SAAS,UAAU;AAAA,QAE9B,OAAO;AACL,gBAAM,MAAM,oDAAoB,WAAW,MAAM,MAAM;AACvD,cAAI;AAAS,oBAAQ,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,8 +50,8 @@ function createTamagui(config) {
|
|
|
50
50
|
throw new Error(`No fonts provided to Tamagui config`);
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
if (getHasConfigured()) {
|
|
54
|
-
console.
|
|
53
|
+
if (getHasConfigured() && process.env.IS_STATIC !== "is_static") {
|
|
54
|
+
console.trace(`Warning: createTamagui called twice (maybe HMR)`);
|
|
55
55
|
}
|
|
56
56
|
configureMedia({
|
|
57
57
|
queries: config.media,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTamagui.ts"],
|
|
4
|
-
"sourcesContent": ["import { configListeners, getHasConfigured, setConfig } from './conf'\nimport { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { isWeb } from './constants/platform'\nimport { SpacerProps } from './createComponent'\nimport { themeToVariableToValueMap } from './createTheme'\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getInsertedRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokenRules,\n tokensValueToVariable,\n} from './helpers/registerCSSVariable'\nimport { GetThemeUnwrapped } from './hooks/getThemeUnwrapped'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport {\n AnimationDriver,\n CreateTamaguiConfig,\n GenericTamaguiConfig,\n MediaQueryKey,\n StackProps,\n TamaguiInternalConfig,\n TextProps,\n ThemeObject,\n} from './types'\n\nexport type CreateTamaguiProps =\n // user then re-defines the types after createTamagui returns the typed object they want\n Partial<Omit<GenericTamaguiConfig, 'themes' | 'tokens' | 'animations'>> & {\n animations?: AnimationDriver<any>\n tokens: GenericTamaguiConfig['tokens']\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n\n defaultProps?: Record<string, any> & {\n Stack?: StackProps\n Text?: TextProps\n Spacer?: SpacerProps\n }\n\n // for the first render, determines which media queries are true\n // useful for SSR\n mediaQueryDefaultActive?: MediaQueryKey[]\n\n // what's between each CSS style rule, set to \"\\n\" to be easier to read\n // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n cssStyleSeparator?: string\n\n // (Advanced)\n // on the web, tamagui treats `dark` and `light` themes as special and\n // generates extra CSS to avoid having to re-render the entire page.\n // this CSS relies on specificity hacks that multiply by your sub-themes.\n // this sets the maxiumum number of nested dark/light themes you can do\n // defaults to 3 for a balance, but can be higher if you nest them deeply.\n maxDarkLightNesting?: number\n\n // adds @media(prefers-color-scheme) media queries for dark/light\n shouldAddPrefersColorThemes?: boolean\n\n // only if you put the theme classname on the html element we have to generate diff\n themeClassNameOnRoot?: boolean\n }\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport type InferTamaguiConfig<Conf extends CreateTamaguiProps> = Conf extends Partial<\n CreateTamaguiConfig<infer A, infer B, infer C, infer D, infer E, infer F>\n>\n ? TamaguiInternalConfig<A, B, C, D, E, F>\n : unknown\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): InferTamaguiConfig<Conf> {\n if (createdConfigs.has(config)) {\n return config as any\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (!config.tokens) {\n throw new Error(`No tokens provided to Tamagui config`)\n }\n if (!config.themes) {\n throw new Error(`No themes provided to Tamagui config`)\n }\n if (!config.fonts) {\n throw new Error(`No fonts provided to Tamagui config`)\n }\n }\n\n // test env loads a few times as it runs diff tests\n if (getHasConfigured()) {\n console.warn(`Warning: createTamagui called twice (maybe HMR)`)\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n const fontTokens = createVariables(config.fonts!)\n const fontsParsed = (() => {\n const res = {} as typeof fontTokens\n for (const familyName in fontTokens) {\n res[`$${familyName}`] = parseFont(fontTokens[familyName])\n }\n return res!\n })()\n\n const themeConfig = (() => {\n const themes = { ...config.themes }\n const cssRules: string[] = []\n\n if (isWeb) {\n for (const key in config.tokens) {\n for (const skey in config.tokens[key]) {\n const val = config.tokens[key][skey]\n registerCSSVariable(val)\n }\n }\n\n for (const key in fontsParsed) {\n const fontParsed = fontsParsed[key]\n registerFontVariables(fontParsed)\n }\n\n const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n cssRules.push(`:root {${sep}${[...tokenRules].join(`;${sep}`)}${sep}}`)\n }\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n\n // dedupe themes to avoid duplicate CSS generation\n type DedupedTheme = {\n names: string[]\n theme: ThemeObject\n }\n const dedupedThemes: {\n [key: string]: DedupedTheme\n } = {}\n const existing = new WeakMap<ThemeObject, DedupedTheme>()\n\n // first, de-dupe and parse them\n for (const themeName in themes) {\n const rawTheme = themes[themeName]\n\n // if existing, avoid\n if (existing.has(rawTheme)) {\n const e = existing.get(rawTheme)!\n themes[themeName] = e.theme\n e.names.push(themeName)\n continue\n }\n\n // parse into variables\n const theme = { ...config.themes[themeName] }\n for (const key in theme) {\n // make sure properly names theme variables\n ensureThemeVariable(theme, key)\n }\n themes[themeName] = theme\n\n // set deduped\n dedupedThemes[themeName] = {\n names: [themeName],\n theme,\n }\n existing.set(config.themes[themeName], dedupedThemes[themeName])\n }\n\n // then, generate from de-duped\n if (isWeb) {\n for (const themeName in dedupedThemes) {\n const { theme, names } = dedupedThemes[themeName]\n let vars = ''\n\n themeToVariableToValueMap.set(theme, {})\n const varToValMap = themeToVariableToValueMap.get(theme)\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n if (varToValMap) {\n varToValMap[variable.variable] = variable.val\n }\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const max = config.maxDarkLightNesting ?? 3\n\n new Array(Math.round(max * 1.5)).fill(undefined).forEach((_, pi) => {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) return\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n selectors.push(`${parentSelectors.join(' ')} ${childSelector}`)\n })\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRules.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRules.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\n body { background:${theme.background}; color: ${theme.color} }\n :root {${vars} } \n }`\n )\n }\n }\n }\n\n // proxy upwards to get parent variables (themes are subset going down)\n for (const themeName in themes) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n if (!parents.length) continue\n\n const og = themes[themeName]\n themes[themeName] = new Proxy(og, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return og\n }\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n }\n\n tokensValueToVariable.clear()\n Object.freeze(cssRules)\n const css = cssRules.join('\\n')\n\n return {\n themes,\n cssRules,\n css,\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n\n const getCSS = () => {\n return `${themeConfig.css}\\n${getInsertedRules().join('\\n')}`\n }\n\n if (config.shorthands) {\n for (const key in config.shorthands) {\n reversedShorthands[config.shorthands[key]] = key\n }\n }\n\n const next: TamaguiInternalConfig = {\n defaultTheme: 'light',\n fonts: {},\n animations: {} as any,\n shorthands: {},\n media: {},\n ...config,\n themes: themeConfig.themes,\n fontsParsed,\n themeConfig,\n tokensParsed,\n parsed: true,\n getCSS,\n Provider: null as any,\n }\n\n next.Provider = createTamaguiProvider(next)\n\n setConfig(next)\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n createdConfigs.set(next, true)\n\n if (process.env.NODE_ENV === 'development') {\n if (!globalThis['Tamagui']) {\n globalThis['Tamagui'] = Tamagui\n }\n }\n\n // @ts-expect-error\n return next\n}\n\nexport const reversedShorthands: Record<string, string> = {}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\n\n// for quick testing types:\n// const x = createTamagui({\n// shorthands: {},\n// media: {},\n// themes: {},\n// tokens: {\n// font: {},\n// color: {},\n// radius: {},\n// size: {},\n// space: {},\n// zIndex: {},\n// },\n// })\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AACA;AAqDA,MAAM,iBAAiB,oBAAI,QAAsB;AAQ1C,uBACL,QAC0B;AAC1B,MAAI,eAAe,IAAI,MAAM,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,OAAO,QAAQ;AAClB,YAAM,IAAI,MAAM,sCAAsC;AAAA,IACxD;AACA,QAAI,CAAC,OAAO,QAAQ;AAClB,YAAM,IAAI,MAAM,sCAAsC;AAAA,IACxD;AACA,QAAI,CAAC,OAAO,OAAO;AACjB,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAAA,EACF;AAGA,MAAI,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import { configListeners, getHasConfigured, setConfig } from './conf'\nimport { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { isWeb } from './constants/platform'\nimport { SpacerProps } from './createComponent'\nimport { themeToVariableToValueMap } from './createTheme'\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getInsertedRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokenRules,\n tokensValueToVariable,\n} from './helpers/registerCSSVariable'\nimport { GetThemeUnwrapped } from './hooks/getThemeUnwrapped'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport {\n AnimationDriver,\n CreateTamaguiConfig,\n GenericTamaguiConfig,\n MediaQueryKey,\n StackProps,\n TamaguiInternalConfig,\n TextProps,\n ThemeObject,\n} from './types'\n\nexport type CreateTamaguiProps =\n // user then re-defines the types after createTamagui returns the typed object they want\n Partial<Omit<GenericTamaguiConfig, 'themes' | 'tokens' | 'animations'>> & {\n animations?: AnimationDriver<any>\n tokens: GenericTamaguiConfig['tokens']\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n\n defaultProps?: Record<string, any> & {\n Stack?: StackProps\n Text?: TextProps\n Spacer?: SpacerProps\n }\n\n // for the first render, determines which media queries are true\n // useful for SSR\n mediaQueryDefaultActive?: MediaQueryKey[]\n\n // what's between each CSS style rule, set to \"\\n\" to be easier to read\n // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n cssStyleSeparator?: string\n\n // (Advanced)\n // on the web, tamagui treats `dark` and `light` themes as special and\n // generates extra CSS to avoid having to re-render the entire page.\n // this CSS relies on specificity hacks that multiply by your sub-themes.\n // this sets the maxiumum number of nested dark/light themes you can do\n // defaults to 3 for a balance, but can be higher if you nest them deeply.\n maxDarkLightNesting?: number\n\n // adds @media(prefers-color-scheme) media queries for dark/light\n shouldAddPrefersColorThemes?: boolean\n\n // only if you put the theme classname on the html element we have to generate diff\n themeClassNameOnRoot?: boolean\n }\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport type InferTamaguiConfig<Conf extends CreateTamaguiProps> = Conf extends Partial<\n CreateTamaguiConfig<infer A, infer B, infer C, infer D, infer E, infer F>\n>\n ? TamaguiInternalConfig<A, B, C, D, E, F>\n : unknown\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): InferTamaguiConfig<Conf> {\n if (createdConfigs.has(config)) {\n return config as any\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (!config.tokens) {\n throw new Error(`No tokens provided to Tamagui config`)\n }\n if (!config.themes) {\n throw new Error(`No themes provided to Tamagui config`)\n }\n if (!config.fonts) {\n throw new Error(`No fonts provided to Tamagui config`)\n }\n }\n\n // test env loads a few times as it runs diff tests\n if (getHasConfigured() && process.env.IS_STATIC !== 'is_static') {\n console.trace(`Warning: createTamagui called twice (maybe HMR)`)\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n const fontTokens = createVariables(config.fonts!)\n const fontsParsed = (() => {\n const res = {} as typeof fontTokens\n for (const familyName in fontTokens) {\n res[`$${familyName}`] = parseFont(fontTokens[familyName])\n }\n return res!\n })()\n\n const themeConfig = (() => {\n const themes = { ...config.themes }\n const cssRules: string[] = []\n\n if (isWeb) {\n for (const key in config.tokens) {\n for (const skey in config.tokens[key]) {\n const val = config.tokens[key][skey]\n registerCSSVariable(val)\n }\n }\n\n for (const key in fontsParsed) {\n const fontParsed = fontsParsed[key]\n registerFontVariables(fontParsed)\n }\n\n const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n cssRules.push(`:root {${sep}${[...tokenRules].join(`;${sep}`)}${sep}}`)\n }\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n\n // dedupe themes to avoid duplicate CSS generation\n type DedupedTheme = {\n names: string[]\n theme: ThemeObject\n }\n const dedupedThemes: {\n [key: string]: DedupedTheme\n } = {}\n const existing = new WeakMap<ThemeObject, DedupedTheme>()\n\n // first, de-dupe and parse them\n for (const themeName in themes) {\n const rawTheme = themes[themeName]\n\n // if existing, avoid\n if (existing.has(rawTheme)) {\n const e = existing.get(rawTheme)!\n themes[themeName] = e.theme\n e.names.push(themeName)\n continue\n }\n\n // parse into variables\n const theme = { ...config.themes[themeName] }\n for (const key in theme) {\n // make sure properly names theme variables\n ensureThemeVariable(theme, key)\n }\n themes[themeName] = theme\n\n // set deduped\n dedupedThemes[themeName] = {\n names: [themeName],\n theme,\n }\n existing.set(config.themes[themeName], dedupedThemes[themeName])\n }\n\n // then, generate from de-duped\n if (isWeb) {\n for (const themeName in dedupedThemes) {\n const { theme, names } = dedupedThemes[themeName]\n let vars = ''\n\n themeToVariableToValueMap.set(theme, {})\n const varToValMap = themeToVariableToValueMap.get(theme)\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n if (varToValMap) {\n varToValMap[variable.variable] = variable.val\n }\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const max = config.maxDarkLightNesting ?? 3\n\n new Array(Math.round(max * 1.5)).fill(undefined).forEach((_, pi) => {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) return\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n selectors.push(`${parentSelectors.join(' ')} ${childSelector}`)\n })\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRules.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRules.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\n body { background:${theme.background}; color: ${theme.color} }\n :root {${vars} } \n }`\n )\n }\n }\n }\n\n // proxy upwards to get parent variables (themes are subset going down)\n for (const themeName in themes) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n if (!parents.length) continue\n\n const og = themes[themeName]\n themes[themeName] = new Proxy(og, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return og\n }\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n }\n\n tokensValueToVariable.clear()\n Object.freeze(cssRules)\n const css = cssRules.join('\\n')\n\n return {\n themes,\n cssRules,\n css,\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n\n const getCSS = () => {\n return `${themeConfig.css}\\n${getInsertedRules().join('\\n')}`\n }\n\n if (config.shorthands) {\n for (const key in config.shorthands) {\n reversedShorthands[config.shorthands[key]] = key\n }\n }\n\n const next: TamaguiInternalConfig = {\n defaultTheme: 'light',\n fonts: {},\n animations: {} as any,\n shorthands: {},\n media: {},\n ...config,\n themes: themeConfig.themes,\n fontsParsed,\n themeConfig,\n tokensParsed,\n parsed: true,\n getCSS,\n Provider: null as any,\n }\n\n next.Provider = createTamaguiProvider(next)\n\n setConfig(next)\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n createdConfigs.set(next, true)\n\n if (process.env.NODE_ENV === 'development') {\n if (!globalThis['Tamagui']) {\n globalThis['Tamagui'] = Tamagui\n }\n }\n\n // @ts-expect-error\n return next\n}\n\nexport const reversedShorthands: Record<string, string> = {}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\n\n// for quick testing types:\n// const x = createTamagui({\n// shorthands: {},\n// media: {},\n// themes: {},\n// tokens: {\n// font: {},\n// color: {},\n// radius: {},\n// size: {},\n// space: {},\n// zIndex: {},\n// },\n// })\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,6 +39,8 @@ const configureMedia = ({
|
|
|
39
39
|
defaultActive = ["sm", "xs"]
|
|
40
40
|
} = {}) => {
|
|
41
41
|
if (hasConfigured) {
|
|
42
|
+
if (process.env.IS_STATIC === "is_static")
|
|
43
|
+
return;
|
|
42
44
|
console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
|
|
43
45
|
}
|
|
44
46
|
if (queries) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useMedia.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: MediaQueryState = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nlet hasConfigured = false\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (hasConfigured) {\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n Object.assign(mediaQueryConfig, queries)\n hasConfigured = true\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[key])\n const propKey = `$${key}`\n try {\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match || typeof match.addListener !== 'function') {\n // caught below\n throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n }\n mediaState[propKey] = !!match.matches\n match.addListener(update)\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[propKey]) return\n mediaState[propKey] = next\n const listeners = mediaQueryListeners[propKey]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n }\n\n update()\n } catch (err: any) {\n console.error('Error running media query', str, err.message, err.stack)\n const isDefaultActive = defaultActive?.includes(key as any) ?? true\n mediaState[propKey] = isDefaultActive\n }\n }\n}\n\ntype UseMediaState = {\n selections: { [key: string]: boolean }\n nextSelections: { [key: string]: boolean }\n isRendering: boolean\n isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n const forceUpdate = useForceUpdate()\n const state = useRef() as React.MutableRefObject<UseMediaState>\n if (!state.current) {\n state.current = {\n selections: {},\n nextSelections: {},\n isUnmounted: false,\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n // delete old\n for (const key in st.selections) {\n if (!(key in st.nextSelections)) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n // add new\n for (const key in st.nextSelections) {\n if (!(key in st.selections)) {\n addMediaQueryListener(key, forceUpdate)\n }\n }\n })\n\n // unmount\n useIsomorphicLayoutEffect(() => {\n return () => {\n const st = state.current\n st.isUnmounted = true\n const allKeys = {\n ...st.selections,\n ...st.nextSelections,\n }\n for (const key in allKeys) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n }, [])\n\n return useConstant(() => {\n const st = state.current\n return new Proxy(\n mediaState as {\n [key in MediaQueryKey]: boolean\n },\n {\n get(target, key: string) {\n if (key[0] !== '$') {\n key = `$${key}`\n }\n if (!(key in mediaState)) {\n return Reflect.get(target, key)\n }\n if (!st.isUnmounted) {\n if (st.isRendering) {\n st.nextSelections[key] = true\n }\n }\n if (key in mediaState) {\n return mediaState[key]\n }\n return Reflect.get(mediaState, key)\n },\n }\n )\n })\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 { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: MediaQueryState = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nlet hasConfigured = false\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (hasConfigured) {\n if (process.env.IS_STATIC === 'is_static') return\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n Object.assign(mediaQueryConfig, queries)\n hasConfigured = true\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[key])\n const propKey = `$${key}`\n try {\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match || typeof match.addListener !== 'function') {\n // caught below\n throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n }\n mediaState[propKey] = !!match.matches\n match.addListener(update)\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[propKey]) return\n mediaState[propKey] = next\n const listeners = mediaQueryListeners[propKey]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n }\n\n update()\n } catch (err: any) {\n console.error('Error running media query', str, err.message, err.stack)\n const isDefaultActive = defaultActive?.includes(key as any) ?? true\n mediaState[propKey] = isDefaultActive\n }\n }\n}\n\ntype UseMediaState = {\n selections: { [key: string]: boolean }\n nextSelections: { [key: string]: boolean }\n isRendering: boolean\n isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n const forceUpdate = useForceUpdate()\n const state = useRef() as React.MutableRefObject<UseMediaState>\n if (!state.current) {\n state.current = {\n selections: {},\n nextSelections: {},\n isUnmounted: false,\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n // delete old\n for (const key in st.selections) {\n if (!(key in st.nextSelections)) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n // add new\n for (const key in st.nextSelections) {\n if (!(key in st.selections)) {\n addMediaQueryListener(key, forceUpdate)\n }\n }\n })\n\n // unmount\n useIsomorphicLayoutEffect(() => {\n return () => {\n const st = state.current\n st.isUnmounted = true\n const allKeys = {\n ...st.selections,\n ...st.nextSelections,\n }\n for (const key in allKeys) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n }, [])\n\n return useConstant(() => {\n const st = state.current\n return new Proxy(\n mediaState as {\n [key in MediaQueryKey]: boolean\n },\n {\n get(target, key: string) {\n if (key[0] !== '$') {\n key = `$${key}`\n }\n if (!(key in mediaState)) {\n return Reflect.get(target, key)\n }\n if (!st.isUnmounted) {\n if (st.isRendering) {\n st.nextSelections[key] = true\n }\n }\n if (key in mediaState) {\n return mediaState[key]\n }\n return Reflect.get(mediaState, key)\n },\n }\n )\n })\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": []
|
|
7
7
|
}
|
package/dist/esm/insertFont.js
CHANGED
|
@@ -17,6 +17,7 @@ function insertFont(name, fontIn) {
|
|
|
17
17
|
return parsed;
|
|
18
18
|
}
|
|
19
19
|
function parseFont(definition) {
|
|
20
|
+
var _a;
|
|
20
21
|
const parsed = {};
|
|
21
22
|
for (const attrKey in definition) {
|
|
22
23
|
const attr = definition[attrKey];
|
|
@@ -27,7 +28,7 @@ function parseFont(definition) {
|
|
|
27
28
|
parsed[attrKey] = {};
|
|
28
29
|
for (const key in attr) {
|
|
29
30
|
let val = attr[key];
|
|
30
|
-
if (val.val[0] === "$") {
|
|
31
|
+
if (((_a = val.val) == null ? void 0 : _a[0]) === "$") {
|
|
31
32
|
val = val.val;
|
|
32
33
|
}
|
|
33
34
|
parsed[attrKey][`$${key}`] = val;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/insertFont.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { setConfigFont } from './conf'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\nexport function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {\n const font = createFont(fontIn)\n const tokened = createVariables(font, name) as GenericFont\n const parsed = parseFont(tokened) as DeepVariableObject<A>\n if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {\n const css = registerFontVariables(parsed, true)\n const style = document.createElement('style')\n style.innerText = `:root {${css}}`\n style.setAttribute('data-tamagui-font', name)\n document.head.appendChild(style)\n }\n setConfigFont(name, tokened, parsed)\n return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n const parsed: any = {}\n for (const attrKey in definition) {\n const attr = definition[attrKey]\n if (attrKey === 'family') {\n parsed[attrKey] = attr\n continue\n }\n parsed[attrKey] = {}\n for (const key in attr) {\n let val = attr[key] as any as Variable\n // is a theme reference\n if (val.val?.[0] === '$') {\n val = val.val\n }\n parsed[attrKey][`$${key}`] = val\n }\n }\n return parsed\n}\n\nexport function registerFontVariables(parsedFont: any, collect = false) {\n let vals = ''\n for (const fkey in parsedFont) {\n if (fkey === 'family') {\n const val = registerCSSVariable(parsedFont[fkey])\n if (collect) vals += val + ';'\n } else {\n for (const fskey in parsedFont[fkey]) {\n const fval = parsedFont[fkey][fskey]\n if (typeof fval === 'string') {\n // no need to add its a theme reference like \"$borderColor\"\n } else {\n const val = registerCSSVariable(parsedFont[fkey][fskey])\n if (collect) vals += val + ';'\n }\n }\n }\n }\n return vals\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AACA;AAEA;AACA;AAGO,oBAA2C,MAAc,QAAkC;AAChG,QAAM,OAAO,WAAW,MAAM;AAC9B,QAAM,UAAU,gBAAgB,MAAM,IAAI;AAC1C,QAAM,SAAS,UAAU,OAAO;AAChC,MAAI,QAAQ,IAAI,mBAAmB,SAAS,OAAO,aAAa,aAAa;AAC3E,UAAM,MAAM,sBAAsB,QAAQ,IAAI;AAC9C,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,UAAU;AAC5B,UAAM,aAAa,qBAAqB,IAAI;AAC5C,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AACA,gBAAc,MAAM,SAAS,MAAM;AACnC,SAAO;AACT;AAEO,mBAA0C,YAAsC;AAtBvF;AAuBE,QAAM,SAAc,CAAC;AACrB,aAAW,WAAW,YAAY;AAChC,UAAM,OAAO,WAAW;AACxB,QAAI,YAAY,UAAU;AACxB,aAAO,WAAW;AAClB;AAAA,IACF;AACA,WAAO,WAAW,CAAC;AACnB,eAAW,OAAO,MAAM;AACtB,UAAI,MAAM,KAAK;AAEf,UAAI,WAAI,QAAJ,mBAAU,QAAO,KAAK;AACxB,cAAM,IAAI;AAAA,MACZ;AACA,aAAO,SAAS,IAAI,SAAS;AAAA,IAC/B;AAAA,EACF;AACA,SAAO;AACT;AAEO,+BAA+B,YAAiB,UAAU,OAAO;AACtE,MAAI,OAAO;AACX,aAAW,QAAQ,YAAY;AAC7B,QAAI,SAAS,UAAU;AACrB,YAAM,MAAM,oBAAoB,WAAW,KAAK;AAChD,UAAI;AAAS,gBAAQ,MAAM;AAAA,IAC7B,OAAO;AACL,iBAAW,SAAS,WAAW,OAAO;AACpC,cAAM,OAAO,WAAW,MAAM;AAC9B,YAAI,OAAO,SAAS,UAAU;AAAA,QAE9B,OAAO;AACL,gBAAM,MAAM,oBAAoB,WAAW,MAAM,MAAM;AACvD,cAAI;AAAS,oBAAQ,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
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.105",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@expo/match-media": "^0.3.0",
|
|
24
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
25
|
-
"@tamagui/helpers": "^1.0.1-beta.
|
|
24
|
+
"@tamagui/compose-refs": "^1.0.1-beta.105",
|
|
25
|
+
"@tamagui/helpers": "^1.0.1-beta.105",
|
|
26
26
|
"@tamagui/ow": "^0.28.1",
|
|
27
|
-
"@tamagui/rnw": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/use-debounce": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/use-event": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/use-force-update": "^1.0.1-beta.
|
|
27
|
+
"@tamagui/rnw": "^1.0.1-beta.105",
|
|
28
|
+
"@tamagui/use-debounce": "^1.0.1-beta.105",
|
|
29
|
+
"@tamagui/use-event": "^1.0.1-beta.105",
|
|
30
|
+
"@tamagui/use-force-update": "^1.0.1-beta.105",
|
|
31
31
|
"expo-screen-orientation": "^4.2.0",
|
|
32
32
|
"hyphenate-style-name": "^1.0.4",
|
|
33
33
|
"normalize-css-color": "^1.0.2",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"react-native-web": "*"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
41
|
+
"@tamagui/build": "^1.0.1-beta.105",
|
|
42
42
|
"@types/react": "^18.0.14",
|
|
43
43
|
"csstype": "^3.0.10",
|
|
44
44
|
"esbuild": "^0.14.48",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,0BAA0B,EAC1B,YAAY,EAEZ,gBAAgB,EAChB,eAAe,EAChB,MAAM,UAAU,CAAA;AAGjB,eAAO,MAAM,UAAU,EAAE,eAA2B,CAAA;AAGpD,eAAO,MAAM,qBAAqB,QAAS,MAAM,MAAM,GAAG,SAGzD,CAAA;AAED,eAAO,MAAM,wBAAwB,QAAS,MAAM,MAAM,GAAG,SAE5D,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAA;AAEhD,eAAO,MAAM,QAAQ,uBAEpB,CAAA;AAED,eAAO,MAAM,cAAc,iCAGxB,0BAA0B,
|
|
1
|
+
{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,0BAA0B,EAC1B,YAAY,EAEZ,gBAAgB,EAChB,eAAe,EAChB,MAAM,UAAU,CAAA;AAGjB,eAAO,MAAM,UAAU,EAAE,eAA2B,CAAA;AAGpD,eAAO,MAAM,qBAAqB,QAAS,MAAM,MAAM,GAAG,SAGzD,CAAA;AAED,eAAO,MAAM,wBAAwB,QAAS,MAAM,MAAM,GAAG,SAE5D,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAA;AAEhD,eAAO,MAAM,QAAQ,uBAEpB,CAAA;AAED,eAAO,MAAM,cAAc,iCAGxB,0BAA0B,SA8C5B,CAAA;AASD,eAAO,MAAM,QAAQ;;CAyEpB,CAAA;AAMD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,UAgBnE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"insertFont.d.ts","sourceRoot":"","sources":["../src/insertFont.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"insertFont.d.ts","sourceRoot":"","sources":["../src/insertFont.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAmB,MAAM,mBAAmB,CAAA;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAahG;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,EAAE,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAmBrF;AAED,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,UAAQ,UAmBrE"}
|