@builder.io/mitosis 0.5.10 → 0.5.12

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

@@ -281,10 +281,10 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                 code: `${trackByFnName}(${indexName !== null && indexName !== void 0 ? indexName : '_'}, ${forName}) { return ${code}; }`,
                 type: 'method',
             };
-            str += `<ng-container *ngFor="let ${forName} of ${(_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code}${indexName ? `; let ${indexName} = index` : ''}; trackBy: ${trackByFnName}">`;
+            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code}${indexName ? `; index as ${indexName}` : ''}; trackBy: ${trackByFnName}">`;
         }
         else {
-            str += `<ng-container *ngFor="let ${forName} of ${(_f = json.bindings.each) === null || _f === void 0 ? void 0 : _f.code}${indexName ? `; let ${indexName} = index` : ''}">`;
+            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_f = json.bindings.each) === null || _f === void 0 ? void 0 : _f.code}${indexName ? `; index as ${indexName}` : ''}">`;
         }
         str += json.children
             .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
@@ -825,7 +825,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
       ${Array.from(refsForObjSpread)
         .map((refName) => `@ViewChild('${refName}') ${refName}${options.typescript ? '!: ElementRef' : ''}`)
         .join('\n')}
-      
+
       ${Array.from(dynamicComponents)
         .map((component) => `@ViewChild('${component
         .split('.')[1]

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

@@ -126,17 +126,19 @@ const componentMappers = {
     },
     For(_node, options) {
         var _a;
+        const node = _node;
         // 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('index')) {
+                        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('index'),
+                                        from: core_1.types.identifier(target),
                                         to: core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier('$index')),
                                     },
                                 ],
@@ -147,7 +149,6 @@ const componentMappers = {
             });
             return node;
         };
-        const node = _node;
         return el({
             component: {
                 name: 'Core:Fragment',

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;
+    var _a, _b, _c, _d, _e, _f;
     if (json.properties._text) {
         return json.properties._text;
     }
@@ -44,7 +44,7 @@ const blockToLit = (json, options = {}) => {
         return `\${${processBinding((_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code)}}`;
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        return `\${${processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code)}?.map((${json.scope.forName}, index) => (
+        return `\${${processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code)}?.map((${(_d = json.scope.forName) !== null && _d !== void 0 ? _d : '_'}, ${(_e = json.scope.indexName) !== null && _e !== void 0 ? _e : 'index'}) => (
       html\`${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map((item) => blockToLit(item, options))
@@ -52,7 +52,7 @@ const blockToLit = (json, options = {}) => {
     ))}`;
     }
     else if (json.name === 'Show') {
-        return `\${${processBinding((_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code)} ?
+        return `\${${processBinding((_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code)} ?
       html\`${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map((item) => blockToLit(item, options))
@@ -219,15 +219,15 @@ const componentToLit = (_options = {}) => ({ component }) => {
           ${(0, lodash_1.camelCase)(refName)}!: HTMLElement;
           `)
         .join('\n')}
-    
-  
+
+
       ${Array.from(props)
         .map((item) => `@property() ${item}: any`)
         .join('\n')}
 
         ${dataString}
         ${methodsString}
-      
+
         ${json.hooks.onMount.length === 0
         ? ''
         : `connectedCallback() { ${processBinding((0, on_mount_1.stringifySingleScopeOnMount)(json))} }`}
@@ -236,10 +236,10 @@ const componentToLit = (_options = {}) => ({ component }) => {
         : `disconnectedCallback() { ${processBinding(json.hooks.onUnMount.code)} }`}
         ${!((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)
         ? ''
-        : `updated() { 
-              ${json.hooks.onUpdate.map((hook) => processBinding(hook.code)).join('\n\n')} 
+        : `updated() {
+              ${json.hooks.onUpdate.map((hook) => processBinding(hook.code)).join('\n\n')}
             }`}
-    
+
       render() {
         return html\`
           ${options.useShadowDom || !css.length ? '' : `<style>${css}</style>`}

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

@@ -69,7 +69,7 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
         const needsWrapper = json.children.length !== 1;
         if (options.nativeLoops) {
             const a = `${insideJsx ? '{' : ''}(${(_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code}).map(
-      (${json.scope.forName}, ${json.scope.indexName || 'index'}) => (
+      (${json.scope.forName || '_'}, ${json.scope.indexName || 'index'}) => (
       ${needsWrapper ? '<>' : ''}
         ${json.children
                 .map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))
@@ -79,7 +79,7 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
             return a;
         }
         return `<For each={${(_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code}}>
-    {(${json.scope.forName}, ${json.scope.indexName || 'index'}) =>
+    {(${json.scope.forName || '_'}, ${json.scope.indexName || 'index'}) =>
       ${needsWrapper ? '<>' : ''}
         ${json.children.map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))}}
       ${needsWrapper ? '</>' : ''}

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/generators/vue/blocks.js

@@ -40,10 +40,10 @@ const NODE_MAPPERS = {
         return childrenStr;
     },
     For(_json, options) {
-        var _a;
+        var _a, _b, _c, _d;
         const json = _json;
-        const keyValue = json.bindings.key || { code: 'index', type: 'single' };
-        const forValue = `(${json.scope.forName}, index) in ${(_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code}`;
+        const keyValue = json.bindings.key || { code: (_a = json.scope.indexName) !== null && _a !== void 0 ? _a : 'index', type: 'single' };
+        const forValue = `(${(_b = json.scope.forName) !== null && _b !== void 0 ? _b : '_'}, ${(_c = json.scope.indexName) !== null && _c !== void 0 ? _c : 'index'}) in ${(_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code}`;
         // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
         return `<template :key="${(0, helpers_1.encodeQuotes)((keyValue === null || keyValue === void 0 ? void 0 : keyValue.code) || 'index')}" v-for="${(0, helpers_1.encodeQuotes)(forValue)}">
         ${json.children.map((item) => (0, exports.blockToVue)(item, options)).join('\n')}

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

@@ -35,6 +35,22 @@ const create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
 const nullable_1 = require("../../helpers/nullable");
 const helpers_1 = require("./helpers");
 const { types } = babel;
+const getBodyExpression = (node) => {
+    if (types.isArrowFunctionExpression(node) || types.isFunctionExpression(node)) {
+        const callback = node.body;
+        if (callback.type === 'BlockStatement') {
+            for (const statement of callback.body) {
+                if (statement.type === 'ReturnStatement') {
+                    return statement.argument;
+                }
+            }
+        }
+        else {
+            return callback;
+        }
+    }
+    return undefined;
+};
 const getForArguments = (params) => {
     const [forName, indexName, collectionName] = params
         .filter((param) => types.isIdentifier(param))
@@ -65,22 +81,53 @@ const jsxElementToJson = (node) => {
     if (types.isJSXExpressionContainer(node)) {
         return (0, exports.jsxElementToJson)(node.expression);
     }
-    if (types.isCallExpression(node) || types.isOptionalCallExpression(node)) {
-        const callback = node.arguments[0];
-        if (types.isArrowFunctionExpression(callback)) {
-            if (types.isIdentifier(callback.params[0])) {
+    if ((types.isCallExpression(node) || types.isOptionalCallExpression(node)) &&
+        (node.callee.type === 'MemberExpression' || node.callee.type === 'OptionalMemberExpression')) {
+        const isMap = node.callee.property.type === 'Identifier' && node.callee.property.name === 'map';
+        const isArrayFrom = node.callee.property.type === 'Identifier' &&
+            node.callee.property.name === 'from' &&
+            node.callee.object.type === 'Identifier' &&
+            node.callee.object.name === 'Array';
+        if (isMap) {
+            const callback = node.arguments[0];
+            const bodyExpression = getBodyExpression(callback);
+            if (bodyExpression) {
                 const forArguments = getForArguments(callback.params);
                 return (0, create_mitosis_node_1.createMitosisNode)({
                     name: 'For',
                     bindings: {
                         each: (0, bindings_1.createSingleBinding)({
-                            code: (0, generator_1.default)(node.callee)
-                                .code // Remove .map or potentially ?.map
-                                .replace(/\??\.map$/, ''),
+                            code: (0, generator_1.default)(node.callee.object, {
+                                compact: true,
+                            }).code,
                         }),
                     },
                     scope: forArguments,
-                    children: [(0, exports.jsxElementToJson)(callback.body)],
+                    children: [(0, exports.jsxElementToJson)(bodyExpression)],
+                });
+            }
+        }
+        else if (isArrayFrom) {
+            // Array.from
+            const each = node.arguments[0];
+            const callback = node.arguments[1];
+            const bodyExpression = getBodyExpression(callback);
+            if (bodyExpression) {
+                const forArguments = getForArguments(callback.params);
+                return (0, create_mitosis_node_1.createMitosisNode)({
+                    name: 'For',
+                    bindings: {
+                        each: (0, bindings_1.createSingleBinding)({
+                            code: (0, generator_1.default)({
+                                ...node,
+                                arguments: [each],
+                            }, {
+                                compact: true,
+                            }).code,
+                        }),
+                    },
+                    scope: forArguments,
+                    children: [(0, exports.jsxElementToJson)(bodyExpression)],
                 });
             }
         }
@@ -91,7 +138,11 @@ const jsxElementToJson = (node) => {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'Show',
                 bindings: {
-                    when: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node.left).code }),
+                    when: (0, bindings_1.createSingleBinding)({
+                        code: (0, generator_1.default)(node.left, {
+                            compact: true,
+                        }).code,
+                    }),
                 },
                 children: [(0, exports.jsxElementToJson)(node.right)],
             });
@@ -109,7 +160,7 @@ const jsxElementToJson = (node) => {
                 else: (0, exports.jsxElementToJson)(node.alternate),
             },
             bindings: {
-                when: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node.test).code }),
+                when: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node.test, { compact: true }).code }),
             },
             children: child === null ? [] : [child],
         });
@@ -144,7 +195,7 @@ const jsxElementToJson = (node) => {
     if (!types.isJSXElement(node)) {
         return (0, create_mitosis_node_1.createMitosisNode)({
             bindings: {
-                _text: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node).code }),
+                _text: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node, { compact: true }).code }),
             },
         });
     }
