@builder.io/mitosis 0.4.0 → 0.4.2

package/dist/src/plugins/compile-away-builder-components.js

@@ -1,41 +1,21 @@
 "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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileAwayBuilderComponents = exports.compileAwayBuilderComponentsFromTree = exports.components = void 0;
-var sdk_1 = require("@builder.io/sdk");
-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 create_mitosis_node_1 = require("../helpers/create-mitosis-node");
-var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
-var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
-var builder_1 = require("../parsers/builder");
-var getCssFromNode = function (node) {
+const sdk_1 = require("@builder.io/sdk");
+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 create_mitosis_node_1 = require("../helpers/create-mitosis-node");
+const filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
+const is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+const builder_1 = require("../parsers/builder");
+const getCssFromNode = (node) => {
     var _a;
-    var css = (_a = node.bindings.css) === null || _a === void 0 ? void 0 : _a.code;
+    const css = (_a = node.bindings.css) === null || _a === void 0 ? void 0 : _a.code;
     if (css) {
         return json5_1.default.parse(css);
     }
@@ -43,25 +23,37 @@ var getCssFromNode = function (node) {
 };
 function getComponentInputNames(componentName) {
     var _a;
-    var componentInfo = sdk_1.Builder.components.find(function (item) { return item.name === componentName; });
-    return ((_a = componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.inputs) === null || _a === void 0 ? void 0 : _a.map(function (item) { return item.name; })) || [];
+    const componentInfo = sdk_1.Builder.components.find((item) => item.name === componentName);
+    return ((_a = componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.inputs) === null || _a === void 0 ? void 0 : _a.map((item) => item.name)) || [];
 }
-var wrapOutput = function (node, child, components) {
-    var inputNames = getComponentInputNames(node.name);
+const wrapOutput = (node, child, components) => {
+    const inputNames = getComponentInputNames(node.name);
     (0, exports.compileAwayBuilderComponentsFromTree)(child, components);
-    return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({}, node), { properties: __assign({}, lodash_1.omit.apply(void 0, __spreadArray([node.properties], inputNames, false))), bindings: __assign({}, lodash_1.omit.apply(void 0, __spreadArray([node.bindings], inputNames, false))), 
+    return (0, create_mitosis_node_1.createMitosisNode)({
+        ...node,
+        properties: {
+            ...(0, lodash_1.omit)(node.properties, ...inputNames),
+        },
+        bindings: {
+            ...(0, lodash_1.omit)(node.bindings, ...inputNames),
+        },
         // TODO: forward tagName as a $tagName="..."
-        name: node.properties._tagName || node.properties.$tagName || 'div', children: Array.isArray(child) ? child : [child] }));
+        name: node.properties._tagName || node.properties.$tagName || 'div',
+        children: Array.isArray(child) ? child : [child],
+    });
 };
 exports.components = {
-    CoreButton: function (node, context, components) {
-        var properties = {};
-        var bindings = {};
+    CoreButton(node, context, components) {
+        const properties = {};
+        const bindings = {};
         if (!node.properties.href && node.bindings.css) {
-            var css = json5_1.default.parse(node.bindings.css.code);
+            const css = json5_1.default.parse(node.bindings.css.code);
             // When using button tag ensure we have all: unset and
             // be sure that is the first style in the list
-            node.bindings.css.code = json5_1.default.stringify(__assign({ all: 'unset' }, css));
+            node.bindings.css.code = json5_1.default.stringify({
+                all: 'unset',
+                ...css,
+            });
         }
         if ('link' in node.properties) {
             properties.href = node.properties.link;
@@ -88,15 +80,25 @@ exports.components = {
             ];
         }
         if ('openInNewTab' in node.bindings) {
-            bindings.target = "".concat(node.bindings.openInNewTab, " ? '_blank' : '_self'");
+            bindings.target = `${node.bindings.openInNewTab} ? '_blank' : '_self'`;
         }
-        var omitFields = ['link', 'openInNewTab', 'text'];
-        var hasLink = node.properties.link || node.bindings.link;
-        return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({}, node), { 
+        const omitFields = ['link', 'openInNewTab', 'text'];
+        const hasLink = node.properties.link || node.bindings.link;
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            ...node,
             // TODO: use 'button' tag for no link, and add `all: unset` to CSS string only then
-            name: hasLink ? 'a' : 'button', properties: __assign(__assign({}, (0, lodash_1.omit)(node.properties, omitFields)), properties), bindings: __assign(__assign({}, (0, lodash_1.omit)(node.bindings, omitFields)), bindings) }));
+            name: hasLink ? 'a' : 'button',
+            properties: {
+                ...(0, lodash_1.omit)(node.properties, omitFields),
+                ...properties,
+            },
+            bindings: {
+                ...(0, lodash_1.omit)(node.bindings, omitFields),
+                ...bindings,
+            },
+        });
     },
