@builder.io/mitosis 0.0.56-106 → 0.0.56-109

package/dist/src/__tests__/data/blocks/onUpdateWithDeps.raw.d.ts

@@ -1 +1,5 @@
-export default function OnUpdateWithDeps(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+declare type Props = {
+    size: string;
+};
+export default function OnUpdateWithDeps(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/onUpdateWithDeps.raw.jsx

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
-function OnUpdateWithDeps() {
+function OnUpdateWithDeps(props) {
     var state = (0, mitosis_1.useStore)({
         a: 'a',
         b: 'b',
     });
     (0, mitosis_1.onUpdate)(function () {
-        console.log('Runs when a or b changes', state.a, state.b);
-    }, [state.a, state.b]);
+        console.log('Runs when a, b or size changes', state.a, state.b, props.size);
+    }, [state.a, state.b, props.size]);
     return <div />;
 }
 exports.default = OnUpdateWithDeps;

package/dist/src/__tests__/shared.d.ts

@@ -1,4 +1,8 @@
-import { Transpiler } from '../types/transpiler';
+import { TranspilerGenerator } from '../types/transpiler';
 import { Target } from '../types/config';
 export declare const runTestsForJsx: () => void;
-export declare const runTestsForTarget: (target: Target, generator: Transpiler) => void;
+export declare const runTestsForTarget: <X>({ target, generator, options, }: {
+    target: Target;
+    generator: TranspilerGenerator<X, string>;
+    options: X;
+}) => void;

package/dist/src/__tests__/shared.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runTestsForTarget = exports.runTestsForJsx = void 0;
 var jsx_1 = require("../parsers/jsx");
@@ -60,6 +71,7 @@ var submitButtonBlock = require('./data/blocks/submit-button.raw');
 var text = require('./data/blocks/text.raw');
 var textarea = require('./data/blocks/textarea.raw');
 var video = require('./data/blocks/video.raw');
+var builderRenderContent = require('./data/blocks/builder-render-content.raw');
 var path = 'test-path';
 var BASIC_TESTS = {
     Basic: basic,
@@ -93,6 +105,7 @@ var BASIC_TESTS = {
     preserveTyping: preserveTyping,
     typeDependency: typeDependency,
     defaultValsWithTypes: require('./data/types/component-with-default-values-types.raw'),
+    'import types': builderRenderContent,
     subComponent: subComponent,
     nestedStyles: nestedStyles,
     propsDestructure: propsDestructure,
@@ -296,6 +309,12 @@ var TESTS_FOR_TARGET = {
     ],
 };
 var runTestsForJsx = function () {
+    test('Remove Internal mitosis package', function () {
+        var component = (0, jsx_1.parseJsx)(basicMitosis, {
+            compileAwayPackages: ['@dummy/custom-mitosis'],
+        });
+        expect(component).toMatchSnapshot();
+    });
     JSX_TESTS.forEach(function (tests) {
         Object.keys(tests).forEach(function (key) {
             test(key, function () {
@@ -306,28 +325,38 @@ var runTestsForJsx = function () {
     });
 };
 exports.runTestsForJsx = runTestsForJsx;
-var runTestsForTarget = function (target, generator) {
+var runTestsForTarget = function (_a) {
+    var target = _a.target, generator = _a.generator, options = _a.options;
     var testsArray = TESTS_FOR_TARGET[target];
     test('Remove Internal mitosis package', function () {
         var component = (0, jsx_1.parseJsx)(basicMitosis, {
             compileAwayPackages: ['@dummy/custom-mitosis'],
         });
-        var output = generator({ component: component, path: path });
+        var output = generator(options)({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
+    var configurations = [
+        { options: __assign(__assign({}, options), { typescript: false }), testName: 'Javascript Test' },
+        { options: __assign(__assign({}, options), { typescript: true }), testName: 'Typescript Test' },
+    ];
     if (testsArray) {
-        testsArray.forEach(function (tests) {
-            Object.keys(tests).forEach(function (key) {
-                test(key, function () {
-                    try {
-                        var component = (0, jsx_1.parseJsx)(tests[key]);
-                        var output = generator({ component: component, path: path });
-                        expect(output).toMatchSnapshot();
-                    }
-                    catch (error) {
-                        console.log('failed to parse', error);
-                        throw error;
-                    }
+        configurations.forEach(function (_a) {
+            var options = _a.options, testName = _a.testName;
+            describe(testName, function () {
+                testsArray.forEach(function (tests) {
+                    Object.keys(tests).forEach(function (key) {
+                        test(key, function () {
+                            try {
+                                var component = (0, jsx_1.parseJsx)(tests[key]);
+                                var output = generator(options)({ component: component, path: path });
+                                expect(output).toMatchSnapshot();
+                            }
+                            catch (error) {
+                                console.log('failed to parse', error);
+                                throw error;
+                            }
+                        });
+                    });
                 });
             });
         });

package/dist/src/generators/angular.d.ts

@@ -1,5 +1,5 @@
 import { MitosisNode } from '../types/mitosis-node';
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToAngularOptions extends BaseTranspilerOptions {
     standalone?: boolean;
 }
@@ -10,5 +10,5 @@ interface AngularBlockOptions {
     domRefs?: string[];
 }
 export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions, blockOptions?: AngularBlockOptions) => string;
-export declare const componentToAngular: (options?: ToAngularOptions) => Transpiler;
+export declare const componentToAngular: TranspilerGenerator<ToAngularOptions>;
 export {};

package/dist/src/generators/angular.js

@@ -28,6 +28,7 @@ var map_refs_1 = require("../helpers/map-refs");
 var render_imports_1 = require("../helpers/render-imports");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var jsx_1 = require("../parsers/jsx");
+var mitosis_node_1 = require("../types/mitosis-node");
 var plugins_1 = require("../modules/plugins");
 var is_children_1 = __importDefault(require("../helpers/is-children"));
 var get_props_1 = require("../helpers/get-props");
@@ -97,9 +98,9 @@ var blockToAngular = function (json, options, blockOptions) {
     }
     var str = '';
     var needsToRenderSlots = [];
-    if (json.name === 'For') {
-        var indexName = json.scope.For[1];
-        str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code, {
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        var indexName = json.scope.indexName;
+        str += "<ng-container *ngFor=\"let ".concat(json.scope.forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code, {
             contextVars: contextVars,
             outputVars: outputVars,
             domRefs: domRefs,

package/dist/src/generators/builder.d.ts

@@ -1,19 +1,12 @@
 import { MitosisNode } from '../types/mitosis-node';
-import { BuilderElement } from '@builder.io/sdk';
-import { TranspilerArgs } from '../types/transpiler';
-export interface ToBuilderOptions {
+import { BuilderContent, BuilderElement } from '@builder.io/sdk';
+import { BaseTranspilerOptions, TranspilerArgs } from '../types/transpiler';
+export interface ToBuilderOptions extends BaseTranspilerOptions {
     includeIds?: boolean;
 }
 declare type InternalOptions = {
     skipMapper?: boolean;
 };
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;
-export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => {
-    data: {
-        httpRequests: import("../types/json")._JSON;
-        jsCode: string;
-        tsCode: string;
-        blocks: BuilderElement[];
-    };
-};
+export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => BuilderContent;
 export {};

package/dist/src/generators/builder.js

@@ -81,15 +81,16 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
         block.component.options.columns = columns;
         block.children = [];
         return block;
-    }, For: function (node, options) {
+    }, For: function (_node, options) {
         var _a;
+        var node = _node;
         return el({
             component: {
                 name: 'Core:Fragment',
             },
             repeat: {
                 collection: (_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code,
-                itemName: node.properties._forName,
+                itemName: node.scope.forName,
             },
             children: node.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)

package/dist/src/generators/helpers/functions.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from '../../modules/plugins';
+export declare const FUNCTION_HACK_PLUGIN: Plugin;

package/dist/src/generators/helpers/functions.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FUNCTION_HACK_PLUGIN = void 0;
+var FUNCTION_HACK_PLUGIN = function () { return ({
+    json: {
+        pre: function (json) {
+            var _a, _b;
+            for (var key in json.state) {
+                var value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
+                var type = (_b = json.state[key]) === null || _b === void 0 ? void 0 : _b.type;
+                if (typeof value === 'string' && type === 'method') {
+                    var newValue = "function ".concat(value);
+                    json.state[key] = {
+                        code: newValue,
+                        type: 'method',
+                    };
+                }
+                else if (typeof value === 'string' && type === 'function') {
+                    json.state[key] = {
+                        code: value,
+                        type: 'method',
+                    };
+                }
+            }
+        },
+    },
+}); };
+exports.FUNCTION_HACK_PLUGIN = FUNCTION_HACK_PLUGIN;

package/dist/src/generators/html.d.ts

@@ -1,7 +1,7 @@
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToHtmlOptions extends BaseTranspilerOptions {
     format?: 'class' | 'script';
     prefix?: string;
 }
-export declare const componentToHtml: (options?: ToHtmlOptions) => Transpiler;
-export declare const componentToCustomElement: (options?: ToHtmlOptions) => Transpiler;
+export declare const componentToHtml: TranspilerGenerator<ToHtmlOptions>;
+export declare const componentToCustomElement: TranspilerGenerator<ToHtmlOptions>;

package/dist/src/generators/html.js

@@ -47,12 +47,14 @@ var get_props_1 = require("../helpers/get-props");
 var get_props_ref_1 = require("../helpers/get-props-ref");
 var get_prop_functions_1 = require("../helpers/get-prop-functions");
 var jsx_1 = require("../parsers/jsx");
+var mitosis_node_1 = require("../types/mitosis-node");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var plugins_1 = require("../modules/plugins");
 var is_children_1 = __importDefault(require("../helpers/is-children"));
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var render_imports_1 = require("../helpers/render-imports");
+var for_1 = require("../helpers/nodes/for");
 var isAttribute = function (key) {
     return /-/.test(key);
 };
@@ -189,7 +191,7 @@ var addOnChangeJs = function (id, options, code) {
 };
 // TODO: spread support
 var blockToHtml = function (json, options, blockOptions) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     if (blockOptions === void 0) { blockOptions = {}; }
     var ComponentName = blockOptions.ComponentName;
     var scopeVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.scopeVars) || [];
@@ -221,14 +223,14 @@ var blockToHtml = function (json, options, blockOptions) {
         return "<template data-el=\"".concat(elId, "\"><!-- ").concat((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code, " --></template>");
     }
     var str = '';
-    if (json.name === 'For') {
-        var forArguments = ((_c = json === null || json === void 0 ? void 0 : json.scope) === null || _c === void 0 ? void 0 : _c.For) || [];
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        var forArguments = (0, for_1.getForArguments)(json);
         var localScopeVars_1 = __spreadArray(__spreadArray([], scopeVars, true), forArguments, true);
         var argsStr = forArguments.map(function (arg) { return "\"".concat(arg, "\""); }).join(',');
         addOnChangeJs(elId, options, 
         // TODO: be smarter about rendering, deleting old items and adding new ones by
         // querying dom potentially
-        "\n        let array = ".concat((_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code, ";\n        ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, ").concat(argsStr, ");\n      "));
+        "\n        let array = ".concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, ";\n        ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, ").concat(argsStr, ");\n      "));
         // TODO: decide on how to handle this...
         str += "\n      <template data-el=\"".concat(elId, "\">");
         if (json.children) {
@@ -241,7 +243,7 @@ var blockToHtml = function (json, options, blockOptions) {
         str += '</template>';
     }
     else if (json.name === 'Show') {
-        var whenCondition = ((_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code).replace(/;$/, '');
+        var whenCondition = ((_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code).replace(/;$/, '');
         addOnChangeJs(elId, options, "\n        ".concat(addScopeVars(scopeVars, whenCondition, function (scopeVar) {
             return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
         }), "\n        const whenCondition = ").concat(whenCondition, ";\n        if (whenCondition) {\n          ").concat(options.format === 'class' ? 'this.' : '', "showContent(el)\n        }\n      "));
@@ -281,8 +283,8 @@ var blockToHtml = function (json, options, blockOptions) {
             if (key === '_spread' || key === 'css') {
                 continue;
             }
-            var value = (_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code;
-            var cusArg = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.arguments) || ['event'];
+            var value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
+            var cusArg = ((_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.arguments) || ['event'];
             // TODO: proper babel transform to replace. Util for this
             var useValue = value;
             if (key.startsWith('on')) {

package/dist/src/generators/liquid.d.ts

@@ -1,4 +1,4 @@
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToLiquidOptions extends BaseTranspilerOptions {
     reactive?: boolean;
 }
@@ -8,4 +8,4 @@ export interface ToLiquidOptions extends BaseTranspilerOptions {
  * Shopify will reject our PUT to update the template
  */
 export declare const isValidLiquidBinding: (str?: string) => boolean;
-export declare const componentToLiquid: (options?: ToLiquidOptions) => Transpiler;
+export declare const componentToLiquid: TranspilerGenerator<ToLiquidOptions>;

package/dist/src/generators/liquid.js

@@ -6,6 +6,7 @@ var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var jsx_1 = require("../parsers/jsx");
+var mitosis_node_1 = require("../types/mitosis-node");
 var plugins_1 = require("../modules/plugins");
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
@@ -49,12 +50,11 @@ var blockToLiquid = function (json, options) {
         return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text.code), "}}");
     }
     var str = '';
-    if (json.name === 'For') {
-        if (!((0, exports.isValidLiquidBinding)((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code) &&
-            (0, exports.isValidLiquidBinding)(json.properties._forName))) {
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        if (!((0, exports.isValidLiquidBinding)((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code) && (0, exports.isValidLiquidBinding)(json.scope.forName))) {
             return str;
         }
-        str += "{% for ".concat(json.properties._forName, " in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), " %}");
+        str += "{% for ".concat(json.scope.forName, " in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), " %}");
         if (json.children) {
             str += json.children.map(function (item) { return blockToLiquid(item, options); }).join('\n');
         }

package/dist/src/generators/lit/generate.d.ts

@@ -1,5 +1,5 @@
-import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 export interface ToLitOptions extends BaseTranspilerOptions {
     useShadowDom?: boolean;
 }
-export declare const componentToLit: (options?: ToLitOptions) => Transpiler;
+export declare const componentToLit: TranspilerGenerator<ToLitOptions>;

package/dist/src/generators/lit/generate.js

@@ -13,6 +13,7 @@ var standalone_1 = require("prettier/standalone");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var render_imports_1 = require("../../helpers/render-imports");
 var jsx_1 = require("../../parsers/jsx");
+var mitosis_node_1 = require("../../types/mitosis-node");
 var plugins_1 = require("../../modules/plugins");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
@@ -48,8 +49,8 @@ var blockToLit = function (json, options) {
     if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
         return "${".concat(processBinding((_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code), "}");
     }
-    if (json.name === 'For') {
-        return "${".concat(processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), "?.map((").concat(json.properties._forName, ", index) => (\n      html`").concat(json.children
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        return "${".concat(processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), "?.map((").concat(json.scope.forName, ", index) => (\n      html`").concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToLit(item, options); })
             .join('\n'), "`\n    ))}");

package/dist/src/generators/marko/generate.d.ts

@@ -1,7 +1,7 @@
-import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 export interface ToMarkoOptions extends BaseTranspilerOptions {
 }
-export declare const componentToMarko: (userOptions?: ToMarkoOptions) => Transpiler;
+export declare const componentToMarko: TranspilerGenerator<ToMarkoOptions>;
 /**
  * Convert marko expressions to valid html
  *

package/dist/src/generators/marko/generate.js

@@ -24,6 +24,7 @@ var standalone_1 = require("prettier/standalone");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var render_imports_1 = require("../../helpers/render-imports");
 var jsx_1 = require("../../parsers/jsx");
+var mitosis_node_1 = require("../../types/mitosis-node");
 var plugins_1 = require("../../modules/plugins");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
@@ -37,6 +38,7 @@ var has_props_1 = require("../../helpers/has-props");
 var get_refs_1 = require("../../helpers/get-refs");
 var lodash_1 = require("lodash");
 var hash_sum_1 = __importDefault(require("hash-sum"));
+var for_1 = require("../../helpers/nodes/for");
 // Having issues with this, so off for now
 var USE_MARKO_PRETTIER = false;
 /**
@@ -46,7 +48,7 @@ function getStatePropertyNames(json) {
     return Object.keys(json.state).filter(function (key) { var _a; return ((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; });
 }
 var blockToMarko = function (json, options) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     if (json.properties._text) {
         return json.properties._text;
     }
@@ -56,22 +58,22 @@ var blockToMarko = function (json, options) {
     if (json.name === 'Fragment') {
         return json.children.map(function (child) { return blockToMarko(child, options); }).join('\n');
     }
-    if (json.name === 'For') {
-        var forArguments = (((_c = json === null || json === void 0 ? void 0 : json.scope) === null || _c === void 0 ? void 0 : _c.For) || []).join(',');
-        return "<for|".concat(forArguments, "| of=(").concat(processBinding(options.component, (_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code), ")>\n      ").concat(json.children
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        var forArguments = (0, for_1.getForArguments)(json).join(',');
+        return "<for|".concat(forArguments, "| of=(").concat(processBinding(options.component, (_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), ")>\n      ").concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToMarko(item, options); })
             .join('\n'), "\n    </for>");
     }
     else if (json.name === 'Show') {
-        return "<if(".concat(processBinding(options.component, (_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code), ")>\n      ").concat(json.children
+        return "<if(".concat(processBinding(options.component, (_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code), ")>\n      ").concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToMarko(item, options); })
             .join('\n'), "</if>\n    ").concat(!json.meta.else ? '' : "<else>".concat(blockToMarko(json.meta.else, options), "</else>"));
     }
     var str = '';
     str += "<".concat(json.name, " ");
-    if ((_f = json.bindings._spread) === null || _f === void 0 ? void 0 : _f.code) {
+    if ((_e = json.bindings._spread) === null || _e === void 0 ? void 0 : _e.code) {
         str += " ...(".concat(json.bindings._spread.code, ") ");
     }
     for (var key in json.properties) {
@@ -79,7 +81,7 @@ var blockToMarko = function (json, options) {
         str += " ".concat(key, "=\"").concat(value, "\" ");
     }
     for (var key in json.bindings) {
-        var _h = json.bindings[key], code = _h.code, _j = _h.arguments, cusArgs = _j === void 0 ? ['event'] : _j;
+        var _g = json.bindings[key], code = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
         if (key === '_spread' || key === '_forName') {
             continue;
         }
@@ -98,7 +100,7 @@ var blockToMarko = function (json, options) {
         return str + ' />';
     }
     str += '>';
-    if ((_g = json.bindings.innerHTML) === null || _g === void 0 ? void 0 : _g.code) {
+    if ((_f = json.bindings.innerHTML) === null || _f === void 0 ? void 0 : _f.code) {
         str += "$!{".concat(processBinding(options.component, json.bindings.innerHTML.code), "}");
     }
     if (json.children) {

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

@@ -1,9 +1,8 @@
-import { Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 import { MitosisNode } from '../types/mitosis-node';
-export interface ToMitosisOptions {
-    prettier?: boolean;
+export interface ToMitosisOptions extends BaseTranspilerOptions {
     format: 'react' | 'legacy';
 }
 export declare const DEFAULT_FORMAT: ToMitosisOptions['format'];
 export declare const blockToMitosis: (json: MitosisNode, toMitosisOptions?: Partial<ToMitosisOptions>) => string;
-export declare const componentToMitosis: (toMitosisOptions?: Partial<ToMitosisOptions>) => Transpiler;
+export declare const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>;

package/dist/src/generators/mitosis.js

@@ -38,6 +38,7 @@ var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var map_refs_1 = require("../helpers/map-refs");
 var render_imports_1 = require("../helpers/render-imports");
 var jsx_1 = require("../parsers/jsx");
+var mitosis_node_1 = require("../types/mitosis-node");
 var react_1 = require("./react");
 var state_1 = require("../helpers/state");
 exports.DEFAULT_FORMAT = 'legacy';
@@ -57,9 +58,9 @@ var blockToMitosis = function (json, toMitosisOptions) {
             prettier: options.prettier,
         });
     }
-    if (json.name === 'For') {
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
         var needsWrapper = json.children.length !== 1;
-        return "<For each={".concat((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, "}>\n    {(").concat(json.properties._forName, ", index) =>\n      ").concat(needsWrapper ? '<>' : '', "\n        ").concat(json.children.map(function (child) { return (0, exports.blockToMitosis)(child, options); }), "}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
+        return "<For each={".concat((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, "}>\n    {(").concat(json.scope.forName, ", index) =>\n      ").concat(needsWrapper ? '<>' : '', "\n        ").concat(json.children.map(function (child) { return (0, exports.blockToMitosis)(child, options); }), "}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
     }
     if (json.properties._text) {
         return json.properties._text;

package/dist/src/generators/qwik/component-generator.d.ts

@@ -1,4 +1,4 @@
-import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 export interface ToQwikOptions extends BaseTranspilerOptions {
 }
-export declare const componentToQwik: (userOptions?: ToQwikOptions) => Transpiler;
+export declare const componentToQwik: TranspilerGenerator<ToQwikOptions>;

package/dist/src/generators/qwik/directives.js

@@ -5,6 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreButton = exports.__passThroughProps__ = exports.Image = exports.DIRECTIVES = void 0;
+var for_1 = require("../../helpers/nodes/for");
 var minify_1 = require("../minify");
 var src_generator_1 = require("./src-generator");
 exports.DIRECTIVES = {
@@ -27,17 +28,17 @@ exports.DIRECTIVES = {
             });
         };
     },
-    For: function (node, blockFn) {
+    For: function (_node, blockFn) {
         return function () {
             var _this = this;
             var _a;
+            var node = _node;
             var expr = (_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code;
             this.jsxExpression(function () {
-                var forName = node.properties._forName || '_';
-                var indexName = node.properties._indexName;
+                var forArgs = (0, for_1.getForArguments)(node);
+                var forName = forArgs[0];
                 _this.emit('(', expr, '||[]).map(');
-                _this.isBuilder && _this.emit('(('),
-                    _this.emit('function(', forName, indexName ? ',' : '', indexName ? indexName : '', '){');
+                _this.isBuilder && _this.emit('(('), _this.emit('function(', forArgs, '){');
                 if (_this.isBuilder) {
                     _this.emit('var state=Object.assign({},this,{', (0, src_generator_1.iteratorProperty)(expr), ':', forName, '==null?{}:', forName, '});');
                 }

package/dist/src/generators/react/generator.d.ts

@@ -1,6 +1,6 @@
-import { Transpiler } from '../../types/transpiler';
+import { TranspilerGenerator } from '../../types/transpiler';
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToReactOptions } from './types';
 export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, parentSlots?: any[]) => string;
-export declare const componentToPreact: (reactOptions?: ToReactOptions) => Transpiler;
-export declare const componentToReact: (reactOptions?: ToReactOptions) => Transpiler;
+export declare const componentToPreact: TranspilerGenerator<ToReactOptions>;
+export declare const componentToReact: TranspilerGenerator<ToReactOptions>;

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

@@ -49,6 +49,7 @@ var state_1 = require("../../helpers/state");
 var state_2 = require("./state");
 var helpers_2 = require("./helpers");
 var hash_sum_1 = __importDefault(require("hash-sum"));
+var for_1 = require("../../helpers/nodes/for");
 var openFrag = function (options) { return getFragment('open', options); };
 var closeFrag = function (options) { return getFragment('close', options); };
 function getFragment(type, options) {
@@ -87,11 +88,12 @@ var NODE_MAPPERS = {
             .map(function (item) { return (0, exports.blockToReact)(item, options); })
             .join('\n')).concat(wrap ? getFragment('close', options) : '');
     },
-    For: function (json, options) {
-        var _a, _b;
+    For: function (_json, options) {
+        var _a;
+        var json = _json;
         var wrap = wrapInFragment(json);
-        var forArguments = (((_a = json === null || json === void 0 ? void 0 : json.scope) === null || _a === void 0 ? void 0 : _a.For) || []).join(',');
-        return "{".concat((0, helpers_2.processBinding)((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code, options), "?.map((").concat(forArguments, ") => (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
+        var forArguments = (0, for_1.getForArguments)(json).join(', ');
+        return "{".concat((0, helpers_2.processBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), "?.map((").concat(forArguments, ") => (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return (0, exports.blockToReact)(item, options); })
             .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ))}");

package/dist/src/generators/react-native.d.ts

@@ -1,9 +1,9 @@
 import { ClassStyleMap } from '../helpers/styles/helpers';
 import { MitosisComponent } from '../types/mitosis-component';
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToReactNativeOptions extends BaseTranspilerOptions {
     stylesType?: 'emotion' | 'react-native';
     stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
 }
 export declare const collectReactNativeStyles: (json: MitosisComponent) => ClassStyleMap;
-export declare const componentToReactNative: (options?: ToReactNativeOptions) => Transpiler;
+export declare const componentToReactNative: TranspilerGenerator<ToReactNativeOptions>;

package/dist/src/generators/solid/index.d.ts

@@ -1,3 +1,3 @@
-import { Transpiler } from '../../types/transpiler';
+import { TranspilerGenerator } from '../../types/transpiler';
 import { ToSolidOptions } from './types';
-export declare const componentToSolid: (passedOptions?: Partial<ToSolidOptions>) => Transpiler;
+export declare const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>>;