@builder.io/mitosis 0.0.45 → 0.0.46

package/dist/src/generators/react-native.js

@@ -25,12 +25,12 @@ var stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
 var collectReactNativeStyles = function (json) {
     var styleMap = {};
     var componentIndexes = {};
-    traverse_1.default(json).forEach(function (item) {
-        if (is_mitosis_node_1.isMitosisNode(item)) {
+    (0, traverse_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             if (typeof item.bindings.css === 'string') {
                 var value = json5_1.default.parse(item.bindings.css);
                 delete item.bindings.css;
-                if (!lodash_1.size(value)) {
+                if (!(0, lodash_1.size)(value)) {
                     return;
                 }
                 // Style properties like `"20px"` need to be numbers like `20` for react native
@@ -44,15 +44,15 @@ var collectReactNativeStyles = function (json) {
                     }
                     if (stylePropertiesThatMustBeNumber.has(key) &&
                         typeof value[key] !== 'number') {
-                        console.warn("Style key " + key + " must be a number, but had value `" + value[key] + "`");
+                        console.warn("Style key ".concat(key, " must be a number, but had value `").concat(value[key], "`"));
                         delete value[key];
                     }
                 }
-                var componentName = lodash_1.camelCase(item.name || 'view');
+                var componentName = (0, lodash_1.camelCase)(item.name || 'view');
                 var index = (componentIndexes[componentName] =
                     (componentIndexes[componentName] || 0) + 1);
-                var className = "" + componentName + index;
-                item.bindings.style = "styles." + className;
+                var className = "".concat(componentName).concat(index);
+                item.bindings.style = "styles.".concat(className);
                 styleMap[className] = value;
             }
         }
@@ -60,22 +60,25 @@ var collectReactNativeStyles = function (json) {
     return styleMap;
 };
 exports.collectReactNativeStyles = collectReactNativeStyles;
-var componentToReactNative = function (componentJson, options) {
+var componentToReactNative = function (options) {
     if (options === void 0) { options = {}; }
-    var json = fast_clone_1.fastClone(componentJson);
-    traverse_1.default(json).forEach(function (node) {
-        var _a, _b, _c;
-        if (is_mitosis_node_1.isMitosisNode(node)) {
-            // TODO: handle TextInput, Image, etc
-            if (node.name.toLowerCase() === node.name) {
-                node.name = 'View';
-            }
-            if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
-                ((_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.length)) {
-                node.name = 'Text';
+    return function (_a) {
+        var component = _a.component, path = _a.path;
+        var json = (0, fast_clone_1.fastClone)(component);
+        (0, traverse_1.default)(json).forEach(function (node) {
+            var _a, _b, _c;
+            if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                // TODO: handle TextInput, Image, etc
+                if (node.name.toLowerCase() === node.name) {
+                    node.name = 'View';
+                }
+                if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
+                    ((_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.length)) {
+                    node.name = 'Text';
+                }
             }
-        }
-    });
-    return react_1.componentToReact(json, __assign(__assign({}, options), { stylesType: options.stylesType || 'react-native', type: 'native' }));
+        });
+        return (0, react_1.componentToReact)(__assign(__assign({}, options), { stylesType: options.stylesType || 'react-native', type: 'native' }))({ component: json, path: path });
+    };
 };
 exports.componentToReactNative = componentToReactNative;

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

@@ -1,14 +1,10 @@
-import { Plugin } from '../modules/plugins';
-import { MitosisComponent } from '../types/mitosis-component';
+import { BaseTranspilerOptions, Transpiler } from '../types/config';
 import { MitosisNode } from '../types/mitosis-node';
-declare type ToReactOptions = {
-    prettier?: boolean;
+export interface ToReactOptions extends BaseTranspilerOptions {
     stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native';
     stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
     format?: 'lite' | 'safe';
     type?: 'dom' | 'native';
-    plugins?: Plugin[];
-};
+}
 export declare const blockToReact: (json: MitosisNode, options: ToReactOptions) => string;
-export declare const componentToReact: (componentJson: MitosisComponent, reactOptions?: ToReactOptions) => string;
-export {};
+export declare const componentToReact: (reactOptions?: ToReactOptions) => Transpiler;

package/dist/src/generators/react.js

@@ -54,23 +54,23 @@ var wrapInFragment = function (json) {
 var NODE_MAPPERS = {
     Fragment: function (json, options) {
         var wrap = wrapInFragment(json);
-        return "" + (wrap ? '<>' : '') + json.children
-            .map(function (item) { return exports.blockToReact(item, options); })
-            .join('\n') + (wrap ? '</>' : '');
+        return "".concat(wrap ? '<>' : '').concat(json.children
+            .map(function (item) { return (0, exports.blockToReact)(item, options); })
+            .join('\n')).concat(wrap ? '</>' : '');
     },
     For: function (json, options) {
         var wrap = wrapInFragment(json);
-        return "{" + processBinding(json.bindings.each, options) + "?.map(" + json.properties._forName + " => (\n      " + (wrap ? '<>' : '') + json.children
+        return "{".concat(processBinding(json.bindings.each, options), "?.map(").concat(json.properties._forName, " => (\n      ").concat(wrap ? '<>' : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return exports.blockToReact(item, options); })
-            .join('\n') + (wrap ? '</>' : '') + "\n    ))}";
+            .map(function (item) { return (0, exports.blockToReact)(item, options); })
+            .join('\n')).concat(wrap ? '</>' : '', "\n    ))}");
     },
     Show: function (json, options) {
         var wrap = wrapInFragment(json);
-        return "{" + processBinding(json.bindings.when, options) + " ? (\n      " + (wrap ? '<>' : '') + json.children
+        return "{".concat(processBinding(json.bindings.when, options), " ? (\n      ").concat(wrap ? '<>' : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return exports.blockToReact(item, options); })
-            .join('\n') + (wrap ? '</>' : '') + "\n    ) : " + (!json.meta.else ? 'null' : exports.blockToReact(json.meta.else, options)) + "}";
+            .map(function (item) { return (0, exports.blockToReact)(item, options); })
+            .join('\n')).concat(wrap ? '</>' : '', "\n    ) : ").concat(!json.meta.else ? 'null' : (0, exports.blockToReact)(json.meta.else, options), "}");
     },
 };
 // TODO: Maybe in the future allow defining `string | function` as values
@@ -89,42 +89,42 @@ var blockToReact = function (json, options) {
     if (json.properties._text) {
         var text = json.properties._text;
         if (options.type === 'native' && text.trim().length) {
-            return "<Text>" + text + "</Text>";
+            return "<Text>".concat(text, "</Text>");
         }
         return text;
     }
     if (json.bindings._text) {
         var processed = processBinding(json.bindings._text, options);
         if (options.type === 'native') {
-            return "<Text>{" + processed + "}</Text>";
+            return "<Text>{".concat(processed, "}</Text>");
         }
-        return "{" + processed + "}";
+        return "{".concat(processed, "}");
     }
     var str = '';
-    str += "<" + json.name + " ";
+    str += "<".concat(json.name, " ");
     if (json.bindings._spread) {
-        str += " {...(" + processBinding(json.bindings._spread, options) + ")} ";
+        str += " {...(".concat(processBinding(json.bindings._spread, options), ")} ");
     }
     for (var key in json.properties) {
         var value = (json.properties[key] || '')
             .replace(/"/g, '&quot;')
             .replace(/\n/g, '\\n');
         if (key === 'class') {
-            str += " className=\"" + value + "\" ";
+            str += " className=\"".concat(value, "\" ");
         }
         else if (BINDING_MAPPERS[key]) {
             var mapper = BINDING_MAPPERS[key];
             if (typeof mapper === 'function') {
                 var _a = mapper(key, value), newKey = _a[0], newValue = _a[1];
-                str += " " + newKey + "={" + newValue + "} ";
+                str += " ".concat(newKey, "={").concat(newValue, "} ");
             }
             else {
-                str += " " + BINDING_MAPPERS[key] + "=\"" + value + "\" ";
+                str += " ".concat(BINDING_MAPPERS[key], "=\"").concat(value, "\" ");
             }
         }
         else {
-            if (is_valid_attribute_name_1.isValidAttributeName(key)) {
-                str += " " + key + "=\"" + value.replace(/"/g, '&quot;') + "\" ";
+            if ((0, is_valid_attribute_name_1.isValidAttributeName)(key)) {
+                str += " ".concat(key, "=\"").concat(value.replace(/"/g, '&quot;'), "\" ");
             }
         }
     }
@@ -138,24 +138,24 @@ var blockToReact = function (json, options) {
         }
         var useBindingValue = processBinding(value, options);
         if (key.startsWith('on')) {
-            str += " " + key + "={event => " + updateStateSettersInCode(useBindingValue, options) + " } ";
+            str += " ".concat(key, "={event => ").concat(updateStateSettersInCode(useBindingValue, options), " } ");
         }
         else if (key === 'class') {
-            str += " className={" + useBindingValue + "} ";
+            str += " className={".concat(useBindingValue, "} ");
         }
         else if (BINDING_MAPPERS[key]) {
             var mapper = BINDING_MAPPERS[key];
             if (typeof mapper === 'function') {
                 var _b = mapper(key, useBindingValue), newKey = _b[0], newValue = _b[1];
-                str += " " + newKey + "={" + newValue + "} ";
+                str += " ".concat(newKey, "={").concat(newValue, "} ");
             }
             else {
-                str += " " + BINDING_MAPPERS[key] + "={" + useBindingValue + "} ";
+                str += " ".concat(BINDING_MAPPERS[key], "={").concat(useBindingValue, "} ");
             }
         }
         else {
-            if (is_valid_attribute_name_1.isValidAttributeName(key)) {
-                str += " " + key + "={" + useBindingValue + "} ";
+            if ((0, is_valid_attribute_name_1.isValidAttributeName)(key)) {
+                str += " ".concat(key, "={").concat(useBindingValue, "} ");
             }
         }
     }
@@ -169,17 +169,17 @@ var blockToReact = function (json, options) {
     }
     str += '>';
     if (json.children) {
-        str += json.children.map(function (item) { return exports.blockToReact(item, options); }).join('\n');
+        str += json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n');
     }
-    return str + ("</" + json.name + ">");
+    return str + "</".concat(json.name, ">");
 };
 exports.blockToReact = blockToReact;
 var getRefsString = function (json, refs) {
-    if (refs === void 0) { refs = get_refs_1.getRefs(json); }
+    if (refs === void 0) { refs = (0, get_refs_1.getRefs)(json); }
     var str = '';
     for (var _i = 0, _a = Array.from(refs); _i < _a.length; _i++) {
         var ref = _a[_i];
-        str += "\nconst " + ref + " = useRef();";
+        str += "\nconst ".concat(ref, " = useRef();");
     }
     return str;
 };
@@ -187,7 +187,7 @@ var processBinding = function (str, options) {
     if (options.stateType !== 'useState') {
         return str;
     }
-    return strip_state_and_props_refs_1.stripStateAndPropsRefs(str, {
+    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(str, {
         includeState: true,
         includeProps: false,
     });
@@ -205,19 +205,19 @@ var getUseStateCode = function (json, options) {
         if (typeof value === 'string') {
             if (value.startsWith(function_literal_prefix_1.functionLiteralPrefix)) {
                 var useValue = value.replace(function_literal_prefix_1.functionLiteralPrefix, '');
-                str += valueMapper(useValue) + " " + lineItemDelimiter;
+                str += "".concat(valueMapper(useValue), " ").concat(lineItemDelimiter);
             }
             else if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
                 var methodValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
                 var useValue = methodValue.replace(/^(get )?/, 'function ');
-                str += valueMapper(useValue) + " " + lineItemDelimiter;
+                str += "".concat(valueMapper(useValue), " ").concat(lineItemDelimiter);
             }
             else {
-                str += "const [" + key + ", set" + capitalize_1.capitalize(key) + "] " + keyValueDelimiter + " useState(() => (" + valueMapper(json5_1.default.stringify(value)) + "))" + lineItemDelimiter + " ";
+                str += "const [".concat(key, ", set").concat((0, capitalize_1.capitalize)(key), "] ").concat(keyValueDelimiter, " useState(() => (").concat(valueMapper(json5_1.default.stringify(value)), "))").concat(lineItemDelimiter, " ");
             }
         }
         else {
-            str += "const [" + key + ", set" + capitalize_1.capitalize(key) + "] " + keyValueDelimiter + " useState(() => (" + valueMapper(json5_1.default.stringify(value)) + "))" + lineItemDelimiter + " ";
+            str += "const [".concat(key, ", set").concat((0, capitalize_1.capitalize)(key), "] ").concat(keyValueDelimiter, " useState(() => (").concat(valueMapper(json5_1.default.stringify(value)), "))").concat(lineItemDelimiter, " ");
         }
     }
     return str;
@@ -226,8 +226,8 @@ var updateStateSetters = function (json, options) {
     if (options.stateType !== 'useState') {
         return;
     }
-    traverse_1.default(json).forEach(function (item) {
-        if (is_mitosis_node_1.isMitosisNode(item)) {
+    (0, traverse_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             for (var key in item.bindings) {
                 var value = item.bindings[key];
                 var newValue = updateStateSettersInCode(value, options);
@@ -242,9 +242,9 @@ function addProviderComponents(json, options) {
     for (var key in json.context.set) {
         var _a = json.context.set[key], name_1 = _a.name, value = _a.value;
         json.children = [
-            create_mitosis_node_1.createMitosisNode(__assign({ name: name_1 + ".Provider", children: json.children }, (value && {
+            (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: "".concat(name_1, ".Provider"), children: json.children }, (value && {
                 bindings: {
-                    value: get_state_object_string_1.getMemberObjectString(value),
+                    value: (0, get_state_object_string_1.getMemberObjectString)(value),
                 },
             }))),
         ];
@@ -254,7 +254,7 @@ var updateStateSettersInCode = function (value, options) {
     if (options.stateType !== 'useState') {
         return value;
     }
-    return babel_transform_1.babelTransformExpression(value, {
+    return (0, babel_transform_1.babelTransformExpression)(value, {
         AssignmentExpression: function (path) {
             var node = path.node;
             if (core_1.types.isMemberExpression(node.left)) {
@@ -263,7 +263,7 @@ var updateStateSettersInCode = function (value, options) {
                     if (node.left.object.name === 'state') {
                         // TODO: ultimately support other property access like strings
                         var propertyName = node.left.property.name;
-                        path.replaceWith(core_1.types.callExpression(core_1.types.identifier("set" + capitalize_1.capitalize(propertyName)), [node.right]));
+                        path.replaceWith(core_1.types.callExpression(core_1.types.identifier("set".concat((0, capitalize_1.capitalize)(propertyName))), [node.right]));
                     }
                 }
             }
@@ -273,7 +273,7 @@ var updateStateSettersInCode = function (value, options) {
 function getContextString(component, options) {
     var str = '';
     for (var key in component.context.get) {
-        str += "\n      const " + key + " = useContext(" + component.context.get[key].name + ");\n    ";
+        str += "\n      const ".concat(key, " = useContext(").concat(component.context.get[key].name, ");\n    ");
     }
     return str;
 }
@@ -284,59 +284,62 @@ function hasContext(component) {
 var getInitCode = function (json, options) {
     return processBinding(json.hooks.init || '', options);
 };
-var componentToReact = function (componentJson, reactOptions) {
+var componentToReact = function (reactOptions) {
     if (reactOptions === void 0) { reactOptions = {}; }
-    var json = fast_clone_1.fastClone(componentJson);
-    var options = __assign({ stateType: 'useState', stylesType: 'styled-jsx' }, reactOptions);
-    if (options.plugins) {
-        json = plugins_1.runPreJsonPlugins(json, options.plugins);
-    }
-    var str = _componentToReact(json, options);
-    str +=
-        '\n\n\n' +
-            json.subComponents
-                .map(function (item) { return _componentToReact(item, options, true); })
-                .join('\n\n\n');
-    if (options.plugins) {
-        str = plugins_1.runPreCodePlugins(str, options.plugins);
-    }
-    if (options.prettier !== false) {
-        try {
-            str = standalone_1.format(str, {
-                parser: 'typescript',
-                plugins: [
-                    require('prettier/parser-typescript'),
-                    require('prettier/parser-postcss'),
-                ],
-            })
-                // Remove spaces between imports
-                .replace(/;\n\nimport\s/g, ';\nimport ');
+    return function (_a) {
+        var component = _a.component;
+        var json = (0, fast_clone_1.fastClone)(component);
+        var options = __assign({ stateType: 'useState', stylesType: 'styled-jsx' }, reactOptions);
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
-        catch (err) {
-            console.error('Format error for file:', str, JSON.stringify(json, null, 2));
-            throw err;
+        var str = _componentToReact(json, options);
+        str +=
+            '\n\n\n' +
+                json.subComponents
+                    .map(function (item) { return _componentToReact(item, options, true); })
+                    .join('\n\n\n');
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }
-    }
-    if (options.plugins) {
-        str = plugins_1.runPostCodePlugins(str, options.plugins);
-    }
-    return str;
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [
+                        require('prettier/parser-typescript'),
+                        require('prettier/parser-postcss'),
+                    ],
+                })
+                    // Remove spaces between imports
+                    .replace(/;\n\nimport\s/g, ';\nimport ');
+            }
+            catch (err) {
+                console.error('Format error for file:', str, JSON.stringify(json, null, 2));
+                throw err;
+            }
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        }
+        return str;
+    };
 };
 exports.componentToReact = componentToReact;
 var _componentToReact = function (json, options, isSubComponent) {
     if (isSubComponent === void 0) { isSubComponent = false; }
-    process_http_requests_1.processHttpRequests(json);
-    handle_missing_state_1.handleMissingState(json);
-    process_tag_references_1.processTagReferences(json);
+    (0, process_http_requests_1.processHttpRequests)(json);
+    (0, handle_missing_state_1.handleMissingState)(json);
+    (0, process_tag_references_1.processTagReferences)(json);
     addProviderComponents(json, options);
-    var componentHasStyles = collect_styles_1.hasStyles(json);
+    var componentHasStyles = (0, collect_styles_1.hasStyles)(json);
     if (options.stateType === 'useState') {
-        getters_to_functions_1.gettersToFunctions(json);
+        (0, getters_to_functions_1.gettersToFunctions)(json);
         updateStateSetters(json, options);
     }
-    var refs = get_refs_1.getRefs(json);
+    var refs = (0, get_refs_1.getRefs)(json);
     var hasState = Boolean(Object.keys(json.state).length);
-    map_refs_1.mapRefs(json, function (refName) { return refName + ".current"; });
+    (0, map_refs_1.mapRefs)(json, function (refName) { return "".concat(refName, ".current"); });
     var stylesType = options.stylesType || 'emotion';
     var stateType = options.stateType || 'mobx';
     if (stateType === 'builder') {
@@ -345,14 +348,14 @@ var _componentToReact = function (json, options, isSubComponent) {
     }
     var useStateCode = stateType === 'useState' && getUseStateCode(json, options);
     if (options.plugins) {
-        json = plugins_1.runPostJsonPlugins(json, options.plugins);
+        json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
     }
-    var css = stylesType === 'styled-jsx' && collect_styles_1.collectCss(json, { classProperty: 'class' });
+    var css = stylesType === 'styled-jsx' && (0, collect_styles_1.collectCss)(json, { classProperty: 'class' });
     var styledComponentsCode = stylesType === 'styled-components' &&
         componentHasStyles &&
-        collect_styles_1.collectStyledComponents(json);
+        (0, collect_styles_1.collectStyledComponents)(json);
     if (options.format !== 'lite') {
-        strip_meta_properties_1.stripMetaProperties(json);
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
     }
     var reactLibImports = new Set();
     if (useStateCode && useStateCode.includes('useState')) {
@@ -370,23 +373,11 @@ var _componentToReact = function (json, options, isSubComponent) {
     var wrap = wrapInFragment(json) || (componentHasStyles && stylesType === 'styled-jsx');
     var nativeStyles = stylesType === 'react-native' &&
         componentHasStyles &&
-        react_native_1.collectReactNativeStyles(json);
-    var str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }\n\n    ", "\n\n    ", "\n  "], ["\n  ",
-        "\n  ", "\n  ",
-        "\n  ",
-        "\n    ",
-        "\n    ",
-        "\n    ",
-        "\n    ", "\n\n    ", "function ",
-        "(props) {\n      ",
-        "\n      ", "\n      ", "\n      ", "\n\n      ",
-        "\n\n      ",
-        "\n\n      return (\n        ", "\n        ", "\n        ",
-        "\n        ", "\n      );\n    }\n\n    ",
-        "\n\n    ", "\n  "])), options.type !== 'native'
+        (0, react_native_1.collectReactNativeStyles)(json);
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }\n\n    ", "\n\n    ", "\n  "])), options.type !== 'native'
         ? ''
         : "\n  import * as React from 'react';\n  import { View, StyleSheet, Image, Text } from 'react-native';\n  ", styledComponentsCode ? "import styled from 'styled-components';\n" : '', reactLibImports.size
-        ? "import { " + Array.from(reactLibImports).join(', ') + " } from 'react'"
+        ? "import { ".concat(Array.from(reactLibImports).join(', '), " } from 'react'")
         : '', componentHasStyles && stylesType === 'emotion' && options.format !== 'lite'
         ? "/** @jsx jsx */\n    import { jsx } from '@emotion/react'".trim()
         : '', hasState && stateType === 'valtio'
@@ -395,27 +386,27 @@ var _componentToReact = function (json, options, isSubComponent) {
         ? "import { useMutable } from 'react-solid-state';"
         : '', stateType === 'mobx' && hasState
         ? "import { useLocalObservable } from 'mobx-react-lite';"
-        : '', render_imports_1.renderPreComponent(json), isSubComponent ? '' : 'export default ', json.name ||
+        : '', (0, render_imports_1.renderPreComponent)(json), isSubComponent ? '' : 'export default ', json.name ||
         'MyComponent', hasState
         ? stateType === 'mobx'
-            ? "const state = useLocalObservable(() => (" + get_state_object_string_1.getStateObjectStringFromComponent(json) + "));"
+            ? "const state = useLocalObservable(() => (".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), "));")
             : stateType === 'useState'
                 ? useStateCode
                 : stateType === 'solid'
-                    ? "const state = useMutable(" + get_state_object_string_1.getStateObjectStringFromComponent(json) + ");"
+                    ? "const state = useMutable(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
                     : stateType === 'builder'
-                        ? "var state = useBuilderState(" + get_state_object_string_1.getStateObjectStringFromComponent(json) + ");"
-                        : "const state = useLocalProxy(" + get_state_object_string_1.getStateObjectStringFromComponent(json) + ");"
+                        ? "var state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
+                        : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
         : '', getContextString(json, options), getRefsString(json), getInitCode(json, options), json.hooks.onMount
-        ? "useEffect(() => {\n            " + processBinding(updateStateSettersInCode(json.hooks.onMount, options), options) + "\n          }, [])"
+        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onMount, options), options), "\n          }, [])")
         : '', json.hooks.onUnMount
-        ? "useEffect(() => {\n            " + processBinding(updateStateSettersInCode(json.hooks.onUnMount, options), options) + "\n          }, [])"
-        : '', wrap ? '<>' : '', json.children.map(function (item) { return exports.blockToReact(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
-        ? "<style jsx>{`" + css + "`}</style>"
+        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onUnMount, options), options), "\n          }, [])")
+        : '', wrap ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
+        ? "<style jsx>{`".concat(css, "`}</style>")
         : '', wrap ? '</>' : '', !nativeStyles
         ? ''
-        : "\n      const styles = StyleSheet.create(" + json5_1.default.stringify(nativeStyles) + ");\n    ", styledComponentsCode ? styledComponentsCode : '');
-    str = replace_new_lines_in_strings_1.stripNewlinesInStrings(str);
+        : "\n      const styles = StyleSheet.create(".concat(json5_1.default.stringify(nativeStyles), ");\n    "), styledComponentsCode ? styledComponentsCode : '');
+    str = (0, replace_new_lines_in_strings_1.stripNewlinesInStrings)(str);
     return str;
 };
 var templateObject_1;

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

@@ -1,8 +1,4 @@
-import { MitosisComponent } from '../types/mitosis-component';
-import { Plugin } from '../modules/plugins';
-declare type ToSolidOptions = {
-    prettier?: boolean;
-    plugins?: Plugin[];
-};
-export declare const componentToSolid: (componentJson: MitosisComponent, options?: ToSolidOptions) => string;
-export {};
+import { BaseTranspilerOptions, Transpiler } from '../types/config';
+export interface ToSolidOptions extends BaseTranspilerOptions {
+}
+export declare const componentToSolid: (options?: ToSolidOptions) => Transpiler;