@builder.io/mitosis 0.5.13 → 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,23 +128,77 @@ 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);
                     }
                 }
             });

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