@builder.io/mitosis 0.5.4 → 0.5.5
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.
|
@@ -3,5 +3,5 @@ import { MitosisComponent } from '../../types/mitosis-component';
|
|
|
3
3
|
import { MitosisNode } from '../../types/mitosis-node';
|
|
4
4
|
import { TranspilerGenerator } from '../../types/transpiler';
|
|
5
5
|
export declare const DEFAULT_FORMAT: ToMitosisOptions['format'];
|
|
6
|
-
export declare const blockToMitosis: (json: MitosisNode, toMitosisOptions: Partial<ToMitosisOptions> | undefined, component: MitosisComponent) => string;
|
|
6
|
+
export declare const blockToMitosis: (json: MitosisNode, toMitosisOptions: Partial<ToMitosisOptions> | undefined, component: MitosisComponent, insideJsx: boolean) => string;
|
|
7
7
|
export declare const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>;
|
|
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.componentToMitosis = exports.blockToMitosis = exports.DEFAULT_FORMAT = void 0;
|
|
7
|
+
const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
|
|
7
8
|
const plugins_1 = require("../../modules/plugins");
|
|
8
9
|
const json5_1 = __importDefault(require("json5"));
|
|
9
10
|
const standalone_1 = require("prettier/standalone");
|
|
@@ -25,8 +26,8 @@ exports.DEFAULT_FORMAT = 'legacy';
|
|
|
25
26
|
const isValidAttributeName = (str) => {
|
|
26
27
|
return Boolean(str && /^[$a-z0-9\-_:]+$/i.test(str));
|
|
27
28
|
};
|
|
28
|
-
const blockToMitosis = (json, toMitosisOptions = {}, component) => {
|
|
29
|
-
var _a, _b, _c, _d, _e, _f;
|
|
29
|
+
const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
|
|
30
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
30
31
|
const options = {
|
|
31
32
|
format: exports.DEFAULT_FORMAT,
|
|
32
33
|
...toMitosisOptions,
|
|
@@ -38,22 +39,48 @@ const blockToMitosis = (json, toMitosisOptions = {}, component) => {
|
|
|
38
39
|
stylesType: 'emotion',
|
|
39
40
|
type: 'dom',
|
|
40
41
|
prettier: options.prettier,
|
|
41
|
-
}, component,
|
|
42
|
+
}, component, insideJsx);
|
|
43
|
+
}
|
|
44
|
+
if (options.nativeConditionals && (0, mitosis_node_1.checkIsShowNode)(json)) {
|
|
45
|
+
const when = (_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code;
|
|
46
|
+
const elseCase = json.meta.else;
|
|
47
|
+
const needsWrapper = json.children.length !== 1;
|
|
48
|
+
const renderChildren = `${needsWrapper ? '<>' : ''}
|
|
49
|
+
${json.children
|
|
50
|
+
.map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))
|
|
51
|
+
.join('\n')}
|
|
52
|
+
${needsWrapper ? '</>' : ''}`;
|
|
53
|
+
const renderElse = elseCase && (0, is_mitosis_node_1.isMitosisNode)(elseCase)
|
|
54
|
+
? (0, exports.blockToMitosis)(elseCase, options, component, false)
|
|
55
|
+
: 'null';
|
|
56
|
+
return `${insideJsx ? '{' : ''}(${when}) ? ${renderChildren} : ${renderElse}${insideJsx ? '}' : ''}`;
|
|
42
57
|
}
|
|
43
58
|
if ((0, mitosis_node_1.checkIsForNode)(json)) {
|
|
44
59
|
const needsWrapper = json.children.length !== 1;
|
|
45
|
-
|
|
60
|
+
if (options.nativeLoops) {
|
|
61
|
+
const a = `${insideJsx ? '{' : ''}(${(_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code}).map(
|
|
62
|
+
(${json.scope.forName}, ${json.scope.indexName || 'index'}) => (
|
|
63
|
+
${needsWrapper ? '<>' : ''}
|
|
64
|
+
${json.children
|
|
65
|
+
.map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))
|
|
66
|
+
.join('\n')}
|
|
67
|
+
${needsWrapper ? '</>' : ''}
|
|
68
|
+
))${insideJsx ? '}' : ''}`;
|
|
69
|
+
console.log(a);
|
|
70
|
+
return a;
|
|
71
|
+
}
|
|
72
|
+
return `<For each={${(_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code}}>
|
|
46
73
|
{(${json.scope.forName}, ${json.scope.indexName || 'index'}) =>
|
|
47
74
|
${needsWrapper ? '<>' : ''}
|
|
48
|
-
${json.children.map((child) => (0, exports.blockToMitosis)(child, options, component))}}
|
|
75
|
+
${json.children.map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))}}
|
|
49
76
|
${needsWrapper ? '</>' : ''}
|
|
50
77
|
</For>`;
|
|
51
78
|
}
|
|
52
79
|
if (json.properties._text) {
|
|
53
80
|
return json.properties._text;
|
|
54
81
|
}
|
|
55
|
-
if ((
|
|
56
|
-
return `{${(
|
|
82
|
+
if ((_d = json.bindings._text) === null || _d === void 0 ? void 0 : _d.code) {
|
|
83
|
+
return `{${(_e = json.bindings._text) === null || _e === void 0 ? void 0 : _e.code}}`;
|
|
57
84
|
}
|
|
58
85
|
let str = '';
|
|
59
86
|
str += `<${json.name} `;
|
|
@@ -67,9 +94,9 @@ const blockToMitosis = (json, toMitosisOptions = {}, component) => {
|
|
|
67
94
|
}
|
|
68
95
|
}
|
|
69
96
|
for (const key in json.bindings) {
|
|
70
|
-
const value = (
|
|
71
|
-
if (((
|
|
72
|
-
str += ` {...(${(
|
|
97
|
+
const value = (_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code;
|
|
98
|
+
if (((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.type) === 'spread') {
|
|
99
|
+
str += ` {...(${(_h = json.bindings[key]) === null || _h === void 0 ? void 0 : _h.code})} `;
|
|
73
100
|
}
|
|
74
101
|
else if (key.startsWith('on')) {
|
|
75
102
|
str += ` ${key}={event => ${value.replace(/\s*;$/, '')}} `;
|
|
@@ -93,7 +120,7 @@ const blockToMitosis = (json, toMitosisOptions = {}, component) => {
|
|
|
93
120
|
}
|
|
94
121
|
str += '>';
|
|
95
122
|
if (json.children) {
|
|
96
|
-
str += json.children.map((item) => (0, exports.blockToMitosis)(item, options, component)).join('\n');
|
|
123
|
+
str += json.children.map((item) => (0, exports.blockToMitosis)(item, options, component, true)).join('\n');
|
|
97
124
|
}
|
|
98
125
|
str += `</${json.name}>`;
|
|
99
126
|
return str;
|
|
@@ -137,6 +164,13 @@ const componentToMitosis = (toMitosisOptions = {}) => ({ component }) => {
|
|
|
137
164
|
});
|
|
138
165
|
const addWrapper = json.children.length !== 1 || (0, is_root_text_node_1.isRootTextNode)(json);
|
|
139
166
|
const components = Array.from((0, get_components_1.getComponents)(json));
|
|
167
|
+
const mitosisCoreComponents = [];
|
|
168
|
+
if (!options.nativeConditionals) {
|
|
169
|
+
mitosisCoreComponents.push('Show');
|
|
170
|
+
}
|
|
171
|
+
if (!options.nativeLoops) {
|
|
172
|
+
mitosisCoreComponents.push('For');
|
|
173
|
+
}
|
|
140
174
|
const mitosisComponents = components.filter((item) => mitosisCoreComponents.includes(item));
|
|
141
175
|
const otherComponents = components.filter((item) => !mitosisCoreComponents.includes(item));
|
|
142
176
|
if (options.plugins) {
|
|
@@ -174,7 +208,9 @@ const componentToMitosis = (toMitosisOptions = {}) => ({ component }) => {
|
|
|
174
208
|
${json.style ? `useStyle(\`${json.style}\`)` : ''}
|
|
175
209
|
|
|
176
210
|
return (${addWrapper ? '<>' : ''}
|
|
177
|
-
${json.children
|
|
211
|
+
${json.children
|
|
212
|
+
.map((item) => (0, exports.blockToMitosis)(item, options, component, addWrapper))
|
|
213
|
+
.join('\n')}
|
|
178
214
|
${addWrapper ? '</>' : ''})
|
|
179
215
|
}
|
|
180
216
|
|
|
@@ -60,6 +60,10 @@ export type ForNode = BaseNode & {
|
|
|
60
60
|
collectionName: string | undefined;
|
|
61
61
|
};
|
|
62
62
|
};
|
|
63
|
+
export type ShowNode = BaseNode & {
|
|
64
|
+
name: 'Show';
|
|
65
|
+
};
|
|
63
66
|
export type MitosisNode = BaseNode | ForNode;
|
|
64
67
|
export declare const checkIsForNode: (node: MitosisNode) => node is ForNode;
|
|
68
|
+
export declare const checkIsShowNode: (node: MitosisNode) => node is ShowNode;
|
|
65
69
|
export {};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.checkIsForNode = void 0;
|
|
3
|
+
exports.checkIsShowNode = exports.checkIsForNode = void 0;
|
|
4
4
|
const checkIsForNode = (node) => node.name === 'For';
|
|
5
5
|
exports.checkIsForNode = checkIsForNode;
|
|
6
|
+
const checkIsShowNode = (node) => node.name === 'Show';
|
|
7
|
+
exports.checkIsShowNode = checkIsShowNode;
|