@builder.io/mitosis 0.0.45-5 → 0.0.48

package/dist/src/plugins/compile-away-builder-components.d.ts

@@ -1,6 +1,6 @@
 import { TraverseContext } from 'traverse';
-import { MitosisNode } from '../types/mitosis-node';
 import { MitosisComponent } from '../types/mitosis-component';
+import { MitosisNode } from '../types/mitosis-node';
 declare type CompileAwayComponentsMap = {
     [key: string]: (node: MitosisNode, context: TraverseContext, components: CompileAwayComponentsMap) => MitosisNode | void;
 };

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

@@ -10,32 +10,52 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 react_1 = require("@builder.io/react");
 var lodash_1 = require("lodash");
-var parse_node_1 = require("../helpers/parse-node");
 var traverse_1 = __importDefault(require("traverse"));
-var mitosis_1 = require("../generators/mitosis");
-var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
 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 react_1 = require("@builder.io/react");
+var JSON5 = __importStar(require("json5"));
+var builder_1 = require("../parsers/builder");
 function getComponentInputNames(componentName) {
     var _a;
     var componentInfo = react_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; })) || [];
 }
-var getRenderOptions = function (node) {
-    return __assign(__assign({}, lodash_1.mapValues(node.properties, function (value) { return "\"" + value + "\""; })), lodash_1.mapValues(node.bindings, function (value) { return "{" + value + "}"; }));
-};
 function updateQueryParam(uri, key, value) {
     if (uri === void 0) { uri = ''; }
     var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
@@ -47,8 +67,8 @@ function updateQueryParam(uri, key, value) {
 }
 var wrapOutput = function (node, child, components) {
     var inputNames = getComponentInputNames(node.name);
-    exports.compileAwayBuilderComponentsFromTree(child, components);
-    return create_mitosis_node_1.createMitosisNode(__assign(__assign({}, node), { properties: __assign({}, lodash_1.omit.apply(void 0, __spreadArray([node.properties], inputNames))), bindings: __assign({}, lodash_1.omit.apply(void 0, __spreadArray([node.bindings], inputNames))), 
+    (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))), 
         // TODO: forward tagName as a $tagName="..."
         name: node.properties._tagName || node.properties.$tagName || 'div', children: Array.isArray(child) ? child : [child] }));
 };
@@ -69,67 +89,117 @@ exports.components = {
             bindings.innerHTML = node.properties.text;
         }
         if ('openInNewTab' in node.bindings) {
-            bindings.target = node.bindings.openInNewTab + " ? '_blank' : '_self'";
+            bindings.target = "".concat(node.bindings.openInNewTab, " ? '_blank' : '_self'");
         }
         var omitFields = ['link', 'openInNewTab', 'text'];
         var hasLink = node.properties.link || node.bindings.link;
