@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
98 lines (97 loc) • 4.6 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.isReactForwardRef = exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.isFragmentWithKey = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
const strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
const lodash_1 = require("lodash");
const legacy_1 = __importDefault(require("neotraverse/legacy"));
const processBinding = (str, options) => {
// fix web-component tag transform issue with dashes by not transforming it
if (options.stateType !== 'useState') {
return str;
}
return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(str, {
includeState: true,
includeProps: false,
});
};
exports.processBinding = processBinding;
const openFrag = (options) => getFragment('open', options);
exports.openFrag = openFrag;
const closeFrag = (options) => getFragment('close', options);
exports.closeFrag = closeFrag;
const isFragmentWithKey = (node) => (node === null || node === void 0 ? void 0 : node.name) === 'Fragment' && !!(node === null || node === void 0 ? void 0 : node.bindings['key']);
exports.isFragmentWithKey = isFragmentWithKey;
function getFragment(type, options, node) {
var _a;
let tag = '';
if (node && node.bindings && (0, exports.isFragmentWithKey)(node)) {
tag = options.preact ? 'Fragment' : 'React.Fragment';
const keyCode = (_a = node.bindings['key']) === null || _a === void 0 ? void 0 : _a.code;
if (type === 'open' && keyCode) {
tag += ` key={${(0, exports.processBinding)(keyCode, options)}}`;
}
}
else if (options.preact) {
tag = 'Fragment';
}
return type === 'open' ? `<${tag}>` : `</${tag}>`;
}
exports.getFragment = getFragment;
const wrapInFragment = (json) => json.children.length !== 1;
exports.wrapInFragment = wrapInFragment;
function getRefName(path) {
return (0, lodash_1.upperFirst)(path) + 'Ref';
}
function processTagReferences(json, options) {
const namesFound = new Set();
(0, legacy_1.default)(json).forEach((el) => {
var _a, _b;
if (!(0, is_mitosis_node_1.isMitosisNode)(el)) {
return;
}
const processedRefName = el.name.includes('-') ? el.name : (0, exports.processBinding)(el.name, options);
if (el.name.includes('state.')) {
switch ((_a = json.state[processedRefName]) === null || _a === void 0 ? void 0 : _a.type) {
case 'getter':
const refName = getRefName(processedRefName);
if (!namesFound.has(el.name)) {
namesFound.add(el.name);
json.hooks.init = {
...json.hooks.init,
code: `
${((_b = json.hooks.init) === null || _b === void 0 ? void 0 : _b.code) || ''}
const ${refName} = ${el.name};
`,
};
}
el.name = refName;
break;
// NOTE: technically, it should be impossible for the tag to be a method or a function in Mitosis JSX syntax,
// as that will fail JSX parsing.
case 'method':
case 'function':
case 'property':
const capitalizedName = (0, lodash_1.upperFirst)(processedRefName);
if (capitalizedName !== processedRefName) {
el.name = capitalizedName;
json.state[capitalizedName] = { ...json.state[processedRefName] };
delete json.state[processedRefName];
}
else {
el.name = processedRefName;
}
break;
}
}
else {
el.name = processedRefName;
}
});
}
exports.processTagReferences = processTagReferences;
const isReactForwardRef = (json) => { var _a, _b, _c; return ((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.forwardRef) || ((_c = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.react) === null || _c === void 0 ? void 0 : _c.forwardRef); };
exports.isReactForwardRef = isReactForwardRef;