@builder.io/mitosis 0.5.12 → 0.5.13

package/dist/src/generators/builder/generator.js

@@ -240,7 +240,7 @@ function tryFormat(code) {
     return str;
 }
 const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const mapper = !_internalOptions.skipMapper && componentMappers[json.name];
     if (mapper) {
         return mapper(json, options);
@@ -272,8 +272,18 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
         const eventBindingKeyRegex = /^on([A-Z])/;
         const firstCharMatchForEventBindingKey = (_d = key.match(eventBindingKeyRegex)) === null || _d === void 0 ? void 0 : _d[1];
         if (firstCharMatchForEventBindingKey) {
+            let actionBody = ((_e = bindings[key]) === null || _e === void 0 ? void 0 : _e.async)
+                ? `(async () => ${(_f = bindings[key]) === null || _f === void 0 ? void 0 : _f.code})()`
+                : (0, remove_surrounding_block_1.removeSurroundingBlock)((_g = bindings[key]) === null || _g === void 0 ? void 0 : _g.code);
+            const eventIdentifier = (_j = (_h = bindings[key]) === null || _h === void 0 ? void 0 : _h.arguments) === null || _j === void 0 ? void 0 : _j[0];
+            if (typeof eventIdentifier === 'string' && eventIdentifier !== 'event') {
+                actionBody = (0, replace_identifiers_1.replaceNodes)({
+                    code: actionBody,
+                    nodeMaps: [{ from: core_1.types.identifier(eventIdentifier), to: core_1.types.identifier('event') }],
+                });
+            }
             actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] =
-                (0, remove_surrounding_block_1.removeSurroundingBlock)((_e = bindings[key]) === null || _e === void 0 ? void 0 : _e.code);
+                actionBody;
             delete bindings[key];
         }
     }