-        return create_mitosis_node_1.createMitosisNode(__assign(__assign({}, node), { name: hasLink ? 'a' : node.properties.$tagName || 'span', properties: __assign(__assign({}, lodash_1.omit(node.properties, omitFields)), properties), bindings: __assign(__assign({}, lodash_1.omit(node.bindings, omitFields)), bindings) }));
+        return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({}, node), { name: hasLink ? 'a' : node.properties.$tagName || 'span', properties: __assign(__assign({}, (0, lodash_1.omit)(node.properties, omitFields)), properties), bindings: __assign(__assign({}, (0, lodash_1.omit)(node.bindings, omitFields)), bindings) }));
     },
     Embed: function (node, context, components) {
-        return wrapOutput(node, create_mitosis_node_1.createMitosisNode({
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: node.properties.builderTag || 'div',
             properties: {
-                innerHTML: (node.properties.content || '').replace(/"/g, '&quot;'),
+                innerHTML: node.properties.content || '',
             },
         }), components);
     },
-    BuilderAccordion: function () {
-        // TODO
-        return create_mitosis_node_1.createMitosisNode({
-            name: 'div',
-            properties: { 'data-missing-component': 'BuilderAccordion' },
+    BuilderAccordion: function (node, context, components) {
+        var itemsJSON = node.bindings.items || '[]';
+        var accordionItems = JSON5.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,
+                });
+            });
+            return (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'div',
+                properties: { builder: 'accordion' },
+                children: [
+                    (0, create_mitosis_node_1.createMitosisNode)({
+                        name: 'div',
+                        properties: { builder: 'accordion-title' },
+                        children: titleChildren,
+                    }),
+                    (0, create_mitosis_node_1.createMitosisNode)({
+                        name: 'div',
+                        properties: { builder: 'accordion-detail' },
+                        children: detailChildren,
+                    }),
+                ],
+            });
         });
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
+            name: node.properties.builderTag || 'div',
+            properties: {
+                $name: 'accordion',
+            },
+            children: children,
+        }), components);
     },
     BuilderMasonry: function () {
         // TODO
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: { 'data-missing-component': 'BuilderMasonry' },
         });
     },
     BuilderTabs: function () {
         // TODO
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: { 'data-missing-component': 'BuilderTabs' },
         });
     },
     BuilderCarousel: function () {
         // TODO
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: { 'data-missing-component': 'BuilderCarousel' },
         });
     },
     CustomCode: function (node, context, components) {
-        var options = getRenderOptions(node);
-        return wrapOutput(node, create_mitosis_node_1.createMitosisNode({
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: node.properties.builderTag || 'div',
             properties: {
-                innerHTML: (node.properties.code || '').replace(/"/g, '&quot;'),
+                innerHTML: node.properties.code || '',
             },
         }), components);
     },
     CoreSection: function (node, context, components) {
-        return wrapOutput(node, parse_node_1.parseNode("<section\n      $name=\"section\"\n      " + (node.bindings.lazyLoad === 'true' ? 'lazyload="true"' : '') + "\n      css={{\n        width: '100%',\n        alignSelf: 'stretch',\n        flexGrow: '1',\n        boxSizing: 'border-box',\n        maxWidth: '" + ((node.bindings.maxWidth && Number(node.bindings.maxWidth)) || 1200) + "px',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'stretch',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n      }}\n    >\n    " + node.children
-            .map(function (block) {
-            return mitosis_1.blockToMitosis(block, {
-                prettier: false,
-            });
-        })
-            .join('\n') + "\n    </section>"), components);
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'section',
+            properties: __assign(__assign(__assign({}, node.properties), { $name: 'section' }), (node.bindings.lazyLoad === 'true' && {
+                lazyLoad: 'true',
+            })),
+            bindings: {
+                css: JSON.stringify({
+                    width: '100%',
+                    alignSelf: 'stretch',
+                    flexGrow: '1',
+                    boxSizing: 'border-box',
+                    maxWidth: "".concat((node.bindings.maxWidth &&
+                        Number(node.bindings.maxWidth)) ||
+                        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) { return ({
             width: parseFloat(item.properties.width || item.bindings.width || '0') || 0,
             children: item.children,
@@ -141,31 +211,51 @@ exports.components = {
         }
         function getColumnWidth(index) {
             var subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-            return "calc(" + getWidth(index) + "% - " + subtractWidth + "px)";
+            return "calc(".concat(getWidth(index), "% - ").concat(subtractWidth, "px)");
         }
         var properties = node.properties;
-        return wrapOutput(node, parse_node_1.parseNode("\n        <div\n          class=\"builder-columns\"\n          $name=\"columns\"\n          css={{\n            display: 'flex',\n            " + (properties.stackColumnsAt === 'never'
-            ? ''
-            : "\n              \"@media (max-width: " + (properties.stackColumnsAt !== 'tablet' ? 639 : 999) + "px)\": {\n                flexDirection: \"" + (properties.reverseColumnsWhenStacked === 'true'
-                ? 'column-reverse'
-                : 'column') + "\",\n                alignItems: 'stretch',\n              },\n            ") + "\n          }}\n        >\n          " + columns
-            .map(function (col, index) {
-            // TODO: pass size down in context
-            return "<div\n              $name=\"column\"\n              class=\"builder-column\"\n              css={{\n                display: 'flex',\n                flexDirection: 'column',\n                alignItems: 'stretch',\n                lineHeight: 'normal',\n                width: \"" + getColumnWidth(index) + "\",\n                marginLeft: \"" + (index === 0 ? 0 : gutterSize) + "px\",\n                " + (properties.stackColumnsAt === 'never'
-                ? ''
-                : "\n                  \n                  \"@media (max-width: " + (properties.stackColumnsAt !== 'tablet' ? 639 : 999) + "px)\": {\n                    width: '100%',\n                    marginLeft: 0,\n                  },\n                  ") + "\n              }}\n            >\n              " + col.children
-                .map(function (block) {
-                return mitosis_1.blockToMitosis(block, {
-                    prettier: false,
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'div',
+            properties: {
+                class: 'builder-columns',
+            },
+            bindings: {
+                css: JSON.stringify(__assign({ display: 'flex' }, (properties.stackColumnsAt === 'never'
+                    ? {}
+                    : (_a = {},
+                        _a["@media (max-width: ".concat(properties.stackColumnsAt !== 'tablet' ? 639 : 999, "px)")] = {
+                            flexDirection: properties.reverseColumnsWhenStacked === 'true'
+                                ? 'column-reverse'
+                                : 'column',
+                            alignItems: 'stretch',
+                        },
+                        _a)))),
+            },
+            children: columns.map(function (col, index) {
+                var _a;
+                return (0, create_mitosis_node_1.createMitosisNode)({
+                    name: 'div',
+                    properties: {
+                        $name: 'column',
+                        class: 'builder-column',
+                    },
+                    bindings: {
+                        css: 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 !== 'tablet' ? 639 : 999, "px)")] = {
+                                    width: '100%',
+                                    marginLeft: 0,
+                                },
+                                _a)))),
+                    },
+                    children: col.children,
                 });
-            })
-                .join('\n') + "\n            </div>\n          ";
-        })
-            .join('\n') + "\n        </div>\n  "), components);
+            }),
+        }), components);
     },
     Image: function (node, context, components) {
-        var options = getRenderOptions(node);
-        var backgroundSize = options.backgroundSize, backgroundPosition = options.backgroundPosition, sizes = options.sizes, lazy = options.lazy, image = options.image;
+        var _a = node.properties, backgroundSize = _a.backgroundSize, backgroundPosition = _a.backgroundPosition;
         var srcset = node.properties.srcset;
         var widths = [100, 200, 400, 800, 1200, 1600, 2000];
         var aspectRatio = node.bindings.aspectRatio
@@ -175,56 +265,193 @@ exports.components = {
             aspectRatio = null;
         }
         var srcSet = srcset ||
-            "" + ((node.properties.image || '').match(/builder\.io/)
+            "".concat((node.properties.image || '').match(/builder\.io/)
                 ? widths
                     .map(function (size) {
-                    return updateQueryParam(node.properties.image, 'width', String(size)) + " " + size + "w";
+                    return "".concat(updateQueryParam(node.properties.image, 'width', String(size)), " ").concat(size, "w");
                 })
                     .concat([node.properties.image])
                     .join(', ')
                 : '');
-        return wrapOutput(node, parse_node_1.parseNodes("\n      <picture>\n        " + (srcSet && srcSet.match(/builder\.io/)
-            ? "<source srcSet=\"" + srcSet.replace(/\?/g, '?format=webp&') + "\" type=\"image/webp\" />"
-            : '') + "\n        <img\n          $name=\"image\"\n          " + (lazy ? " loading=\"lazy\" " : '') + "\n          " + (image ? " src=" + image + " " : '') + " \n          " + (!sizes ? '' : "sizes=" + sizes) + " \n          " + (!srcSet ? '' : "srcSet=\"" + srcSet + "\"") + "\n          css={{\n          objectFit: " + (backgroundSize || '"cover"') + ",\n          objectPosition: " + (backgroundPosition || '"cover"') + ",\n          " + (!aspectRatio
-            ? ''
-            : "\n          position: 'absolute',\n          height: '100%',\n          width: '100%',\n          top: '0',\n          left: '0',\n          ") + "\n        }} />\n      </picture>\n      " + (aspectRatio
-            ? "<div\n          class=\"builder-image-sizer\"\n          $name=\"image-sizer\"\n          css={{\n            width: '100%',\n            paddingTop: \"" + (aspectRatio * 100 + '%') + "\",\n            pointerEvents: 'none',\n            fontSize: '0',\n          }} />"
-            : '') + "\n        " + (node.children && node.children.length
-            ? "\n          <div\n            $name=\"image-contents\"\n            css={{\n              display: 'flex',\n              flexDirection: 'column',\n              alignItems: 'stretch',\n              position: 'absolute',\n              top: '0',\n              left: '0',\n              width: '100%',\n              height: '100%',\n            }}\n          >\n            " + node.children
-                .map(function (block) {
-                return mitosis_1.blockToMitosis(block, {
-                    prettier: false,
-                });
-            })
-                .join('\n') + "\n          </div>"
-            : '') + "\n      "), components);
+        var source = node.bindings.noWebp !== 'true' &&
+            (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'source',
+                properties: {
+                    srcset: srcSet.replace(/\?/g, '?format=webp&'),
+                    type: 'image/webp',
+                },
+            });
+        var img = (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'img',
+            properties: noUndefined({
+                $name: 'image',
+                loading: node.properties.lazy ? 'lazy' : undefined,
+                src: node.properties.image,
+                sizes: node.properties.sizes,
+                srcset: srcSet || null,
+            }),
+            bindings: noUndefined({
+                loading: node.bindings.lazy ? '"lazy"' : undefined,
+                src: node.bindings.image,
+                sizes: node.bindings.sizes,
+                css: JSON.stringify(__assign({ objectFit: backgroundSize || 'cover', objectPosition: backgroundPosition || 'cover' }, (aspectRatio
+                    ? {
+                        position: 'absolute',
+                        height: '100%',
+                        width: '100%',
+                        top: '0',
+                        left: '0',
+                    }
+                    : {}))),
+            }),
+        });
+        var picture = (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'picture',
+            children: source ? [source, img] : [img],
+        });
+        var imgSizer = aspectRatio &&
+            (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'div',
+                properties: {
+                    $name: 'image-sizer',
+                    class: 'builder-image-sizer',
+                },
+                bindings: {
+                    css: JSON.stringify({
+                        width: '100%',
+                        paddingTop: aspectRatio * 100 + '%',
+                        pointerEvents: 'none',
+                        fontSize: '0',
+                    }),
+                },
+            });
+        var children = node.children &&
+            node.children.length &&
+            (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'div',
+                properties: {
+                    $name: 'image-contents',
+                },
+                bindings: {
+                    css: JSON.stringify({
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'stretch',
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%',
+                    }),
+                },
+                children: node.children,
+            });
+        var imageNodes = [picture];
+        imgSizer && imageNodes.push(imgSizer);
+        children && imageNodes.push(children);
+        return wrapOutput(node, imageNodes, components);
     },
     Video: function (node, context, components) {
-        var options = getRenderOptions(node);
         var aspectRatio = node.bindings.aspectRatio
             ? parseFloat(node.bindings.aspectRatio)
             : null;
         if (typeof aspectRatio === 'number' && isNaN(aspectRatio)) {
             aspectRatio = null;
         }
-        var str = "\n    <div $name=\"video-container\" css={{ position: 'relative' }}>\n      <video\n        " + (options.posterImage ? "poster=" + options.posterImage : '') + "\n        " + (options.autoPlay ? "autoPlay=" + options.autoPlay : '') + "\n        " + (options.muted ? "muted=" + options.muted : '') + "\n        " + (options.controls ? "controls=" + options.controls : '') + "\n        " + (options.loop ? "loop=" + options.loop : '') + "\n        " + (options.lazy ? 'preload="none"' : '') + "\n        $name=\"builder-video\"\n        css={{\n          width: '100%',\n          height: '100%',\n          " + (options.fit ? "objectFit: " + options.fit + "," : '') + "\n          " + (options.position ? "objectPosition: " + options.position + "," : '') + "\n          borderRadius: '1',\n          " + (aspectRatio ? "position: \"absolute\"," : '') + "\n        }}\n      >\n        <source type=\"video/mp4\" src=" + options.video + " />\n      </video>\n      " + (!aspectRatio
-            ? ''
-            : "\n        <div\n          $name=\"builder-video-sizer\"\n          css={{\n            width: '100%',\n            paddingTop: '" + (aspectRatio * 100 + '%') + "',\n            pointerEvents: 'none',\n            fontSize: '0'\n          }}\n        />\n      ") + "\n      " + (node.children && node.children.length
-            ? "\n        <div\n          $name=\"video-contents\"\n          css={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'stretch',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            width: '100%',\n            height: '100%'\n          }}\n        >\n          " + node.children
-                .map(function (block) {
-                return mitosis_1.blockToMitosis(block, {
-                    prettier: false,
-                });
-            })
-                .join('\n') + "\n        </div>"
-            : '') + "\n    </div>\n    ";
-        var output = wrapOutput(node, parse_node_1.parseNodes(str), components);
-        return output;
+        var videoContainerNodes = [];
+        videoContainerNodes.push((0, create_mitosis_node_1.createMitosisNode)({
+            name: 'video',
+            properties: noUndefined({
+                $name: 'builder-video',
+                poster: node.properties.posterImage,
+                autoplay: node.properties.autoPlay,
+                muted: node.properties.muted,
+                controls: node.properties.controls,
+                loop: node.properties.loop,
+                playsinline: node.properties.playsInline,
+                preload: node.properties.lazy ? 'none' : undefined,
+            }),
+            bindings: noUndefined({
+                poster: node.bindings.posterImage,
+                autoplay: node.bindings.autoPlay,
+                muted: node.bindings.muted,
+                controls: node.bindings.controls,
+                playsinline: node.bindings.playsInline,
+                loop: node.bindings.loop,
+                css: JSON.stringify({
+                    width: '100%',
+                    height: '100%',
+                    objectFit: node.properties.fit,
+                    objectPosition: node.properties.position,
+                    borderRadius: '1',
+                    position: aspectRatio ? 'absolute' : '',
+                }),
+            }),
+            children: [
+                (0, create_mitosis_node_1.createMitosisNode)({
+                    name: 'source',
+                    properties: {
+                        type: 'video/mp4',
+                        src: node.properties.video,
+                    },
+                    bindings: {
+                        src: node.bindings.video,
+                    },
+                }),
+            ],
+        }));
+        aspectRatio &&
+            videoContainerNodes.push((0, create_mitosis_node_1.createMitosisNode)({
+                name: 'div',
+                properties: {
+                    $name: 'builder-video-sizer',
+                },
+                bindings: {
+                    css: JSON.stringify({
+                        width: '100%',
+                        paddingTop: aspectRatio * 100 + '%',
+                        pointerEvents: 'none',
+                        fontSize: '0',
+                    }),
+                },
+            }));
+        node.children &&
+            node.children.length &&
+            videoContainerNodes.push((0, create_mitosis_node_1.createMitosisNode)({
+                name: 'div',
+                properties: {
+                    $name: 'image-contents',
+                },
+                bindings: {
+                    css: JSON.stringify({
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'stretch',
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%',
+                    }),
+                },
+                children: node.children,
+            }));
+        var videoContainer = (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'div',
+            properties: {
+                $name: 'video-container',
+            },
+            bindings: {
+                css: JSON.stringify({ position: 'relative' }),
+            },
+            children: videoContainerNodes,
+        });
+        return wrapOutput(node, videoContainer, components);
     },
 };
 var compileAwayBuilderComponentsFromTree = function (tree, components) {
-    traverse_1.default(tree).forEach(function (item) {
-        if (is_mitosis_node_1.isMitosisNode(item)) {
+    (0, traverse_1.default)(tree).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             var mapper = components[item.name];
             if (mapper) {
                 var result = mapper(item, this, components);
@@ -240,17 +467,29 @@ var compileAwayBuilderComponents = function (pluginOptions) {
     if (pluginOptions === void 0) { pluginOptions = {}; }
     var obj = exports.components;
     if (pluginOptions.omit) {
-        obj = lodash_1.omit(obj, pluginOptions.omit);
+        obj = (0, lodash_1.omit)(obj, pluginOptions.omit);
     }
     if (pluginOptions.only) {
-        obj = lodash_1.pick(obj, pluginOptions.only);
+        obj = (0, lodash_1.pick)(obj, pluginOptions.only);
     }
     return function (options) { return ({
         json: {
             pre: function (json) {
-                exports.compileAwayBuilderComponentsFromTree(json, exports.components);
+                (0, exports.compileAwayBuilderComponentsFromTree)(json, exports.components);
             },
         },
     }); };
 };
 exports.compileAwayBuilderComponents = compileAwayBuilderComponents;
+function noUndefined(obj) {
+    var cleanObj = {};
+    for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            var value = obj[key];
+            if (value != null) {
+                cleanObj[key] = value;
+            }
+        }
+    }
+    return cleanObj;
+}

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

@@ -19,7 +19,7 @@ var lodash_1 = require("lodash");
 var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var getRenderOptions = function (node) {
-    return __assign(__assign({}, lodash_1.mapValues(node.properties, function (value) { return "\"" + value + "\""; })), lodash_1.mapValues(node.bindings, function (value) { return "{" + value + "}"; }));
+    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, "}"); }));
 };
 exports.getRenderOptions = getRenderOptions;
 /**
@@ -41,8 +41,8 @@ exports.getRenderOptions = getRenderOptions;
 var compileAwayComponents = function (pluginOptions) { return function (options) { return ({
     json: {
         pre: function (json) {
-            traverse_1.default(json).forEach(function (item) {
-                if (is_mitosis_node_1.isMitosisNode(item)) {
+            (0, traverse_1.default)(json).forEach(function (item) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
                     var mapper = pluginOptions.components[item.name];
                     if (mapper) {
                         var result = mapper(item, this);

package/dist/src/plugins/map-styles.js

@@ -6,9 +6,9 @@ var traverse_nodes_1 = require("../helpers/traverse-nodes");
 var mapStyles = function (pluginOptions) { return function (options) { return ({
     json: {
         pre: function (json) {
-            traverse_nodes_1.tarverseNodes(json, function (node, context) {
-                var styles = get_styles_1.getStyles(node);
-                get_styles_1.setStyles(node, pluginOptions.map(styles || {}, context));
+            (0, traverse_nodes_1.tarverseNodes)(json, function (node, context) {
+                var styles = (0, get_styles_1.getStyles)(node);
+                (0, get_styles_1.setStyles)(node, pluginOptions.map(styles || {}, context));
             });
         },
     },

package/dist/src/targets.d.ts

@@ -0,0 +1,24 @@
+export declare const targets: {
+    angular: (options?: import("./generators/angular").ToAngularOptions) => import(".").Transpiler;
+    builder: (options?: import("./generators/builder").ToBuilderOptions) => ({ component, }: import(".").TranspilerArgs) => {
+        data: {
+            httpRequests: any;
+            jsCode: string;
+            tsCode: string;
+            blocks: import("@builder.io/sdk").BuilderElement[];
+        };
+    };
+    customElement: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;
+    html: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;
+    mitosis: (toMitosisOptions?: Partial<import("./generators/mitosis").ToMitosisOptions>) => import(".").Transpiler;
+    liquid: (options?: import("./generators/liquid").ToLiquidOptions) => import(".").Transpiler;
+    react: (reactOptions?: import("./generators/react").ToReactOptions) => import(".").Transpiler;
+    reactNative: (options?: import("./generators/react-native").ToReactNativeOptions) => import(".").Transpiler;
+    solid: (options?: import("./generators/solid").ToSolidOptions) => import(".").Transpiler;
+    svelte: (options?: import("./generators/svelte").ToSvelteOptions) => import(".").Transpiler;
+    swift: (options?: import("./generators/swift-ui").ToSwiftOptions) => import(".").Transpiler;
+    template: (options?: import("./generators/template").ToTemplateOptions) => import(".").Transpiler;
+    vue: (options?: import("./generators/vue").ToVueOptions) => ({ component, path }: import(".").TranspilerArgs & {
+        path: string;
+    }) => string;
+};