@builder.io/mitosis 0.0.56-62 → 0.0.56-66

package/dist/src/__tests__/data/types/foo-type.d.ts

@@ -0,0 +1 @@
+export declare type Foo = null;

package/dist/src/__tests__/data/types/foo-type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/__tests__/data/types/type-dependency.raw.d.ts

@@ -0,0 +1,5 @@
+import type { Foo } from './foo-type';
+export declare type TypeDependencyProps = {
+    foo: Foo;
+};
+export default function TypeDependency(props: TypeDependencyProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/types/type-dependency.raw.jsx

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function TypeDependency(props) {
+    return <div>{props.foo}</div>;
+}
+exports.default = TypeDependency;

package/dist/src/__tests__/shared.js

@@ -21,6 +21,7 @@ var preserveExportOrLocalStatement = require('./data/basic-preserve-export-or-lo
 var propsType = require('./data/types/component-props-type.raw');
 var propsInterface = require('./data/types/component-props-interface.raw');
 var preserveTyping = require('./data/types/preserve-typing.raw');
+var typeDependency = require('./data/types/type-dependency.raw');
 var classRaw = require('./data/styles/class.raw');
 var className = require('./data/styles/className.raw');
 var classAndClassName = require('./data/styles/class-and-className.raw');
@@ -86,6 +87,7 @@ var BASIC_TESTS = {
     propsType: propsType,
     propsInterface: propsInterface,
     preserveTyping: preserveTyping,
+    typeDependency: typeDependency,
     propsDestructure: propsDestructure,
     'onInit & onMount': onInitonMount,
     'Basic Context': basicContext,

package/dist/src/generators/qwik/component-generator.js

@@ -1,15 +1,4 @@
 "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)) {
@@ -50,19 +39,15 @@ var componentToQwik = function (userOptions) {
         try {
             emitImports(file, component);
             emitTypes(file, component);
-            var metadata_1 = component.meta.useMetadata || {};
-            var isLightComponent = ((_c = (_b = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
-            var imports_1 = (_d = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _d === void 0 ? void 0 : _d.imports;
+            var metadata = component.meta.useMetadata || {};
+            var isLightComponent = ((_c = (_b = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
+            var imports_1 = (_d = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _d === void 0 ? void 0 : _d.imports;
             imports_1 && Object.keys(imports_1).forEach(function (key) { return file.import(imports_1[key], key); });
-            var state_2 = emitStateMethodsAndRewriteBindings(file, component, metadata_1);
+            var state_2 = emitStateMethodsAndRewriteBindings(file, component, metadata);
             var hasState_1 = (0, state_1.checkHasState)(component);
             var css_1 = null;
-            var topLevelElement_1 = isLightComponent ? null : getTopLevelElement(component);
             var componentBody = (0, src_generator_1.arrowFnBlock)(['props'], [
                 function () {
-                    var _a, _b;
-                    if ((_b = (_a = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.useHostElement)
-                        emitUseHostElement(file);
                     css_1 = emitUseStyles(file, component);
                     emitUseContext(file, component);
                     emitUseRef(file, component);
@@ -72,14 +57,12 @@ var componentToQwik = function (userOptions) {
                     emitUseWatch(file, component);
                     emitUseCleanup(file, component);
                     emitTagNameHack(file, component);
-                    emitJSX(file, component, topLevelElement_1);
+                    emitJSX(file, component);
                 },
             ], [component.propsTypeRef || 'any']);
             file.src.const(component.name, isLightComponent
                 ? componentBody
-                : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), __spreadArray([
-                    componentBody
-                ], (topLevelElement_1 ? ["{tagName:\"".concat(topLevelElement_1, "\"}")] : []), true)), true, true);
+                : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentBody]), true, true);
             file.exportDefault(component.name);
             emitStyles(file, css_1);
             DEBUG && file.exportConst('COMPONENT', JSON.stringify(component, null, 2));
@@ -136,17 +119,11 @@ function emitUseCleanup(file, component) {
         file.src.emit(file.import(file.qwikModule, 'useCleanup$').localName, '(()=>{', code, '});');
     }
 }
-function emitJSX(file, component, topLevelElement) {
+function emitJSX(file, component) {
     var directives = new Map();
     var handlers = new Map();
     var styles = new Map();
     var parentSymbolBindings = {};
-    var children = component.children;
-    if (topLevelElement && children.length == 1) {
-        var child = children[0];
-        children[0] = __assign(__assign({}, child), { name: 'Host' });
-        file.import(file.qwikModule, 'Host');
-    }
     file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, parentSymbolBindings));
 }
 function emitUseContextProvider(file, component) {
@@ -326,28 +303,3 @@ function stateToMethodOrGetter(state) {
     });
     return methodMap;
 }
-/**
- * Return a top-level element for the component.
- *
- * WHAT: If the component has a single root element, then this returns the element name.
- *
- * WHY: This is useful to pull the root element into the component's host and thus saving unnecessary wrapping.
- *
- * @param component
- */
-function getTopLevelElement(component) {
-    var _a;
-    if (((_a = component.children) === null || _a === void 0 ? void 0 : _a.length) === 1) {
-        var child = component.children[0];
-        if (child['@type'] === '@builder.io/mitosis/node' && startsLowerCase(child.name)) {
-            return child.name;
-        }
-    }
-    return null;
-}
-function startsLowerCase(name) {
-    return name.length > 0 && name[0].toLowerCase() === name[0];
-}
-function emitUseHostElement(file) {
-    file.src.emit('const hostElement=', file.import(file.qwikModule, 'useHostElement').localName, '();');
-}

package/dist/src/parsers/jsx/component-types.d.ts

@@ -1,6 +1,7 @@
 import * as babel from '@babel/core';
 import { Context } from './types';
 export declare const getPropsTypeRef: (node: babel.types.FunctionDeclaration) => string | undefined;
+export declare const isTypeImport: (node: babel.Node) => boolean;
 export declare const isTypeOrInterface: (node: babel.Node) => boolean;
 export declare const collectTypes: (node: babel.Node, context: Context) => void;
 export declare const collectInterfaces: (node: babel.Node, context: Context) => void;

package/dist/src/parsers/jsx/component-types.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collectInterfaces = exports.collectTypes = exports.isTypeOrInterface = exports.getPropsTypeRef = void 0;
+exports.collectInterfaces = exports.collectTypes = exports.isTypeOrInterface = exports.isTypeImport = exports.getPropsTypeRef = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var types = babel.types;
@@ -46,6 +46,14 @@ var getPropsTypeRef = function (node) {
     return undefined;
 };
 exports.getPropsTypeRef = getPropsTypeRef;
+var isTypeImport = function (node) {
+    var _a;
+    return types.isImportDeclaration(node) &&
+        node.importKind === 'type' &&
+        // Babel adds an implicit JSX type import that we don't want
+        ((_a = node.specifiers[0]) === null || _a === void 0 ? void 0 : _a.local.name) !== 'JSX';
+};
+exports.isTypeImport = isTypeImport;
 var isTypeOrInterface = function (node) {
     return types.isTSTypeAliasDeclaration(node) ||
         types.isTSInterfaceDeclaration(node) ||

package/dist/src/parsers/jsx/jsx.js

@@ -506,6 +506,12 @@ function parseJsx(jsx, options) {
                             component: (0, create_mitosis_component_1.createMitosisComponent)(),
                         };
                         var keepStatements = path.node.body.filter(function (statement) { return isImportOrDefaultExport(statement) || (0, component_types_1.isTypeOrInterface)(statement); });
+                        for (var _i = 0, _a = path.node.body; _i < _a.length; _i++) {
+                            var statement = _a[_i];
+                            if ((0, component_types_1.isTypeImport)(statement)) {
+                                (0, component_types_1.collectTypes)(statement, context);
+                            }
+                        }
                         var exportsOrLocalVariables = path.node.body.filter(function (statement) {
                             return !isImportOrDefaultExport(statement) &&
                                 !(0, component_types_1.isTypeOrInterface)(statement) &&

package/dist/test/qwik/Accordion/low.jsx

@@ -0,0 +1,240 @@
+import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
+export const MyComponent_styles = `.csw5022{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;align-items:stretch}.csanagh{margin-top:10px;position:relative;display:flex;align-items:stretch;flex-direction:column;padding-bottom:10px}.c4qyc1p{position:relative;display:flex;align-items:stretch;flex-direction:column;margin-top:10px;padding-bottom:10px}.crwdrpw{text-align:left;display:flex;flex-direction:column}.ctcw2m4{padding-top:50px;text-align:left;display:flex;flex-direction:column;padding-bottom:50px}`;
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
+    return state;
+  });
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
+  return (
+    <div
+      builder-id="builder-bb2f62792e464d73b7cb89258027f356"
+      gridRowWidth="25%"
+      class="csw5022 builder-block"
+      items={[
+        {
+          title: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "@version": 2,
+              layerName: "Accordion item title",
+              id: "builder-5fed2723c1cc4fb39e9d22b9c54ef179",
+              children: [
+                {
+                  "@type": "@builder.io/sdk:Element",
+                  "@version": 2,
+                  id: "builder-2cad86b387ec405d82917895d7af0a12",
+                  component: {
+                    name: "Text",
+                    options: { text: "<p>Item 1</p>" },
+                  },
+                  responsiveStyles: {
+                    large: {
+                      textAlign: "left",
+                      display: "flex",
+                      flexDirection: "column",
+                    },
+                  },
+                },
+              ],
+              responsiveStyles: {
+                large: {
+                  marginTop: "10px",
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                  paddingBottom: "10px",
+                },
+              },
+            },
+          ],
+          detail: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "@version": 2,
+              layerName: "Accordion item detail",
+              id: "builder-18279a99b32240f19aa21d3f4b015cc9",
+              children: [
+                {
+                  "@type": "@builder.io/sdk:Element",
+                  "@version": 2,
+                  id: "builder-2dbfa56b8988461c8566bbe759580e9b",
+                  component: {
+                    name: "Text",
+                    options: { text: "<p>Item 1 content</p>" },
+                  },
+                  responsiveStyles: {
+                    large: {
+                      paddingTop: "50px",
+                      textAlign: "left",
+                      display: "flex",
+                      flexDirection: "column",
+                      paddingBottom: "50px",
+                    },
+                  },
+                },
+              ],
+              responsiveStyles: {
+                large: {
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                  marginTop: "10px",
+                  paddingBottom: "10px",
+                },
+              },
+            },
+          ],
+        },
+        {
+          title: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "@version": 2,
+              layerName: "Accordion item title",
+              id: "builder-2a93def22a354cf7aa193c20d1ad6def",
+              children: [
+                {
+                  "@type": "@builder.io/sdk:Element",
+                  "@version": 2,
+                  id: "builder-1365fc457ece45db82ad90dbe9819e7c",
+                  component: {
+                    name: "Text",
+                    options: { text: "<p>Item 2</p>" },
+                  },
+                  responsiveStyles: {
+                    large: {
+                      textAlign: "left",
+                      display: "flex",
+                      flexDirection: "column",
+                    },
+                  },
+                },
+              ],
+              responsiveStyles: {
+                large: {
+                  marginTop: "10px",
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                  paddingBottom: "10px",
+                },
+              },
+            },
+          ],
+          detail: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "@version": 2,
+              layerName: "Accordion item detail",
+              id: "builder-fd6ef41da6d040328fbd8b0801611fe5",
+              children: [
+                {
+                  "@type": "@builder.io/sdk:Element",
+                  "@version": 2,
+                  id: "builder-7362f9fd64c647c5a400d9e75c74473f",
+                  component: {
+                    name: "Text",
+                    options: { text: "<p>Item 2 content</p>" },
+                  },
+                  responsiveStyles: {
+                    large: {
+                      paddingTop: "50px",
+                      textAlign: "left",
+                      display: "flex",
+                      flexDirection: "column",
+                      paddingBottom: "50px",
+                    },
+                  },
+                },
+              ],
+              responsiveStyles: {
+                large: {
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                  marginTop: "10px",
+                  paddingBottom: "10px",
+                },
+              },
+            },
+          ],
+        },
+      ]}
+      animate={true}
+    >
+      <div>
+        <div builder="accordion">
+          <div builder="accordion-title">
+            <div
+              builder-id="builder-5fed2723c1cc4fb39e9d22b9c54ef179"
+              class="csanagh"
+            >
+              <div class="crwdrpw">
+                <div
+                  dangerouslySetInnerHTML="<p>Item 1</p>"
+                  class="builder-text"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div builder="accordion-detail">
+            <div
+              builder-id="builder-18279a99b32240f19aa21d3f4b015cc9"
+              class="c4qyc1p"
+            >
+              <div class="ctcw2m4">
+                <div
+                  dangerouslySetInnerHTML="<p>Item 1 content</p>"
+                  class="builder-text"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div builder="accordion">
+          <div builder="accordion-title">
+            <div
+              builder-id="builder-2a93def22a354cf7aa193c20d1ad6def"
+              class="csanagh"
+            >
+              <div class="crwdrpw">
+                <div
+                  dangerouslySetInnerHTML="<p>Item 2</p>"
+                  class="builder-text"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div builder="accordion-detail">
+            <div
+              builder-id="builder-fd6ef41da6d040328fbd8b0801611fe5"
+              class="c4qyc1p"
+            >
+              <div class="ctcw2m4">
+                <div
+                  dangerouslySetInnerHTML="<p>Item 2 content</p>"
+                  class="builder-text"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/dist/test/qwik/Accordion/med.jsx

@@ -0,0 +1,4 @@
+import { componentQrl, qrl } from "@builder.io/qwik";
+export const MyComponent = componentQrl(
+  qrl("./low.js", "MyComponent_onMount", [])
+);

package/dist/test/qwik/For/low.jsx

@@ -0,0 +1,52 @@
+import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
+export const MyComponent_styles = `.cvdfnp5{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:0px;padding-left:20px;padding-right:20px;padding-top:50px;padding-bottom:50px;width:100vw;margin-left:calc(50% - 50vw)}.cz5wnof{width:100%;align-self:stretch;flex-grow:1;box-sizing:border-box;max-width:1200px;display:flex;flex-direction:column;align-items:stretch;margin-left:auto;margin-right:auto}.cdrk993{text-align:center}`;
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
+    return state;
+  });
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
+  return (
+    <div
+      builder-id="builder-a58a66676d9b4ecc826c1b8bc5ad91f1"
+      class="cvdfnp5 builder-block"
+      maxWidth={1200}
+    >
+      <section
+        builder-id="builder-a58a66676d9b4ecc826c1b8bc5ad91f1"
+        class="cz5wnof"
+      >
+        {(state.simpleList.results || []).map((item) => {
+          var state = Object.assign({}, this, {
+            resultsItem: item == null ? {} : item,
+          });
+          return (
+            <div class="cdrk993">
+              <div
+                class="builder-text"
+                dangerouslySetInnerHTML={(() => {
+                  try {
+                    var _virtual_index = state.resultsItem.data.title;
+                    return _virtual_index;
+                  } catch (err) {
+                    console.warn("Builder code error", err);
+                  }
+                })()}
+              ></div>
+            </div>
+          );
+        })}
+      </section>
+    </div>
+  );
+};

