babel-plugin-essor 0.0.14-beta.9 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +345 -293
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +344 -292
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/dist/index.cjs
CHANGED
|
@@ -78,7 +78,7 @@ var capitalize = cacheStringFunction(
|
|
|
78
78
|
var import_core = require("@babel/core");
|
|
79
79
|
var imports = /* @__PURE__ */ new Set();
|
|
80
80
|
var defaultOption = {
|
|
81
|
-
|
|
81
|
+
server: false,
|
|
82
82
|
symbol: "$",
|
|
83
83
|
props: true
|
|
84
84
|
};
|
|
@@ -90,9 +90,10 @@ var transformProgram = {
|
|
|
90
90
|
h: path.scope.generateUidIdentifier("h$"),
|
|
91
91
|
template: path.scope.generateUidIdentifier("template$"),
|
|
92
92
|
ssg: path.scope.generateUidIdentifier("ssg$"),
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
Fragment: path.scope.generateUidIdentifier("fragment$"),
|
|
94
|
+
useSignal: path.scope.generateUidIdentifier("useSignal$"),
|
|
95
|
+
useComputed: path.scope.generateUidIdentifier("useComputed$"),
|
|
96
|
+
useReactive: path.scope.generateUidIdentifier("useReactive$"),
|
|
96
97
|
tmplDeclaration: import_core.types.variableDeclaration("const", []),
|
|
97
98
|
opts: state.opts
|
|
98
99
|
};
|
|
@@ -121,8 +122,26 @@ function createImport(state, from) {
|
|
|
121
122
|
return import_core.types.importDeclaration(ImportSpecifier, importSource);
|
|
122
123
|
}
|
|
123
124
|
|
|
124
|
-
// src/shared.ts
|
|
125
|
+
// src/jsx/shared.ts
|
|
125
126
|
var import_core2 = require("@babel/core");
|
|
127
|
+
function createClientResult() {
|
|
128
|
+
return {
|
|
129
|
+
index: 1,
|
|
130
|
+
isLastChild: false,
|
|
131
|
+
parentIndex: 0,
|
|
132
|
+
props: {},
|
|
133
|
+
template: ""
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
function createServerResult() {
|
|
137
|
+
return {
|
|
138
|
+
index: 1,
|
|
139
|
+
isLastChild: false,
|
|
140
|
+
parentIndex: 0,
|
|
141
|
+
props: {},
|
|
142
|
+
template: []
|
|
143
|
+
};
|
|
144
|
+
}
|
|
126
145
|
function hasSiblingElement(path) {
|
|
127
146
|
const siblings = path.getAllPrevSiblings().concat(path.getAllNextSiblings());
|
|
128
147
|
const hasSibling = siblings.some(
|
|
@@ -152,7 +171,7 @@ function jsxElementNameToString(node) {
|
|
|
152
171
|
}
|
|
153
172
|
return `${node.namespace.name}:${node.name.name}`;
|
|
154
173
|
}
|
|
155
|
-
function
|
|
174
|
+
function isComponentName(tagName) {
|
|
156
175
|
return tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^a-z]/i.test(tagName[0]);
|
|
157
176
|
}
|
|
158
177
|
function isTextChild(path) {
|
|
@@ -178,10 +197,45 @@ function setNodeText(path, text) {
|
|
|
178
197
|
}
|
|
179
198
|
}
|
|
180
199
|
}
|
|
181
|
-
function
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
200
|
+
function replaceSpace(node) {
|
|
201
|
+
return node.value.replaceAll(/\s+/g, " ").trim();
|
|
202
|
+
}
|
|
203
|
+
function isValidChild(path) {
|
|
204
|
+
const regex = /^\s*$/;
|
|
205
|
+
if (path.isStringLiteral() || path.isJSXText()) {
|
|
206
|
+
return !regex.test(path.node.value);
|
|
207
|
+
}
|
|
208
|
+
return Object.keys(path.node).length > 0;
|
|
209
|
+
}
|
|
210
|
+
function hasObjectExpression(prop, value, props, state, isCt = false) {
|
|
211
|
+
let ct = "";
|
|
212
|
+
const hasConditional = value.properties.some(
|
|
213
|
+
(property) => import_core2.types.isObjectProperty(property) && import_core2.types.isConditionalExpression(property.value)
|
|
214
|
+
);
|
|
215
|
+
if (hasConditional) {
|
|
216
|
+
imports.add("useComputed");
|
|
217
|
+
props[prop] = import_core2.types.callExpression(state.useComputed, [import_core2.types.arrowFunctionExpression([], value)]);
|
|
218
|
+
} else if (isCt) {
|
|
219
|
+
value.properties.forEach((property) => {
|
|
220
|
+
if (import_core2.types.isObjectProperty(property)) {
|
|
221
|
+
ct += `${property.key.name || property.key.value}:${property.value.value};`;
|
|
222
|
+
}
|
|
223
|
+
});
|
|
224
|
+
delete props[prop];
|
|
225
|
+
}
|
|
226
|
+
return ct;
|
|
227
|
+
}
|
|
228
|
+
function getNodeText(path) {
|
|
229
|
+
if (path.isJSXText()) {
|
|
230
|
+
return replaceSpace(path.node);
|
|
231
|
+
}
|
|
232
|
+
if (path.isJSXExpressionContainer()) {
|
|
233
|
+
const expression = path.get("expression");
|
|
234
|
+
if (expression.isStringLiteral() || expression.isNumericLiteral()) {
|
|
235
|
+
return String(expression.node.value);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
return "";
|
|
185
239
|
}
|
|
186
240
|
|
|
187
241
|
// src/jsx/constants.ts
|
|
@@ -224,286 +278,116 @@ var svgTags = [
|
|
|
224
278
|
];
|
|
225
279
|
|
|
226
280
|
// src/jsx/index.ts
|
|
227
|
-
var
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
281
|
+
var currentResult;
|
|
282
|
+
var isServer = false;
|
|
283
|
+
function addTemplate(content, join = false) {
|
|
284
|
+
if (isServer) {
|
|
285
|
+
if (join && currentResult.template.length > 0) {
|
|
286
|
+
currentResult.template[currentResult.template.length - 1] += content;
|
|
232
287
|
} else {
|
|
233
|
-
|
|
288
|
+
currentResult.template.push(content);
|
|
234
289
|
}
|
|
235
290
|
} else {
|
|
236
|
-
|
|
291
|
+
currentResult.template += content;
|
|
237
292
|
}
|
|
238
293
|
}
|
|
239
294
|
function transformJSX(path) {
|
|
295
|
+
var _a, _b;
|
|
296
|
+
isServer = (_b = (_a = path.state) == null ? void 0 : _a.opts) == null ? void 0 : _b.server;
|
|
297
|
+
const preCurrentResult = currentResult;
|
|
298
|
+
currentResult = isServer ? createServerResult() : createClientResult();
|
|
299
|
+
transformJSXElement(path, isServer, true);
|
|
300
|
+
path.replaceWith(isServer ? createServerNode(path) : createClientNode(path));
|
|
301
|
+
currentResult = preCurrentResult;
|
|
302
|
+
}
|
|
303
|
+
function createClientNode(path) {
|
|
304
|
+
var _a, _b;
|
|
240
305
|
const state = path.state;
|
|
241
|
-
|
|
242
|
-
const
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
|
|
306
|
+
const isJSXFragment = path.isJSXFragment();
|
|
307
|
+
const isComponent = path.isJSXElement() && isComponentName(getTagName(path.node));
|
|
308
|
+
const tmpl = isComponent ? import_core3.types.identifier(getTagName(path.node)) : path.scope.generateUidIdentifier("_tmpl$");
|
|
309
|
+
let templateNode;
|
|
310
|
+
if (!isComponent) {
|
|
311
|
+
templateNode = import_core3.types.callExpression(state.template, [
|
|
312
|
+
import_core3.types.stringLiteral(currentResult.template)
|
|
313
|
+
]);
|
|
314
|
+
state.tmplDeclaration.declarations.push(import_core3.types.variableDeclarator(tmpl, templateNode));
|
|
315
|
+
imports.add("template");
|
|
316
|
+
}
|
|
317
|
+
const key = (_b = currentResult.props.key) != null ? _b : (_a = currentResult.props[0]) == null ? void 0 : _a.key;
|
|
318
|
+
const propsArg = createProps(currentResult.props);
|
|
319
|
+
const args = isComponent && getTagName(path.node) === "Fragment" ? [import_core3.types.stringLiteral(""), propsArg] : [tmpl, propsArg];
|
|
320
|
+
if (key) {
|
|
321
|
+
args.push(key);
|
|
322
|
+
}
|
|
323
|
+
const fnName = isJSXFragment || isComponent && getTagName(path.node) === "Fragment" ? "Fragment" : "h";
|
|
324
|
+
imports.add(fnName);
|
|
325
|
+
return import_core3.types.callExpression(state[fnName], args);
|
|
254
326
|
}
|
|
255
|
-
function
|
|
327
|
+
function createServerNode(path) {
|
|
328
|
+
var _a, _b;
|
|
256
329
|
const state = path.state;
|
|
257
|
-
const
|
|
258
|
-
const tmpl =
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
const
|
|
267
|
-
delete result.props.key;
|
|
268
|
-
const args = [tmpl, createProps(result.props)];
|
|
330
|
+
const isComponent = path.isJSXElement() && isComponentName(getTagName(path.node));
|
|
331
|
+
const tmpl = isComponent ? import_core3.types.identifier(getTagName(path.node)) : path.scope.generateUidIdentifier("_tmpl$");
|
|
332
|
+
let templateNode;
|
|
333
|
+
if (!isComponent) {
|
|
334
|
+
templateNode = import_core3.types.arrayExpression(currentResult.template.map(import_core3.types.stringLiteral));
|
|
335
|
+
state.tmplDeclaration.declarations.push(import_core3.types.variableDeclarator(tmpl, templateNode));
|
|
336
|
+
}
|
|
337
|
+
const key = (_b = currentResult.props.key) != null ? _b : (_a = currentResult.props[0]) == null ? void 0 : _a.key;
|
|
338
|
+
const propsArg = createProps(currentResult.props);
|
|
339
|
+
const args = isComponent && getTagName(path.node) === "Fragment" ? [import_core3.types.stringLiteral(""), propsArg] : [tmpl, propsArg];
|
|
269
340
|
if (key) {
|
|
270
341
|
args.push(key);
|
|
271
342
|
}
|
|
272
|
-
const fnName =
|
|
343
|
+
const fnName = "ssg";
|
|
273
344
|
imports.add(fnName);
|
|
274
345
|
return import_core3.types.callExpression(state[fnName], args);
|
|
275
346
|
}
|
|
276
|
-
function
|
|
277
|
-
const
|
|
278
|
-
if (isArray(value)) {
|
|
279
|
-
return import_core3.types.arrayExpression(value.map(toAstNode));
|
|
280
|
-
}
|
|
281
|
-
if (value && typeof value === "object" && !import_core3.types.isNode(value)) {
|
|
282
|
-
return createProps(value);
|
|
283
|
-
}
|
|
284
|
-
switch (typeof value) {
|
|
285
|
-
case "string":
|
|
286
|
-
return import_core3.types.stringLiteral(value);
|
|
287
|
-
case "number":
|
|
288
|
-
return import_core3.types.numericLiteral(value);
|
|
289
|
-
case "boolean":
|
|
290
|
-
return import_core3.types.booleanLiteral(value);
|
|
291
|
-
case "undefined":
|
|
292
|
-
case void 0:
|
|
293
|
-
return import_core3.types.tsUndefinedKeyword();
|
|
294
|
-
case null:
|
|
295
|
-
return import_core3.types.nullLiteral();
|
|
296
|
-
default:
|
|
297
|
-
return value;
|
|
298
|
-
}
|
|
299
|
-
};
|
|
300
|
-
const result = Object.entries(props).map(
|
|
301
|
-
([prop, value]) => prop === "_$spread$" ? import_core3.types.spreadElement(toAstNode(value)) : import_core3.types.objectProperty(import_core3.types.stringLiteral(prop), toAstNode(value))
|
|
302
|
-
);
|
|
303
|
-
return import_core3.types.objectExpression(result);
|
|
304
|
-
}
|
|
305
|
-
function transformJSXElement(path, result, isRoot = false) {
|
|
347
|
+
function transformJSXElement(path, isServer2 = false, isRoot = false) {
|
|
348
|
+
const state = path.state;
|
|
306
349
|
if (path.isJSXElement()) {
|
|
307
350
|
const tagName = getTagName(path.node);
|
|
308
|
-
const tagIsComponent =
|
|
351
|
+
const tagIsComponent = isComponentName(tagName);
|
|
309
352
|
const isSelfClose = !tagIsComponent && selfClosingTags.includes(tagName);
|
|
310
|
-
const isSvg = svgTags.includes(tagName) &&
|
|
311
|
-
const { props, hasExpression } = getAttrProps(path);
|
|
312
|
-
if (props.key) {
|
|
313
|
-
result.props.key = props.key;
|
|
314
|
-
delete props.key;
|
|
315
|
-
}
|
|
353
|
+
const isSvg = svgTags.includes(tagName) && currentResult.index === 1;
|
|
354
|
+
const { props, hasExpression } = getAttrProps(path, state);
|
|
316
355
|
if (tagIsComponent) {
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
result.props = props;
|
|
329
|
-
const children = getChildren(path);
|
|
330
|
-
if (children.length > 0) {
|
|
331
|
-
const childrenGenerator = children.length === 1 ? children[0] : import_core3.types.arrayExpression(children);
|
|
332
|
-
if (import_core3.types.isConditionalExpression(childrenGenerator)) {
|
|
333
|
-
result.props.children = import_core3.types.arrowFunctionExpression([], childrenGenerator);
|
|
334
|
-
} else {
|
|
335
|
-
result.props.children = childrenGenerator;
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
} else {
|
|
339
|
-
transformJSX(path);
|
|
340
|
-
replaceChild(path.node, result);
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
function handleHTMLElement(path, result, tagName, isSelfClose, isSvg, props, hasExpression) {
|
|
344
|
-
if (isSvg) {
|
|
345
|
-
result.template = isSSG ? [`<svg _svg_ data-hk="${result.index}">`] : `<svg _svg_ >`;
|
|
346
|
-
}
|
|
347
|
-
addToTemplate(result, `<${tagName}${isSSG ? ` data-hk="${result.index}"` : ""}`, true);
|
|
348
|
-
handleAttributes(props, result);
|
|
349
|
-
addToTemplate(result, isSelfClose ? "/>" : ">", !hasExpression);
|
|
350
|
-
if (!isSelfClose) {
|
|
351
|
-
transformChildren(path, result);
|
|
352
|
-
if (hasSiblingElement(path) || isSSG) {
|
|
353
|
-
addToTemplate(result, `</${tagName}>`);
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
function transformChildren(path, result) {
|
|
358
|
-
const parentIndex = result.index;
|
|
359
|
-
path.get("children").reduce((pre, cur) => {
|
|
360
|
-
if (isValidChild(cur)) {
|
|
361
|
-
const lastChild = pre.at(-1);
|
|
362
|
-
if (lastChild && isTextChild(cur) && isTextChild(lastChild)) {
|
|
363
|
-
setNodeText(lastChild, getNodeText(lastChild) + getNodeText(cur));
|
|
356
|
+
if (isRoot) {
|
|
357
|
+
currentResult.props = props;
|
|
358
|
+
const children = getChildren(path);
|
|
359
|
+
if (children.length > 0) {
|
|
360
|
+
const childrenGenerator = children.length === 1 ? children[0] : import_core3.types.arrayExpression(children);
|
|
361
|
+
if (import_core3.types.isConditionalExpression(childrenGenerator)) {
|
|
362
|
+
currentResult.props.children = import_core3.types.arrowFunctionExpression([], childrenGenerator);
|
|
363
|
+
} else {
|
|
364
|
+
currentResult.props.children = childrenGenerator;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
364
367
|
} else {
|
|
365
|
-
|
|
368
|
+
transformJSX(path);
|
|
369
|
+
replaceChild(path.node);
|
|
366
370
|
}
|
|
367
|
-
}
|
|
368
|
-
return pre;
|
|
369
|
-
}, []).forEach((child, i, arr) => {
|
|
370
|
-
result.parentIndex = parentIndex;
|
|
371
|
-
result.isLastChild = i === arr.length - 1;
|
|
372
|
-
transformChild(child, result);
|
|
373
|
-
});
|
|
374
|
-
}
|
|
375
|
-
function transformChild(child, result) {
|
|
376
|
-
result.index++;
|
|
377
|
-
if (child.isJSXElement() || child.isJSXFragment()) {
|
|
378
|
-
transformJSXElement(child, result, false);
|
|
379
|
-
} else if (child.isJSXExpressionContainer()) {
|
|
380
|
-
const expression = child.get("expression");
|
|
381
|
-
if (expression.isStringLiteral() || expression.isNumericLiteral()) {
|
|
382
|
-
addToTemplate(result, `${expression.node.value}`, true);
|
|
383
|
-
} else if (expression.isExpression()) {
|
|
384
|
-
replaceChild(expression.node, result);
|
|
385
|
-
} else if (import_core3.types.isJSXEmptyExpression(expression.node)) {
|
|
386
371
|
} else {
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
return replaceSpace(path.node);
|
|
398
|
-
}
|
|
399
|
-
if (path.isJSXExpressionContainer()) {
|
|
400
|
-
const expression = path.get("expression");
|
|
401
|
-
if (expression.isStringLiteral() || expression.isNumericLiteral()) {
|
|
402
|
-
return String(expression.node.value);
|
|
403
|
-
}
|
|
404
|
-
}
|
|
405
|
-
return "";
|
|
406
|
-
}
|
|
407
|
-
function isStyleClassName(name) {
|
|
408
|
-
return name === "class" || name === "style";
|
|
409
|
-
}
|
|
410
|
-
function handleAttributes(props, result) {
|
|
411
|
-
let klass = "";
|
|
412
|
-
let style = "";
|
|
413
|
-
for (const [prop, value] of Object.entries(props)) {
|
|
414
|
-
if (prop === "class" && typeof value === "string") {
|
|
415
|
-
klass += ` ${value}`;
|
|
416
|
-
delete props[prop];
|
|
417
|
-
} else if (prop === "style" && typeof value === "string") {
|
|
418
|
-
style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
|
|
419
|
-
delete props[prop];
|
|
420
|
-
} else if (value === true) {
|
|
421
|
-
addToTemplate(result, ` ${prop}`);
|
|
422
|
-
delete props[prop];
|
|
423
|
-
} else if (value === false) {
|
|
424
|
-
delete props[prop];
|
|
425
|
-
} else if (typeof value === "string" || typeof value === "number") {
|
|
426
|
-
addToTemplate(result, ` ${prop}="${value}"`);
|
|
427
|
-
delete props[prop];
|
|
428
|
-
} else if (import_core3.types.isConditionalExpression(value)) {
|
|
429
|
-
props[prop] = import_core3.types.arrowFunctionExpression([], value);
|
|
430
|
-
} else if (import_core3.types.isObjectExpression(value)) {
|
|
431
|
-
const val = handleObjectExpression(prop, value, props, isStyleClassName(prop));
|
|
432
|
-
if (val) {
|
|
433
|
-
if (prop === "class") {
|
|
434
|
-
klass += ` ${val}`;
|
|
435
|
-
}
|
|
436
|
-
if (prop === "style") {
|
|
437
|
-
style += `${val}${val.at(-1) === ";" ? "" : ";"}`;
|
|
372
|
+
if (isSvg) {
|
|
373
|
+
currentResult.template = isServer2 ? [`<svg _svg_ data-hk="${currentResult.index}">`] : `<svg _svg_ >`;
|
|
374
|
+
}
|
|
375
|
+
addTemplate(`<${tagName}${isServer2 ? ` data-hk="${currentResult.index}"` : ""}`, true);
|
|
376
|
+
handleAttributes(props, state);
|
|
377
|
+
addTemplate(isSelfClose ? "/>" : ">", !hasExpression);
|
|
378
|
+
if (!isSelfClose) {
|
|
379
|
+
transformChildren(path);
|
|
380
|
+
if (hasSiblingElement(path) || isServer2) {
|
|
381
|
+
addTemplate(`</${tagName}>`);
|
|
438
382
|
}
|
|
439
383
|
}
|
|
440
384
|
}
|
|
441
|
-
}
|
|
442
|
-
if (Object.keys(props).length > 0) {
|
|
443
|
-
result.props[result.index] = props;
|
|
444
|
-
}
|
|
445
|
-
if (klass.trim()) {
|
|
446
|
-
addToTemplate(result, ` class="${klass.trim()}"`);
|
|
447
|
-
}
|
|
448
|
-
if (style.trim()) {
|
|
449
|
-
addToTemplate(result, ` style="${style.trim()}"`);
|
|
450
|
-
}
|
|
451
|
-
}
|
|
452
|
-
function handleObjectExpression(prop, value, props, isCt = false) {
|
|
453
|
-
let ct = "";
|
|
454
|
-
const hasConditional = value.properties.some(
|
|
455
|
-
(property) => import_core3.types.isObjectProperty(property) && import_core3.types.isConditionalExpression(property.value)
|
|
456
|
-
);
|
|
457
|
-
if (hasConditional) {
|
|
458
|
-
props[prop] = import_core3.types.arrowFunctionExpression([], value);
|
|
459
|
-
} else if (isCt) {
|
|
460
|
-
value.properties.forEach((property) => {
|
|
461
|
-
if (import_core3.types.isObjectProperty(property)) {
|
|
462
|
-
ct += `${property.key.name || property.key.value}:${property.value.value};`;
|
|
463
|
-
}
|
|
464
|
-
});
|
|
465
|
-
delete props[prop];
|
|
466
|
-
}
|
|
467
|
-
return ct;
|
|
468
|
-
}
|
|
469
|
-
function replaceChild(node, result) {
|
|
470
|
-
var _a, _b, _c, _d, _e;
|
|
471
|
-
if (result.isLastChild) {
|
|
472
|
-
result.index--;
|
|
473
385
|
} else {
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
(_c = (_a = result.props)[_b = result.parentIndex]) != null ? _c : _a[_b] = {};
|
|
477
|
-
(_e = (_d = result.props[result.parentIndex]).children) != null ? _e : _d.children = [];
|
|
478
|
-
result.props[result.parentIndex].children.push(
|
|
479
|
-
import_core3.types.arrayExpression([
|
|
480
|
-
import_core3.types.arrowFunctionExpression([], node),
|
|
481
|
-
result.isLastChild ? import_core3.types.nullLiteral() : import_core3.types.identifier(String(result.index))
|
|
482
|
-
])
|
|
483
|
-
);
|
|
484
|
-
}
|
|
485
|
-
function getChildren(path) {
|
|
486
|
-
return path.get("children").filter((child) => isValidChild(child)).map((child) => {
|
|
487
|
-
if (child.isJSXElement() || child.isJSXFragment()) {
|
|
488
|
-
transformJSX(child);
|
|
489
|
-
} else if (child.isJSXExpressionContainer()) {
|
|
490
|
-
child.replaceWith(child.get("expression"));
|
|
491
|
-
} else if (child.isJSXText()) {
|
|
492
|
-
child.replaceWith(import_core3.types.stringLiteral(replaceSpace(child.node)));
|
|
493
|
-
} else {
|
|
494
|
-
throw new Error("Unsupported child type");
|
|
495
|
-
}
|
|
496
|
-
return child.node;
|
|
497
|
-
});
|
|
498
|
-
}
|
|
499
|
-
function isValidChild(path) {
|
|
500
|
-
const regex = /^\s*$/;
|
|
501
|
-
if (path.isStringLiteral() || path.isJSXText()) {
|
|
502
|
-
return !regex.test(path.node.value);
|
|
386
|
+
currentResult.index--;
|
|
387
|
+
transformChildren(path);
|
|
503
388
|
}
|
|
504
|
-
return Object.keys(path.node).length > 0;
|
|
505
389
|
}
|
|
506
|
-
function getAttrProps(path) {
|
|
390
|
+
function getAttrProps(path, state) {
|
|
507
391
|
const props = {};
|
|
508
392
|
let hasExpression = false;
|
|
509
393
|
path.get("openingElement").get("attributes").forEach((attribute) => {
|
|
@@ -538,7 +422,10 @@ function getAttrProps(path) {
|
|
|
538
422
|
);
|
|
539
423
|
} else {
|
|
540
424
|
if (expression.isConditionalExpression()) {
|
|
541
|
-
|
|
425
|
+
imports.add("useComputed");
|
|
426
|
+
props[name] = import_core3.types.callExpression(state.useComputed, [
|
|
427
|
+
import_core3.types.arrowFunctionExpression([], expression.node)
|
|
428
|
+
]);
|
|
542
429
|
} else {
|
|
543
430
|
props[name] = expression.node;
|
|
544
431
|
}
|
|
@@ -561,16 +448,179 @@ function getAttrProps(path) {
|
|
|
561
448
|
hasExpression
|
|
562
449
|
};
|
|
563
450
|
}
|
|
451
|
+
function getChildren(path) {
|
|
452
|
+
return path.get("children").filter((child) => isValidChild(child)).map((child) => {
|
|
453
|
+
if (child.isJSXElement() || child.isJSXFragment()) {
|
|
454
|
+
transformJSX(child);
|
|
455
|
+
} else if (child.isJSXExpressionContainer()) {
|
|
456
|
+
child.replaceWith(child.get("expression"));
|
|
457
|
+
} else if (child.isJSXText()) {
|
|
458
|
+
child.replaceWith(import_core3.types.stringLiteral(replaceSpace(child.node)));
|
|
459
|
+
} else {
|
|
460
|
+
throw new Error("Unsupported child type");
|
|
461
|
+
}
|
|
462
|
+
return child.node;
|
|
463
|
+
});
|
|
464
|
+
}
|
|
465
|
+
function replaceChild(node) {
|
|
466
|
+
var _a, _b, _c, _d, _e;
|
|
467
|
+
if (currentResult.isLastChild) {
|
|
468
|
+
currentResult.index--;
|
|
469
|
+
} else {
|
|
470
|
+
addTemplate("<!>");
|
|
471
|
+
}
|
|
472
|
+
(_c = (_a = currentResult.props)[_b = currentResult.parentIndex]) != null ? _c : _a[_b] = {};
|
|
473
|
+
(_e = (_d = currentResult.props[currentResult.parentIndex]).children) != null ? _e : _d.children = [];
|
|
474
|
+
currentResult.props[currentResult.parentIndex].children.push(
|
|
475
|
+
import_core3.types.arrayExpression([
|
|
476
|
+
import_core3.types.arrowFunctionExpression([], node),
|
|
477
|
+
currentResult.isLastChild ? import_core3.types.nullLiteral() : import_core3.types.identifier(String(currentResult.index))
|
|
478
|
+
])
|
|
479
|
+
);
|
|
480
|
+
}
|
|
481
|
+
function handleAttributes(props, state) {
|
|
482
|
+
let klass = "";
|
|
483
|
+
let style = "";
|
|
484
|
+
for (const [prop, value] of Object.entries(props)) {
|
|
485
|
+
if (prop === "class" && typeof value === "string") {
|
|
486
|
+
klass += ` ${value}`;
|
|
487
|
+
delete props[prop];
|
|
488
|
+
} else if (prop === "style" && typeof value === "string") {
|
|
489
|
+
style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
|
|
490
|
+
delete props[prop];
|
|
491
|
+
} else if (value === true) {
|
|
492
|
+
addTemplate(` ${prop}`);
|
|
493
|
+
delete props[prop];
|
|
494
|
+
} else if (value === false) {
|
|
495
|
+
delete props[prop];
|
|
496
|
+
} else if (typeof value === "string" || typeof value === "number") {
|
|
497
|
+
addTemplate(` ${prop}="${value}"`);
|
|
498
|
+
delete props[prop];
|
|
499
|
+
} else if (import_core3.types.isConditionalExpression(value)) {
|
|
500
|
+
imports.add("useComputed");
|
|
501
|
+
props[prop] = import_core3.types.callExpression(state.useComputed, [import_core3.types.arrowFunctionExpression([], value)]);
|
|
502
|
+
} else if (import_core3.types.isObjectExpression(value)) {
|
|
503
|
+
const val = hasObjectExpression(
|
|
504
|
+
prop,
|
|
505
|
+
value,
|
|
506
|
+
props,
|
|
507
|
+
state,
|
|
508
|
+
prop === "class" || prop === "style"
|
|
509
|
+
);
|
|
510
|
+
if (val) {
|
|
511
|
+
if (prop === "class") {
|
|
512
|
+
klass += ` ${val}`;
|
|
513
|
+
}
|
|
514
|
+
if (prop === "style") {
|
|
515
|
+
style += `${val}${val.at(-1) === ";" ? "" : ";"}`;
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
}
|
|
519
|
+
}
|
|
520
|
+
if (Object.keys(props).length > 0) {
|
|
521
|
+
currentResult.props[currentResult.index] = props;
|
|
522
|
+
}
|
|
523
|
+
if (klass.trim()) {
|
|
524
|
+
addTemplate(` class="${klass.trim()}"`);
|
|
525
|
+
}
|
|
526
|
+
if (style.trim()) {
|
|
527
|
+
addTemplate(` style="${style.trim()}"`);
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
function transformChildren(path) {
|
|
531
|
+
const parentIndex = currentResult.index;
|
|
532
|
+
path.get("children").reduce((pre, cur) => {
|
|
533
|
+
if (isValidChild(cur)) {
|
|
534
|
+
const lastChild = pre.at(-1);
|
|
535
|
+
if (lastChild && isTextChild(cur) && isTextChild(lastChild)) {
|
|
536
|
+
setNodeText(lastChild, getNodeText(lastChild) + getNodeText(cur));
|
|
537
|
+
} else {
|
|
538
|
+
pre.push(cur);
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
return pre;
|
|
542
|
+
}, []).forEach((child, i, arr) => {
|
|
543
|
+
currentResult.parentIndex = parentIndex;
|
|
544
|
+
currentResult.isLastChild = i === arr.length - 1;
|
|
545
|
+
transformChild(child);
|
|
546
|
+
});
|
|
547
|
+
}
|
|
548
|
+
function transformChild(child) {
|
|
549
|
+
currentResult.index++;
|
|
550
|
+
if (child.isJSXElement() || child.isJSXFragment()) {
|
|
551
|
+
transformJSXElement(child, false);
|
|
552
|
+
} else if (child.isJSXExpressionContainer()) {
|
|
553
|
+
const expression = child.get("expression");
|
|
554
|
+
if (expression.isStringLiteral() || expression.isNumericLiteral()) {
|
|
555
|
+
addTemplate(`${expression.node.value}`, true);
|
|
556
|
+
} else if (expression.isExpression()) {
|
|
557
|
+
replaceChild(expression.node);
|
|
558
|
+
} else if (import_core3.types.isJSXEmptyExpression(expression.node)) {
|
|
559
|
+
} else {
|
|
560
|
+
throw new Error("Unsupported child type");
|
|
561
|
+
}
|
|
562
|
+
} else if (child.isJSXText()) {
|
|
563
|
+
addTemplate(replaceSpace(child.node), true);
|
|
564
|
+
} else {
|
|
565
|
+
throw new Error("Unsupported child type");
|
|
566
|
+
}
|
|
567
|
+
}
|
|
568
|
+
function createProps(props) {
|
|
569
|
+
const result = [];
|
|
570
|
+
for (const prop in props) {
|
|
571
|
+
let value = props[prop];
|
|
572
|
+
if (prop === "key") {
|
|
573
|
+
continue;
|
|
574
|
+
}
|
|
575
|
+
if (Array.isArray(value)) {
|
|
576
|
+
value = import_core3.types.arrayExpression(value);
|
|
577
|
+
}
|
|
578
|
+
if (typeof value === "object" && value !== null && !import_core3.types.isNode(value)) {
|
|
579
|
+
value = createProps(value);
|
|
580
|
+
}
|
|
581
|
+
if (typeof value === "string") {
|
|
582
|
+
value = import_core3.types.stringLiteral(value);
|
|
583
|
+
}
|
|
584
|
+
if (typeof value === "number") {
|
|
585
|
+
value = import_core3.types.numericLiteral(value);
|
|
586
|
+
}
|
|
587
|
+
if (typeof value === "boolean") {
|
|
588
|
+
value = import_core3.types.booleanLiteral(value);
|
|
589
|
+
}
|
|
590
|
+
if (value === void 0) {
|
|
591
|
+
value = import_core3.types.tsUndefinedKeyword();
|
|
592
|
+
}
|
|
593
|
+
if (value === null) {
|
|
594
|
+
value = import_core3.types.nullLiteral();
|
|
595
|
+
}
|
|
596
|
+
if (prop === "_$spread$") {
|
|
597
|
+
result.push(import_core3.types.spreadElement(value));
|
|
598
|
+
} else {
|
|
599
|
+
result.push(import_core3.types.objectProperty(import_core3.types.stringLiteral(prop), value));
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
return import_core3.types.objectExpression(result);
|
|
603
|
+
}
|
|
564
604
|
|
|
565
605
|
// src/signal/symbol.ts
|
|
606
|
+
var import_core5 = require("@babel/core");
|
|
607
|
+
|
|
608
|
+
// src/shared.ts
|
|
566
609
|
var import_core4 = require("@babel/core");
|
|
610
|
+
function isSymbolStart(path, name) {
|
|
611
|
+
const state = path.state;
|
|
612
|
+
const { symbol } = (state == null ? void 0 : state.opts) || "$";
|
|
613
|
+
return startsWith(name, symbol);
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
// src/signal/symbol.ts
|
|
567
617
|
function replaceSymbol(path) {
|
|
568
618
|
const { init, id } = path.node;
|
|
569
619
|
const variableName = id.name;
|
|
570
|
-
if (
|
|
571
|
-
const isComputed = init && (
|
|
620
|
+
if (import_core5.types.isObjectPattern(id) || import_core5.types.isArrayPattern(id) || !isSymbolStart(path, variableName)) return;
|
|
621
|
+
const isComputed = init && (import_core5.types.isFunctionExpression(init) || import_core5.types.isArrowFunctionExpression(init)) && path.parent.kind === "const";
|
|
572
622
|
const hookName = isComputed ? "useComputed" : "useSignal";
|
|
573
|
-
const newInit =
|
|
623
|
+
const newInit = import_core5.types.callExpression(import_core5.types.identifier(path.state[hookName].name), init ? [init] : []);
|
|
574
624
|
imports.add(hookName);
|
|
575
625
|
path.node.init = newInit;
|
|
576
626
|
}
|
|
@@ -580,31 +630,31 @@ function symbolIdentifier(path) {
|
|
|
580
630
|
const { node } = path;
|
|
581
631
|
if (!isSymbolStart(path, node.name)) return;
|
|
582
632
|
if (!path.findParent((p) => p.isMemberExpression() && p.node.property.name === "value")) {
|
|
583
|
-
path.replaceWith(
|
|
633
|
+
path.replaceWith(import_core5.types.memberExpression(import_core5.types.identifier(node.name), import_core5.types.identifier("value")));
|
|
584
634
|
}
|
|
585
635
|
}
|
|
586
636
|
function shouldProcessIdentifier(parentPath) {
|
|
587
|
-
return parentPath && !
|
|
637
|
+
return parentPath && !import_core5.types.isVariableDeclarator(parentPath) && !import_core5.types.isImportSpecifier(parentPath) && !import_core5.types.isObjectProperty(parentPath) && !import_core5.types.isArrayPattern(parentPath) && !import_core5.types.isObjectPattern(parentPath);
|
|
588
638
|
}
|
|
589
639
|
function symbolObjectPattern(path) {
|
|
590
640
|
path.node.properties.forEach((property) => {
|
|
591
|
-
if (
|
|
592
|
-
property.key =
|
|
641
|
+
if (import_core5.types.isObjectProperty(property) && import_core5.types.isIdentifier(property.key) && isSymbolStart(path, property.key.name)) {
|
|
642
|
+
property.key = import_core5.types.identifier(property.key.name);
|
|
593
643
|
}
|
|
594
644
|
});
|
|
595
645
|
}
|
|
596
646
|
function symbolArrayPattern(path) {
|
|
597
647
|
path.node.elements.forEach((element) => {
|
|
598
|
-
if (
|
|
599
|
-
element.name =
|
|
600
|
-
} else if (
|
|
648
|
+
if (import_core5.types.isIdentifier(element) && element.name.startsWith("$")) {
|
|
649
|
+
element.name = import_core5.types.identifier(element.name).name;
|
|
650
|
+
} else if (import_core5.types.isObjectPattern(element)) {
|
|
601
651
|
symbolObjectPattern({ node: element });
|
|
602
652
|
}
|
|
603
653
|
});
|
|
604
654
|
}
|
|
605
655
|
|
|
606
656
|
// src/signal/import.ts
|
|
607
|
-
var
|
|
657
|
+
var import_core6 = require("@babel/core");
|
|
608
658
|
function replaceImportDeclaration(path) {
|
|
609
659
|
path.node.specifiers.forEach((specifier) => {
|
|
610
660
|
const variableName = specifier.local.name;
|
|
@@ -618,11 +668,11 @@ function isVariableUsedAsObject(path, variableName) {
|
|
|
618
668
|
var _a;
|
|
619
669
|
const binding = path.scope.getBinding(variableName);
|
|
620
670
|
return ((_a = binding == null ? void 0 : binding.referencePaths) == null ? void 0 : _a.some((referencePath) => {
|
|
621
|
-
if (
|
|
671
|
+
if (import_core6.types.isMemberExpression(referencePath.parent)) {
|
|
622
672
|
const { object, property } = referencePath.parent;
|
|
623
|
-
if (
|
|
673
|
+
if (import_core6.types.isIdentifier(object, { name: variableName })) {
|
|
624
674
|
referencePath.parentPath.replaceWith(
|
|
625
|
-
|
|
675
|
+
import_core6.types.memberExpression(import_core6.types.memberExpression(object, import_core6.types.identifier("value")), property)
|
|
626
676
|
);
|
|
627
677
|
return true;
|
|
628
678
|
}
|
|
@@ -632,28 +682,30 @@ function isVariableUsedAsObject(path, variableName) {
|
|
|
632
682
|
}
|
|
633
683
|
|
|
634
684
|
// src/signal/props.ts
|
|
635
|
-
var
|
|
685
|
+
var import_core7 = require("@babel/core");
|
|
636
686
|
function replaceProps(path) {
|
|
637
687
|
var _a;
|
|
638
688
|
const state = path.state;
|
|
639
689
|
const firstParam = path.node.params[0];
|
|
640
|
-
if (!firstParam || !
|
|
690
|
+
if (!firstParam || !import_core7.types.isObjectPattern(firstParam)) return;
|
|
641
691
|
const returnStatement = path.get("body").get("body").find((statement) => statement.isReturnStatement());
|
|
642
|
-
if (!returnStatement || !
|
|
692
|
+
if (!returnStatement || !import_core7.types.isJSXElement((_a = returnStatement.node) == null ? void 0 : _a.argument)) return;
|
|
643
693
|
const replaceProperties = (properties2, parentPath) => {
|
|
644
694
|
properties2.forEach((property) => {
|
|
645
|
-
if (
|
|
695
|
+
if (import_core7.types.isObjectProperty(property) && import_core7.types.isIdentifier(property.key)) {
|
|
646
696
|
const keyName = property.key.name;
|
|
647
|
-
if (
|
|
697
|
+
if (import_core7.types.isIdentifier(property.value)) {
|
|
648
698
|
path.scope.rename(property.value.name, `${parentPath}${keyName}`);
|
|
649
|
-
} else if (
|
|
699
|
+
} else if (import_core7.types.isObjectPattern(property.value)) {
|
|
650
700
|
replaceProperties(property.value.properties, `${parentPath}${keyName}.`);
|
|
651
701
|
}
|
|
652
702
|
}
|
|
653
703
|
});
|
|
654
704
|
};
|
|
655
705
|
const properties = firstParam.properties;
|
|
656
|
-
const notRestProperties = properties.filter(
|
|
706
|
+
const notRestProperties = properties.filter(
|
|
707
|
+
(property) => !import_core7.types.isRestElement(property)
|
|
708
|
+
);
|
|
657
709
|
replaceProperties(notRestProperties, "__props.");
|
|
658
710
|
const notRestNames = notRestProperties.map((property) => property.key.name);
|
|
659
711
|
if (notRestNames.some((name) => startsWith(name, "$"))) {
|
|
@@ -663,12 +715,12 @@ function replaceProps(path) {
|
|
|
663
715
|
handleRestElement(path, state, properties, notRestNames);
|
|
664
716
|
}
|
|
665
717
|
function handleRestElement(path, state, properties, notRestNames) {
|
|
666
|
-
const restElement = properties.find((property) =>
|
|
667
|
-
path.node.params[0] =
|
|
718
|
+
const restElement = properties.find((property) => import_core7.types.isRestElement(property));
|
|
719
|
+
path.node.params[0] = import_core7.types.identifier("__props");
|
|
668
720
|
if (restElement) {
|
|
669
721
|
const restName = restElement.argument.name;
|
|
670
722
|
if (notRestNames.length === 0) {
|
|
671
|
-
path.node.params[0] =
|
|
723
|
+
path.node.params[0] = import_core7.types.identifier(restName);
|
|
672
724
|
} else {
|
|
673
725
|
const restVariableDeclaration = createRestVariableDeclaration(state, restName, notRestNames);
|
|
674
726
|
imports.add("useReactive");
|
|
@@ -677,12 +729,12 @@ function handleRestElement(path, state, properties, notRestNames) {
|
|
|
677
729
|
}
|
|
678
730
|
}
|
|
679
731
|
function createRestVariableDeclaration(state, restName, notRestNames) {
|
|
680
|
-
return
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
732
|
+
return import_core7.types.variableDeclaration("const", [
|
|
733
|
+
import_core7.types.variableDeclarator(
|
|
734
|
+
import_core7.types.identifier(restName),
|
|
735
|
+
import_core7.types.callExpression(state.useReactive, [
|
|
736
|
+
import_core7.types.identifier("__props"),
|
|
737
|
+
import_core7.types.arrayExpression(notRestNames.map((name) => import_core7.types.stringLiteral(name)))
|
|
686
738
|
])
|
|
687
739
|
)
|
|
688
740
|
]);
|