@builder.io/mitosis 0.0.122 → 0.0.124

package/dist/src/generators/vue/vue.js

@@ -14,6 +14,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -31,6 +40,7 @@ var get_props_1 = require("../../helpers/get-props");
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var map_refs_1 = require("../../helpers/map-refs");
 var merge_options_1 = require("../../helpers/merge-options");
+var on_event_1 = require("../../helpers/on-event");
 var process_code_1 = require("../../helpers/plugins/process-code");
 var process_http_requests_1 = require("../../helpers/process-http-requests");
 var render_imports_1 = require("../../helpers/render-imports");
@@ -96,14 +106,14 @@ var onUpdatePlugin = function (options) { return ({
     },
 }); };
 var BASE_OPTIONS = {
-    plugins: [],
     vueVersion: 2,
     api: 'options',
     defineComponent: true,
 };
 var componentToVue = function (userOptions) {
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h;
+        var _b;
+        var _c, _d, _e, _f, _g, _h;
         var _component = _a.component, path = _a.path;
         // Make a copy we can safely mutate, similar to babel's toolchain can be used
         var component = (0, fast_clone_1.fastClone)(_component);
@@ -113,64 +123,60 @@ var componentToVue = function (userOptions) {
             defaults: BASE_OPTIONS,
             userOptions: userOptions,
         });
-        options.plugins.unshift((0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
-            if (options.api === 'composition') {
-                switch (codeType) {
-                    case 'hooks':
-                        return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
-                    case 'state':
-                        return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
-                    case 'bindings':
-                        return (0, function_1.flow)(
-                        // Strip types from any JS code that ends up in the template, because Vue does not support TS code in templates.
-                        babel_transform_1.convertTypeScriptToJS, function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); });
-                    case 'context-set':
-                        return function (code) {
-                            return (0, helpers_1.processBinding)({ code: code, options: options, json: component, preserveGetter: true });
-                        };
-                    case 'hooks-deps':
-                        return (0, replace_identifiers_1.replaceStateIdentifier)(null);
-                    case 'properties':
-                    case 'dynamic-jsx-elements':
-                    case 'types':
-                        return function (c) { return c; };
-                }
-            }
-            else {
-                switch (codeType) {
-                    case 'hooks':
-                        return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
-                    case 'bindings':
-                        return (0, function_1.flow)(
-                        // Strip types from any JS code that ends up in the template, because Vue does not support TS code in templates.
-                        babel_transform_1.convertTypeScriptToJS, function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); });
-                    case 'properties':
-                    case 'dynamic-jsx-elements':
-                    case 'hooks-deps':
-                    case 'types':
-                        return function (c) { return c; };
-                    case 'state':
-                        return function (c) { return (0, helpers_1.processBinding)({ code: c, options: options, json: component }); };
-                    case 'context-set':
-                        return function (code) {
-                            return (0, helpers_1.processBinding)({
-                                code: code,
-                                options: options,
-                                json: component,
-                                thisPrefix: '_this',
-                                preserveGetter: true,
-                            });
-                        };
-                }
-            }
-        }));
-        if (options.api === 'options') {
-            options.plugins.unshift(onUpdatePlugin);
-        }
-        else if (options.api === 'composition') {
-            options.plugins.unshift(functions_1.FUNCTION_HACK_PLUGIN);
+        if (options.api === 'composition') {
             options.asyncComponentImports = false;
         }
+        (_b = options.plugins).unshift.apply(_b, __spreadArray(__spreadArray(__spreadArray([(0, on_event_1.processOnEventHooksPlugin)()], (options.api === 'options' ? [onUpdatePlugin] : []), false), (options.api === 'composition' ? [functions_1.FUNCTION_HACK_PLUGIN] : []), false), [(0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
+                if (options.api === 'composition') {
+                    switch (codeType) {
+                        case 'hooks':
+                            return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
+                        case 'state':
+                            return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
+                        case 'bindings':
+                            return (0, function_1.flow)(
+                            // Strip types from any JS code that ends up in the template, because Vue does not support TS code in templates.
+                            babel_transform_1.convertTypeScriptToJS, function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); });
+                        case 'context-set':
+                            return function (code) {
+                                return (0, helpers_1.processBinding)({ code: code, options: options, json: component, preserveGetter: true });
+                            };
+                        case 'hooks-deps':
+                            return (0, replace_identifiers_1.replaceStateIdentifier)(null);
+                        case 'properties':
+                        case 'dynamic-jsx-elements':
+                        case 'types':
+                            return function (c) { return c; };
+                    }
+                }
+                else {
+                    switch (codeType) {
+                        case 'hooks':
+                            return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
+                        case 'bindings':
+                            return (0, function_1.flow)(
+                            // Strip types from any JS code that ends up in the template, because Vue does not support TS code in templates.
+                            babel_transform_1.convertTypeScriptToJS, function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); });
+                        case 'properties':
+                        case 'dynamic-jsx-elements':
+                        case 'hooks-deps':
+                        case 'types':
+                            return function (c) { return c; };
+                        case 'state':
+                            return function (c) { return (0, helpers_1.processBinding)({ code: c, options: options, json: component }); };
+                        case 'context-set':
+                            return function (code) {
+                                return (0, helpers_1.processBinding)({
+                                    code: code,
+                                    options: options,
+                                    json: component,
+                                    thisPrefix: '_this',
+                                    preserveGetter: true,
+                                });
+                            };
+                    }
+                }
+            })], false));
         (0, process_http_requests_1.processHttpRequests)(component);
         processDynamicComponents(component, options);
         processForKeys(component, options);
