@builder.io/mitosis 0.0.122 → 0.0.123

package/dist/src/constants/hooks.d.ts

@@ -8,6 +8,7 @@ export declare const HOOKS: {
     readonly TARGET: "useTarget";
     readonly METADATA: "useMetadata";
     readonly MOUNT: "onMount";
+    readonly EVENT: "onEvent";
     readonly UNMOUNT: "onUnMount";
     readonly UPDATE: "onUpdate";
     readonly INIT: "onInit";

package/dist/src/constants/hooks.js

@@ -11,6 +11,7 @@ exports.HOOKS = {
     TARGET: 'useTarget',
     METADATA: 'useMetadata',
     MOUNT: 'onMount',
+    EVENT: 'onEvent',
     UNMOUNT: 'onUnMount',
     UPDATE: 'onUpdate',
     INIT: 'onInit',

package/dist/src/generators/alpine/generate.js

@@ -69,7 +69,9 @@ var replaceInputRefs = (0, lodash_1.curry)(function (json, str) {
 });
 var replaceStateWithThis = function (str) { return str.replaceAll('state.', 'this.'); };
 var getStateObjectString = function (json) {
-    return (0, lodash_1.flow)(get_state_object_string_1.getStateObjectStringFromComponent, trim, replaceInputRefs(json), (0, render_mount_hook_1.renderMountHook)(json), (0, render_update_hooks_1.renderUpdateHooks)(json), replaceStateWithThis)(json);
+    return (0, lodash_1.flow)(get_state_object_string_1.getStateObjectStringFromComponent, trim, replaceInputRefs(json), (0, render_mount_hook_1.renderMountHook)(json), (0, render_update_hooks_1.renderUpdateHooks)(json), replaceStateWithThis, 
+    // cleanup bad regexes that result in malformed JSON strings that start with `{,`
+    function (x) { return (x.startsWith('{,') ? x.replace('{,', '{') : x); })(json);
 };
 var bindEventHandlerKey = (0, lodash_1.flowRight)(dash_case_1.dashCase, removeOnFromEventName);
 var bindEventHandlerValue = (0, lodash_1.flowRight)(function (x) {

package/dist/src/generators/alpine/render-mount-hook.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderMountHook = void 0;
 var lodash_1 = require("lodash");
+var on_mount_1 = require("../helpers/on-mount");
 var render_update_hooks_1 = require("./render-update-hooks");
 function shouldRenderMountHook(json) {
-    return json.hooks.onMount !== undefined || (0, render_update_hooks_1.hasWatchHooks)(json);
+    return json.hooks.onMount.length > 0 || (0, render_update_hooks_1.hasWatchHooks)(json);
 }
 exports.renderMountHook = (0, lodash_1.curry)(function (json, objectString) {
-    var _a, _b;
     return shouldRenderMountHook(json)
-        ? objectString.replace(/(?:,)?(\s*)(}\s*)$/, ", init() {\n      ".concat((0, render_update_hooks_1.renderWatchHooks)(json), "\n      ").concat((_b = (_a = json.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '', "\n    }$1$2"))
+        ? objectString.replace(/(?:,)?(\s*)(}\s*)$/, ", init() {\n      ".concat((0, render_update_hooks_1.renderWatchHooks)(json), "\n      ").concat((0, on_mount_1.stringifySingleScopeOnMount)(json), "\n    }$1$2"))
         : objectString;
 });

package/dist/src/generators/angular.js

@@ -56,6 +56,7 @@ var plugins_1 = require("../modules/plugins");
 var mitosis_node_1 = require("../types/mitosis-node");
 var merge_options_1 = require("../helpers/merge-options");
 var process_code_1 = require("../helpers/plugins/process-code");
+var on_mount_1 = require("./helpers/on-mount");
 var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment', 'Slot']);
 var mappers = {
     Fragment: function (json, options) {
@@ -221,7 +222,7 @@ var DEFAULT_OPTIONS = {
 var componentToAngular = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _b, _c, _d, _e, _f, _g, _h, _j;
         var _component = _a.component;
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(_component);
@@ -283,7 +284,7 @@ var componentToAngular = function (userOptions) {
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
-        var _o = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _o[0], hasPropRef = _o[1];
+        var _k = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _k[0], hasPropRef = _k[1];
         var childComponents = [];
         var propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
         json.imports.forEach(function (_a) {
@@ -295,7 +296,7 @@ var componentToAngular = function (userOptions) {
             });
         });
         var customImports = (0, get_custom_imports_1.getCustomImports)(json);
-        var _p = json.exports, localExports = _p === void 0 ? {} : _p;
+        var _l = json.exports, localExports = _l === void 0 ? {} : _l;
         var localExportVars = Object.keys(localExports)
             .filter(function (key) { return localExports[key].usedInLocal; })
             .map(function (key) { return "".concat(key, " = ").concat(key, ";"); });
@@ -328,7 +329,6 @@ var componentToAngular = function (userOptions) {
             }
             return "@Output() ".concat(variableName, " = new EventEmitter()");
         });
-        var hasOnMount = Boolean((_f = json.hooks) === null || _f === void 0 ? void 0 : _f.onMount);
         var domRefs = (0, get_refs_1.getRefs)(json);
         var jsRefs = Object.keys(json.refs).filter(function (ref) { return !domRefs.has(ref); });
         var componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter(function (item) {
@@ -394,7 +394,7 @@ var componentToAngular = function (userOptions) {
                 .join(',');
             return "const defaultProps = {".concat(defalutPropsString, "};\n");
         };
-        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', getPropsDefinition({ json: json }), (0, render_imports_1.renderPreComponent)({
+        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_f = options === null || options === void 0 ? void 0 : options.experimental) === null || _f === void 0 ? void 0 : _f.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', getPropsDefinition({ json: json }), (0, render_imports_1.renderPreComponent)({
             component: json,
             target: 'angular',
             excludeMitosisComponents: !options.standalone && !options.preserveImports,
@@ -434,13 +434,11 @@ var componentToAngular = function (userOptions) {
         })
             .join('\n'), !hasConstructor
             ? ''
-            : "constructor(\n".concat(injectables.join(',\n'), ") {\n            ").concat(!((_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
+            : "constructor(\n".concat(injectables.join(',\n'), ") {\n            ").concat(!((_g = json.hooks) === null || _g === void 0 ? void 0 : _g.onInit)
                 ? ''
-                : "\n              ".concat((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, "\n              "), "\n          }\n          "), !hasOnMount
+                : "\n              ".concat((_h = json.hooks.onInit) === null || _h === void 0 ? void 0 : _h.code, "\n              "), "\n          }\n          "), !json.hooks.onMount.length
             ? ''
-            : "ngOnInit() {\n\n              ".concat(!((_k = json.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
-                ? ''
-                : "\n                ".concat((_l = json.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, "\n                "), "\n            }"), !((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
+            : "ngOnInit() {\n              ".concat((0, on_mount_1.stringifySingleScopeOnMount)(json), "\n            }"), !((_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.length)
             ? ''
             : "ngAfterContentChecked() {\n              ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
                 code += hook.code;

package/dist/src/generators/builder.js

@@ -35,6 +35,7 @@ var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var state_1 = require("../helpers/state");
 var builder_1 = require("../parsers/builder");
 var symbol_processor_1 = require("../symbols/symbol-processor");
+var on_mount_1 = require("./helpers/on-mount");
 var omitMetaProperties = function (obj) {
     return (0, lodash_1.omitBy)(obj, function (_value, key) { return key.startsWith('$'); });
 };
@@ -235,24 +236,24 @@ exports.blockToBuilder = blockToBuilder;
 var componentToBuilder = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b, _c, _d, _e;
+        var _b, _c;
         var component = _a.component;
         var hasState = (0, state_1.checkHasState)(component);
         var result = (0, fast_clone_1.fastClone)({
             data: {
                 httpRequests: (_c = (_b = component === null || component === void 0 ? void 0 : component.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.httpRequests,
-                jsCode: tryFormat((0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n        \n        ", "\n      "], ["\n        ", "\n\n        ", "\n        \n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "Object.assign(state, ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_d = component.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : component.hooks.onMount.code)),
-                tsCode: tryFormat((0, dedent_1.dedent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_e = component.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code)
+                jsCode: tryFormat((0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n        \n        ", "\n      "], ["\n        ", "\n\n        ", "\n        \n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "Object.assign(state, ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), (0, on_mount_1.stringifySingleScopeOnMount)(component))),
+                tsCode: tryFormat((0, dedent_1.dedent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !component.hooks.onMount.length
                     ? ''
-                    : "onMount(() => {\n                ".concat(component.hooks.onMount.code, "\n              })"))),
+                    : "onMount(() => {\n                ".concat((0, on_mount_1.stringifySingleScopeOnMount)(component), "\n              })"))),
                 blocks: component.children
                     .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
                     .map(function (child) { return (0, exports.blockToBuilder)(child, options); }),
             },
         });
         var subComponentMap = {};
-        for (var _i = 0, _f = component.subComponents; _i < _f.length; _i++) {
-            var subComponent = _f[_i];
+        for (var _i = 0, _d = component.subComponents; _i < _d.length; _i++) {
+            var subComponent = _d[_i];
             var name_1 = subComponent.name;
             subComponentMap[name_1] = (0, exports.componentToBuilder)(options)({
                 component: subComponent,

package/dist/src/generators/helpers/on-mount.d.ts

@@ -0,0 +1,5 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+/**
+ * Helper for frameworks where all `onMount()`s must share a single scope.
+ */
+export declare const stringifySingleScopeOnMount: (json: MitosisComponent) => string;

package/dist/src/generators/helpers/on-mount.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringifySingleScopeOnMount = void 0;
+/**
+ * Helper for frameworks where all `onMount()`s must share a single scope.
+ */
+var stringifySingleScopeOnMount = function (json) {
+    var hooks = json.hooks.onMount;
+    if (hooks.length === 0)
+        return '';
+    if (hooks.length === 1) {
+        return hooks[0].code;
+    }
+    return hooks
+        .map(function (hook, i) {
+        var hookFnName = "onMountHook_".concat(i);
+        return "\n    function ".concat(hookFnName, "() {\n      ").concat(hook.code, "\n    }\n    ").concat(hookFnName, "();");
+    })
+        .join('');
+};
+exports.stringifySingleScopeOnMount = stringifySingleScopeOnMount;

package/dist/src/generators/html.js

@@ -56,6 +56,7 @@ var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-ref
 var collect_css_1 = require("../helpers/styles/collect-css");
 var plugins_1 = require("../modules/plugins");
 var mitosis_node_1 = require("../types/mitosis-node");
+var on_mount_1 = require("./helpers/on-mount");
 var isAttribute = function (key) {
     return /-/.test(key);
 };
@@ -417,7 +418,7 @@ var htmlDecode = function (html) { return html.replace(/"/gi, '"'); };
 var componentToHtml = function (_options) {
     if (_options === void 0) { _options = {}; }
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _b, _c, _d, _e, _f, _g, _h;
         var component = _a.component;
         var options = (0, merge_options_1.initializeOptions)({
             target: 'html',
@@ -445,13 +446,13 @@ var componentToHtml = function (_options) {
         }
         var hasChangeListeners = Boolean(Object.keys(options.onChangeJsById).length);
         var hasGeneratedJs = Boolean(options.js.trim().length);
-        if (hasChangeListeners || hasGeneratedJs || ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) || hasLoop) {
+        if (hasChangeListeners || hasGeneratedJs || json.hooks.onMount.length || hasLoop) {
             // TODO: collectJs helper for here and liquid
             str += "\n      <script>\n      (() => {\n        const state = ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
                 valueMapper: function (value) {
                     return addUpdateAfterSetInCode(updateReferencesInCode(value, options), options);
                 },
-            }), ";\n        ").concat(componentHasProps ? "let props = {};" : '', "\n        let context = null;\n        let nodesToDestroy = [];\n        let pendingUpdate = false;\n        ").concat(!((_d = (_c = json.hooks) === null || _c === void 0 ? void 0 : _c.onInit) === null || _d === void 0 ? void 0 : _d.code) ? '' : 'let onInitOnce = false;', "\n\n        function destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          nodesToDestroy.forEach(el => el.remove());\n          nodesToDestroy = [];\n        }\n        ").concat(!hasChangeListeners
+            }), ";\n        ").concat(componentHasProps ? "let props = {};" : '', "\n        let context = null;\n        let nodesToDestroy = [];\n        let pendingUpdate = false;\n        ").concat(!((_c = (_b = json.hooks) === null || _b === void 0 ? void 0 : _b.onInit) === null || _c === void 0 ? void 0 : _c.code) ? '' : 'let onInitOnce = false;', "\n\n        function destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          nodesToDestroy.forEach(el => el.remove());\n          nodesToDestroy = [];\n        }\n        ").concat(!hasChangeListeners
                 ? ''
                 : "\n        \n        // Function to update data bindings and loops\n        // call update() when you mutate state and need the updates to reflect\n        // in the dom\n        function update() {\n          if (pendingUpdate === true) {\n            return;\n          }\n          pendingUpdate = true;\n          ".concat(Object.keys(options.onChangeJsById)
                     .map(function (key) {
@@ -461,17 +462,17 @@ var componentToHtml = function (_options) {
                     }
                     return "\n              document.querySelectorAll(\"[data-el='".concat(key, "']\").forEach((el) => {\n                ").concat(value, "\n              });\n            ");
                 })
-                    .join('\n\n'), "\n\n          destroyAnyNodes();\n\n          ").concat(!((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
+                    .join('\n\n'), "\n\n          destroyAnyNodes();\n\n          ").concat(!((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length)
                     ? ''
                     : "\n                ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
                         code += addUpdateAfterSetInCode(updateReferencesInCode(hook.code, options), options);
                         return code + '\n';
-                    }, ''), " \n                "), "\n\n          pendingUpdate = false;\n        }\n\n        ").concat(options.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!((_g = (_f = json.hooks) === null || _f === void 0 ? void 0 : _f.onInit) === null || _g === void 0 ? void 0 : _g.code)
+                    }, ''), " \n                "), "\n\n          pendingUpdate = false;\n        }\n\n        ").concat(options.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!((_f = (_e = json.hooks) === null || _e === void 0 ? void 0 : _e.onInit) === null || _f === void 0 ? void 0 : _f.code)
                 ? ''
-                : "\n            if (!onInitOnce) {\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_j = (_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit) === null || _j === void 0 ? void 0 : _j.code, options), options), "\n              onInitOnce = true;\n            }\n            "), "\n\n        ").concat(!((_k = json.hooks.onMount) === null || _k === void 0 ? void 0 : _k.code)
+                : "\n            if (!onInitOnce) {\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_h = (_g = json.hooks) === null || _g === void 0 ? void 0 : _g.onInit) === null || _h === void 0 ? void 0 : _h.code, options), options), "\n              onInitOnce = true;\n            }\n            "), "\n\n        ").concat(!json.hooks.onMount.length
                 ? ''
                 : // TODO: make prettier by grabbing only the function body
-                    "\n              // onMount\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, options), options), " \n              "), "\n\n        ").concat(!hasShow
+                    "\n              // onMount\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode((0, on_mount_1.stringifySingleScopeOnMount)(json), options), options), " \n              "), "\n\n        ").concat(!hasShow
                 ? ''
                 : "\n          function showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              if (el?.scope) {\n                child.scope = el.scope;\n              }\n              if (el?.context) {\n                child.context = el.context;\n              }\n              nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }\n  \n        ", "\n        ").concat(!hasTextBinding
                 ? ''
@@ -510,7 +511,7 @@ exports.componentToHtml = componentToHtml;
 var componentToCustomElement = function (_options) {
     if (_options === void 0) { _options = {}; }
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
         var component = _a.component;
         var ComponentName = component.name;
         var kebabName = (0, lodash_1.kebabCase)(ComponentName);
@@ -523,7 +524,7 @@ var componentToCustomElement = function (_options) {
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
-        var _15 = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _15[0], hasPropRef = _15[1];
+        var _14 = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _14[0], hasPropRef = _14[1];
         var contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
         var childComponents = getChildComponents(json, options);
         var componentHasProps = (0, has_props_1.hasProps)(json);
@@ -547,7 +548,7 @@ var componentToCustomElement = function (_options) {
         });
         var setContext = [];
         for (var key in json.context.set) {
-            var _16 = json.context.set[key], name_1 = _16.name, value = _16.value, ref = _16.ref;
+            var _15 = json.context.set[key], name_1 = _15.name, value = _15.value, ref = _15.ref;
             setContext.push({ name: name_1, value: value, ref: ref });
         }
         addUpdateAfterSet(json, options);
@@ -678,12 +679,12 @@ var componentToCustomElement = function (_options) {
             ? ''
             : "\n          showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              if (el?.scope) {\n                child.scope = el.scope;\n              }\n              if (el?.context) {\n                child.context = el.context;\n              }\n              this.nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }", "\n        ").concat(!((_9 = options === null || options === void 0 ? void 0 : options.experimental) === null || _9 === void 0 ? void 0 : _9.attributeChangedCallback)
             ? ''
-            : "\n          attributeChangedCallback(name, oldValue, newValue) {\n            ".concat((_10 = options === null || options === void 0 ? void 0 : options.experimental) === null || _10 === void 0 ? void 0 : _10.attributeChangedCallback(['name', 'oldValue', 'newValue'], json, options), "\n          }\n          "), "\n\n        onMount() {\n          ").concat(!((_11 = json.hooks.onMount) === null || _11 === void 0 ? void 0 : _11.code)
+            : "\n          attributeChangedCallback(name, oldValue, newValue) {\n            ".concat((_10 = options === null || options === void 0 ? void 0 : options.experimental) === null || _10 === void 0 ? void 0 : _10.attributeChangedCallback(['name', 'oldValue', 'newValue'], json, options), "\n          }\n          "), "\n\n        onMount() {\n          ").concat(!json.hooks.onMount.length
             ? ''
             : // TODO: make prettier by grabbing only the function body
-                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, options), options, {
+                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode((0, on_mount_1.stringifySingleScopeOnMount)(json), options), options, {
                     contextVars: contextVars,
-                }), "\n                "), "\n        }\n\n        onUpdate() {\n          ").concat(!((_12 = json.hooks.onUpdate) === null || _12 === void 0 ? void 0 : _12.length)
+                }), "\n                "), "\n        }\n\n        onUpdate() {\n          ").concat(!((_11 = json.hooks.onUpdate) === null || _11 === void 0 ? void 0 : _11.length)
             ? ''
             : "\n              const self = this;\n            ".concat(json.hooks.onUpdate.reduce(function (code, hook, index) {
                 // create check update
@@ -736,8 +737,8 @@ var componentToCustomElement = function (_options) {
             ? ''
             : "\n            // scope helper\n            getScope(el, name) {\n              do {\n                let value = el?.scope?.[name]\n                if (value !== undefined) {\n                  return value\n                }\n              } while ((el = el.parentNode));\n            }\n            ", "\n\n        ").concat(!hasLoop
             ? ''
-            : "\n\n          // Helper to render loops\n          renderLoop(template, array, itemName, itemIndex, collectionName) {\n            const collection = [];\n            for (let [index, value] of array.entries()) {\n              const elementFragment = template.content.cloneNode(true);\n              const children = Array.from(elementFragment.childNodes)\n              const localScope = {};\n              let scope = localScope;\n              if (template?.scope) {\n                const getParent = {\n                  get(target, prop, receiver) {\n                    if (prop in target) {\n                      return target[prop];\n                    }\n                    if (prop in template.scope) {\n                      return template.scope[prop];\n                    }\n                    return target[prop];\n                  }\n                };\n                scope = new Proxy(localScope, getParent);\n              }\n              children.forEach((child) => {\n                if (itemName !== undefined) {\n                  scope[itemName] = value;\n                }\n                if (itemIndex !== undefined) {\n                  scope[itemIndex] = index;\n                }\n                if (collectionName !== undefined) {\n                  scope[collectionName] = array;\n                }\n                child.scope = scope;\n                if (template.context) {\n                  child.context = context;\n                }\n                this.nodesToDestroy.push(child);\n                collection.unshift(child)\n              });\n            }\n            collection.forEach(child => template.after(child));\n          }\n        ", "\n      }\n\n      ").concat(((_13 = options === null || options === void 0 ? void 0 : options.experimental) === null || _13 === void 0 ? void 0 : _13.customElementsDefine)
-            ? (_14 = options === null || options === void 0 ? void 0 : options.experimental) === null || _14 === void 0 ? void 0 : _14.customElementsDefine(kebabName, component, options)
+            : "\n\n          // Helper to render loops\n          renderLoop(template, array, itemName, itemIndex, collectionName) {\n            const collection = [];\n            for (let [index, value] of array.entries()) {\n              const elementFragment = template.content.cloneNode(true);\n              const children = Array.from(elementFragment.childNodes)\n              const localScope = {};\n              let scope = localScope;\n              if (template?.scope) {\n                const getParent = {\n                  get(target, prop, receiver) {\n                    if (prop in target) {\n                      return target[prop];\n                    }\n                    if (prop in template.scope) {\n                      return template.scope[prop];\n                    }\n                    return target[prop];\n                  }\n                };\n                scope = new Proxy(localScope, getParent);\n              }\n              children.forEach((child) => {\n                if (itemName !== undefined) {\n                  scope[itemName] = value;\n                }\n                if (itemIndex !== undefined) {\n                  scope[itemIndex] = index;\n                }\n                if (collectionName !== undefined) {\n                  scope[collectionName] = array;\n                }\n                child.scope = scope;\n                if (template.context) {\n                  child.context = context;\n                }\n                this.nodesToDestroy.push(child);\n                collection.unshift(child)\n              });\n            }\n            collection.forEach(child => template.after(child));\n          }\n        ", "\n      }\n\n      ").concat(((_12 = options === null || options === void 0 ? void 0 : options.experimental) === null || _12 === void 0 ? void 0 : _12.customElementsDefine)
+            ? (_13 = options === null || options === void 0 ? void 0 : options.experimental) === null || _13 === void 0 ? void 0 : _13.customElementsDefine(kebabName, component, options)
             : "customElements.define('".concat(kebabName, "', ").concat(ComponentName, ");"), "\n    ");
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });

package/dist/src/generators/lit/generate.js

@@ -26,6 +26,7 @@ var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-
 var collect_css_1 = require("../../helpers/styles/collect-css");
 var plugins_1 = require("../../modules/plugins");
 var mitosis_node_1 = require("../../types/mitosis-node");
+var on_mount_1 = require("../helpers/on-mount");
 var collect_class_string_1 = require("./collect-class-string");
 var getCustomTagName = function (name, options) {
     if (!name || !(0, is_upper_case_1.isUpperCase)(name[0])) {
@@ -114,7 +115,7 @@ function processBinding(code) {
 var componentToLit = function (_options) {
     if (_options === void 0) { _options = {}; }
     return function (_a) {
-        var _b, _c, _d, _e;
+        var _b, _c, _d;
         var component = _a.component;
         var options = (0, merge_options_1.initializeOptions)({ target: 'lit', component: component, defaults: _options });
         var json = (0, fast_clone_1.fastClone)(component);
@@ -189,11 +190,11 @@ var componentToLit = function (_options) {
             .map(function (refName) { return "\n          @query('[ref=\"".concat(refName, "\"]')\n          ").concat((0, lodash_1.camelCase)(refName), "!: HTMLElement;\n          "); })
             .join('\n'), Array.from(props)
             .map(function (item) { return "@property() ".concat(item, ": any"); })
-            .join('\n'), dataString, methodsString, !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code)
+            .join('\n'), dataString, methodsString, json.hooks.onMount.length === 0
             ? ''
-            : "connectedCallback() { ".concat(processBinding(json.hooks.onMount.code), " }"), !((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code)
+            : "connectedCallback() { ".concat(processBinding((0, on_mount_1.stringifySingleScopeOnMount)(json)), " }"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code)
             ? ''
-            : "disconnectedCallback() { ".concat(processBinding(json.hooks.onUnMount.code), " }"), !((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
+            : "disconnectedCallback() { ".concat(processBinding(json.hooks.onUnMount.code), " }"), !((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length)
             ? ''
             : "updated() { \n              ".concat(json.hooks.onUpdate.map(function (hook) { return processBinding(hook.code); }).join('\n\n'), " \n            }"), options.useShadowDom || !css.length ? '' : "<style>".concat(css, "</style>"), (0, indent_1.indent)(html, 8));
         if (options.plugins) {

package/dist/src/generators/marko/generate.js

@@ -40,6 +40,7 @@ var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-
 var collect_css_1 = require("../../helpers/styles/collect-css");
 var plugins_1 = require("../../modules/plugins");
 var mitosis_node_1 = require("../../types/mitosis-node");
+var on_mount_1 = require("../helpers/on-mount");
 // Having issues with this, so off for now
 var USE_MARKO_PRETTIER = false;
 /**
@@ -134,7 +135,7 @@ function processBinding(json, code, type) {
 var componentToMarko = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
-        var _b, _c, _d;
+        var _b, _c;
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
         var options = (0, merge_options_1.initializeOptions)({
@@ -185,11 +186,11 @@ var componentToMarko = function (userOptions) {
             ? ''
             : "onCreate(".concat(thisHasProps ? 'input' : '', ") {\n          this.state = ").concat(dataString, "\n        }"), Array.from(domRefs)
             .map(function (refName) { return "get ".concat((0, lodash_1.camelCase)(refName), "() { \n            return this.getEl('").concat((0, lodash_1.camelCase)(refName), "')\n          }"); })
-            .join('\n'), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)
+            .join('\n'), !json.hooks.onMount.length
             ? ''
-            : "onMount() { ".concat(processBinding(json, json.hooks.onMount.code, 'class'), " }"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code)
+            : "onMount() { ".concat(processBinding(json, (0, on_mount_1.stringifySingleScopeOnMount)(json), 'class'), " }"), !((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code)
             ? ''
-            : "onDestroy() { ".concat(processBinding(json, json.hooks.onUnMount.code, 'class'), " }"), !((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length)
+            : "onDestroy() { ".concat(processBinding(json, json.hooks.onUnMount.code, 'class'), " }"), !((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)
             ? ''
             : "onRender() { ".concat(json.hooks.onUpdate
                 .map(function (hook) { return processBinding(json, hook.code, 'class'); })

package/dist/src/generators/mitosis.js

@@ -131,7 +131,7 @@ var mitosisCoreComponents = ['Show', 'For'];
 var componentToMitosis = function (toMitosisOptions) {
     if (toMitosisOptions === void 0) { toMitosisOptions = {}; }
     return function (_a) {
-        var _b, _c;
+        var _b;
         var component = _a.component;
         var options = __assign({ format: exports.DEFAULT_FORMAT }, toMitosisOptions);
         if (options.format === 'react') {
@@ -162,7 +162,7 @@ var componentToMitosis = function (toMitosisOptions) {
             ? ''
             : "import { ".concat(!hasState ? '' : 'useStore, ', " ").concat(!refs.length ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '@builder.io/mitosis';"), !otherComponents.length ? '' : "import { ".concat(otherComponents.join(','), " } from '@components';"), json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'mitosis' }), stringifiedUseMetadata && stringifiedUseMetadata !== '{}'
             ? "".concat(hooks_1.HOOKS.METADATA, "(").concat(stringifiedUseMetadata, ")")
-            : '', component.name, !hasState ? '' : "const state = useStore(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json, refs), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options, component); }).join('\n'), addWrapper ? '</>' : '');
+            : '', component.name, !hasState ? '' : "const state = useStore(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json, refs), json.hooks.onMount.map(function (hook) { return "onMount(() => { ".concat(hook.code, " })"); }), !((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options, component); }).join('\n'), addWrapper ? '</>' : '');
         if (options.prettier !== false) {
             try {
                 str = (0, standalone_1.format)(str, {

package/dist/src/generators/qwik/component-generator.js

@@ -5,6 +5,7 @@ var standalone_1 = require("prettier/standalone");
 var babel_transform_1 = require("../../helpers/babel-transform");
 var fast_clone_1 = require("../../helpers/fast-clone");
 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 render_imports_1 = require("../../helpers/render-imports");
 var replace_identifiers_1 = require("../../helpers/replace-identifiers");
@@ -27,6 +28,7 @@ var PLUGINS = [
             },
         },
     }); },
+    (0, on_event_1.processOnEventHooksPlugin)({ setBindings: false }),
     (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType, json) {
         switch (codeType) {
             case 'types':
@@ -118,6 +120,7 @@ var componentToQwik = function (userOptions) {
                     emitUseRef(file, component);
                     if (!((_b = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _b === void 0 ? void 0 : _b.setUseStoreFirst))
                         emitStore_1();
+                    emitUseOn(file, component);
                     emitUseContextProvider(file, component);
                     emitUseClientEffect(file, component);
                     emitUseMount(file, component);
@@ -159,12 +162,11 @@ function emitExports(file, component) {
     });
 }
 function emitUseClientEffect(file, component) {
-    if (component.hooks.onMount) {
-        // This is called useMount, but in practice it is used as
-        // useClientEffect. Not sure if this is correct, but for now.
-        var code = component.hooks.onMount.code;
-        file.src.emit(file.import(file.qwikModule, 'useVisibleTask$').localName, '(()=>{', code, '});');
-    }
+    component.hooks.onMount.forEach(function (onMount) {
+        var code = onMount.code;
+        var hookToUse = onMount.onSSR ? 'useTask$' : 'useVisibleTask$';
+        file.src.emit(file.import(file.qwikModule, hookToUse).localName, '(()=>{', code, '});');
+    });
 }
 function emitUseMount(file, component) {
     if (component.hooks.onInit) {
@@ -237,6 +239,18 @@ function emitUseContext(file, component) {
         file.src.emit('const ', ctxKey, '=', file.import(file.qwikModule, 'useContext').localName, '(', context.name, ');');
     });
 }
+function emitUseOn(file, component) {
+    component.hooks.onEvent.forEach(function (hook) {
+        var eventName = "\"".concat(hook.eventName, "\"");
+        if (hook.isRoot) {
+            var wrappedHandlerFn = "".concat(file.import(file.qwikModule, '$').localName, "(").concat(hook.eventArgName, " => {\n        ").concat(hook.code, "\n      })");
+            file.src.emit(file.import(file.qwikModule, 'useOn').localName, "(".concat(eventName, ", ").concat(wrappedHandlerFn, ");"));
+        }
+        else {
+            file.src.emit(file.import(file.qwikModule, 'useVisibleTask$').localName, "(() => {\n          ".concat(hook.refName, ".value?.addEventListener(").concat(eventName, ", ").concat((0, on_event_1.getOnEventHandlerName)(hook), ");\n          return () => ").concat(hook.refName, ".value?.removeEventListener(").concat(eventName, ", ").concat((0, on_event_1.getOnEventHandlerName)(hook), ");\n        })  \n        "));
+        }
+    });
+}
 function emitUseRef(file, component) {
     Object.keys(component.refs).forEach(function (refKey) {
         file.src.emit("const ", refKey, '=', file.import(file.qwikModule, 'useSignal').localName, "".concat(file.options.isTypeScript ? '<Element>' : '', "();"));

package/dist/src/generators/qwik/component.js

@@ -22,6 +22,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addCommonStyles = exports.renderUseLexicalScope = exports.addComponent = exports.createFileSet = void 0;
 var compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
+var on_mount_1 = require("../helpers/on-mount");
 var directives_1 = require("./directives");
 var handlers_1 = require("./helpers/handlers");
 var stable_serialize_1 = require("./helpers/stable-serialize");
@@ -162,12 +163,11 @@ function addComponentOnMount(componentFile, onRenderEmit, componentName, compone
     componentFile.exportConst(componentName + 'OnMount', function () {
         var _this = this;
         this.emit((0, src_generator_1.arrowFnValue)(['p'], function () {
-            var _a;
             return _this.emit.apply(_this, __spreadArray(__spreadArray(['{',
                 'const s=',
                 componentFile.import(componentFile.qwikModule, 'useStore').localName,
                 '(()=>{',
-                'const state=Object.assign({},structuredClone(typeof __STATE__==="object"&&__STATE__[p.serverStateId]),p);'], inputInitializer, false), [inlineCode((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code),
+                'const state=Object.assign({},structuredClone(typeof __STATE__==="object"&&__STATE__[p.serverStateId]),p);'], inputInitializer, false), [inlineCode((0, on_mount_1.stringifySingleScopeOnMount)(component)),
                 'return state;',
                 '},{deep:true});',
                 'const l={};',