@tamagui/babel-plugin 1.100.5 → 1.101.0
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/index.js +3 -279
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/index.native.js +3 -297
- package/dist/cjs/index.native.js.map +2 -2
- package/dist/esm/index.js +2 -280
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +2 -208
- package/dist/esm/index.native.js +2 -292
- package/dist/esm/index.native.js.map +2 -2
- package/package.json +3 -3
- package/src/index.ts +2 -469
- package/types/index.d.ts.map +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Users/n8/tamagui/packages/babel-plugin/src/index.ts"],
|
|
4
|
-
"mappings": "
|
|
5
|
-
"names": ["
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;;;;;oBAA+B,4BAE/B,kBAAeA,8BAAAA;",
|
|
5
|
+
"names": ["getBabelPlugin"]
|
|
6
6
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,283 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
import { declare } from "@babel/helper-plugin-utils";
|
|
4
|
-
import template from "@babel/template";
|
|
5
|
-
import * as t from "@babel/types";
|
|
6
|
-
import {
|
|
7
|
-
createExtractor,
|
|
8
|
-
getPragmaOptions,
|
|
9
|
-
isSimpleSpread,
|
|
10
|
-
literalToAst,
|
|
11
|
-
createLogger
|
|
12
|
-
} from "@tamagui/static";
|
|
13
|
-
const importNativeView = template(`
|
|
14
|
-
const __ReactNativeView = require('react-native').View;
|
|
15
|
-
const __ReactNativeText = require('react-native').Text;
|
|
16
|
-
`), importStyleSheet = template(`
|
|
17
|
-
const __ReactNativeStyleSheet = require('react-native').StyleSheet;
|
|
18
|
-
`), importWithStyle = template(`
|
|
19
|
-
const __withStableStyle = require('@tamagui/core')._withStableStyle;
|
|
20
|
-
`), extractor = createExtractor({ platform: "native" });
|
|
21
|
-
var src_default = declare(function(api, options) {
|
|
22
|
-
return api.assertVersion(7), {
|
|
23
|
-
name: "tamagui",
|
|
24
|
-
visitor: {
|
|
25
|
-
Program: {
|
|
26
|
-
enter(root) {
|
|
27
|
-
let sourcePath = this.file.opts.filename;
|
|
28
|
-
if (sourcePath?.includes("node_modules") || !sourcePath?.endsWith(".jsx") && !sourcePath?.endsWith(".tsx"))
|
|
29
|
-
return;
|
|
30
|
-
process.env.SOURCE_ROOT?.endsWith("ios") && (sourcePath = sourcePath.replace("/ios", ""));
|
|
31
|
-
let hasImportedView = !1, hasImportedViewWrapper = !1;
|
|
32
|
-
const sheetStyles = {}, sheetIdentifier = root.scope.generateUidIdentifier("sheet"), firstCommentContents = (
|
|
33
|
-
// join because you can join together multiple pragmas
|
|
34
|
-
root.node.body[0]?.leadingComments?.map((comment) => comment?.value || " ").join(" ") ?? ""
|
|
35
|
-
), firstComment = firstCommentContents ? `//${firstCommentContents}` : "", { shouldPrintDebug, shouldDisable } = getPragmaOptions({
|
|
36
|
-
source: firstComment,
|
|
37
|
-
path: sourcePath
|
|
38
|
-
});
|
|
39
|
-
if (shouldDisable)
|
|
40
|
-
return;
|
|
41
|
-
const finalOptions = {
|
|
42
|
-
// @ts-ignore just in case they leave it out
|
|
43
|
-
platform: "native",
|
|
44
|
-
...options
|
|
45
|
-
}, printLog = createLogger(sourcePath, finalOptions);
|
|
46
|
-
function addSheetStyle(style, node) {
|
|
47
|
-
let key = `${`${Object.keys(sheetStyles).length}`}`;
|
|
48
|
-
if (process.env.NODE_ENV === "development") {
|
|
49
|
-
const lineNumbers = node.loc ? node.loc.start.line + (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : "") : "";
|
|
50
|
-
key += `:${basename(sourcePath)}:${lineNumbers}`;
|
|
51
|
-
}
|
|
52
|
-
return sheetStyles[key] = style, readStyleExpr(key);
|
|
53
|
-
}
|
|
54
|
-
function readStyleExpr(key) {
|
|
55
|
-
return template("SHEET['KEY']")({
|
|
56
|
-
SHEET: sheetIdentifier.name,
|
|
57
|
-
KEY: key
|
|
58
|
-
}).expression;
|
|
59
|
-
}
|
|
60
|
-
let res;
|
|
61
|
-
try {
|
|
62
|
-
res = extractor.parseSync(root, {
|
|
63
|
-
importsWhitelist: ["constants.js", "colors.js"],
|
|
64
|
-
extractStyledDefinitions: options.forceExtractStyleDefinitions,
|
|
65
|
-
excludeProps: /* @__PURE__ */ new Set([
|
|
66
|
-
"className",
|
|
67
|
-
"userSelect",
|
|
68
|
-
"whiteSpace",
|
|
69
|
-
"textOverflow",
|
|
70
|
-
"cursor",
|
|
71
|
-
"contain"
|
|
72
|
-
]),
|
|
73
|
-
shouldPrintDebug,
|
|
74
|
-
...finalOptions,
|
|
75
|
-
// disable this extraction for now at least, need to figure out merging theme vs non-theme
|
|
76
|
-
// because theme need to stay in render(), whereas non-theme can be extracted
|
|
77
|
-
// for now just turn it off entirely at a small perf loss
|
|
78
|
-
disableExtractInlineMedia: !0,
|
|
79
|
-
// disable extracting variables as no native concept of them (only theme values)
|
|
80
|
-
disableExtractVariables: options.experimentalFlattenThemesOnNative ? !1 : "theme",
|
|
81
|
-
sourcePath,
|
|
82
|
-
// disabling flattening for now
|
|
83
|
-
// it's flattening a plain <Paragraph>hello</Paragraph> which breaks things because themes
|
|
84
|
-
// thinking it's not really worth the effort to do much compilation on native
|
|
85
|
-
// for now just disable flatten as it can only run in narrow places on native
|
|
86
|
-
// disableFlattening: 'styled',
|
|
87
|
-
getFlattenedNode({ isTextView }) {
|
|
88
|
-
return hasImportedView || (hasImportedView = !0, root.unshiftContainer("body", importNativeView())), isTextView ? "__ReactNativeText" : "__ReactNativeView";
|
|
89
|
-
},
|
|
90
|
-
onExtractTag(props) {
|
|
91
|
-
const { isFlattened } = props;
|
|
92
|
-
if (!isFlattened)
|
|
93
|
-
return;
|
|
94
|
-
assertValidTag(props.node);
|
|
95
|
-
const stylesExpr = t.arrayExpression([]), hocStylesExpr = t.arrayExpression([]), expressions = [], finalAttrs = [], themeKeysUsed = /* @__PURE__ */ new Set();
|
|
96
|
-
function getStyleExpression(style) {
|
|
97
|
-
if (!style) return;
|
|
98
|
-
const { plain, themed } = splitThemeStyles(style);
|
|
99
|
-
let themeExpr = null;
|
|
100
|
-
if (themed && options.experimentalFlattenThemesOnNative) {
|
|
101
|
-
for (const key in themed)
|
|
102
|
-
themeKeysUsed.add(themed[key].split("$")[1]);
|
|
103
|
-
themeExpr = getThemedStyleExpression(themed);
|
|
104
|
-
}
|
|
105
|
-
const ident = addSheetStyle(plain, props.node);
|
|
106
|
-
return themeExpr ? (addStyleExpression(ident), addStyleExpression(ident, !0), themeExpr) : ident;
|
|
107
|
-
}
|
|
108
|
-
function addStyleExpression(expr, HOC = !1) {
|
|
109
|
-
Array.isArray(expr) ? (HOC ? hocStylesExpr : stylesExpr).elements.push(...expr) : (HOC ? hocStylesExpr : stylesExpr).elements.push(expr);
|
|
110
|
-
}
|
|
111
|
-
function getThemedStyleExpression(styles) {
|
|
112
|
-
const themedStylesAst = literalToAst(styles);
|
|
113
|
-
return themedStylesAst.properties.forEach((_) => {
|
|
114
|
-
const prop = _;
|
|
115
|
-
prop.value.type === "StringLiteral" && (prop.value = t.memberExpression(
|
|
116
|
-
t.identifier("theme"),
|
|
117
|
-
t.identifier(prop.value.value.slice(1) + ".get()")
|
|
118
|
-
));
|
|
119
|
-
}), themedStylesAst;
|
|
120
|
-
}
|
|
121
|
-
let hasDynamicStyle = !1;
|
|
122
|
-
for (const attr of props.attrs)
|
|
123
|
-
switch (attr.type) {
|
|
124
|
-
case "style": {
|
|
125
|
-
let styleExpr = getStyleExpression(attr.value);
|
|
126
|
-
addStyleExpression(styleExpr), options.experimentalFlattenThemesOnNative && addStyleExpression(styleExpr, !0);
|
|
127
|
-
break;
|
|
128
|
-
}
|
|
129
|
-
case "ternary": {
|
|
130
|
-
const { consequent, alternate } = attr.value, consExpr = getStyleExpression(consequent), altExpr = getStyleExpression(alternate);
|
|
131
|
-
options.experimentalFlattenThemesOnNative && (expressions.push(attr.value.test), addStyleExpression(
|
|
132
|
-
t.conditionalExpression(
|
|
133
|
-
t.identifier(`_expressions[${expressions.length - 1}]`),
|
|
134
|
-
consExpr || t.nullLiteral(),
|
|
135
|
-
altExpr || t.nullLiteral()
|
|
136
|
-
),
|
|
137
|
-
!0
|
|
138
|
-
));
|
|
139
|
-
const styleExpr = t.conditionalExpression(
|
|
140
|
-
attr.value.test,
|
|
141
|
-
consExpr || t.nullLiteral(),
|
|
142
|
-
altExpr || t.nullLiteral()
|
|
143
|
-
);
|
|
144
|
-
addStyleExpression(
|
|
145
|
-
styleExpr
|
|
146
|
-
// TODO: what is this for ?
|
|
147
|
-
// isFlattened ? simpleHash(JSON.stringify({ consequent, alternate })) : undefined
|
|
148
|
-
);
|
|
149
|
-
break;
|
|
150
|
-
}
|
|
151
|
-
case "dynamic-style": {
|
|
152
|
-
hasDynamicStyle = !0, expressions.push(attr.value), options.experimentalFlattenDynamicValues ? addStyleExpression(
|
|
153
|
-
t.objectExpression([
|
|
154
|
-
t.objectProperty(
|
|
155
|
-
t.identifier(attr.name),
|
|
156
|
-
t.identifier(`_expressions[${expressions.length - 1}]`)
|
|
157
|
-
)
|
|
158
|
-
]),
|
|
159
|
-
!0
|
|
160
|
-
) : addStyleExpression(
|
|
161
|
-
t.objectExpression([
|
|
162
|
-
t.objectProperty(
|
|
163
|
-
t.identifier(attr.name),
|
|
164
|
-
attr.value
|
|
165
|
-
)
|
|
166
|
-
])
|
|
167
|
-
);
|
|
168
|
-
break;
|
|
169
|
-
}
|
|
170
|
-
case "attr": {
|
|
171
|
-
t.isJSXSpreadAttribute(attr.value) && isSimpleSpread(attr.value) && (stylesExpr.elements.push(
|
|
172
|
-
t.memberExpression(attr.value.argument, t.identifier("style"))
|
|
173
|
-
), options.experimentalFlattenThemesOnNative && hocStylesExpr.elements.push(
|
|
174
|
-
t.memberExpression(
|
|
175
|
-
attr.value.argument,
|
|
176
|
-
t.identifier("style")
|
|
177
|
-
)
|
|
178
|
-
)), finalAttrs.push(attr.value);
|
|
179
|
-
break;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
if (props.node.attributes = finalAttrs, props.isFlattened)
|
|
183
|
-
if (options.experimentalFlattenThemesOnNative && (themeKeysUsed.size || hocStylesExpr.elements.length > 1 || hasDynamicStyle)) {
|
|
184
|
-
hasImportedViewWrapper || (root.unshiftContainer("body", importWithStyle()), hasImportedViewWrapper = !0);
|
|
185
|
-
const name = props.node.name.name, WrapperIdentifier = root.scope.generateUidIdentifier(
|
|
186
|
-
name + "Wrapper"
|
|
187
|
-
);
|
|
188
|
-
root.pushContainer(
|
|
189
|
-
"body",
|
|
190
|
-
t.variableDeclaration("const", [
|
|
191
|
-
t.variableDeclarator(
|
|
192
|
-
WrapperIdentifier,
|
|
193
|
-
t.callExpression(t.identifier("__withStableStyle"), [
|
|
194
|
-
t.identifier(name),
|
|
195
|
-
t.arrowFunctionExpression(
|
|
196
|
-
[t.identifier("theme"), t.identifier("_expressions")],
|
|
197
|
-
t.blockStatement([
|
|
198
|
-
t.returnStatement(
|
|
199
|
-
t.callExpression(
|
|
200
|
-
t.memberExpression(
|
|
201
|
-
t.identifier("React"),
|
|
202
|
-
t.identifier("useMemo")
|
|
203
|
-
),
|
|
204
|
-
[
|
|
205
|
-
t.arrowFunctionExpression(
|
|
206
|
-
[],
|
|
207
|
-
t.blockStatement([
|
|
208
|
-
t.returnStatement(
|
|
209
|
-
t.arrayExpression([...hocStylesExpr.elements])
|
|
210
|
-
)
|
|
211
|
-
])
|
|
212
|
-
),
|
|
213
|
-
t.arrayExpression([
|
|
214
|
-
t.spreadElement(t.identifier("_expressions"))
|
|
215
|
-
])
|
|
216
|
-
]
|
|
217
|
-
)
|
|
218
|
-
)
|
|
219
|
-
])
|
|
220
|
-
)
|
|
221
|
-
])
|
|
222
|
-
)
|
|
223
|
-
])
|
|
224
|
-
), props.node.name = WrapperIdentifier, props.jsxPath.node.closingElement && (props.jsxPath.node.closingElement.name = WrapperIdentifier), expressions.length && props.node.attributes.push(
|
|
225
|
-
t.jsxAttribute(
|
|
226
|
-
t.jsxIdentifier("expressions"),
|
|
227
|
-
t.jsxExpressionContainer(t.arrayExpression(expressions))
|
|
228
|
-
)
|
|
229
|
-
);
|
|
230
|
-
} else
|
|
231
|
-
props.node.attributes.push(
|
|
232
|
-
t.jsxAttribute(
|
|
233
|
-
t.jsxIdentifier("style"),
|
|
234
|
-
t.jsxExpressionContainer(
|
|
235
|
-
stylesExpr.elements.length === 1 ? stylesExpr.elements[0] : stylesExpr
|
|
236
|
-
)
|
|
237
|
-
)
|
|
238
|
-
);
|
|
239
|
-
}
|
|
240
|
-
});
|
|
241
|
-
} catch (err) {
|
|
242
|
-
if (err instanceof Error) {
|
|
243
|
-
let message = `${shouldPrintDebug === "verbose" ? err : err.message}`;
|
|
244
|
-
message.includes("Unexpected return value from visitor method") && (message = "Unexpected return value from visitor method"), console.warn("Error in Tamagui parse, skipping", message, err.stack);
|
|
245
|
-
return;
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
if (!Object.keys(sheetStyles).length) {
|
|
249
|
-
shouldPrintDebug && console.info("END no styles"), res && printLog(res);
|
|
250
|
-
return;
|
|
251
|
-
}
|
|
252
|
-
const sheetObject = literalToAst(sheetStyles), sheetOuter = template(
|
|
253
|
-
"const SHEET = __ReactNativeStyleSheet.create(null)"
|
|
254
|
-
)({
|
|
255
|
-
SHEET: sheetIdentifier.name
|
|
256
|
-
});
|
|
257
|
-
sheetOuter.declarations[0].init.arguments[0] = sheetObject, root.unshiftContainer("body", sheetOuter), root.unshiftContainer("body", importStyleSheet()), shouldPrintDebug && (console.info(`
|
|
258
|
-
-------- output code -------
|
|
259
|
-
`), console.info(
|
|
260
|
-
generator(root.parent).code.split(`
|
|
261
|
-
`).filter((x) => !x.startsWith("//")).join(`
|
|
262
|
-
`)
|
|
263
|
-
)), res && printLog(res);
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
};
|
|
268
|
-
});
|
|
269
|
-
function assertValidTag(node) {
|
|
270
|
-
node.attributes.find((x) => x.type === "JSXAttribute" && x.name.name === "style") && process.env.DEBUG?.startsWith("tamagui") && console.warn("\u26A0\uFE0F Cannot pass style attribute to extracted style");
|
|
271
|
-
}
|
|
272
|
-
function splitThemeStyles(style) {
|
|
273
|
-
const themed = {}, plain = {};
|
|
274
|
-
let noTheme = !0;
|
|
275
|
-
for (const key in style) {
|
|
276
|
-
const val = style[key];
|
|
277
|
-
val && val[0] === "$" ? (themed[key] = val, noTheme = !1) : plain[key] = val;
|
|
278
|
-
}
|
|
279
|
-
return { themed: noTheme ? null : themed, plain };
|
|
280
|
-
}
|
|
1
|
+
import { getBabelPlugin } from "@tamagui/static";
|
|
2
|
+
var src_default = getBabelPlugin();
|
|
281
3
|
export {
|
|
282
4
|
src_default as default
|
|
283
5
|
};
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
|
-
"mappings": "AAAA,SAAS,
|
|
4
|
+
"mappings": "AAAA,SAAS,sBAAsB;AAE/B,IAAO,cAAQ,eAAe;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,209 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
import { declare } from "@babel/helper-plugin-utils";
|
|
4
|
-
import template from "@babel/template";
|
|
5
|
-
import * as t from "@babel/types";
|
|
6
|
-
import { createExtractor, getPragmaOptions, isSimpleSpread, literalToAst, createLogger } from "@tamagui/static";
|
|
7
|
-
const importNativeView = template(`
|
|
8
|
-
const __ReactNativeView = require('react-native').View;
|
|
9
|
-
const __ReactNativeText = require('react-native').Text;
|
|
10
|
-
`),
|
|
11
|
-
importStyleSheet = template(`
|
|
12
|
-
const __ReactNativeStyleSheet = require('react-native').StyleSheet;
|
|
13
|
-
`),
|
|
14
|
-
importWithStyle = template(`
|
|
15
|
-
const __withStableStyle = require('@tamagui/core')._withStableStyle;
|
|
16
|
-
`),
|
|
17
|
-
extractor = createExtractor({
|
|
18
|
-
platform: "native"
|
|
19
|
-
});
|
|
20
|
-
var src_default = declare(function (api, options) {
|
|
21
|
-
return api.assertVersion(7), {
|
|
22
|
-
name: "tamagui",
|
|
23
|
-
visitor: {
|
|
24
|
-
Program: {
|
|
25
|
-
enter(root) {
|
|
26
|
-
let sourcePath = this.file.opts.filename;
|
|
27
|
-
if (sourcePath?.includes("node_modules") || !sourcePath?.endsWith(".jsx") && !sourcePath?.endsWith(".tsx")) return;
|
|
28
|
-
process.env.SOURCE_ROOT?.endsWith("ios") && (sourcePath = sourcePath.replace("/ios", ""));
|
|
29
|
-
let hasImportedView = !1,
|
|
30
|
-
hasImportedViewWrapper = !1;
|
|
31
|
-
const sheetStyles = {},
|
|
32
|
-
sheetIdentifier = root.scope.generateUidIdentifier("sheet"),
|
|
33
|
-
firstCommentContents =
|
|
34
|
-
// join because you can join together multiple pragmas
|
|
35
|
-
root.node.body[0]?.leadingComments?.map(comment => comment?.value || " ").join(" ") ?? "",
|
|
36
|
-
firstComment = firstCommentContents ? `//${firstCommentContents}` : "",
|
|
37
|
-
{
|
|
38
|
-
shouldPrintDebug,
|
|
39
|
-
shouldDisable
|
|
40
|
-
} = getPragmaOptions({
|
|
41
|
-
source: firstComment,
|
|
42
|
-
path: sourcePath
|
|
43
|
-
});
|
|
44
|
-
if (shouldDisable) return;
|
|
45
|
-
const finalOptions = {
|
|
46
|
-
// @ts-ignore just in case they leave it out
|
|
47
|
-
platform: "native",
|
|
48
|
-
...options
|
|
49
|
-
},
|
|
50
|
-
printLog = createLogger(sourcePath, finalOptions);
|
|
51
|
-
function addSheetStyle(style, node) {
|
|
52
|
-
let key = `${`${Object.keys(sheetStyles).length}`}`;
|
|
53
|
-
if (process.env.NODE_ENV === "development") {
|
|
54
|
-
const lineNumbers = node.loc ? node.loc.start.line + (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : "") : "";
|
|
55
|
-
key += `:${basename(sourcePath)}:${lineNumbers}`;
|
|
56
|
-
}
|
|
57
|
-
return sheetStyles[key] = style, readStyleExpr(key);
|
|
58
|
-
}
|
|
59
|
-
function readStyleExpr(key) {
|
|
60
|
-
return template("SHEET['KEY']")({
|
|
61
|
-
SHEET: sheetIdentifier.name,
|
|
62
|
-
KEY: key
|
|
63
|
-
}).expression;
|
|
64
|
-
}
|
|
65
|
-
let res;
|
|
66
|
-
try {
|
|
67
|
-
res = extractor.parseSync(root, {
|
|
68
|
-
importsWhitelist: ["constants.js", "colors.js"],
|
|
69
|
-
extractStyledDefinitions: options.forceExtractStyleDefinitions,
|
|
70
|
-
excludeProps: /* @__PURE__ */new Set(["className", "userSelect", "whiteSpace", "textOverflow", "cursor", "contain"]),
|
|
71
|
-
shouldPrintDebug,
|
|
72
|
-
...finalOptions,
|
|
73
|
-
// disable this extraction for now at least, need to figure out merging theme vs non-theme
|
|
74
|
-
// because theme need to stay in render(), whereas non-theme can be extracted
|
|
75
|
-
// for now just turn it off entirely at a small perf loss
|
|
76
|
-
disableExtractInlineMedia: !0,
|
|
77
|
-
// disable extracting variables as no native concept of them (only theme values)
|
|
78
|
-
disableExtractVariables: options.experimentalFlattenThemesOnNative ? !1 : "theme",
|
|
79
|
-
sourcePath,
|
|
80
|
-
// disabling flattening for now
|
|
81
|
-
// it's flattening a plain <Paragraph>hello</Paragraph> which breaks things because themes
|
|
82
|
-
// thinking it's not really worth the effort to do much compilation on native
|
|
83
|
-
// for now just disable flatten as it can only run in narrow places on native
|
|
84
|
-
// disableFlattening: 'styled',
|
|
85
|
-
getFlattenedNode({
|
|
86
|
-
isTextView
|
|
87
|
-
}) {
|
|
88
|
-
return hasImportedView || (hasImportedView = !0, root.unshiftContainer("body", importNativeView())), isTextView ? "__ReactNativeText" : "__ReactNativeView";
|
|
89
|
-
},
|
|
90
|
-
onExtractTag(props) {
|
|
91
|
-
const {
|
|
92
|
-
isFlattened
|
|
93
|
-
} = props;
|
|
94
|
-
if (!isFlattened) return;
|
|
95
|
-
assertValidTag(props.node);
|
|
96
|
-
const stylesExpr = t.arrayExpression([]),
|
|
97
|
-
hocStylesExpr = t.arrayExpression([]),
|
|
98
|
-
expressions = [],
|
|
99
|
-
finalAttrs = [],
|
|
100
|
-
themeKeysUsed = /* @__PURE__ */new Set();
|
|
101
|
-
function getStyleExpression(style) {
|
|
102
|
-
if (!style) return;
|
|
103
|
-
const {
|
|
104
|
-
plain,
|
|
105
|
-
themed
|
|
106
|
-
} = splitThemeStyles(style);
|
|
107
|
-
let themeExpr = null;
|
|
108
|
-
if (themed && options.experimentalFlattenThemesOnNative) {
|
|
109
|
-
for (const key in themed) themeKeysUsed.add(themed[key].split("$")[1]);
|
|
110
|
-
themeExpr = getThemedStyleExpression(themed);
|
|
111
|
-
}
|
|
112
|
-
const ident = addSheetStyle(plain, props.node);
|
|
113
|
-
return themeExpr ? (addStyleExpression(ident), addStyleExpression(ident, !0), themeExpr) : ident;
|
|
114
|
-
}
|
|
115
|
-
function addStyleExpression(expr, HOC = !1) {
|
|
116
|
-
Array.isArray(expr) ? (HOC ? hocStylesExpr : stylesExpr).elements.push(...expr) : (HOC ? hocStylesExpr : stylesExpr).elements.push(expr);
|
|
117
|
-
}
|
|
118
|
-
function getThemedStyleExpression(styles) {
|
|
119
|
-
const themedStylesAst = literalToAst(styles);
|
|
120
|
-
return themedStylesAst.properties.forEach(_ => {
|
|
121
|
-
const prop = _;
|
|
122
|
-
prop.value.type === "StringLiteral" && (prop.value = t.memberExpression(t.identifier("theme"), t.identifier(prop.value.value.slice(1) + ".get()")));
|
|
123
|
-
}), themedStylesAst;
|
|
124
|
-
}
|
|
125
|
-
let hasDynamicStyle = !1;
|
|
126
|
-
for (const attr of props.attrs) switch (attr.type) {
|
|
127
|
-
case "style":
|
|
128
|
-
{
|
|
129
|
-
let styleExpr = getStyleExpression(attr.value);
|
|
130
|
-
addStyleExpression(styleExpr), options.experimentalFlattenThemesOnNative && addStyleExpression(styleExpr, !0);
|
|
131
|
-
break;
|
|
132
|
-
}
|
|
133
|
-
case "ternary":
|
|
134
|
-
{
|
|
135
|
-
const {
|
|
136
|
-
consequent,
|
|
137
|
-
alternate
|
|
138
|
-
} = attr.value,
|
|
139
|
-
consExpr = getStyleExpression(consequent),
|
|
140
|
-
altExpr = getStyleExpression(alternate);
|
|
141
|
-
options.experimentalFlattenThemesOnNative && (expressions.push(attr.value.test), addStyleExpression(t.conditionalExpression(t.identifier(`_expressions[${expressions.length - 1}]`), consExpr || t.nullLiteral(), altExpr || t.nullLiteral()), !0));
|
|
142
|
-
const styleExpr = t.conditionalExpression(attr.value.test, consExpr || t.nullLiteral(), altExpr || t.nullLiteral());
|
|
143
|
-
addStyleExpression(styleExpr
|
|
144
|
-
// TODO: what is this for ?
|
|
145
|
-
// isFlattened ? simpleHash(JSON.stringify({ consequent, alternate })) : undefined
|
|
146
|
-
);
|
|
147
|
-
break;
|
|
148
|
-
}
|
|
149
|
-
case "dynamic-style":
|
|
150
|
-
{
|
|
151
|
-
hasDynamicStyle = !0, expressions.push(attr.value), options.experimentalFlattenDynamicValues ? addStyleExpression(t.objectExpression([t.objectProperty(t.identifier(attr.name), t.identifier(`_expressions[${expressions.length - 1}]`))]), !0) : addStyleExpression(t.objectExpression([t.objectProperty(t.identifier(attr.name), attr.value)]));
|
|
152
|
-
break;
|
|
153
|
-
}
|
|
154
|
-
case "attr":
|
|
155
|
-
{
|
|
156
|
-
t.isJSXSpreadAttribute(attr.value) && isSimpleSpread(attr.value) && (stylesExpr.elements.push(t.memberExpression(attr.value.argument, t.identifier("style"))), options.experimentalFlattenThemesOnNative && hocStylesExpr.elements.push(t.memberExpression(attr.value.argument, t.identifier("style")))), finalAttrs.push(attr.value);
|
|
157
|
-
break;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
if (props.node.attributes = finalAttrs, props.isFlattened) if (options.experimentalFlattenThemesOnNative && (themeKeysUsed.size || hocStylesExpr.elements.length > 1 || hasDynamicStyle)) {
|
|
161
|
-
hasImportedViewWrapper || (root.unshiftContainer("body", importWithStyle()), hasImportedViewWrapper = !0);
|
|
162
|
-
const name = props.node.name.name,
|
|
163
|
-
WrapperIdentifier = root.scope.generateUidIdentifier(name + "Wrapper");
|
|
164
|
-
root.pushContainer("body", t.variableDeclaration("const", [t.variableDeclarator(WrapperIdentifier, t.callExpression(t.identifier("__withStableStyle"), [t.identifier(name), t.arrowFunctionExpression([t.identifier("theme"), t.identifier("_expressions")], t.blockStatement([t.returnStatement(t.callExpression(t.memberExpression(t.identifier("React"), t.identifier("useMemo")), [t.arrowFunctionExpression([], t.blockStatement([t.returnStatement(t.arrayExpression([...hocStylesExpr.elements]))])), t.arrayExpression([t.spreadElement(t.identifier("_expressions"))])]))]))]))])), props.node.name = WrapperIdentifier, props.jsxPath.node.closingElement && (props.jsxPath.node.closingElement.name = WrapperIdentifier), expressions.length && props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("expressions"), t.jsxExpressionContainer(t.arrayExpression(expressions))));
|
|
165
|
-
} else props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(stylesExpr.elements.length === 1 ? stylesExpr.elements[0] : stylesExpr)));
|
|
166
|
-
}
|
|
167
|
-
});
|
|
168
|
-
} catch (err) {
|
|
169
|
-
if (err instanceof Error) {
|
|
170
|
-
let message = `${shouldPrintDebug === "verbose" ? err : err.message}`;
|
|
171
|
-
message.includes("Unexpected return value from visitor method") && (message = "Unexpected return value from visitor method"), console.warn("Error in Tamagui parse, skipping", message, err.stack);
|
|
172
|
-
return;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
if (!Object.keys(sheetStyles).length) {
|
|
176
|
-
shouldPrintDebug && console.info("END no styles"), res && printLog(res);
|
|
177
|
-
return;
|
|
178
|
-
}
|
|
179
|
-
const sheetObject = literalToAst(sheetStyles),
|
|
180
|
-
sheetOuter = template("const SHEET = __ReactNativeStyleSheet.create(null)")({
|
|
181
|
-
SHEET: sheetIdentifier.name
|
|
182
|
-
});
|
|
183
|
-
sheetOuter.declarations[0].init.arguments[0] = sheetObject, root.unshiftContainer("body", sheetOuter), root.unshiftContainer("body", importStyleSheet()), shouldPrintDebug && (console.info(`
|
|
184
|
-
-------- output code -------
|
|
185
|
-
`), console.info(generator(root.parent).code.split(`
|
|
186
|
-
`).filter(x => !x.startsWith("//")).join(`
|
|
187
|
-
`))), res && printLog(res);
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
});
|
|
193
|
-
function assertValidTag(node) {
|
|
194
|
-
node.attributes.find(x => x.type === "JSXAttribute" && x.name.name === "style") && process.env.DEBUG?.startsWith("tamagui") && console.warn("\u26A0\uFE0F Cannot pass style attribute to extracted style");
|
|
195
|
-
}
|
|
196
|
-
function splitThemeStyles(style) {
|
|
197
|
-
const themed = {},
|
|
198
|
-
plain = {};
|
|
199
|
-
let noTheme = !0;
|
|
200
|
-
for (const key in style) {
|
|
201
|
-
const val = style[key];
|
|
202
|
-
val && val[0] === "$" ? (themed[key] = val, noTheme = !1) : plain[key] = val;
|
|
203
|
-
}
|
|
204
|
-
return {
|
|
205
|
-
themed: noTheme ? null : themed,
|
|
206
|
-
plain
|
|
207
|
-
};
|
|
208
|
-
}
|
|
1
|
+
import { getBabelPlugin } from "@tamagui/static";
|
|
2
|
+
var src_default = getBabelPlugin();
|
|
209
3
|
export { src_default as default };
|