@builder.io/mitosis 0.5.11 → 0.5.12

package/dist/src/generators/qwik/helpers/state.js

@@ -39,18 +39,21 @@ function emitStateMethods(file, componentState, lexicalArgs) {
             case 'method':
             case 'function':
                 let code = stateValue.code;
-                let prefixIdx = 0;
-                if (stateValue.type === 'function') {
-                    prefixIdx += 'function '.length;
+                const isAsync = code.startsWith('async');
+                if (!isAsync) {
+                    let prefixIdx = 0;
+                    if (stateValue.type === 'function') {
+                        prefixIdx += 'function '.length;
+                    }
+                    code = code.substring(prefixIdx);
+                    code = (0, convert_method_to_function_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', `(${lexicalArgs.join(',')},`);
                 }
-                code = code.substring(prefixIdx);
-                code = (0, convert_method_to_function_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', `(${lexicalArgs.join(',')},`);
                 const functionName = code.split(/\(/)[0];
                 if (!file.options.isTypeScript) {
                     // Erase type information
                     code = (0, babel_transform_1.convertTypeScriptToJS)(code);
                 }
-                file.exportConst(functionName, 'function ' + code, true);
+                file.exportConst(isAsync ? key : functionName, isAsync ? code : 'function ' + code, true);
                 continue;
             case 'property':
                 stateValues[key] = stateValue.code;

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

@@ -377,7 +377,7 @@ const _componentToReact = (json, options, isSubComponent = false) => {
                                     if (type === 'getter')
                                         return `${key} = function ${code.replace('get ', '')}`;
                                     if (type === 'function')
-                                        return `${key} = function ${code}`;
+                                        return code.startsWith('async') ? code : `${key} = function ${code}`;
                                     return code;
                                 },
                             })

package/dist/src/parsers/jsx/state.js

@@ -128,6 +128,24 @@ const processStateObjectSlice = (item) => {
             };
         }
         else if ((0, types_1.isArrowFunctionExpression)(item.value)) {
+            /**
+             * Arrow functions are normally converted to object methods to work around
+             * limitations with arrow functions in state in frameworks such as Svelte.
+             * However, this conversion does not work for async arrow functions due to
+             * how we handle parsing in `handleErrorOrExpression` for parsing
+             * expressions. That code does not detect async functions in order to apply
+             * its parsing workarounds. Even if it did, it does not consider async code
+             * when prefixing with "function". This would result in "function async foo()"
+             * which is not a valid function expression definition.
+             */
+            // TODO ENG-7256 Find a way to do this without diverging code path
+            if (item.value.async) {
+                const func = (0, types_1.functionExpression)(item.key, item.value.params, item.value.body, false, true);
+                return {
+                    code: (0, helpers_1.parseCode)(func).trim(),
+                    type: 'function',
+                };
+            }
             const n = (0, types_1.objectMethod)('method', item.key, item.value.params, item.value.body);
             const code = (0, helpers_1.parseCode)(n).trim();
             return {
@@ -153,6 +171,14 @@ const processStateObjectSlice = (item) => {
         }
     }
     else if ((0, types_1.isObjectMethod)(item)) {
+        // TODO ENG-7256 Find a way to do this without diverging code path
+        if (item.async) {
+            const func = (0, types_1.functionExpression)(item.key, item.params, item.body, false, true);
+            return {
+                code: (0, helpers_1.parseCode)(func).trim(),
+                type: 'function',
+            };
+        }
         const n = (0, helpers_1.parseCode)({ ...item, returnType: null }).trim();
         const isGetter = item.kind === 'get';
         return {

package/package.json

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