@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
53 lines (52 loc) • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.processOnEventHooksPlugin = exports.getOnEventHooksForNode = exports.getOnEventHandlerName = void 0;
const bindings_1 = require("./bindings");
const capitalize_1 = require("./capitalize");
const traverse_nodes_1 = require("./traverse-nodes");
const checkIsEventHandlerNode = (node, hook) => {
var _a;
return hook.refName === ((_a = node.bindings.ref) === null || _a === void 0 ? void 0 : _a.code);
};
const getBindingName = (hook) => {
return `on${(0, capitalize_1.capitalize)(hook.eventName)}`;
};
const getOnEventHandlerName = (hook) => {
return `${hook.refName}_${getBindingName(hook)}`;
};
exports.getOnEventHandlerName = getOnEventHandlerName;
const getOnEventHooksForNode = ({ node, component, }) => {
return component.hooks.onEvent.filter((hook) => checkIsEventHandlerNode(node, hook));
};
exports.getOnEventHooksForNode = getOnEventHooksForNode;
/**
* Adds event handlers from `onEvent` hooks to the appropriate node's bindings.
* Only works with frameworks that support custom events in their templates.
*/
const processOnEventHooksPlugin = (args = {}) => () => ({
json: {
pre: (component) => {
const { setBindings = true, includeRootEvents = true } = args;
(0, traverse_nodes_1.traverseNodes)(component, (node) => {
(0, exports.getOnEventHooksForNode)({ node, component }).forEach((hook) => {
if (!includeRootEvents && hook.isRoot)
return;
const handlerName = getBindingName(hook);
const fnName = (0, exports.getOnEventHandlerName)(hook);
component.state[fnName] = {
code: `${fnName}(${hook.eventArgName}) { ${hook.code} }`,
type: 'method',
};
if (setBindings) {
node.bindings[handlerName] = (0, bindings_1.createSingleBinding)({
code: `state.${fnName}(${hook.eventArgName})`,
arguments: [hook.eventArgName],
bindingType: 'function',
});
}
});
});
},
},
});
exports.processOnEventHooksPlugin = processOnEventHooksPlugin;