babel-plugin-essor 0.0.14-beta.6 → 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 -289
- 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 -288
- 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,282 +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
|
-
result.props.children = childrenGenerator;
|
|
333
|
-
}
|
|
334
|
-
} else {
|
|
335
|
-
transformJSX(path);
|
|
336
|
-
replaceChild(path.node, result);
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
function handleHTMLElement(path, result, tagName, isSelfClose, isSvg, props, hasExpression) {
|
|
340
|
-
if (isSvg) {
|
|
341
|
-
result.template = isSSG ? [`<svg _svg_ data-hk="${result.index}">`] : `<svg _svg_ >`;
|
|
342
|
-
}
|
|
343
|
-
addToTemplate(result, `<${tagName}${isSSG ? ` data-hk="${result.index}"` : ""}`, true);
|
|
344
|
-
handleAttributes(props, result);
|
|
345
|
-
addToTemplate(result, isSelfClose ? "/>" : ">", !hasExpression);
|
|
346
|
-
if (!isSelfClose) {
|
|
347
|
-
transformChildren(path, result);
|
|
348
|
-
if (hasSiblingElement(path) || isSSG) {
|
|
349
|
-
addToTemplate(result, `</${tagName}>`);
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
}
|
|
353
|
-
function transformChildren(path, result) {
|
|
354
|
-
const parentIndex = result.index;
|
|
355
|
-
path.get("children").reduce((pre, cur) => {
|
|
356
|
-
if (isValidChild(cur)) {
|
|
357
|
-
const lastChild = pre.at(-1);
|
|
358
|
-
if (lastChild && isTextChild(cur) && isTextChild(lastChild)) {
|
|
359
|
-
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
|
+
}
|
|
360
367
|
} else {
|
|
361
|
-
|
|
368
|
+
transformJSX(path);
|
|
369
|
+
replaceChild(path.node);
|
|
362
370
|
}
|
|
363
|
-
}
|
|
364
|
-
return pre;
|
|
365
|
-
}, []).forEach((child, i, arr) => {
|
|
366
|
-
result.parentIndex = parentIndex;
|
|
367
|
-
result.isLastChild = i === arr.length - 1;
|
|
368
|
-
transformChild(child, result);
|
|
369
|
-
});
|
|
370
|
-
}
|
|
371
|
-
function transformChild(child, result) {
|
|
372
|
-
result.index++;
|
|
373
|
-
if (child.isJSXElement() || child.isJSXFragment()) {
|
|
374
|
-
transformJSXElement(child, result, false);
|
|
375
|
-
} else if (child.isJSXExpressionContainer()) {
|
|
376
|
-
const expression = child.get("expression");
|
|
377
|
-
if (expression.isStringLiteral() || expression.isNumericLiteral()) {
|
|
378
|
-
addToTemplate(result, `${expression.node.value}`, true);
|
|
379
|
-
} else if (expression.isExpression()) {
|
|
380
|
-
replaceChild(expression.node, result);
|
|
381
|
-
} else if (import_core3.types.isJSXEmptyExpression(expression.node)) {
|
|
382
371
|
} else {
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
return replaceSpace(path.node);
|
|
394
|
-
}
|
|
395
|
-
if (path.isJSXExpressionContainer()) {
|
|
396
|
-
const expression = path.get("expression");
|
|
397
|
-
if (expression.isStringLiteral() || expression.isNumericLiteral()) {
|
|
398
|
-
return String(expression.node.value);
|
|
399
|
-
}
|
|
400
|
-
}
|
|
401
|
-
return "";
|
|
402
|
-
}
|
|
403
|
-
function isStyleClassName(name) {
|
|
404
|
-
return name === "class" || name === "style";
|
|
405
|
-
}
|
|
406
|
-
function handleAttributes(props, result) {
|
|
407
|
-
let klass = "";
|
|
408
|
-
let style = "";
|
|
409
|
-
for (const [prop, value] of Object.entries(props)) {
|
|
410
|
-
if (prop === "class" && typeof value === "string") {
|
|
411
|
-
klass += ` ${value}`;
|
|
412
|
-
delete props[prop];
|
|
413
|
-
} else if (prop === "style" && typeof value === "string") {
|
|
414
|
-
style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
|
|
415
|
-
delete props[prop];
|
|
416
|
-
} else if (value === true) {
|
|
417
|
-
addToTemplate(result, ` ${prop}`);
|
|
418
|
-
delete props[prop];
|
|
419
|
-
} else if (value === false) {
|
|
420
|
-
delete props[prop];
|
|
421
|
-
} else if (typeof value === "string" || typeof value === "number") {
|
|
422
|
-
addToTemplate(result, ` ${prop}="${value}"`);
|
|
423
|
-
delete props[prop];
|
|
424
|
-
} else if (import_core3.types.isConditionalExpression(value)) {
|
|
425
|
-
props[prop] = import_core3.types.arrowFunctionExpression([], value);
|
|
426
|
-
} else if (import_core3.types.isObjectExpression(value)) {
|
|
427
|
-
const val = handleObjectExpression(prop, value, props, isStyleClassName(prop));
|
|
428
|
-
if (val) {
|
|
429
|
-
if (prop === "class") {
|
|
430
|
-
klass += ` ${val}`;
|
|
431
|
-
}
|
|
432
|
-
if (prop === "style") {
|
|
433
|
-
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}>`);
|
|
434
382
|
}
|
|
435
383
|
}
|
|
436
384
|
}
|
|
437
|
-
}
|
|
438
|
-
if (Object.keys(props).length > 0) {
|
|
439
|
-
result.props[result.index] = props;
|
|
440
|
-
}
|
|
441
|
-
if (klass.trim()) {
|
|
442
|
-
addToTemplate(result, ` class="${klass.trim()}"`);
|
|
443
|
-
}
|
|
444
|
-
if (style.trim()) {
|
|
445
|
-
addToTemplate(result, ` style="${style.trim()}"`);
|
|
446
|
-
}
|
|
447
|
-
}
|
|
448
|
-
function handleObjectExpression(prop, value, props, isCt = false) {
|
|
449
|
-
let ct = "";
|
|
450
|
-
const hasConditional = value.properties.some(
|
|
451
|
-
(property) => import_core3.types.isObjectProperty(property) && import_core3.types.isConditionalExpression(property.value)
|
|
452
|
-
);
|
|
453
|
-
if (hasConditional) {
|
|
454
|
-
props[prop] = import_core3.types.arrowFunctionExpression([], value);
|
|
455
|
-
} else if (isCt) {
|
|
456
|
-
value.properties.forEach((property) => {
|
|
457
|
-
if (import_core3.types.isObjectProperty(property)) {
|
|
458
|
-
ct += `${property.key.name || property.key.value}:${property.value.value};`;
|
|
459
|
-
}
|
|
460
|
-
});
|
|
461
|
-
delete props[prop];
|
|
462
|
-
}
|
|
463
|
-
return ct;
|
|
464
|
-
}
|
|
465
|
-
function replaceChild(node, result) {
|
|
466
|
-
var _a, _b, _c, _d, _e;
|
|
467
|
-
if (result.isLastChild) {
|
|
468
|
-
result.index--;
|
|
469
385
|
} else {
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
(_c = (_a = result.props)[_b = result.parentIndex]) != null ? _c : _a[_b] = {};
|
|
473
|
-
(_e = (_d = result.props[result.parentIndex]).children) != null ? _e : _d.children = [];
|
|
474
|
-
result.props[result.parentIndex].children.push(
|
|
475
|
-
import_core3.types.arrayExpression([
|
|
476
|
-
import_core3.types.arrowFunctionExpression([], node),
|
|
477
|
-
result.isLastChild ? import_core3.types.nullLiteral() : import_core3.types.identifier(String(result.index))
|
|
478
|
-
])
|
|
479
|
-
);
|
|
480
|
-
}
|
|
481
|
-
function getChildren(path) {
|
|
482
|
-
return path.get("children").filter((child) => isValidChild(child)).map((child) => {
|
|
483
|
-
if (child.isJSXElement() || child.isJSXFragment()) {
|
|
484
|
-
transformJSX(child);
|
|
485
|
-
} else if (child.isJSXExpressionContainer()) {
|
|
486
|
-
child.replaceWith(child.get("expression"));
|
|
487
|
-
} else if (child.isJSXText()) {
|
|
488
|
-
child.replaceWith(import_core3.types.stringLiteral(replaceSpace(child.node)));
|
|
489
|
-
} else {
|
|
490
|
-
throw new Error("Unsupported child type");
|
|
491
|
-
}
|
|
492
|
-
return child.node;
|
|
493
|
-
});
|
|
494
|
-
}
|
|
495
|
-
function isValidChild(path) {
|
|
496
|
-
const regex = /^\s*$/;
|
|
497
|
-
if (path.isStringLiteral() || path.isJSXText()) {
|
|
498
|
-
return !regex.test(path.node.value);
|
|
386
|
+
currentResult.index--;
|
|
387
|
+
transformChildren(path);
|
|
499
388
|
}
|
|
500
|
-
return Object.keys(path.node).length > 0;
|
|
501
389
|
}
|
|
502
|
-
function getAttrProps(path) {
|
|
390
|
+
function getAttrProps(path, state) {
|
|
503
391
|
const props = {};
|
|
504
392
|
let hasExpression = false;
|
|
505
393
|
path.get("openingElement").get("attributes").forEach((attribute) => {
|
|
@@ -534,7 +422,10 @@ function getAttrProps(path) {
|
|
|
534
422
|
);
|
|
535
423
|
} else {
|
|
536
424
|
if (expression.isConditionalExpression()) {
|
|
537
|
-
|
|
425
|
+
imports.add("useComputed");
|
|
426
|
+
props[name] = import_core3.types.callExpression(state.useComputed, [
|
|
427
|
+
import_core3.types.arrowFunctionExpression([], expression.node)
|
|
428
|
+
]);
|
|
538
429
|
} else {
|
|
539
430
|
props[name] = expression.node;
|
|
540
431
|
}
|
|
@@ -557,16 +448,179 @@ function getAttrProps(path) {
|
|
|
557
448
|
hasExpression
|
|
558
449
|
};
|
|
559
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
|
+
}
|
|
560
604
|
|
|
561
605
|
// src/signal/symbol.ts
|
|
606
|
+
var import_core5 = require("@babel/core");
|
|
607
|
+
|
|
608
|
+
// src/shared.ts
|
|
562
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
|
|
563
617
|
function replaceSymbol(path) {
|
|
564
618
|
const { init, id } = path.node;
|
|
565
619
|
const variableName = id.name;
|
|
566
|
-
if (
|
|
567
|
-
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";
|
|
568
622
|
const hookName = isComputed ? "useComputed" : "useSignal";
|
|
569
|
-
const newInit =
|
|
623
|
+
const newInit = import_core5.types.callExpression(import_core5.types.identifier(path.state[hookName].name), init ? [init] : []);
|
|
570
624
|
imports.add(hookName);
|
|
571
625
|
path.node.init = newInit;
|
|
572
626
|
}
|
|
@@ -576,31 +630,31 @@ function symbolIdentifier(path) {
|
|
|
576
630
|
const { node } = path;
|
|
577
631
|
if (!isSymbolStart(path, node.name)) return;
|
|
578
632
|
if (!path.findParent((p) => p.isMemberExpression() && p.node.property.name === "value")) {
|
|
579
|
-
path.replaceWith(
|
|
633
|
+
path.replaceWith(import_core5.types.memberExpression(import_core5.types.identifier(node.name), import_core5.types.identifier("value")));
|
|
580
634
|
}
|
|
581
635
|
}
|
|
582
636
|
function shouldProcessIdentifier(parentPath) {
|
|
583
|
-
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);
|
|
584
638
|
}
|
|
585
639
|
function symbolObjectPattern(path) {
|
|
586
640
|
path.node.properties.forEach((property) => {
|
|
587
|
-
if (
|
|
588
|
-
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);
|
|
589
643
|
}
|
|
590
644
|
});
|
|
591
645
|
}
|
|
592
646
|
function symbolArrayPattern(path) {
|
|
593
647
|
path.node.elements.forEach((element) => {
|
|
594
|
-
if (
|
|
595
|
-
element.name =
|
|
596
|
-
} 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)) {
|
|
597
651
|
symbolObjectPattern({ node: element });
|
|
598
652
|
}
|
|
599
653
|
});
|
|
600
654
|
}
|
|
601
655
|
|
|
602
656
|
// src/signal/import.ts
|
|
603
|
-
var
|
|
657
|
+
var import_core6 = require("@babel/core");
|
|
604
658
|
function replaceImportDeclaration(path) {
|
|
605
659
|
path.node.specifiers.forEach((specifier) => {
|
|
606
660
|
const variableName = specifier.local.name;
|
|
@@ -614,11 +668,11 @@ function isVariableUsedAsObject(path, variableName) {
|
|
|
614
668
|
var _a;
|
|
615
669
|
const binding = path.scope.getBinding(variableName);
|
|
616
670
|
return ((_a = binding == null ? void 0 : binding.referencePaths) == null ? void 0 : _a.some((referencePath) => {
|
|
617
|
-
if (
|
|
671
|
+
if (import_core6.types.isMemberExpression(referencePath.parent)) {
|
|
618
672
|
const { object, property } = referencePath.parent;
|
|
619
|
-
if (
|
|
673
|
+
if (import_core6.types.isIdentifier(object, { name: variableName })) {
|
|
620
674
|
referencePath.parentPath.replaceWith(
|
|
621
|
-
|
|
675
|
+
import_core6.types.memberExpression(import_core6.types.memberExpression(object, import_core6.types.identifier("value")), property)
|
|
622
676
|
);
|
|
623
677
|
return true;
|
|
624
678
|
}
|
|
@@ -628,28 +682,30 @@ function isVariableUsedAsObject(path, variableName) {
|
|
|
628
682
|
}
|
|
629
683
|
|
|
630
684
|
// src/signal/props.ts
|
|
631
|
-
var
|
|
685
|
+
var import_core7 = require("@babel/core");
|
|
632
686
|
function replaceProps(path) {
|
|
633
687
|
var _a;
|
|
634
688
|
const state = path.state;
|
|
635
689
|
const firstParam = path.node.params[0];
|
|
636
|
-
if (!firstParam || !
|
|
690
|
+
if (!firstParam || !import_core7.types.isObjectPattern(firstParam)) return;
|
|
637
691
|
const returnStatement = path.get("body").get("body").find((statement) => statement.isReturnStatement());
|
|
638
|
-
if (!returnStatement || !
|
|
692
|
+
if (!returnStatement || !import_core7.types.isJSXElement((_a = returnStatement.node) == null ? void 0 : _a.argument)) return;
|
|
639
693
|
const replaceProperties = (properties2, parentPath) => {
|
|
640
694
|
properties2.forEach((property) => {
|
|
641
|
-
if (
|
|
695
|
+
if (import_core7.types.isObjectProperty(property) && import_core7.types.isIdentifier(property.key)) {
|
|
642
696
|
const keyName = property.key.name;
|
|
643
|
-
if (
|
|
697
|
+
if (import_core7.types.isIdentifier(property.value)) {
|
|
644
698
|
path.scope.rename(property.value.name, `${parentPath}${keyName}`);
|
|
645
|
-
} else if (
|
|
699
|
+
} else if (import_core7.types.isObjectPattern(property.value)) {
|
|
646
700
|
replaceProperties(property.value.properties, `${parentPath}${keyName}.`);
|
|
647
701
|
}
|
|
648
702
|
}
|
|
649
703
|
});
|
|
650
704
|
};
|
|
651
705
|
const properties = firstParam.properties;
|
|
652
|
-
const notRestProperties = properties.filter(
|
|
706
|
+
const notRestProperties = properties.filter(
|
|
707
|
+
(property) => !import_core7.types.isRestElement(property)
|
|
708
|
+
);
|
|
653
709
|
replaceProperties(notRestProperties, "__props.");
|
|
654
710
|
const notRestNames = notRestProperties.map((property) => property.key.name);
|
|
655
711
|
if (notRestNames.some((name) => startsWith(name, "$"))) {
|
|
@@ -659,12 +715,12 @@ function replaceProps(path) {
|
|
|
659
715
|
handleRestElement(path, state, properties, notRestNames);
|
|
660
716
|
}
|
|
661
717
|
function handleRestElement(path, state, properties, notRestNames) {
|
|
662
|
-
const restElement = properties.find((property) =>
|
|
663
|
-
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");
|
|
664
720
|
if (restElement) {
|
|
665
721
|
const restName = restElement.argument.name;
|
|
666
722
|
if (notRestNames.length === 0) {
|
|
667
|
-
path.node.params[0] =
|
|
723
|
+
path.node.params[0] = import_core7.types.identifier(restName);
|
|
668
724
|
} else {
|
|
669
725
|
const restVariableDeclaration = createRestVariableDeclaration(state, restName, notRestNames);
|
|
670
726
|
imports.add("useReactive");
|
|
@@ -673,12 +729,12 @@ function handleRestElement(path, state, properties, notRestNames) {
|
|
|
673
729
|
}
|
|
674
730
|
}
|
|
675
731
|
function createRestVariableDeclaration(state, restName, notRestNames) {
|
|
676
|
-
return
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
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)))
|
|
682
738
|
])
|
|
683
739
|
)
|
|
684
740
|
]);
|