@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
78 lines (77 loc) • 3.23 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.componentToRsc = void 0;
const legacy_1 = __importDefault(require("neotraverse/legacy"));
const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
const merge_options_1 = require("../../helpers/merge-options");
const nullable_1 = require("../../helpers/nullable");
const rsc_1 = require("../helpers/rsc");
const react_1 = require("../react");
/**
* Transform react to be RSC compatible, such as
* - remove event listeners
* - remove lifecycle hooks
* - remove refs
* - transform context to prop drilling
*/
const RSC_TRANSFORM_PLUGIN = () => ({
json: {
pre: (json) => {
json.hooks.onMount = [];
delete json.hooks.onUnMount;
delete json.hooks.onUpdate;
json.refs = {};
json.context.get = {};
json.context.set = {};
(0, legacy_1.default)(json).forEach((node) => {
if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
const isComponent = node.name.match(/[A-Z]/);
// if (isComponent) {
// // Drill context down, aka
// // function (props) { return <Component _context{props._context} /> }
// if (!node.bindings[contextPropDrillingKey]) {
// node.bindings[contextPropDrillingKey] = createSingleBinding({
// code: contextPropDrillingKey,
// });
// }
// }
if (node.bindings.ref) {
delete node.bindings.ref;
}
// for (const key in node.bindings) {
// if (key.match(/^on[A-Z]/)) {
// delete node.bindings[key];
// }
// }
}
});
},
},
});
const RscOptions = {
plugins: [RSC_TRANSFORM_PLUGIN],
stateType: 'variables',
};
const componentToRsc = (_options = {}) => ({ component, path }) => {
var _a, _b, _c, _d, _e;
if (!(0, nullable_1.checkIsDefined)((_b = (_a = component.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.rsc) === null || _b === void 0 ? void 0 : _b.componentType) &&
!(0, rsc_1.checkIfIsClientComponent)(component)) {
component.meta.useMetadata = {
...component.meta.useMetadata,
rsc: {
...(_c = component.meta.useMetadata) === null || _c === void 0 ? void 0 : _c.rsc,
componentType: 'server',
},
};
}
const isRSC = ((_e = (_d = component.meta.useMetadata) === null || _d === void 0 ? void 0 : _d.rsc) === null || _e === void 0 ? void 0 : _e.componentType) === 'server';
const options = (0, merge_options_1.mergeOptions)({
rsc: true,
...(isRSC ? RscOptions : {}),
}, _options);
return (0, react_1.componentToReact)(options)({ component, path });
};
exports.componentToRsc = componentToRsc;