@tamagui/core 1.0.1-beta.156 → 1.0.1-beta.159
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/helpers/ThemeManager.js +8 -4
- package/dist/cjs/helpers/ThemeManager.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +19 -16
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/esm/helpers/ThemeManager.js +8 -4
- package/dist/esm/helpers/ThemeManager.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +19 -16
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/package.json +11 -11
- package/src/helpers/ThemeManager.tsx +7 -3
- package/src/hooks/useTheme.tsx +26 -20
- package/types/helpers/ThemeManager.d.ts +3 -2
- package/types/hooks/useTheme.d.ts +1 -1
|
@@ -28,15 +28,15 @@ var import_config = require("../config");
|
|
|
28
28
|
var import_constants = require("../constants/constants");
|
|
29
29
|
var import_getThemeUnwrapped = require("../hooks/getThemeUnwrapped");
|
|
30
30
|
class ThemeManager {
|
|
31
|
-
constructor(name = "", theme = null, parentManager = null, reset = false) {
|
|
31
|
+
constructor(name = "", className = "", theme = null, parentManager = null, reset = false) {
|
|
32
32
|
this.name = name;
|
|
33
|
+
this.className = className;
|
|
33
34
|
this.theme = theme;
|
|
34
35
|
this.parentManager = parentManager;
|
|
35
36
|
this.reset = reset;
|
|
36
37
|
this.keys = /* @__PURE__ */ new Map();
|
|
37
38
|
this.listeners = /* @__PURE__ */ new Map();
|
|
38
39
|
this.themeListeners = /* @__PURE__ */ new Set();
|
|
39
|
-
this.className = null;
|
|
40
40
|
let parent = parentManager;
|
|
41
41
|
let tries = 0;
|
|
42
42
|
while (true) {
|
|
@@ -80,6 +80,10 @@ class ThemeManager {
|
|
|
80
80
|
theme = manager.theme;
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
+
isTracking(uuid) {
|
|
84
|
+
var _a;
|
|
85
|
+
return Boolean((_a = this.keys.get(uuid)) == null ? void 0 : _a.size);
|
|
86
|
+
}
|
|
83
87
|
update({ name, theme, className } = {}, force = false) {
|
|
84
88
|
if (!force) {
|
|
85
89
|
const nameChanged = name !== this.name;
|
|
@@ -87,7 +91,7 @@ class ThemeManager {
|
|
|
87
91
|
return false;
|
|
88
92
|
}
|
|
89
93
|
}
|
|
90
|
-
this.className = className ||
|
|
94
|
+
this.className = className || "";
|
|
91
95
|
this.name = name || "";
|
|
92
96
|
this.theme = theme;
|
|
93
97
|
this.notifyListeners();
|
|
@@ -120,7 +124,7 @@ class ThemeManager {
|
|
|
120
124
|
return {
|
|
121
125
|
name: this.name,
|
|
122
126
|
theme: this.theme,
|
|
123
|
-
className:
|
|
127
|
+
className: this.className
|
|
124
128
|
};
|
|
125
129
|
}
|
|
126
130
|
let nextName = name || this.name || "";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/ThemeManager.tsx"],
|
|
4
|
-
"sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from '../config'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { ThemeObject, Themes } from '../types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n className?: string\n parentManager?: ThemeManager | null\n name?: string | null\n theme?: any\n}\n\nexport type GetNextThemeProps = {\n themes?: Themes\n name?: string | null\n componentName?: string | null\n reset?: boolean\n}\n\nexport class ThemeManager {\n keys = new Map<any, Set<string>>()\n listeners = new Map<any, Function>()\n themeListeners = new Set<ThemeListener>()\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAE9B,oBAA0B;AAC1B,uBAA6D;AAC7D,+BAAkC;AAmB3B,MAAM,aAAa;AAAA,
|
|
4
|
+
"sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from '../config'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { ThemeObject, Themes } from '../types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n className?: string\n parentManager?: ThemeManager | null\n name?: string | null\n theme?: any\n}\n\nexport type GetNextThemeProps = {\n themes?: Themes\n name?: string | null\n componentName?: string | null\n reset?: boolean\n}\n\nexport class ThemeManager {\n keys = new Map<any, Set<string>>()\n listeners = new Map<any, Function>()\n themeListeners = new Set<ThemeListener>()\n\n constructor(\n public name: string = '',\n public className: string = '',\n public theme: ThemeObject | null = null,\n public parentManager: ThemeManager | null = null,\n public reset: boolean = false\n ) {\n // find the nearest different parentManager\n let parent = parentManager\n let tries = 0\n while (true) {\n tries++\n if (tries > 10) {\n throw new Error(`Nested 10 of the same theme in a row, likely error`)\n }\n if (!parent) break\n if (parent.name === name) {\n // go up if same\n parent = parent.parentManager\n } else {\n this.parentManager = parent\n break\n }\n }\n }\n\n get didChangeTheme() {\n return this.parentManager && this.name !== this.parentManager.fullName\n }\n\n get parentName() {\n return this.parentManager?.name || null\n }\n\n get fullName(): string {\n return this.getNextTheme().name || this.name || ''\n // const parentName = this.parentManager?.fullName || ''\n // const name = this.name || ''\n // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)\n // return parts.join('_')\n }\n\n // gets value going up to parents\n getValue(key: string) {\n let theme = this.theme\n let manager = this as ThemeManager | null\n while (true) {\n if (!theme) return\n if (key in theme) {\n return theme[key]\n }\n manager = this.parentManager\n if (!manager || manager.theme === theme) {\n return\n }\n theme = manager.theme\n }\n }\n\n isTracking(uuid: Object) {\n return Boolean(this.keys.get(uuid)?.size)\n }\n\n update({ name, theme, className }: SetActiveThemeProps = {}, force = false) {\n if (!force) {\n // className compare on web, avoids light/dark re-renders\n const nameChanged = name !== this.name\n if (!nameChanged) {\n return false\n }\n }\n this.className = className || ''\n this.name = name || ''\n this.theme = theme\n this.notifyListeners()\n return true\n }\n\n getNextTheme(\n props: GetNextThemeProps = {},\n debug?: any\n ): {\n name: string\n theme: ThemeObject | null\n className: string | undefined\n } {\n const { themes = getThemes(), name, componentName } = props\n\n if (props.reset && name) {\n return {\n name: name,\n theme: themes[name],\n className: this.getClassName(name),\n }\n }\n\n const parentIsReset = this.parentManager?.reset\n\n if (!name) {\n if (componentName) {\n // allow for _Card_Button or just _Button\n const names = [\n `${this.name}_${componentName}`,\n `${withoutComponentName(this.name)}_${componentName}`,\n ]\n for (const name of names) {\n if (name in themes) {\n const className = this.getClassName(name)\n return { name, theme: themes[name], className }\n }\n }\n }\n return {\n name: this.name,\n theme: this.theme,\n className: this.className,\n }\n }\n\n let nextName = name || this.name || ''\n let parentName = parentIsReset ? this.parentName || this.fullName : this.fullName\n\n while (true) {\n if (nextName in themes) break\n nextName = `${parentName}_${name}`\n if (nextName in themes) break\n // this is fine - some themes can not have parents\n if (!parentName.includes(THEME_NAME_SEPARATOR)) break\n // go up one\n parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))\n }\n\n if (componentName) {\n // allow for _Card_Button or just _Button\n const names = [\n `${nextName}_${componentName}`,\n `${withoutComponentName(nextName)}_${componentName}`,\n ]\n for (const name of names) {\n if (name in themes) {\n nextName = name\n }\n }\n }\n\n let theme = themes[nextName]\n if (!theme) {\n theme = themes[`light_${nextName}`]\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (debug) {\n // eslint-disable-next-line no-console\n console.log('getNextTheme', this.getClassName(nextName), { props, nextName, parentName })\n }\n }\n\n return {\n name: nextName,\n theme: getThemeUnwrapped(theme),\n className: this.getClassName(nextName),\n }\n }\n\n getClassName(name: string) {\n return `${THEME_CLASSNAME_PREFIX}${name} t_Theme`.replace('light_', '').replace('dark_', '')\n }\n\n track(uuid: any, keys: Set<string>) {\n if (!this.name) return\n this.keys.set(uuid, keys)\n }\n\n notifyListeners() {\n if (!this.name) {\n this.keys.clear()\n }\n for (const [uuid, keys] of this.keys.entries()) {\n if (keys.size) {\n this.listeners.get(uuid)?.()\n }\n }\n this.themeListeners.forEach((cb) => cb(this.name, this))\n }\n\n onChangeTheme(cb: ThemeListener) {\n this.themeListeners.add(cb)\n return () => {\n this.themeListeners.delete(cb)\n }\n }\n\n onUpdate(uuid: any, cb: Function) {\n this.listeners.set(uuid, cb)\n return () => {\n this.listeners.delete(uuid)\n this.keys.delete(uuid)\n }\n }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n\nconst withoutComponentName = (name: string) => name.replace(/(\\_[A-Z][a-zA-Z]+)+$/g, '')\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["name"]
|
|
7
7
|
}
|
|
@@ -42,11 +42,20 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
|
|
|
42
42
|
const config = (0, import_config.getConfig)();
|
|
43
43
|
return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme);
|
|
44
44
|
}
|
|
45
|
+
const state = (0, import_useServerHooks.useServerRef)();
|
|
46
|
+
if (!state.current) {
|
|
47
|
+
state.current = {
|
|
48
|
+
uuid: {},
|
|
49
|
+
keys: /* @__PURE__ */ new Set(),
|
|
50
|
+
isRendering: true
|
|
51
|
+
};
|
|
52
|
+
}
|
|
45
53
|
const { name, theme, themes, themeManager, className } = useChangeThemeEffect(
|
|
46
54
|
themeName,
|
|
47
55
|
componentName,
|
|
48
56
|
props,
|
|
49
|
-
forceUpdate
|
|
57
|
+
forceUpdate,
|
|
58
|
+
state.current.uuid
|
|
50
59
|
);
|
|
51
60
|
if (process.env.NODE_ENV === "development") {
|
|
52
61
|
if ((props == null ? void 0 : props.debug) === "verbose") {
|
|
@@ -58,14 +67,6 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
|
|
|
58
67
|
console.groupEnd();
|
|
59
68
|
}
|
|
60
69
|
}
|
|
61
|
-
const state = (0, import_useServerHooks.useServerRef)();
|
|
62
|
-
if (!state.current) {
|
|
63
|
-
state.current = {
|
|
64
|
-
uuid: {},
|
|
65
|
-
keys: /* @__PURE__ */ new Set(),
|
|
66
|
-
isRendering: true
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
70
|
state.current.isRendering = true;
|
|
70
71
|
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
71
72
|
const st = state.current;
|
|
@@ -158,10 +159,10 @@ const useDefaultThemeName = () => {
|
|
|
158
159
|
return (_a = (0, import_react.useContext)(import_ThemeContext.ThemeContext)) == null ? void 0 : _a.defaultTheme;
|
|
159
160
|
};
|
|
160
161
|
const activeThemeManagers = /* @__PURE__ */ new Set();
|
|
161
|
-
const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
162
|
+
const useChangeThemeEffect = (name, componentName, props, forceUpdateProp, uuid) => {
|
|
162
163
|
const { themes } = (0, import_config.getConfig)();
|
|
163
164
|
if (import_platform.isRSC) {
|
|
164
|
-
const parentManager2 = new import_ThemeManager.ThemeManager("light", themes.light);
|
|
165
|
+
const parentManager2 = new import_ThemeManager.ThemeManager("light", "light", themes.light);
|
|
165
166
|
const next2 = parentManager2.getNextTheme({
|
|
166
167
|
name,
|
|
167
168
|
componentName,
|
|
@@ -186,19 +187,20 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
186
187
|
const next = parentManager.getNextTheme(getThemeProps, debug);
|
|
187
188
|
const forceUpdate = forceUpdateProp || (0, import_use_force_update.useForceUpdate)();
|
|
188
189
|
const themeManager = (0, import_useConstant.useConstant)(() => {
|
|
189
|
-
return new import_ThemeManager.ThemeManager(next.name, next.theme, parentManager, reset);
|
|
190
|
+
return new import_ThemeManager.ThemeManager(next.name, next.className, next.theme, parentManager, reset);
|
|
190
191
|
});
|
|
191
|
-
if ((next == null ? void 0 : next.name) !== themeManager.name || (next == null ? void 0 : next.className) !== themeManager.className) {
|
|
192
|
-
themeManager.update(next);
|
|
193
|
-
}
|
|
194
192
|
if (!import_platform.isSSR) {
|
|
195
193
|
(0, import_react.useLayoutEffect)(() => {
|
|
194
|
+
themeManager.update(next);
|
|
196
195
|
activeThemeManagers.add(themeManager);
|
|
197
196
|
const disposeParentOnChange = parentManager.onChangeTheme(() => {
|
|
198
197
|
const next2 = parentManager.getNextTheme(getThemeProps, debug);
|
|
199
198
|
if (!next2)
|
|
200
199
|
return;
|
|
201
200
|
if (themeManager.update(next2)) {
|
|
201
|
+
if (uuid && !themeManager.isTracking(uuid)) {
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
202
204
|
if (process.env.NODE_ENV === "development" && debug) {
|
|
203
205
|
console.log("Changed theme", componentName, next2, { props });
|
|
204
206
|
}
|
|
@@ -209,7 +211,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
209
211
|
activeThemeManagers.delete(themeManager);
|
|
210
212
|
disposeParentOnChange();
|
|
211
213
|
};
|
|
212
|
-
}, [themes,
|
|
214
|
+
}, [themes, next == null ? void 0 : next.name, next == null ? void 0 : next.className, componentName, debug]);
|
|
213
215
|
}
|
|
214
216
|
return {
|
|
215
217
|
...parentManager && {
|
|
@@ -217,6 +219,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
217
219
|
theme: parentManager.theme
|
|
218
220
|
},
|
|
219
221
|
...next,
|
|
222
|
+
className: next.className === parentManager.className ? void 0 : next.className,
|
|
220
223
|
themes,
|
|
221
224
|
themeManager
|
|
222
225
|
};
|
|
@@ -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, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n GetNextThemeProps,\n ThemeManager,\n ThemeManagerContext,\n emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n className?: string\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n componentName?: string\n children?: any\n reset?: boolean\n debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nexport const useTheme = (\n themeName?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdate?: any\n): ThemeObject => {\n // TODO this can use useChangeThemeEffect almost ready\n if (isRSC) {\n const config = getConfig()\n // @ts-ignore\n return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n }\n\n const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 useTheme =>', name)\n const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n for (const key in logs) {\n // eslint-disable-next-line no-console\n console.log(' ', key, logs[key])\n }\n // eslint-disable-next-line no-console\n console.groupEnd()\n }\n }\n\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAA8E;AAE9E,oBAA0B;AAC1B,wBAA2B;AAC3B,sBAAwD;AACxD,0BAA6B;AAC7B,0BAA6B;AAC7B,0BAKO;AAEP,+BAAkC;AAClC,yBAA4B;AAC5B,4BAA6B;AAkBtB,MAAM,WAAW,CACtB,WACA,eACA,OACA,gBACgB;AAEhB,MAAI,uBAAO;AACT,UAAM,aAAS,yBAAU;AAEzB,WAAO,gBAAgB,OAAO,OAAO,OAAO,eAAe,OAAO,YAAY;AAAA,EAChF;AAEA,QAAM,EAAE,MAAM,OAAO,QAAQ,cAAc,UAAU,IAAI;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n GetNextThemeProps,\n ThemeManager,\n ThemeManagerContext,\n emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n className?: string\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n componentName?: string\n children?: any\n reset?: boolean\n debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nexport const useTheme = (\n themeName?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdate?: any\n): ThemeObject => {\n // TODO this can use useChangeThemeEffect almost ready\n if (isRSC) {\n const config = getConfig()\n // @ts-ignore\n return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n }\n\n const state = useServerRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\n isRendering: true,\n }\n }\n\n const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate,\n state.current.uuid\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 useTheme =>', name)\n const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n for (const key in logs) {\n // eslint-disable-next-line no-console\n console.log(' ', key, logs[key])\n }\n // eslint-disable-next-line no-console\n console.groupEnd()\n }\n }\n\n // track usage\n state.current.isRendering = true\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n const cur = themeManager?.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n themeManager?.track(st.uuid, st.keys)\n }\n })\n\n const debugProp = props && props['debug']\n\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('No theme with name', themeName)\n }\n return themes[getConfig().defaultTheme || 'light']\n }\n\n return useMemo(() => {\n return getThemeProxied(theme, name, className, themeManager, state, debugProp)\n }, [theme, name, className, themeManager, state, debugProp])\n}\n\nfunction getThemeProxied(\n theme: any,\n name: string,\n className?: string,\n themeManager?: ThemeManager | null,\n state?: React.MutableRefObject<UseThemeState>,\n debugProp?: boolean | 'verbose'\n) {\n return new Proxy(theme, {\n has(_, key) {\n if (typeof key === 'string' && key[0] === '$') {\n key = key.slice(1)\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (key === GetThemeManager) {\n return themeManager\n }\n if (key === 'name') {\n return name\n }\n if (key === 'className') {\n return className\n }\n if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n return Reflect.get(_, key)\n }\n // auto convert variables to plain\n if (key[0] === '$') {\n key = key.slice(1)\n }\n if (!themeManager) {\n return theme[key]\n }\n if (state) {\n if (state.current.isRendering && !state.current.keys.has(key)) {\n state.current.keys.add(key)\n if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD38 tracking theme', key)\n }\n }\n }\n return themeManager.getValue(key)\n },\n })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n if (!theme) return\n return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n if (isRSC) {\n const config = getConfig()\n return config.defaultTheme || 'light'\n }\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent?.name || '')\n\n useIsomorphicLayoutEffect(() => {\n if (!parent) return\n return parent.onChangeTheme((next, manager) => {\n const name = opts?.parent ? manager.parentName || next : next\n if (!name) return\n setName(name)\n })\n }, [parent])\n\n return name\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n name?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdateProp?: any,\n uuid?: Object\n): {\n themes: Record<string, ThemeObject>\n themeManager: ThemeManager | null\n name: string\n theme: ThemeObject | null\n className?: string\n} => {\n const { themes } = getConfig()\n\n if (isRSC) {\n // we need context working for this to work well\n const parentManager = new ThemeManager('light', 'light', themes.light)\n const next = parentManager.getNextTheme({\n name,\n componentName,\n themes,\n reset: props?.reset,\n })\n return {\n ...next,\n themes,\n themeManager: null,\n }\n }\n\n const debug = props && props['debug']\n const parentManager = useContext(ThemeManagerContext) || emptyManager\n const reset = props?.reset || false\n const getThemeProps: GetNextThemeProps = {\n name,\n componentName,\n themes,\n reset,\n }\n const next = parentManager.getNextTheme(getThemeProps, debug)\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forceUpdate = forceUpdateProp || useForceUpdate()\n\n const themeManager = useConstant(() => {\n return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n })\n\n if (!isSSR) {\n useLayoutEffect(() => {\n themeManager.update(next)\n\n activeThemeManagers.add(themeManager)\n\n const disposeParentOnChange = parentManager.onChangeTheme(() => {\n const next = parentManager.getNextTheme(getThemeProps, debug)\n if (!next) return\n if (themeManager.update(next)) {\n if (uuid && !themeManager.isTracking(uuid)) {\n // no need to re-render if not tracking any keys\n return\n }\n if (process.env.NODE_ENV === 'development' && debug) {\n // eslint-disable-next-line no-console\n console.log('Changed theme', componentName, next, { props })\n }\n forceUpdate()\n }\n })\n\n return () => {\n activeThemeManagers.delete(themeManager)\n disposeParentOnChange()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [themes, next?.name, next?.className, componentName, debug])\n }\n\n return {\n ...(parentManager && {\n name: parentManager.name,\n theme: parentManager.theme,\n }),\n ...next,\n className: next.className === parentManager.className ? undefined : next.className,\n themes,\n themeManager,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["name", "parentManager", "next"]
|
|
7
7
|
}
|
|
@@ -3,15 +3,15 @@ import { getThemes } from "../config";
|
|
|
3
3
|
import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from "../constants/constants";
|
|
4
4
|
import { getThemeUnwrapped } from "../hooks/getThemeUnwrapped";
|
|
5
5
|
class ThemeManager {
|
|
6
|
-
constructor(name = "", theme = null, parentManager = null, reset = false) {
|
|
6
|
+
constructor(name = "", className = "", theme = null, parentManager = null, reset = false) {
|
|
7
7
|
this.name = name;
|
|
8
|
+
this.className = className;
|
|
8
9
|
this.theme = theme;
|
|
9
10
|
this.parentManager = parentManager;
|
|
10
11
|
this.reset = reset;
|
|
11
12
|
this.keys = /* @__PURE__ */ new Map();
|
|
12
13
|
this.listeners = /* @__PURE__ */ new Map();
|
|
13
14
|
this.themeListeners = /* @__PURE__ */ new Set();
|
|
14
|
-
this.className = null;
|
|
15
15
|
let parent = parentManager;
|
|
16
16
|
let tries = 0;
|
|
17
17
|
while (true) {
|
|
@@ -55,6 +55,10 @@ class ThemeManager {
|
|
|
55
55
|
theme = manager.theme;
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
+
isTracking(uuid) {
|
|
59
|
+
var _a;
|
|
60
|
+
return Boolean((_a = this.keys.get(uuid)) == null ? void 0 : _a.size);
|
|
61
|
+
}
|
|
58
62
|
update({ name, theme, className } = {}, force = false) {
|
|
59
63
|
if (!force) {
|
|
60
64
|
const nameChanged = name !== this.name;
|
|
@@ -62,7 +66,7 @@ class ThemeManager {
|
|
|
62
66
|
return false;
|
|
63
67
|
}
|
|
64
68
|
}
|
|
65
|
-
this.className = className ||
|
|
69
|
+
this.className = className || "";
|
|
66
70
|
this.name = name || "";
|
|
67
71
|
this.theme = theme;
|
|
68
72
|
this.notifyListeners();
|
|
@@ -95,7 +99,7 @@ class ThemeManager {
|
|
|
95
99
|
return {
|
|
96
100
|
name: this.name,
|
|
97
101
|
theme: this.theme,
|
|
98
|
-
className:
|
|
102
|
+
className: this.className
|
|
99
103
|
};
|
|
100
104
|
}
|
|
101
105
|
let nextName = name || this.name || "";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/ThemeManager.tsx"],
|
|
4
|
-
"sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from '../config'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { ThemeObject, Themes } from '../types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n className?: string\n parentManager?: ThemeManager | null\n name?: string | null\n theme?: any\n}\n\nexport type GetNextThemeProps = {\n themes?: Themes\n name?: string | null\n componentName?: string | null\n reset?: boolean\n}\n\nexport class ThemeManager {\n keys = new Map<any, Set<string>>()\n listeners = new Map<any, Function>()\n themeListeners = new Set<ThemeListener>()\n
|
|
5
|
-
"mappings": "AAAA,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,yBAAyB;AAmB3B,MAAM,aAAa;AAAA,
|
|
4
|
+
"sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from '../config'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { ThemeObject, Themes } from '../types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n className?: string\n parentManager?: ThemeManager | null\n name?: string | null\n theme?: any\n}\n\nexport type GetNextThemeProps = {\n themes?: Themes\n name?: string | null\n componentName?: string | null\n reset?: boolean\n}\n\nexport class ThemeManager {\n keys = new Map<any, Set<string>>()\n listeners = new Map<any, Function>()\n themeListeners = new Set<ThemeListener>()\n\n constructor(\n public name: string = '',\n public className: string = '',\n public theme: ThemeObject | null = null,\n public parentManager: ThemeManager | null = null,\n public reset: boolean = false\n ) {\n // find the nearest different parentManager\n let parent = parentManager\n let tries = 0\n while (true) {\n tries++\n if (tries > 10) {\n throw new Error(`Nested 10 of the same theme in a row, likely error`)\n }\n if (!parent) break\n if (parent.name === name) {\n // go up if same\n parent = parent.parentManager\n } else {\n this.parentManager = parent\n break\n }\n }\n }\n\n get didChangeTheme() {\n return this.parentManager && this.name !== this.parentManager.fullName\n }\n\n get parentName() {\n return this.parentManager?.name || null\n }\n\n get fullName(): string {\n return this.getNextTheme().name || this.name || ''\n // const parentName = this.parentManager?.fullName || ''\n // const name = this.name || ''\n // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)\n // return parts.join('_')\n }\n\n // gets value going up to parents\n getValue(key: string) {\n let theme = this.theme\n let manager = this as ThemeManager | null\n while (true) {\n if (!theme) return\n if (key in theme) {\n return theme[key]\n }\n manager = this.parentManager\n if (!manager || manager.theme === theme) {\n return\n }\n theme = manager.theme\n }\n }\n\n isTracking(uuid: Object) {\n return Boolean(this.keys.get(uuid)?.size)\n }\n\n update({ name, theme, className }: SetActiveThemeProps = {}, force = false) {\n if (!force) {\n // className compare on web, avoids light/dark re-renders\n const nameChanged = name !== this.name\n if (!nameChanged) {\n return false\n }\n }\n this.className = className || ''\n this.name = name || ''\n this.theme = theme\n this.notifyListeners()\n return true\n }\n\n getNextTheme(\n props: GetNextThemeProps = {},\n debug?: any\n ): {\n name: string\n theme: ThemeObject | null\n className: string | undefined\n } {\n const { themes = getThemes(), name, componentName } = props\n\n if (props.reset && name) {\n return {\n name: name,\n theme: themes[name],\n className: this.getClassName(name),\n }\n }\n\n const parentIsReset = this.parentManager?.reset\n\n if (!name) {\n if (componentName) {\n // allow for _Card_Button or just _Button\n const names = [\n `${this.name}_${componentName}`,\n `${withoutComponentName(this.name)}_${componentName}`,\n ]\n for (const name of names) {\n if (name in themes) {\n const className = this.getClassName(name)\n return { name, theme: themes[name], className }\n }\n }\n }\n return {\n name: this.name,\n theme: this.theme,\n className: this.className,\n }\n }\n\n let nextName = name || this.name || ''\n let parentName = parentIsReset ? this.parentName || this.fullName : this.fullName\n\n while (true) {\n if (nextName in themes) break\n nextName = `${parentName}_${name}`\n if (nextName in themes) break\n // this is fine - some themes can not have parents\n if (!parentName.includes(THEME_NAME_SEPARATOR)) break\n // go up one\n parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))\n }\n\n if (componentName) {\n // allow for _Card_Button or just _Button\n const names = [\n `${nextName}_${componentName}`,\n `${withoutComponentName(nextName)}_${componentName}`,\n ]\n for (const name of names) {\n if (name in themes) {\n nextName = name\n }\n }\n }\n\n let theme = themes[nextName]\n if (!theme) {\n theme = themes[`light_${nextName}`]\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (debug) {\n // eslint-disable-next-line no-console\n console.log('getNextTheme', this.getClassName(nextName), { props, nextName, parentName })\n }\n }\n\n return {\n name: nextName,\n theme: getThemeUnwrapped(theme),\n className: this.getClassName(nextName),\n }\n }\n\n getClassName(name: string) {\n return `${THEME_CLASSNAME_PREFIX}${name} t_Theme`.replace('light_', '').replace('dark_', '')\n }\n\n track(uuid: any, keys: Set<string>) {\n if (!this.name) return\n this.keys.set(uuid, keys)\n }\n\n notifyListeners() {\n if (!this.name) {\n this.keys.clear()\n }\n for (const [uuid, keys] of this.keys.entries()) {\n if (keys.size) {\n this.listeners.get(uuid)?.()\n }\n }\n this.themeListeners.forEach((cb) => cb(this.name, this))\n }\n\n onChangeTheme(cb: ThemeListener) {\n this.themeListeners.add(cb)\n return () => {\n this.themeListeners.delete(cb)\n }\n }\n\n onUpdate(uuid: any, cb: Function) {\n this.listeners.set(uuid, cb)\n return () => {\n this.listeners.delete(uuid)\n this.keys.delete(uuid)\n }\n }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n\nconst withoutComponentName = (name: string) => name.replace(/(\\_[A-Z][a-zA-Z]+)+$/g, '')\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["name"]
|
|
7
7
|
}
|
|
@@ -18,11 +18,20 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
|
|
|
18
18
|
const config = getConfig();
|
|
19
19
|
return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme);
|
|
20
20
|
}
|
|
21
|
+
const state = useServerRef();
|
|
22
|
+
if (!state.current) {
|
|
23
|
+
state.current = {
|
|
24
|
+
uuid: {},
|
|
25
|
+
keys: /* @__PURE__ */ new Set(),
|
|
26
|
+
isRendering: true
|
|
27
|
+
};
|
|
28
|
+
}
|
|
21
29
|
const { name, theme, themes, themeManager, className } = useChangeThemeEffect(
|
|
22
30
|
themeName,
|
|
23
31
|
componentName,
|
|
24
32
|
props,
|
|
25
|
-
forceUpdate
|
|
33
|
+
forceUpdate,
|
|
34
|
+
state.current.uuid
|
|
26
35
|
);
|
|
27
36
|
if (process.env.NODE_ENV === "development") {
|
|
28
37
|
if ((props == null ? void 0 : props.debug) === "verbose") {
|
|
@@ -34,14 +43,6 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
|
|
|
34
43
|
console.groupEnd();
|
|
35
44
|
}
|
|
36
45
|
}
|
|
37
|
-
const state = useServerRef();
|
|
38
|
-
if (!state.current) {
|
|
39
|
-
state.current = {
|
|
40
|
-
uuid: {},
|
|
41
|
-
keys: /* @__PURE__ */ new Set(),
|
|
42
|
-
isRendering: true
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
46
|
state.current.isRendering = true;
|
|
46
47
|
useIsomorphicLayoutEffect(() => {
|
|
47
48
|
const st = state.current;
|
|
@@ -134,10 +135,10 @@ const useDefaultThemeName = () => {
|
|
|
134
135
|
return (_a = useContext(ThemeContext)) == null ? void 0 : _a.defaultTheme;
|
|
135
136
|
};
|
|
136
137
|
const activeThemeManagers = /* @__PURE__ */ new Set();
|
|
137
|
-
const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
138
|
+
const useChangeThemeEffect = (name, componentName, props, forceUpdateProp, uuid) => {
|
|
138
139
|
const { themes } = getConfig();
|
|
139
140
|
if (isRSC) {
|
|
140
|
-
const parentManager2 = new ThemeManager("light", themes.light);
|
|
141
|
+
const parentManager2 = new ThemeManager("light", "light", themes.light);
|
|
141
142
|
const next2 = parentManager2.getNextTheme({
|
|
142
143
|
name,
|
|
143
144
|
componentName,
|
|
@@ -162,19 +163,20 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
162
163
|
const next = parentManager.getNextTheme(getThemeProps, debug);
|
|
163
164
|
const forceUpdate = forceUpdateProp || useForceUpdate();
|
|
164
165
|
const themeManager = useConstant(() => {
|
|
165
|
-
return new ThemeManager(next.name, next.theme, parentManager, reset);
|
|
166
|
+
return new ThemeManager(next.name, next.className, next.theme, parentManager, reset);
|
|
166
167
|
});
|
|
167
|
-
if ((next == null ? void 0 : next.name) !== themeManager.name || (next == null ? void 0 : next.className) !== themeManager.className) {
|
|
168
|
-
themeManager.update(next);
|
|
169
|
-
}
|
|
170
168
|
if (!isSSR) {
|
|
171
169
|
useLayoutEffect(() => {
|
|
170
|
+
themeManager.update(next);
|
|
172
171
|
activeThemeManagers.add(themeManager);
|
|
173
172
|
const disposeParentOnChange = parentManager.onChangeTheme(() => {
|
|
174
173
|
const next2 = parentManager.getNextTheme(getThemeProps, debug);
|
|
175
174
|
if (!next2)
|
|
176
175
|
return;
|
|
177
176
|
if (themeManager.update(next2)) {
|
|
177
|
+
if (uuid && !themeManager.isTracking(uuid)) {
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
178
180
|
if (process.env.NODE_ENV === "development" && debug) {
|
|
179
181
|
console.log("Changed theme", componentName, next2, { props });
|
|
180
182
|
}
|
|
@@ -185,7 +187,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
185
187
|
activeThemeManagers.delete(themeManager);
|
|
186
188
|
disposeParentOnChange();
|
|
187
189
|
};
|
|
188
|
-
}, [themes,
|
|
190
|
+
}, [themes, next == null ? void 0 : next.name, next == null ? void 0 : next.className, componentName, debug]);
|
|
189
191
|
}
|
|
190
192
|
return {
|
|
191
193
|
...parentManager && {
|
|
@@ -193,6 +195,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
193
195
|
theme: parentManager.theme
|
|
194
196
|
},
|
|
195
197
|
...next,
|
|
198
|
+
className: next.className === parentManager.className ? void 0 : next.className,
|
|
196
199
|
themes,
|
|
197
200
|
themeManager
|
|
198
201
|
};
|
|
@@ -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, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n GetNextThemeProps,\n ThemeManager,\n ThemeManagerContext,\n emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n className?: string\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n componentName?: string\n children?: any\n reset?: boolean\n debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nexport const useTheme = (\n themeName?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdate?: any\n): ThemeObject => {\n // TODO this can use useChangeThemeEffect almost ready\n if (isRSC) {\n const config = getConfig()\n // @ts-ignore\n return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n }\n\n const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 useTheme =>', name)\n const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n for (const key in logs) {\n // eslint-disable-next-line no-console\n console.log(' ', key, logs[key])\n }\n // eslint-disable-next-line no-console\n console.groupEnd()\n }\n }\n\n
|
|
5
|
-
"mappings": "AAAA,SAAS,sBAAsB;AAC/B,SAAgB,YAAY,iBAAiB,SAAiB,gBAAgB;AAE9E,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,OAAO,OAAO,iCAAiC;AACxD,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAkBtB,MAAM,WAAW,CACtB,WACA,eACA,OACA,gBACgB;AAEhB,MAAI,OAAO;AACT,UAAM,SAAS,UAAU;AAEzB,WAAO,gBAAgB,OAAO,OAAO,OAAO,eAAe,OAAO,YAAY;AAAA,EAChF;AAEA,QAAM,EAAE,MAAM,OAAO,QAAQ,cAAc,UAAU,IAAI;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n GetNextThemeProps,\n ThemeManager,\n ThemeManagerContext,\n emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n className?: string\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n componentName?: string\n children?: any\n reset?: boolean\n debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nexport const useTheme = (\n themeName?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdate?: any\n): ThemeObject => {\n // TODO this can use useChangeThemeEffect almost ready\n if (isRSC) {\n const config = getConfig()\n // @ts-ignore\n return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n }\n\n const state = useServerRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\n isRendering: true,\n }\n }\n\n const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate,\n state.current.uuid\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 useTheme =>', name)\n const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n for (const key in logs) {\n // eslint-disable-next-line no-console\n console.log(' ', key, logs[key])\n }\n // eslint-disable-next-line no-console\n console.groupEnd()\n }\n }\n\n // track usage\n state.current.isRendering = true\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n const cur = themeManager?.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n themeManager?.track(st.uuid, st.keys)\n }\n })\n\n const debugProp = props && props['debug']\n\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('No theme with name', themeName)\n }\n return themes[getConfig().defaultTheme || 'light']\n }\n\n return useMemo(() => {\n return getThemeProxied(theme, name, className, themeManager, state, debugProp)\n }, [theme, name, className, themeManager, state, debugProp])\n}\n\nfunction getThemeProxied(\n theme: any,\n name: string,\n className?: string,\n themeManager?: ThemeManager | null,\n state?: React.MutableRefObject<UseThemeState>,\n debugProp?: boolean | 'verbose'\n) {\n return new Proxy(theme, {\n has(_, key) {\n if (typeof key === 'string' && key[0] === '$') {\n key = key.slice(1)\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (key === GetThemeManager) {\n return themeManager\n }\n if (key === 'name') {\n return name\n }\n if (key === 'className') {\n return className\n }\n if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n return Reflect.get(_, key)\n }\n // auto convert variables to plain\n if (key[0] === '$') {\n key = key.slice(1)\n }\n if (!themeManager) {\n return theme[key]\n }\n if (state) {\n if (state.current.isRendering && !state.current.keys.has(key)) {\n state.current.keys.add(key)\n if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD38 tracking theme', key)\n }\n }\n }\n return themeManager.getValue(key)\n },\n })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n if (!theme) return\n return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n if (isRSC) {\n const config = getConfig()\n return config.defaultTheme || 'light'\n }\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent?.name || '')\n\n useIsomorphicLayoutEffect(() => {\n if (!parent) return\n return parent.onChangeTheme((next, manager) => {\n const name = opts?.parent ? manager.parentName || next : next\n if (!name) return\n setName(name)\n })\n }, [parent])\n\n return name\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n name?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdateProp?: any,\n uuid?: Object\n): {\n themes: Record<string, ThemeObject>\n themeManager: ThemeManager | null\n name: string\n theme: ThemeObject | null\n className?: string\n} => {\n const { themes } = getConfig()\n\n if (isRSC) {\n // we need context working for this to work well\n const parentManager = new ThemeManager('light', 'light', themes.light)\n const next = parentManager.getNextTheme({\n name,\n componentName,\n themes,\n reset: props?.reset,\n })\n return {\n ...next,\n themes,\n themeManager: null,\n }\n }\n\n const debug = props && props['debug']\n const parentManager = useContext(ThemeManagerContext) || emptyManager\n const reset = props?.reset || false\n const getThemeProps: GetNextThemeProps = {\n name,\n componentName,\n themes,\n reset,\n }\n const next = parentManager.getNextTheme(getThemeProps, debug)\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forceUpdate = forceUpdateProp || useForceUpdate()\n\n const themeManager = useConstant(() => {\n return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n })\n\n if (!isSSR) {\n useLayoutEffect(() => {\n themeManager.update(next)\n\n activeThemeManagers.add(themeManager)\n\n const disposeParentOnChange = parentManager.onChangeTheme(() => {\n const next = parentManager.getNextTheme(getThemeProps, debug)\n if (!next) return\n if (themeManager.update(next)) {\n if (uuid && !themeManager.isTracking(uuid)) {\n // no need to re-render if not tracking any keys\n return\n }\n if (process.env.NODE_ENV === 'development' && debug) {\n // eslint-disable-next-line no-console\n console.log('Changed theme', componentName, next, { props })\n }\n forceUpdate()\n }\n })\n\n return () => {\n activeThemeManagers.delete(themeManager)\n disposeParentOnChange()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [themes, next?.name, next?.className, componentName, debug])\n }\n\n return {\n ...(parentManager && {\n name: parentManager.name,\n theme: parentManager.theme,\n }),\n ...next,\n className: next.className === parentManager.className ? undefined : next.className,\n themes,\n themeManager,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["name", "parentManager", "next"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.159",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@expo/match-media": "^0.3.0",
|
|
30
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/helpers": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/normalize-css-color-lite": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/rnw": "^1.0.1-beta.
|
|
34
|
-
"@tamagui/rnw-lite": "^1.0.1-beta.
|
|
35
|
-
"@tamagui/use-debounce": "^1.0.1-beta.
|
|
36
|
-
"@tamagui/use-event": "^1.0.1-beta.
|
|
37
|
-
"@tamagui/use-force-update": "^1.0.1-beta.
|
|
30
|
+
"@tamagui/compose-refs": "^1.0.1-beta.159",
|
|
31
|
+
"@tamagui/helpers": "^1.0.1-beta.159",
|
|
32
|
+
"@tamagui/normalize-css-color-lite": "^1.0.1-beta.159",
|
|
33
|
+
"@tamagui/rnw": "^1.0.1-beta.159",
|
|
34
|
+
"@tamagui/rnw-lite": "^1.0.1-beta.159",
|
|
35
|
+
"@tamagui/use-debounce": "^1.0.1-beta.159",
|
|
36
|
+
"@tamagui/use-event": "^1.0.1-beta.159",
|
|
37
|
+
"@tamagui/use-force-update": "^1.0.1-beta.159",
|
|
38
38
|
"expo-screen-orientation": "^4.3.0",
|
|
39
39
|
"hyphenate-style-name": "^1.0.4"
|
|
40
40
|
},
|
|
@@ -43,10 +43,10 @@
|
|
|
43
43
|
"react-dom": "*"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
46
|
+
"@tamagui/build": "^1.0.1-beta.159",
|
|
47
47
|
"@types/react": "^18.0.15",
|
|
48
48
|
"csstype": "^3.0.10",
|
|
49
|
-
"esbuild": "^0.
|
|
49
|
+
"esbuild": "^0.15.6",
|
|
50
50
|
"react": "*",
|
|
51
51
|
"react-dom": "*",
|
|
52
52
|
"typescript": "^4.7.4",
|
|
@@ -25,10 +25,10 @@ export class ThemeManager {
|
|
|
25
25
|
keys = new Map<any, Set<string>>()
|
|
26
26
|
listeners = new Map<any, Function>()
|
|
27
27
|
themeListeners = new Set<ThemeListener>()
|
|
28
|
-
className: string | null = null
|
|
29
28
|
|
|
30
29
|
constructor(
|
|
31
30
|
public name: string = '',
|
|
31
|
+
public className: string = '',
|
|
32
32
|
public theme: ThemeObject | null = null,
|
|
33
33
|
public parentManager: ThemeManager | null = null,
|
|
34
34
|
public reset: boolean = false
|
|
@@ -85,6 +85,10 @@ export class ThemeManager {
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
+
isTracking(uuid: Object) {
|
|
89
|
+
return Boolean(this.keys.get(uuid)?.size)
|
|
90
|
+
}
|
|
91
|
+
|
|
88
92
|
update({ name, theme, className }: SetActiveThemeProps = {}, force = false) {
|
|
89
93
|
if (!force) {
|
|
90
94
|
// className compare on web, avoids light/dark re-renders
|
|
@@ -93,7 +97,7 @@ export class ThemeManager {
|
|
|
93
97
|
return false
|
|
94
98
|
}
|
|
95
99
|
}
|
|
96
|
-
this.className = className ||
|
|
100
|
+
this.className = className || ''
|
|
97
101
|
this.name = name || ''
|
|
98
102
|
this.theme = theme
|
|
99
103
|
this.notifyListeners()
|
|
@@ -137,7 +141,7 @@ export class ThemeManager {
|
|
|
137
141
|
return {
|
|
138
142
|
name: this.name,
|
|
139
143
|
theme: this.theme,
|
|
140
|
-
className:
|
|
144
|
+
className: this.className,
|
|
141
145
|
}
|
|
142
146
|
}
|
|
143
147
|
|
package/src/hooks/useTheme.tsx
CHANGED
|
@@ -46,11 +46,21 @@ export const useTheme = (
|
|
|
46
46
|
return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
+
const state = useServerRef() as React.MutableRefObject<UseThemeState>
|
|
50
|
+
if (!state.current) {
|
|
51
|
+
state.current = {
|
|
52
|
+
uuid: {},
|
|
53
|
+
keys: new Set(),
|
|
54
|
+
isRendering: true,
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
49
58
|
const { name, theme, themes, themeManager, className } = useChangeThemeEffect(
|
|
50
59
|
themeName,
|
|
51
60
|
componentName,
|
|
52
61
|
props,
|
|
53
|
-
forceUpdate
|
|
62
|
+
forceUpdate,
|
|
63
|
+
state.current.uuid
|
|
54
64
|
)
|
|
55
65
|
|
|
56
66
|
if (process.env.NODE_ENV === 'development') {
|
|
@@ -67,17 +77,8 @@ export const useTheme = (
|
|
|
67
77
|
}
|
|
68
78
|
}
|
|
69
79
|
|
|
70
|
-
const state = useServerRef() as React.MutableRefObject<UseThemeState>
|
|
71
|
-
if (!state.current) {
|
|
72
|
-
state.current = {
|
|
73
|
-
uuid: {},
|
|
74
|
-
keys: new Set(),
|
|
75
|
-
isRendering: true,
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
state.current.isRendering = true
|
|
79
|
-
|
|
80
80
|
// track usage
|
|
81
|
+
state.current.isRendering = true
|
|
81
82
|
useIsomorphicLayoutEffect(() => {
|
|
82
83
|
const st = state.current
|
|
83
84
|
st.isRendering = false
|
|
@@ -191,7 +192,8 @@ export const useChangeThemeEffect = (
|
|
|
191
192
|
name?: string | null,
|
|
192
193
|
componentName?: string,
|
|
193
194
|
props?: ThemeProps,
|
|
194
|
-
forceUpdateProp?: any
|
|
195
|
+
forceUpdateProp?: any,
|
|
196
|
+
uuid?: Object
|
|
195
197
|
): {
|
|
196
198
|
themes: Record<string, ThemeObject>
|
|
197
199
|
themeManager: ThemeManager | null
|
|
@@ -200,9 +202,10 @@ export const useChangeThemeEffect = (
|
|
|
200
202
|
className?: string
|
|
201
203
|
} => {
|
|
202
204
|
const { themes } = getConfig()
|
|
205
|
+
|
|
203
206
|
if (isRSC) {
|
|
204
207
|
// we need context working for this to work well
|
|
205
|
-
const parentManager = new ThemeManager('light', themes.light)
|
|
208
|
+
const parentManager = new ThemeManager('light', 'light', themes.light)
|
|
206
209
|
const next = parentManager.getNextTheme({
|
|
207
210
|
name,
|
|
208
211
|
componentName,
|
|
@@ -215,6 +218,7 @@ export const useChangeThemeEffect = (
|
|
|
215
218
|
themeManager: null,
|
|
216
219
|
}
|
|
217
220
|
}
|
|
221
|
+
|
|
218
222
|
const debug = props && props['debug']
|
|
219
223
|
const parentManager = useContext(ThemeManagerContext) || emptyManager
|
|
220
224
|
const reset = props?.reset || false
|
|
@@ -229,22 +233,23 @@ export const useChangeThemeEffect = (
|
|
|
229
233
|
const forceUpdate = forceUpdateProp || useForceUpdate()
|
|
230
234
|
|
|
231
235
|
const themeManager = useConstant(() => {
|
|
232
|
-
return new ThemeManager(next.name, next.theme, parentManager, reset)
|
|
236
|
+
return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)
|
|
233
237
|
})
|
|
234
238
|
|
|
235
|
-
// not concurrent safe for now but fixes bug in showing old value
|
|
236
|
-
if (next?.name !== themeManager.name || next?.className !== themeManager.className) {
|
|
237
|
-
themeManager.update(next)
|
|
238
|
-
}
|
|
239
|
-
|
|
240
239
|
if (!isSSR) {
|
|
241
240
|
useLayoutEffect(() => {
|
|
241
|
+
themeManager.update(next)
|
|
242
|
+
|
|
242
243
|
activeThemeManagers.add(themeManager)
|
|
243
244
|
|
|
244
245
|
const disposeParentOnChange = parentManager.onChangeTheme(() => {
|
|
245
246
|
const next = parentManager.getNextTheme(getThemeProps, debug)
|
|
246
247
|
if (!next) return
|
|
247
248
|
if (themeManager.update(next)) {
|
|
249
|
+
if (uuid && !themeManager.isTracking(uuid)) {
|
|
250
|
+
// no need to re-render if not tracking any keys
|
|
251
|
+
return
|
|
252
|
+
}
|
|
248
253
|
if (process.env.NODE_ENV === 'development' && debug) {
|
|
249
254
|
// eslint-disable-next-line no-console
|
|
250
255
|
console.log('Changed theme', componentName, next, { props })
|
|
@@ -258,7 +263,7 @@ export const useChangeThemeEffect = (
|
|
|
258
263
|
disposeParentOnChange()
|
|
259
264
|
}
|
|
260
265
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
261
|
-
}, [themes, name, componentName, debug
|
|
266
|
+
}, [themes, next?.name, next?.className, componentName, debug])
|
|
262
267
|
}
|
|
263
268
|
|
|
264
269
|
return {
|
|
@@ -267,6 +272,7 @@ export const useChangeThemeEffect = (
|
|
|
267
272
|
theme: parentManager.theme,
|
|
268
273
|
}),
|
|
269
274
|
...next,
|
|
275
|
+
className: next.className === parentManager.className ? undefined : next.className,
|
|
270
276
|
themes,
|
|
271
277
|
themeManager,
|
|
272
278
|
}
|
|
@@ -15,18 +15,19 @@ export declare type GetNextThemeProps = {
|
|
|
15
15
|
};
|
|
16
16
|
export declare class ThemeManager {
|
|
17
17
|
name: string;
|
|
18
|
+
className: string;
|
|
18
19
|
theme: ThemeObject | null;
|
|
19
20
|
parentManager: ThemeManager | null;
|
|
20
21
|
reset: boolean;
|
|
21
22
|
keys: Map<any, Set<string>>;
|
|
22
23
|
listeners: Map<any, Function>;
|
|
23
24
|
themeListeners: Set<ThemeListener>;
|
|
24
|
-
className
|
|
25
|
-
constructor(name?: string, theme?: ThemeObject | null, parentManager?: ThemeManager | null, reset?: boolean);
|
|
25
|
+
constructor(name?: string, className?: string, theme?: ThemeObject | null, parentManager?: ThemeManager | null, reset?: boolean);
|
|
26
26
|
get didChangeTheme(): boolean | null;
|
|
27
27
|
get parentName(): string | null;
|
|
28
28
|
get fullName(): string;
|
|
29
29
|
getValue(key: string): import("../types").VariableVal | undefined;
|
|
30
|
+
isTracking(uuid: Object): boolean;
|
|
30
31
|
update({ name, theme, className }?: SetActiveThemeProps, force?: boolean): boolean;
|
|
31
32
|
getNextTheme(props?: GetNextThemeProps, debug?: any): {
|
|
32
33
|
name: string;
|
|
@@ -16,7 +16,7 @@ export declare const useThemeName: (opts?: {
|
|
|
16
16
|
}) => string;
|
|
17
17
|
export declare const useDefaultThemeName: () => ThemeName | undefined;
|
|
18
18
|
export declare const activeThemeManagers: Set<ThemeManager>;
|
|
19
|
-
export declare const useChangeThemeEffect: (name?: string | null, componentName?: string, props?: ThemeProps, forceUpdateProp?: any) => {
|
|
19
|
+
export declare const useChangeThemeEffect: (name?: string | null, componentName?: string, props?: ThemeProps, forceUpdateProp?: any, uuid?: Object) => {
|
|
20
20
|
themes: Record<string, ThemeObject>;
|
|
21
21
|
themeManager: ThemeManager | null;
|
|
22
22
|
name: string;
|