@@ -184,12 +190,12 @@ var componentToVue = function (userOptions) {
         var slotsProps = props.filter(function (prop) { return (0, slots_1.isSlotProperty)(prop); });
         component = (0, plugins_1.runPostJsonPlugins)({ json: component, plugins: options.plugins });
         var css = (0, collect_css_1.collectCss)(component, {
-            prefix: (_c = (_b = options.cssNamespace) === null || _b === void 0 ? void 0 : _b.call(options)) !== null && _c !== void 0 ? _c : undefined,
+            prefix: (_d = (_c = options.cssNamespace) === null || _c === void 0 ? void 0 : _c.call(options)) !== null && _d !== void 0 ? _d : undefined,
         });
         (0, strip_meta_properties_1.stripMetaProperties)(component);
         var template = (0, function_1.pipe)(component.children.map(function (item) { return (0, blocks_1.blockToVue)(item, options, { isRootNode: true }); }).join('\n'), helpers_1.renameMitosisComponentsToKebabCase);
-        var onUpdateWithDeps = ((_d = component.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })) || [];
-        var onUpdateWithoutDeps = ((_e = component.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter(function (hook) { var _a; return !((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length); })) || [];
+        var onUpdateWithDeps = ((_e = component.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })) || [];
+        var onUpdateWithoutDeps = ((_f = component.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.filter(function (hook) { var _a; return !((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length); })) || [];
         var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
         // import from vue
         var vueImports = [];
@@ -201,7 +207,7 @@ var componentToVue = function (userOptions) {
         }
         if (options.api === 'composition') {
             onUpdateWithDeps.length && vueImports.push('watch');
-            ((_f = component.hooks.onMount) === null || _f === void 0 ? void 0 : _f.code) && vueImports.push('onMounted');
+            component.hooks.onMount.length && vueImports.push('onMounted');
             ((_g = component.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code) && vueImports.push('onUnmounted');
             onUpdateWithoutDeps.length && vueImports.push('onUpdated');
             (0, lodash_1.size)(getterKeys) && vueImports.push('computed');

package/dist/src/helpers/create-mitosis-component.d.ts

@@ -1,2 +1,7 @@
 import { MitosisComponent } from '../types/mitosis-component';
-export declare const createMitosisComponent: (options?: Partial<MitosisComponent>) => MitosisComponent;
+import { Overwrite, Prettify } from './typescript';
+declare type PartialMitosisComponent = Prettify<Overwrite<Partial<MitosisComponent>, {
+    hooks: Partial<MitosisComponent['hooks']>;
+}>>;
+export declare const createMitosisComponent: (options?: PartialMitosisComponent) => MitosisComponent;
+export {};

package/dist/src/helpers/create-mitosis-component.js

@@ -10,7 +10,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMitosisComponent = void 0;
-var createMitosisComponent = function (options) { return (__assign({ '@type': '@builder.io/mitosis/component', imports: [], exports: {}, inputs: [], meta: {}, refs: {}, state: {}, children: [], hooks: {}, context: { get: {}, set: {} }, name: (options === null || options === void 0 ? void 0 : options.name) || 'MyComponent', subComponents: [] }, options)); };
+var createMitosisComponent = function (options) {
+    var _a = options || {}, name = _a.name, hooks = _a.hooks, remainingOpts = __rest(_a, ["name", "hooks"]);
+    var _b = hooks || {}, _c = _b.onEvent, onEvent = _c === void 0 ? [] : _c, _d = _b.onMount, onMount = _d === void 0 ? [] : _d, remainingHooks = __rest(_b, ["onEvent", "onMount"]);
+    return __assign({ '@type': '@builder.io/mitosis/component', imports: [], exports: {}, inputs: [], meta: {}, refs: {}, state: {}, children: [], context: { get: {}, set: {} }, subComponents: [], name: name || 'MyComponent', hooks: __assign({ onMount: onMount, onEvent: onEvent }, remainingHooks) }, remainingOpts);
+};
 exports.createMitosisComponent = createMitosisComponent;

package/dist/src/helpers/event-handlers.d.ts

@@ -0,0 +1 @@
+export declare const checkIsBindingEventHandler: (code: string) => boolean;

package/dist/src/helpers/event-handlers.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsBindingEventHandler = void 0;
+var checkIsBindingEventHandler = function (code) { return code.startsWith('on'); };
+exports.checkIsBindingEventHandler = checkIsBindingEventHandler;

package/dist/src/helpers/on-event.d.ts

@@ -0,0 +1,13 @@
+import { MitosisComponent, MitosisNode, OnEventHook, Plugin } from '..';
+export declare const getOnEventHandlerName: (hook: OnEventHook) => string;
+export declare const getOnEventHooksForNode: ({ node, component, }: {
+    node: MitosisNode;
+    component: MitosisComponent;
+}) => OnEventHook[];
+/**
+ * Adds event handlers from `onEvent` hooks to the appropriate node's bindings.
+ * Only works with frameworks that support custom events in their templates.
+ */
+export declare const processOnEventHooksPlugin: (args?: {
+    setBindings?: boolean;
+}) => Plugin;

package/dist/src/helpers/on-event.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processOnEventHooksPlugin = exports.getOnEventHooksForNode = exports.getOnEventHandlerName = void 0;
+var capitalize_1 = require("./capitalize");
+var traverse_nodes_1 = require("./traverse-nodes");
+var checkIsEventHandlerNode = function (node, hook) {
+    var _a;
+    return hook.refName === ((_a = node.bindings.ref) === null || _a === void 0 ? void 0 : _a.code);
+};
+var getBindingName = function (hook) {
+    return "on".concat((0, capitalize_1.capitalize)(hook.eventName));
+};
+var getOnEventHandlerName = function (hook) {
+    return "".concat(hook.refName, "_").concat(getBindingName(hook));
+};
+exports.getOnEventHandlerName = getOnEventHandlerName;
+var getOnEventHooksForNode = function (_a) {
+    var node = _a.node, component = _a.component;
+    return component.hooks.onEvent.filter(function (hook) { return 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.
+ */
+var processOnEventHooksPlugin = function (args) {
+    if (args === void 0) { args = {}; }
+    return function () { return ({
+        json: {
+            pre: function (component) {
+                var _a = args.setBindings, setBindings = _a === void 0 ? true : _a;
+                (0, traverse_nodes_1.traverseNodes)(component, function (node) {
+                    (0, exports.getOnEventHooksForNode)({ node: node, component: component }).forEach(function (hook) {
+                        var handlerName = getBindingName(hook);
+                        var fnName = (0, exports.getOnEventHandlerName)(hook);
+                        component.state[fnName] = {
+                            code: "".concat(fnName, "(").concat(hook.eventArgName, ") { ").concat(hook.code, " }"),
+                            type: 'method',
+                        };
+                        if (setBindings) {
+                            node.bindings[handlerName] = {
+                                code: "state.".concat(fnName, "(").concat(hook.eventArgName, ")"),
+                                arguments: [hook.eventArgName],
+                                type: 'single',
+                            };
+                        }
+                    });
+                });
+            },
+        },
+    }); };
+};
+exports.processOnEventHooksPlugin = processOnEventHooksPlugin;

package/dist/src/helpers/output.js

@@ -3,11 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkShouldOutputTypeScript = void 0;
 var nullable_1 = require("./nullable");
 var checkShouldOutputTypeScript = function (_a) {
-    var _b, _c;
+    var _b;
     var target = _a.target, options = _a.options;
     var targetTsConfig = (_b = options.options[target]) === null || _b === void 0 ? void 0 : _b.typescript;
-    return (0, nullable_1.checkIsDefined)(targetTsConfig)
-        ? targetTsConfig
-        : ((_c = options.commonOptions) === null || _c === void 0 ? void 0 : _c.typescript) || false;
+    return (0, nullable_1.checkIsDefined)(targetTsConfig) ? targetTsConfig : false;
 };
 exports.checkShouldOutputTypeScript = checkShouldOutputTypeScript;

package/dist/src/helpers/process-http-requests.js

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processHttpRequests = void 0;
 function processHttpRequests(json) {
-    var _a, _b, _c;
+    var _a, _b;
     var httpRequests = (_b = (_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.httpRequests;
-    var onMount = ((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) ? json.hooks.onMount : { code: '' };
     if (httpRequests) {
         for (var key in httpRequests) {
             if (!json.state[key]) {
@@ -13,9 +12,10 @@ function processHttpRequests(json) {
             var value = httpRequests[key];
             // TODO: unravel our proxy. aka parse out methods, header, etc
             // and remove our proxy from being used anymore
-            onMount.code += "\n        fetch(\"".concat(value, "\").then(res => res.json()).then(result => {\n          state.").concat(key, " = result;\n        })\n      ");
+            json.hooks.onMount.push({
+                code: "\n        fetch(\"".concat(value, "\").then(res => res.json()).then(result => {\n          state.").concat(key, " = result;\n        })\n        "),
+            });
         }
     }
-    json.hooks.onMount = onMount;
 }
 exports.processHttpRequests = processHttpRequests;

package/dist/src/helpers/typescript.d.ts

@@ -1,4 +1,7 @@
-export declare type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
+export declare type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;
+export declare type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 export declare type OmitObj<T, U> = T extends U ? Omit<T, keyof U> : never;
 export declare type Dictionary<T> = {
     [key: string]: T;

package/dist/src/index.d.ts

@@ -77,7 +77,9 @@ export declare function createContext<T = Dictionary<any>>(value: T, args?: {
 export declare function setContext<T = Dictionary<any>>(key: Context<T>, value: Partial<T>, options?: {
     type?: ReactivityType;
 }): void;
-export declare function onMount(fn: () => any): void;
+export declare function onMount(fn: () => any, args?: {
+    onSSR?: boolean;
+}): void;
 export declare function onUpdate(fn: () => any, deps?: any[]): void;
 export declare function onInit(fn: () => any): void;
 export declare function onUnMount(fn: () => any): void;
@@ -86,4 +88,8 @@ export declare function onError(fn: () => any): void;
 export declare function useMetadata(obj: ComponentMetadata): void;
 export declare function useDefaultProps<T = Dictionary<any>>(value: T): T;
 export declare function useStyle(value: string): void;
+/**
+ * Adds an event listener to a given element ref.
+ */
+export declare function onEvent(eventName: string, fn: (event: any) => any, elementRef: Element, isRoot?: boolean): void;
 export declare function useTarget<Return>(dict: TargetBlock<Return>): Return;

package/dist/src/parsers/builder/builder.js

@@ -718,7 +718,7 @@ var isBuilderElement = function (el) {
 };
 exports.isBuilderElement = isBuilderElement;
 var builderContentPartToMitosisComponent = function (builderContent, options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (options === void 0) { options = {}; }
     builderContent = (0, fast_clone_1.fastClone)(builderContent);
     (0, traverse_1.default)(builderContent).forEach(function (elem) {
@@ -747,7 +747,7 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
             }
         }
     });
-    var _k = extractStateHook(((_a = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _b === void 0 ? void 0 : _b.jsCode) || ''), state = _k.state, code = _k.code;
+    var _j = extractStateHook(((_a = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _b === void 0 ? void 0 : _b.jsCode) || ''), state = _j.state, code = _j.code;
     var customCode = convertExportDefaultToReturn(code);
     var parsed = getHooks(builderContent);
     var parsedState = (parsed === null || parsed === void 0 ? void 0 : parsed.state) || {};
@@ -763,10 +763,14 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
             defaultValue: input.defaultValue,
         }); }),
         state: mitosisState,
-        hooks: __assign({}, ((((_h = parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) === null || _h === void 0 ? void 0 : _h.code) || (customCode && { code: customCode })) && {
-            onMount: (parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) || { code: customCode },
-        })),
-        children: (((_j = builderContent.data) === null || _j === void 0 ? void 0 : _j.blocks) || [])
+        hooks: {
+            onMount: __spreadArray([], ((parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount.length)
+                ? parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount
+                : customCode
+                    ? [{ code: customCode }]
+                    : []), true),
+        },
+        children: (((_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.blocks) || [])
             .filter(function (item) {
             var _a, _b;
             if ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.includes('/api/v1/pixel')) {

package/dist/src/parsers/jsx/function-parser.js

@@ -65,7 +65,10 @@ var types = babel.types;
  */
 var componentFunctionToJson = function (node, context) {
     var _a;
-    var hooks = {};
+    var hooks = {
+        onMount: [],
+        onEvent: [],
+    };
     var state = {};
     var accessedContext = {};
     var setContext = {};
@@ -111,12 +114,58 @@ var componentFunctionToJson = function (node, context) {
                     }
                     case hooks_1.HOOKS.MOUNT: {
                         var firstArg = expression.arguments[0];
+                        var hookOptions = expression.arguments[1];
                         if (types.isFunctionExpression(firstArg) || types.isArrowFunctionExpression(firstArg)) {
                             var code = (0, helpers_2.processHookCode)(firstArg);
-                            hooks.onMount = { code: code };
+                            var onSSR = false;
+                            if (types.isObjectExpression(hookOptions)) {
+                                var onSSRProp = hookOptions.properties.find(function (property) {
+                                    return types.isProperty(property) &&
+                                        types.isIdentifier(property.key) &&
+                                        property.key.name === 'onSSR';
+                                });
+                                if (types.isObjectProperty(onSSRProp) && types.isBooleanLiteral(onSSRProp.value)) {
+                                    onSSR = onSSRProp.value.value;
+                                }
+                            }
+                            hooks.onMount.push({
+                                code: code,
+                                onSSR: onSSR,
+                            });
                         }
                         break;
                     }
+                    case hooks_1.HOOKS.EVENT: {
+                        var firstArg = expression.arguments[0];
+                        var secondArg = expression.arguments[1];
+                        var thirdArg = expression.arguments[2];
+                        var fourthArg = expression.arguments[3];
+                        if (!types.isStringLiteral(firstArg)) {
+                            console.warn('`onEvent` hook skipped. Event name must be a string literal: ', (0, generator_1.default)(expression).code);
+                            break;
+                        }
+                        if (!types.isFunctionExpression(secondArg) &&
+                            !types.isArrowFunctionExpression(secondArg)) {
+                            console.warn('`onEvent` hook skipped. Event handler must be a function: ', (0, generator_1.default)(expression).code);
+                            break;
+                        }
+                        if (!types.isIdentifier(thirdArg)) {
+                            console.warn('`onEvent` hook skipped. Element ref must be a value: ', (0, generator_1.default)(expression).code);
+                            break;
+                        }
+                        var isRoot = types.isBooleanLiteral(fourthArg) ? fourthArg.value : false;
+                        var eventArgName = types.isIdentifier(secondArg.params[0])
+                            ? secondArg.params[0].name
+                            : 'event';
+                        hooks.onEvent.push({
+                            eventName: firstArg.value,
+                            code: (0, helpers_2.processHookCode)(secondArg),
+                            refName: thirdArg.name,
+                            isRoot: isRoot,
+                            eventArgName: eventArgName,
+                        });
+                        break;
+                    }
                     case hooks_1.HOOKS.UPDATE: {
                         var firstArg = expression.arguments[0];
                         var secondArg = expression.arguments[1];
@@ -161,6 +210,7 @@ var componentFunctionToJson = function (node, context) {
                     }
                     case hooks_1.HOOKS.METADATA: {
                         context.builder.component.meta[hooks_1.HOOKS.METADATA] = __assign(__assign({}, context.builder.component.meta[hooks_1.HOOKS.METADATA]), (0, helpers_1.parseCodeJson)(expression.arguments[0]));
+                        break;
                     }
                 }
             }

package/dist/src/parsers/svelte/helpers/post-process.js

@@ -158,14 +158,14 @@ function postProcessHooks(json) {
         if (!hook) {
             return "continue";
         }
-        if (key === 'onUpdate' && Array.isArray(hook)) {
+        if (Array.isArray(hook)) {
             hook.forEach(function (item, index) {
-                var _a;
-                (_a = json.hooks[key]) === null || _a === void 0 ? void 0 : _a.splice(index, 1, addPropertiesAndStateToHook(json, item));
+                hook.splice(index, 1, addPropertiesAndStateToHook(json, item));
             });
-            return "continue";
         }
-        json.hooks[key] = addPropertiesAndStateToHook(json, hook);
+        else {
+            hook = addPropertiesAndStateToHook(json, hook);
+        }
     };
     for (var _i = 0, hookKeys_1 = hookKeys; _i < hookKeys_1.length; _i++) {
         var key = hookKeys_1[_i];

package/dist/src/parsers/svelte/html/actions.js

@@ -4,7 +4,7 @@ exports.parseAction = void 0;
 var astring_1 = require("astring");
 var string_1 = require("../helpers/string");
 function parseAction(json, nodeReference, attribute) {
-    var _a, _b;
+    var _a;
     var methodName = attribute.name;
     var parameters = '';
     if (['Identifier', 'ObjectExpression'].includes((_a = attribute.expression) === null || _a === void 0 ? void 0 : _a.type)) {
@@ -17,11 +17,9 @@ function parseAction(json, nodeReference, attribute) {
         propertyType: 'normal',
     };
     var initHandler = "if (".concat(nodeReference, ") { ").concat(actionHandler, " = ").concat(methodName, "(").concat(nodeReference, ", ").concat(parameters, "); };\n");
-    // Handle Mount
-    var onMountCode = ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) || '';
-    json.hooks.onMount = {
-        code: "".concat(onMountCode, "\n").concat(initHandler, ";\n"),
-    };
+    json.hooks.onMount.push({
+        code: initHandler,
+    });
     // Handle Destroy / Re-Mount
     var onReferenceUpdate = "\n    if (!".concat(nodeReference, " && ").concat(actionHandler, ") { \n      ").concat(actionHandler, "?.destroy(); \n      ").concat(actionHandler, " = null; \n    } else if (").concat(nodeReference, " && !").concat(actionHandler, ") { \n      ").concat(initHandler, " \n    };\n\n  ");
     json.hooks.onUpdate = json.hooks.onUpdate || [];

package/dist/src/parsers/svelte/index.js

@@ -58,7 +58,10 @@ function mapAstToMitosisJson(ast, name, string_, usesTypescript) {
         state: {},
         props: {},
         refs: {},
-        hooks: {},
+        hooks: {
+            onMount: [],
+            onEvent: [],
+        },
         imports: [],
         children: [],
         context: { get: {}, set: {} },

package/dist/src/parsers/svelte/instance/hooks.js

@@ -12,9 +12,9 @@ function parseHookBody(node, stripCurlyBraces) {
     return code;
 }
 function parseOnMount(json, node) {
-    json.hooks.onMount = {
+    json.hooks.onMount.push({
         code: parseHookBody(node),
-    };
+    });
 }
 exports.parseOnMount = parseOnMount;
 function parseOnDestroy(json, node) {

package/dist/src/parsers/svelte/instance/index.js

@@ -22,7 +22,6 @@ var handleMemberExpression = function (json, node, parent) {
     (0, expressions_1.parseMemberExpression)(json, node, parent);
 };
 var handleExpressionStatement = function (json, node, parent) {
-    var _a;
     if (node.expression.type === 'CallExpression') {
         if (node.expression.callee.type === 'MemberExpression') {
             handleMemberExpression(json, node, parent);
@@ -50,10 +49,9 @@ var handleExpressionStatement = function (json, node, parent) {
         // No default
     }
     else if ((parent === null || parent === void 0 ? void 0 : parent.type) === 'Program') {
-        var onMountCode = ((_a = json.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) || '';
-        json.hooks.onMount = {
-            code: "".concat(onMountCode, "\n").concat((0, astring_1.generate)(node), ";\n"),
-        };
+        json.hooks.onMount.push({
+            code: (0, astring_1.generate)(node),
+        });
     }
 };
 var handleFunctionDeclaration = function (json, node) {

package/dist/src/types/metadata.d.ts

@@ -7,6 +7,7 @@ declare type TargetOptions = {
 };
 export declare type ComponentMetadata = {
     [index: string]: any;
+    httpRequests?: Record<string, string>;
     options?: TargetOptions;
     qwik?: {
         component?: {

package/dist/src/types/mitosis-component.d.ts

@@ -44,7 +44,7 @@ export interface ContextSetInfo extends ContextOptions {
     value?: MitosisState;
     ref?: string;
 }
-export declare type extendedHook = {
+export declare type BaseHook = {
     code: string;
     deps?: string;
 };
@@ -79,6 +79,16 @@ export declare type TargetBlockDefinition = TargetBlockCode & {
         requiresDefault: boolean;
     };
 };
+export declare type OnEventHook = BaseHook & {
+    refName: string;
+    eventName: string;
+    isRoot: boolean;
+    deps?: never;
+    eventArgName: string;
+};
+export declare type OnMountHook = BaseHook & {
+    onSSR?: boolean;
+};
 export declare type MitosisComponent = {
     '@type': '@builder.io/mitosis/component';
     name: string;
@@ -109,13 +119,14 @@ export declare type MitosisComponent = {
         };
     };
     hooks: {
-        init?: extendedHook;
-        onInit?: extendedHook;
-        onMount?: extendedHook;
-        onUnMount?: extendedHook;
-        preComponent?: extendedHook;
-        postComponent?: extendedHook;
-        onUpdate?: extendedHook[];
+        init?: BaseHook;
+        onInit?: BaseHook;
+        onMount: OnMountHook[];
+        onUnMount?: BaseHook;
+        preComponent?: BaseHook;
+        postComponent?: BaseHook;
+        onUpdate?: BaseHook[];
+        onEvent: OnEventHook[];
     };
     targetBlocks?: Dictionary<TargetBlockDefinition>;
     children: MitosisNode[];