@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
80 lines (79 loc) • 3.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.createObjectSpreadComputed = exports.getComputedGetters = void 0;
const babel_transform_1 = require("../../../../helpers/babel-transform");
const symbol_processor_1 = require("../../../../symbols/symbol-processor");
const types_1 = require("@babel/types");
const lodash_1 = require("lodash");
const getComputedGetters = ({ json }) => {
const getterKeys = Object.keys((0, lodash_1.pickBy)(json.state, (i) => (i === null || i === void 0 ? void 0 : i.type) === 'getter'));
if (!getterKeys.length) {
return '';
}
return getterKeys
.map((key) => {
var _a, _b;
const code = (_b = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.toString();
if (!code) {
return '';
}
// Transform `get foo() { return this.bar }` to `foo = computed(() => { return bar.value })`
const getterAsFunction = code
.replace('get', '')
.replace(key, '')
.trim()
.replace(/^\(\)/, '() =>');
return `${key} = computed(${getterAsFunction})`;
})
.filter(Boolean)
.join('\n');
};
exports.getComputedGetters = getComputedGetters;
const createObjectSpreadComputed = (json, binding, key, isForContext = false, forName = '', indexName = '') => {
const computedName = `objSpread_${key}_${(0, symbol_processor_1.hashCodeAsString)(binding.code)}`;
const transformedCode = (0, babel_transform_1.babelTransformExpression)(binding.code, {
MemberExpression(path) {
var _a;
if ((0, types_1.isMemberExpression)(path.node) &&
(0, types_1.isIdentifier)(path.node.object) &&
(0, types_1.isIdentifier)(path.node.property) &&
(path.node.object.name === 'props' || path.node.object.name === 'state') &&
!((_a = path.node.extra) === null || _a === void 0 ? void 0 : _a.processed)) {
path.node.object.name = 'this';
path.node.extra = { ...path.node.extra, processed: true };
const code = path.toString();
path.replaceWithSourceString(`${code}()`);
}
},
});
const finalCode = transformedCode
// Replace props.x.y with this.x().y
.replace(/\bprops\.(\w+)(\.\w+|\?\.\w+|\[.*?\])/g, (match, prop, rest) => {
return `this.${prop}()${rest}`;
})
// Replace state.x.y with this.x().y
.replace(/\bstate\.(\w+)(\.\w+|\?\.\w+|\[.*?\])/g, (match, prop, rest) => {
return `this.${prop}()${rest}`;
});
if (isForContext && (forName || indexName)) {
// Create a method that accepts the for loop context variables
const params = [];
if (forName)
params.push(forName);
if (indexName)
params.push(indexName);
json.state[computedName] = {
code: `${computedName}(${params.join(', ')}) { return ${finalCode} }`,
type: 'method',
};
}
else {
// Creates a getter that gets converted to Angular's computed
json.state[computedName] = {
code: `get ${computedName}() { return ${finalCode} }`,
type: 'getter',
};
}
return computedName;
};
exports.createObjectSpreadComputed = createObjectSpreadComputed;