@builder.io/mitosis 0.5.9 → 0.5.11

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 ? '</>' : ''}
@@ -243,11 +243,11 @@ const componentToMitosis = (toMitosisOptions = {}) => ({ component }) => {
 
       ${json.style ? `useStyle(\`${json.style}\`)` : ''}
 
-      return (${addWrapper ? '<>' : ''}
+      return ${options.returnArray ? '[' : '('}${addWrapper ? '<>' : ''}
         ${json.children
         .map((item) => (0, exports.blockToMitosis)(item, options, component, addWrapper))
         .join('\n')}
-        ${addWrapper ? '</>' : ''})
+        ${addWrapper ? '</>' : ''}${options.returnArray ? ']' : ')'}
     }
 
   `;

package/dist/src/generators/mitosis/types.d.ts

@@ -3,5 +3,6 @@ export interface ToMitosisOptions extends BaseTranspilerOptions {
     format: 'react' | 'legacy';
     nativeConditionals?: boolean;
     nativeLoops?: boolean;
+    returnArray?: boolean;
 }
 export type MitosisMetadata = {};

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/package.json

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