@tamagui/core 1.0.0-beta.189 → 1.0.0-beta.205
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/Tamagui.js +5 -0
- package/dist/cjs/Tamagui.js.map +2 -2
- package/dist/cjs/constants/pseudos.js +37 -0
- package/dist/cjs/constants/pseudos.js.map +7 -0
- package/dist/cjs/createComponent.js +66 -88
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createShallowUpdate.js +1 -0
- package/dist/cjs/createShallowUpdate.js.map +7 -0
- package/dist/cjs/defaultComponentState.js +0 -30
- package/dist/cjs/defaultComponentState.js.map +3 -3
- package/dist/cjs/devtools.js +32 -0
- package/dist/cjs/devtools.js.map +7 -0
- package/dist/cjs/helpers/RNComponents.js +34 -0
- package/dist/cjs/helpers/RNComponents.js.map +7 -0
- package/dist/cjs/helpers/createMediaStyle.js +2 -0
- package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +25 -26
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/createShallowUpdate.js +51 -0
- package/dist/cjs/helpers/createShallowUpdate.js.map +7 -0
- package/dist/cjs/helpers/createTamaguiProvider.js +1 -5
- package/dist/cjs/helpers/createTamaguiProvider.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +25 -14
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +1 -0
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/insertStyleRule.js +11 -6
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/hooks/useFeatures.js +93 -7
- package/dist/cjs/hooks/useFeatures.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +13 -14
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/styled.js +2 -12
- package/dist/cjs/styled.js.map +2 -2
- package/dist/cjs/tamagui-base.css +8 -0
- package/dist/cjs/tamagui-base.css.map +7 -0
- package/dist/cjs/types-rnw.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/views/Stack.js +1 -0
- package/dist/cjs/views/Stack.js.map +2 -2
- package/dist/cjs/views/Text.js +1 -0
- package/dist/cjs/views/Text.js.map +2 -2
- package/dist/cjs/views/Theme.js +4 -1
- package/dist/cjs/views/Theme.js.map +2 -2
- package/dist/esm/Tamagui.js +2 -0
- package/dist/esm/Tamagui.js.map +2 -2
- package/dist/esm/constants/pseudos.js +18 -0
- package/dist/esm/constants/pseudos.js.map +7 -0
- package/dist/esm/createComponent.js +66 -91
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createShallowUpdate.js +1 -0
- package/dist/esm/createShallowUpdate.js.map +7 -0
- package/dist/esm/defaultComponentState.js +0 -11
- package/dist/esm/defaultComponentState.js.map +3 -3
- package/dist/esm/devtools.js +14 -0
- package/dist/esm/devtools.js.map +7 -0
- package/dist/esm/helpers/RNComponents.js +12 -0
- package/dist/esm/helpers/RNComponents.js.map +7 -0
- package/dist/esm/helpers/createMediaStyle.js +2 -0
- package/dist/esm/helpers/createMediaStyle.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +25 -26
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/createShallowUpdate.js +19 -0
- package/dist/esm/helpers/createShallowUpdate.js.map +7 -0
- package/dist/esm/helpers/createTamaguiProvider.js +1 -4
- package/dist/esm/helpers/createTamaguiProvider.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +25 -14
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +1 -0
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +11 -6
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/hooks/useFeatures.js +93 -12
- package/dist/esm/hooks/useFeatures.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +13 -14
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/styled.js +1 -8
- package/dist/esm/styled.js.map +2 -2
- package/dist/esm/tamagui-base.css +8 -0
- package/dist/esm/tamagui-base.css.map +7 -0
- package/dist/esm/views/Stack.js +1 -0
- package/dist/esm/views/Stack.js.map +2 -2
- package/dist/esm/views/Text.js +1 -0
- package/dist/esm/views/Text.js.map +2 -2
- package/dist/esm/views/Theme.js +4 -1
- package/dist/esm/views/Theme.js.map +2 -2
- package/dist/jsx/Tamagui.js +2 -0
- package/dist/jsx/constants/pseudos.js +17 -0
- package/dist/jsx/createComponent.js +62 -88
- package/dist/jsx/createShallowUpdate.js +0 -0
- package/dist/jsx/defaultComponentState.js +0 -11
- package/dist/jsx/devtools.js +13 -0
- package/dist/jsx/helpers/RNComponents.js +11 -0
- package/dist/jsx/helpers/createMediaStyle.js +2 -0
- package/dist/jsx/helpers/createPropMapper.js +25 -26
- package/dist/jsx/helpers/createShallowUpdate.js +18 -0
- package/dist/jsx/helpers/createTamaguiProvider.js +1 -2
- package/dist/jsx/helpers/getSplitStyles.js +25 -14
- package/dist/jsx/helpers/getStylesAtomic.js +1 -0
- package/dist/jsx/helpers/insertStyleRule.js +11 -6
- package/dist/jsx/hooks/useFeatures.js +93 -12
- package/dist/jsx/hooks/useTheme.js +13 -14
- package/dist/jsx/styled.js +1 -8
- package/dist/jsx/tamagui-base.css +7 -0
- package/dist/jsx/views/Stack.js +1 -0
- package/dist/jsx/views/Text.js +1 -0
- package/dist/jsx/views/Theme.js +4 -1
- package/package.json +6 -6
- package/types/Tamagui.d.ts +2 -0
- package/types/Tamagui.d.ts.map +1 -1
- package/types/createComponent.d.ts +5 -6
- package/types/createComponent.d.ts.map +1 -1
- package/types/createFont.d.ts +1 -1
- package/types/createFont.d.ts.map +1 -1
- package/types/defaultComponentState.d.ts +0 -12
- package/types/defaultComponentState.d.ts.map +1 -1
- package/types/helpers/RNComponents.d.ts +2 -0
- package/types/helpers/RNComponents.d.ts.map +1 -0
- package/types/helpers/createMediaStyle.d.ts.map +1 -1
- package/types/helpers/createPropMapper.d.ts +2 -2
- package/types/helpers/createPropMapper.d.ts.map +1 -1
- package/types/helpers/createShallowUpdate.d.ts +4 -0
- package/types/helpers/createShallowUpdate.d.ts.map +1 -0
- package/types/helpers/createTamaguiProvider.d.ts +1 -1
- package/types/helpers/createTamaguiProvider.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts +3 -14
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/insertStyleRule.d.ts.map +1 -1
- package/types/hooks/useFeatures.d.ts +7 -5
- package/types/hooks/useFeatures.d.ts.map +1 -1
- package/types/styled.d.ts +3 -7
- package/types/styled.d.ts.map +1 -1
- package/types/types-rnw.d.ts +0 -5
- package/types/types-rnw.d.ts.map +1 -1
- package/types/types.d.ts +82 -69
- package/types/types.d.ts.map +1 -1
- package/types/views/Stack.d.ts +2 -2
- package/types/views/Stack.d.ts.map +1 -1
- package/types/views/Text.d.ts +2 -2
- package/types/views/Text.d.ts.map +1 -1
- package/types/views/Theme.d.ts.map +1 -1
|
@@ -4,8 +4,8 @@ import { getConfig } from "../conf";
|
|
|
4
4
|
import { isWeb } from "../constants/platform";
|
|
5
5
|
import { isVariable } from "../createVariable";
|
|
6
6
|
import { isObj } from "./isObj";
|
|
7
|
-
const createPropMapper = /* @__PURE__ */ __name((
|
|
8
|
-
const variants =
|
|
7
|
+
const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
|
|
8
|
+
const variants = staticConfig.variants || {};
|
|
9
9
|
function getVariantFunction(variant, key, value) {
|
|
10
10
|
for (const cat in tokenCategories) {
|
|
11
11
|
if (key in tokenCategories[cat]) {
|
|
@@ -27,8 +27,8 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
|
|
|
27
27
|
return fn || variant["..."] || variant["...size"];
|
|
28
28
|
}
|
|
29
29
|
__name(getVariantFunction, "getVariantFunction");
|
|
30
|
-
const defaultProps =
|
|
31
|
-
return (key, value, theme, props,
|
|
30
|
+
const defaultProps = staticConfig.defaultProps || {};
|
|
31
|
+
return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
|
|
32
32
|
const conf = getConfig();
|
|
33
33
|
if (!conf) {
|
|
34
34
|
console.trace("no conf! err");
|
|
@@ -38,29 +38,28 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
|
|
|
38
38
|
const variant = variants && variants[key];
|
|
39
39
|
if (variant && value !== void 0) {
|
|
40
40
|
let variantValue = getVariantFunction(variant, key, value);
|
|
41
|
-
if (
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
return Reflect.get(staticConfig.defaultProps, key2);
|
|
41
|
+
if (variantValue) {
|
|
42
|
+
if (typeof variantValue === "function") {
|
|
43
|
+
variantValue = variantValue(value, {
|
|
44
|
+
tokens: conf.tokensParsed,
|
|
45
|
+
theme,
|
|
46
|
+
props: avoidDefaultProps ? props : new Proxy(props, {
|
|
47
|
+
get(target, key2) {
|
|
48
|
+
if (Reflect.has(target, key2)) {
|
|
49
|
+
return Reflect.get(target, key2);
|
|
50
|
+
}
|
|
51
|
+
if (staticConfig.defaultProps) {
|
|
52
|
+
return Reflect.get(staticConfig.defaultProps, key2);
|
|
53
|
+
}
|
|
55
54
|
}
|
|
56
|
-
}
|
|
57
|
-
})
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
55
|
+
})
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
if (isObj(variantValue)) {
|
|
59
|
+
variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
|
|
60
|
+
}
|
|
61
|
+
return variantValue;
|
|
62
62
|
}
|
|
63
|
-
return variantValue;
|
|
64
63
|
}
|
|
65
64
|
let shouldReturn = false;
|
|
66
65
|
if (conf.shorthands[key]) {
|
|
@@ -161,7 +160,7 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fo
|
|
|
161
160
|
}
|
|
162
161
|
if (process.env.NODE_ENV === "development") {
|
|
163
162
|
if (value && value[0] === "$") {
|
|
164
|
-
console.warn(`\u26A0\uFE0F Missing token in theme:`, value
|
|
163
|
+
console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
|
|
165
164
|
return null;
|
|
166
165
|
}
|
|
167
166
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
function createShallowUpdate(setter) {
|
|
4
|
+
return (next) => {
|
|
5
|
+
setter((prev) => {
|
|
6
|
+
for (const key in next) {
|
|
7
|
+
if (prev[key] !== next[key]) {
|
|
8
|
+
return { ...prev, ...next };
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
return prev;
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
__name(createShallowUpdate, "createShallowUpdate");
|
|
16
|
+
export {
|
|
17
|
+
createShallowUpdate
|
|
18
|
+
};
|
|
@@ -10,7 +10,6 @@ function createTamaguiProvider({
|
|
|
10
10
|
}) {
|
|
11
11
|
return /* @__PURE__ */ __name(function TamaguiProvider({
|
|
12
12
|
injectCSS,
|
|
13
|
-
fallback,
|
|
14
13
|
children,
|
|
15
14
|
...themePropsProvider
|
|
16
15
|
}) {
|
|
@@ -26,7 +25,7 @@ function createTamaguiProvider({
|
|
|
26
25
|
};
|
|
27
26
|
}, []);
|
|
28
27
|
}
|
|
29
|
-
return <ButtonInsideButtonContext.Provider value={false}><TextAncestorProvider><ThemeProvider {...themeProps} {...themePropsProvider}
|
|
28
|
+
return <ButtonInsideButtonContext.Provider value={false}><TextAncestorProvider><ThemeProvider {...themeProps} {...themePropsProvider}>{children}</ThemeProvider></TextAncestorProvider></ButtonInsideButtonContext.Provider>;
|
|
30
29
|
}, "TamaguiProvider");
|
|
31
30
|
}
|
|
32
31
|
__name(createTamaguiProvider, "createTamaguiProvider");
|
|
@@ -34,7 +34,6 @@ function normalizeStyleObject(style) {
|
|
|
34
34
|
}
|
|
35
35
|
__name(normalizeStyleObject, "normalizeStyleObject");
|
|
36
36
|
const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
|
|
37
|
-
var _a, _b, _c;
|
|
38
37
|
const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
|
|
39
38
|
const viewProps = {};
|
|
40
39
|
const style = {};
|
|
@@ -51,12 +50,16 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
51
50
|
if (val.startsWith("_transform-")) {
|
|
52
51
|
const isMediaOrPseudo = key !== "transform";
|
|
53
52
|
const isMedia = isMediaOrPseudo && key[11] === "_";
|
|
54
|
-
const isPsuedo = isMediaOrPseudo &&
|
|
53
|
+
const isPsuedo = isMediaOrPseudo && key[11] === "0";
|
|
55
54
|
const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
|
|
56
55
|
if (!insertedTransforms[val]) {
|
|
57
56
|
updateInserted();
|
|
58
57
|
}
|
|
59
58
|
const transform = insertedTransforms[val];
|
|
59
|
+
if (!transform || transform === "undefined") {
|
|
60
|
+
console.trace("NO TRANSFORM", { key, val }, state);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
60
63
|
transforms[namespace] = transforms[namespace] || ["", ""];
|
|
61
64
|
transforms[namespace][0] += val.replace("_transform", "");
|
|
62
65
|
transforms[namespace][1] += transform;
|
|
@@ -79,7 +82,8 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
79
82
|
style[atomicStyle.property] = atomicStyle.value;
|
|
80
83
|
}
|
|
81
84
|
}
|
|
82
|
-
}
|
|
85
|
+
}
|
|
86
|
+
if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
|
|
83
87
|
for (const key in cur) {
|
|
84
88
|
if (key in stylePropsTransform) {
|
|
85
89
|
mergeTransform(style, key, cur[key]);
|
|
@@ -88,6 +92,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
88
92
|
}
|
|
89
93
|
}
|
|
90
94
|
}
|
|
95
|
+
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
96
|
+
console.log("getSplitStyles.push", { state, cur });
|
|
97
|
+
}
|
|
91
98
|
cur = null;
|
|
92
99
|
}
|
|
93
100
|
__name(push, "push");
|
|
@@ -109,13 +116,16 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
109
116
|
}
|
|
110
117
|
let isMedia = keyInit[0] === "$";
|
|
111
118
|
let isPseudo = validPseudoKeys[keyInit];
|
|
112
|
-
const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, props,
|
|
119
|
+
const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
|
|
113
120
|
const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
|
|
121
|
+
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
122
|
+
console.log("split style", keyInit, expanded);
|
|
123
|
+
}
|
|
114
124
|
for (const [key, val] of expanded) {
|
|
115
125
|
if (val === void 0) {
|
|
116
126
|
continue;
|
|
117
127
|
}
|
|
118
|
-
if (val && val[0] === "_") {
|
|
128
|
+
if (key !== "target" && val && val[0] === "_") {
|
|
119
129
|
mergeClassName(key, val);
|
|
120
130
|
continue;
|
|
121
131
|
}
|
|
@@ -131,12 +141,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
131
141
|
continue;
|
|
132
142
|
}
|
|
133
143
|
pseudos[key] = pseudos[key] || {};
|
|
134
|
-
pseudos[key] = getSubStyle(val, staticConfig, theme, props, state
|
|
144
|
+
pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
|
|
135
145
|
if (isWeb && !state.noClassNames) {
|
|
136
146
|
const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
|
|
137
|
-
if ((_b = (_a = pseudoStyles[0]) == null ? void 0 : _a.identifier) == null ? void 0 : _b.includes("undefined")) {
|
|
138
|
-
console.warn("undefined bug?", (_c = pseudoStyles[0]) == null ? void 0 : _c.identifier);
|
|
139
|
-
}
|
|
140
147
|
for (const style2 of pseudoStyles) {
|
|
141
148
|
mergeClassName(`${style2.property}-${key}`, style2.identifier);
|
|
142
149
|
insertStyleRule(style2.identifier, style2.rules[0]);
|
|
@@ -147,10 +154,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
147
154
|
if (isMedia) {
|
|
148
155
|
const mediaKey = key.slice(1);
|
|
149
156
|
if (!mediaQueryConfig[mediaKey]) {
|
|
150
|
-
viewProps[key] =
|
|
157
|
+
viewProps[key] = val;
|
|
151
158
|
continue;
|
|
152
159
|
}
|
|
153
|
-
const mediaStyle = getSubStyle(
|
|
160
|
+
const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
|
|
154
161
|
if (isWeb) {
|
|
155
162
|
const mediaStyles = getStylesAtomic(mediaStyle);
|
|
156
163
|
for (const style2 of mediaStyles) {
|
|
@@ -202,6 +209,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
202
209
|
classNames[namespace] = identifier;
|
|
203
210
|
}
|
|
204
211
|
}
|
|
212
|
+
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
213
|
+
console.log("out", { style, pseudos, medias, classNames, viewProps });
|
|
214
|
+
}
|
|
205
215
|
return {
|
|
206
216
|
viewProps,
|
|
207
217
|
style,
|
|
@@ -210,11 +220,11 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
210
220
|
classNames
|
|
211
221
|
};
|
|
212
222
|
}, "getSplitStyles");
|
|
213
|
-
const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
|
|
223
|
+
const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
|
|
214
224
|
const styleOut = {};
|
|
215
225
|
for (const key in styleIn) {
|
|
216
226
|
const val = styleIn[key];
|
|
217
|
-
const out = staticConfig.propMapper(key, val, theme, props,
|
|
227
|
+
const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
|
|
218
228
|
const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
|
|
219
229
|
for (const [skey, sval] of expanded) {
|
|
220
230
|
if (skey in stylePropsTransform) {
|
|
@@ -228,5 +238,6 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
|
|
|
228
238
|
return styleOut;
|
|
229
239
|
}, "getSubStyle");
|
|
230
240
|
export {
|
|
231
|
-
getSplitStyles
|
|
241
|
+
getSplitStyles,
|
|
242
|
+
getSubStyle
|
|
232
243
|
};
|
|
@@ -19,8 +19,9 @@ function addTransform(identifier, rule) {
|
|
|
19
19
|
}
|
|
20
20
|
__name(addTransform, "addTransform");
|
|
21
21
|
let hasInsertedSinceUpdate = true;
|
|
22
|
+
const isClient = typeof document !== "undefined";
|
|
22
23
|
function updateInserted() {
|
|
23
|
-
if (
|
|
24
|
+
if (!isClient) {
|
|
24
25
|
return;
|
|
25
26
|
}
|
|
26
27
|
if (!hasInsertedSinceUpdate) {
|
|
@@ -33,17 +34,18 @@ function updateInserted() {
|
|
|
33
34
|
for (let i = 0; i < sheets.length; i++) {
|
|
34
35
|
const rules = sheets[i].cssRules;
|
|
35
36
|
const firstRule = rules[0];
|
|
36
|
-
if (!firstRule)
|
|
37
|
+
if (!(firstRule instanceof CSSStyleRule))
|
|
37
38
|
continue;
|
|
38
|
-
const firstSelector = firstRule
|
|
39
|
+
const firstSelector = firstRule.selectorText;
|
|
39
40
|
if (!firstSelector)
|
|
40
41
|
continue;
|
|
41
42
|
if (firstSelector === ":root" || firstSelector.startsWith("._")) {
|
|
42
|
-
for (
|
|
43
|
-
|
|
43
|
+
for (let i2 = 0; i2 < rules.length; i2++) {
|
|
44
|
+
const rule = rules.item(i2);
|
|
45
|
+
if (!(rule instanceof CSSStyleRule))
|
|
44
46
|
continue;
|
|
45
47
|
const identifier = rule.selectorText.slice(1);
|
|
46
|
-
allSelectors[identifier] = true;
|
|
48
|
+
allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
|
|
47
49
|
if (identifier.startsWith("_transform")) {
|
|
48
50
|
addTransform(identifier, rule.cssText);
|
|
49
51
|
}
|
|
@@ -60,6 +62,9 @@ function insertStyleRule(identifier, rule) {
|
|
|
60
62
|
return;
|
|
61
63
|
}
|
|
62
64
|
hasInsertedSinceUpdate = true;
|
|
65
|
+
if (identifier === "_transform-1abwpjw") {
|
|
66
|
+
console.trace("inserting", identifier, rule);
|
|
67
|
+
}
|
|
63
68
|
insertedSelectors[identifier] = rule;
|
|
64
69
|
allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
|
|
65
70
|
if (identifier.startsWith("_transform")) {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
|
|
4
|
+
import { getSubStyle } from "../helpers/getSplitStyles";
|
|
4
5
|
import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
|
|
5
6
|
const createDefinition = /* @__PURE__ */ __name(({
|
|
6
7
|
Component,
|
|
@@ -35,33 +36,113 @@ __name(loadFeatures, "loadFeatures");
|
|
|
35
36
|
function loadAnimationFeature() {
|
|
36
37
|
return createDefinition({
|
|
37
38
|
Component: ({ _utils, ...props }) => {
|
|
38
|
-
const {
|
|
39
|
+
const {
|
|
40
|
+
state,
|
|
41
|
+
useAnimations,
|
|
42
|
+
pseudos,
|
|
43
|
+
style: inStyle,
|
|
44
|
+
setStateShallow,
|
|
45
|
+
staticConfig,
|
|
46
|
+
theme,
|
|
47
|
+
onDidAnimate
|
|
48
|
+
} = _utils;
|
|
39
49
|
if (!useAnimations) {
|
|
40
50
|
console.error("no useAnimations hook provided");
|
|
41
51
|
return null;
|
|
42
52
|
}
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
+
const propsWithAnimation = props;
|
|
54
|
+
const res = useAnimations(propsWithAnimation, {
|
|
55
|
+
state,
|
|
56
|
+
pseudos,
|
|
57
|
+
onDidAnimate,
|
|
58
|
+
staticConfig,
|
|
59
|
+
getStyle({ isEntering, exitVariant, enterVariant } = {}) {
|
|
60
|
+
var _a, _b, _c, _d;
|
|
61
|
+
const style = inStyle || {};
|
|
62
|
+
const enterStyle = isEntering === true || state.mounted === false ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle((_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state) || pseudos.enterStyle : pseudos.enterStyle : null;
|
|
63
|
+
const exitStyle = isEntering === false ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state) || pseudos.exitStyle : pseudos.exitStyle : null;
|
|
64
|
+
ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
|
|
65
|
+
enterStyle && merge(style, enterStyle);
|
|
66
|
+
state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
|
|
67
|
+
state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
|
|
68
|
+
state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
|
|
69
|
+
exitStyle && merge(style, exitStyle);
|
|
70
|
+
return style;
|
|
71
|
+
}
|
|
53
72
|
});
|
|
54
73
|
useIsomorphicLayoutEffect(() => {
|
|
55
74
|
setStateShallow({
|
|
56
75
|
animation: res
|
|
57
76
|
});
|
|
58
|
-
}, [
|
|
77
|
+
}, [res]);
|
|
59
78
|
return null;
|
|
60
79
|
},
|
|
61
80
|
propNames: ["animation"]
|
|
62
81
|
});
|
|
63
82
|
}
|
|
64
83
|
__name(loadAnimationFeature, "loadAnimationFeature");
|
|
84
|
+
const defaults = {
|
|
85
|
+
left: 0,
|
|
86
|
+
right: 0,
|
|
87
|
+
top: 0,
|
|
88
|
+
bottom: 0,
|
|
89
|
+
opacity: 1,
|
|
90
|
+
translateX: 0,
|
|
91
|
+
translateY: 0,
|
|
92
|
+
skew: 0,
|
|
93
|
+
skewX: 0,
|
|
94
|
+
skewY: 0,
|
|
95
|
+
scale: 1,
|
|
96
|
+
rotate: "0deg",
|
|
97
|
+
rotateY: "0deg",
|
|
98
|
+
rotateX: "0deg"
|
|
99
|
+
};
|
|
100
|
+
function ensureBaseHasDefaults(base, ...pseudos) {
|
|
101
|
+
for (const pseudo of pseudos) {
|
|
102
|
+
if (!pseudo)
|
|
103
|
+
continue;
|
|
104
|
+
for (const key in pseudo) {
|
|
105
|
+
const val = pseudo[key];
|
|
106
|
+
if (key === "transform") {
|
|
107
|
+
for (const t of val) {
|
|
108
|
+
const tkey = Object.keys(t)[0];
|
|
109
|
+
const defaultVal = defaults[tkey];
|
|
110
|
+
const tDefaultVal = { [tkey]: defaultVal };
|
|
111
|
+
if (!base.transform) {
|
|
112
|
+
base.transform = [tDefaultVal];
|
|
113
|
+
} else {
|
|
114
|
+
if (!base.transform.find((x) => x[tkey])) {
|
|
115
|
+
base.transform.push(tDefaultVal);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
} else {
|
|
120
|
+
if (!(key in base)) {
|
|
121
|
+
base[key] = defaults[key];
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
__name(ensureBaseHasDefaults, "ensureBaseHasDefaults");
|
|
128
|
+
function merge(base, next) {
|
|
129
|
+
if (!next.transform || !base.transform) {
|
|
130
|
+
Object.assign(base, next);
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
const { transform, ...rest } = next;
|
|
134
|
+
Object.assign(base, rest);
|
|
135
|
+
for (const t of transform) {
|
|
136
|
+
const key = Object.keys(t)[0];
|
|
137
|
+
const existing = base.transform.find((x) => key in x);
|
|
138
|
+
if (existing) {
|
|
139
|
+
existing[key] = t[key];
|
|
140
|
+
} else {
|
|
141
|
+
base.transform.push(t);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
__name(merge, "merge");
|
|
65
146
|
function loadMediaQueryFeature() {
|
|
66
147
|
const mediaPropNames = Object.keys(mediaState);
|
|
67
148
|
return createDefinition({
|
|
@@ -49,14 +49,14 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
|
|
|
49
49
|
return Reflect.has(theme, key);
|
|
50
50
|
},
|
|
51
51
|
get(_, key) {
|
|
52
|
-
if (!name || key === "__proto__") {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
return
|
|
52
|
+
if (!name || key === "__proto__" || typeof key === "symbol") {
|
|
53
|
+
if (key === GetThemeManager) {
|
|
54
|
+
if (!didChangeTheme) {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
return themeManager;
|
|
58
58
|
}
|
|
59
|
-
return
|
|
59
|
+
return Reflect.get(_, key);
|
|
60
60
|
}
|
|
61
61
|
if (process.env.NODE_ENV === "development") {
|
|
62
62
|
if (key === "__state") {
|
|
@@ -73,11 +73,6 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
|
|
|
73
73
|
console.error("No themeManager");
|
|
74
74
|
return;
|
|
75
75
|
}
|
|
76
|
-
if (process.env.NODE_ENV === "development") {
|
|
77
|
-
if ((props == null ? void 0 : props["debug"]) === "verbose") {
|
|
78
|
-
console.log(" \xBB accessing theme val", key, { ...state.current });
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
76
|
if (typeof key === "string") {
|
|
82
77
|
if (key[0] === "$") {
|
|
83
78
|
key = key.slice(1);
|
|
@@ -86,12 +81,16 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
|
|
|
86
81
|
if (val) {
|
|
87
82
|
if (state.current.isRendering) {
|
|
88
83
|
state.current.keys.add(key);
|
|
84
|
+
if (process.env.NODE_ENV === "development") {
|
|
85
|
+
if ((props == null ? void 0 : props["debug"]) === "verbose") {
|
|
86
|
+
console.log(" \xBB tracking theme key", key);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
89
|
}
|
|
90
90
|
return val;
|
|
91
91
|
}
|
|
92
92
|
if (process.env.NODE_ENV === "development") {
|
|
93
|
-
console.
|
|
94
|
-
return null;
|
|
93
|
+
console.log(`No theme value "${String(key)}" in ${name}`);
|
|
95
94
|
}
|
|
96
95
|
}
|
|
97
96
|
return Reflect.get(_, key);
|
package/dist/jsx/styled.js
CHANGED
|
@@ -1,16 +1,9 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import * as ReactNative from "react-native";
|
|
4
3
|
import { Image, Text, TextInput } from "react-native";
|
|
5
4
|
import { createComponent } from "./createComponent";
|
|
6
5
|
import { extendStaticConfig } from "./helpers/extendStaticConfig";
|
|
7
|
-
|
|
8
|
-
for (const key of ["Image", "TextInput", "Text", "View"]) {
|
|
9
|
-
const val = ReactNative[key];
|
|
10
|
-
if (val && typeof val === "object") {
|
|
11
|
-
RNComponents.set(val, true);
|
|
12
|
-
}
|
|
13
|
-
}
|
|
6
|
+
import { RNComponents } from "./helpers/RNComponents";
|
|
14
7
|
function styled(Component, options, staticExtractionOptions) {
|
|
15
8
|
const staticConfigProps = (() => {
|
|
16
9
|
if (options) {
|
package/dist/jsx/views/Stack.js
CHANGED
package/dist/jsx/views/Text.js
CHANGED
package/dist/jsx/views/Theme.js
CHANGED
|
@@ -16,7 +16,10 @@ const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
|
|
|
16
16
|
}
|
|
17
17
|
const contents = useMemo(() => wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
|
|
18
18
|
if (isWeb) {
|
|
19
|
-
return <div className={
|
|
19
|
+
return <div className={[
|
|
20
|
+
`tui_Theme`,
|
|
21
|
+
...!props.disableThemeClass ? [props.className, className].filter(Boolean) : []
|
|
22
|
+
].join(" ")} style={{
|
|
20
23
|
display: "contents",
|
|
21
24
|
color: (_b = (_a = themes[name]) == null ? void 0 : _a.color) == null ? void 0 : _b.toString()
|
|
22
25
|
}}>{contents}</div>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.205+6a67c74d",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
"dist"
|
|
20
20
|
],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@tamagui/helpers": "^1.0.0-beta.
|
|
22
|
+
"@tamagui/helpers": "^1.0.0-beta.205+6a67c74d",
|
|
23
23
|
"@tamagui/ow": "^0.28.1",
|
|
24
|
-
"@tamagui/use-debounce": "^1.0.0-beta.
|
|
25
|
-
"@tamagui/use-force-update": "^1.0.0-beta.
|
|
24
|
+
"@tamagui/use-debounce": "^1.0.0-beta.205+6a67c74d",
|
|
25
|
+
"@tamagui/use-force-update": "^1.0.0-beta.205+6a67c74d",
|
|
26
26
|
"react": "*",
|
|
27
27
|
"react-dom": "*"
|
|
28
28
|
},
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"react-native-web": "*"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@tamagui/build": "^1.0.0-beta.
|
|
33
|
+
"@tamagui/build": "^1.0.0-beta.205+6a67c74d",
|
|
34
34
|
"@types/react": "^17.0.35",
|
|
35
35
|
"csstype": "^3.0.10",
|
|
36
36
|
"esbuild": "^0.14.36",
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "6a67c74d67416b6c81169e1cc25e239ab935f651"
|
|
44
44
|
}
|
package/types/Tamagui.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import * as Helpers from '@tamagui/helpers';
|
|
1
2
|
import { TamaguiInternalConfig } from './types';
|
|
2
3
|
declare class TamaguiManager {
|
|
3
4
|
config: TamaguiInternalConfig | null;
|
|
4
5
|
rnw: Record<string, any>;
|
|
6
|
+
Helpers: typeof Helpers;
|
|
5
7
|
get allSelectors(): {};
|
|
6
8
|
get allTransforms(): {};
|
|
7
9
|
get identifierToValue(): Map<string, any>;
|
package/types/Tamagui.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAI3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAI/C,cAAM,cAAc;IAClB,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAAO;IAC3C,GAAG,sBAAM;IACT,OAAO,iBAAU;IAEjB,IAAI,YAAY,OAEf;IAED,IAAI,aAAa,OAEhB;IAED,IAAI,iBAAiB,qBAEpB;CACF;AAED,eAAO,MAAM,OAAO,gBAAuB,CAAA;AAI3C,eAAO,MAAM,sBAAsB,eAAgB,MAAM,QAExD,CAAA;AAED,eAAO,MAAM,kBAAkB,eAAgB,MAAM,SAAS,GAAG,SAEhE,CAAA"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { View, ViewStyle } from 'react-native';
|
|
3
|
-
import { SpaceTokens, StackProps,
|
|
3
|
+
import { SpaceTokens, StackProps, StaticConfig, StaticConfigParsed, TamaguiComponent, TamaguiComponentState } from './types';
|
|
4
|
+
export declare const defaultComponentState: TamaguiComponentState;
|
|
4
5
|
export declare const mouseUps: Set<Function>;
|
|
5
|
-
declare
|
|
6
|
-
export declare
|
|
7
|
-
export declare const Spacer: StaticComponent<Omit<StackProps, "flex" | "direction"> & {
|
|
6
|
+
export declare function createComponent<ComponentPropTypes extends Object = {}, Ref = View, BaseProps = never>(configIn: Partial<StaticConfig> | StaticConfigParsed): TamaguiComponent<ComponentPropTypes, Ref, BaseProps, {}>;
|
|
7
|
+
export declare const Spacer: TamaguiComponent<Omit<StackProps, "flex" | "direction"> & {
|
|
8
8
|
size?: SpaceTokens | undefined;
|
|
9
9
|
flex?: number | boolean | undefined;
|
|
10
10
|
direction?: "horizontal" | "vertical" | undefined;
|
|
11
|
-
},
|
|
11
|
+
}, View, never, {}>;
|
|
12
12
|
export declare function spacedChildren({ isZStack, children, space, flexDirection, spaceFlex, }: {
|
|
13
13
|
isZStack?: boolean;
|
|
14
14
|
children: any;
|
|
@@ -17,5 +17,4 @@ export declare function spacedChildren({ isZStack, children, space, flexDirectio
|
|
|
17
17
|
flexDirection?: ViewStyle['flexDirection'];
|
|
18
18
|
}): any[];
|
|
19
19
|
export declare const AbsoluteFill: (props: any) => JSX.Element;
|
|
20
|
-
export {};
|
|
21
20
|
//# sourceMappingURL=createComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAehE,OAAO,EAEL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EAGtB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,qBAAqB,EAAE,qBAQnC,CAAA;AAED,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAQ3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,IAAI,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,4DA4mBrD;AAKD,eAAO,MAAM,MAAM;;;;mBA4CjB,CAAA;AAEF,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,EACb,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,GAAG,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAA;CAC3C,SA2CA;AAED,eAAO,MAAM,YAAY,UAAW,GAAG,gBAiBpC,CAAA"}
|
package/types/createFont.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createFont.d.ts","sourceRoot":"","sources":["../src/createFont.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"createFont.d.ts","sourceRoot":"","sources":["../src/createFont.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,UAAU,wDA2BtB,CAAA"}
|
|
@@ -1,13 +1 @@
|
|
|
1
|
-
export declare type ComponentState = typeof defaultComponentState;
|
|
2
|
-
export declare const defaultComponentState: {
|
|
3
|
-
hover: boolean;
|
|
4
|
-
press: boolean;
|
|
5
|
-
pressIn: boolean;
|
|
6
|
-
focus: boolean;
|
|
7
|
-
mounted: boolean;
|
|
8
|
-
animation: {
|
|
9
|
-
style?: any;
|
|
10
|
-
avoidClasses?: boolean | undefined;
|
|
11
|
-
} | null;
|
|
12
|
-
};
|
|
13
1
|
//# sourceMappingURL=defaultComponentState.d.ts.map
|