@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
139 lines (138 loc) • 6.99 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getClassPropertiesPlugin = void 0;
const hooks_1 = require("../../../../generators/angular/helpers/hooks");
const bindings_1 = require("../../../../helpers/bindings");
const event_handlers_1 = require("../../../../helpers/event-handlers");
const is_children_1 = __importDefault(require("../../../../helpers/is-children"));
const is_mitosis_node_1 = require("../../../../helpers/is-mitosis-node");
const traverse_nodes_1 = require("../../../../helpers/traverse-nodes");
const isASimpleProperty = (code) => {
const expressions = ['==', '===', '!=', '!==', '<', '>', '<=', '>='];
const invalidChars = ['{', '}', '(', ')', 'typeof'];
return !invalidChars.some((char) => code.includes(char)) && !expressions.includes(code);
};
const generateNewBindingName = (index, name) => `node_${index}_${name.replaceAll('.', '_').replaceAll('-', '_')}`;
const handleBindings = (json, item, index, forName, indexName) => {
var _a, _b, _c, _d, _e, _f;
for (const key in item.bindings) {
if (key.startsWith('"') ||
key.startsWith('$') ||
key === 'css' ||
key === 'ref' ||
isASimpleProperty(item.bindings[key].code)) {
continue;
}
const newBindingName = generateNewBindingName(index, item.name);
if (forName) {
if (item.name === 'For')
continue;
if (key === 'key')
continue;
if ((0, event_handlers_1.checkIsEvent)(key)) {
const { arguments: cusArgs = ['event'] } = item.bindings[key];
const eventBindingName = `${generateNewBindingName(index, item.name)}_event`;
if (((_a = item.bindings[key]) === null || _a === void 0 ? void 0 : _a.code.trim().startsWith('{')) &&
((_b = item.bindings[key]) === null || _b === void 0 ? void 0 : _b.code.trim().endsWith('}'))) {
const forAndIndex = `${forName ? `, ${forName}` : ''}${indexName ? `, ${indexName}` : ''}`;
const eventArgs = `${cusArgs.join(', ')}${forAndIndex}`;
json.state[eventBindingName] = {
code: `(${eventArgs}) => ${item.bindings[key].code}`,
type: 'function',
};
item.bindings[key].code = `state.${eventBindingName}(${eventArgs})`;
json.state[newBindingName] = {
code: `(${eventArgs}) => (${item.bindings[key].code})`,
type: 'function',
};
item.bindings[key].code = `state.${newBindingName}($${eventArgs})`;
}
}
else {
json.state[newBindingName] = {
code: `(${forName}${indexName ? `, ${indexName}` : ''}) => (${item.bindings[key].code})`,
type: 'function',
};
item.bindings[key].code = `state.${newBindingName}(${forName}${indexName ? `, ${indexName}` : ''})`;
}
}
else if ((_c = item.bindings[key]) === null || _c === void 0 ? void 0 : _c.code) {
if (((_d = item.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) !== 'spread' && !(0, event_handlers_1.checkIsEvent)(key)) {
json.state[newBindingName] = { code: 'null', type: 'property' };
(0, hooks_1.makeReactiveState)(json, newBindingName, `this.${newBindingName} = ${item.bindings[key].code}`);
item.bindings[key].code = `state.${newBindingName}`;
}
else if ((0, event_handlers_1.checkIsEvent)(key)) {
const { arguments: cusArgs = ['event'] } = item.bindings[key];
if (((_e = item.bindings[key]) === null || _e === void 0 ? void 0 : _e.code.trim().startsWith('{')) &&
((_f = item.bindings[key]) === null || _f === void 0 ? void 0 : _f.code.trim().endsWith('}'))) {
json.state[newBindingName] = {
code: `(${cusArgs.join(', ')}) => ${item.bindings[key].code}`,
type: 'function',
};
item.bindings[key].code = `state.${newBindingName}(${cusArgs.join(', ')})`;
}
}
else {
(0, hooks_1.makeReactiveState)(json, newBindingName, `state.${newBindingName} = {...(${item.bindings[key].code})}`);
item.bindings[newBindingName] = item.bindings[key];
item.bindings[key].code = `state.${newBindingName}`;
delete item.bindings[key];
}
}
index++;
}
return index;
};
const handleProperties = (json, item, index) => {
for (const key in item.properties) {
if (key.startsWith('$') || isASimpleProperty(item.properties[key])) {
continue;
}
const newBindingName = generateNewBindingName(index, item.name);
json.state[newBindingName] = { code: '`' + `${item.properties[key]}` + '`', type: 'property' };
item.bindings[key] = (0, bindings_1.createSingleBinding)({ code: `state.${newBindingName}` });
delete item.properties[key];
index++;
}
return index;
};
const handleAngularBindings = (json, item, index, { forName, indexName } = {}) => {
if ((0, is_children_1.default)({ node: item }))
return index;
index = handleBindings(json, item, index, forName, indexName);
index = handleProperties(json, item, index);
return index;
};
const getClassPropertiesPlugin = () => () => ({
json: {
pre: (json) => {
let lastId = 0;
(0, traverse_nodes_1.traverseNodes)(json, (item) => {
if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
if (item.name === 'For') {
const forName = item.scope.forName;
const indexName = item.scope.indexName;
(0, traverse_nodes_1.traverseNodes)(item, (child) => {
if ((0, is_mitosis_node_1.isMitosisNode)(child)) {
child._traversed = true;
lastId = handleAngularBindings(json, child, lastId, {
forName,
indexName,
});
}
});
}
else if (!item._traversed) {
lastId = handleAngularBindings(json, item, lastId);
}
}
});
return json;
},
},
});
exports.getClassPropertiesPlugin = getClassPropertiesPlugin;