-    Embed: function (node, context, components) {
+    Embed(node, context, components) {
         return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: node.properties.builderTag || 'div',
             properties: {
@@ -104,23 +106,19 @@ exports.components = {
             },
         }), components);
     },
-    BuilderAccordion: function (node, context, components) {
+    BuilderAccordion(node, context, components) {
         var _a;
-        var itemsJSON = ((_a = node.bindings.items) === null || _a === void 0 ? void 0 : _a.code) || '[]';
-        var accordionItems = json5_1.default.parse(itemsJSON);
-        var children = accordionItems.map(function (accordionItem) {
-            var titleChildren = accordionItem.title.map(function (element) {
-                return (0, builder_1.builderElementToMitosisNode)(element, {
-                    includeBuilderExtras: true,
-                    preserveTextBlocks: true,
-                });
-            });
-            var detailChildren = accordionItem.detail.map(function (element) {
-                return (0, builder_1.builderElementToMitosisNode)(element, {
-                    includeBuilderExtras: true,
-                    preserveTextBlocks: true,
-                });
-            });
+        const itemsJSON = ((_a = node.bindings.items) === null || _a === void 0 ? void 0 : _a.code) || '[]';
+        const accordionItems = json5_1.default.parse(itemsJSON);
+        const children = accordionItems.map((accordionItem) => {
+            const titleChildren = accordionItem.title.map((element) => (0, builder_1.builderElementToMitosisNode)(element, {
+                includeBuilderExtras: true,
+                preserveTextBlocks: true,
+            }));
+            const detailChildren = accordionItem.detail.map((element) => (0, builder_1.builderElementToMitosisNode)(element, {
+                includeBuilderExtras: true,
+                preserveTextBlocks: true,
+            }));
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'div',
                 properties: { builder: 'accordion' },
@@ -146,30 +144,30 @@ exports.components = {
             children: children,
         }), components);
     },
-    BuilderMasonry: function () {
+    BuilderMasonry() {
         // TODO
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: { 'data-missing-component': 'BuilderMasonry' },
         });
     },
-    BuilderTabs: function () {
+    BuilderTabs() {
         // TODO
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: { 'data-missing-component': 'BuilderTabs' },
         });
     },
-    BuilderCarousel: function () {
+    BuilderCarousel() {
         // TODO
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: { 'data-missing-component': 'BuilderCarousel' },
         });
     },
-    CustomCode: function (node, context, components) {
+    CustomCode(node, context, components) {
         var _a;
-        var bindings = {};
+        const bindings = {};
         if ((_a = node === null || node === void 0 ? void 0 : node.bindings) === null || _a === void 0 ? void 0 : _a.code) {
             bindings.innerHTML = node.bindings.code;
         }
@@ -181,58 +179,76 @@ exports.components = {
             bindings: bindings,
         }), components);
     },
-    CoreSection: function (node, context, components) {
+    CoreSection(node, context, components) {
         var _a, _b;
-        var css = getCssFromNode(node);
+        const css = getCssFromNode(node);
         return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: 'section',
-            properties: __assign(__assign(__assign({}, node.properties), { $name: 'section' }), (((_a = node.bindings.lazyLoad) === null || _a === void 0 ? void 0 : _a.code) === 'true' && {
-                lazyLoad: 'true',
-            })),
+            properties: {
+                ...node.properties,
+                $name: 'section',
+                ...(((_a = node.bindings.lazyLoad) === null || _a === void 0 ? void 0 : _a.code) === 'true' && {
+                    lazyLoad: 'true',
+                }),
+            },
             bindings: {
                 css: (0, bindings_1.createSingleBinding)({
-                    code: JSON.stringify(__assign(__assign({}, css), { width: '100%', alignSelf: 'stretch', flexGrow: '1', boxSizing: 'border-box', maxWidth: "".concat((((_b = node.bindings.maxWidth) === null || _b === void 0 ? void 0 : _b.code) && Number(node.bindings.maxWidth.code)) || 1200, "px"), display: 'flex', flexDirection: 'column', alignItems: 'stretch', marginLeft: 'auto', marginRight: 'auto' })),
+                    code: JSON.stringify({
+                        ...css,
+                        width: '100%',
+                        alignSelf: 'stretch',
+                        flexGrow: '1',
+                        boxSizing: 'border-box',
+                        maxWidth: `${(((_b = node.bindings.maxWidth) === null || _b === void 0 ? void 0 : _b.code) && Number(node.bindings.maxWidth.code)) || 1200}px`,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'stretch',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                    }),
                 }),
             },
             children: node.children,
         }), components);
     },
