@builder.io/mitosis 0.4.0 → 0.4.2

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

@@ -1,38 +1,27 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToReact = void 0;
-var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var is_children_1 = __importDefault(require("../../helpers/is-children"));
-var is_root_text_node_1 = require("../../helpers/is-root-text-node");
-var is_valid_attribute_name_1 = require("../../helpers/is-valid-attribute-name");
-var for_1 = require("../../helpers/nodes/for");
-var slots_1 = require("../../helpers/slots");
-var mitosis_node_1 = require("../../types/mitosis-node");
-var html_tags_1 = require("../../constants/html_tags");
-var helpers_1 = require("./helpers");
-var state_1 = require("./state");
-var NODE_MAPPERS = {
-    Slot: function (json, options, component, _insideJsx, parentSlots) {
+const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const is_children_1 = __importDefault(require("../../helpers/is-children"));
+const is_root_text_node_1 = require("../../helpers/is-root-text-node");
+const is_valid_attribute_name_1 = require("../../helpers/is-valid-attribute-name");
+const for_1 = require("../../helpers/nodes/for");
+const slots_1 = require("../../helpers/slots");
+const mitosis_node_1 = require("../../types/mitosis-node");
+const html_tags_1 = require("../../constants/html_tags");
+const helpers_1 = require("./helpers");
+const state_1 = require("./state");
+const NODE_MAPPERS = {
+    Slot(json, options, component, _insideJsx, parentSlots) {
         var _a, _b;
-        var slotName = ((_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) || json.properties.name;
-        var hasChildren = json.children.length;
-        var renderChildren = function () {
+        const slotName = ((_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) || json.properties.name;
+        const hasChildren = json.children.length;
+        const renderChildren = () => {
             var _a;
-            var childrenStr = (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToReact)(item, options, component, true); }).join('\n').trim();
+            const childrenStr = (_a = json.children) === null || _a === void 0 ? void 0 : _a.map((item) => (0, exports.blockToReact)(item, options, component, true)).join('\n').trim();
             /**
              * Ad-hoc way of figuring out if the children defaultProp is:
              * - a JSX element, e.g. `<div>foo</div>`
@@ -41,151 +30,158 @@ var NODE_MAPPERS = {
              *
              * and correctly wrapping it in quotes when appropriate.
              */
-            if (childrenStr.startsWith("<") && childrenStr.endsWith(">")) {
+            if (childrenStr.startsWith(`<`) && childrenStr.endsWith(`>`)) {
                 return childrenStr;
             }
             else if (['false', 'true', 'null', 'undefined'].includes(childrenStr)) {
                 return childrenStr;
             }
             else {
-                return "\"".concat(childrenStr, "\"");
+                return `"${childrenStr}"`;
             }
         };
         if (!slotName) {
             // TODO: update MitosisNode for simple code
-            var key = Object.keys(json.bindings).find(Boolean);
+            const key = Object.keys(json.bindings).find(Boolean);
             if (key && parentSlots) {
-                parentSlots.push({ key: key, value: (_b = json.bindings[key]) === null || _b === void 0 ? void 0 : _b.code });
+                parentSlots.push({ key, value: (_b = json.bindings[key]) === null || _b === void 0 ? void 0 : _b.code });
                 return '';
             }
-            var children = (0, helpers_1.processBinding)('props.children', options);
-            return "<>{".concat(children, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}</>");
+            const children = (0, helpers_1.processBinding)('props.children', options);
+            return `<>{${children} ${hasChildren ? `|| (${renderChildren()})` : ''}}</>`;
         }
-        var slotProp = (0, helpers_1.processBinding)(slotName, options).replace('name=', '');
+        let slotProp = (0, helpers_1.processBinding)(slotName, options).replace('name=', '');
         if (!slotProp.startsWith('props.')) {
-            slotProp = "props.".concat(slotProp);
+            slotProp = `props.${slotProp}`;
         }
-        return "<>{".concat(slotProp, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}</>");
+        return `<>{${slotProp} ${hasChildren ? `|| (${renderChildren()})` : ''}}</>`;
     },
-    Fragment: function (json, options, component) {
-        var wrap = (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
-        return "".concat(wrap ? (0, helpers_1.getFragment)('open', options) : '').concat(json.children
-            .map(function (item) { return (0, exports.blockToReact)(item, options, component, wrap); })
-            .join('\n')).concat(wrap ? (0, helpers_1.getFragment)('close', options) : '');
+    Fragment(json, options, component) {
+        const wrap = (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
+        return `${wrap ? (0, helpers_1.getFragment)('open', options) : ''}${json.children
+            .map((item) => (0, exports.blockToReact)(item, options, component, wrap))
+            .join('\n')}${wrap ? (0, helpers_1.getFragment)('close', options) : ''}`;
     },
-    For: function (_json, options, component, insideJsx) {
+    For(_json, options, component, insideJsx) {
         var _a;
-        var json = _json;
-        var wrap = (0, helpers_1.wrapInFragment)(json);
-        var forArguments = (0, for_1.getForArguments)(json).join(', ');
-        var expression = "".concat((0, helpers_1.processBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), "?.map((").concat(forArguments, ") => (\n      ").concat(wrap ? (0, helpers_1.openFrag)(options) : '').concat(json.children
+        const json = _json;
+        const wrap = (0, helpers_1.wrapInFragment)(json);
+        const forArguments = (0, for_1.getForArguments)(json).join(', ');
+        const expression = `${(0, helpers_1.processBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options)}?.map((${forArguments}) => (
+      ${wrap ? (0, helpers_1.openFrag)(options) : ''}${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, exports.blockToReact)(item, options, component, wrap); })
-            .join('\n')).concat(wrap ? (0, helpers_1.closeFrag)(options) : '', "\n    ))");
+            .map((item) => (0, exports.blockToReact)(item, options, component, wrap))
+            .join('\n')}${wrap ? (0, helpers_1.closeFrag)(options) : ''}
+    ))`;
         if (insideJsx) {
-            return "{".concat(expression, "}");
+            return `{${expression}}`;
         }
         else {
             return expression;
         }
     },
-    Show: function (json, options, component, insideJsx) {
+    Show(json, options, component, insideJsx) {
         var _a;
-        var wrap = (0, helpers_1.wrapInFragment)(json) ||
+        const wrap = (0, helpers_1.wrapInFragment)(json) ||
             (0, is_root_text_node_1.isRootTextNode)(json) ||
             component.children[0] === json ||
             // when `<Show><For>...</For></Show>`, we need to wrap the For generated code in a fragment
             // since it's a `.map()` call
             (json.children.length === 1 && ['For', 'Show'].includes(json.children[0].name));
-        var wrapElse = !!(json.meta.else &&
+        const wrapElse = !!(json.meta.else &&
             ((0, helpers_1.wrapInFragment)(json.meta.else) || (0, mitosis_node_1.checkIsForNode)(json.meta.else)));
-        var expression = "".concat((0, helpers_1.processBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options), " ? (\n      ").concat(wrap ? (0, helpers_1.openFrag)(options) : '').concat(json.children
+        const expression = `${(0, helpers_1.processBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options)} ? (
+      ${wrap ? (0, helpers_1.openFrag)(options) : ''}${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, exports.blockToReact)(item, options, component, wrap); })
-            .join('\n')).concat(wrap ? (0, helpers_1.closeFrag)(options) : '', "\n    ) : ").concat(!json.meta.else
+            .map((item) => (0, exports.blockToReact)(item, options, component, wrap))
+            .join('\n')}${wrap ? (0, helpers_1.closeFrag)(options) : ''}
+    ) : ${!json.meta.else
             ? 'null'
             : (wrapElse ? (0, helpers_1.openFrag)(options) : '') +
                 (0, exports.blockToReact)(json.meta.else, options, component, wrapElse) +
-                (wrapElse ? (0, helpers_1.closeFrag)(options) : ''));
+                (wrapElse ? (0, helpers_1.closeFrag)(options) : '')}`;
         if (insideJsx) {
-            return "{".concat(expression, "}");
+            return `{${expression}}`;
         }
         else {
             return expression;
         }
     },
 };
-var ATTTRIBUTE_MAPPERS = {
+const ATTTRIBUTE_MAPPERS = {
     spellcheck: 'spellCheck',
     autocapitalize: 'autoCapitalize',
     autocomplete: 'autoComplete',
     for: 'htmlFor',
 };
 // TODO: Maybe in the future allow defining `string | function` as values
-var BINDING_MAPPERS = __assign({ ref: function (ref, value, options) {
+const BINDING_MAPPERS = {
+    ref(ref, value, options) {
         if (options === null || options === void 0 ? void 0 : options.preact) {
             return [ref, value];
         }
-        var regexp = /(.+)?props\.(.+)( |\)|;|\()?$/m;
+        const regexp = /(.+)?props\.(.+)( |\)|;|\()?$/m;
         if (regexp.test(value)) {
-            var match = regexp.exec(value);
-            var prop = match === null || match === void 0 ? void 0 : match[2];
+            const match = regexp.exec(value);
+            const prop = match === null || match === void 0 ? void 0 : match[2];
             if (prop) {
                 return [ref, prop];
             }
         }
         return [ref, value];
-    }, innerHTML: function (_key, value) {
-        return ['dangerouslySetInnerHTML', "{__html: ".concat(value.replace(/\s+/g, ' '), "}")];
-    } }, ATTTRIBUTE_MAPPERS);
-var NATIVE_EVENT_MAPPER = {
+    },
+    innerHTML(_key, value) {
+        return ['dangerouslySetInnerHTML', `{__html: ${value.replace(/\s+/g, ' ')}}`];
+    },
+    ...ATTTRIBUTE_MAPPERS,
+};
+const NATIVE_EVENT_MAPPER = {
     onClick: 'onPress',
 };
-var blockToReact = function (json, options, component, insideJsx, parentSlots) {
+const blockToReact = (json, options, component, insideJsx, parentSlots = []) => {
     var _a, _b, _c, _d;
-    if (parentSlots === void 0) { parentSlots = []; }
-    var needsToRenderSlots = [];
+    const needsToRenderSlots = [];
     if (NODE_MAPPERS[json.name]) {
         return NODE_MAPPERS[json.name](json, options, component, insideJsx, parentSlots);
     }
     if (json.properties._text) {
-        var text = json.properties._text;
+        const text = json.properties._text;
         if (options.type === 'native' && text.trim().length) {
-            return "<Text>".concat(text, "</Text>");
+            return `<Text>${text}</Text>`;
         }
         return text;
     }
     if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
-        var processed = (0, helpers_1.processBinding)(json.bindings._text.code, options);
+        const processed = (0, helpers_1.processBinding)(json.bindings._text.code, options);
         if (options.type === 'native' &&
             !(0, is_children_1.default)({ node: json }) &&
             !(0, slots_1.isSlotProperty)(json.bindings._text.code.split('.')[1] || '')) {
-            return "<Text>{".concat(processed, "}</Text>");
+            return `<Text>{${processed}}</Text>`;
         }
-        return "{".concat(processed, "}");
+        return `{${processed}}`;
     }
-    var str = '';
-    str += "<".concat(json.name, " ");
-    for (var key in json.properties) {
-        var value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
+    let str = '';
+    str += `<${json.name} `;
+    for (const key in json.properties) {
+        const value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
         // Handle src for Image
         // Handle src for Image
         if (json.name === 'Image' && key === 'src') {
-            var src = void 0;
-            var imageSource = json.properties.src;
+            let src;
+            const imageSource = json.properties.src;
             if (imageSource) {
-                var isUrl = /^(http|https):\/\/[^ "]+$/.test(imageSource);
-                src = isUrl ? "{ uri: '".concat(imageSource, "' }") : "require('".concat(imageSource, "')");
-                str += "source={".concat(src, "} ");
+                const isUrl = /^(http|https):\/\/[^ "]+$/.test(imageSource);
+                src = isUrl ? `{ uri: '${imageSource}' }` : `require('${imageSource}')`;
+                str += `source={${src}} `;
                 continue; // Skip further processing for 'src' in Image
             }
         }
         // Handle href for TouchableOpacity
         if (json.name === 'TouchableOpacity' && key === 'href') {
-            var hrefValue = (0, helpers_1.processBinding)(value, options);
+            const hrefValue = (0, helpers_1.processBinding)(value, options);
             if (hrefValue) {
-                var onPress = "() => Linking.openURL(".concat(JSON.stringify(hrefValue), ")");
-                str += " onPress={".concat(onPress, "} ");
+                const onPress = `() => Linking.openURL(${JSON.stringify(hrefValue)})`;
+                str += ` onPress={${onPress}} `;
             }
             continue; // Skip further processing for 'href' in TouchableOpacity
         }
@@ -194,49 +190,49 @@ var blockToReact = function (json, options, component, insideJsx, parentSlots) {
             continue; // Skip further processing for 'target' in TouchableOpacity
         }
         if (key === 'class') {
-            str = "".concat(str.trim(), " className=\"").concat(value, "\" ");
+            str = `${str.trim()} className="${value}" `;
         }
         else if (BINDING_MAPPERS[key]) {
-            var mapper = BINDING_MAPPERS[key];
+            const mapper = BINDING_MAPPERS[key];
             if (typeof mapper === 'function') {
-                var _e = mapper(key, value, options), newKey = _e[0], newValue = _e[1];
-                str += " ".concat(newKey, "={").concat(newValue, "} ");
+                const [newKey, newValue] = mapper(key, value, options);
+                str += ` ${newKey}={${newValue}} `;
             }
             else {
-                str += " ".concat(BINDING_MAPPERS[key], "=\"").concat(value, "\" ");
+                str += ` ${BINDING_MAPPERS[key]}="${value}" `;
             }
         }
         else {
             if ((0, is_valid_attribute_name_1.isValidAttributeName)(key)) {
-                str += " ".concat(key, "=\"").concat(value.replace(/"/g, '&quot;'), "\" ");
+                str += ` ${key}="${value.replace(/"/g, '&quot;')}" `;
             }
         }
     }
-    for (var key in json.bindings) {
+    for (const key in json.bindings) {
         // ignore duplicate slot attribute
         if ((_b = json.slots) === null || _b === void 0 ? void 0 : _b[key]) {
             continue;
         }
-        var value = String((_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code);
+        const value = String((_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code);
         if (key === 'css' && value.trim() === '{}') {
             continue;
         }
-        var useBindingValue = (0, helpers_1.processBinding)(value, options);
+        const useBindingValue = (0, helpers_1.processBinding)(value, options);
         if (json.name === 'Image' && key === 'src') {
-            var src = void 0;
-            var imageSource = (0, helpers_1.processBinding)(value, options);
+            let src;
+            const imageSource = (0, helpers_1.processBinding)(value, options);
             if (imageSource) {
-                src = "{ uri: ".concat(imageSource, " }");
-                str += "source={".concat(src, "} ");
+                src = `{ uri: ${imageSource} }`;
+                str += `source={${src}} `;
                 continue; // Skip further processing for 'src' in Image
             }
         }
         // Handle href for TouchableOpacity
         if (json.name === 'TouchableOpacity' && key === 'href') {
-            var hrefValue = (0, helpers_1.processBinding)(value, options);
+            const hrefValue = (0, helpers_1.processBinding)(value, options);
             if (hrefValue) {
-                var onPress = "() => Linking.openURL(".concat(hrefValue, ")");
-                str += " onPress={".concat(onPress, "} ");
+                const onPress = `() => Linking.openURL(${hrefValue})`;
+                str += ` onPress={${onPress}} `;
                 continue; // Skip further processing for 'href' in TouchableOpacity
             }
         }
@@ -245,59 +241,59 @@ var blockToReact = function (json, options, component, insideJsx, parentSlots) {
             continue; // Skip further processing for 'target' in TouchableOpacity
         }
         if (((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) === 'spread') {
-            str += " {...(".concat(value, ")} ");
+            str += ` {...(${value})} `;
         }
         else if (key.startsWith('on')) {
-            var _f = json.bindings[key].arguments, cusArgs = _f === void 0 ? ['event'] : _f;
-            var eventName = options.type === 'native' ? NATIVE_EVENT_MAPPER[key] || key : key;
-            str += " ".concat(eventName, "={(").concat(cusArgs.join(','), ") => ").concat((0, state_1.updateStateSettersInCode)(useBindingValue, options), " } ");
+            const { arguments: cusArgs = ['event'] } = json.bindings[key];
+            const eventName = options.type === 'native' ? NATIVE_EVENT_MAPPER[key] || key : key;
+            str += ` ${eventName}={(${cusArgs.join(',')}) => ${(0, state_1.updateStateSettersInCode)(useBindingValue, options)} } `;
         }
         else if (key.startsWith('slot')) {
             // <Component slotProjected={<AnotherComponent />} />
-            str += " ".concat(key, "={").concat(value, "} ");
+            str += ` ${key}={${value}} `;
         }
         else if (key === 'class') {
-            str += " className={".concat(useBindingValue, "} ");
+            str += ` className={${useBindingValue}} `;
         }
         else if (BINDING_MAPPERS[key]) {
-            var mapper = BINDING_MAPPERS[key];
+            const mapper = BINDING_MAPPERS[key];
             if (typeof mapper === 'function') {
-                var _g = mapper(key, useBindingValue, options), newKey = _g[0], newValue = _g[1];
-                str += " ".concat(newKey, "={").concat(newValue, "} ");
+                const [newKey, newValue] = mapper(key, useBindingValue, options);
+                str += ` ${newKey}={${newValue}} `;
             }
             else {
                 if (useBindingValue === 'true') {
-                    str += " ".concat(BINDING_MAPPERS[key], " ");
+                    str += ` ${BINDING_MAPPERS[key]} `;
                 }
                 else {
-                    str += " ".concat(BINDING_MAPPERS[key], "={").concat(useBindingValue, "} ");
+                    str += ` ${BINDING_MAPPERS[key]}={${useBindingValue}} `;
                 }
             }
         }
         else if (key === 'style' && options.type === 'native' && json.name === 'ScrollView') {
             // React Native's ScrollView has a different prop for styles: `contentContainerStyle`
-            str += " contentContainerStyle={".concat(useBindingValue, "} ");
+            str += ` contentContainerStyle={${useBindingValue}} `;
         }
         else {
             if ((0, is_valid_attribute_name_1.isValidAttributeName)(key)) {
                 if (useBindingValue === 'true') {
-                    str += " ".concat(key, " ");
+                    str += ` ${key} `;
                 }
                 else {
-                    str += " ".concat(key, "={").concat(useBindingValue, "} ");
+                    str += ` ${key}={${useBindingValue}} `;
                 }
             }
         }
     }
     if (json.slots) {
-        for (var key in json.slots) {
-            var value = json.slots[key];
+        for (const key in json.slots) {
+            const value = json.slots[key];
             if (!(value === null || value === void 0 ? void 0 : value.length)) {
                 continue;
             }
-            var reactComponents = value.map(function (node) { return (0, exports.blockToReact)(node, options, component, true); });
-            var slotStringValue = reactComponents.length === 1 ? reactComponents[0] : "<>".concat(reactComponents.join('\n'), "</>");
-            str += " ".concat(key, "={").concat(slotStringValue, "} ");
+            const reactComponents = value.map((node) => (0, exports.blockToReact)(node, options, component, true));
+            const slotStringValue = reactComponents.length === 1 ? reactComponents[0] : `<>${reactComponents.join('\n')}</>`;
+            str += ` ${key}={${slotStringValue}} `;
         }
     }
     if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
@@ -309,22 +305,21 @@ var blockToReact = function (json, options, component, insideJsx, parentSlots) {
         return str;
     }
     // TODO: update MitosisNode for simple code
-    var childrenNodes = '';
+    let childrenNodes = '';
     if (json.children) {
         childrenNodes = json.children
-            .map(function (item) { return (0, exports.blockToReact)(item, options, component, true, needsToRenderSlots); })
+            .map((item) => (0, exports.blockToReact)(item, options, component, true, needsToRenderSlots))
             .join('');
     }
     if (needsToRenderSlots.length) {
-        needsToRenderSlots.forEach(function (_a) {
-            var key = _a.key, value = _a.value;
-            str += " ".concat(key, "={").concat(value, "} ");
+        needsToRenderSlots.forEach(({ key, value }) => {
+            str += ` ${key}={${value}} `;
         });
     }
     str = str.trim() + '>';
     if (json.children) {
         str += childrenNodes;
     }
-    return str + "</".concat(json.name, ">");
+    return str + `</${json.name}>`;
 };
 exports.blockToReact = blockToReact;