@builder.io/mitosis 0.5.13 → 0.5.15

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,23 +128,60 @@ 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 programNode = (0, parsers_1.parseCodeToAst)(code);
+                            if (!programNode)
+                                continue;
+                            (0, core_1.traverse)(programNode, {
+                                Program(path) {
+                                    if (path.scope.hasBinding(target))
+                                        return;
+                                    const x = {
+                                        id: core_1.types.identifier(target),
+                                        init: core_1.types.identifier('PLACEHOLDER'),
+                                    };
+                                    path.scope.push(x);
+                                    path.scope.rename(target, 'state.$index');
+                                    path.traverse({
+                                        VariableDeclaration(p) {
+                                            if (p.node.declarations.length === 1 && p.node.declarations[0].id === x.id) {
+                                                p.remove();
+                                            }
+                                        },
+                                    });
+                                },
                             });
+                            thing.bindings[key].code = (0, generator_1.default)(programNode).code;
                         }
+                        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);
                     }
                 }
             });

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

@@ -168,13 +168,14 @@ const stringifyBinding = (node, options) => ([key, binding]) => {
     if (key === 'innerHTML' || !binding) {
         return '';
     }
-    const { code, arguments: cusArgs = ['event'], type, async } = binding;
+    const { code, arguments: cusArgs = ['event'], type } = 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;
         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

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");
@@ -185,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/parsers.d.ts

@@ -1,4 +1,5 @@
 import * as babel from '@babel/core';
+export declare function parseCodeToAst(code: string): babel.ParseResult | null;
 export declare function parseCode(code: string): babel.types.Statement[];
 export declare const isCodeBodyExpression: (body: babel.types.Statement[]) => boolean;
 /**

package/dist/src/helpers/parsers.js

@@ -26,25 +26,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCodeBodyIdentifier = exports.isExpression = exports.isCodeBodyExpression = exports.parseCode = void 0;
+exports.isCodeBodyIdentifier = exports.isExpression = exports.isCodeBodyExpression = exports.parseCode = exports.parseCodeToAst = void 0;
 const babel = __importStar(require("@babel/core"));
 const plugin_syntax_decorators_1 = __importDefault(require("@babel/plugin-syntax-decorators"));
 const plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
 const preset_typescript_1 = __importDefault(require("@babel/preset-typescript"));
-function parseCode(code) {
-    const ast = babel.parse(code, {
+function parseCodeToAst(code) {
+    return babel.parse(code, {
         presets: [[preset_typescript_1.default, { isTSX: true, allExtensions: true }]],
         plugins: [
             [plugin_syntax_typescript_1.default, { isTSX: true }],
             [plugin_syntax_decorators_1.default, { legacy: true }],
         ],
     });
-    const body = babel.types.isFile(ast)
-        ? ast.program.body
-        : babel.types.isProgram(ast)
-            ? ast.body
-            : [];
-    return body;
+}
+exports.parseCodeToAst = parseCodeToAst;
+function parseCode(code) {
+    const ast = parseCodeToAst(code);
+    return babel.types.isFile(ast) ? ast.program.body : babel.types.isProgram(ast) ? ast.body : [];
 }
 exports.parseCode = parseCode;
 const isCodeBodyExpression = (body) => body.length == 1 &&

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

@@ -364,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

@@ -282,6 +282,7 @@ const jsxElementToJson = (node) => {
                     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,15 +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;
-    async?: boolean;
-    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.13",
+  "version": "0.5.15",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {