@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
68 lines (67 loc) • 2.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getOnUnMountComponentBody = exports.getOnUpdateComponentBody = exports.getOnMountComponentBody = exports.getOnEventHookComponentBody = exports.getOnInitHookComponentBody = void 0;
const state_1 = require("../../../generators/react/helpers/state");
const on_event_1 = require("../../../helpers/on-event");
const getOnInitHookComponentBody = ({ shouldInlineOnInitHook, options, json, }) => {
var _a;
return ((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)
? shouldInlineOnInitHook
? (0, state_1.processHookCode)({ str: json.hooks.onInit.code, options })
: `
const hasInitialized = useRef(false);
if (!hasInitialized.current) {
${(0, state_1.processHookCode)({
str: json.hooks.onInit.code,
options,
})}
hasInitialized.current = true;
}
`
: '';
};
exports.getOnInitHookComponentBody = getOnInitHookComponentBody;
const getOnEventHookComponentBody = (json) => json.hooks.onEvent
.map((hook) => {
const eventName = `"${hook.eventName}"`;
const handlerName = (0, on_event_1.getOnEventHandlerName)(hook);
return `
useEffect(() => {
${hook.refName}.current?.addEventListener(${eventName}, ${handlerName});
return () => ${hook.refName}.current?.removeEventListener(${eventName}, ${handlerName});
}, []);
`;
})
.join('\n');
exports.getOnEventHookComponentBody = getOnEventHookComponentBody;
const getOnMountComponentBody = ({ options, json, }) => json.hooks.onMount
.map((hook) => `useEffect(() => {
${(0, state_1.processHookCode)({
str: hook.code,
options,
})}
}, [])`)
.join('\n');
exports.getOnMountComponentBody = getOnMountComponentBody;
const getOnUpdateComponentBody = ({ options, json, }) => {
var _a, _b;
return (_b = (_a = json.hooks.onUpdate) === null || _a === void 0 ? void 0 : _a.map((hook) => `useEffect(() => {
${(0, state_1.processHookCode)({ str: hook.code, options })}
},
${hook.deps ? (0, state_1.processHookCode)({ str: hook.deps, options }) : ''})`).join(';')) !== null && _b !== void 0 ? _b : '';
};
exports.getOnUpdateComponentBody = getOnUpdateComponentBody;
const getOnUnMountComponentBody = ({ options, json, }) => {
var _a;
return ((_a = json.hooks.onUnMount) === null || _a === void 0 ? void 0 : _a.code)
? `useEffect(() => {
return () => {
${(0, state_1.processHookCode)({
str: json.hooks.onUnMount.code,
options,
})}
}
}, [])`
: '';
};
exports.getOnUnMountComponentBody = getOnUnMountComponentBody;