@builder.io/mitosis 0.0.45 → 0.0.46

package/dist/src/__tests__/vue.test.js

@@ -19,90 +19,91 @@ var customCode = require('./data/blocks/custom-code.raw');
 var embed = require('./data/blocks/embed.raw');
 var image = require('./data/blocks/image.raw');
 var columns = require('./data/blocks/columns.raw');
+var path = 'test-path';
 describe('Vue', function () {
     test('Basic', function () {
-        var json = jsx_1.parseJsx(basic);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(basic);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Input block', function () {
-        var json = jsx_1.parseJsx(inputBlock);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(inputBlock);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Submit button block', function () {
-        var json = jsx_1.parseJsx(submitButtonBlock);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(submitButtonBlock);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Select block', function () {
-        var json = jsx_1.parseJsx(selectBlock);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(selectBlock);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Form block', function () {
-        var json = jsx_1.parseJsx(formBlock);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(formBlock);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Button', function () {
-        var json = jsx_1.parseJsx(button);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(button);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Textarea', function () {
-        var json = jsx_1.parseJsx(textarea);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(textarea);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Img', function () {
-        var json = jsx_1.parseJsx(img);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(img);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Video', function () {
-        var json = jsx_1.parseJsx(video);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(video);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Section', function () {
-        var json = jsx_1.parseJsx(section);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(section);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Text', function () {
-        var json = jsx_1.parseJsx(text);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(text);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('RawText', function () {
-        var json = jsx_1.parseJsx(rawText);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(rawText);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Stamped.io', function () {
-        var json = jsx_1.parseJsx(stamped);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(stamped);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('CustomCode', function () {
-        var json = jsx_1.parseJsx(customCode);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(customCode);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Embed', function () {
-        var json = jsx_1.parseJsx(customCode);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(customCode);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Image', function () {
-        var json = jsx_1.parseJsx(image);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(image);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
     test('Columns', function () {
-        var json = jsx_1.parseJsx(columns);
-        var output = vue_1.componentToVue(json);
+        var component = (0, jsx_1.parseJsx)(columns);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
 });

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

@@ -1,9 +1,6 @@
-import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
-import { Plugin } from '../modules/plugins';
-export declare type ToAngularOptions = {
-    prettier?: boolean;
-    plugins?: Plugin[];
-};
+import { BaseTranspilerOptions, Transpiler } from '../types/config';
+export interface ToAngularOptions extends BaseTranspilerOptions {
+}
 export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions) => string;
-export declare const componentToAngular: (componentJson: MitosisComponent, options?: ToAngularOptions) => string;
+export declare const componentToAngular: (options?: ToAngularOptions) => Transpiler;

package/dist/src/generators/angular.js

@@ -26,9 +26,9 @@ var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var mappers = {
     Fragment: function (json, options) {
-        return "<div>" + json.children
-            .map(function (item) { return exports.blockToAngular(item, options); })
-            .join('\n') + "</div>";
+        return "<div>".concat(json.children
+            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+            .join('\n'), "</div>");
     },
 };
 var blockToAngular = function (json, options) {
@@ -36,32 +36,32 @@ var blockToAngular = function (json, options) {
     if (mappers[json.name]) {
         return mappers[json.name](json, options);
     }
-    if (is_children_1.default(json)) {
+    if ((0, is_children_1.default)(json)) {
         return "<ng-slot></ng-slot>";
     }
     if (json.properties._text) {
         return json.properties._text;
     }
     if (json.bindings._text) {
-        return "{{" + strip_state_and_props_refs_1.stripStateAndPropsRefs(json.bindings._text) + "}}";
+        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text), "}}");
     }
     var str = '';
     if (json.name === 'For') {
-        str += "<ng-container *ngFor=\"let " + json.properties._forName + " of " + strip_state_and_props_refs_1.stripStateAndPropsRefs(json.bindings.each) + "\">";
+        str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each), "\">");
         str += json.children
-            .map(function (item) { return exports.blockToAngular(item, options); })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
             .join('\n');
         str += "</ng-container>";
     }
     else if (json.name === 'Show') {
-        str += "<ng-container *ngIf=\"" + strip_state_and_props_refs_1.stripStateAndPropsRefs(json.bindings.when) + "\">";
+        str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when), "\">");
         str += json.children
-            .map(function (item) { return exports.blockToAngular(item, options); })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
             .join('\n');
         str += "</ng-container>";
     }
     else {
-        str += "<" + json.name + " ";
+        str += "<".concat(json.name, " ");
         // TODO: spread support for angular
         // if (json.bindings._spread) {
         //   str += `v-bind="${stripStateAndPropsRefs(
@@ -73,7 +73,7 @@ var blockToAngular = function (json, options) {
                 continue;
             }
             var value = json.properties[key];
-            str += " " + key + "=\"" + value + "\" ";
+            str += " ".concat(key, "=\"").concat(value, "\" ");
         }
         for (var key in json.bindings) {
             if (key === '_spread') {
@@ -84,7 +84,7 @@ var blockToAngular = function (json, options) {
             }
             var value = json.bindings[key];
             // TODO: proper babel transform to replace. Util for this
-            var useValue = strip_state_and_props_refs_1.stripStateAndPropsRefs(value);
+            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
             if (key.startsWith('on')) {
                 var event_1 = key.replace('on', '').toLowerCase();
                 if (event_1 === 'change' &&
@@ -92,14 +92,14 @@ var blockToAngular = function (json, options) {
                     event_1 = 'input';
                 }
                 // TODO: proper babel transform to replace. Util for this
-                var finalValue = remove_surrounding_block_1.removeSurroundingBlock(useValue.replace(/event\./g, '$event.'));
-                str += " (" + event_1 + ")=\"" + finalValue + "\" ";
+                var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue.replace(/event\./g, '$event.'));
+                str += " (".concat(event_1, ")=\"").concat(finalValue, "\" ");
             }
             else if (key === 'ref') {
-                str += " #" + useValue + " ";
+                str += " #".concat(useValue, " ");
             }
             else {
-                str += " [" + key + "]=\"" + useValue + "\" ";
+                str += " [".concat(key, "]=\"").concat(useValue, "\" ");
             }
         }
         if (jsx_1.selfClosingTags.has(json.name)) {
@@ -108,85 +108,81 @@ var blockToAngular = function (json, options) {
         str += '>';
         if (json.children) {
             str += json.children
-                .map(function (item) { return exports.blockToAngular(item, options); })
+                .map(function (item) { return (0, exports.blockToAngular)(item, options); })
                 .join('\n');
         }
-        str += "</" + json.name + ">";
+        str += "</".concat(json.name, ">");
     }
     return str;
 };
 exports.blockToAngular = blockToAngular;
 var indent = function (str, spaces) {
     if (spaces === void 0) { spaces = 4; }
-    return str.replace(/\n([^\n])/g, "\n" + ' '.repeat(spaces) + "$1");
+    return str.replace(/\n([^\n])/g, "\n".concat(' '.repeat(spaces), "$1"));
 };
-var componentToAngular = function (componentJson, options) {
+var componentToAngular = function (options) {
     if (options === void 0) { options = {}; }
-    // Make a copy we can safely mutate, similar to babel's toolchain
-    var json = fast_clone_1.fastClone(componentJson);
-    if (options.plugins) {
-        json = plugins_1.runPreJsonPlugins(json, options.plugins);
-    }
-    var props = get_props_1.getProps(componentJson);
-    var refs = Array.from(get_refs_1.getRefs(json));
-    map_refs_1.mapRefs(json, function (refName) { return "this." + refName + ".nativeElement"; });
-    if (options.plugins) {
-        json = plugins_1.runPostJsonPlugins(json, options.plugins);
-    }
-    var css = collect_styles_1.collectCss(json);
-    if (options.prettier !== false) {
-        css = tryFormat(css, 'css');
-    }
-    var template = json.children.map(function (item) { return exports.blockToAngular(item); }).join('\n');
-    if (options.prettier !== false) {
-        template = tryFormat(template, 'html');
-    }
-    strip_meta_properties_1.stripMetaProperties(json);
-    var dataString = get_state_object_string_1.getStateObjectStringFromComponent(json, {
-        format: 'class',
-        valueMapper: function (code) {
-            return strip_state_and_props_refs_1.stripStateAndPropsRefs(code, { replaceWith: 'this.' });
-        },
-    });
-    var str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    import { Component ", "",
-        " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: \\`\n        ",
-        "\n      \\`,\n      ",
-        "\n    })\n    export default class ", " {\n      ",
-        "\n\n      ",
-        "\n\n      ",
-        "\n\n      ",
-        "\n\n      ", "\n    }\n  "])), refs.length ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', render_imports_1.renderPreComponent(json), lodash_1.kebabCase(json.name || 'my-component'), indent(template, 8)
-        .replace(/`/g, '\\`')
-        .replace(/\$\{/g, '\\${'), css.length
-        ? "styles: [\n        `" + indent(css, 8) + "`\n      ],"
-        : '', componentJson.name, Array.from(props)
-        .map(function (item) { return "@Input() " + item + ": any"; })
-        .join('\n'), refs
-        .map(function (refName) { return "@ViewChild('" + refName + "') " + refName + ": ElementRef"; })
-        .join('\n'), !componentJson.hooks.onMount
-        ? ''
-        : "ngOnInit() {\n              " + strip_state_and_props_refs_1.stripStateAndPropsRefs(componentJson.hooks.onMount, {
-            replaceWith: 'this.',
-        }) + "\n            }", !componentJson.hooks.onUnMount
-        ? ''
-        : "ngOnDestroy() {\n              " + strip_state_and_props_refs_1.stripStateAndPropsRefs(componentJson.hooks.onUnMount, {
-            replaceWith: 'this.',
-        }) + "\n            }", dataString);
-    if (options.plugins) {
-        str = plugins_1.runPreCodePlugins(str, options.plugins);
-    }
-    if (options.prettier !== false) {
-        str = tryFormat(str, 'typescript');
-    }
-    if (options.plugins) {
-        str = plugins_1.runPostCodePlugins(str, options.plugins);
-    }
-    return str;
+    return function (_a) {
+        var component = _a.component;
+        // Make a copy we can safely mutate, similar to babel's toolchain
+        var json = (0, fast_clone_1.fastClone)(component);
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+        }
+        var props = (0, get_props_1.getProps)(component);
+        var refs = Array.from((0, get_refs_1.getRefs)(json));
+        (0, map_refs_1.mapRefs)(json, function (refName) { return "this.".concat(refName, ".nativeElement"); });
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+        }
+        var css = (0, collect_styles_1.collectCss)(json);
+        if (options.prettier !== false) {
+            css = tryFormat(css, 'css');
+        }
+        var template = json.children.map(function (item) { return (0, exports.blockToAngular)(item); }).join('\n');
+        if (options.prettier !== false) {
+            template = tryFormat(template, 'html');
+        }
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            valueMapper: function (code) {
+                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: 'this.' });
+            },
+        });
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    import { Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n  "])), refs.length ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', (0, render_imports_1.renderPreComponent)(json), (0, lodash_1.kebabCase)(json.name || 'my-component'), indent(template, 8)
+            .replace(/`/g, '\\`')
+            .replace(/\$\{/g, '\\${'), css.length
+            ? "styles: [\n        `".concat(indent(css, 8), "`\n      ],")
+            : '', component.name, Array.from(props)
+            .map(function (item) { return "@Input() ".concat(item, ": any"); })
+            .join('\n'), refs
+            .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })
+            .join('\n'), !component.hooks.onMount
+            ? ''
+            : "ngOnInit() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onMount, {
+                replaceWith: 'this.',
+            }), "\n            }"), !component.hooks.onUnMount
+            ? ''
+            : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onUnMount, {
+                replaceWith: 'this.',
+            }), "\n            }"), dataString);
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        }
+        if (options.prettier !== false) {
+            str = tryFormat(str, 'typescript');
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        }
+        return str;
+    };
 };
 exports.componentToAngular = componentToAngular;
 var tryFormat = function (str, parser) {
     try {
-        return standalone_1.format(str, {
+        return (0, standalone_1.format)(str, {
             parser: parser,
             plugins: [
                 // To support running in browsers

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

@@ -1,14 +1,14 @@
-import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
 import { BuilderElement } from '@builder.io/sdk';
-export declare type ToBuilderOptions = {
+import { TranspilerArgs } from '../types/config';
+export interface ToBuilderOptions {
     includeIds?: boolean;
-};
+}
 declare type InternalOptions = {
     skipMapper?: boolean;
 };
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;
-export declare const componentToBuilder: (componentJson: MitosisComponent, options?: ToBuilderOptions) => {
+export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component, }: TranspilerArgs) => {
     data: {
         httpRequests: any;
         jsCode: string;

package/dist/src/generators/builder.js

@@ -34,7 +34,7 @@ var builder_1 = require("../parsers/builder");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var traverse_1 = __importDefault(require("traverse"));
 var omitMetaProperties = function (obj) {
-    return lodash_1.omitBy(obj, function (_value, key) { return key.startsWith('$'); });
+    return (0, lodash_1.omitBy)(obj, function (_value, key) { return key.startsWith('$'); });
 };
 var builderBlockPrefixes = ['Amp', 'Core', 'Builder', 'Raw', 'Form'];
 var mapComponentName = function (name) {
@@ -45,8 +45,8 @@ var mapComponentName = function (name) {
         var prefix = builderBlockPrefixes_1[_i];
         if (name.startsWith(prefix)) {
             var suffix = name.replace(prefix, '');
-            if (is_upper_case_1.isUpperCase(suffix[0])) {
-                return prefix + ":" + name.replace(prefix, '');
+            if ((0, is_upper_case_1.isUpperCase)(suffix[0])) {
+                return "".concat(prefix, ":").concat(name.replace(prefix, ''));
             }
         }
     }
@@ -61,7 +61,7 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
                 json5_1.default.parse(node.bindings.symbol)) ||
                 {};
             if (child) {
-                lodash_1.set(symbolOptions, 'content.data.blocks', child.children.map(function (item) { return exports.blockToBuilder(item, options); }));
+                (0, lodash_1.set)(symbolOptions, 'content.data.blocks', child.children.map(function (item) { return (0, exports.blockToBuilder)(item, options); }));
             }
             return el({
                 component: {
@@ -74,15 +74,14 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
             }, options);
         },
     })), { Columns: function (node, options) {
-        var block = exports.blockToBuilder(node, options, { skipMapper: true });
+        var block = (0, exports.blockToBuilder)(node, options, { skipMapper: true });
         var columns = block.children.map(function (item) { return ({
             blocks: item.children,
         }); });
         block.component.options.columns = columns;
         block.children = [];
         return block;
-    },
-    For: function (node, options) {
+    }, For: function (node, options) {
         return el({
             component: {
                 name: 'Core:Fragment',
@@ -93,10 +92,9 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
             },
             children: node.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-                .map(function (node) { return exports.blockToBuilder(node, options); }),
+                .map(function (node) { return (0, exports.blockToBuilder)(node, options); }),
         }, options);
-    },
-    Show: function (node, options) {
+    }, Show: function (node, options) {
         return el({
             // TODO: the reverse mapping for this
             component: {
@@ -107,7 +105,7 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
             },
             children: node.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-                .map(function (node) { return exports.blockToBuilder(node, options); }),
+                .map(function (node) { return (0, exports.blockToBuilder)(node, options); }),
         }, options);
     } });
 var el = function (options, toBuilderOptions) { return (__assign(__assign({ '@type': '@builder.io/sdk:Element' }, (toBuilderOptions.includeIds && {
@@ -119,7 +117,7 @@ var el = function (options, toBuilderOptions) { return (__assign(__assign({ '@ty
 function tryFormat(code) {
     var str = code;
     try {
-        str = standalone_1.format(str, {
+        str = (0, standalone_1.format)(str, {
             parser: 'babel',
             plugins: [
                 require('prettier/parser-babel'), // To support running in browsers
@@ -158,14 +156,14 @@ var blockToBuilder = function (json, options, _internalOptions) {
             },
         }, options);
     }
-    var thisIsComponent = is_component_1.isComponent(json);
+    var thisIsComponent = (0, is_component_1.isComponent)(json);
     var bindings = json.bindings;
     var actions = {};
     for (var key in bindings) {
         var eventBindingKeyRegex = /^on([A-Z])/;
         var firstCharMatchForEventBindingKey = (_b = key.match(eventBindingKeyRegex)) === null || _b === void 0 ? void 0 : _b[1];
         if (firstCharMatchForEventBindingKey) {
-            actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] = remove_surrounding_block_1.removeSurroundingBlock(bindings[key]);
+            actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] = (0, remove_surrounding_block_1.removeSurroundingBlock)(bindings[key]);
             delete bindings[key];
         }
     }
@@ -177,12 +175,12 @@ var blockToBuilder = function (json, options, _internalOptions) {
                 return "continue";
             }
             var value = bindings[key];
-            var parsed = lodash_1.attempt(function () { return json5_1.default.parse(value); });
+            var parsed = (0, lodash_1.attempt)(function () { return json5_1.default.parse(value); });
             if (!(parsed instanceof Error)) {
                 componentOptions[key] = parsed;
             }
             else {
-                builderBindings["component.options." + key] = bindings[key];
+                builderBindings["component.options.".concat(key)] = bindings[key];
             }
         };
         for (var key in bindings) {
@@ -213,7 +211,7 @@ var blockToBuilder = function (json, options, _internalOptions) {
     }
     if (thisIsComponent) {
         for (var key in json.bindings) {
-            bindings["component.options." + key] = json.bindings[key];
+            bindings["component.options.".concat(key)] = json.bindings[key];
         }
     }
     return el(__assign(__assign(__assign(__assign({ tagName: thisIsComponent ? undefined : json.name }, (hasCss && {
@@ -230,51 +228,53 @@ var blockToBuilder = function (json, options, _internalOptions) {
             ? undefined
             : omitMetaProperties(json.properties), bindings: thisIsComponent
             ? builderBindings
-            : lodash_1.omit(bindings, 'css'), actions: actions, children: json.children
+            : (0, lodash_1.omit)(bindings, 'css'), actions: actions, children: json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (child) { return exports.blockToBuilder(child, options); }) }), options);
+            .map(function (child) { return (0, exports.blockToBuilder)(child, options); }) }), options);
 };
 exports.blockToBuilder = blockToBuilder;
-var componentToBuilder = function (componentJson, options) {
-    var _a, _b;
+var componentToBuilder = function (options) {
     if (options === void 0) { options = {}; }
-    var hasState = Boolean(Object.keys(componentJson.state).length);
-    var result = fast_clone_1.fastClone({
-        data: {
-            httpRequests: (_b = (_a = componentJson === null || componentJson === void 0 ? void 0 : componentJson.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.httpRequests,
-            jsCode: tryFormat(dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ",
-                "\n\n        ", "\n      "])), !has_props_1.hasProps(componentJson) ? '' : "var props = state;", !hasState
-                ? ''
-                : "Object.assign(state, " + get_state_object_string_1.getStateObjectStringFromComponent(componentJson) + ");", !componentJson.hooks.onMount ? '' : componentJson.hooks.onMount)),
-            tsCode: tryFormat(dedent_1.default(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ",
-                "\n\n        ",
-                "\n      "])), !has_props_1.hasProps(componentJson) ? '' : "var props = state;", !hasState
-                ? ''
-                : "useState(" + get_state_object_string_1.getStateObjectStringFromComponent(componentJson) + ");", !componentJson.hooks.onMount
-                ? ''
-                : "onMount(() => {\n                " + componentJson.hooks.onMount + "\n              })")),
-            blocks: componentJson.children
-                .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-                .map(function (child) { return exports.blockToBuilder(child, options); }),
-        },
-    });
-    var subComponentMap = {};
-    for (var _i = 0, _c = componentJson.subComponents; _i < _c.length; _i++) {
-        var subComponent = _c[_i];
-        var name_1 = subComponent.name;
-        subComponentMap[name_1] = exports.componentToBuilder(subComponent, options);
-    }
-    traverse_1.default([result, subComponentMap]).forEach(function (el) {
-        var _a;
-        if (builder_1.isBuilderElement(el)) {
-            var value = subComponentMap[(_a = el.component) === null || _a === void 0 ? void 0 : _a.name];
-            if (value) {
-                console.log('applied?');
-                lodash_1.set(el, 'component.options.symbol.content', value);
-            }
+    return function (_a) {
+        var _b, _c;
+        var component = _a.component;
+        var hasState = Boolean(Object.keys(component.state).length);
+        var result = (0, fast_clone_1.fastClone)({
+            data: {
+                httpRequests: (_c = (_b = component === null || component === void 0 ? void 0 : component.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.httpRequests,
+                jsCode: tryFormat((0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState
+                    ? ''
+                    : "Object.assign(state, ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !component.hooks.onMount ? '' : component.hooks.onMount)),
+                tsCode: tryFormat((0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState
+                    ? ''
+                    : "useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !component.hooks.onMount
+                    ? ''
+                    : "onMount(() => {\n                ".concat(component.hooks.onMount, "\n              })"))),
+                blocks: component.children
+                    .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+                    .map(function (child) { return (0, exports.blockToBuilder)(child, options); }),
+            },
+        });
+        var subComponentMap = {};
+        for (var _i = 0, _d = component.subComponents; _i < _d.length; _i++) {
+            var subComponent = _d[_i];
+            var name_1 = subComponent.name;
+            subComponentMap[name_1] = (0, exports.componentToBuilder)(options)({
+                component: subComponent,
+            });
         }
-    });
-    return result;
+        (0, traverse_1.default)([result, subComponentMap]).forEach(function (el) {
+            var _a;
+            if ((0, builder_1.isBuilderElement)(el)) {
+                var value = subComponentMap[(_a = el.component) === null || _a === void 0 ? void 0 : _a.name];
+                if (value) {
+                    console.log('applied?');
+                    (0, lodash_1.set)(el, 'component.options.symbol.content', value);
+                }
+            }
+        });
+        return result;
+    };
 };
 exports.componentToBuilder = componentToBuilder;
 var templateObject_1, templateObject_2;

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

@@ -2,5 +2,7 @@ import { MitosisContext } from '../../types/mitosis-context';
 declare type ContextToReactOptions = {
     format?: boolean;
 };
-export declare function contextToReact(context: MitosisContext, options?: ContextToReactOptions): string;
+export declare const contextToReact: (options?: ContextToReactOptions) => ({ context, }: {
+    context: MitosisContext;
+}) => string;
 export {};