@tamagui/core 1.0.1-beta.158 → 1.0.1-beta.161
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/createComponent.js +1 -1
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/ThemeManager.js +9 -4
- package/dist/cjs/helpers/ThemeManager.js.map +2 -2
- package/dist/cjs/helpers/getFont.js +3 -1
- package/dist/cjs/helpers/getFont.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +19 -20
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/styled.js.map +1 -1
- package/dist/cjs/views/Text.js +1 -1
- package/dist/cjs/views/Text.js.map +1 -1
- package/dist/esm/createComponent.js +1 -1
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/helpers/ThemeManager.js +9 -4
- package/dist/esm/helpers/ThemeManager.js.map +2 -2
- package/dist/esm/helpers/getFont.js +3 -1
- package/dist/esm/helpers/getFont.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +19 -20
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/views/Text.js +1 -1
- package/dist/esm/views/Text.js.map +1 -1
- package/package.json +10 -10
- package/src/createComponent.tsx +2 -2
- package/src/helpers/ThemeManager.tsx +8 -3
- package/src/helpers/getFont.tsx +4 -1
- package/src/hooks/useTheme.tsx +25 -24
- package/src/styled.tsx +1 -1
- package/src/views/Text.tsx +1 -1
- package/types/helpers/ThemeManager.d.ts +3 -2
- package/types/hooks/useTheme.d.ts +1 -1
|
@@ -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
|
}
|
|
@@ -4,7 +4,9 @@ const getFont = (val = "$4", { fonts, theme, props }) => {
|
|
|
4
4
|
const family = getVariableValue(props.fontFamily) || "$body";
|
|
5
5
|
const font = fonts[family] || fonts["$body"];
|
|
6
6
|
if (!font) {
|
|
7
|
-
|
|
7
|
+
if (process.env.NODE_ENV === "development") {
|
|
8
|
+
console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
|
|
9
|
+
}
|
|
8
10
|
return {};
|
|
9
11
|
}
|
|
10
12
|
const fontFamily = font.family;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getFont.tsx"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-console */\nimport { getVariableValue } from '../createVariable'\nimport { FontSizeTokens, TextProps, VariantSpreadFunction } from '../types'\n\nexport const getFont: VariantSpreadFunction<TextProps, FontSizeTokens> = (\n val = '$4',\n { fonts, theme, props }\n) => {\n const family = getVariableValue(props.fontFamily) || '$body'\n const font = fonts[family] || fonts['$body']\n if (!font) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('\u26A0\uFE0F no font found', { family, fontTokens: Object.keys(fonts), val })\n }\n return {} as any\n }\n const fontFamily = font.family\n const fontSize = props.fontSize || font.size[val]\n const lineHeight = props.lineHeight || font.lineHeight[val]\n const fontWeight = props.fontWeight || font.weight[val]\n const letterSpacing = props.letterSpacing || font.letterSpacing[val]\n const fontStyle = props.fontStyle || font.style?.[val]\n const textTransform = props.textTransform || font.transform?.[val]\n const color = props.color || font.color?.[val] || theme.color\n const style = {\n color,\n fontStyle,\n textTransform,\n fontFamily,\n fontWeight,\n letterSpacing,\n fontSize,\n lineHeight,\n }\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n console.groupCollapsed(' \uD83D\uDD39 getFont', val, props['fontWeight'], props['fow'])\n console.log({ style, props, font })\n console.groupEnd()\n }\n }\n return style\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,wBAAwB;AAG1B,MAAM,UAA4D,CACvE,MAAM,MACN,EAAE,OAAO,OAAO,MAAM,MACnB;AAPL;AAQE,QAAM,SAAS,iBAAiB,MAAM,UAAU,KAAK;AACrD,QAAM,OAAO,MAAM,WAAW,MAAM;AACpC,MAAI,CAAC,MAAM;AACT,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,KAAK,8BAAoB,EAAE,QAAQ,YAAY,OAAO,KAAK,KAAK,GAAG,IAAI,CAAC;AAAA,IAClF;AACA,WAAO,CAAC;AAAA,EACV;AACA,QAAM,aAAa,KAAK;AACxB,QAAM,WAAW,MAAM,YAAY,KAAK,KAAK;AAC7C,QAAM,aAAa,MAAM,cAAc,KAAK,WAAW;AACvD,QAAM,aAAa,MAAM,cAAc,KAAK,OAAO;AACnD,QAAM,gBAAgB,MAAM,iBAAiB,KAAK,cAAc;AAChE,QAAM,YAAY,MAAM,eAAa,UAAK,UAAL,mBAAa;AAClD,QAAM,gBAAgB,MAAM,mBAAiB,UAAK,cAAL,mBAAiB;AAC9D,QAAM,QAAQ,MAAM,WAAS,UAAK,UAAL,mBAAa,SAAQ,MAAM;AACxD,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,UAAU;AAClB,cAAQ,eAAe,uBAAgB,KAAK,MAAM,eAAe,MAAM,MAAM;AAC7E,cAAQ,IAAI,EAAE,OAAO,OAAO,KAAK,CAAC;AAClC,cAAQ,SAAS;AAAA,IACnB;AAAA,EACF;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
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/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n GetProps,\n GetVariantValues,\n MediaProps,\n PseudoProps,\n StaticConfig,\n StylableComponent,\n TamaguiComponent,\n TamaguiElement,\n VariantDefinitions,\n VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n name?: string\n variants?: VariantDefinitions<ParentComponent> | undefined\n defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n ParentComponent extends StylableComponent,\n Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n Component: ParentComponent,\n // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n options?: GetProps<ParentComponent> & {\n name?: string\n variants?: Variants | undefined\n // thought i had this typed, but can't get it linked\n defaultVariants?: { [key: string]: any }\n },\n staticExtractionOptions?: Partial<StaticConfig>\n) {\n const staticConfigProps = (() => {\n const parentStaticConfig =\n 'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n\n if (process.env.NODE_ENV === 'development') {\n if (parentStaticConfig?.isHOC) {\n // eslint-disable-next-line no-console\n console.warn(\n `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`\n )\n }\n }\n\n if (options) {\n const { variants, name, defaultVariants, ...defaultProps } = options\n if (defaultVariants) {\n Object.assign(defaultProps, defaultVariants)\n }\n let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)\n // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)\n if (!('staticConfig' in Component) && !isReactNativeWeb) {\n if (RNComponents.has(Component['displayName'])) {\n RNComponents.add(Component)\n isReactNativeWeb = true\n } else {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`\n )\n }\n }\n }\n const reactNativeWebComponent = isReactNativeWeb\n ? parentStaticConfig?.reactNativeWebComponent || Component\n : null\n const isTamagui = !isReactNativeWeb && !!parentStaticConfig\n const Comp = reactNativeWebComponent || (Component as any)\n const isImage = Boolean(\n staticExtractionOptions?.isImage || parentStaticConfig?.isImage || Comp === Image\n )\n const isInput = Boolean(\n staticExtractionOptions?.isInput || parentStaticConfig?.isInput || Comp === TextInput\n )\n const isText = Boolean(\n isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text\n )\n\n const conf: Partial<StaticConfig> = {\n ...staticExtractionOptions,\n ...(!isTamagui && {\n Component: Comp,\n }),\n isTamagui,\n // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n // take away the Partial<> and it's fine\n variants,\n defaultProps,\n defaultVariants,\n componentName: name,\n isReactNativeWeb,\n // for nesting multiple levels of rnw styled() need keep use the OG component\n reactNativeWebComponent,\n isInput,\n isText,\n isImage,\n }\n\n return conf\n }\n return {}\n })()\n\n const component = createComponent(staticConfigProps, Component)\n\n // get parent props without pseudos and medias so we can rebuild both with new variants\n type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n ? P\n : GetProps<ParentComponent>\n type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n type OurVariants = Variants extends void\n ? {}\n : {\n [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n ? Val\n : GetVariantValues<keyof Variants[Key]>\n }\n\n type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n type OurPropsBase = ParentPropsBase & VariantProps\n\n type Props = Variants extends void\n ? GetProps<ParentComponent>\n : // start with base props\n OurPropsBase &\n // add in media (+ pseudos nested)\n MediaProps<Partial<OurPropsBase>> &\n // add in pseudos\n PseudoProps<Partial<OurPropsBase>>\n\n return component as TamaguiComponent<\n Props,\n TamaguiElement,\n ParentPropsBase,\n ParentVariants & OurVariants\n >\n}\n\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n// variants: {\n// size: {\n// '...size': (val) => {\n// return {}\n// }\n// },\n// disabled: {\n// true: {\n// opacity: 0.5,\n// pointerEvents: 'none',\n// },\n// },\n// }\n// })\n// type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
|
|
4
|
+
"sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n GetProps,\n GetVariantValues,\n MediaProps,\n PseudoProps,\n StaticConfig,\n StylableComponent,\n TamaguiComponent,\n TamaguiElement,\n VariantDefinitions,\n VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n name?: string\n variants?: VariantDefinitions<ParentComponent> | undefined\n defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n ParentComponent extends StylableComponent,\n Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n Component: ParentComponent,\n // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n options?: GetProps<ParentComponent> & {\n name?: string\n variants?: Variants | undefined\n // thought i had this typed, but can't get it linked\n defaultVariants?: { [key: string]: any }\n },\n staticExtractionOptions?: Partial<StaticConfig>\n) {\n const staticConfigProps = (() => {\n const parentStaticConfig =\n 'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n\n if (process.env.NODE_ENV === 'development') {\n if (parentStaticConfig?.isHOC) {\n // eslint-disable-next-line no-console\n console.warn(\n `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`\n )\n }\n }\n\n if (options) {\n const { variants, name, defaultVariants, ...defaultProps } = options\n if (defaultVariants) {\n Object.assign(defaultProps, defaultVariants)\n }\n let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)\n // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)\n if (!('staticConfig' in Component) && !isReactNativeWeb) {\n if (RNComponents.has(Component['displayName'])) {\n RNComponents.add(Component)\n isReactNativeWeb = true\n } else {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`\n )\n }\n }\n }\n const reactNativeWebComponent = isReactNativeWeb\n ? parentStaticConfig?.reactNativeWebComponent || Component\n : null\n const isTamagui = !isReactNativeWeb && !!parentStaticConfig\n const Comp = reactNativeWebComponent || (Component as any)\n const isImage = Boolean(\n staticExtractionOptions?.isImage || parentStaticConfig?.isImage || Comp === Image\n )\n const isInput = Boolean(\n staticExtractionOptions?.isInput || parentStaticConfig?.isInput || Comp === TextInput\n )\n const isText = Boolean(\n isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text\n )\n\n const conf: Partial<StaticConfig> = {\n ...staticExtractionOptions,\n ...(!isTamagui && {\n Component: Comp,\n }),\n isTamagui,\n // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n // take away the Partial<> and it's fine\n variants,\n defaultProps,\n defaultVariants,\n componentName: name,\n isReactNativeWeb,\n // for nesting multiple levels of rnw styled() need keep use the OG component\n reactNativeWebComponent,\n isInput,\n isText,\n isImage,\n }\n\n return conf\n }\n return {}\n })()\n\n const component = createComponent(staticConfigProps, Component)\n\n // get parent props without pseudos and medias so we can rebuild both with new variants\n type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n ? P\n : GetProps<ParentComponent>\n type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n type OurVariants = Variants extends void\n ? {}\n : {\n [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n ? Val\n : GetVariantValues<keyof Variants[Key]>\n }\n\n type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n type OurPropsBase = ParentPropsBase & VariantProps\n\n type Props = Variants extends void\n ? GetProps<ParentComponent>\n : // start with base props\n OurPropsBase &\n // add in media (+ pseudos nested)\n MediaProps<Partial<OurPropsBase>> &\n // add in pseudos\n PseudoProps<Partial<OurPropsBase>>\n\n return component as TamaguiComponent<\n Props,\n TamaguiElement,\n ParentPropsBase,\n ParentVariants & OurVariants\n >\n}\n\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n// variants: {\n// size: {\n// '...size': (val) => {\n// return {}\n// }\n// },\n// disabled: {\n// true: {\n// opacity: 0.5,\n// pointerEvents: 'none',\n// },\n// },\n// } as const\n// })\n// type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,OAAO,MAAM,iBAAiB;AAEvC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAqBtB,SAAS,OAId,WAEA,SAMA,yBACA;AACA,QAAM,qBAAqB,MAAM;AAC/B,UAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAE3E,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAI,yDAAoB,OAAO;AAE7B,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,aAAa,IAAI;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,UAAI,oBAAmB,yDAAoB,qBAAoB,aAAa,IAAI,SAAS;AAEzF,UAAI,EAAE,kBAAkB,cAAc,CAAC,kBAAkB;AACvD,YAAI,aAAa,IAAI,UAAU,cAAc,GAAG;AAC9C,uBAAa,IAAI,SAAS;AAC1B,6BAAmB;AAAA,QACrB,OAAO;AACL,cAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,oBAAQ;AAAA,cACN;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AACA,YAAM,0BAA0B,oBAC5B,yDAAoB,4BAA2B,YAC/C;AACJ,YAAM,YAAY,CAAC,oBAAoB,CAAC,CAAC;AACzC,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU;AAAA,SACd,mEAAyB,aAAW,yDAAoB,YAAW,SAAS;AAAA,MAC9E;AACA,YAAM,UAAU;AAAA,SACd,mEAAyB,aAAW,yDAAoB,YAAW,SAAS;AAAA,MAC9E;AACA,YAAM,SAAS;AAAA,QACb,YAAW,mEAAyB,YAAU,yDAAoB,WAAU,SAAS;AAAA,MACvF;AAEA,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAMT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/views/Text.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/views/Text.tsx"],
|
|
4
|
-
"sourcesContent": ["import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport { Text as TextView } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { createComponent } from '../createComponent'\nimport { TextProps, TextPropsBase } from '../types'\n\nconst ellipseStyle = {\n maxWidth: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n componentName: 'Text',\n isText: true,\n\n defaultProps: {\n display: 'flex',\n fontFamily: 'System',\n ...(isWeb && {\n display: 'inline',\n boxSizing: 'border-box',\n wordWrap: 'break-word',\n }),\n },\n\n variants: {\n ...(isWeb && {\n numberOfLines: {\n 1: ellipseStyle,\n\n ':number': (numberOfLines) =>\n numberOfLines >= 1\n ? {\n WebkitLineClamp: numberOfLines,\n WebkitBoxOrient: 'vertical',\n display: '-webkit-box',\n overflow: 'hidden',\n }\n : null,\n },\n }),\n\n selectable: {\n true: {\n userSelect: 'text',\n cursor: 'text',\n },\n false: {\n userSelect: 'none',\n cursor: '
|
|
4
|
+
"sourcesContent": ["import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport { Text as TextView } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { createComponent } from '../createComponent'\nimport { TextProps, TextPropsBase } from '../types'\n\nconst ellipseStyle = {\n maxWidth: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n componentName: 'Text',\n isText: true,\n\n defaultProps: {\n display: 'flex',\n fontFamily: 'System',\n ...(isWeb && {\n display: 'inline',\n boxSizing: 'border-box',\n wordWrap: 'break-word',\n }),\n },\n\n variants: {\n ...(isWeb && {\n numberOfLines: {\n 1: ellipseStyle,\n\n ':number': (numberOfLines) =>\n numberOfLines >= 1\n ? {\n WebkitLineClamp: numberOfLines,\n WebkitBoxOrient: 'vertical',\n display: '-webkit-box',\n overflow: 'hidden',\n }\n : null,\n },\n }),\n\n selectable: {\n true: {\n userSelect: 'text',\n cursor: 'text',\n },\n false: {\n userSelect: 'none',\n cursor: 'default',\n },\n },\n\n pressable: {\n true: {\n cursor: 'pointer',\n },\n },\n\n ellipse: {\n true: isWeb\n ? ellipseStyle\n : {\n numberOfLines: 1,\n lineBreakMode: 'clip',\n },\n },\n },\n\n deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n validStyles: {\n ...validStyles,\n ...stylePropsTextOnly,\n },\n})\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,oBAAoB,mBAAmB;AAGhD,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAAoD;AAAA,EACtE,eAAe;AAAA,EACf,QAAQ;AAAA,EAER,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAI,SAAS;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,GAAI,SAAS;AAAA,MACX,eAAe;AAAA,QACb,GAAG;AAAA,QAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,UACE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,UAAU;AAAA,QACZ,IACA;AAAA,MACR;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE5C,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.161",
|
|
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.161",
|
|
31
|
+
"@tamagui/helpers": "^1.0.1-beta.161",
|
|
32
|
+
"@tamagui/normalize-css-color-lite": "^1.0.1-beta.161",
|
|
33
|
+
"@tamagui/rnw": "^1.0.1-beta.161",
|
|
34
|
+
"@tamagui/rnw-lite": "^1.0.1-beta.161",
|
|
35
|
+
"@tamagui/use-debounce": "^1.0.1-beta.161",
|
|
36
|
+
"@tamagui/use-event": "^1.0.1-beta.161",
|
|
37
|
+
"@tamagui/use-force-update": "^1.0.1-beta.161",
|
|
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.161",
|
|
47
47
|
"@types/react": "^18.0.15",
|
|
48
48
|
"csstype": "^3.0.10",
|
|
49
49
|
"esbuild": "^0.15.6",
|
package/src/createComponent.tsx
CHANGED
|
@@ -192,7 +192,7 @@ export function createComponent<
|
|
|
192
192
|
// eslint-disable-next-line no-console
|
|
193
193
|
console.group(`%c 🐛 ${banner}`, 'background: yellow;')
|
|
194
194
|
// eslint-disable-next-line no-console
|
|
195
|
-
console.groupCollapsed('initial state')
|
|
195
|
+
console.groupCollapsed('initial props/state')
|
|
196
196
|
// eslint-disable-next-line no-console
|
|
197
197
|
console.log('props', propsIn)
|
|
198
198
|
// eslint-disable-next-line no-console
|
|
@@ -1244,7 +1244,7 @@ export const Spacer = createComponent<SpacerProps>({
|
|
|
1244
1244
|
},
|
|
1245
1245
|
both: {},
|
|
1246
1246
|
},
|
|
1247
|
-
},
|
|
1247
|
+
} as const,
|
|
1248
1248
|
|
|
1249
1249
|
defaultVariants: {
|
|
1250
1250
|
direction: 'both',
|
|
@@ -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/helpers/getFont.tsx
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable no-console */
|
|
1
2
|
import { getVariableValue } from '../createVariable'
|
|
2
3
|
import { FontSizeTokens, TextProps, VariantSpreadFunction } from '../types'
|
|
3
4
|
|
|
@@ -8,7 +9,9 @@ export const getFont: VariantSpreadFunction<TextProps, FontSizeTokens> = (
|
|
|
8
9
|
const family = getVariableValue(props.fontFamily) || '$body'
|
|
9
10
|
const font = fonts[family] || fonts['$body']
|
|
10
11
|
if (!font) {
|
|
11
|
-
|
|
12
|
+
if (process.env.NODE_ENV === 'development') {
|
|
13
|
+
console.warn('⚠️ no font found', { family, fontTokens: Object.keys(fonts), val })
|
|
14
|
+
}
|
|
12
15
|
return {} as any
|
|
13
16
|
}
|
|
14
17
|
const fontFamily = font.family
|
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
|
}
|
package/src/styled.tsx
CHANGED
package/src/views/Text.tsx
CHANGED
|
@@ -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;
|