@tamagui/web 1.2.9 → 1.2.11
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/esm/Tamagui.mjs +41 -0
- package/dist/esm/Tamagui.mjs.map +7 -0
- package/dist/esm/addTheme.mjs +54 -0
- package/dist/esm/addTheme.mjs.map +7 -0
- package/dist/esm/config.mjs +84 -0
- package/dist/esm/config.mjs.map +7 -0
- package/dist/esm/constants/constants.mjs +22 -0
- package/dist/esm/constants/constants.mjs.map +7 -0
- package/dist/esm/constants/isDevTools.mjs +13 -0
- package/dist/esm/constants/isDevTools.mjs.map +7 -0
- package/dist/esm/contexts/ButtonNestingContext.mjs +6 -0
- package/dist/esm/contexts/ButtonNestingContext.mjs.map +7 -0
- package/dist/esm/contexts/FontLanguageContext.mjs +6 -0
- package/dist/esm/contexts/FontLanguageContext.mjs.map +7 -0
- package/dist/esm/contexts/TextAncestorContext.mjs +6 -0
- package/dist/esm/contexts/TextAncestorContext.mjs.map +7 -0
- package/dist/esm/createComponent.mjs +853 -0
- package/dist/esm/createComponent.mjs.map +7 -0
- package/dist/esm/createFont.mjs +45 -0
- package/dist/esm/createFont.mjs.map +7 -0
- package/dist/esm/createShorthands.mjs +7 -0
- package/dist/esm/createShorthands.mjs.map +7 -0
- package/dist/esm/createTamagui.mjs +190 -0
- package/dist/esm/createTamagui.mjs.map +7 -0
- package/dist/esm/createTheme.mjs +7 -0
- package/dist/esm/createTheme.mjs.map +7 -0
- package/dist/esm/createTokens.mjs +15 -0
- package/dist/esm/createTokens.mjs.map +7 -0
- package/dist/esm/createVariable.mjs +78 -0
- package/dist/esm/createVariable.mjs.map +7 -0
- package/dist/esm/createVariables.mjs +35 -0
- package/dist/esm/createVariables.mjs.map +7 -0
- package/dist/esm/helpers/RNComponents.mjs +16 -0
- package/dist/esm/helpers/RNComponents.mjs.map +7 -0
- package/dist/esm/helpers/ThemeManager.mjs +209 -0
- package/dist/esm/helpers/ThemeManager.mjs.map +7 -0
- package/dist/esm/helpers/ThemeManagerContext.mjs +6 -0
- package/dist/esm/helpers/ThemeManagerContext.mjs.map +7 -0
- package/dist/esm/helpers/createMediaStyle.mjs +42 -0
- package/dist/esm/helpers/createMediaStyle.mjs.map +7 -0
- package/dist/esm/helpers/createPropMapper.mjs +396 -0
- package/dist/esm/helpers/createPropMapper.mjs.map +7 -0
- package/dist/esm/helpers/createProxy.mjs +19 -0
- package/dist/esm/helpers/createProxy.mjs.map +7 -0
- package/dist/esm/helpers/expandStyle.mjs +71 -0
- package/dist/esm/helpers/expandStyle.mjs.map +7 -0
- package/dist/esm/helpers/expandStyles.mjs +90 -0
- package/dist/esm/helpers/expandStyles.mjs.map +7 -0
- package/dist/esm/helpers/extendStaticConfig.mjs +66 -0
- package/dist/esm/helpers/extendStaticConfig.mjs.map +7 -0
- package/dist/esm/helpers/getAnimationDriver.mjs +8 -0
- package/dist/esm/helpers/getAnimationDriver.mjs.map +7 -0
- package/dist/esm/helpers/getExpandedShorthands.mjs +16 -0
- package/dist/esm/helpers/getExpandedShorthands.mjs.map +7 -0
- package/dist/esm/helpers/getFontLanguage.mjs +5 -0
- package/dist/esm/helpers/getFontLanguage.mjs.map +7 -0
- package/dist/esm/helpers/getSplitStyles.mjs +849 -0
- package/dist/esm/helpers/getSplitStyles.mjs.map +7 -0
- package/dist/esm/helpers/getStylesAtomic.mjs +200 -0
- package/dist/esm/helpers/getStylesAtomic.mjs.map +7 -0
- package/dist/esm/helpers/getStylesAtomic.native.mjs +12 -0
- package/dist/esm/helpers/getStylesAtomic.native.mjs.map +7 -0
- package/dist/esm/helpers/getThemeCSSRules.mjs +86 -0
- package/dist/esm/helpers/getThemeCSSRules.mjs.map +7 -0
- package/dist/esm/helpers/getThemeCSSRules.native.mjs +7 -0
- package/dist/esm/helpers/getThemeCSSRules.native.mjs.map +7 -0
- package/dist/esm/helpers/getVariantExtras.mjs +67 -0
- package/dist/esm/helpers/getVariantExtras.mjs.map +7 -0
- package/dist/esm/helpers/insertStyleRule.mjs +186 -0
- package/dist/esm/helpers/insertStyleRule.mjs.map +7 -0
- package/dist/esm/helpers/isObj.mjs +5 -0
- package/dist/esm/helpers/isObj.mjs.map +7 -0
- package/dist/esm/helpers/isTamaguiComponent.mjs +8 -0
- package/dist/esm/helpers/isTamaguiComponent.mjs.map +7 -0
- package/dist/esm/helpers/isTamaguiElement.mjs +9 -0
- package/dist/esm/helpers/isTamaguiElement.mjs.map +7 -0
- package/dist/esm/helpers/matchMedia.mjs +17 -0
- package/dist/esm/helpers/matchMedia.mjs.map +7 -0
- package/dist/esm/helpers/matchMedia.native.mjs +23 -0
- package/dist/esm/helpers/matchMedia.native.mjs.map +7 -0
- package/dist/esm/helpers/mergeProps.mjs +30 -0
- package/dist/esm/helpers/mergeProps.mjs.map +7 -0
- package/dist/esm/helpers/mergeTransform.mjs +21 -0
- package/dist/esm/helpers/mergeTransform.mjs.map +7 -0
- package/dist/esm/helpers/normalizeColor.mjs +36 -0
- package/dist/esm/helpers/normalizeColor.mjs.map +7 -0
- package/dist/esm/helpers/normalizeValueWithProperty.mjs +113 -0
- package/dist/esm/helpers/normalizeValueWithProperty.mjs.map +7 -0
- package/dist/esm/helpers/proxyThemeVariables.mjs +16 -0
- package/dist/esm/helpers/proxyThemeVariables.mjs.map +7 -0
- package/dist/esm/helpers/pseudoDescriptors.mjs +29 -0
- package/dist/esm/helpers/pseudoDescriptors.mjs.map +7 -0
- package/dist/esm/helpers/registerCSSVariable.mjs +14 -0
- package/dist/esm/helpers/registerCSSVariable.mjs.map +7 -0
- package/dist/esm/helpers/themeable.mjs +28 -0
- package/dist/esm/helpers/themeable.mjs.map +7 -0
- package/dist/esm/helpers/themes.mjs +53 -0
- package/dist/esm/helpers/themes.mjs.map +7 -0
- package/dist/esm/helpers/timer.mjs +11 -0
- package/dist/esm/helpers/timer.mjs.map +7 -0
- package/dist/esm/helpers/useShallowSetState.mjs +35 -0
- package/dist/esm/helpers/useShallowSetState.mjs.map +7 -0
- package/dist/esm/helpers/warnOnce.mjs +14 -0
- package/dist/esm/helpers/warnOnce.mjs.map +7 -0
- package/dist/esm/helpers/withStaticProperties.mjs +8 -0
- package/dist/esm/helpers/withStaticProperties.mjs.map +7 -0
- package/dist/esm/hooks/getThemeUnwrapped.mjs +9 -0
- package/dist/esm/hooks/getThemeUnwrapped.mjs.map +7 -0
- package/dist/esm/hooks/useId.mjs +5 -0
- package/dist/esm/hooks/useId.mjs.map +7 -0
- package/dist/esm/hooks/useIsTouchDevice.mjs +9 -0
- package/dist/esm/hooks/useIsTouchDevice.mjs.map +7 -0
- package/dist/esm/hooks/useMedia.mjs +225 -0
- package/dist/esm/hooks/useMedia.mjs.map +7 -0
- package/dist/esm/hooks/useSafeRef.mjs +35 -0
- package/dist/esm/hooks/useSafeRef.mjs.map +7 -0
- package/dist/esm/hooks/useServerHooks.mjs +11 -0
- package/dist/esm/hooks/useServerHooks.mjs.map +7 -0
- package/dist/esm/hooks/useStyle.mjs +37 -0
- package/dist/esm/hooks/useStyle.mjs.map +7 -0
- package/dist/esm/hooks/useTheme.mjs +205 -0
- package/dist/esm/hooks/useTheme.mjs.map +7 -0
- package/dist/esm/hooks/useThemeName.mjs +28 -0
- package/dist/esm/hooks/useThemeName.mjs.map +7 -0
- package/dist/esm/index.mjs +77 -0
- package/dist/esm/index.mjs.map +7 -0
- package/dist/esm/inject-styles.mjs +16 -0
- package/dist/esm/inject-styles.mjs.map +7 -0
- package/dist/esm/insertFont.mjs +67 -0
- package/dist/esm/insertFont.mjs.map +7 -0
- package/dist/esm/setupHooks.mjs +9 -0
- package/dist/esm/setupHooks.mjs.map +7 -0
- package/dist/esm/setupReactNative.mjs +25 -0
- package/dist/esm/setupReactNative.mjs.map +7 -0
- package/dist/esm/styled.mjs +71 -0
- package/dist/esm/styled.mjs.map +7 -0
- package/dist/esm/types.mjs +1 -0
- package/dist/esm/types.mjs.map +7 -0
- package/dist/esm/updateTheme.mjs +23 -0
- package/dist/esm/updateTheme.mjs.map +7 -0
- package/dist/esm/views/FontLanguage.mjs +17 -0
- package/dist/esm/views/FontLanguage.mjs.map +7 -0
- package/dist/esm/views/FontLanguage.native.mjs +11 -0
- package/dist/esm/views/FontLanguage.native.mjs.map +7 -0
- package/dist/esm/views/FontLanguage.types.mjs +1 -0
- package/dist/esm/views/FontLanguage.types.mjs.map +7 -0
- package/dist/esm/views/Slot.mjs +66 -0
- package/dist/esm/views/Slot.mjs.map +7 -0
- package/dist/esm/views/Stack.mjs +14 -0
- package/dist/esm/views/Stack.mjs.map +7 -0
- package/dist/esm/views/TamaguiProvider.mjs +56 -0
- package/dist/esm/views/TamaguiProvider.mjs.map +7 -0
- package/dist/esm/views/Text.mjs +70 -0
- package/dist/esm/views/Text.mjs.map +7 -0
- package/dist/esm/views/Theme.mjs +63 -0
- package/dist/esm/views/Theme.mjs.map +7 -0
- package/dist/esm/views/ThemeProvider.mjs +45 -0
- package/dist/esm/views/ThemeProvider.mjs.map +7 -0
- package/package.json +11 -11
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { isRSC, isWeb } from "@tamagui/constants";
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import { FontLanguageContext } from "../contexts/FontLanguageContext";
|
|
4
|
+
import { TextAncestorContext } from "../contexts/TextAncestorContext";
|
|
5
|
+
import { useSplitStyles } from "../helpers/getSplitStyles";
|
|
6
|
+
import { useMedia } from "./useMedia";
|
|
7
|
+
import { useTheme } from "./useTheme";
|
|
8
|
+
function useStyle(base, style, options) {
|
|
9
|
+
const isText = base.staticConfig.isText;
|
|
10
|
+
const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false);
|
|
11
|
+
const languageContext = isRSC ? null : useContext(FontLanguageContext);
|
|
12
|
+
const theme = useTheme();
|
|
13
|
+
const media = useMedia();
|
|
14
|
+
const out = useSplitStyles(
|
|
15
|
+
style,
|
|
16
|
+
base.staticConfig,
|
|
17
|
+
theme,
|
|
18
|
+
{
|
|
19
|
+
...options,
|
|
20
|
+
mediaState: media,
|
|
21
|
+
hasTextAncestor,
|
|
22
|
+
resolveVariablesAs: "auto"
|
|
23
|
+
},
|
|
24
|
+
null,
|
|
25
|
+
languageContext || void 0,
|
|
26
|
+
isText ? "span" : "div",
|
|
27
|
+
options == null ? void 0 : options.debug
|
|
28
|
+
);
|
|
29
|
+
return {
|
|
30
|
+
style: Object.keys(out.style).length ? out.style : null,
|
|
31
|
+
classNames: out.classNames
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
useStyle
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=useStyle.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/useStyle.tsx"],
|
|
4
|
+
"sourcesContent": ["import { isRSC, isWeb } from '@tamagui/constants'\nimport { useContext } from 'react'\n\nimport { FontLanguageContext } from '../contexts/FontLanguageContext'\nimport { TextAncestorContext } from '../contexts/TextAncestorContext'\nimport { useSplitStyles } from '../helpers/getSplitStyles'\nimport {\n DebugProp,\n GetProps,\n SplitStyleState,\n TamaguiComponent,\n TextNonStyleProps,\n} from '../types'\nimport { useMedia } from './useMedia'\nimport { useTheme } from './useTheme'\n\nexport function useStyle<\n Component extends TamaguiComponent,\n StyleProps = Omit<GetProps<Component>, keyof TextNonStyleProps>\n>(\n base: Component,\n style: StyleProps,\n options?: Partial<SplitStyleState> & { debug?: DebugProp }\n) {\n const isText = base.staticConfig.isText\n const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)\n const languageContext = isRSC ? null : useContext(FontLanguageContext)\n const theme = useTheme()\n const media = useMedia()\n const out = useSplitStyles(\n style as any,\n base.staticConfig,\n theme,\n {\n ...(options as any),\n mediaState: media,\n hasTextAncestor,\n resolveVariablesAs: 'auto',\n },\n null,\n languageContext || undefined,\n isText ? 'span' : 'div',\n options?.debug\n )\n return {\n style: Object.keys(out.style).length ? out.style : null,\n classNames: out.classNames,\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,OAAO,aAAa;AAC7B,SAAS,kBAAkB;AAE3B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAQ/B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAElB,SAAS,SAId,MACA,OACA,SACA;AACA,QAAM,SAAS,KAAK,aAAa;AACjC,QAAM,kBAAkB,CAAC,EAAE,SAAS,SAAS,WAAW,mBAAmB,IAAI;AAC/E,QAAM,kBAAkB,QAAQ,OAAO,WAAW,mBAAmB;AACrE,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,SAAS;AACvB,QAAM,MAAM;AAAA,IACV;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,MACE,GAAI;AAAA,MACJ,YAAY;AAAA,MACZ;AAAA,MACA,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,SAAS,SAAS;AAAA,IAClB,mCAAS;AAAA,EACX;AACA,SAAO;AAAA,IACL,OAAO,OAAO,KAAK,IAAI,KAAK,EAAE,SAAS,IAAI,QAAQ;AAAA,IACnD,YAAY,IAAI;AAAA,EAClB;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
import { isClient, isRSC, isServer, isWeb } from "@tamagui/constants";
|
|
2
|
+
import { useContext, useEffect, useMemo, useState } from "react";
|
|
3
|
+
import { getConfig } from "../config";
|
|
4
|
+
import { isDevTools } from "../constants/isDevTools";
|
|
5
|
+
import { createProxy } from "../helpers/createProxy";
|
|
6
|
+
import {
|
|
7
|
+
ThemeManager,
|
|
8
|
+
hasNoThemeUpdatingProps
|
|
9
|
+
} from "../helpers/ThemeManager";
|
|
10
|
+
import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
|
|
11
|
+
import { GetThemeUnwrapped } from "./getThemeUnwrapped";
|
|
12
|
+
import { useServerRef } from "./useServerHooks";
|
|
13
|
+
const emptyProps = { name: null };
|
|
14
|
+
function getDefaultThemeProxied() {
|
|
15
|
+
const config = getConfig();
|
|
16
|
+
const name = Object.keys(config.themes)[0];
|
|
17
|
+
return getThemeProxied({
|
|
18
|
+
theme: config.themes[name],
|
|
19
|
+
name
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
const useTheme = (props = emptyProps) => {
|
|
23
|
+
var _a;
|
|
24
|
+
return (isRSC ? null : (_a = useThemeWithState(props)) == null ? void 0 : _a.theme) || getDefaultThemeProxied();
|
|
25
|
+
};
|
|
26
|
+
const useThemeWithState = (props) => {
|
|
27
|
+
var _a;
|
|
28
|
+
const keys = useServerRef([]);
|
|
29
|
+
const changedTheme = useChangeThemeEffect(
|
|
30
|
+
props,
|
|
31
|
+
false,
|
|
32
|
+
isClient ? () => {
|
|
33
|
+
var _a2;
|
|
34
|
+
return ((_a2 = props.shouldUpdate) == null ? void 0 : _a2.call(props)) ?? keys.current.length === 0;
|
|
35
|
+
} : void 0
|
|
36
|
+
);
|
|
37
|
+
const { themeManager, isNewTheme, theme, name, className } = changedTheme;
|
|
38
|
+
if (process.env.NODE_ENV === "development") {
|
|
39
|
+
if (isWeb && isNewTheme && className === ((_a = themeManager == null ? void 0 : themeManager.parentManager) == null ? void 0 : _a.state.className)) {
|
|
40
|
+
console.error("Should always change, duplicating ThemeMananger bug", themeManager);
|
|
41
|
+
}
|
|
42
|
+
if (props.debug === "verbose") {
|
|
43
|
+
console.groupCollapsed(" \u{1F539} useTheme =>", name);
|
|
44
|
+
const logs = { ...props, name, className, ...isDevTools && { theme } };
|
|
45
|
+
for (const key in logs) {
|
|
46
|
+
console.log(" ", key, logs[key]);
|
|
47
|
+
}
|
|
48
|
+
console.groupEnd();
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
if (!changedTheme.theme) {
|
|
52
|
+
if (process.env.NODE_ENV === "development") {
|
|
53
|
+
console.warn("No theme found", name, props, themeManager);
|
|
54
|
+
}
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
const proxiedTheme = useMemo(() => {
|
|
58
|
+
return getThemeProxied(changedTheme);
|
|
59
|
+
}, [theme, isNewTheme, name, className, themeManager]);
|
|
60
|
+
return {
|
|
61
|
+
...changedTheme,
|
|
62
|
+
theme: proxiedTheme
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
function getThemeProxied({
|
|
66
|
+
theme,
|
|
67
|
+
themeManager,
|
|
68
|
+
keys
|
|
69
|
+
}) {
|
|
70
|
+
return createProxy(theme, {
|
|
71
|
+
has(_, key) {
|
|
72
|
+
if (typeof key === "string") {
|
|
73
|
+
if (key[0] === "$")
|
|
74
|
+
key = key.slice(1);
|
|
75
|
+
return themeManager == null ? void 0 : themeManager.allKeys.has(key);
|
|
76
|
+
}
|
|
77
|
+
return Reflect.has(theme, key);
|
|
78
|
+
},
|
|
79
|
+
get(_, key) {
|
|
80
|
+
if (key === GetThemeUnwrapped) {
|
|
81
|
+
return theme;
|
|
82
|
+
}
|
|
83
|
+
if (key === "undefined" || key === "__proto__" || key === "$typeof" || typeof key !== "string" || !themeManager) {
|
|
84
|
+
return Reflect.get(_, key);
|
|
85
|
+
}
|
|
86
|
+
const keyString = key;
|
|
87
|
+
if (key[0] === "$") {
|
|
88
|
+
key = key.slice(1);
|
|
89
|
+
}
|
|
90
|
+
const val = themeManager.getValue(key);
|
|
91
|
+
const currentKeys = keys == null ? void 0 : keys.current;
|
|
92
|
+
if (val && currentKeys) {
|
|
93
|
+
return new Proxy(val, {
|
|
94
|
+
// when they touch the actual value we only track it
|
|
95
|
+
// if its a variable (web), its ignored!
|
|
96
|
+
get(_2, subkey) {
|
|
97
|
+
if (subkey === "val" && !currentKeys.includes(keyString)) {
|
|
98
|
+
currentKeys.push(keyString);
|
|
99
|
+
}
|
|
100
|
+
return Reflect.get(val, subkey);
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
return val;
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
const activeThemeManagers = /* @__PURE__ */ new Set();
|
|
109
|
+
const useChangeThemeEffect = (props, root = false, disableUpdate) => {
|
|
110
|
+
if (isRSC) {
|
|
111
|
+
return {
|
|
112
|
+
...createState().state,
|
|
113
|
+
themeManager: null
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
const parentManager = useContext(ThemeManagerContext);
|
|
117
|
+
const {
|
|
118
|
+
debug,
|
|
119
|
+
// @ts-expect-error internal use only
|
|
120
|
+
disable
|
|
121
|
+
} = props;
|
|
122
|
+
if (disable) {
|
|
123
|
+
if (!parentManager)
|
|
124
|
+
throw `\u274C`;
|
|
125
|
+
return {
|
|
126
|
+
...parentManager.state,
|
|
127
|
+
isNewTheme: false,
|
|
128
|
+
themeManager: parentManager
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
const [themeState, setThemeState] = useState(createState);
|
|
132
|
+
const { isNewTheme, state, themeManager, mounted } = themeState;
|
|
133
|
+
if (!isServer) {
|
|
134
|
+
useEffect(() => {
|
|
135
|
+
if (disable)
|
|
136
|
+
return;
|
|
137
|
+
if (props.inverse && !mounted) {
|
|
138
|
+
setThemeState({ ...themeState, mounted: true });
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
activeThemeManagers.add(themeManager);
|
|
142
|
+
return () => {
|
|
143
|
+
activeThemeManagers.delete(themeManager);
|
|
144
|
+
};
|
|
145
|
+
}, [disable, state, isNewTheme, debug]);
|
|
146
|
+
}
|
|
147
|
+
const isInversingOnMount = Boolean(!themeState.mounted && props.inverse);
|
|
148
|
+
const shouldReturnParentState = hasNoThemeUpdatingProps(props) || isInversingOnMount;
|
|
149
|
+
if (shouldReturnParentState) {
|
|
150
|
+
if (!parentManager)
|
|
151
|
+
throw "impossible";
|
|
152
|
+
if (process.env.NODE_ENV === "development" && props.debug === "verbose")
|
|
153
|
+
console.log("useTheme hasNoThemeUpdatingProps", parentManager.state.name, "isInversingOnMount", isInversingOnMount);
|
|
154
|
+
return {
|
|
155
|
+
...parentManager.state,
|
|
156
|
+
className: isInversingOnMount ? "" : parentManager.state.className,
|
|
157
|
+
themeManager: parentManager,
|
|
158
|
+
isNewTheme: false
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
updateState();
|
|
162
|
+
return {
|
|
163
|
+
...state,
|
|
164
|
+
isNewTheme,
|
|
165
|
+
themeManager
|
|
166
|
+
};
|
|
167
|
+
function createState(prev) {
|
|
168
|
+
if (prev && (disableUpdate == null ? void 0 : disableUpdate())) {
|
|
169
|
+
return prev;
|
|
170
|
+
}
|
|
171
|
+
const _ = new ThemeManager(props, root ? "root" : parentManager);
|
|
172
|
+
const isNewTheme2 = _ !== parentManager;
|
|
173
|
+
const mounted2 = !props.inverse ? true : root || (prev == null ? void 0 : prev.mounted);
|
|
174
|
+
return {
|
|
175
|
+
// ThemeManager returns parentManager if no change
|
|
176
|
+
isNewTheme: isNewTheme2,
|
|
177
|
+
state: { ..._.state },
|
|
178
|
+
themeManager: _,
|
|
179
|
+
mounted: mounted2
|
|
180
|
+
};
|
|
181
|
+
}
|
|
182
|
+
function updateState(updatingManager) {
|
|
183
|
+
if (disableUpdate == null ? void 0 : disableUpdate()) {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
const manager = updatingManager ?? themeManager;
|
|
187
|
+
const next = manager.getState(props, parentManager);
|
|
188
|
+
const shouldChange = manager.getStateShouldChange(next, isNewTheme ? state : null);
|
|
189
|
+
if (shouldChange) {
|
|
190
|
+
setThemeState(createState);
|
|
191
|
+
} else {
|
|
192
|
+
if (!next && (parentManager == null ? void 0 : parentManager.state.name) !== state.name) {
|
|
193
|
+
setThemeState(createState);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
};
|
|
198
|
+
export {
|
|
199
|
+
activeThemeManagers,
|
|
200
|
+
getThemeProxied,
|
|
201
|
+
useChangeThemeEffect,
|
|
202
|
+
useTheme,
|
|
203
|
+
useThemeWithState
|
|
204
|
+
};
|
|
205
|
+
//# sourceMappingURL=useTheme.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/useTheme.tsx"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-console */\nimport { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport { useContext, useEffect, useMemo, 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\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n return (isRSC ? null : useThemeWithState(props)?.theme) || getDefaultThemeProxied()\n}\n\nexport const useThemeWithState = (props: ThemeProps) => {\n const keys = useServerRef([])\n\n const changedTheme = useChangeThemeEffect(\n props,\n false,\n isClient\n ? () => {\n return props.shouldUpdate?.() ?? keys.current.length === 0\n }\n : undefined\n )\n\n const { themeManager, isNewTheme, theme, name, className } = changedTheme\n\n if (process.env.NODE_ENV === 'development') {\n // ensure we aren't creating too many ThemeManagers\n // prettier-ignore\n if (isWeb && isNewTheme && className === themeManager?.parentManager?.state.className) {\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 (!changedTheme.theme) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('No theme found', name, props, themeManager)\n }\n return null\n }\n\n const proxiedTheme = useMemo(() => {\n return getThemeProxied(changedTheme as any)\n }, [theme, isNewTheme, name, className, themeManager])\n\n return {\n ...changedTheme,\n theme: proxiedTheme,\n }\n}\n\nexport function getThemeProxied({\n theme,\n themeManager,\n keys,\n}: Partial<ChangedThemeResponse> & {\n theme: ThemeParsed\n keys?: React.RefObject<string[]>\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 }\n if (\n key === 'undefined' ||\n key === '__proto__' ||\n key === '$typeof' ||\n typeof key !== 'string' ||\n !themeManager\n ) {\n return Reflect.get(_, key)\n }\n const keyString = key\n // auto convert variables to plain\n if (key[0] === '$') {\n key = key.slice(1)\n }\n const val = themeManager.getValue(key)\n const currentKeys = keys?.current\n if (val && currentKeys) {\n return new Proxy(val as any, {\n // when they touch the actual value we only track it\n // if its a variable (web), its ignored!\n get(_, subkey) {\n if (subkey === 'val' && !currentKeys.includes(keyString)) {\n currentKeys.push(keyString)\n }\n return Reflect.get(val as any, subkey)\n },\n })\n }\n return val\n },\n })\n}\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 `\u274C`\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((name, manager) => {\n // // console.log('hi', props, state, name, manager)\n // if (state.theme !== manager.state.theme) {\n // console.warn('now update to', manager.state.name)\n // updateState(manager)\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 if (prev && disableUpdate?.()) {\n return prev\n }\n // returns previous theme manager if no change\n const _ = new ThemeManager(props, root ? 'root' : parentManager)\n const isNewTheme = _ !== parentManager\n // prettier-ignore\n\n // if (prev?.isNewTheme && _.state.theme !== parentManager?.state.theme) {\n // console.warn('notify')\n // _.notify()\n // }\n\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(updatingManager?: ThemeManager) {\n if (disableUpdate?.()) {\n return\n }\n const manager = updatingManager ?? themeManager\n const next = manager.getState(props, parentManager)\n const shouldChange = manager.getStateShouldChange(next, isNewTheme ? state : null)\n // console.log(`got it`, next, isNewTheme, shouldChange, { ...updatingManager?.state })\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
|
+
"names": ["_a", "_", "isNewTheme", "mounted"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { isRSC, useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
2
|
+
import { useContext, useState } from "react";
|
|
3
|
+
import { getConfig } from "../config";
|
|
4
|
+
import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
|
|
5
|
+
function useThemeName(opts) {
|
|
6
|
+
if (isRSC) {
|
|
7
|
+
const config = getConfig();
|
|
8
|
+
return config.themes[Object.keys(config.themes)[0]];
|
|
9
|
+
}
|
|
10
|
+
const manager = useContext(ThemeManagerContext);
|
|
11
|
+
const [name, setName] = useState((manager == null ? void 0 : manager.state.name) || "");
|
|
12
|
+
useIsomorphicLayoutEffect(() => {
|
|
13
|
+
if (!manager)
|
|
14
|
+
return;
|
|
15
|
+
setName(manager.state.name);
|
|
16
|
+
return manager.onChangeTheme((next, manager2) => {
|
|
17
|
+
const name2 = (opts == null ? void 0 : opts.parent) ? manager2.state.parentName || next : next;
|
|
18
|
+
if (!name2)
|
|
19
|
+
return;
|
|
20
|
+
setName(name2);
|
|
21
|
+
});
|
|
22
|
+
}, [manager == null ? void 0 : manager.state.name]);
|
|
23
|
+
return name;
|
|
24
|
+
}
|
|
25
|
+
export {
|
|
26
|
+
useThemeName
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=useThemeName.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/useThemeName.tsx"],
|
|
4
|
+
"sourcesContent": ["import { isRSC, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useContext, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { ThemeName } from '../types'\n\nexport function useThemeName(opts?: { parent?: true }): ThemeName {\n if (isRSC) {\n const config = getConfig()\n return config.themes[Object.keys(config.themes)[0]] as any\n }\n const manager = useContext(ThemeManagerContext)\n const [name, setName] = useState(manager?.state.name || '')\n\n useIsomorphicLayoutEffect(() => {\n if (!manager) return\n setName(manager.state.name)\n return manager.onChangeTheme((next, manager) => {\n const name = opts?.parent ? manager.state.parentName || next : next\n if (!name) return\n setName(name)\n })\n }, [manager?.state.name])\n\n return name\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,OAAO,iCAAiC;AACjD,SAAS,YAAY,gBAAgB;AAErC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AAG7B,SAAS,aAAa,MAAqC;AAChE,MAAI,OAAO;AACT,UAAM,SAAS,UAAU;AACzB,WAAO,OAAO,OAAO,OAAO,KAAK,OAAO,MAAM,EAAE,CAAC,CAAC;AAAA,EACpD;AACA,QAAM,UAAU,WAAW,mBAAmB;AAC9C,QAAM,CAAC,MAAM,OAAO,IAAI,UAAS,mCAAS,MAAM,SAAQ,EAAE;AAE1D,4BAA0B,MAAM;AAC9B,QAAI,CAAC;AAAS;AACd,YAAQ,QAAQ,MAAM,IAAI;AAC1B,WAAO,QAAQ,cAAc,CAAC,MAAMA,aAAY;AAC9C,YAAMC,SAAO,6BAAM,UAASD,SAAQ,MAAM,cAAc,OAAO;AAC/D,UAAI,CAACC;AAAM;AACX,cAAQA,KAAI;AAAA,IACd,CAAC;AAAA,EACH,GAAG,CAAC,mCAAS,MAAM,IAAI,CAAC;AAExB,SAAO;AACT;",
|
|
6
|
+
"names": ["manager", "name"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
export * from "./Tamagui";
|
|
2
|
+
export * from "./createComponent";
|
|
3
|
+
export * from "./createShorthands";
|
|
4
|
+
export * from "./createTheme";
|
|
5
|
+
export * from "./createTamagui";
|
|
6
|
+
export * from "./createFont";
|
|
7
|
+
export * from "./createTokens";
|
|
8
|
+
export * from "./createVariable";
|
|
9
|
+
export * from "./createVariables";
|
|
10
|
+
export * from "./insertFont";
|
|
11
|
+
export * from "./addTheme";
|
|
12
|
+
export * from "./updateTheme";
|
|
13
|
+
export * from "./styled";
|
|
14
|
+
export * from "./types";
|
|
15
|
+
export * from "./setupReactNative";
|
|
16
|
+
import { getConfig, getThemes, getTokens, onConfiguredOnce } from "./config";
|
|
17
|
+
export * from "./constants/constants";
|
|
18
|
+
export * from "./helpers/useShallowSetState";
|
|
19
|
+
export * from "./helpers/getVariantExtras";
|
|
20
|
+
export * from "./helpers/getAnimationDriver";
|
|
21
|
+
export * from "./helpers/getExpandedShorthands";
|
|
22
|
+
export * from "./helpers/getSplitStyles";
|
|
23
|
+
export * from "./helpers/getStylesAtomic";
|
|
24
|
+
export * from "./helpers/pseudoDescriptors";
|
|
25
|
+
export * from "./helpers/mergeProps";
|
|
26
|
+
export * from "./helpers/expandStyles";
|
|
27
|
+
export * from "./helpers/isTamaguiElement";
|
|
28
|
+
export * from "./helpers/isTamaguiComponent";
|
|
29
|
+
export * from "./helpers/matchMedia";
|
|
30
|
+
export * from "./helpers/proxyThemeVariables";
|
|
31
|
+
export * from "./helpers/themeable";
|
|
32
|
+
export * from "./helpers/withStaticProperties";
|
|
33
|
+
export * from "./contexts/ButtonNestingContext";
|
|
34
|
+
export * from "./hooks/useId";
|
|
35
|
+
export * from "./hooks/useIsTouchDevice";
|
|
36
|
+
import {
|
|
37
|
+
configureMedia,
|
|
38
|
+
getMedia,
|
|
39
|
+
mediaState,
|
|
40
|
+
useMedia,
|
|
41
|
+
useMediaPropsActive,
|
|
42
|
+
mediaObjectToString,
|
|
43
|
+
mediaQueryConfig
|
|
44
|
+
} from "./hooks/useMedia";
|
|
45
|
+
export * from "./hooks/useTheme";
|
|
46
|
+
export * from "./hooks/useThemeName";
|
|
47
|
+
export * from "./hooks/useSafeRef";
|
|
48
|
+
export * from "./hooks/useStyle";
|
|
49
|
+
export * from "./views/Slot";
|
|
50
|
+
export * from "./views/Stack";
|
|
51
|
+
export * from "./views/Text";
|
|
52
|
+
export * from "./contexts/TextAncestorContext";
|
|
53
|
+
export * from "./views/Theme";
|
|
54
|
+
export * from "./views/ThemeProvider";
|
|
55
|
+
export * from "./views/FontLanguage";
|
|
56
|
+
export * from "./views/TamaguiProvider";
|
|
57
|
+
export * from "@tamagui/use-force-update";
|
|
58
|
+
export * from "@tamagui/use-did-finish-ssr";
|
|
59
|
+
export * from "@tamagui/use-event";
|
|
60
|
+
export * from "@tamagui/compose-refs";
|
|
61
|
+
export * from "@tamagui/helpers";
|
|
62
|
+
export * from "@tamagui/constants";
|
|
63
|
+
export * from "./setupHooks";
|
|
64
|
+
export {
|
|
65
|
+
configureMedia,
|
|
66
|
+
getConfig,
|
|
67
|
+
getMedia,
|
|
68
|
+
getThemes,
|
|
69
|
+
getTokens,
|
|
70
|
+
mediaObjectToString,
|
|
71
|
+
mediaQueryConfig,
|
|
72
|
+
mediaState,
|
|
73
|
+
onConfiguredOnce,
|
|
74
|
+
useMedia,
|
|
75
|
+
useMediaPropsActive
|
|
76
|
+
};
|
|
77
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/index.ts"],
|
|
4
|
+
"sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './addTheme'\nexport * from './updateTheme'\nexport * from './styled'\nexport * from './types'\nexport * from './setupReactNative'\n\nexport { getConfig, getThemes, getTokens, onConfiguredOnce } from './config'\n\nexport * from './constants/constants'\n\nexport * from './helpers/useShallowSetState'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getAnimationDriver'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/proxyThemeVariables'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonNestingContext'\n\nexport * from './hooks/useId'\nexport * from './hooks/useIsTouchDevice'\n\nexport {\n configureMedia,\n getMedia,\n mediaState,\n useMedia,\n useMediaPropsActive,\n mediaObjectToString,\n mediaQueryConfig,\n} from './hooks/useMedia'\nexport * from './hooks/useTheme'\nexport * from './hooks/useThemeName'\nexport * from './hooks/useSafeRef'\nexport * from './hooks/useStyle'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './contexts/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeProvider'\nexport * from './views/FontLanguage'\nexport * from './views/TamaguiProvider'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-did-finish-ssr'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/compose-refs'\nexport * from '@tamagui/helpers'\nexport * from '@tamagui/constants'\n\nexport * from './setupHooks'\n"],
|
|
5
|
+
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,WAAW,WAAW,WAAW,wBAAwB;AAElE,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const stylesheets = {};
|
|
2
|
+
const injectStyles = ({ filePath, css }) => {
|
|
3
|
+
let stylesheet = stylesheets[filePath];
|
|
4
|
+
if (!stylesheet) {
|
|
5
|
+
const styleEl = document.createElement("style");
|
|
6
|
+
styleEl.setAttribute("data-file", filePath);
|
|
7
|
+
styleEl.setAttribute("type", "text/css");
|
|
8
|
+
stylesheet = stylesheets[filePath] = styleEl;
|
|
9
|
+
document.head.appendChild(styleEl);
|
|
10
|
+
}
|
|
11
|
+
stylesheet.innerHTML = css;
|
|
12
|
+
};
|
|
13
|
+
export {
|
|
14
|
+
injectStyles
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=inject-styles.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/inject-styles.ts"],
|
|
4
|
+
"sourcesContent": ["// for vite dev mode\n\nconst stylesheets: Record<string, HTMLElement> = {}\n\ninterface InjectStylesOptions {\n filePath: string\n css: string\n}\n\nexport const injectStyles = ({ filePath, css }: InjectStylesOptions) => {\n let stylesheet = stylesheets[filePath]\n if (!stylesheet) {\n const styleEl = document.createElement('style')\n styleEl.setAttribute('data-file', filePath)\n styleEl.setAttribute('type', 'text/css')\n stylesheet = stylesheets[filePath] = styleEl\n document.head.appendChild(styleEl)\n }\n stylesheet.innerHTML = css\n}\n"],
|
|
5
|
+
"mappings": "AAEA,MAAM,cAA2C,CAAC;AAO3C,MAAM,eAAe,CAAC,EAAE,UAAU,IAAI,MAA2B;AACtE,MAAI,aAAa,YAAY,QAAQ;AACrC,MAAI,CAAC,YAAY;AACf,UAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,YAAQ,aAAa,aAAa,QAAQ;AAC1C,YAAQ,aAAa,QAAQ,UAAU;AACvC,iBAAa,YAAY,QAAQ,IAAI;AACrC,aAAS,KAAK,YAAY,OAAO;AAAA,EACnC;AACA,aAAW,YAAY;AACzB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { setConfigFont } from "./config";
|
|
2
|
+
import { createFont } from "./createFont";
|
|
3
|
+
import { createVariables } from "./createVariables";
|
|
4
|
+
import { registerCSSVariable, variableToCSS } from "./helpers/registerCSSVariable";
|
|
5
|
+
function insertFont(name, fontIn) {
|
|
6
|
+
const font = createFont(fontIn);
|
|
7
|
+
const tokened = createVariables(font, name);
|
|
8
|
+
const parsed = parseFont(tokened);
|
|
9
|
+
if (process.env.TAMAGUI_TARGET === "web" && typeof document !== "undefined") {
|
|
10
|
+
const fontVars = registerFontVariables(parsed);
|
|
11
|
+
const style = document.createElement("style");
|
|
12
|
+
style.innerText = `:root .font_${name} {${fontVars.join(";")}}`;
|
|
13
|
+
style.setAttribute("data-tamagui-font", name);
|
|
14
|
+
document.head.appendChild(style);
|
|
15
|
+
}
|
|
16
|
+
setConfigFont(name, tokened, parsed);
|
|
17
|
+
return parsed;
|
|
18
|
+
}
|
|
19
|
+
function parseFont(definition) {
|
|
20
|
+
var _a;
|
|
21
|
+
const parsed = {};
|
|
22
|
+
for (const attrKey in definition) {
|
|
23
|
+
const attr = definition[attrKey];
|
|
24
|
+
if (attrKey === "family" || attrKey === "face") {
|
|
25
|
+
parsed[attrKey] = attr;
|
|
26
|
+
continue;
|
|
27
|
+
}
|
|
28
|
+
parsed[attrKey] = {};
|
|
29
|
+
for (const key in attr) {
|
|
30
|
+
let val = attr[key];
|
|
31
|
+
if (((_a = val.val) == null ? void 0 : _a[0]) === "$") {
|
|
32
|
+
val = val.val;
|
|
33
|
+
}
|
|
34
|
+
parsed[attrKey][`$${key}`] = val;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return parsed;
|
|
38
|
+
}
|
|
39
|
+
function registerFontVariables(parsedFont) {
|
|
40
|
+
const response = [];
|
|
41
|
+
for (const fkey in parsedFont) {
|
|
42
|
+
if (fkey === "face")
|
|
43
|
+
continue;
|
|
44
|
+
if (fkey === "family") {
|
|
45
|
+
const val = parsedFont[fkey];
|
|
46
|
+
registerCSSVariable(val);
|
|
47
|
+
response.push(variableToCSS(val));
|
|
48
|
+
} else {
|
|
49
|
+
for (const fskey in parsedFont[fkey]) {
|
|
50
|
+
const fval = parsedFont[fkey][fskey];
|
|
51
|
+
if (typeof fval === "string") {
|
|
52
|
+
} else {
|
|
53
|
+
const val = parsedFont[fkey][fskey];
|
|
54
|
+
registerCSSVariable(val);
|
|
55
|
+
response.push(variableToCSS(val));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return response;
|
|
61
|
+
}
|
|
62
|
+
export {
|
|
63
|
+
insertFont,
|
|
64
|
+
parseFont,
|
|
65
|
+
registerFontVariables
|
|
66
|
+
};
|
|
67
|
+
//# sourceMappingURL=insertFont.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/insertFont.ts"],
|
|
4
|
+
"sourcesContent": ["import { setConfigFont } from './config'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\n/**\n * Runtime dynamic insert font\n */\nexport function insertFont<A extends GenericFont>(\n name: string,\n fontIn: A\n): DeepVariableObject<A> {\n const font = createFont(fontIn)\n const tokened = createVariables(font, name) as GenericFont\n const parsed = parseFont(tokened) as DeepVariableObject<A>\n if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {\n const fontVars = registerFontVariables(parsed)\n const style = document.createElement('style')\n style.innerText = `:root .font_${name} {${fontVars.join(';')}}`\n style.setAttribute('data-tamagui-font', name)\n document.head.appendChild(style)\n }\n setConfigFont(name, tokened, parsed)\n return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n const parsed: any = {}\n for (const attrKey in definition) {\n const attr = definition[attrKey]\n if (attrKey === 'family' || attrKey === 'face') {\n parsed[attrKey] = attr\n continue\n }\n parsed[attrKey] = {}\n for (const key in attr) {\n let val = attr[key] as any\n // is a theme reference\n if (val.val?.[0] === '$') {\n val = val.val\n }\n parsed[attrKey][`$${key}`] = val\n }\n }\n return parsed\n}\n\nexport function registerFontVariables(parsedFont: any) {\n const response: string[] = []\n\n for (const fkey in parsedFont) {\n if (fkey === 'face') continue\n if (fkey === 'family') {\n const val = parsedFont[fkey] as Variable\n registerCSSVariable(val)\n response.push(variableToCSS(val))\n } else {\n for (const fskey in parsedFont[fkey]) {\n const fval = parsedFont[fkey][fskey]\n if (typeof fval === 'string') {\n // no need to add its a theme reference like \"$borderColor\"\n } else {\n const val = parsedFont[fkey][fskey] as Variable\n registerCSSVariable(val)\n response.push(variableToCSS(val))\n }\n }\n }\n }\n return response\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAE3B,SAA6B,uBAAuB;AACpD,SAAS,qBAAqB,qBAAqB;AAM5C,SAAS,WACd,MACA,QACuB;AACvB,QAAM,OAAO,WAAW,MAAM;AAC9B,QAAM,UAAU,gBAAgB,MAAM,IAAI;AAC1C,QAAM,SAAS,UAAU,OAAO;AAChC,MAAI,QAAQ,IAAI,mBAAmB,SAAS,OAAO,aAAa,aAAa;AAC3E,UAAM,WAAW,sBAAsB,MAAM;AAC7C,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,eAAe,SAAS,SAAS,KAAK,GAAG;AAC3D,UAAM,aAAa,qBAAqB,IAAI;AAC5C,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AACA,gBAAc,MAAM,SAAS,MAAM;AACnC,SAAO;AACT;AAEO,SAAS,UAAiC,YAAsC;AA5BvF;AA6BE,QAAM,SAAc,CAAC;AACrB,aAAW,WAAW,YAAY;AAChC,UAAM,OAAO,WAAW,OAAO;AAC/B,QAAI,YAAY,YAAY,YAAY,QAAQ;AAC9C,aAAO,OAAO,IAAI;AAClB;AAAA,IACF;AACA,WAAO,OAAO,IAAI,CAAC;AACnB,eAAW,OAAO,MAAM;AACtB,UAAI,MAAM,KAAK,GAAG;AAElB,YAAI,SAAI,QAAJ,mBAAU,QAAO,KAAK;AACxB,cAAM,IAAI;AAAA,MACZ;AACA,aAAO,OAAO,EAAE,IAAI,KAAK,IAAI;AAAA,IAC/B;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,sBAAsB,YAAiB;AACrD,QAAM,WAAqB,CAAC;AAE5B,aAAW,QAAQ,YAAY;AAC7B,QAAI,SAAS;AAAQ;AACrB,QAAI,SAAS,UAAU;AACrB,YAAM,MAAM,WAAW,IAAI;AAC3B,0BAAoB,GAAG;AACvB,eAAS,KAAK,cAAc,GAAG,CAAC;AAAA,IAClC,OAAO;AACL,iBAAW,SAAS,WAAW,IAAI,GAAG;AACpC,cAAM,OAAO,WAAW,IAAI,EAAE,KAAK;AACnC,YAAI,OAAO,SAAS,UAAU;AAAA,QAE9B,OAAO;AACL,gBAAM,MAAM,WAAW,IAAI,EAAE,KAAK;AAClC,8BAAoB,GAAG;AACvB,mBAAS,KAAK,cAAc,GAAG,CAAC;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/setupHooks.ts"],
|
|
4
|
+
"sourcesContent": ["import { RefObject } from 'react'\n\nimport {\n GetStyleResult,\n TamaguiComponentEvents,\n TamaguiComponentState,\n TamaguiElement,\n} from './types'\n\nexport const hooks: InternalHooks = {}\n\n// internal hooks setup\nexport function setupHooks(next: InternalHooks) {\n Object.assign(hooks, next)\n}\n\ntype InternalHooks = {\n usePropsTransform?: (\n elementType: any,\n props: Record<string, any>,\n hostRef: RefObject<TamaguiElement>\n ) => any\n\n useEvents?: (\n viewProps: Record<string, any>,\n events: TamaguiComponentEvents | null,\n splitStyles: GetStyleResult,\n setStateShallow: (next: Partial<TamaguiComponentState>) => void\n ) => any\n\n getBaseViews?: () => {\n View: any\n Text: any\n }\n}\n"],
|
|
5
|
+
"mappings": "AASO,MAAM,QAAuB,CAAC;AAG9B,SAAS,WAAW,MAAqB;AAC9C,SAAO,OAAO,OAAO,IAAI;AAC3B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const ReactNativeStaticConfigs = /* @__PURE__ */ new WeakMap();
|
|
2
|
+
function getReactNativeConfig(Component) {
|
|
3
|
+
return ReactNativeStaticConfigs.get(Component);
|
|
4
|
+
}
|
|
5
|
+
function setupReactNative(rnExports) {
|
|
6
|
+
for (const key in rnExports) {
|
|
7
|
+
if (key[0].toLowerCase() === key[0])
|
|
8
|
+
continue;
|
|
9
|
+
const val = rnExports[key];
|
|
10
|
+
if (val && typeof val === "object") {
|
|
11
|
+
ReactNativeStaticConfigs.set(val, {
|
|
12
|
+
isReactNative: true,
|
|
13
|
+
isText: key === "Text" || key === "TextInput",
|
|
14
|
+
isInput: key === "TextInput",
|
|
15
|
+
inlineProps: key === "Image" ? /* @__PURE__ */ new Set(["src", "width", "height"]) : void 0
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
export {
|
|
21
|
+
ReactNativeStaticConfigs,
|
|
22
|
+
getReactNativeConfig,
|
|
23
|
+
setupReactNative
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=setupReactNative.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/setupReactNative.ts"],
|
|
4
|
+
"sourcesContent": ["import { StaticConfig } from './types'\n\nexport const ReactNativeStaticConfigs = new WeakMap<any, Partial<StaticConfig> | null>()\n\nexport function getReactNativeConfig(Component: any) {\n return ReactNativeStaticConfigs.get(Component)\n}\n\nexport function setupReactNative(rnExports: Record<string, any>) {\n for (const key in rnExports) {\n if (key[0].toLowerCase() === key[0]) continue\n const val = rnExports[key]\n if (val && typeof val === 'object') {\n ReactNativeStaticConfigs.set(val, {\n isReactNative: true,\n isText: key === 'Text' || key === 'TextInput',\n isInput: key === 'TextInput',\n inlineProps: key === 'Image' ? new Set(['src', 'width', 'height']) : undefined,\n })\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "AAEO,MAAM,2BAA2B,oBAAI,QAA2C;AAEhF,SAAS,qBAAqB,WAAgB;AACnD,SAAO,yBAAyB,IAAI,SAAS;AAC/C;AAEO,SAAS,iBAAiB,WAAgC;AAC/D,aAAW,OAAO,WAAW;AAC3B,QAAI,IAAI,CAAC,EAAE,YAAY,MAAM,IAAI,CAAC;AAAG;AACrC,UAAM,MAAM,UAAU,GAAG;AACzB,QAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,+BAAyB,IAAI,KAAK;AAAA,QAChC,eAAe;AAAA,QACf,QAAQ,QAAQ,UAAU,QAAQ;AAAA,QAClC,SAAS,QAAQ;AAAA,QACjB,aAAa,QAAQ,UAAU,oBAAI,IAAI,CAAC,OAAO,SAAS,QAAQ,CAAC,IAAI;AAAA,MACvE,CAAC;AAAA,IACH;AAAA,EACF;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { stylePropsAll } from "@tamagui/helpers";
|
|
2
|
+
import { createComponent } from "./createComponent";
|
|
3
|
+
import { ReactNativeStaticConfigs } from "./setupReactNative";
|
|
4
|
+
function styled(Component, options, staticExtractionOptions) {
|
|
5
|
+
if (process.env.NODE_ENV !== "production") {
|
|
6
|
+
if (!Component) {
|
|
7
|
+
throw new Error(`No component given to styled()`);
|
|
8
|
+
}
|
|
9
|
+
if (options == null ? void 0 : options.variants) {
|
|
10
|
+
for (const key in options.variants) {
|
|
11
|
+
if (key in stylePropsAll) {
|
|
12
|
+
console.error(
|
|
13
|
+
`Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
const staticConfigProps = (() => {
|
|
20
|
+
const parentStaticConfig = "staticConfig" in Component ? Component.staticConfig : null;
|
|
21
|
+
if (options) {
|
|
22
|
+
const {
|
|
23
|
+
variants,
|
|
24
|
+
name,
|
|
25
|
+
defaultVariants,
|
|
26
|
+
acceptsClassName: acceptsClassNameProp,
|
|
27
|
+
...defaultProps
|
|
28
|
+
} = options;
|
|
29
|
+
if (defaultVariants) {
|
|
30
|
+
Object.assign(defaultProps, defaultVariants);
|
|
31
|
+
}
|
|
32
|
+
const isReactNative = Boolean(
|
|
33
|
+
ReactNativeStaticConfigs.has(Component) || ReactNativeStaticConfigs.has(parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNative) || (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isReactNative)
|
|
34
|
+
);
|
|
35
|
+
const isTamagui = !isReactNative && !!parentStaticConfig;
|
|
36
|
+
const Comp = isReactNative ? (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || Component : Component;
|
|
37
|
+
const nativeConf = isReactNative && ReactNativeStaticConfigs.get(Comp) || null;
|
|
38
|
+
const isText = Boolean(
|
|
39
|
+
(staticExtractionOptions == null ? void 0 : staticExtractionOptions.isText) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isText)
|
|
40
|
+
);
|
|
41
|
+
const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative);
|
|
42
|
+
const conf = {
|
|
43
|
+
...staticExtractionOptions,
|
|
44
|
+
...!isTamagui && {
|
|
45
|
+
Component: Comp
|
|
46
|
+
},
|
|
47
|
+
// this type gets messed up by options?: Partial<GetProps<ParentComponent>> above
|
|
48
|
+
// take away the Partial<> and it's fine
|
|
49
|
+
variants,
|
|
50
|
+
defaultProps,
|
|
51
|
+
defaultVariants,
|
|
52
|
+
componentName: name,
|
|
53
|
+
isReactNative,
|
|
54
|
+
isText,
|
|
55
|
+
acceptsClassName,
|
|
56
|
+
...nativeConf
|
|
57
|
+
};
|
|
58
|
+
if (defaultProps.children || !acceptsClassName) {
|
|
59
|
+
conf.neverFlatten = true;
|
|
60
|
+
}
|
|
61
|
+
return conf;
|
|
62
|
+
}
|
|
63
|
+
return {};
|
|
64
|
+
})();
|
|
65
|
+
const component = createComponent(staticConfigProps, Component);
|
|
66
|
+
return component;
|
|
67
|
+
}
|
|
68
|
+
export {
|
|
69
|
+
styled
|
|
70
|
+
};
|
|
71
|
+
//# sourceMappingURL=styled.mjs.map
|