@tamagui/core 1.0.1-rc.12 → 1.0.1-rc.14
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.
|
@@ -51,20 +51,13 @@ const useTheme = (props = emptyProps) => {
|
|
|
51
51
|
const state = (0, import_useServerHooks.useServerRef)();
|
|
52
52
|
if (import_constants.isClient && !state.current) {
|
|
53
53
|
state.current = {
|
|
54
|
-
keys: /* @__PURE__ */ new Set()
|
|
55
|
-
isRendering: true
|
|
54
|
+
keys: /* @__PURE__ */ new Set()
|
|
56
55
|
};
|
|
57
56
|
}
|
|
58
|
-
if (import_constants.isClient) {
|
|
59
|
-
state.current.isRendering = true;
|
|
60
|
-
(0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
61
|
-
state.current.isRendering = false;
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
57
|
const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(
|
|
65
58
|
props,
|
|
66
59
|
false,
|
|
67
|
-
import_constants.isClient ? () => state.current.
|
|
60
|
+
import_constants.isClient ? () => state.current.keys.size === 0 : void 0
|
|
68
61
|
);
|
|
69
62
|
if (process.env.NODE_ENV === "development") {
|
|
70
63
|
if (import_constants.isWeb && isNewTheme && className === ((_a = themeManager == null ? void 0 : themeManager.parentManager) == null ? void 0 : _a.state.className)) {
|
|
@@ -133,12 +126,11 @@ function getThemeProxied({
|
|
|
133
126
|
return theme[key];
|
|
134
127
|
}
|
|
135
128
|
const val = themeManager.getValue(key);
|
|
136
|
-
if (val) {
|
|
129
|
+
if (val && state) {
|
|
137
130
|
if (import_constants.isClient) {
|
|
138
131
|
return new Proxy(val, {
|
|
139
132
|
get(_2, subkey) {
|
|
140
|
-
|
|
141
|
-
if (subkey === "val" && ((_a = state == null ? void 0 : state.current) == null ? void 0 : _a.isRendering)) {
|
|
133
|
+
if (subkey === "val") {
|
|
142
134
|
state.current.keys.add(key);
|
|
143
135
|
}
|
|
144
136
|
return Reflect.get(val, subkey);
|
|
@@ -155,7 +147,7 @@ const GetIsNewTheme = Symbol();
|
|
|
155
147
|
const getThemeManager = (theme) => theme == null ? void 0 : theme[GetThemeManager];
|
|
156
148
|
const getThemeIsNewTheme = (theme) => theme == null ? void 0 : theme[GetIsNewTheme];
|
|
157
149
|
const activeThemeManagers = /* @__PURE__ */ new Set();
|
|
158
|
-
const useChangeThemeEffect = (props, root = false,
|
|
150
|
+
const useChangeThemeEffect = (props, root = false, disableUpdate) => {
|
|
159
151
|
if (import_constants.isRSC) {
|
|
160
152
|
return {
|
|
161
153
|
...createState().state,
|
|
@@ -238,7 +230,7 @@ const useChangeThemeEffect = (props, root = false, shouldUpdate) => {
|
|
|
238
230
|
};
|
|
239
231
|
}
|
|
240
232
|
function updateState() {
|
|
241
|
-
if (
|
|
233
|
+
if (disableUpdate == null ? void 0 : disableUpdate()) {
|
|
242
234
|
return;
|
|
243
235
|
}
|
|
244
236
|
const next = themeManager.getState(props, parentManager);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-console */\nimport {\n isClient,\n isRSC,\n isServer,\n isWeb,\n useIsomorphicLayoutEffect,\n} from '@tamagui/constants'\nimport { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n ThemeManager,\n ThemeManagerState,\n hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { ThemeParsed, ThemeProps } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport type ChangedThemeResponse = {\n themeManager: ThemeManager | null\n name: string\n isNewTheme?: boolean\n theme?: ThemeParsed | null\n className?: string\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\n const config = getConfig()\n const name = Object.keys(config.themes)[0]\n return getThemeProxied({\n theme: config.themes[name],\n name,\n })\n}\n\ninterface UseThemeState {\n keys: Set<string>\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAMO;AACP,mBAAkF;AAElF,oBAA0B;AAC1B,wBAA2B;AAC3B,yBAA4B;AAC5B,0BAIO;AACP,iCAAoC;AAEpC,+BAAkC;AAClC,4BAA6B;AAU7B,MAAM,aAAa,EAAE,MAAM,KAAK;AAEhC,SAAS,yBAAyB;AAChC,QAAM,aAAS,yBAAU;AACzB,QAAM,OAAO,OAAO,KAAK,OAAO,MAAM,EAAE;AACxC,SAAO,gBAAgB;AAAA,IACrB,OAAO,OAAO,OAAO;AAAA,IACrB;AAAA,EACF,CAAC;AACH;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-console */\nimport {\n isClient,\n isRSC,\n isServer,\n isWeb,\n useIsomorphicLayoutEffect,\n} from '@tamagui/constants'\nimport { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n ThemeManager,\n ThemeManagerState,\n hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { ThemeParsed, ThemeProps } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport type ChangedThemeResponse = {\n themeManager: ThemeManager | null\n name: string\n isNewTheme?: boolean\n theme?: ThemeParsed | null\n className?: string\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\n const config = getConfig()\n const name = Object.keys(config.themes)[0]\n return getThemeProxied({\n theme: config.themes[name],\n name,\n })\n}\n\ninterface UseThemeState {\n keys: Set<string>\n}\n\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n if (isRSC) {\n return getDefaultThemeProxied()\n }\n\n const state = useServerRef() as React.MutableRefObject<UseThemeState>\n if (isClient && !state.current) {\n state.current = {\n keys: new Set(),\n }\n }\n\n const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(\n props,\n false,\n isClient ? () => state.current.keys.size === 0 : undefined\n )\n\n if (process.env.NODE_ENV === 'development') {\n // ensure we aren't creating too many ThemeManagers\n if (\n isWeb &&\n isNewTheme &&\n className === themeManager?.parentManager?.state.className\n ) {\n console.error('Should always change, duplicating ThemeMananger bug', themeManager)\n }\n if (props.debug === 'verbose') {\n console.groupCollapsed(' \uD83D\uDD39 useTheme =>', name)\n const logs = { ...props, name, className, ...(isDevTools && { theme }) }\n for (const key in logs) {\n console.log(' ', key, logs[key])\n }\n console.groupEnd()\n }\n }\n\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('No theme found', name, props, themeManager)\n }\n return getDefaultThemeProxied()\n }\n\n return useMemo(() => {\n return getThemeProxied({\n isNewTheme,\n theme,\n name,\n className,\n themeManager,\n state,\n })\n }, [theme, isNewTheme, name, className, themeManager])\n}\n\nfunction getThemeProxied({\n theme,\n name,\n className,\n themeManager,\n isNewTheme,\n state,\n}: {\n theme: any\n name: string\n className?: string\n themeManager?: ThemeManager | null\n isNewTheme?: boolean\n state?: React.RefObject<UseThemeState>\n}) {\n return createProxy(theme, {\n has(_, key) {\n if (typeof key === 'string') {\n if (key[0] === '$') key = key.slice(1)\n return themeManager?.allKeys.has(key)\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n } else if (key === GetThemeManager) {\n return themeManager\n } else if (key === GetIsNewTheme) {\n return isNewTheme\n } else if (key === 'name') {\n return name\n } else if (key === 'className') {\n return className\n } else if (\n !name ||\n key === '__proto__' ||\n typeof key === 'symbol' ||\n key === '$typeof'\n ) {\n return Reflect.get(_, key)\n }\n // auto convert variables to plain\n if (key[0] === '$') key = key.slice(1)\n if (!themeManager) {\n return theme[key]\n }\n const val = themeManager.getValue(key)\n if (val && state) {\n if (isClient) {\n return new Proxy(val as any, {\n get(_, subkey) {\n if (subkey === 'val') {\n state.current!.keys.add(key as any)\n }\n return Reflect.get(val, subkey)\n },\n })\n }\n }\n return val\n },\n })\n}\n\nconst GetThemeManager = Symbol()\nconst GetIsNewTheme = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined =>\n theme?.[GetThemeManager]\nexport const getThemeIsNewTheme = (theme: any): ThemeManager | undefined =>\n theme?.[GetIsNewTheme]\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n props: ThemeProps,\n root = false,\n disableUpdate?: () => boolean\n): ChangedThemeResponse => {\n if (isRSC) {\n // we need context working for this to work well\n return {\n ...createState().state,\n themeManager: null,\n }\n }\n const parentManager = useContext(ThemeManagerContext)\n\n const {\n debug,\n // @ts-expect-error internal use only\n disable,\n } = props\n\n if (disable) {\n if (!parentManager) throw new Error('Disable topmost')\n return {\n ...parentManager.state,\n isNewTheme: false,\n themeManager: parentManager,\n }\n }\n\n type State = {\n isNewTheme: boolean\n state: ThemeManagerState\n themeManager: ThemeManager\n mounted?: boolean\n }\n\n const [themeState, setThemeState] = useState<State>(createState)\n const { isNewTheme, state, themeManager, mounted } = themeState\n\n if (!isServer) {\n useEffect(() => {\n if (disable) return\n // SSR safe inverse (because server can't know prefers scheme)\n // could be done through fancy selectors like how we do prefers-media\n // but may be a bit of explosion of selectors\n if (props.inverse && !mounted) {\n setThemeState({ ...themeState, mounted: true })\n return\n }\n activeThemeManagers.add(themeManager)\n const disposeChangeListener = parentManager?.onChangeTheme(() => {\n if (!(isNewTheme || isWeb)) {\n setThemeState({\n ...themeState,\n state: { ...themeManager.state },\n isNewTheme: false,\n })\n } else {\n updateState()\n }\n })\n return () => {\n activeThemeManagers.delete(themeManager)\n disposeChangeListener?.()\n }\n }, [disable, state, isNewTheme, debug])\n }\n\n const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)\n const shouldReturnParentState = hasNoThemeUpdatingProps(props) || isInversingOnMount\n\n if (shouldReturnParentState) {\n if (!parentManager) throw 'impossible'\n // prettier-ignore\n if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('useTheme hasNoThemeUpdatingProps', parentManager.state.name, 'isInversingOnMount', isInversingOnMount)\n return {\n ...parentManager.state,\n className: isInversingOnMount ? '' : parentManager.state.className,\n themeManager: parentManager,\n isNewTheme: false,\n }\n }\n\n // run inline in render\n updateState()\n\n return {\n ...state,\n isNewTheme,\n themeManager,\n }\n\n function createState(prev?: State) {\n // returns previous theme manager if no change\n const _ = new ThemeManager(props, root ? 'root' : parentManager)\n const isNewTheme = _ !== parentManager\n // prettier-ignore\n if (process.env.NODE_ENV === 'development' && debug) [console.groupCollapsed('useTheme create() isNewTheme', isNewTheme),console.log('parent.state.name', parentManager?.state.name, '\\n', 'props', props, '\\n', isClient ? parentManager : '', 'getState', isNewTheme && isClient ? _.getState(props) : '', '\\n', 'state', isClient ? { ..._.state } : ''),console.groupEnd()]\n // only inverse relies on this for ssr\n const mounted = !props.inverse ? true : root || prev?.mounted\n return {\n // ThemeManager returns parentManager if no change\n isNewTheme,\n state: { ..._.state },\n themeManager: _,\n mounted,\n }\n }\n\n function updateState() {\n if (disableUpdate?.()) {\n return\n }\n const next = themeManager.getState(props, parentManager)\n const shouldChange = themeManager.getStateShouldChange(\n next,\n isNewTheme ? state : null\n )\n if (shouldChange) {\n setThemeState(createState)\n } else {\n if (!next && parentManager?.state.name !== state.name) {\n // were changing back to parent state\n setThemeState(createState)\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_", "isNewTheme", "mounted"]
|
|
7
7
|
}
|
|
@@ -2,8 +2,7 @@ import {
|
|
|
2
2
|
isClient,
|
|
3
3
|
isRSC,
|
|
4
4
|
isServer,
|
|
5
|
-
isWeb
|
|
6
|
-
useIsomorphicLayoutEffect
|
|
5
|
+
isWeb
|
|
7
6
|
} from "@tamagui/constants";
|
|
8
7
|
import { useContext, useEffect, useMemo, useState } from "react";
|
|
9
8
|
import { getConfig } from "../config";
|
|
@@ -33,20 +32,13 @@ const useTheme = (props = emptyProps) => {
|
|
|
33
32
|
const state = useServerRef();
|
|
34
33
|
if (isClient && !state.current) {
|
|
35
34
|
state.current = {
|
|
36
|
-
keys: /* @__PURE__ */ new Set()
|
|
37
|
-
isRendering: true
|
|
35
|
+
keys: /* @__PURE__ */ new Set()
|
|
38
36
|
};
|
|
39
37
|
}
|
|
40
|
-
if (isClient) {
|
|
41
|
-
state.current.isRendering = true;
|
|
42
|
-
useIsomorphicLayoutEffect(() => {
|
|
43
|
-
state.current.isRendering = false;
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
38
|
const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(
|
|
47
39
|
props,
|
|
48
40
|
false,
|
|
49
|
-
isClient ? () => state.current.
|
|
41
|
+
isClient ? () => state.current.keys.size === 0 : void 0
|
|
50
42
|
);
|
|
51
43
|
if (process.env.NODE_ENV === "development") {
|
|
52
44
|
if (isWeb && isNewTheme && className === ((_a = themeManager == null ? void 0 : themeManager.parentManager) == null ? void 0 : _a.state.className)) {
|
|
@@ -115,12 +107,11 @@ function getThemeProxied({
|
|
|
115
107
|
return theme[key];
|
|
116
108
|
}
|
|
117
109
|
const val = themeManager.getValue(key);
|
|
118
|
-
if (val) {
|
|
110
|
+
if (val && state) {
|
|
119
111
|
if (isClient) {
|
|
120
112
|
return new Proxy(val, {
|
|
121
113
|
get(_2, subkey) {
|
|
122
|
-
|
|
123
|
-
if (subkey === "val" && ((_a = state == null ? void 0 : state.current) == null ? void 0 : _a.isRendering)) {
|
|
114
|
+
if (subkey === "val") {
|
|
124
115
|
state.current.keys.add(key);
|
|
125
116
|
}
|
|
126
117
|
return Reflect.get(val, subkey);
|
|
@@ -137,7 +128,7 @@ const GetIsNewTheme = Symbol();
|
|
|
137
128
|
const getThemeManager = (theme) => theme == null ? void 0 : theme[GetThemeManager];
|
|
138
129
|
const getThemeIsNewTheme = (theme) => theme == null ? void 0 : theme[GetIsNewTheme];
|
|
139
130
|
const activeThemeManagers = /* @__PURE__ */ new Set();
|
|
140
|
-
const useChangeThemeEffect = (props, root = false,
|
|
131
|
+
const useChangeThemeEffect = (props, root = false, disableUpdate) => {
|
|
141
132
|
if (isRSC) {
|
|
142
133
|
return {
|
|
143
134
|
...createState().state,
|
|
@@ -220,7 +211,7 @@ const useChangeThemeEffect = (props, root = false, shouldUpdate) => {
|
|
|
220
211
|
};
|
|
221
212
|
}
|
|
222
213
|
function updateState() {
|
|
223
|
-
if (
|
|
214
|
+
if (disableUpdate == null ? void 0 : disableUpdate()) {
|
|
224
215
|
return;
|
|
225
216
|
}
|
|
226
217
|
const next = themeManager.getState(props, parentManager);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-console */\nimport {\n isClient,\n isRSC,\n isServer,\n isWeb,\n useIsomorphicLayoutEffect,\n} from '@tamagui/constants'\nimport { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n ThemeManager,\n ThemeManagerState,\n hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { ThemeParsed, ThemeProps } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport type ChangedThemeResponse = {\n themeManager: ThemeManager | null\n name: string\n isNewTheme?: boolean\n theme?: ThemeParsed | null\n className?: string\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\n const config = getConfig()\n const name = Object.keys(config.themes)[0]\n return getThemeProxied({\n theme: config.themes[name],\n name,\n })\n}\n\ninterface UseThemeState {\n keys: Set<string>\n
|
|
5
|
-
"mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-console */\nimport {\n isClient,\n isRSC,\n isServer,\n isWeb,\n useIsomorphicLayoutEffect,\n} from '@tamagui/constants'\nimport { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n ThemeManager,\n ThemeManagerState,\n hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { ThemeParsed, ThemeProps } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport type ChangedThemeResponse = {\n themeManager: ThemeManager | null\n name: string\n isNewTheme?: boolean\n theme?: ThemeParsed | null\n className?: string\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\n const config = getConfig()\n const name = Object.keys(config.themes)[0]\n return getThemeProxied({\n theme: config.themes[name],\n name,\n })\n}\n\ninterface UseThemeState {\n keys: Set<string>\n}\n\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n if (isRSC) {\n return getDefaultThemeProxied()\n }\n\n const state = useServerRef() as React.MutableRefObject<UseThemeState>\n if (isClient && !state.current) {\n state.current = {\n keys: new Set(),\n }\n }\n\n const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(\n props,\n false,\n isClient ? () => state.current.keys.size === 0 : undefined\n )\n\n if (process.env.NODE_ENV === 'development') {\n // ensure we aren't creating too many ThemeManagers\n if (\n isWeb &&\n isNewTheme &&\n className === themeManager?.parentManager?.state.className\n ) {\n console.error('Should always change, duplicating ThemeMananger bug', themeManager)\n }\n if (props.debug === 'verbose') {\n console.groupCollapsed(' \uD83D\uDD39 useTheme =>', name)\n const logs = { ...props, name, className, ...(isDevTools && { theme }) }\n for (const key in logs) {\n console.log(' ', key, logs[key])\n }\n console.groupEnd()\n }\n }\n\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('No theme found', name, props, themeManager)\n }\n return getDefaultThemeProxied()\n }\n\n return useMemo(() => {\n return getThemeProxied({\n isNewTheme,\n theme,\n name,\n className,\n themeManager,\n state,\n })\n }, [theme, isNewTheme, name, className, themeManager])\n}\n\nfunction getThemeProxied({\n theme,\n name,\n className,\n themeManager,\n isNewTheme,\n state,\n}: {\n theme: any\n name: string\n className?: string\n themeManager?: ThemeManager | null\n isNewTheme?: boolean\n state?: React.RefObject<UseThemeState>\n}) {\n return createProxy(theme, {\n has(_, key) {\n if (typeof key === 'string') {\n if (key[0] === '$') key = key.slice(1)\n return themeManager?.allKeys.has(key)\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n } else if (key === GetThemeManager) {\n return themeManager\n } else if (key === GetIsNewTheme) {\n return isNewTheme\n } else if (key === 'name') {\n return name\n } else if (key === 'className') {\n return className\n } else if (\n !name ||\n key === '__proto__' ||\n typeof key === 'symbol' ||\n key === '$typeof'\n ) {\n return Reflect.get(_, key)\n }\n // auto convert variables to plain\n if (key[0] === '$') key = key.slice(1)\n if (!themeManager) {\n return theme[key]\n }\n const val = themeManager.getValue(key)\n if (val && state) {\n if (isClient) {\n return new Proxy(val as any, {\n get(_, subkey) {\n if (subkey === 'val') {\n state.current!.keys.add(key as any)\n }\n return Reflect.get(val, subkey)\n },\n })\n }\n }\n return val\n },\n })\n}\n\nconst GetThemeManager = Symbol()\nconst GetIsNewTheme = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined =>\n theme?.[GetThemeManager]\nexport const getThemeIsNewTheme = (theme: any): ThemeManager | undefined =>\n theme?.[GetIsNewTheme]\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n props: ThemeProps,\n root = false,\n disableUpdate?: () => boolean\n): ChangedThemeResponse => {\n if (isRSC) {\n // we need context working for this to work well\n return {\n ...createState().state,\n themeManager: null,\n }\n }\n const parentManager = useContext(ThemeManagerContext)\n\n const {\n debug,\n // @ts-expect-error internal use only\n disable,\n } = props\n\n if (disable) {\n if (!parentManager) throw new Error('Disable topmost')\n return {\n ...parentManager.state,\n isNewTheme: false,\n themeManager: parentManager,\n }\n }\n\n type State = {\n isNewTheme: boolean\n state: ThemeManagerState\n themeManager: ThemeManager\n mounted?: boolean\n }\n\n const [themeState, setThemeState] = useState<State>(createState)\n const { isNewTheme, state, themeManager, mounted } = themeState\n\n if (!isServer) {\n useEffect(() => {\n if (disable) return\n // SSR safe inverse (because server can't know prefers scheme)\n // could be done through fancy selectors like how we do prefers-media\n // but may be a bit of explosion of selectors\n if (props.inverse && !mounted) {\n setThemeState({ ...themeState, mounted: true })\n return\n }\n activeThemeManagers.add(themeManager)\n const disposeChangeListener = parentManager?.onChangeTheme(() => {\n if (!(isNewTheme || isWeb)) {\n setThemeState({\n ...themeState,\n state: { ...themeManager.state },\n isNewTheme: false,\n })\n } else {\n updateState()\n }\n })\n return () => {\n activeThemeManagers.delete(themeManager)\n disposeChangeListener?.()\n }\n }, [disable, state, isNewTheme, debug])\n }\n\n const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)\n const shouldReturnParentState = hasNoThemeUpdatingProps(props) || isInversingOnMount\n\n if (shouldReturnParentState) {\n if (!parentManager) throw 'impossible'\n // prettier-ignore\n if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('useTheme hasNoThemeUpdatingProps', parentManager.state.name, 'isInversingOnMount', isInversingOnMount)\n return {\n ...parentManager.state,\n className: isInversingOnMount ? '' : parentManager.state.className,\n themeManager: parentManager,\n isNewTheme: false,\n }\n }\n\n // run inline in render\n updateState()\n\n return {\n ...state,\n isNewTheme,\n themeManager,\n }\n\n function createState(prev?: State) {\n // returns previous theme manager if no change\n const _ = new ThemeManager(props, root ? 'root' : parentManager)\n const isNewTheme = _ !== parentManager\n // prettier-ignore\n if (process.env.NODE_ENV === 'development' && debug) [console.groupCollapsed('useTheme create() isNewTheme', isNewTheme),console.log('parent.state.name', parentManager?.state.name, '\\n', 'props', props, '\\n', isClient ? parentManager : '', 'getState', isNewTheme && isClient ? _.getState(props) : '', '\\n', 'state', isClient ? { ..._.state } : ''),console.groupEnd()]\n // only inverse relies on this for ssr\n const mounted = !props.inverse ? true : root || prev?.mounted\n return {\n // ThemeManager returns parentManager if no change\n isNewTheme,\n state: { ..._.state },\n themeManager: _,\n mounted,\n }\n }\n\n function updateState() {\n if (disableUpdate?.()) {\n return\n }\n const next = themeManager.getState(props, parentManager)\n const shouldChange = themeManager.getStateShouldChange(\n next,\n isNewTheme ? state : null\n )\n if (shouldChange) {\n setThemeState(createState)\n } else {\n if (!next && parentManager?.state.name !== state.name) {\n // were changing back to parent state\n setThemeState(createState)\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_", "isNewTheme", "mounted"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.1-rc.
|
|
3
|
+
"version": "1.0.1-rc.14",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
"reset.css"
|
|
29
29
|
],
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@tamagui/compose-refs": "^1.0.1-rc.
|
|
32
|
-
"@tamagui/constants": "^1.0.1-rc.
|
|
33
|
-
"@tamagui/helpers": "^1.0.1-rc.
|
|
34
|
-
"@tamagui/react-native-use-pressable": "^1.0.1-rc.
|
|
35
|
-
"@tamagui/react-native-use-responder-events": "^1.0.1-rc.
|
|
36
|
-
"@tamagui/use-did-finish-ssr": "^1.0.1-rc.
|
|
37
|
-
"@tamagui/use-event": "^1.0.1-rc.
|
|
38
|
-
"@tamagui/use-force-update": "^1.0.1-rc.
|
|
31
|
+
"@tamagui/compose-refs": "^1.0.1-rc.14",
|
|
32
|
+
"@tamagui/constants": "^1.0.1-rc.14",
|
|
33
|
+
"@tamagui/helpers": "^1.0.1-rc.14",
|
|
34
|
+
"@tamagui/react-native-use-pressable": "^1.0.1-rc.14",
|
|
35
|
+
"@tamagui/react-native-use-responder-events": "^1.0.1-rc.14",
|
|
36
|
+
"@tamagui/use-did-finish-ssr": "^1.0.1-rc.14",
|
|
37
|
+
"@tamagui/use-event": "^1.0.1-rc.14",
|
|
38
|
+
"@tamagui/use-force-update": "^1.0.1-rc.14",
|
|
39
39
|
"normalize-css-color": "^1.0.2"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react-dom": "^18.2.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@tamagui/build": "^1.0.1-rc.
|
|
46
|
+
"@tamagui/build": "^1.0.1-rc.14",
|
|
47
47
|
"@testing-library/react": "^13.4.0",
|
|
48
48
|
"csstype": "^3.0.10",
|
|
49
49
|
"react": "^18.2.0",
|
package/src/hooks/useTheme.tsx
CHANGED
|
@@ -42,7 +42,6 @@ function getDefaultThemeProxied() {
|
|
|
42
42
|
|
|
43
43
|
interface UseThemeState {
|
|
44
44
|
keys: Set<string>
|
|
45
|
-
isRendering: boolean
|
|
46
45
|
}
|
|
47
46
|
|
|
48
47
|
export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
|
|
@@ -54,22 +53,13 @@ export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
|
|
|
54
53
|
if (isClient && !state.current) {
|
|
55
54
|
state.current = {
|
|
56
55
|
keys: new Set(),
|
|
57
|
-
isRendering: true,
|
|
58
56
|
}
|
|
59
57
|
}
|
|
60
58
|
|
|
61
|
-
// track key usage
|
|
62
|
-
if (isClient) {
|
|
63
|
-
state.current.isRendering = true
|
|
64
|
-
useIsomorphicLayoutEffect(() => {
|
|
65
|
-
state.current.isRendering = false
|
|
66
|
-
})
|
|
67
|
-
}
|
|
68
|
-
|
|
69
59
|
const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(
|
|
70
60
|
props,
|
|
71
61
|
false,
|
|
72
|
-
isClient ? () => state.current.
|
|
62
|
+
isClient ? () => state.current.keys.size === 0 : undefined
|
|
73
63
|
)
|
|
74
64
|
|
|
75
65
|
if (process.env.NODE_ENV === 'development') {
|
|
@@ -158,12 +148,12 @@ function getThemeProxied({
|
|
|
158
148
|
return theme[key]
|
|
159
149
|
}
|
|
160
150
|
const val = themeManager.getValue(key)
|
|
161
|
-
if (val) {
|
|
151
|
+
if (val && state) {
|
|
162
152
|
if (isClient) {
|
|
163
153
|
return new Proxy(val as any, {
|
|
164
154
|
get(_, subkey) {
|
|
165
|
-
if (subkey === 'val'
|
|
166
|
-
state.current
|
|
155
|
+
if (subkey === 'val') {
|
|
156
|
+
state.current!.keys.add(key as any)
|
|
167
157
|
}
|
|
168
158
|
return Reflect.get(val, subkey)
|
|
169
159
|
},
|
|
@@ -188,7 +178,7 @@ export const activeThemeManagers = new Set<ThemeManager>()
|
|
|
188
178
|
export const useChangeThemeEffect = (
|
|
189
179
|
props: ThemeProps,
|
|
190
180
|
root = false,
|
|
191
|
-
|
|
181
|
+
disableUpdate?: () => boolean
|
|
192
182
|
): ChangedThemeResponse => {
|
|
193
183
|
if (isRSC) {
|
|
194
184
|
// we need context working for this to work well
|
|
@@ -280,7 +270,6 @@ export const useChangeThemeEffect = (
|
|
|
280
270
|
function createState(prev?: State) {
|
|
281
271
|
// returns previous theme manager if no change
|
|
282
272
|
const _ = new ThemeManager(props, root ? 'root' : parentManager)
|
|
283
|
-
|
|
284
273
|
const isNewTheme = _ !== parentManager
|
|
285
274
|
// prettier-ignore
|
|
286
275
|
if (process.env.NODE_ENV === 'development' && debug) [console.groupCollapsed('useTheme create() isNewTheme', isNewTheme),console.log('parent.state.name', parentManager?.state.name, '\n', 'props', props, '\n', isClient ? parentManager : '', 'getState', isNewTheme && isClient ? _.getState(props) : '', '\n', 'state', isClient ? { ..._.state } : ''),console.groupEnd()]
|
|
@@ -296,10 +285,9 @@ export const useChangeThemeEffect = (
|
|
|
296
285
|
}
|
|
297
286
|
|
|
298
287
|
function updateState() {
|
|
299
|
-
if (
|
|
288
|
+
if (disableUpdate?.()) {
|
|
300
289
|
return
|
|
301
290
|
}
|
|
302
|
-
|
|
303
291
|
const next = themeManager.getState(props, parentManager)
|
|
304
292
|
const shouldChange = themeManager.getStateShouldChange(
|
|
305
293
|
next,
|
|
@@ -11,5 +11,5 @@ export declare const useTheme: (props?: ThemeProps) => ThemeParsed;
|
|
|
11
11
|
export declare const getThemeManager: (theme: any) => ThemeManager | undefined;
|
|
12
12
|
export declare const getThemeIsNewTheme: (theme: any) => ThemeManager | undefined;
|
|
13
13
|
export declare const activeThemeManagers: Set<ThemeManager>;
|
|
14
|
-
export declare const useChangeThemeEffect: (props: ThemeProps, root?: boolean,
|
|
14
|
+
export declare const useChangeThemeEffect: (props: ThemeProps, root?: boolean, disableUpdate?: () => boolean) => ChangedThemeResponse;
|
|
15
15
|
//# sourceMappingURL=useTheme.d.ts.map
|