@@ -153,7 +204,7 @@ const jsxElementToJson = (node) => {
         const whenAttr = node.openingElement.attributes.find((item) => types.isJSXAttribute(item) && item.name.name === 'when');
         const elseAttr = node.openingElement.attributes.find((item) => types.isJSXAttribute(item) && item.name.name === 'else');
         const whenValue = whenAttr && types.isJSXExpressionContainer(whenAttr.value)
-            ? (0, generator_1.default)(whenAttr.value.expression).code
+            ? (0, generator_1.default)(whenAttr.value.expression, { compact: true }).code
             : undefined;
         const elseValue = elseAttr &&
             types.isJSXExpressionContainer(elseAttr.value) &&
@@ -178,7 +229,7 @@ const jsxElementToJson = (node) => {
                 const forArguments = getForArguments(childExpression === null || childExpression === void 0 ? void 0 : childExpression.params);
                 const forCode = (0, function_1.pipe)(node.openingElement.attributes[0], (attr) => {
                     if (types.isJSXAttribute(attr) && types.isJSXExpressionContainer(attr.value)) {
-                        return (0, generator_1.default)(attr.value.expression).code;
+                        return (0, generator_1.default)(attr.value.expression, { compact: true }).code;
                     }
                     else {
                         // TO-DO: is an empty string valid here?
@@ -228,7 +279,7 @@ const jsxElementToJson = (node) => {
                     ? expression.params.map((node) => node === null || node === void 0 ? void 0 : node.name)
                     : [];
                 memo.bindings[key] = (0, bindings_1.createSingleBinding)({
-                    code: (0, generator_1.default)(expression.body).code,
+                    code: (0, generator_1.default)(expression.body, { compact: true }).code,
                     arguments: args.length ? args : undefined,
                 });
             }
@@ -239,10 +290,14 @@ const jsxElementToJson = (node) => {
                     return memo;
                 memo.slots[key] = [slotNode];
                 // Temporarily keep the slot as a binding until we migrate generators to use the slots.
-                memo.bindings[key] = (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(expression).code });
+                memo.bindings[key] = (0, bindings_1.createSingleBinding)({
+                    code: (0, generator_1.default)(expression, { compact: true }).code,
+                });
             }
             else {
-                memo.bindings[key] = (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(expression).code });
+                memo.bindings[key] = (0, bindings_1.createSingleBinding)({
+                    code: (0, generator_1.default)(expression, { compact: true }).code,
+                });
             }
             return memo;
         }
@@ -250,9 +305,9 @@ const jsxElementToJson = (node) => {
             // TODO: potentially like Vue store bindings and properties as array of key value pairs
             // too so can do this accurately when order matters. Also tempting to not support spread,
             // as some frameworks do not support it (e.g. Angular) tho Angular may be the only one
-            const { code: key } = (0, generator_1.default)(item.argument);
+            const { code: key } = (0, generator_1.default)(item.argument, { compact: true });
             memo.bindings[key] = {
-                code: types.stringLiteral((0, generator_1.default)(item.argument).code).value,
+                code: types.stringLiteral((0, generator_1.default)(item.argument, { compact: true }).code).value,
                 type: 'spread',
                 spreadType: 'normal',
             };

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.10",
+  "version": "0.5.12",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {