@builder.io/mitosis 0.5.12 → 0.5.14

package/dist/src/generators/angular/index.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAngular = exports.blockToAngular = void 0;
 const html_tags_1 = require("../../constants/html_tags");
+const bindings_1 = require("../../helpers/bindings");
 const dedent_1 = require("../../helpers/dedent");
 const fast_clone_1 = require("../../helpers/fast-clone");
 const get_child_components_1 = require("../../helpers/get-child-components");
@@ -364,10 +365,10 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                     const spreadRefIndex = root.meta._spreadRefIndex || 0;
                     refName = `elRef${spreadRefIndex}`;
                     root.meta._spreadRefIndex = spreadRefIndex + 1;
-                    json.bindings['spreadRef'] = { code: refName, type: 'single' };
+                    json.bindings['spreadRef'] = (0, bindings_1.createSingleBinding)({ code: refName });
                     root.refs[refName] = { argument: '' };
                 }
-                json.bindings['spreadRef'] = { code: refName, type: 'single' };
+                json.bindings['spreadRef'] = (0, bindings_1.createSingleBinding)({ code: refName });
                 root.refs[refName] = { argument: '' };
                 root.meta.onViewInit = (root.meta.onViewInit || { code: '' });
                 let spreadCode = '';
@@ -530,7 +531,7 @@ const handleProperties = (json, item, index) => {
         }
         const newBindingName = generateNewBindingName(index, item.name);
         json.state[newBindingName] = { code: '`' + `${item.properties[key]}` + '`', type: 'property' };
-        item.bindings[key] = { code: `state.${newBindingName}`, type: 'single' };
+        item.bindings[key] = (0, bindings_1.createSingleBinding)({ code: `state.${newBindingName}` });
         delete item.properties[key];
         index++;
     }

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

@@ -13,12 +13,14 @@ const has_props_1 = require("../../helpers/has-props");
 const is_component_1 = require("../../helpers/is-component");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const is_upper_case_1 = require("../../helpers/is-upper-case");
+const parsers_1 = require("../../helpers/parsers");
 const remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
 const replace_identifiers_1 = require("../../helpers/replace-identifiers");
 const state_1 = require("../../helpers/state");
 const builder_1 = require("../../parsers/builder");
 const symbol_processor_1 = require("../../symbols/symbol-processor");
 const core_1 = require("@babel/core");
+const generator_1 = __importDefault(require("@babel/generator"));
 const json5_1 = __importDefault(require("json5"));
 const lodash_1 = require("lodash");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
@@ -74,7 +76,6 @@ const componentMappers = {
     },
     PersonalizationContainer(node, options) {
         const block = (0, exports.blockToBuilder)(node, options, { skipMapper: true });
-        // console.log('block', node);
         const variants = [];
         let defaultVariant = [];
         const validFakeNodeNames = [
@@ -127,24 +128,78 @@ const componentMappers = {
     For(_node, options) {
         var _a;
         const node = _node;
+        const replaceIndexNode = (str) => (0, replace_identifiers_1.replaceNodes)({
+            code: str,
+            nodeMaps: [
+                {
+                    from: core_1.types.identifier(target),
+                    to: core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier('$index')),
+                },
+            ],
+        });
         // rename `index` var to `state.$index`
         const target = node.scope.indexName || 'index';
         const replaceIndex = (node) => {
             (0, legacy_1.default)(node).forEach(function (thing) {
-                if ((0, is_mitosis_node_1.isMitosisNode)(thing)) {
-                    for (const [key, value] of Object.entries(thing.bindings)) {
-                        if (value === null || value === void 0 ? void 0 : value.code.includes(target)) {
-                            thing.bindings[key].code = (0, replace_identifiers_1.replaceNodes)({
-                                code: value.code,
-                                nodeMaps: [
-                                    {
-                                        from: core_1.types.identifier(target),
-                                        to: core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier('$index')),
+                if (!(0, is_mitosis_node_1.isMitosisNode)(thing))
+                    return;
+                for (const [key, value] of Object.entries(thing.bindings)) {
+                    if (!value)
+                        continue;
+                    if (!value.code.includes(target))
+                        continue;
+                    if (value.type === 'single' && value.bindingType === 'function') {
+                        try {
+                            const code = value.code;
+                            const processedLines = [];
+                            let stopProcessing = false;
+                            const newLocal = (0, parsers_1.parseCode)(code);
+                            const lines = newLocal.length === 1 && newLocal[0].type === 'BlockStatement'
+                                ? newLocal[0].body
+                                : newLocal;
+                            const appendSemicolonIfNeeded = (code) => code.endsWith(';') ? code : code + ';';
+                            for (const line of lines) {
+                                const generatedLine = appendSemicolonIfNeeded((0, generator_1.default)(line).code);
+                                if (stopProcessing) {
+                                    processedLines.push(generatedLine);
+                                    continue;
+                                }
+                                /**
+                                 * Check if this statement re-declares our `target` variable, i.e.
+                                 * if there is a variable in this function shadowing the `target` variable.
+                                 */
+                                let hasTargetDeclaration = false;
+                                core_1.types.traverse(line, {
+                                    enter(path) {
+                                        if (hasTargetDeclaration) {
+                                            return;
+                                        }
+                                        if (core_1.types.isVariableDeclarator(path) &&
+                                            core_1.types.isIdentifier(path.id) &&
+                                            path.id.name === target) {
+                                            hasTargetDeclaration = true;
+                                        }
                                     },
-                                ],
-                            });
+                                });
+                                if (hasTargetDeclaration) {
+                                    stopProcessing = true;
+                                    processedLines.push(generatedLine);
+                                }
+                                else {
+                                    // Replace identifiers in this statement
+                                    processedLines.push(appendSemicolonIfNeeded(replaceIndexNode(generatedLine)));
+                                }
+                            }
+                            thing.bindings[key].code = '{' + processedLines.join('\n') + '}';
+                        }
+                        catch (error) {
+                            console.error('Error processing function binding. Falling back to simple replacement.', error);
+                            thing.bindings[key].code = replaceIndexNode(value.code);
                         }
                     }
+                    else {
+                        thing.bindings[key].code = replaceIndexNode(value.code);
+                    }
                 }
             });
             return node;
@@ -240,7 +295,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 +327,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 +355,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 +364,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 +393,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

@@ -175,15 +175,17 @@ const stringifyBinding = (node, options) => ([key, binding]) => {
         return ` {...${spreadValue}} `;
     }
     else if (key.startsWith('on') && isValidHtmlTag) {
+        const { async } = binding;
         // handle html native on[event] props
         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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToVue = void 0;
+const bindings_1 = require("../../helpers/bindings");
 const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
@@ -105,14 +106,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}"`;
         }
@@ -179,7 +186,7 @@ const blockToVue = (node, options, scope) => {
     }
     if (SPECIAL_HTML_TAGS.includes(node.name)) {
         // Vue doesn't allow style/script tags in templates, but does support them through dynamic components.
-        node.bindings.is = { code: `'${node.name}'`, type: 'single' };
+        node.bindings.is = (0, bindings_1.createSingleBinding)({ code: `'${node.name}'` });
         node.name = 'component';
     }
     if (node.properties._text) {

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

@@ -1,2 +1,6 @@
 import { Binding } from '../types/mitosis-node';
-export declare const createSingleBinding: (args: Omit<Binding, 'type'>) => Binding;
+type SingleBinding = Omit<Binding & {
+    type: 'single';
+}, 'type'>;
+export declare const createSingleBinding: (args: Omit<SingleBinding, 'bindingType'> & Partial<Pick<SingleBinding, 'bindingType'>>) => Binding;
+export {};

package/dist/src/helpers/bindings.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSingleBinding = void 0;
 const createSingleBinding = (args) => ({
     ...args,
+    bindingType: args.bindingType || 'expression',
     type: 'single',
 });
 exports.createSingleBinding = createSingleBinding;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processOnEventHooksPlugin = exports.getOnEventHooksForNode = exports.getOnEventHandlerName = void 0;
+const bindings_1 = require("./bindings");
 const capitalize_1 = require("./capitalize");
 const traverse_nodes_1 = require("./traverse-nodes");
 const checkIsEventHandlerNode = (node, hook) => {
@@ -37,11 +38,11 @@ const processOnEventHooksPlugin = (args = {}) => () => ({
                         type: 'method',
                     };
                     if (setBindings) {
-                        node.bindings[handlerName] = {
+                        node.bindings[handlerName] = (0, bindings_1.createSingleBinding)({
                             code: `state.${fnName}(${hook.eventArgName})`,
                             arguments: [hook.eventArgName],
-                            type: 'single',
-                        };
+                            bindingType: 'function',
+                        });
                     }
                 });
             });

package/dist/src/helpers/plugins/process-target-blocks.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processTargetBlocks = void 0;
 const use_target_1 = require("../../parsers/jsx/hooks/use-target");
+const bindings_1 = require("../bindings");
 const process_code_1 = require("./process-code");
 const getBlockForTarget = ({ target, targetBlock, }) => {
     switch (target) {
@@ -20,10 +21,7 @@ const processTargetBlocks = (target) => {
             const property = node === null || node === void 0 ? void 0 : node.properties[key];
             if (!matches || !property)
                 return code;
-            node.bindings[key] = {
-                code: '"' + property + '"',
-                type: 'single',
-            };
+            node.bindings[key] = (0, bindings_1.createSingleBinding)({ code: `"${property}"` });
             return () => {
                 delete node.properties[key];
             };

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;
@@ -355,16 +364,14 @@ const componentMappers = {
             });
             const queryOptions = variant.query;
             if (Array.isArray(queryOptions)) {
-                variantNode.bindings.query = {
-                    type: 'single',
+                variantNode.bindings.query = (0, bindings_1.createSingleBinding)({
                     code: JSON.stringify(queryOptions.map((q) => (0, lodash_1.omit)(q, '@type'))),
-                };
+                });
             }
             else if (queryOptions) {
-                variantNode.bindings.query = {
-                    type: 'single',
+                variantNode.bindings.query = (0, bindings_1.createSingleBinding)({
                     code: JSON.stringify((0, lodash_1.omit)(queryOptions, '@type')),
-                };
+                });
             }
             return variantNode;
         })) || [];

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

@@ -280,7 +280,9 @@ 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,
+                    bindingType: 'function',
                 });
             }
             else if (types.isJSXElement(expression)) {

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

@@ -1,14 +1,32 @@
 import { JSONObject } from './json';
 export type SpreadType = 'normal' | 'event-handlers';
+export type BindingType = 'function' | 'expression';
 type BindingProperties = {
     type: 'spread';
     spreadType: SpreadType;
+    /**
+     * TODO: remove these once we've cleaned up the code that uses them.
+     * they don't need to be here since they only exist for functions
+     */
+    async?: boolean;
+    arguments?: string[];
+} | {
+    type: 'single';
+    bindingType: Extract<BindingType, 'function'>;
+    async?: boolean;
+    arguments?: string[];
 } | {
     type: 'single';
+    bindingType: Extract<BindingType, 'expression'>;
+    /**
+     * TODO: remove these once we've cleaned up the code that uses them.
+     * they don't need to be here since they only exist for functions
+     */
+    async?: boolean;
+    arguments?: string[];
 };
 export type Binding = {
     code: string;
-    arguments?: string[];
 } & BindingProperties;
 export type BaseNode = {
     '@type': '@builder.io/mitosis/node';

package/package.json

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