@builder.io/mitosis 0.0.45 → 0.0.46

package/dist/src/generators/swift-ui.js

@@ -20,32 +20,32 @@ var is_children_1 = __importDefault(require("../helpers/is-children"));
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var scrolls = function (json) {
     var _a;
-    return ((_a = get_styles_1.getStyles(json)) === null || _a === void 0 ? void 0 : _a.overflow) === 'auto';
+    return ((_a = (0, get_styles_1.getStyles)(json)) === null || _a === void 0 ? void 0 : _a.overflow) === 'auto';
 };
 var mappers = {
     Fragment: function (json, options) {
-        return "" + json.children
+        return "".concat(json.children
             .map(function (item) { return blockToSwift(item, options); })
-            .join('\n');
+            .join('\n'));
     },
     link: function () { return ''; },
     Image: function (json, options) {
-        return ("Image(" + (processBinding(json.bindings.image, options) ||
-            "\"" + json.properties.image + "\"") + ")" +
+        return ("Image(".concat(processBinding(json.bindings.image, options) ||
+            "\"".concat(json.properties.image, "\""), ")") +
             getStyleString(json, options) +
             getActionsString(json, options));
     },
     input: function (json, options) {
         var name = json.properties.$name;
-        var str = "TextField(" + (json.bindings.placeholder
+        var str = "TextField(".concat(json.bindings.placeholder
             ? processBinding(json.bindings.placeholder, options)
             : json.properties.placeholder
                 ? JSON.stringify(json.bindings.placeholder)
-                : '""') + ", text: $" + name + ")" +
+                : '""', ", text: $").concat(name, ")") +
             getStyleString(json, options) +
             getActionsString(json, options);
         if (json.bindings.onChange) {
-            str += "\n        .onChange(of: " + name + ") { " + name + " in \n          " + processBinding(wrapAction("var event = { target: { value: \"\\(" + name + ")\" } };\n              " + json.bindings.onChange), options) + " \n        }";
+            str += "\n        .onChange(of: ".concat(name, ") { ").concat(name, " in \n          ").concat(processBinding(wrapAction("var event = { target: { value: \"\\(".concat(name, ")\" } };\n              ").concat(json.bindings.onChange)), options), " \n        }");
         }
         return str;
     },
@@ -57,21 +57,21 @@ var blockToSwift = function (json, options) {
     // TODO: Add support for `{props.children}` bindings
     // Right now we return an empty string because the generated code
     // is very likely wrong.
-    if (is_children_1.default(json)) {
+    if ((0, is_children_1.default)(json)) {
         return '/* `props.children` is not supported yet for SwiftUI */';
     }
     if (json.properties._text) {
         if (!json.properties._text.trim().length) {
             return '';
         }
-        return "Text(\"" + json.properties._text.trim().replace(/\s+/g, ' ') + "\")";
+        return "Text(\"".concat(json.properties._text.trim().replace(/\s+/g, ' '), "\")");
     }
     if (json.bindings._text) {
-        return "Text(" + processBinding(json.bindings._text, options) + ".toString())";
+        return "Text(".concat(processBinding(json.bindings._text, options), ".toString())");
     }
     var str = '';
     var children = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
-    var style = get_styles_1.getStyles(json);
+    var style = (0, get_styles_1.getStyles)(json);
     // TODO: do as preprocess step and do more mappings of dom attributes to special
     // Image, TextField, etc component props
     var name = json.name === 'input'
@@ -91,15 +91,15 @@ var blockToSwift = function (json, options) {
         json.properties._ = placeholder || '';
     }
     if (json.name === 'For') {
-        str += "ForEach(" + processBinding(json.bindings.each, options) + ", id: \\.self) { " + json.properties._forName + " in " + children
+        str += "ForEach(".concat(processBinding(json.bindings.each, options), ", id: \\.self) { ").concat(json.properties._forName, " in ").concat(children
             .map(function (item) { return blockToSwift(item, options); })
-            .join('\n') + " }";
+            .join('\n'), " }");
     }
     else if (json.name === 'Show') {
-        str += "if " + processBinding(json.bindings.when, options) + " {\n      " + children.map(function (item) { return blockToSwift(item, options); }).join('\n') + "\n    }";
+        str += "if ".concat(processBinding(json.bindings.when, options), " {\n      ").concat(children.map(function (item) { return blockToSwift(item, options); }).join('\n'), "\n    }");
     }
     else {
-        str += name + "(";
+        str += "".concat(name, "(");
         for (var key in json.properties) {
             if (key === 'class' || key === 'className') {
                 continue;
@@ -107,7 +107,7 @@ var blockToSwift = function (json, options) {
             // TODO: binding mappings
             // const value = json.properties[key];
             // str += ` ${key}: "${(value as string).replace(/"/g, '"')}", `;
-            console.warn("Unsupported property \"" + key + "\"");
+            console.warn("Unsupported property \"".concat(key, "\""));
         }
         for (var key in json.bindings) {
             if (
@@ -125,11 +125,11 @@ var blockToSwift = function (json, options) {
                 }
                 else {
                     // TODO: other event mappings
-                    console.warn("Unsupported event binding \"" + key + "\"");
+                    console.warn("Unsupported event binding \"".concat(key, "\""));
                 }
             }
             else {
-                console.warn("Unsupported binding \"" + key + "\"");
+                console.warn("Unsupported binding \"".concat(key, "\""));
                 // TODO: need binding mappings
                 // str += ` ${key}: ${processBinding(value, options)}, `;
             }
@@ -147,52 +147,52 @@ var blockToSwift = function (json, options) {
     }
     return str;
 };
-var wrapAction = function (str) { return "(() => { " + str + " })()"; };
+var wrapAction = function (str) { return "(() => { ".concat(str, " })()"); };
 function getActionsString(json, options) {
     var str = '';
     if (json.bindings.onClick) {
-        str += "\n.onTapGesture {\n      " + processBinding(wrapAction(json.bindings.onClick), options) + "\n    }";
+        str += "\n.onTapGesture {\n      ".concat(processBinding(wrapAction(json.bindings.onClick), options), "\n    }");
     }
     return str;
 }
 function getStyleString(node, options) {
-    var style = get_styles_1.getStyles(node);
+    var style = (0, get_styles_1.getStyles)(node);
     var str = '';
     for (var key in style) {
         var useKey = key;
         var rawValue = style[key];
-        var value = "\"" + rawValue + "\"";
+        var value = "\"".concat(rawValue, "\"");
         if (['padding', 'margin'].includes(key)) {
             // TODO: throw error if calc()
             value = parseFloat(rawValue);
-            str += "\n." + useKey + "(" + value + ")";
+            str += "\n.".concat(useKey, "(").concat(value, ")");
         }
         else if (key === 'color') {
             useKey = 'foregroundColor';
             // TODO: convert to RBG and use Color(red: ..., ....)
         }
         else {
-            console.warn("Styling key \"" + key + "\" is not supported");
+            console.warn("Styling key \"".concat(key, "\" is not supported"));
         }
     }
     return str;
 }
 function getJsSource(json, options) {
-    var str = "const state = new Proxy(" + get_state_object_string_1.getStateObjectStringFromComponent(json) + ", {\n    set: (target, key, value) => {\n      const returnVal = Reflect.set(target, key, value);\n      update();\n      return returnVal;\n    }\n  });";
+    var str = "const state = new Proxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ", {\n    set: (target, key, value) => {\n      const returnVal = Reflect.set(target, key, value);\n      update();\n      return returnVal;\n    }\n  });");
     if (options.prettier === false) {
         return str.trim();
     }
     else {
-        return try_prettier_format_1.tryPrettierFormat(str, 'typescript').trim();
+        return (0, try_prettier_format_1.tryPrettierFormat)(str, 'typescript').trim();
     }
 }
 var processBinding = function (str, options) {
     // Use triple quotes for multiline strings or strings including '"'
     if (str.includes('\n') || str.includes('"')) {
-        return "eval(code: \"\"\"\n      " + str + "\n      \"\"\")";
+        return "eval(code: \"\"\"\n      ".concat(str, "\n      \"\"\")");
     }
     // Use double quotes for simple strings
-    return "eval(code: \"" + str + "\")";
+    return "eval(code: \"".concat(str, "\")");
 };
 function componentHasDynamicData(json) {
     var hasState = Object.keys(json.state).length > 0;
@@ -200,8 +200,8 @@ function componentHasDynamicData(json) {
         return true;
     }
     var found = false;
-    traverse_1.default(json).forEach(function (node) {
-        if (is_mitosis_node_1.isMitosisNode(node)) {
+    (0, traverse_1.default)(json).forEach(function (node) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
             if (Object.keys(node.bindings).filter(function (item) { return item !== 'css'; }).length) {
                 found = true;
                 this.stop();
@@ -213,14 +213,14 @@ function componentHasDynamicData(json) {
 function mapDataForSwiftCompatability(json) {
     var inputIndex = 0;
     json.meta.inputNames = json.meta.inputNames || [];
-    traverse_1.default(json).forEach(function (node) {
-        if (is_mitosis_node_1.isMitosisNode(node)) {
+    (0, traverse_1.default)(json).forEach(function (node) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
             if (node.name === 'input') {
                 if (!Object.keys(node.bindings).filter(function (item) { return item !== 'css'; }).length) {
                     return;
                 }
                 if (!node.properties.$name) {
-                    node.properties.$name = "input" + ++inputIndex;
+                    node.properties.$name = "input".concat(++inputIndex);
                 }
                 json.meta.inputNames[node.properties.$name] = node.bindings.value || '';
             }
@@ -234,39 +234,39 @@ function getInputBindings(json, options) {
         return str;
     }
     for (var item in inputNames) {
-        str += "\n@State private var " + item + ": String = \"\"";
+        str += "\n@State private var ".concat(item, ": String = \"\"");
     }
     return str;
 }
-var componentToSwift = function (componentJson, options) {
+var componentToSwift = function (options) {
     if (options === void 0) { options = {}; }
-    var json = fast_clone_1.fastClone(componentJson);
-    mapDataForSwiftCompatability(json);
-    var hasDyanmicData = componentHasDynamicData(json);
-    var children = json.children
-        .map(function (item) { return blockToSwift(item, options); })
-        .join('\n');
-    var hasInputNames = Object.keys(json.meta.inputNames || {}).length > 0;
-    var str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import SwiftUI\n    ", "\n\n    struct ", ": View {\n      ", "\n\n      var body: some View {\n        VStack {\n          ", "\n        }", "\n      }\n    }\n  "], ["\n    import SwiftUI\n    ",
-        "\n\n    struct ", ": View {\n      ",
-        "\n\n      var body: some View {\n        VStack {\n          ", "\n        }",
-        "\n      }\n    }\n  "])), !hasDyanmicData
-        ? ''
-        : "import JavaScriptCore\n    \n    final class UpdateTracker: ObservableObject {\n        @Published var value = 0;\n    \n        func update() {\n            value += 1\n        }\n    }\n    ", componentJson.name, !hasDyanmicData
-        ? ''
-        : ("\n        @ObservedObject var updateTracker = UpdateTracker()\n        private var jsContext = JSContext()\n        " + getInputBindings(json, options) + "\n\n        func eval(code: String) -> JSValue! {\n          return jsContext?.evaluateScript(code)\n        }\n\n        " + (!hasInputNames
+    return function (_a) {
+        var component = _a.component;
+        var json = (0, fast_clone_1.fastClone)(component);
+        mapDataForSwiftCompatability(json);
+        var hasDyanmicData = componentHasDynamicData(json);
+        var children = json.children
+            .map(function (item) { return blockToSwift(item, options); })
+            .join('\n');
+        var hasInputNames = Object.keys(json.meta.inputNames || {}).length > 0;
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import SwiftUI\n    ", "\n\n    struct ", ": View {\n      ", "\n\n      var body: some View {\n        VStack {\n          ", "\n        }", "\n      }\n    }\n  "], ["\n    import SwiftUI\n    ", "\n\n    struct ", ": View {\n      ", "\n\n      var body: some View {\n        VStack {\n          ", "\n        }", "\n      }\n    }\n  "])), !hasDyanmicData
             ? ''
-            : "\n        func setComputedState() {\n          " + Object.keys(json.meta.inputNames || {})
-                .map(function (item) {
-                return item + " = " + processBinding(json.meta.inputNames[item], options) + ".toString()!";
-            })
-                .join('\n') + "\n        }") + "\n\n        init() {\n          let jsSource = \"\"\"\n              " + getJsSource(json, options) + "\n          \"\"\"\n          jsContext?.exceptionHandler = { context, exception in\n            print(\"JS Error: \\(exception!)\") \n          }\n\n          let updateRef = updateTracker.update\n          let updateFn : @convention(block) () -> Void = { updateRef() }\n          jsContext?.setObject(updateFn, forKeyedSubscript: \"update\" as NSString)\n\n          jsContext?.evaluateScript(jsSource)\n        }\n      ").trim(), children, !hasInputNames
-        ? ''
-        : "\n        .onAppear {\n          setComputedState()\n        }\n        ");
-    if (options.prettier !== false) {
-        str = generic_format_1.format(str);
-    }
-    return str;
+            : "import JavaScriptCore\n    \n    final class UpdateTracker: ObservableObject {\n        @Published var value = 0;\n    \n        func update() {\n            value += 1\n        }\n    }\n    ", component.name, !hasDyanmicData
+            ? ''
+            : "\n        @ObservedObject var updateTracker = UpdateTracker()\n        private var jsContext = JSContext()\n        ".concat(getInputBindings(json, options), "\n\n        func eval(code: String) -> JSValue! {\n          return jsContext?.evaluateScript(code)\n        }\n\n        ").concat(!hasInputNames
+                ? ''
+                : "\n        func setComputedState() {\n          ".concat(Object.keys(json.meta.inputNames || {})
+                    .map(function (item) {
+                    return "".concat(item, " = ").concat(processBinding(json.meta.inputNames[item], options), ".toString()!");
+                })
+                    .join('\n'), "\n        }"), "\n\n        init() {\n          let jsSource = \"\"\"\n              ").concat(getJsSource(json, options), "\n          \"\"\"\n          jsContext?.exceptionHandler = { context, exception in\n            print(\"JS Error: \\(exception!)\") \n          }\n\n          let updateRef = updateTracker.update\n          let updateFn : @convention(block) () -> Void = { updateRef() }\n          jsContext?.setObject(updateFn, forKeyedSubscript: \"update\" as NSString)\n\n          jsContext?.evaluateScript(jsSource)\n        }\n      ").trim(), children, !hasInputNames
+            ? ''
+            : "\n        .onAppear {\n          setComputedState()\n        }\n        ");
+        if (options.prettier !== false) {
+            str = (0, generic_format_1.format)(str);
+        }
+        return str;
+    };
 };
 exports.componentToSwift = componentToSwift;
 var templateObject_1;

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

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

package/dist/src/generators/template.js

@@ -17,9 +17,9 @@ var dedent_1 = __importDefault(require("dedent"));
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var mappers = {
     Fragment: function (json, options) {
-        return "<div>" + json.children
+        return "<div>".concat(json.children
             .map(function (item) { return blockToTemplate(item, options); })
-            .join('\n') + "</div>";
+            .join('\n'), "</div>");
     },
 };
 // TODO: spread support
@@ -32,11 +32,11 @@ var blockToTemplate = function (json, options) {
         return json.properties._text;
     }
     if (json.bindings._text) {
-        return "${" + json.bindings._text + "}";
+        return "${".concat(json.bindings._text, "}");
     }
     var str = '';
     if (json.name === 'For') {
-        str += "${" + json.bindings.each + "?.map(" + json.properties._forName + " => `";
+        str += "${".concat(json.bindings.each, "?.map(").concat(json.properties._forName, " => `");
         if (json.children) {
             str += json.children
                 .map(function (item) { return blockToTemplate(item, options); })
@@ -45,7 +45,7 @@ var blockToTemplate = function (json, options) {
         str += '`).join("")}';
     }
     else if (json.name === 'Show') {
-        str += "${!(" + json.bindings.when + ") ? '' : `";
+        str += "${!(".concat(json.bindings.when, ") ? '' : `");
         if (json.children) {
             str += json.children
                 .map(function (item) { return blockToTemplate(item, options); })
@@ -54,7 +54,7 @@ var blockToTemplate = function (json, options) {
         str += '`}';
     }
     else {
-        str += "<" + json.name + " ";
+        str += "<".concat(json.name, " ");
         // TODO: JS iteration or with helper
         // if (json.bindings._spread === '_spread') {
         //   str += `
@@ -65,7 +65,7 @@ var blockToTemplate = function (json, options) {
         // }
         for (var key in json.properties) {
             var value = json.properties[key];
-            str += " " + key + "=\"" + value + "\" ";
+            str += " ".concat(key, "=\"").concat(value, "\" ");
         }
         for (var key in json.bindings) {
             if (key === '_spread' || key === 'ref' || key === 'css') {
@@ -78,7 +78,7 @@ var blockToTemplate = function (json, options) {
                 // Do nothing
             }
             else {
-                str += " " + key + "=\"${" + useValue + "}\" ";
+                str += " ".concat(key, "=\"${").concat(useValue, "}\" ");
             }
         }
         if (jsx_1.selfClosingTags.has(json.name)) {
@@ -90,50 +90,53 @@ var blockToTemplate = function (json, options) {
                 .map(function (item) { return blockToTemplate(item, options); })
                 .join('\n');
         }
-        str += "</" + json.name + ">";
+        str += "</".concat(json.name, ">");
     }
     return str;
 };
 // TODO: add JS support similar to componentToHtml()
-var componentToTemplate = function (componentJson, options) {
+var componentToTemplate = function (options) {
     if (options === void 0) { options = {}; }
-    var json = fast_clone_1.fastClone(componentJson);
-    if (options.plugins) {
-        json = plugins_1.runPreJsonPlugins(json, options.plugins);
-    }
-    var css = collect_styles_1.collectCss(json);
-    if (options.plugins) {
-        json = plugins_1.runPostJsonPlugins(json, options.plugins);
-    }
-    var str = json.children.map(function (item) { return blockToTemplate(item); }).join('\n');
-    if (css.trim().length) {
-        str += "<style>" + css + "</style>";
-    }
-    str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    export default function template(props) {\n      let state = ", "\n\n      return `", "`\n    }\n  \n  "], ["\n    export default function template(props) {\n      let state = ", "\n\n      return \\`", "\\`\n    }\n  \n  "])), get_state_object_string_1.getStateObjectStringFromComponent(json), str.replace(/\s+/g, ' '));
-    if (options.plugins) {
-        str = plugins_1.runPreCodePlugins(str, options.plugins);
-    }
-    if (options.prettier !== false) {
-        try {
-            str = standalone_1.format(str, {
-                parser: 'typescript',
-                htmlWhitespaceSensitivity: 'ignore',
-                plugins: [
-                    // To support running in browsers
-                    require('prettier/parser-typescript'),
-                    require('prettier/parser-postcss'),
-                    require('prettier/parser-babel'),
-                ],
-            });
+    return function (_a) {
+        var component = _a.component;
+        var json = (0, fast_clone_1.fastClone)(component);
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
-        catch (err) {
-            console.warn('Could not prettify', { string: str }, err);
+        var css = (0, collect_styles_1.collectCss)(json);
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
-    }
-    if (options.plugins) {
-        str = plugins_1.runPostCodePlugins(str, options.plugins);
-    }
-    return str;
+        var str = json.children.map(function (item) { return blockToTemplate(item); }).join('\n');
+        if (css.trim().length) {
+            str += "<style>".concat(css, "</style>");
+        }
+        str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    export default function template(props) {\n      let state = ", "\n\n      return `", "`\n    }\n  \n  "], ["\n    export default function template(props) {\n      let state = ", "\n\n      return \\`", "\\`\n    }\n  \n  "])), (0, get_state_object_string_1.getStateObjectStringFromComponent)(json), str.replace(/\s+/g, ' '));
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        }
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    htmlWhitespaceSensitivity: 'ignore',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-typescript'),
+                        require('prettier/parser-postcss'),
+                        require('prettier/parser-babel'),
+                    ],
+                });
+            }
+            catch (err) {
+                console.warn('Could not prettify', { string: str }, err);
+            }
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        }
+        return str;
+    };
 };
 exports.componentToTemplate = componentToTemplate;
 var templateObject_1;

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

@@ -1,13 +1,13 @@
-import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
-import { Plugin } from '../modules/plugins';
-export declare type ToVueOptions = {
-    prettier?: boolean;
-    plugins?: Plugin[];
+import { BaseTranspilerOptions, TranspilerArgs } from '../types/config';
+export interface ToVueOptions extends BaseTranspilerOptions {
     vueVersion?: 2 | 3;
-    cssNamespace?: string;
-    namePrefix?: string;
+    cssNamespace?: () => string;
+    namePrefix?: (path: string) => string;
     builderRegister?: boolean;
-};
+    registerComponentPrepend?: string;
+}
 export declare const blockToVue: (node: MitosisNode, options: ToVueOptions) => string;
-export declare const componentToVue: (component: MitosisComponent, options?: ToVueOptions) => string;
+export declare const componentToVue: (options?: ToVueOptions) => ({ component, path }: TranspilerArgs & {
+    path: string;
+}) => string;