-    Columns: function (node, context, components) {
-        var _a;
-        var columns = node.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).map(function (item) {
+    Columns(node, context, components) {
+        const columns = node.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).map((item) => {
             var _a;
             return ({
                 width: parseFloat(item.properties.width || ((_a = item.bindings.width) === null || _a === void 0 ? void 0 : _a.code) || '0') || 0,
                 children: item.children,
             });
         });
-        var gutterSize = (node.properties.getterSize && parseFloat(node.properties.getterSize)) || 20;
+        const gutterSize = (node.properties.getterSize && parseFloat(node.properties.getterSize)) || 20;
         function getWidth(index) {
             return (columns[index] && columns[index].width) || 100 / columns.length;
         }
         function getColumnWidth(index) {
-            return "".concat(Math.round(getWidth(index)), "%");
+            return `${Math.round(getWidth(index))}%`;
         }
-        var properties = node.properties;
+        const { properties } = node;
         return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             bindings: {
                 css: (0, bindings_1.createSingleBinding)({
-                    code: JSON.stringify(__assign({ gap: "".concat(gutterSize, "px"), display: 'flex' }, (properties.stackColumnsAt === 'never'
-                        ? {}
-                        : (_a = {},
-                            _a["@media (max-width: ".concat(properties.stackColumnsAt === 'mobile' ? 640 : 991, "px)")] = {
-                                flexDirection: properties.reverseColumnsWhenStacked === 'true'
-                                    ? 'column-reverse'
-                                    : 'column',
-                                alignItems: 'stretch',
-                                gap: "0px",
-                            },
-                            _a)))),
+                    code: JSON.stringify({
+                        gap: `${gutterSize}px`,
+                        display: 'flex',
+                        ...(properties.stackColumnsAt === 'never'
+                            ? {}
+                            : {
+                                [`@media (max-width: ${properties.stackColumnsAt === 'mobile' ? 640 : 991}px)`]: {
+                                    flexDirection: properties.reverseColumnsWhenStacked === 'true'
+                                        ? 'column-reverse'
+                                        : 'column',
+                                    alignItems: 'stretch',
+                                    gap: `0px`,
+                                },
+                            }),
+                    }),
                 }),
             },
-            children: columns.map(function (col, index) {
-                var _a;
+            children: columns.map((col, index) => {
                 return (0, create_mitosis_node_1.createMitosisNode)({
                     name: 'div',
                     properties: {
@@ -240,14 +256,22 @@ exports.components = {
                     },
                     bindings: {
                         css: (0, bindings_1.createSingleBinding)({
-                            code: JSON.stringify(__assign({ display: 'flex', flexDirection: 'column', alignItems: 'stretch', lineHeight: 'normal', width: "".concat(getColumnWidth(index)), marginLeft: "".concat(index === 0 ? 0 : gutterSize, "px") }, (properties.stackColumnsAt === 'never'
-                                ? {}
-                                : (_a = {},
-                                    _a["@media (max-width: ".concat(properties.stackColumnsAt === 'mobile' ? 640 : 991, "px)")] = {
-                                        width: '100%',
-                                        marginLeft: 0,
-                                    },
-                                    _a)))),
+                            code: JSON.stringify({
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'stretch',
+                                lineHeight: 'normal',
+                                width: `${getColumnWidth(index)}`,
+                                marginLeft: `${index === 0 ? 0 : gutterSize}px`,
+                                ...(properties.stackColumnsAt === 'never'
+                                    ? {}
+                                    : {
+                                        [`@media (max-width: ${properties.stackColumnsAt === 'mobile' ? 640 : 991}px)`]: {
+                                            width: '100%',
+                                            marginLeft: 0,
+                                        },
+                                    }),
+                            }),
                         }),
                     },
                     children: col.children,
@@ -255,35 +279,51 @@ exports.components = {
             }),
         }), components);
     },
-    Image: function (node, context, components) {
+    Image(node, context, components) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        var _k = node.properties, backgroundSize = _k.backgroundSize, backgroundPosition = _k.backgroundPosition;
-        var srcset = node.properties.srcset;
-        var aspectRatio = ((_a = node.bindings.aspectRatio) === null || _a === void 0 ? void 0 : _a.code)
+        const { backgroundSize, backgroundPosition } = node.properties;
+        const { srcset } = node.properties;
+        let aspectRatio = ((_a = node.bindings.aspectRatio) === null || _a === void 0 ? void 0 : _a.code)
             ? parseFloat(node.bindings.aspectRatio.code)
             : null;
         if (typeof aspectRatio === 'number' && isNaN(aspectRatio)) {
             aspectRatio = null;
         }
-        var image = node.properties.image;
-        var srcSet = srcset || generateBuilderIoSrcSet(image);
-        var css = getCssFromNode(node);
-        var noWebp = ((_b = node.bindings.noWebp) === null || _b === void 0 ? void 0 : _b.code) === 'true';
-        var img = (0, create_mitosis_node_1.createMitosisNode)({
+        const image = node.properties.image;
+        const srcSet = srcset || generateBuilderIoSrcSet(image);
+        const css = getCssFromNode(node);
+        const noWebp = ((_b = node.bindings.noWebp) === null || _b === void 0 ? void 0 : _b.code) === 'true';
+        const img = (0, create_mitosis_node_1.createMitosisNode)({
             name: 'img',
-            properties: noUndefined(__assign({ loading: 'lazy', sizes: node.properties.sizes, alt: node.properties.altText }, (noWebp
-                ? {
-                    src: image,
-                }
-                : {
-                    srcSet: srcSet || null,
-                }))),
+            properties: noUndefined({
+                loading: 'lazy',
+                sizes: node.properties.sizes,
+                alt: node.properties.altText,
+                // We set noWebp to true for SVGs. in this case, we
+                // also don't need srcset, just a src is better
+                ...(noWebp
+                    ? {
+                        src: image,
+                    }
+                    : {
+                        srcSet: srcSet || null,
+                    }),
+            }),
             bindings: noUndefined({
                 src: ((_c = node.bindings.image) === null || _c === void 0 ? void 0 : _c.code) && { code: (_d = node.bindings.image) === null || _d === void 0 ? void 0 : _d.code },
                 sizes: ((_e = node.bindings.sizes) === null || _e === void 0 ? void 0 : _e.code) && { code: (_f = node.bindings.sizes) === null || _f === void 0 ? void 0 : _f.code },
                 style: ((_g = node.bindings.style) === null || _g === void 0 ? void 0 : _g.code) && { code: (_h = node.bindings.style) === null || _h === void 0 ? void 0 : _h.code },
                 css: (0, bindings_1.createSingleBinding)({
-                    code: JSON.stringify(__assign(__assign({ aspectRatio: aspectRatio ? String((0, lodash_1.round)(1 / aspectRatio, 2)) : undefined, objectFit: backgroundSize || 'cover', objectPosition: backgroundPosition || 'center', width: '100%' }, css), { display: undefined, flexDirection: undefined, position: css.position === 'relative' ? undefined : css.position })),
+                    code: JSON.stringify({
+                        aspectRatio: aspectRatio ? String((0, lodash_1.round)(1 / aspectRatio, 2)) : undefined,
+                        objectFit: backgroundSize || 'cover',
+                        objectPosition: backgroundPosition || 'center',
+                        width: '100%',
+                        ...css,
+                        display: undefined,
+                        flexDirection: undefined,
+                        position: css.position === 'relative' ? undefined : css.position,
+                    }),
                 }),
             }),
         });
@@ -291,15 +331,24 @@ exports.components = {
             return img;
         }
         // TODO: deal with links: anchor tag and href
-        var root = (0, create_mitosis_node_1.createMitosisNode)({
+        const root = (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             bindings: noUndefined({
                 css: (0, bindings_1.createSingleBinding)({
-                    code: JSON.stringify(__assign(__assign({ display: 'flex', flexDirection: 'column' }, css), { position: 'relative' })),
+                    code: JSON.stringify({
+                        display: 'flex',
+                        flexDirection: 'column',
+                        ...css,
+                        position: 'relative',
+                    }),
                 }),
             }),
-            children: __spreadArray([
-                __assign(__assign({}, img), { bindings: __assign(__assign({}, img.bindings), { css: (0, bindings_1.createSingleBinding)({
+            children: [
+                {
+                    ...img,
+                    bindings: {
+                        ...img.bindings,
+                        css: (0, bindings_1.createSingleBinding)({
                             code: JSON.stringify({
                                 position: 'absolute',
                                 inset: '0',
@@ -308,27 +357,39 @@ exports.components = {
                                 objectFit: backgroundSize || 'cover',
                                 objectPosition: backgroundPosition || 'center',
                             }),
-                        }) }) })
-            ], node.children.map(function (child) {
-                var newChild = __assign(__assign({}, child), { bindings: __assign(__assign({}, child.bindings), { css: (0, bindings_1.createSingleBinding)({
-                            code: JSON.stringify(__assign({ position: 'relative' }, getCssFromNode(child))),
-                        }) }) });
-                (0, exports.compileAwayBuilderComponentsFromTree)(newChild, components);
-                return newChild;
-            }), true),
+                        }),
+                    },
+                },
+                ...node.children.map((child) => {
+                    const newChild = {
+                        ...child,
+                        bindings: {
+                            ...child.bindings,
+                            css: (0, bindings_1.createSingleBinding)({
+                                code: JSON.stringify({
+                                    position: 'relative',
+                                    ...getCssFromNode(child),
+                                }),
+                            }),
+                        },
+                    };
+                    (0, exports.compileAwayBuilderComponentsFromTree)(newChild, components);
+                    return newChild;
+                }),
+            ],
         });
         return root;
     },
-    Video: function (node, context, components) {
+    Video(node, context, components) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        var aspectRatio = ((_a = node.bindings.aspectRatio) === null || _a === void 0 ? void 0 : _a.code)
+        let aspectRatio = ((_a = node.bindings.aspectRatio) === null || _a === void 0 ? void 0 : _a.code)
             ? parseFloat(node.bindings.aspectRatio.code)
             : null;
         if (typeof aspectRatio === 'number' && isNaN(aspectRatio)) {
             aspectRatio = null;
         }
-        var videoContainerNodes = [];
-        var css = getCssFromNode(node);
+        const videoContainerNodes = [];
+        const css = getCssFromNode(node);
         videoContainerNodes.push((0, create_mitosis_node_1.createMitosisNode)({
             name: 'video',
             properties: noUndefined({
@@ -358,7 +419,15 @@ exports.components = {
                 },
                 loop: ((_m = node.bindings.loop) === null || _m === void 0 ? void 0 : _m.code) && { code: (_o = node.bindings.loop) === null || _o === void 0 ? void 0 : _o.code },
                 css: (0, bindings_1.createSingleBinding)({
-                    code: JSON.stringify(__assign({ width: '100%', height: '100%', objectFit: node.properties.fit, objectPosition: node.properties.position, borderRadius: '1', position: aspectRatio ? 'absolute' : '' }, css)),
+                    code: JSON.stringify({
+                        width: '100%',
+                        height: '100%',
+                        objectFit: node.properties.fit,
+                        objectPosition: node.properties.position,
+                        borderRadius: '1',
+                        position: aspectRatio ? 'absolute' : '',
+                        ...css,
+                    }),
                 }),
             }),
             children: [
@@ -410,7 +479,7 @@ exports.components = {
                 },
                 children: node.children,
             }));
-        var videoContainer = (0, create_mitosis_node_1.createMitosisNode)({
+        const videoContainer = (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             bindings: {
                 css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify({ position: 'relative' }) }),
@@ -420,12 +489,12 @@ exports.components = {
         return wrapOutput(node, videoContainer, components);
     },
 };
-var compileAwayBuilderComponentsFromTree = function (tree, components) {
+const compileAwayBuilderComponentsFromTree = (tree, components) => {
     (0, legacy_1.default)(tree).forEach(function (item) {
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            var mapper = components[item.name];
+            const mapper = components[item.name];
             if (mapper) {
-                var result = mapper(item, this, components);
+                const result = mapper(item, this, components);
                 if (result) {
                     this.update(result);
                 }
@@ -434,50 +503,48 @@ var compileAwayBuilderComponentsFromTree = function (tree, components) {
     });
 };
 exports.compileAwayBuilderComponentsFromTree = compileAwayBuilderComponentsFromTree;
-var compileAwayBuilderComponents = function (pluginOptions) {
-    if (pluginOptions === void 0) { pluginOptions = {}; }
-    var obj = exports.components;
+const compileAwayBuilderComponents = (pluginOptions = {}) => {
+    let obj = exports.components;
     if (pluginOptions.omit) {
         obj = (0, lodash_1.omit)(obj, pluginOptions.omit);
     }
     if (pluginOptions.only) {
         obj = (0, lodash_1.pick)(obj, pluginOptions.only);
     }
-    return function (options) { return ({
+    return (options) => ({
         json: {
-            pre: function (json) {
+            pre: (json) => {
                 (0, exports.compileAwayBuilderComponentsFromTree)(json, obj);
             },
         },
-    }); };
+    });
 };
 exports.compileAwayBuilderComponents = compileAwayBuilderComponents;
-function updateQueryParam(uri, key, value) {
-    if (uri === void 0) { uri = ''; }
-    var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
-    var separator = uri.indexOf('?') !== -1 ? '&' : '?';
+function updateQueryParam(uri = '', key, value) {
+    const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+    const separator = uri.indexOf('?') !== -1 ? '&' : '?';
     if (uri.match(re)) {
         return uri.replace(re, '$1' + key + '=' + encodeURIComponent(value) + '$2');
     }
     return uri + separator + key + '=' + encodeURIComponent(value);
 }
 function generateBuilderIoSrcSet(image) {
-    var isBuilderIo = !!(image || '').match(/builder\.io/);
+    const isBuilderIo = !!(image || '').match(/builder\.io/);
     return isBuilderIo
         ? [100, 200, 400, 800, 1200, 1600, 2000]
-            .map(function (size) { return "".concat(updateQueryParam(image, 'width', String(size)), " ").concat(size, "w"); })
+            .map((size) => `${updateQueryParam(image, 'width', String(size))} ${size}w`)
             .concat([image])
             .join(', ')
         : '';
 }
 function noUndefined(obj) {
-    var cleanObj = {};
-    for (var key in obj) {
+    const cleanObj = {};
+    for (const key in obj) {
         if (Object.prototype.hasOwnProperty.call(obj, key)) {
-            var value = obj[key];
+            const value = obj[key];
             if (value != null) {
                 if (typeof value == 'object') {
-                    var ret = noUndefined(value);
+                    const ret = noUndefined(value);
                     if (Object.keys(ret).length) {
                         cleanObj[key] = ret;
                     }

package/dist/src/plugins/compile-away-components.js

@@ -1,25 +1,17 @@
 "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.compileAwayComponents = exports.getRenderOptions = void 0;
-var lodash_1 = require("lodash");
-var legacy_1 = __importDefault(require("neotraverse/legacy"));
-var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
-var getRenderOptions = function (node) {
-    return __assign(__assign({}, (0, lodash_1.mapValues)(node.properties, function (value) { return "\"".concat(value, "\""); })), (0, lodash_1.mapValues)(node.bindings, function (value) { return "{".concat(value, "}"); }));
+const lodash_1 = require("lodash");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+const getRenderOptions = (node) => {
+    return {
+        ...(0, lodash_1.mapValues)(node.properties, (value) => `"${value}"`),
+        ...(0, lodash_1.mapValues)(node.bindings, (value) => `{${value}}`),
+    };
 };
 exports.getRenderOptions = getRenderOptions;
 /**
@@ -38,14 +30,14 @@ exports.getRenderOptions = getRenderOptions;
  *      ]
  *    })
  */
-var compileAwayComponents = function (pluginOptions) { return function (options) { return ({
+const compileAwayComponents = (pluginOptions) => (options) => ({
     json: {
-        pre: function (json) {
+        pre: (json) => {
             (0, legacy_1.default)(json).forEach(function (item) {
                 if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-                    var mapper = pluginOptions.components[item.name];
+                    const mapper = pluginOptions.components[item.name];
                     if (mapper) {
-                        var result = mapper(item, this);
+                        const result = mapper(item, this);
                         if (result) {
                             this.update(result);
                         }
@@ -54,5 +46,5 @@ var compileAwayComponents = function (pluginOptions) { return function (options)
             });
         },
     },
-}); }; };
+});
 exports.compileAwayComponents = compileAwayComponents;