@@ -290,7 +300,7 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
                 componentOptions[key] = parsed;
             }
             else {
-                if (!((_f = json.slots) === null || _f === void 0 ? void 0 : _f[key])) {
+                if (!((_k = json.slots) === null || _k === void 0 ? void 0 : _k[key])) {
                     builderBindings[`component.options.${key}`] = bindings[key].code;
                 }
             }
@@ -299,12 +309,12 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
     for (const key in json.slots) {
         componentOptions[key] = json.slots[key].map((node) => (0, exports.blockToBuilder)(node, options));
     }
-    const hasCss = !!((_g = bindings.css) === null || _g === void 0 ? void 0 : _g.code);
+    const hasCss = !!((_l = bindings.css) === null || _l === void 0 ? void 0 : _l.code);
     let responsiveStyles = {
         large: {},
     };
     if (hasCss) {
-        const cssRules = json5_1.default.parse((_h = bindings.css) === null || _h === void 0 ? void 0 : _h.code);
+        const cssRules = json5_1.default.parse((_m = bindings.css) === null || _m === void 0 ? void 0 : _m.code);
         const cssRuleKeys = Object.keys(cssRules);
         for (const ruleKey of cssRuleKeys) {
             const mediaQueryMatch = ruleKey.match(media_sizes_1.mediaQueryRegex);
@@ -328,7 +338,7 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
     }
     if (thisIsComponent) {
         for (const key in json.bindings) {
-            if (!((_j = json.slots) === null || _j === void 0 ? void 0 : _j[key])) {
+            if (!((_o = json.slots) === null || _o === void 0 ? void 0 : _o[key])) {
                 builderBindings[`component.options.${key}`] = json.bindings[key].code;
             }
         }

package/dist/src/generators/html/generator.js

@@ -192,7 +192,7 @@ const addOnChangeJs = (id, options, code) => {
 };
 // TODO: spread support
 const blockToHtml = (json, options, blockOptions = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const ComponentName = blockOptions.ComponentName;
     const scopeVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.scopeVars) || [];
     const childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
@@ -303,11 +303,12 @@ const blockToHtml = (json, options, blockOptions = {}) => {
                 }
                 const fnName = (0, lodash_1.camelCase)(`on-${elId}-${event}`);
                 const codeContent = (0, remove_surrounding_block_1.removeSurroundingBlock)(updateReferencesInCode(useValue, options, blockOptions));
+                const asyncKeyword = ((_h = json.bindings[key]) === null || _h === void 0 ? void 0 : _h.async) ? 'async ' : '';
                 options.js += `
           // Event handler for '${event}' event on ${elId}
           ${options.format === 'class'
-                    ? `this.${fnName} = (${cusArg.join(',')}) => {`
-                    : `function ${fnName} (${cusArg.join(',')}) {`}
+                    ? `this.${fnName} = ${asyncKeyword}(${cusArg.join(',')}) => {`
+                    : `${asyncKeyword}function ${fnName} (${cusArg.join(',')}) {`}
               ${addScopeVars(scopeVars, codeContent, (scopeVar) => `const ${scopeVar} = ${options.format === 'class' ? 'this.' : ''}getScope(event.currentTarget, "${scopeVar}");`)}
             ${codeContent}
           }
@@ -469,7 +470,7 @@ const componentToHtml = (_options = {}) => ({ component }) => {
         ${!hasChangeListeners
             ? ''
             : `
-        
+
         // Function to update data bindings and loops
         // call update() when you mutate state and need the updates to reflect
         // in the dom
@@ -500,7 +501,7 @@ const componentToHtml = (_options = {}) => ({ component }) => {
                 ${json.hooks.onUpdate.reduce((code, hook) => {
                     code += addUpdateAfterSetInCode(updateReferencesInCode(hook.code, options), options);
                     return code + '\n';
-                }, '')} 
+                }, '')}
                 `}
 
           pendingUpdate = false;
@@ -526,7 +527,7 @@ const componentToHtml = (_options = {}) => ({ component }) => {
             : // TODO: make prettier by grabbing only the function body
                 `
               // onMount
-              ${updateReferencesInCode(addUpdateAfterSetInCode((0, on_mount_1.stringifySingleScopeOnMount)(json), options), options)} 
+              ${updateReferencesInCode(addUpdateAfterSetInCode((0, on_mount_1.stringifySingleScopeOnMount)(json), options), options)}
               `}
 
         ${!hasShow
@@ -537,8 +538,8 @@ const componentToHtml = (_options = {}) => ({ component }) => {
             // grabs the content of a node that is between <template> tags
             // iterates through child nodes to register all content including text elements
             // attaches the content after the template
-  
-  
+
+
             const elementFragment = el.content.cloneNode(true);
             const children = Array.from(elementFragment.childNodes)
             children.forEach(child => {
@@ -552,7 +553,7 @@ const componentToHtml = (_options = {}) => ({ component }) => {
             });
             el.after(elementFragment);
           }
-  
+
         `}
         ${!hasTextBinding
             ? ''
@@ -770,9 +771,9 @@ const componentToCustomElement = (_options = {}) => ({ component }) => {
     })}
       /**
        * Usage:
-       * 
+       *
        *  <${kebabName}></${kebabName}>
-       * 
+       *
        */
       class ${ComponentName} extends ${((_h = options === null || options === void 0 ? void 0 : options.experimental) === null || _h === void 0 ? void 0 : _h.classExtends)
         ? (_j = options === null || options === void 0 ? void 0 : options.experimental) === null || _j === void 0 ? void 0 : _j.classExtends(json, options)
@@ -940,8 +941,8 @@ const componentToCustomElement = (_options = {}) => ({ component }) => {
             // grabs the content of a node that is between <template> tags
             // iterates through child nodes to register all content including text elements
             // attaches the content after the template
-  
-  
+
+
             const elementFragment = el.content.cloneNode(true);
             const children = Array.from(elementFragment.childNodes)
             children.forEach(child => {
@@ -1008,7 +1009,7 @@ const componentToCustomElement = (_options = {}) => ({ component }) => {
                 `;
             }
             return code + '\n';
-        }, '')} 
+        }, '')}
             `}
         }
 
@@ -1099,7 +1100,7 @@ const componentToCustomElement = (_options = {}) => ({ component }) => {
             ? `
               ${(_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.generateQuerySelectorAll(key, code)}
               `
-            : `              
+            : `
               this._root.querySelectorAll("[data-el='${key}']").forEach((el) => {
                 ${code}
               })

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

@@ -36,7 +36,7 @@ const getCustomTagName = (name, options) => {
     return kebabCaseName;
 };
 const blockToLit = (json, options = {}) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (json.properties._text) {
         return json.properties._text;
     }
@@ -82,8 +82,9 @@ const blockToLit = (json, options = {}) => {
         }
         else if (key.startsWith('on')) {
             let useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
+            const asyncKeyword = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.async) ? 'async ' : '';
             useKey = '@' + useKey.substring(2).toLowerCase();
-            str += ` ${useKey}=\${${cusArgs.join(',')} => ${processBinding(code)}} `;
+            str += ` ${useKey}=\${${asyncKeyword}(${cusArgs.join(',')}) => ${processBinding(code)}} `;
         }
         else {
             const value = processBinding(code);
@@ -172,7 +173,7 @@ const componentToLit = (_options = {}) => ({ component }) => {
         }
         catch (err) {
             // If can't format HTML (this can happen with lit given it is tagged template strings),
-            // at least remove excess space
+            // at least remove excess fspace
             html = html.replace(/\n{3,}/g, '\n\n');
         }
     }

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

@@ -69,7 +69,7 @@ const blockToMarko = (json, options) => {
         str += ` ${key}="${value}" `;
     }
     for (const key in json.bindings) {
-        const { code, arguments: cusArgs = ['event'], type } = json.bindings[key];
+        const { code, arguments: cusArgs = ['event'], type, async } = json.bindings[key];
         if (type === 'spread') {
             str += ` ...(${code}) `;
         }
@@ -77,8 +77,9 @@ const blockToMarko = (json, options) => {
             str += ` key="${(0, lodash_1.camelCase)(code)}" `;
         }
         else if (key.startsWith('on')) {
+            const asyncKeyword = async ? 'async ' : '';
             const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
-            str += ` ${(0, dash_case_1.dashCase)(useKey)}=(${cusArgs.join(',')} => ${processBinding(options.component, code)}) `;
+            str += ` ${(0, dash_case_1.dashCase)(useKey)}=(${asyncKeyword}(${cusArgs.join(',')}) => ${processBinding(options.component, code)}) `;
         }
         else if (key !== 'innerHTML') {
             str += ` ${key}=(${processBinding(options.component, code)}) `;
@@ -187,11 +188,11 @@ const componentToMarko = (userOptions = {}) => ({ component }) => {
         }`}
 
         ${Array.from(domRefs)
-        .map((refName) => `get ${(0, lodash_1.camelCase)(refName)}() { 
+        .map((refName) => `get ${(0, lodash_1.camelCase)(refName)}() {
             return this.getEl('${(0, lodash_1.camelCase)(refName)}')
           }`)
         .join('\n')}
-      
+
         ${!json.hooks.onMount.length
         ? ''
         : `onMount() { ${processBinding(json, (0, on_mount_1.stringifySingleScopeOnMount)(json), 'class')} }`}
@@ -207,7 +208,7 @@ const componentToMarko = (userOptions = {}) => ({ component }) => {
   `;
     let htmlString = json.children.map((item) => blockToMarko(item, options)).join('\n');
     const cssString = css.length
-        ? `style { 
+        ? `style {
   ${(0, indent_1.indent)(css, 2).trim()}
 }`
         : '';

package/dist/src/generators/mitosis/generator.js

@@ -121,7 +121,9 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
             str += ` {...(${(_h = json.bindings[key]) === null || _h === void 0 ? void 0 : _h.code})} `;
         }
         else if (key.startsWith('on')) {
-            str += ` ${key}={event => ${value.replace(/\s*;$/, '')}} `;
+            const { arguments: cusArgs = ['event'], async } = json.bindings[key];
+            const asyncKeyword = async ? 'async ' : '';
+            str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${value.replace(/\s*;$/, '')}} `;
         }
         else {
             if (!isValidAttributeName(key)) {

package/dist/src/generators/react/blocks.js

@@ -139,7 +139,7 @@ const NATIVE_EVENT_MAPPER = {
     onClick: 'onPress',
 };
 const blockToReact = (json, options, component, insideJsx, parentSlots = []) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const needsToRenderSlots = [];
     if (NODE_MAPPERS[json.name]) {
         return NODE_MAPPERS[json.name](json, options, component, insideJsx, parentSlots);
@@ -244,9 +244,10 @@ const blockToReact = (json, options, component, insideJsx, parentSlots = []) =>
             str += ` {...(${value})} `;
         }
         else if (key.startsWith('on')) {
+            const asyncKeyword = ((_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.async) ? 'async ' : '';
             const { arguments: cusArgs = ['event'] } = json.bindings[key];
             const eventName = options.type === 'native' ? NATIVE_EVENT_MAPPER[key] || key : key;
-            str += ` ${eventName}={(${cusArgs.join(',')}) => ${(0, state_1.updateStateSettersInCode)(useBindingValue, options)} } `;
+            str += ` ${eventName}={${asyncKeyword}(${cusArgs.join(',')}) => ${(0, state_1.updateStateSettersInCode)(useBindingValue, options)} } `;
         }
         else if (key.startsWith('slot')) {
             // <Component slotProjected={<AnotherComponent />} />

package/dist/src/generators/solid/blocks.js

@@ -19,7 +19,7 @@ const transformAttributeName = (name) => {
     return name;
 };
 const blockToSolid = (json, component, options, insideJsx) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (insideJsx) {
         if (json.properties._text) {
             return json.properties._text;
@@ -77,7 +77,8 @@ const blockToSolid = (json, component, options, insideJsx) => {
         }
         else if (key.startsWith('on')) {
             const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
-            str += ` ${useKey}={(${cusArg.join(',')}) => ${code}} `;
+            const asyncKeyword = ((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.async) ? 'async ' : '';
+            str += ` ${useKey}={${asyncKeyword}(${cusArg.join(',')}) => ${code}} `;
         }
         else if (key === 'ref' && options.typescript) {
             str += ` ${key}={${code}!} `;

package/dist/src/generators/stencil/blocks.js

@@ -8,7 +8,7 @@ const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes
 const for_1 = require("../../helpers/nodes/for");
 const mitosis_node_1 = require("../../types/mitosis-node");
 const blockToStencil = (json, options = {}, insideJsx, childComponents) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     let blockName = childComponents.find((impName) => impName === json.name)
         ? (0, helpers_1.getTagName)(json.name, options)
         : json.name;
@@ -87,7 +87,8 @@ const blockToStencil = (json, options = {}, insideJsx, childComponents) => {
         }
         else if ((0, helpers_1.isEvent)(key)) {
             const useKey = key === 'onChange' && blockName === 'input' ? 'onInput' : key;
-            str += ` ${useKey}={(${cusArgs.join(',')}) => ${code}} `;
+            const asyncKeyword = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.async) ? 'async ' : '';
+            str += ` ${useKey}={${asyncKeyword}(${cusArgs.join(',')}) => ${code}} `;
         }
         else {
             str += ` ${key}={${code}} `;

package/dist/src/generators/svelte/blocks.js

@@ -168,7 +168,7 @@ const stringifyBinding = (node, options) => ([key, binding]) => {
     if (key === 'innerHTML' || !binding) {
         return '';
     }
-    const { code, arguments: cusArgs = ['event'], type } = binding;
+    const { code, arguments: cusArgs = ['event'], type, async } = binding;
     const isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(node.name) || node.name === 'svelte:element';
     if (type === 'spread') {
         const spreadValue = key === 'props' ? '$$props' : code;
@@ -179,11 +179,12 @@ const stringifyBinding = (node, options) => ([key, binding]) => {
         const event = key.replace('on', '').toLowerCase();
         // TODO: handle quotes in event handler values
         const valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(code);
-        if (valueWithoutBlock === key) {
+        if (valueWithoutBlock === key && !async) {
             return ` on:${event}={${valueWithoutBlock}} `;
         }
         else {
-            return ` on:${event}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}" `;
+            const asyncKeyword = async ? 'async ' : '';
+            return ` on:${event}="{${asyncKeyword}(${cusArgs.join(',')}) => {${valueWithoutBlock}}}" `;
         }
     }
     else if (key.startsWith('on')) {

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

@@ -105,14 +105,20 @@ const stringifyBinding = (node, options) => ([key, value]) => {
         const useValue = (value === null || value === void 0 ? void 0 : value.code) || '';
         if (key.startsWith('on') && isValidHtmlTag) {
             // handle html native on[event] props
-            const { arguments: cusArgs = ['event'] } = value;
+            const { arguments: cusArgs = ['event'], async } = value;
             let event = key.replace('on', '').toLowerCase();
             const isAssignmentExpression = useValue.includes('=');
-            const eventHandlerValue = (0, function_1.pipe)((0, replace_identifiers_1.replaceIdentifiers)({
-                code: useValue,
-                from: cusArgs[0],
-                to: '$event',
-            }), isAssignmentExpression ? function_1.identity : remove_surrounding_block_1.removeSurroundingBlock, remove_surrounding_block_1.removeSurroundingBlock, helpers_1.encodeQuotes);
+            let eventHandlerValue;
+            if (async) {
+                eventHandlerValue = (0, function_1.pipe)((0, replace_identifiers_1.replaceIdentifiers)({
+                    code: useValue,
+                    from: cusArgs[0],
+                    to: '$event',
+                }), isAssignmentExpression ? function_1.identity : remove_surrounding_block_1.removeSurroundingBlock, remove_surrounding_block_1.removeSurroundingBlock, helpers_1.encodeQuotes);
+            }
+            else {
+                eventHandlerValue = `async (${cusArgs.join(', ')}) => ${useValue}`;
+            }
             const eventHandlerKey = `${SPECIAL_PROPERTIES.V_ON_AT}${event}`;
             return `${eventHandlerKey}="${eventHandlerValue}"`;
         }

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

@@ -92,7 +92,7 @@ const getActionBindingsFromBlock = (block, options) => {
     const actionKeys = Object.keys(actions);
     if (actionKeys.length) {
         for (const key of actionKeys) {
-            const value = actions[key];
+            let value = actions[key];
             // Skip empty values
             if (!value.trim()) {
                 continue;
@@ -103,7 +103,16 @@ const getActionBindingsFromBlock = (block, options) => {
                 continue;
             }
             const useKey = `on${(0, lodash_1.upperFirst)(key)}`;
-            bindings[useKey] = (0, bindings_1.createSingleBinding)({ code: `${wrapBindingIfNeeded(value, options)}` });
+            const asyncPrefix = `(async () =>`;
+            const asyncSuffix = ')()';
+            const isAsync = value.startsWith(asyncPrefix) && value.endsWith(asyncSuffix);
+            if (isAsync) {
+                value = value.slice(asyncPrefix.length, -asyncSuffix.length);
+            }
+            bindings[useKey] = (0, bindings_1.createSingleBinding)({
+                code: `${wrapBindingIfNeeded(value, options)}`,
+                async: isAsync ? true : undefined,
+            });
         }
     }
     return bindings;

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

@@ -280,6 +280,7 @@ const jsxElementToJson = (node) => {
                     : [];
                 memo.bindings[key] = (0, bindings_1.createSingleBinding)({
                     code: (0, generator_1.default)(expression.body, { compact: true }).code,
+                    async: expression.async === true ? true : undefined,
                     arguments: args.length ? args : undefined,
                 });
             }

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

@@ -8,6 +8,7 @@ type BindingProperties = {
 };
 export type Binding = {
     code: string;
+    async?: boolean;
     arguments?: string[];
 } & BindingProperties;
 export type BaseNode = {

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.12",
+  "version": "0.5.13",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {