@builder.io/mitosis 0.0.120 → 0.0.121

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

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSvelte = void 0;
 var html_tags_1 = require("../../constants/html_tags");
-var html_tags_2 = require("../../constants/html_tags");
 var bindings_1 = require("../../helpers/bindings");
 var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var is_upper_case_1 = require("../../helpers/is-upper-case");
@@ -20,6 +19,26 @@ var helpers_1 = require("./helpers");
  */
 var SLOT_PREFIX = '$$slots.';
 var mappers = {
+    style: function (_a) {
+        var _b;
+        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
+        var props = '';
+        for (var key in json.properties) {
+            var value = json.properties[key];
+            props += " ".concat(key, "=\"").concat(value, "\" ");
+        }
+        var bindings = '';
+        for (var key in json.bindings) {
+            var value = json.bindings[key];
+            if (value && key !== 'innerHTML') {
+                bindings += " ".concat(key, "=${").concat(value.code, "} ");
+            }
+        }
+        var innerText = ((_b = json.bindings.innerHTML) === null || _b === void 0 ? void 0 : _b.code) || '';
+        // We have to obfuscate `"style"` due to a limitation in the svelte-preprocessor plugin.
+        // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+        return "{@html `<${'style'} ".concat(bindings, " ").concat(props, ">${").concat(innerText, "}<${'/style'}>`}");
+    },
     Fragment: function (_a) {
         var _b;
         var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
@@ -96,18 +115,14 @@ var getTagName = function (_a) {
     /**
      * These are special HTML tags that svelte requires `<svelte:element this={TAG}>`
      */
-    var SPECIAL_HTML_TAGS = ['style', 'script', 'template'];
+    var SPECIAL_HTML_TAGS = ['script', 'template'];
     if (SPECIAL_HTML_TAGS.includes(json.name)) {
         json.bindings.this = (0, bindings_1.createSingleBinding)({
-            code: json.name === 'style'
-                ? // We have to obfuscate `"style"` due to a limitation in the svelte-preprocessor plugin.
-                    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
-                    "\"sty\" + \"le\""
-                : "\"".concat(json.name, "\""),
+            code: "\"".concat(json.name, "\""),
         });
         return SVELTE_SPECIAL_TAGS.ELEMENT;
     }
-    var isValidHtmlTag = html_tags_2.VALID_HTML_TAGS.includes(json.name);
+    var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(json.name);
     var isSpecialSvelteTag = json.name.startsWith('svelte:');
     // Check if any import matches `json.name`
     var hasMatchingImport = parentComponent.imports.some(function (_a) {
@@ -132,7 +147,7 @@ var stringifyBinding = function (node, options) {
             return '';
         }
         var code = binding.code, _b = binding.arguments, cusArgs = _b === void 0 ? ['event'] : _b, type = binding.type;
-        var isValidHtmlTag = html_tags_2.VALID_HTML_TAGS.includes(node.name);
+        var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(node.name);
         if (type === 'spread') {
             var spreadValue = key === 'props' ? '$$props' : code;
             return " {...".concat(spreadValue, "} ");

package/dist/src/index.d.ts

@@ -29,6 +29,7 @@ export * from './generators/taro';
 export * from './generators/template';
 export * from './generators/vue';
 export { checkIsLiteComponentFilePath, checkIsMitosisComponentFilePath, checkIsSvelteComponentFilePath, getComponentFileExtensionForTarget, renameComponentFile, renameImport, } from './helpers/component-file-extensions';
+export { createMitosisNode } from './helpers/create-mitosis-node';
 export * from './helpers/is-mitosis-node';
 export { checkShouldOutputTypeScript } from './helpers/output';
 export * from './helpers/signals';

package/dist/src/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkShouldOutputTypeScript = exports.renameImport = exports.renameComponentFile = exports.getComponentFileExtensionForTarget = exports.checkIsSvelteComponentFilePath = exports.checkIsMitosisComponentFilePath = exports.checkIsLiteComponentFilePath = void 0;
+exports.checkShouldOutputTypeScript = exports.createMitosisNode = exports.renameImport = exports.renameComponentFile = exports.getComponentFileExtensionForTarget = exports.checkIsSvelteComponentFilePath = exports.checkIsMitosisComponentFilePath = exports.checkIsLiteComponentFilePath = void 0;
 __exportStar(require("./flow"), exports);
 __exportStar(require("./generators/alpine"), exports);
 __exportStar(require("./generators/angular"), exports);
@@ -48,6 +48,8 @@ Object.defineProperty(exports, "checkIsSvelteComponentFilePath", { enumerable: t
 Object.defineProperty(exports, "getComponentFileExtensionForTarget", { enumerable: true, get: function () { return component_file_extensions_1.getComponentFileExtensionForTarget; } });
 Object.defineProperty(exports, "renameComponentFile", { enumerable: true, get: function () { return component_file_extensions_1.renameComponentFile; } });
 Object.defineProperty(exports, "renameImport", { enumerable: true, get: function () { return component_file_extensions_1.renameImport; } });
+var create_mitosis_node_1 = require("./helpers/create-mitosis-node");
+Object.defineProperty(exports, "createMitosisNode", { enumerable: true, get: function () { return create_mitosis_node_1.createMitosisNode; } });
 __exportStar(require("./helpers/is-mitosis-node"), exports);
 var output_1 = require("./helpers/output");
 Object.defineProperty(exports, "checkShouldOutputTypeScript", { enumerable: true, get: function () { return output_1.checkShouldOutputTypeScript; } });

package/dist/src/parsers/builder/builder.d.ts

@@ -5,18 +5,13 @@ declare type InternalOptions = {
     skipMapper?: boolean;
 };
 export declare const symbolBlocksAsChildren = false;
-export declare type BuilderToMitosisOptions = {
+declare type BuilderToMitosisOptions = {
     context?: {
         [key: string]: any;
     };
     includeBuilderExtras?: boolean;
     preserveTextBlocks?: boolean;
 };
-export declare type InternalBuilderToMitosisOptions = BuilderToMitosisOptions & {
-    context: {
-        [key: string]: any;
-    };
-};
 export declare const builderElementToMitosisNode: (block: BuilderElement, options: BuilderToMitosisOptions, _internalOptions?: InternalOptions) => MitosisNode;
 /**
  * Take Builder custom jsCode and extract the contents of the useState hook

package/dist/src/parsers/builder/builder.js

@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 };
 };
@@ -287,8 +296,9 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
         delete node.properties.columns;
         node.children =
             ((_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.columns) === null || _b === void 0 ? void 0 : _b.map(function (col, index) {
+                var _a;
                 return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({ name: 'Column', bindings: {
-                        width: { code: col.width },
+                        width: { code: (_a = col.width) === null || _a === void 0 ? void 0 : _a.toString() },
                     } }, (col.link && {
                     properties: {
                         link: col.link,
@@ -331,7 +341,7 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
             css: { code: JSON.stringify(css) },
         }));
         var properties = __assign({}, block.properties);
-        if (block.id)
+        if (options.includeBuilderExtras && block.id)
             properties['builder-id'] = block.id;
         if (block.class)
             properties['class'] = block.class;
@@ -345,8 +355,9 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
                 code: wrapBindingIfNeeded(componentOptionsText.code, options),
             });
         }
+        var text = block.component.options.text;
         var innerProperties = (_a = {},
-            _a[options.preserveTextBlocks ? 'innerHTML' : '_text'] = block.component.options.text,
+            _a[options.preserveTextBlocks ? 'innerHTML' : '_text'] = text,
             _a);
         if (options.preserveTextBlocks) {
             return (0, create_mitosis_node_1.createMitosisNode)({
@@ -361,11 +372,19 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
                 ],
             });
         }
+        // Disabling for now
+        var assumeLink = false;
+        var finalProperties = __assign(__assign({}, (assumeLink
+            ? {
+                href: '...',
+            }
+            : {})), properties);
+        var finalTagname = block.tagName || (assumeLink ? 'a' : 'div');
         if ((block.tagName && block.tagName !== 'div') || hasStyles(block)) {
             return (0, create_mitosis_node_1.createMitosisNode)({
-                name: block.tagName || 'div',
+                name: finalTagname,
                 bindings: bindings,
-                properties: properties,
+                properties: finalProperties,
                 children: [
                     (0, create_mitosis_node_1.createMitosisNode)({
                         bindings: innerBindings,
@@ -375,14 +394,14 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
             });
         }
         return (0, create_mitosis_node_1.createMitosisNode)({
-            name: block.tagName || 'div',
-            properties: __assign(__assign({}, properties), innerProperties),
+            name: finalTagname,
+            properties: __assign(__assign(__assign({}, finalProperties), properties), innerProperties),
             bindings: __assign(__assign({}, bindings), innerBindings),
         });
     } });
 var builderElementToMitosisNode = function (block, options, _internalOptions) {
     var _a;
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     if (_internalOptions === void 0) { _internalOptions = {}; }
     if (((_b = block.component) === null || _b === void 0 ? void 0 : _b.name) === 'Core:Fragment') {
         block.component.name = 'Fragment';
@@ -525,16 +544,29 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
         })),
     });
     // Has single text node child
-    if (((_s = block.children) === null || _s === void 0 ? void 0 : _s.length) === 1 &&
-        ((_t = block.children[0].component) === null || _t === void 0 ? void 0 : _t.name) === 'Text' &&
+    var firstChild = (_s = block.children) === null || _s === void 0 ? void 0 : _s[0];
+    if (((_t = block.children) === null || _t === void 0 ? void 0 : _t.length) === 1 &&
+        ((_u = firstChild === null || firstChild === void 0 ? void 0 : firstChild.component) === null || _u === void 0 ? void 0 : _u.name) === 'Text' &&
         !options.preserveTextBlocks) {
-        var textProperties = (0, exports.builderElementToMitosisNode)(block.children[0], options);
-        var mergedCss = (0, lodash_1.merge)(json5_1.default.parse(((_u = node.bindings.css) === null || _u === void 0 ? void 0 : _u.code) || '{}'), json5_1.default.parse(((_v = textProperties.bindings.css) === null || _v === void 0 ? void 0 : _v.code) || '{}'));
-        return (0, lodash_1.merge)({}, textProperties, node, {
-            bindings: __assign({}, (Object.keys(mergedCss).length && {
-                css: { code: json5_1.default.stringify(mergedCss) },
-            })),
-        });
+        var textProperties = (0, exports.builderElementToMitosisNode)(firstChild, options);
+        var parsedNodeCss = json5_1.default.parse(((_v = node.bindings.css) === null || _v === void 0 ? void 0 : _v.code) || '{}');
+        var parsedTextCss = json5_1.default.parse(((_w = textProperties.bindings.css) === null || _w === void 0 ? void 0 : _w.code) || '{}');
+        var mergedCss = combineStyles(parsedNodeCss, parsedTextCss);
+        // Don't merge if text has styling that matters
+        var doNotMerge = 
+        // Text has flex alignment
+        ['end', 'right', 'center'].includes(parsedTextCss.alignSelf) ||
+            // Text has specific styling
+            parsedTextCss.backgroundColor ||
+            parsedTextCss.opacity ||
+            parsedTextCss.background;
+        if (!doNotMerge) {
+            return (0, lodash_1.merge)({}, textProperties, node, {
+                bindings: __assign({}, (Object.keys(mergedCss).length && {
+                    css: { code: json5_1.default.stringify(mergedCss) },
+                })),
+            });
+        }
     }
     node.children = (block.children || []).map(function (item) { return (0, exports.builderElementToMitosisNode)(item, options); });
     return node;
@@ -771,3 +803,33 @@ function mapBuilderBindingsToMitosisBindingWithCode(bindings) {
         });
     return result;
 }
+function removeFalsey(obj) {
+    return (0, lodash_1.omitBy)(obj, function (value) { return !value || value === '0' || value === '0px' || value === 'none' || value === '0%'; });
+}
+function combineStyles(parent, child) {
+    var marginStyles = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
+    var paddingStyles = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'];
+    var distanceStylesToCombine = __spreadArray(__spreadArray([], paddingStyles, true), marginStyles, true);
+    var merged = __assign(__assign({}, (0, lodash_1.omit)(removeFalsey(child), distanceStylesToCombine)), removeFalsey(parent));
+    for (var _i = 0, distanceStylesToCombine_1 = distanceStylesToCombine; _i < distanceStylesToCombine_1.length; _i++) {
+        var key = distanceStylesToCombine_1[_i];
+        // Funky things happen if different alignment
+        if (parent.alignSelf !== child.alignSelf && (key === 'marginLeft' || key === 'marginRight')) {
+            merged[key] = parent[key];
+            continue;
+        }
+        var childNum = parseFloat(child[key]) || 0;
+        var parentKeyToUse = key.replace(/margin/, 'padding');
+        var parentNum = parseFloat(parent[parentKeyToUse]) || 0;
+        if (childNum || parentNum) {
+            merged[parentKeyToUse] = "".concat(childNum + parentNum, "px");
+        }
+    }
+    for (var _a = 0, _b = Object.entries(merged); _a < _b.length; _a++) {
+        var _c = _b[_a], key = _c[0], value = _c[1];
+        if (value && typeof value === 'object') {
+            merged[key] = combineStyles(parent[key] || {}, child[key] || {});
+        }
+    }
+    return merged;
+}

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

@@ -1,5 +1,5 @@
+import { type Plugin } from '@builder.io/mitosis';
 import { TraverseContext } from 'traverse';
-import { Plugin } from '..';
 import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
 declare type CompileAwayComponentsMap = {

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

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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)) {
@@ -47,8 +24,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileAwayBuilderComponents = exports.compileAwayBuilderComponentsFromTree = exports.components = void 0;
-var react_1 = require("@builder.io/react");
-var json5_1 = __importStar(require("json5")), JSON5 = json5_1;
+var sdk_1 = require("@builder.io/sdk");
+var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
 var traverse_1 = __importDefault(require("traverse"));
 var bindings_1 = require("../helpers/bindings");
@@ -56,9 +33,17 @@ 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) {
+    var _a;
+    var css = (_a = node.bindings.css) === null || _a === void 0 ? void 0 : _a.code;
+    if (css) {
+        return json5_1.default.parse(css);
+    }
+    return {};
+};
 function getComponentInputNames(componentName) {
     var _a;
-    var componentInfo = react_1.Builder.components.find(function (item) { return item.name === componentName; });
+    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; })) || [];
 }
 var wrapOutput = function (node, child, components) {
@@ -122,7 +107,7 @@ exports.components = {
     BuilderAccordion: function (node, context, components) {
         var _a;
         var itemsJSON = ((_a = node.bindings.items) === null || _a === void 0 ? void 0 : _a.code) || '[]';
-        var accordionItems = JSON5.parse(itemsJSON);
+        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, {
@@ -198,6 +183,7 @@ exports.components = {
     },
     CoreSection: function (node, context, components) {
         var _a, _b;
+        var 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' && {
@@ -205,18 +191,7 @@ exports.components = {
             })),
             bindings: {
                 css: (0, bindings_1.createSingleBinding)({
-                    code: JSON.stringify({
-                        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(__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' })),
                 }),
             },
             children: node.children,
@@ -236,25 +211,22 @@ exports.components = {
             return (columns[index] && columns[index].width) || 100 / columns.length;
         }
         function getColumnWidth(index) {
-            var subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-            return "calc(".concat(getWidth(index), "% - ").concat(subtractWidth, "px)");
+            return "".concat(Math.round(getWidth(index)), "%");
         }
         var properties = node.properties;
         return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
-            properties: {
-                class: 'builder-columns',
-            },
             bindings: {
                 css: (0, bindings_1.createSingleBinding)({
-                    code: JSON.stringify(__assign({ display: 'flex' }, (properties.stackColumnsAt === 'never'
+                    code: JSON.stringify(__assign({ gap: "".concat(gutterSize, "px"), display: 'flex' }, (properties.stackColumnsAt === 'never'
                         ? {}
                         : (_a = {},
-                            _a["@media (max-width: ".concat(properties.stackColumnsAt !== 'tablet' ? 639 : 999, "px)")] = {
+                            _a["@media (max-width: ".concat(properties.stackColumnsAt === 'mobile' ? 640 : 991, "px)")] = {
                                 flexDirection: properties.reverseColumnsWhenStacked === 'true'
                                     ? 'column-reverse'
                                     : 'column',
                                 alignItems: 'stretch',
+                                gap: "0px",
                             },
                             _a)))),
                 }),
@@ -265,14 +237,13 @@ exports.components = {
                     name: 'div',
                     properties: {
                         $name: 'column',
-                        class: 'builder-column',
                     },
                     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 !== 'tablet' ? 639 : 999, "px)")] = {
+                                    _a["@media (max-width: ".concat(properties.stackColumnsAt === 'mobile' ? 640 : 991, "px)")] = {
                                         width: '100%',
                                         marginLeft: 0,
                                     },
@@ -296,107 +267,57 @@ exports.components = {
         }
         var image = node.properties.image;
         var srcSet = srcset || generateBuilderIoSrcSet(image);
-        var source = ((_b = node.bindings.noWebp) === null || _b === void 0 ? void 0 : _b.code) !== 'true' &&
-            (0, create_mitosis_node_1.createMitosisNode)({
-                name: 'source',
-                properties: {
-                    srcset: srcSet.replace(/\?/g, '?format=webp&'),
-                    type: 'image/webp',
-                },
-            });
+        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)({
             name: 'img',
-            properties: noUndefined({
-                $name: 'image',
-                loading: 'lazy',
-                src: node.properties.image,
-                sizes: node.properties.sizes,
-                srcset: srcSet || null,
-            }),
+            properties: noUndefined(__assign({ loading: 'lazy', sizes: node.properties.sizes, alt: node.properties.altText }, (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 },
                 css: (0, bindings_1.createSingleBinding)({
-                    code: JSON.stringify(__assign({ objectFit: backgroundSize || 'cover', objectPosition: backgroundPosition || 'cover' }, (aspectRatio
-                        ? {
-                            position: 'absolute',
-                            height: '100%',
-                            width: '100%',
-                            top: '0',
-                            left: '0',
-                        }
-                        : {}))),
+                    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 })),
                 }),
             }),
         });
-        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: (0, bindings_1.createSingleBinding)({
-                        code: 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: (0, bindings_1.createSingleBinding)({
-                        code: 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);
-        var href = node.properties.href;
-        var hrefBinding = (_g = node.bindings.href) === null || _g === void 0 ? void 0 : _g.code;
-        if (href || hrefBinding) {
-            var aHref = (0, create_mitosis_node_1.createMitosisNode)({
-                name: 'a',
-                properties: {
-                    href: href,
-                },
-                bindings: hrefBinding
-                    ? {
-                        href: (0, bindings_1.createSingleBinding)({ code: hrefBinding }),
-                    }
-                    : undefined,
-                children: imageNodes,
-            });
-            return wrapOutput(node, aHref, components);
-        }
-        else {
-            return wrapOutput(node, imageNodes, components);
+        if (!((_g = node.children) === null || _g === void 0 ? void 0 : _g.length)) {
+            return img;
         }
+        // TODO: deal with links: anchor tag and href
+        var root = (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'div',
+            bindings: noUndefined({
+                css: (0, bindings_1.createSingleBinding)({
+                    code: JSON.stringify(__assign(__assign({ disply: 'flex', flexDirection: 'column' }, css), { position: 'relative' })),
+                }),
+            }),
+            children: __spreadArray([
+                __assign(__assign({}, img), { bindings: __assign(__assign({}, img.bindings), { css: (0, bindings_1.createSingleBinding)({
+                            code: JSON.stringify({
+                                position: 'absolute',
+                                inset: 0,
+                                zIndex: -1,
+                                height: '100%',
+                                width: '100%',
+                                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),
+        });
+        return root;
     },
     Video: function (node, context, components) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
@@ -407,10 +328,10 @@ exports.components = {
             aspectRatio = null;
         }
         var videoContainerNodes = [];
+        var css = getCssFromNode(node);
         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,
@@ -437,14 +358,7 @@ 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({
-                        width: '100%',
-                        height: '100%',
-                        objectFit: node.properties.fit,
-                        objectPosition: node.properties.position,
-                        borderRadius: '1',
-                        position: aspectRatio ? 'absolute' : '',
-                    }),
+                    code: JSON.stringify(__assign({ width: '100%', height: '100%', objectFit: node.properties.fit, objectPosition: node.properties.position, borderRadius: '1', position: aspectRatio ? 'absolute' : '' }, css)),
                 }),
             }),
             children: [
@@ -465,9 +379,6 @@ exports.components = {
         aspectRatio &&
             videoContainerNodes.push((0, create_mitosis_node_1.createMitosisNode)({
                 name: 'div',
-                properties: {
-                    $name: 'builder-video-sizer',
-                },
                 bindings: {
                     css: (0, bindings_1.createSingleBinding)({
                         code: JSON.stringify({
@@ -483,9 +394,6 @@ exports.components = {
             node.children.length &&
             videoContainerNodes.push((0, create_mitosis_node_1.createMitosisNode)({
                 name: 'div',
-                properties: {
-                    $name: 'image-contents',
-                },
                 bindings: {
                     css: (0, bindings_1.createSingleBinding)({
                         code: JSON.stringify({
@@ -504,9 +412,6 @@ exports.components = {
             }));
         var videoContainer = (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
-            properties: {
-                $name: 'video-container',
-            },
             bindings: {
                 css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify({ position: 'relative' }) }),
             },