@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
123 lines (122 loc) • 4.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.blockToStencil = void 0;
const html_tags_1 = require("../../constants/html_tags");
const helpers_1 = require("../../generators/stencil/helpers");
const collect_class_string_1 = require("../../generators/stencil/helpers/collect-class-string");
const event_handlers_1 = require("../../helpers/event-handlers");
const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
const for_1 = require("../../helpers/nodes/for");
const transform_to_jsx_1 = require("../../helpers/transform-to-jsx");
const mitosis_node_1 = require("../../types/mitosis-node");
const blockToStencil = ({ json, options = {}, insideJsx, rootRef, childComponents, }) => {
var _a, _b, _c, _d, _e, _f, _g;
let blockName = childComponents.find((impName) => impName === json.name)
? (0, helpers_1.getTagName)(json.name, options)
: json.name;
if (json.properties._text) {
return json.properties._text;
}
if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
if (((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === 'this.children') {
// Replace this.children with default <slot>
return '<slot></slot>';
}
let code = json.bindings._text.code;
if (insideJsx) {
return `{${code}}`;
}
return code;
}
if ((0, mitosis_node_1.checkIsForNode)(json) && ((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code)) {
const wrap = json.children.length !== 1;
const forArgs = (0, for_1.getForArguments)(json).join(', ');
const expression = `${(_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code}?.map((${forArgs}) => (
${wrap ? '<Fragment>' : ''}
${json.children
.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
.map((item) => (0, exports.blockToStencil)({ json: item, options, insideJsx: wrap, childComponents }))
.join('\n')}
${wrap ? '</Fragment>' : ''}
))`;
if (insideJsx) {
return `{${expression}}`;
}
else {
return expression;
}
}
else if (blockName === 'Show' && ((_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code)) {
const wrap = json.children.length !== 1;
const expression = `${(_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code} ? (
${wrap ? '<Fragment>' : ''}
${json.children
.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
.map((item) => (0, exports.blockToStencil)({ json: item, options, insideJsx: wrap, childComponents }))
.join('\n')}
${wrap ? '</Fragment>' : ''}
) : ${!json.meta.else
? 'null'
: `(${(0, exports.blockToStencil)({
json: json.meta.else,
options,
childComponents,
})})`}`;
if (insideJsx) {
return `{${expression}}`;
}
else {
return expression;
}
}
else if (blockName === 'Slot') {
blockName = 'slot';
}
let str = '';
str += `<${blockName} `;
const classString = (0, collect_class_string_1.collectClassString)(json);
if (classString) {
str += ` class=${classString} `;
}
for (const key in json.properties) {
const value = json.properties[key];
// Stencil uses ´htmlFor´ (JSX) instead of ´for´ (HTML)
str += ` ${(0, transform_to_jsx_1.transformAttributeToJSX)(key)}="${value}" `;
}
for (const key in json.bindings) {
const { code, arguments: cusArgs = [], type } = json.bindings[key];
if (type === 'spread') {
str += ` {...(${code})} `;
}
else if (key === 'ref') {
str += ` ref={(el:any) => {
${rootRef ? `this.${rootRef} = el` : ''}
${code.startsWith('this.') ? code : `this.${code}`} = el}
} `;
}
else if ((0, event_handlers_1.checkIsEvent)(key)) {
const asyncKeyword = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.async) ? 'async ' : '';
str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${code}} `;
}
else {
str += ` ${key}={${code}} `;
}
}
if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(blockName)) {
return str + ' />';
}
str += '>';
if (json.children) {
str += json.children
.map((item) => (0, exports.blockToStencil)({
json: item,
options,
insideJsx: true,
childComponents,
}))
.join('\n');
}
str += `</${blockName}>`;
return str;
};
exports.blockToStencil = blockToStencil;