@tamagui/core 1.0.1-beta.158 → 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 +9 -4
- package/dist/cjs/helpers/ThemeManager.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +19 -20
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/esm/helpers/ThemeManager.js +9 -4
- package/dist/esm/helpers/ThemeManager.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +19 -20
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/package.json +10 -10
- package/src/helpers/ThemeManager.tsx +8 -3
- package/src/hooks/useTheme.tsx +25 -24
- 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,9 +91,10 @@ 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;
|
|
97
|
+
this.notifyListeners();
|
|
93
98
|
return true;
|
|
94
99
|
}
|
|
95
100
|
getNextTheme(props = {}, debug) {
|
|
@@ -119,7 +124,7 @@ class ThemeManager {
|
|
|
119
124
|
return {
|
|
120
125
|
name: this.name,
|
|
121
126
|
theme: this.theme,
|
|
122
|
-
className:
|
|
127
|
+
className: this.className
|
|
123
128
|
};
|
|
124
129
|
}
|
|
125
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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAE9B,oBAA0B;AAC1B,uBAA6D;AAC7D,+BAAkC;AAmB3B,MAAM,aAAa;AAAA,EAKxB,YACS,OAAe,IACf,YAAoB,IACpB,QAA4B,MAC5B,gBAAqC,MACrC,QAAiB,OACxB;AALO;AACA;AACA;AACA;AACA;AATT,gBAAO,oBAAI,IAAsB;AACjC,qBAAY,oBAAI,IAAmB;AACnC,0BAAiB,oBAAI,IAAmB;AAUtC,QAAI,SAAS;AACb,QAAI,QAAQ;AACZ,WAAO,MAAM;AACX;AACA,UAAI,QAAQ,IAAI;AACd,cAAM,IAAI,MAAM,oDAAoD;AAAA,MACtE;AACA,UAAI,CAAC;AAAQ;AACb,UAAI,OAAO,SAAS,MAAM;AAExB,iBAAS,OAAO;AAAA,MAClB,OAAO;AACL,aAAK,gBAAgB;AACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAI,iBAAiB;AACnB,WAAO,KAAK,iBAAiB,KAAK,SAAS,KAAK,cAAc;AAAA,EAChE;AAAA,EAEA,IAAI,aAAa;AA1DnB;AA2DI,aAAO,UAAK,kBAAL,mBAAoB,SAAQ;AAAA,EACrC;AAAA,EAEA,IAAI,WAAmB;AACrB,WAAO,KAAK,aAAa,EAAE,QAAQ,KAAK,QAAQ;AAAA,EAKlD;AAAA,EAGA,SAAS,KAAa;AACpB,QAAI,QAAQ,KAAK;AACjB,QAAI,UAAU;AACd,WAAO,MAAM;AACX,UAAI,CAAC;AAAO;AACZ,UAAI,OAAO,OAAO;AAChB,eAAO,MAAM;AAAA,MACf;AACA,gBAAU,KAAK;AACf,UAAI,CAAC,WAAW,QAAQ,UAAU,OAAO;AACvC;AAAA,MACF;AACA,cAAQ,QAAQ;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,WAAW,MAAc;AAvF3B;AAwFI,WAAO,SAAQ,UAAK,KAAK,IAAI,IAAI,MAAlB,mBAAqB,IAAI;AAAA,EAC1C;AAAA,EAEA,OAAO,EAAE,MAAM,OAAO,UAAU,IAAyB,CAAC,GAAG,QAAQ,OAAO;AAC1E,QAAI,CAAC,OAAO;AAEV,YAAM,cAAc,SAAS,KAAK;AAClC,UAAI,CAAC,aAAa;AAChB,eAAO;AAAA,MACT;AAAA,IACF;AACA,SAAK,YAAY,aAAa;AAC9B,SAAK,OAAO,QAAQ;AACpB,SAAK,QAAQ;AACb,SAAK,gBAAgB;AACrB,WAAO;AAAA,EACT;AAAA,EAEA,aACE,QAA2B,CAAC,GAC5B,OAKA;AAjHJ;AAkHI,UAAM,EAAE,aAAS,yBAAU,GAAG,MAAM,cAAc,IAAI;AAEtD,QAAI,MAAM,SAAS,MAAM;AACvB,aAAO;AAAA,QACL;AAAA,QACA,OAAO,OAAO;AAAA,QACd,WAAW,KAAK,aAAa,IAAI;AAAA,MACnC;AAAA,IACF;AAEA,UAAM,iBAAgB,UAAK,kBAAL,mBAAoB;AAE1C,QAAI,CAAC,MAAM;AACT,UAAI,eAAe;AAEjB,cAAM,QAAQ;AAAA,UACZ,GAAG,KAAK,QAAQ;AAAA,UAChB,GAAG,qBAAqB,KAAK,IAAI,KAAK;AAAA,QACxC;AACA,mBAAWA,SAAQ,OAAO;AACxB,cAAIA,SAAQ,QAAQ;AAClB,kBAAM,YAAY,KAAK,aAAaA,KAAI;AACxC,mBAAO,EAAE,MAAAA,OAAM,OAAO,OAAOA,QAAO,UAAU;AAAA,UAChD;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,QACL,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,QACZ,WAAW,KAAK;AAAA,MAClB;AAAA,IACF;AAEA,QAAI,WAAW,QAAQ,KAAK,QAAQ;AACpC,QAAI,aAAa,gBAAgB,KAAK,cAAc,KAAK,WAAW,KAAK;AAEzE,WAAO,MAAM;AACX,UAAI,YAAY;AAAQ;AACxB,iBAAW,GAAG,cAAc;AAC5B,UAAI,YAAY;AAAQ;AAExB,UAAI,CAAC,WAAW,SAAS,qCAAoB;AAAG;AAEhD,mBAAa,WAAW,MAAM,GAAG,WAAW,YAAY,qCAAoB,CAAC;AAAA,IAC/E;AAEA,QAAI,eAAe;AAEjB,YAAM,QAAQ;AAAA,QACZ,GAAG,YAAY;AAAA,QACf,GAAG,qBAAqB,QAAQ,KAAK;AAAA,MACvC;AACA,iBAAWA,SAAQ,OAAO;AACxB,YAAIA,SAAQ,QAAQ;AAClB,qBAAWA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAEA,QAAI,QAAQ,OAAO;AACnB,QAAI,CAAC,OAAO;AACV,cAAQ,OAAO,SAAS;AAAA,IAC1B;AAEA,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAI,OAAO;AAET,gBAAQ,IAAI,gBAAgB,KAAK,aAAa,QAAQ,GAAG,EAAE,OAAO,UAAU,WAAW,CAAC;AAAA,MAC1F;AAAA,IACF;AAEA,WAAO;AAAA,MACL,MAAM;AAAA,MACN,WAAO,4CAAkB,KAAK;AAAA,MAC9B,WAAW,KAAK,aAAa,QAAQ;AAAA,IACvC;AAAA,EACF;AAAA,EAEA,aAAa,MAAc;AACzB,WAAO,GAAG,0CAAyB,eAAe,QAAQ,UAAU,EAAE,EAAE,QAAQ,SAAS,EAAE;AAAA,EAC7F;AAAA,EAEA,MAAM,MAAW,MAAmB;AAClC,QAAI,CAAC,KAAK;AAAM;AAChB,SAAK,KAAK,IAAI,MAAM,IAAI;AAAA,EAC1B;AAAA,EAEA,kBAAkB;AAzMpB;AA0MI,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK,MAAM;AAAA,IAClB;AACA,eAAW,CAAC,MAAM,IAAI,KAAK,KAAK,KAAK,QAAQ,GAAG;AAC9C,UAAI,KAAK,MAAM;AACb,mBAAK,UAAU,IAAI,IAAI,MAAvB;AAAA,MACF;AAAA,IACF;AACA,SAAK,eAAe,QAAQ,CAAC,OAAO,GAAG,KAAK,MAAM,IAAI,CAAC;AAAA,EACzD;AAAA,EAEA,cAAc,IAAmB;AAC/B,SAAK,eAAe,IAAI,EAAE;AAC1B,WAAO,MAAM;AACX,WAAK,eAAe,OAAO,EAAE;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,SAAS,MAAW,IAAc;AAChC,SAAK,UAAU,IAAI,MAAM,EAAE;AAC3B,WAAO,MAAM;AACX,WAAK,UAAU,OAAO,IAAI;AAC1B,WAAK,KAAK,OAAO,IAAI;AAAA,IACvB;AAAA,EACF;AACF;AAEO,MAAM,0BAAsB,4BAAmC,IAAI;AACnE,MAAM,eAAe,IAAI,aAAa;AAE7C,MAAM,uBAAuB,CAAC,SAAiB,KAAK,QAAQ,yBAAyB,EAAE;",
|
|
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,23 +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
|
-
let didUpdate = false;
|
|
192
|
-
if ((next == null ? void 0 : next.name) !== themeManager.name || (next == null ? void 0 : next.className) !== themeManager.className) {
|
|
193
|
-
didUpdate = themeManager.update(next);
|
|
194
|
-
}
|
|
195
192
|
if (!import_platform.isSSR) {
|
|
196
193
|
(0, import_react.useLayoutEffect)(() => {
|
|
197
|
-
|
|
198
|
-
themeManager.notifyListeners();
|
|
199
|
-
}
|
|
194
|
+
themeManager.update(next);
|
|
200
195
|
activeThemeManagers.add(themeManager);
|
|
201
196
|
const disposeParentOnChange = parentManager.onChangeTheme(() => {
|
|
202
197
|
const next2 = parentManager.getNextTheme(getThemeProps, debug);
|
|
203
198
|
if (!next2)
|
|
204
199
|
return;
|
|
205
200
|
if (themeManager.update(next2)) {
|
|
201
|
+
if (uuid && !themeManager.isTracking(uuid)) {
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
206
204
|
if (process.env.NODE_ENV === "development" && debug) {
|
|
207
205
|
console.log("Changed theme", componentName, next2, { props });
|
|
208
206
|
}
|
|
@@ -213,7 +211,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
213
211
|
activeThemeManagers.delete(themeManager);
|
|
214
212
|
disposeParentOnChange();
|
|
215
213
|
};
|
|
216
|
-
}, [
|
|
214
|
+
}, [themes, next == null ? void 0 : next.name, next == null ? void 0 : next.className, componentName, debug]);
|
|
217
215
|
}
|
|
218
216
|
return {
|
|
219
217
|
...parentManager && {
|
|
@@ -221,6 +219,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
221
219
|
theme: parentManager.theme
|
|
222
220
|
},
|
|
223
221
|
...next,
|
|
222
|
+
className: next.className === parentManager.className ? void 0 : next.className,
|
|
224
223
|
themes,
|
|
225
224
|
themeManager
|
|
226
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,9 +66,10 @@ 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;
|
|
72
|
+
this.notifyListeners();
|
|
68
73
|
return true;
|
|
69
74
|
}
|
|
70
75
|
getNextTheme(props = {}, debug) {
|
|
@@ -94,7 +99,7 @@ class ThemeManager {
|
|
|
94
99
|
return {
|
|
95
100
|
name: this.name,
|
|
96
101
|
theme: this.theme,
|
|
97
|
-
className:
|
|
102
|
+
className: this.className
|
|
98
103
|
};
|
|
99
104
|
}
|
|
100
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,23 +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
|
-
let didUpdate = false;
|
|
168
|
-
if ((next == null ? void 0 : next.name) !== themeManager.name || (next == null ? void 0 : next.className) !== themeManager.className) {
|
|
169
|
-
didUpdate = themeManager.update(next);
|
|
170
|
-
}
|
|
171
168
|
if (!isSSR) {
|
|
172
169
|
useLayoutEffect(() => {
|
|
173
|
-
|
|
174
|
-
themeManager.notifyListeners();
|
|
175
|
-
}
|
|
170
|
+
themeManager.update(next);
|
|
176
171
|
activeThemeManagers.add(themeManager);
|
|
177
172
|
const disposeParentOnChange = parentManager.onChangeTheme(() => {
|
|
178
173
|
const next2 = parentManager.getNextTheme(getThemeProps, debug);
|
|
179
174
|
if (!next2)
|
|
180
175
|
return;
|
|
181
176
|
if (themeManager.update(next2)) {
|
|
177
|
+
if (uuid && !themeManager.isTracking(uuid)) {
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
182
180
|
if (process.env.NODE_ENV === "development" && debug) {
|
|
183
181
|
console.log("Changed theme", componentName, next2, { props });
|
|
184
182
|
}
|
|
@@ -189,7 +187,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
189
187
|
activeThemeManagers.delete(themeManager);
|
|
190
188
|
disposeParentOnChange();
|
|
191
189
|
};
|
|
192
|
-
}, [
|
|
190
|
+
}, [themes, next == null ? void 0 : next.name, next == null ? void 0 : next.className, componentName, debug]);
|
|
193
191
|
}
|
|
194
192
|
return {
|
|
195
193
|
...parentManager && {
|
|
@@ -197,6 +195,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
|
|
|
197
195
|
theme: parentManager.theme
|
|
198
196
|
},
|
|
199
197
|
...next,
|
|
198
|
+
className: next.className === parentManager.className ? void 0 : next.className,
|
|
200
199
|
themes,
|
|
201
200
|
themeManager
|
|
202
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,7 +43,7 @@
|
|
|
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
49
|
"esbuild": "^0.15.6",
|
|
@@ -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,9 +97,10 @@ 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
|
|
103
|
+
this.notifyListeners()
|
|
99
104
|
return true
|
|
100
105
|
}
|
|
101
106
|
|
|
@@ -136,7 +141,7 @@ export class ThemeManager {
|
|
|
136
141
|
return {
|
|
137
142
|
name: this.name,
|
|
138
143
|
theme: this.theme,
|
|
139
|
-
className:
|
|
144
|
+
className: this.className,
|
|
140
145
|
}
|
|
141
146
|
}
|
|
142
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,20 +233,12 @@ 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
|
-
let didUpdate = false
|
|
237
|
-
if (next?.name !== themeManager.name || next?.className !== themeManager.className) {
|
|
238
|
-
didUpdate = themeManager.update(next)
|
|
239
|
-
}
|
|
240
|
-
|
|
241
239
|
if (!isSSR) {
|
|
242
240
|
useLayoutEffect(() => {
|
|
243
|
-
|
|
244
|
-
themeManager.notifyListeners()
|
|
245
|
-
}
|
|
241
|
+
themeManager.update(next)
|
|
246
242
|
|
|
247
243
|
activeThemeManagers.add(themeManager)
|
|
248
244
|
|
|
@@ -250,6 +246,10 @@ export const useChangeThemeEffect = (
|
|
|
250
246
|
const next = parentManager.getNextTheme(getThemeProps, debug)
|
|
251
247
|
if (!next) return
|
|
252
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
|
+
}
|
|
253
253
|
if (process.env.NODE_ENV === 'development' && debug) {
|
|
254
254
|
// eslint-disable-next-line no-console
|
|
255
255
|
console.log('Changed theme', componentName, next, { props })
|
|
@@ -263,7 +263,7 @@ export const useChangeThemeEffect = (
|
|
|
263
263
|
disposeParentOnChange()
|
|
264
264
|
}
|
|
265
265
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
266
|
-
}, [
|
|
266
|
+
}, [themes, next?.name, next?.className, componentName, debug])
|
|
267
267
|
}
|
|
268
268
|
|
|
269
269
|
return {
|
|
@@ -272,6 +272,7 @@ export const useChangeThemeEffect = (
|
|
|
272
272
|
theme: parentManager.theme,
|
|
273
273
|
}),
|
|
274
274
|
...next,
|
|
275
|
+
className: next.className === parentManager.className ? undefined : next.className,
|
|
275
276
|
themes,
|
|
276
277
|
themeManager,
|
|
277
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;
|