package/dist/test/qwik/For/med.jsx

@@ -0,0 +1,4 @@
+import { componentQrl, qrl } from "@builder.io/qwik";
+export const MyComponent = componentQrl(
+  qrl("./low.js", "MyComponent_onMount", [])
+);

package/dist/test/qwik/Image/high.js

@@ -0,0 +1,9 @@
+import { useLexicalScope } from "@builder.io/qwik";
+export const MyComponent_onClick_0 = (event) => {
+  const state = useLexicalScope()[0];
+  try {
+    return (state.myState = "changed value");
+  } catch (err) {
+    console.warn("Builder code error", err);
+  }
+};

package/dist/test/qwik/Image/med.js

@@ -0,0 +1,155 @@
+import {
+  Fragment,
+  componentQrl,
+  h,
+  qrl,
+  useStore,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
+export const MyComponent_styles = `.cvk52jt{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;min-height:20px;min-width:20px;overflow:hidden}.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}`;
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
+    if (!state.hasOwnProperty("myState")) state.myState = "initialValue";
+    return state;
+  });
+  withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
+  return h(
+    Fragment,
+    null,
+    h(Image, {
+      "builder-id": "builder-fa4480d2f48a44a7a2e98cf07c54927b",
+      image:
+        "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      srcset:
+        "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160 1160w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=958 958w",
+      sizes: "(max-width: 638px) 94vw, (max-width: 998px) 96vw, 83vw",
+      class: "cvk52jt builder-block",
+      onClick$: qrl("./high.js", "MyComponent_onClick_0", [state]),
+      lazy: false,
+      fitContent: true,
+      aspectRatio: 1,
+      height: 1300,
+      width: 1300,
+    }),
+    h(
+      "div",
+      { class: "cjrqfb1" },
+      h("div", {
+        class: "builder-text",
+        dangerouslySetInnerHTML: (() => {
+          try {
+            var _virtual_index = state.myState;
+            return _virtual_index;
+          } catch (err) {
+            console.warn("Builder code error", err);
+          }
+        })(),
+      })
+    )
+  );
+};
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);
+export const Image = function Image(props) {
+  var _a;
+  var jsx = props.children || [];
+  var image = props.image;
+  if (image) {
+    var isBuilderIoImage = !!(image || "").match(/\.builder\.io/);
+    var isPixel =
+      (_a = props.builderBlock) === null || _a === void 0
+        ? void 0
+        : _a.id.startsWith("builder-pixel-");
+    var imgProps = {
+      src: props.image,
+      style:
+        "object-fit:"
+          .concat(props.backgroundSize || "cover", ";object-position:")
+          .concat(props.backgroundPosition || "center", ";") +
+        (props.aspectRatio
+          ? "position:absolute;height:100%;width:100%;top:0;left:0"
+          : ""),
+      sizes: props.sizes,
+      alt: props.altText,
+      role: !props.altText ? "presentation" : undefined,
+      loading: isPixel ? "eager" : "lazy",
+      srcset: undefined,
+    };
+    if (isBuilderIoImage) {
+      var webpImage_1 = updateQueryParam(image, "format", "webp");
+      var srcset = ["100", "200", "400", "800", "1200", "1600", "2000"]
+        .concat(props.srcsetSizes ? String(props.srcsetSizes).split(" ") : [])
+        .map(function (size) {
+          return (
+            updateQueryParam(webpImage_1, "width", size) + " " + size + "w"
+          );
+        })
+        .concat([image])
+        .join(",");
+      imgProps.srcset = srcset;
+      jsx = jsx = [
+        h("picture", {}, [
+          h("source", { type: "image/webp", srcset: srcset }),
+          h("img", imgProps, jsx),
+        ]),
+      ];
+    } else {
+      jsx = [h("img", imgProps, jsx)];
+    }
+    if (
+      props.aspectRatio &&
+      !(props.fitContent && props.children && props.children.length)
+    ) {
+      var sizingDiv = h("div", {
+        class: "builder-image-sizer",
+        style: "width:100%;padding-top:".concat(
+          (props.aspectRatio || 1) * 100,
+          "%;pointer-events:none;font-size:0"
+        ),
+      });
+      jsx.push(sizingDiv);
+    }
+  }
+  var children = props.children ? [jsx].concat(props.children) : [jsx];
+  return h(
+    props.href ? "a" : "div",
+    __passThroughProps__({ href: props.href, class: props.class }, props),
+    children
+  );
+  function updateQueryParam(uri, key, value) {
+    if (uri === void 0) {
+      uri = "";
+    }
+    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+    var separator = uri.indexOf("?") !== -1 ? "&" : "?";
+    if (uri.match(re)) {
+      return uri.replace(
+        re,
+        "$1" + key + "=" + encodeURIComponent(value) + "$2"
+      );
+    }
+    return uri + separator + key + "=" + encodeURIComponent(value);
+  }
+};
+export const __passThroughProps__ = function __passThroughProps__(
+  dstProps,
+  srcProps
+) {
+  for (var key in srcProps) {
+    if (
+      Object.prototype.hasOwnProperty.call(srcProps, key) &&
+      ((key.startsWith("on") && key.endsWith("$")) || key == "style")
+    ) {
+      dstProps[key] = srcProps[key];
+    }
+  }
+  return dstProps;
+};