@builder.io/mitosis 0.4.0 → 0.4.2

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

@@ -1,57 +1,57 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToSwift = void 0;
-var legacy_1 = __importDefault(require("neotraverse/legacy"));
-var dedent_1 = require("../helpers/dedent");
-var fast_clone_1 = require("../helpers/fast-clone");
-var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
-var generic_format_1 = require("../helpers/generic-format");
-var get_state_object_string_1 = require("../helpers/get-state-object-string");
-var get_styles_1 = require("../helpers/get-styles");
-var is_children_1 = __importDefault(require("../helpers/is-children"));
-var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
-var state_1 = require("../helpers/state");
-var try_prettier_format_1 = require("../helpers/try-prettier-format");
-var mitosis_node_1 = require("../types/mitosis-node");
-var scrolls = function (json) {
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const dedent_1 = require("../helpers/dedent");
+const fast_clone_1 = require("../helpers/fast-clone");
+const filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
+const generic_format_1 = require("../helpers/generic-format");
+const get_state_object_string_1 = require("../helpers/get-state-object-string");
+const get_styles_1 = require("../helpers/get-styles");
+const is_children_1 = __importDefault(require("../helpers/is-children"));
+const is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+const state_1 = require("../helpers/state");
+const try_prettier_format_1 = require("../helpers/try-prettier-format");
+const mitosis_node_1 = require("../types/mitosis-node");
+const scrolls = (json) => {
     var _a;
     return ((_a = (0, get_styles_1.getStyles)(json)) === null || _a === void 0 ? void 0 : _a.overflow) === 'auto';
 };
-var mappers = {
-    Fragment: function (json, options) {
-        return "".concat(json.children.map(function (item) { return blockToSwift(item, options); }).join('\n'));
+const mappers = {
+    Fragment: (json, options) => {
+        return `${json.children.map((item) => blockToSwift(item, options)).join('\n')}`;
     },
-    link: function () { return ''; },
-    Image: function (json, options) {
+    link: () => '',
+    Image: (json, options) => {
         var _a;
-        return ("Image(".concat(processBinding((_a = json.bindings.image) === null || _a === void 0 ? void 0 : _a.code, options) || "\"".concat(json.properties.image, "\""), ")") +
+        return (`Image(${processBinding((_a = json.bindings.image) === null || _a === void 0 ? void 0 : _a.code, options) || `"${json.properties.image}"`})` +
             getStyleString(json, options) +
             getActionsString(json, options));
     },
-    input: function (json, options) {
+    input: (json, options) => {
         var _a, _b;
-        var name = json.properties.$name;
-        var str = "TextField(".concat(json.bindings.placeholder
+        const name = json.properties.$name;
+        let str = `TextField(${json.bindings.placeholder
             ? processBinding((_a = json.bindings.placeholder) === null || _a === void 0 ? void 0 : _a.code, options)
             : json.properties.placeholder
                 ? JSON.stringify(json.bindings.placeholder.code)
-                : '""', ", text: $").concat(name, ")") +
+                : '""'}, text: $${name})` +
             getStyleString(json, options) +
             getActionsString(json, options);
         if (json.bindings.onChange) {
-            str += "\n        .onChange(of: ".concat(name, ") { ").concat(name, " in \n          ").concat(processBinding(wrapAction("var event = { target: { value: \"\\(".concat(name, ")\" } };\n              ").concat((_b = json.bindings.onChange) === null || _b === void 0 ? void 0 : _b.code)), options), " \n        }");
+            str += `
+        .onChange(of: ${name}) { ${name} in 
+          ${processBinding(wrapAction(`var event = { target: { value: "\\(${name})" } };
+              ${(_b = json.bindings.onChange) === null || _b === void 0 ? void 0 : _b.code}`), options)} 
+        }`;
         }
         return str;
     },
 };
-var blockToSwift = function (json, options) {
+const blockToSwift = (json, options) => {
     var _a, _b;
     if (mappers[json.name]) {
         return mappers[json.name](json, options);
@@ -66,17 +66,17 @@ var blockToSwift = function (json, options) {
         if (!json.properties._text.trim().length) {
             return '';
         }
-        return "Text(\"".concat(json.properties._text.trim().replace(/\s+/g, ' '), "\")");
+        return `Text("${json.properties._text.trim().replace(/\s+/g, ' ')}")`;
     }
     if (json.bindings._text) {
-        return "Text(".concat(processBinding(json.bindings._text.code, options), ".toString())");
+        return `Text(${processBinding(json.bindings._text.code, options)}.toString())`;
     }
-    var str = '';
-    var children = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
-    var style = (0, get_styles_1.getStyles)(json);
+    let str = '';
+    const children = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
+    const 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'
+    const name = json.name === 'input'
         ? 'TextField'
         : json.name === 'img'
             ? 'Image'
@@ -88,30 +88,32 @@ var blockToSwift = function (json, options) {
                         : 'VStack'
                 : json.name;
     if (name === 'TextField') {
-        var placeholder = json.properties.placeholder;
+        const placeholder = json.properties.placeholder;
         delete json.properties.placeholder;
         json.properties._ = placeholder || '';
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        str += "ForEach(".concat(processBinding((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), ", id: \\.self) { ").concat(json.scope.forName, " in ").concat(children
-            .map(function (item) { return blockToSwift(item, options); })
-            .join('\n'), " }");
+        str += `ForEach(${processBinding((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options)}, id: \\.self) { ${json.scope.forName} in ${children
+            .map((item) => blockToSwift(item, options))
+            .join('\n')} }`;
     }
     else if (json.name === 'Show') {
-        str += "if ".concat(processBinding((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code, options), " {\n      ").concat(children.map(function (item) { return blockToSwift(item, options); }).join('\n'), "\n    }");
+        str += `if ${processBinding((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code, options)} {
+      ${children.map((item) => blockToSwift(item, options)).join('\n')}
+    }`;
     }
     else {
-        str += "".concat(name, "(");
-        for (var key in json.properties) {
+        str += `${name}(`;
+        for (const key in json.properties) {
             if (key === 'class' || key === 'className') {
                 continue;
             }
             // TODO: binding mappings
             // const value = json.properties[key];
             // str += ` ${key}: "${(value as string).replace(/"/g, '"')}", `;
-            console.warn("Unsupported property \"".concat(key, "\""));
+            console.warn(`Unsupported property "${key}"`);
         }
-        for (var key in json.bindings) {
+        for (const key in json.bindings) {
             if (
             // TODO: implement spread, ref, more css
             key === '_spread' ||
@@ -127,58 +129,66 @@ var blockToSwift = function (json, options) {
                 }
                 else {
                     // TODO: other event mappings
-                    console.warn("Unsupported event binding \"".concat(key, "\""));
+                    console.warn(`Unsupported event binding "${key}"`);
                 }
             }
             else {
-                console.warn("Unsupported binding \"".concat(key, "\""));
+                console.warn(`Unsupported binding "${key}"`);
                 // TODO: need binding mappings
                 // str += ` ${key}: ${processBinding(value, options)}, `;
             }
         }
-        str += ")";
-        str += " {";
+        str += `)`;
+        str += ` {`;
         if (json.children) {
-            str += json.children.map(function (item) { return blockToSwift(item, options); }).join('\n');
+            str += json.children.map((item) => blockToSwift(item, options)).join('\n');
         }
-        str += "}";
+        str += `}`;
         str += getStyleString(json, options);
         str += getActionsString(json, options);
     }
     return str;
 };
-var wrapAction = function (str) { return "(() => { ".concat(str, " })()"); };
+const wrapAction = (str) => `(() => { ${str} })()`;
 function getActionsString(json, options) {
-    var str = '';
+    let str = '';
     if (json.bindings.onClick) {
-        str += "\n.onTapGesture {\n      ".concat(processBinding(wrapAction(json.bindings.onClick.code), options), "\n    }");
+        str += `\n.onTapGesture {
+      ${processBinding(wrapAction(json.bindings.onClick.code), options)}
+    }`;
     }
     return str;
 }
 function getStyleString(node, options) {
-    var style = (0, get_styles_1.getStyles)(node);
-    var str = '';
-    for (var key in style) {
-        var useKey = key;
-        var rawValue = style[key];
-        var value = "\"".concat(rawValue, "\"");
+    const style = (0, get_styles_1.getStyles)(node);
+    let str = '';
+    for (const key in style) {
+        let useKey = key;
+        const rawValue = style[key];
+        let value = `"${rawValue}"`;
         if (['padding', 'margin'].includes(key)) {
             // TODO: throw error if calc()
             value = parseFloat(rawValue);
-            str += "\n.".concat(useKey, "(").concat(value, ")");
+            str += `\n.${useKey}(${value})`;
         }
         else if (key === 'color') {
             useKey = 'foregroundColor';
             // TODO: convert to RBG and use Color(red: ..., ....)
         }
         else {
-            console.warn("Styling key \"".concat(key, "\" is not supported"));
+            console.warn(`Styling key "${key}" is not supported`);
         }
     }
     return str;
 }
 function getJsSource(json, options) {
-    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  });");
+    const str = `const state = new Proxy(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)}, {
+    set: (target, key, value) => {
+      const returnVal = Reflect.set(target, key, value);
+      update();
+      return returnVal;
+    }
+  });`;
     if (options.prettier === false) {
         return str.trim();
     }
@@ -186,23 +196,25 @@ function getJsSource(json, options) {
         return (0, try_prettier_format_1.tryPrettierFormat)(str, 'typescript').trim();
     }
 }
-var processBinding = function (str, options) {
+const processBinding = (str, options) => {
     // Use triple quotes for multiline strings or strings including '"'
     if (str.includes('\n') || str.includes('"')) {
-        return "eval(code: \"\"\"\n      ".concat(str, "\n      \"\"\")");
+        return `eval(code: """
+      ${str}
+      """)`;
     }
     // Use double quotes for simple strings
-    return "eval(code: \"".concat(str, "\")");
+    return `eval(code: "${str}")`;
 };
 function componentHasDynamicData(json) {
-    var hasState = (0, state_1.checkHasState)(json);
+    const hasState = (0, state_1.checkHasState)(json);
     if (hasState) {
         return true;
     }
-    var found = false;
+    let found = false;
     (0, legacy_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) {
+            if (Object.keys(node.bindings).filter((item) => item !== 'css').length) {
                 found = true;
                 this.stop();
             }
@@ -211,17 +223,17 @@ function componentHasDynamicData(json) {
     return found;
 }
 function mapDataForSwiftCompatability(json) {
-    var inputIndex = 0;
+    let inputIndex = 0;
     json.meta.inputNames = json.meta.inputNames || [];
     (0, legacy_1.default)(json).forEach(function (node) {
         var _a;
         if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
             if (node.name === 'input') {
-                if (!Object.keys(node.bindings).filter(function (item) { return item !== 'css'; }).length) {
+                if (!Object.keys(node.bindings).filter((item) => item !== 'css').length) {
                     return;
                 }
                 if (!node.properties.$name) {
-                    node.properties.$name = "input".concat(++inputIndex);
+                    node.properties.$name = `input${++inputIndex}`;
                 }
                 json.meta.inputNames[node.properties.$name] =
                     ((_a = node.bindings.value) === null || _a === void 0 ? void 0 : _a.code) || '';
@@ -230,43 +242,92 @@ function mapDataForSwiftCompatability(json) {
     });
 }
 function getInputBindings(json, options) {
-    var str = '';
-    var inputNames = json.meta.inputNames;
+    let str = '';
+    const inputNames = json.meta.inputNames;
     if (!inputNames) {
         return str;
     }
-    for (var item in inputNames) {
-        str += "\n@State private var ".concat(item, ": String = \"\"");
+    for (const item in inputNames) {
+        str += `\n@State private var ${item}: String = ""`;
     }
     return str;
 }
-var componentToSwift = function (options) {
-    if (options === void 0) { options = {}; }
-    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.dedent)(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    ", 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
+const componentToSwift = (options = {}) => ({ component }) => {
+    const json = (0, fast_clone_1.fastClone)(component);
+    mapDataForSwiftCompatability(json);
+    const hasDyanmicData = componentHasDynamicData(json);
+    let children = json.children.map((item) => blockToSwift(item, options)).join('\n');
+    const hasInputNames = Object.keys(json.meta.inputNames || {}).length > 0;
+    let str = (0, dedent_1.dedent) `
+    import SwiftUI
+    ${!hasDyanmicData
+        ? ''
+        : `import JavaScriptCore
+    
+    final class UpdateTracker: ObservableObject {
+        @Published var value = 0;
+    
+        func update() {
+            value += 1
+        }
+    }
+    `}
+
+    struct ${component.name}: View {
+      ${!hasDyanmicData
+        ? ''
+        : `
+        @ObservedObject var updateTracker = UpdateTracker()
+        private var jsContext = JSContext()
+        ${getInputBindings(json, options)}
+
+        func eval(code: String) -> JSValue! {
+          return jsContext?.evaluateScript(code)
+        }
+
+        ${!hasInputNames
             ? ''
-            : "\n        .onAppear {\n          setComputedState()\n        }\n        ");
-        if (options.prettier !== false) {
-            str = (0, generic_format_1.format)(str);
+            : `
+        func setComputedState() {
+          ${Object.keys(json.meta.inputNames || {})
+                .map((item) => {
+                return `${item} = ${processBinding(json.meta.inputNames[item], options)}.toString()!`;
+            })
+                .join('\n')}
+        }`}
+
+        init() {
+          let jsSource = """
+              ${getJsSource(json, options)}
+          """
+          jsContext?.exceptionHandler = { context, exception in
+            print("JS Error: \\(exception!)") 
+          }
+
+          let updateRef = updateTracker.update
+          let updateFn : @convention(block) () -> Void = { updateRef() }
+          jsContext?.setObject(updateFn, forKeyedSubscript: "update" as NSString)
+
+          jsContext?.evaluateScript(jsSource)
         }
-        return str;
-    };
+      `.trim()}
+
+      var body: some View {
+        VStack {
+          ${children}
+        }${!hasInputNames
+        ? ''
+        : `
+        .onAppear {
+          setComputedState()
+        }
+        `}
+      }
+    }
+  `;
+    if (options.prettier !== false) {
+        str = (0, generic_format_1.format)(str);
+    }
+    return str;
 };
 exports.componentToSwift = componentToSwift;
-var templateObject_1;

package/dist/src/generators/taro.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToTaro = exports.TagMap = exports.collectTaroStyles = exports.DEFAULT_Component_SET = void 0;
-var json5_1 = __importDefault(require("json5"));
-var lodash_1 = require("lodash");
-var legacy_1 = __importDefault(require("neotraverse/legacy"));
-var bindings_1 = require("../helpers/bindings");
-var fast_clone_1 = require("../helpers/fast-clone");
-var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
-var merge_options_1 = require("../helpers/merge-options");
-var react_1 = require("./react");
+const json5_1 = __importDefault(require("json5"));
+const lodash_1 = require("lodash");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const bindings_1 = require("../helpers/bindings");
+const fast_clone_1 = require("../helpers/fast-clone");
+const is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+const merge_options_1 = require("../helpers/merge-options");
+const react_1 = require("./react");
 // @tarojs/components
 exports.DEFAULT_Component_SET = new Set([
     'View',
@@ -65,28 +65,28 @@ exports.DEFAULT_Component_SET = new Set([
     'AdCustom',
 ]);
 // TODO: px to 2 px
-var collectTaroStyles = function (json) {
-    var styleMap = {};
-    var componentIndexes = {};
+const collectTaroStyles = (json) => {
+    const styleMap = {};
+    const componentIndexes = {};
     (0, legacy_1.default)(json).forEach(function (item) {
         var _a;
         if (!(0, is_mitosis_node_1.isMitosisNode)(item) || typeof ((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code) !== 'string') {
             return;
         }
-        var value = json5_1.default.parse(item.bindings.css.code);
+        const value = json5_1.default.parse(item.bindings.css.code);
         delete item.bindings.css;
         if (!(0, lodash_1.size)(value)) {
             return;
         }
-        for (var key in value) {
-            var propertyValue = value[key];
+        for (const key in value) {
+            const propertyValue = value[key];
             // convert px to 2 * px, PX to PX
             if (typeof propertyValue === 'string' && propertyValue.match(/^\d/)) {
-                var newValue = parseFloat(propertyValue);
+                let newValue = parseFloat(propertyValue);
                 if (!isNaN(newValue)) {
                     if (propertyValue.endsWith('px')) {
                         newValue = 2 * newValue;
-                        value[key] = "".concat(newValue, "px");
+                        value[key] = `${newValue}px`;
                     }
                     else {
                         value[key] = newValue;
@@ -94,10 +94,10 @@ var collectTaroStyles = function (json) {
                 }
             }
         }
-        var componentName = (0, lodash_1.camelCase)(item.name || 'view');
-        var index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
-        var className = "".concat(componentName).concat(index);
-        item.bindings.style = (0, bindings_1.createSingleBinding)({ code: "styles.".concat(className) });
+        const componentName = (0, lodash_1.camelCase)(item.name || 'view');
+        const index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
+        const className = `${componentName}${index}`;
+        item.bindings.style = (0, bindings_1.createSingleBinding)({ code: `styles.${className}` });
         styleMap[className] = value;
     });
     return styleMap;
@@ -116,12 +116,12 @@ exports.TagMap = {
  * - Converts DOM tags to @tarojs/components
  * - Removes redundant `class`/`className` attributes
  */
-var PROCESS_TARO_PLUGIN = function () { return ({
+const PROCESS_TARO_PLUGIN = () => ({
     json: {
-        pre: function (json) {
-            var TaroComponentsImports = { path: '@tarojs/components', imports: {} };
+        pre: (json) => {
+            const TaroComponentsImports = { path: '@tarojs/components', imports: {} };
             json.imports.push(TaroComponentsImports);
-            (0, legacy_1.default)(json).forEach(function (node) {
+            (0, legacy_1.default)(json).forEach((node) => {
                 var _a, _b, _c, _d;
                 if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
                     // TODO: More dom tags convert to  @tarojs/components
@@ -153,20 +153,16 @@ var PROCESS_TARO_PLUGIN = function () { return ({
             });
         },
     },
-}); };
-var DEFAULT_OPTIONS = {
+});
+const DEFAULT_OPTIONS = {
     stateType: 'useState',
     plugins: [PROCESS_TARO_PLUGIN],
 };
-var componentToTaro = function (_options) {
-    if (_options === void 0) { _options = {}; }
-    return function (_a) {
-        var component = _a.component, path = _a.path;
-        var json = (0, fast_clone_1.fastClone)(component);
-        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options, {
-            type: 'taro',
-        });
-        return (0, react_1.componentToReact)(options)({ component: json, path: path });
-    };
+const componentToTaro = (_options = {}) => ({ component, path }) => {
+    const json = (0, fast_clone_1.fastClone)(component);
+    const options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options, {
+        type: 'taro',
+    });
+    return (0, react_1.componentToReact)(options)({ component: json, path });
 };
 exports.componentToTaro = componentToTaro;