@tamagui/core 1.0.0-alpha.18 → 1.0.0-alpha.21
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/createTheme.js +2 -0
- package/dist/cjs/createTheme.js.map +2 -2
- package/dist/cjs/hooks/useMedia.js +2 -1
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +2 -1
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/esm/createTheme.js +2 -0
- package/dist/esm/createTheme.js.map +2 -2
- package/dist/esm/hooks/useMedia.js +1 -1
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +2 -1
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/jsx/createTheme.js +2 -0
- package/dist/jsx/hooks/useMedia.js +1 -1
- package/dist/jsx/hooks/useTheme.js +2 -1
- package/package.json +2 -2
- package/src/createTheme.ts +2 -0
- package/src/hooks/useMedia.tsx +1 -1
- package/src/hooks/useTheme.tsx +2 -1
- package/types/createTheme.d.ts.map +1 -1
- package/types/hooks/useTheme.d.ts.map +1 -1
package/dist/cjs/createTheme.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTheme.ts"],
|
|
4
|
-
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n theme: Theme\n): {\n // allow string | Variable\n [key in keyof Theme]: Variable | string\n} => {\n const res = {} as any\n for (const key in theme) {\n const val = theme[key]\n if (!(val instanceof Variable)) {\n res[key] = createVariable({\n name: key,\n val,\n })\n }\n }\n return res\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,4BAAyC;AAElC,MAAM,cAAc,wBACzB,UAIG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,iCAAW;AAC9B,UAAI,OAAO,0CAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n theme: Theme\n): {\n // allow string | Variable\n [key in keyof Theme]: Variable | string\n} => {\n const res = {} as any\n for (const key in theme) {\n const val = theme[key]\n if (!(val instanceof Variable)) {\n res[key] = createVariable({\n name: key,\n val,\n })\n } else {\n res[key] = val\n }\n }\n return res\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,4BAAyC;AAElC,MAAM,cAAc,wBACzB,UAIG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,iCAAW;AAC9B,UAAI,OAAO,0CAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA,WAEG;AACL,UAAI,OAAO;AAAA;AAAA;AAGf,SAAO;AAAA,GAlBkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -58,7 +58,8 @@ const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
|
58
58
|
mediaQueryListeners[key].add(cb);
|
|
59
59
|
}, "addMediaQueryListener");
|
|
60
60
|
const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
61
|
-
|
|
61
|
+
var _a;
|
|
62
|
+
(_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
|
|
62
63
|
}, "removeMediaQueryListener");
|
|
63
64
|
let conf = null;
|
|
64
65
|
const mediaQueryConfig = new Proxy({}, {
|
|
@@ -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 MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} 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]
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAAuB;AAEvB,sBAA0C;AAC1C,wBAA2B;AAO3B,yBAA4B;AAErB,MAAM,aAA0D;AACvE,MAAM,sBAAwD;AAEvD,MAAM,wBAAwB,wBAAC,KAAa,OAAY;AAC7D,sBAAoB,OAAO,oBAAoB,QAAQ,IAAI;AAC3D,sBAAoB,KAAK,IAAI;AAAA,GAFM;AAK9B,MAAM,2BAA2B,wBAAC,KAAa,OAAY;
|
|
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 MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} 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 conf: MediaQueries | null = null\n\nexport const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {\n get(target, key) {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return null\n }\n return Reflect.get(conf, key)\n },\n ownKeys() {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return []\n }\n return Object.keys(conf)\n },\n getOwnPropertyDescriptor() {\n return {\n enumerable: true,\n configurable: true,\n }\n },\n})\n\nexport const getMedia = () => {\n if (!conf) {\n throw new Error(`not configured yet`)\n }\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (conf) {\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n conf = queries\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[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[key] = !!match.matches\n match.addListener(() => {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n })\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[key] = 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(mediaState, {\n get(target, key: string) {\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\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
|
}
|
|
@@ -97,7 +97,8 @@ const useTheme = /* @__PURE__ */ __name(() => {
|
|
|
97
97
|
const val = activeTheme[key];
|
|
98
98
|
if (process.env.NODE_ENV === "development") {
|
|
99
99
|
if (typeof val === "undefined") {
|
|
100
|
-
|
|
100
|
+
console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
|
|
101
|
+
return null;
|
|
101
102
|
}
|
|
102
103
|
}
|
|
103
104
|
if (state.current.isRendering) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { Variable } from '../createVariable'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\nimport { GET_DEFAULT_THEME } from '../views/ThemeProvider'\n\ntype UseThemeState = {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n if (a.size !== b.size) return false\n for (const val in a) {\n if (!b.has(val)) {\n return false\n }\n }\n return true\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent.name)\n\n useIsomorphicLayoutEffect(() => {\n return parent.onChangeTheme((next, manager) => {\n setName(opts?.parent ? manager.parentName : next)\n })\n }, [parent])\n\n return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = () => {\n const forceUpdate = useForceUpdate()\n const manager = useContext(ThemeManagerContext)\n const themes = useContext(ThemeContext)\n const state = useRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\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 const cur = manager.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n manager.track(st.uuid, st.keys)\n }\n })\n\n useEffect(() => {\n return manager.onUpdate(state.current.uuid, forceUpdate)\n }, [])\n\n const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light\n\n return useMemo(\n () => {\n return new Proxy(theme, {\n get(_, key: string) {\n const name = manager.name\n if (!name) {\n return Reflect.get(_, key)\n }\n let activeTheme = themes[name]\n if (!activeTheme) {\n console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n activeTheme = theme\n }\n const val = activeTheme[key]\n if (process.env.NODE_ENV === 'development') {\n if (typeof val === 'undefined') {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAAwE;AAExE,sBAA0C;AAC1C,4BAAyB;AAEzB,0BAA6B;AAC7B,iCAAoC;AACpC,2BAAkC;AAQlC,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,6BAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,2BAAS,OAAO;AAExC,iDAA0B,MAAM;AAC9B,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,cAAQ,8BAAM,UAAS,QAAQ,aAAa;AAAA;AAAA,KAE7C,CAAC;AAEJ,SAAO,QAAQ;AAAA,GAVW;AAarB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,6BAAW,kCAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAM;AAC5B,QAAM,cAAc;AACpB,QAAM,UAAU,6BAAW;AAC3B,QAAM,SAAS,6BAAW;AAC1B,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,IAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,iDAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,8BAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,SAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,OAAO;AAE7E,SAAO,0BACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,kBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AACzD,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { Variable } from '../createVariable'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\nimport { GET_DEFAULT_THEME } from '../views/ThemeProvider'\n\ntype UseThemeState = {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n if (a.size !== b.size) return false\n for (const val in a) {\n if (!b.has(val)) {\n return false\n }\n }\n return true\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent.name)\n\n useIsomorphicLayoutEffect(() => {\n return parent.onChangeTheme((next, manager) => {\n setName(opts?.parent ? manager.parentName : next)\n })\n }, [parent])\n\n return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = () => {\n const forceUpdate = useForceUpdate()\n const manager = useContext(ThemeManagerContext)\n const themes = useContext(ThemeContext)\n const state = useRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\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 const cur = manager.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n manager.track(st.uuid, st.keys)\n }\n })\n\n useEffect(() => {\n return manager.onUpdate(state.current.uuid, forceUpdate)\n }, [])\n\n const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light\n\n return useMemo(\n () => {\n return new Proxy(theme, {\n get(_, key: string) {\n const name = manager.name\n if (!name) {\n return Reflect.get(_, key)\n }\n let activeTheme = themes[name]\n if (!activeTheme) {\n console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n activeTheme = theme\n }\n const val = activeTheme[key]\n if (process.env.NODE_ENV === 'development') {\n if (typeof val === 'undefined') {\n console.warn(`No theme value \"${String(key)}\" in: ${Object.keys(activeTheme)}`)\n return null\n }\n }\n if (state.current.isRendering) {\n state.current.keys.add(key)\n }\n // TODO costly, can make faster (we need name mapping to og name, but val pointing to new val)\n // console.log('returning new variable', val, key)\n return new Variable({ val: val.val, name: key })\n },\n })\n },\n [\n /* if concurrent mode wanted put manager.name here */\n ]\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAAwE;AAExE,sBAA0C;AAC1C,4BAAyB;AAEzB,0BAA6B;AAC7B,iCAAoC;AACpC,2BAAkC;AAQlC,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,6BAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,2BAAS,OAAO;AAExC,iDAA0B,MAAM;AAC9B,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,cAAQ,8BAAM,UAAS,QAAQ,aAAa;AAAA;AAAA,KAE7C,CAAC;AAEJ,SAAO,QAAQ;AAAA,GAVW;AAarB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,6BAAW,kCAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAM;AAC5B,QAAM,cAAc;AACpB,QAAM,UAAU,6BAAW;AAC3B,QAAM,SAAS,6BAAW;AAC1B,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,IAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,iDAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,8BAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,SAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,OAAO;AAE7E,SAAO,0BACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,kBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AACzD,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,oBAAQ,KAAK,mBAAmB,OAAO,aAAa,OAAO,KAAK;AAChE,mBAAO;AAAA;AAAA;AAGX,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,QAAQ,KAAK,IAAI;AAAA;AAIzB,eAAO,IAAI,+BAAS,EAAE,KAAK,IAAI,KAAK,MAAM;AAAA;AAAA;AAAA,KAIhD;AAAA,GA3DoB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/createTheme.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTheme.ts"],
|
|
4
|
-
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n theme: Theme\n): {\n // allow string | Variable\n [key in keyof Theme]: Variable | string\n} => {\n const res = {} as any\n for (const key in theme) {\n const val = theme[key]\n if (!(val instanceof Variable)) {\n res[key] = createVariable({\n name: key,\n val,\n })\n }\n }\n return res\n}\n"],
|
|
5
|
-
"mappings": ";;AAAA;AAEO,MAAM,cAAc,wBACzB,UAIG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,WAAW;AAC9B,UAAI,OAAO,eAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n theme: Theme\n): {\n // allow string | Variable\n [key in keyof Theme]: Variable | string\n} => {\n const res = {} as any\n for (const key in theme) {\n const val = theme[key]\n if (!(val instanceof Variable)) {\n res[key] = createVariable({\n name: key,\n val,\n })\n } else {\n res[key] = val\n }\n }\n return res\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAEO,MAAM,cAAc,wBACzB,UAIG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,WAAW;AAC9B,UAAI,OAAO,eAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA,WAEG;AACL,UAAI,OAAO;AAAA;AAAA;AAGf,SAAO;AAAA,GAlBkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,7 +12,7 @@ const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
|
12
12
|
mediaQueryListeners[key].add(cb);
|
|
13
13
|
}, "addMediaQueryListener");
|
|
14
14
|
const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
15
|
-
mediaQueryListeners[key]
|
|
15
|
+
mediaQueryListeners[key]?.delete(cb);
|
|
16
16
|
}, "removeMediaQueryListener");
|
|
17
17
|
let conf = null;
|
|
18
18
|
const mediaQueryConfig = new Proxy({}, {
|
|
@@ -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 MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} 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]
|
|
5
|
-
"mappings": ";;AAAA;AACA;AAEA;AACA;AAOA;AAEO,MAAM,aAA0D;AACvE,MAAM,sBAAwD;AAEvD,MAAM,wBAAwB,wBAAC,KAAa,OAAY;AAC7D,sBAAoB,OAAO,oBAAoB,QAAQ,IAAI;AAC3D,sBAAoB,KAAK,IAAI;AAAA,GAFM;AAK9B,MAAM,2BAA2B,wBAAC,KAAa,OAAY;AAChE,sBAAoB,
|
|
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 MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} 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 conf: MediaQueries | null = null\n\nexport const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {\n get(target, key) {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return null\n }\n return Reflect.get(conf, key)\n },\n ownKeys() {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return []\n }\n return Object.keys(conf)\n },\n getOwnPropertyDescriptor() {\n return {\n enumerable: true,\n configurable: true,\n }\n },\n})\n\nexport const getMedia = () => {\n if (!conf) {\n throw new Error(`not configured yet`)\n }\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (conf) {\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n conf = queries\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[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[key] = !!match.matches\n match.addListener(() => {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n })\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[key] = 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(mediaState, {\n get(target, key: string) {\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\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
|
}
|
|
@@ -70,7 +70,8 @@ const useTheme = /* @__PURE__ */ __name(() => {
|
|
|
70
70
|
const val = activeTheme[key];
|
|
71
71
|
if (process.env.NODE_ENV === "development") {
|
|
72
72
|
if (typeof val === "undefined") {
|
|
73
|
-
|
|
73
|
+
console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
|
|
74
|
+
return null;
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
if (state.current.isRendering) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { Variable } from '../createVariable'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\nimport { GET_DEFAULT_THEME } from '../views/ThemeProvider'\n\ntype UseThemeState = {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n if (a.size !== b.size) return false\n for (const val in a) {\n if (!b.has(val)) {\n return false\n }\n }\n return true\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent.name)\n\n useIsomorphicLayoutEffect(() => {\n return parent.onChangeTheme((next, manager) => {\n setName(opts?.parent ? manager.parentName : next)\n })\n }, [parent])\n\n return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = () => {\n const forceUpdate = useForceUpdate()\n const manager = useContext(ThemeManagerContext)\n const themes = useContext(ThemeContext)\n const state = useRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\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 const cur = manager.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n manager.track(st.uuid, st.keys)\n }\n })\n\n useEffect(() => {\n return manager.onUpdate(state.current.uuid, forceUpdate)\n }, [])\n\n const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light\n\n return useMemo(\n () => {\n return new Proxy(theme, {\n get(_, key: string) {\n const name = manager.name\n if (!name) {\n return Reflect.get(_, key)\n }\n let activeTheme = themes[name]\n if (!activeTheme) {\n console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n activeTheme = theme\n }\n const val = activeTheme[key]\n if (process.env.NODE_ENV === 'development') {\n if (typeof val === 'undefined') {\n
|
|
5
|
-
"mappings": ";;AAAA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAQA,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,SAAS,OAAO;AAExC,4BAA0B,MAAM;AAC9B,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,cAAQ,MAAM,SAAS,QAAQ,aAAa;AAAA;AAAA,KAE7C,CAAC;AAEJ,SAAO,QAAQ;AAAA,GAVW;AAarB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,WAAW,cAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAM;AAC5B,QAAM,cAAc;AACpB,QAAM,UAAU,WAAW;AAC3B,QAAM,SAAS,WAAW;AAC1B,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,IAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,4BAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,YAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,SAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,OAAO;AAE7E,SAAO,QACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,kBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AACzD,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { Variable } from '../createVariable'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\nimport { GET_DEFAULT_THEME } from '../views/ThemeProvider'\n\ntype UseThemeState = {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n if (a.size !== b.size) return false\n for (const val in a) {\n if (!b.has(val)) {\n return false\n }\n }\n return true\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent.name)\n\n useIsomorphicLayoutEffect(() => {\n return parent.onChangeTheme((next, manager) => {\n setName(opts?.parent ? manager.parentName : next)\n })\n }, [parent])\n\n return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = () => {\n const forceUpdate = useForceUpdate()\n const manager = useContext(ThemeManagerContext)\n const themes = useContext(ThemeContext)\n const state = useRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\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 const cur = manager.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n manager.track(st.uuid, st.keys)\n }\n })\n\n useEffect(() => {\n return manager.onUpdate(state.current.uuid, forceUpdate)\n }, [])\n\n const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light\n\n return useMemo(\n () => {\n return new Proxy(theme, {\n get(_, key: string) {\n const name = manager.name\n if (!name) {\n return Reflect.get(_, key)\n }\n let activeTheme = themes[name]\n if (!activeTheme) {\n console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n activeTheme = theme\n }\n const val = activeTheme[key]\n if (process.env.NODE_ENV === 'development') {\n if (typeof val === 'undefined') {\n console.warn(`No theme value \"${String(key)}\" in: ${Object.keys(activeTheme)}`)\n return null\n }\n }\n if (state.current.isRendering) {\n state.current.keys.add(key)\n }\n // TODO costly, can make faster (we need name mapping to og name, but val pointing to new val)\n // console.log('returning new variable', val, key)\n return new Variable({ val: val.val, name: key })\n },\n })\n },\n [\n /* if concurrent mode wanted put manager.name here */\n ]\n )\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAQA,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,SAAS,OAAO;AAExC,4BAA0B,MAAM;AAC9B,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,cAAQ,MAAM,SAAS,QAAQ,aAAa;AAAA;AAAA,KAE7C,CAAC;AAEJ,SAAO,QAAQ;AAAA,GAVW;AAarB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,WAAW,cAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAM;AAC5B,QAAM,cAAc;AACpB,QAAM,UAAU,WAAW;AAC3B,QAAM,SAAS,WAAW;AAC1B,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,IAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,4BAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,YAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,SAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,OAAO;AAE7E,SAAO,QACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,kBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AACzD,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,oBAAQ,KAAK,mBAAmB,OAAO,aAAa,OAAO,KAAK;AAChE,mBAAO;AAAA;AAAA;AAGX,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,QAAQ,KAAK,IAAI;AAAA;AAIzB,eAAO,IAAI,SAAS,EAAE,KAAK,IAAI,KAAK,MAAM;AAAA;AAAA;AAAA,KAIhD;AAAA,GA3DoB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/createTheme.js
CHANGED
|
@@ -12,7 +12,7 @@ const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
|
12
12
|
mediaQueryListeners[key].add(cb);
|
|
13
13
|
}, "addMediaQueryListener");
|
|
14
14
|
const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
|
|
15
|
-
mediaQueryListeners[key]
|
|
15
|
+
mediaQueryListeners[key]?.delete(cb);
|
|
16
16
|
}, "removeMediaQueryListener");
|
|
17
17
|
let conf = null;
|
|
18
18
|
const mediaQueryConfig = new Proxy({}, {
|
|
@@ -70,7 +70,8 @@ const useTheme = /* @__PURE__ */ __name(() => {
|
|
|
70
70
|
const val = activeTheme[key];
|
|
71
71
|
if (process.env.NODE_ENV === "development") {
|
|
72
72
|
if (typeof val === "undefined") {
|
|
73
|
-
|
|
73
|
+
console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
|
|
74
|
+
return null;
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
if (state.current.isRendering) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.21",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"engines": {
|
|
39
39
|
"node": ">=16"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "d3cd631f521c6c755d042ebebf95e532af2c628c"
|
|
42
42
|
}
|
package/src/createTheme.ts
CHANGED
package/src/hooks/useMedia.tsx
CHANGED
|
@@ -20,7 +20,7 @@ export const addMediaQueryListener = (key: string, cb: any) => {
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export const removeMediaQueryListener = (key: string, cb: any) => {
|
|
23
|
-
mediaQueryListeners[key]
|
|
23
|
+
mediaQueryListeners[key]?.delete(cb)
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
let conf: MediaQueries | null = null
|
package/src/hooks/useTheme.tsx
CHANGED
|
@@ -87,7 +87,8 @@ export const useTheme = () => {
|
|
|
87
87
|
const val = activeTheme[key]
|
|
88
88
|
if (process.env.NODE_ENV === 'development') {
|
|
89
89
|
if (typeof val === 'undefined') {
|
|
90
|
-
|
|
90
|
+
console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`)
|
|
91
|
+
return null
|
|
91
92
|
}
|
|
92
93
|
}
|
|
93
94
|
if (state.current.isRendering) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../src/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,kBAAkB,CAAA;AAE3D,eAAO,MAAM,WAAW;;
|
|
1
|
+
{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../src/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,kBAAkB,CAAA;AAE3D,eAAO,MAAM,WAAW;;gEAmBvB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAsB5C,eAAO,MAAM,YAAY;;wBAWxB,CAAA;AAED,eAAO,MAAM,mBAAmB,uBAE/B,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAsB5C,eAAO,MAAM,YAAY;;wBAWxB,CAAA;AAED,eAAO,MAAM,mBAAmB,uBAE/B,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CA+DpB,CAAA"}
|