@builder.io/sdk-solid 0.0.7 → 0.0.8-0

package/src/functions/get-builder-search-params/fn.test.js

@@ -1,4 +1,4 @@
-import { getBuilderSearchParams, convertSearchParamsToQueryObject } from ".";
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from ".";
 const querystring = "someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017";
 const url = new URL(`localhost:3000/about-us?${querystring}`);
 describe("Get Builder SearchParams", () => {

package/src/functions/get-content/index.js

@@ -37,8 +37,8 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getFetch } from "../get-fetch";
-const fetch = getFetch();
+import { getFetch } from "../get-fetch.js";
+const fetch$ = getFetch();
 function flatten(object, path = null, separator = ".") {
   return Object.keys(object).reduce((acc, key) => {
     const value = object[key];
@@ -123,6 +123,7 @@ const handleABTesting = (content, testGroups) => {
 function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
+    const fetch = yield fetch$;
     const content = yield fetch(url.href).then((res) => res.json());
     if (options.testGroups) {
       handleABTesting(content, options.testGroups);

package/src/functions/get-fetch.js

@@ -1,11 +1,33 @@
-import { getGlobalThis } from "./get-global-this";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { getGlobalThis } from "./get-global-this.js";
 function getFetch() {
-  let fetch = getGlobalThis().fetch;
-  if (typeof fetch === "undefined" && typeof global !== "undefined") {
-    const _require = eval("require");
-    fetch = _require("node-fetch");
-  }
-  return fetch;
+  return __async(this, null, function* () {
+    const globalFetch = getGlobalThis().fetch;
+    if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
+      const nodeFetch = import("node-fetch").then((d) => d.default);
+      return nodeFetch;
+    }
+    return globalFetch;
+  });
 }
 export {
   getFetch

package/src/functions/get-processed-block.js

@@ -17,9 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { evaluate } from "./evaluate";
-import { set } from "./set";
-import { transformBlock } from "./transform-block";
+import { evaluate } from "./evaluate.js";
+import { set } from "./set.js";
+import { transformBlock } from "./transform-block.js";
 function getProcessedBlock(options) {
   const { state, context } = options;
   const block = transformBlock(options.block);

package/src/functions/get-processed-block.test.js

@@ -1,4 +1,4 @@
-import { getProcessedBlock } from "./get-processed-block";
+import { getProcessedBlock } from "./get-processed-block.js";
 test("Can process bindings", () => {
   var _a, _b, _c, _d, _e, _f;
   const block = {

package/src/functions/if-target.js

@@ -1,4 +1,4 @@
-import { TARGET } from "../constants/target";
+import { TARGET } from "../constants/target.js";
 function ifTarget({
   targets,
   doThing,

package/src/functions/is-editing.js

@@ -1,4 +1,4 @@
-import { isIframe } from "./is-iframe";
+import { isIframe } from "./is-iframe.js";
 function isEditing() {
   return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }

package/src/functions/is-iframe.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 function isIframe() {
   return isBrowser() && window.self !== window.top;
 }

package/src/functions/is-previewing.js

@@ -1,5 +1,5 @@
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function isPreviewing() {
   if (!isBrowser()) {
     return false;

package/src/functions/on-change.test.js

@@ -1,4 +1,4 @@
-import { onChange } from "./on-change";
+import { onChange } from "./on-change.js";
 test("onChange can observe a shallow change", () => {
   let changeHappend = false;
   const obj = onChange({ foo: "hi" }, () => changeHappend = true);

package/src/functions/previewing-model-name.js

@@ -1,4 +1,4 @@
-import { isPreviewing } from "./is-previewing";
+import { isPreviewing } from "./is-previewing.js";
 function previewingModelName() {
   if (!isPreviewing()) {
     return null;

package/src/functions/register-component.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 const components = {};
 function registerComponent(component, info) {
   var _a;

package/src/functions/register.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];

package/src/functions/set-editor-settings.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 const settings = {};
 function setEditorSettings(newSettings) {
   if (isBrowser()) {

package/src/functions/set.test.js

@@ -1,4 +1,4 @@
-import { set } from "./set";
+import { set } from "./set.js";
 test("can shallow set a property", () => {
   const obj = { foo: "bar" };
   set(obj, "foo", "baz");

package/src/functions/track.js

@@ -1,6 +1,6 @@
-import { TARGET } from "../constants/target";
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function track(event, properties) {
   if (isEditing()) {
     return;

package/src/index-helpers/blocks-exports.js

@@ -1,11 +1,11 @@
-import { default as default2 } from "../blocks/columns";
-import { default as default3 } from "../blocks/image";
-import { default as default4 } from "../blocks/text";
-import { default as default5 } from "../blocks/video";
-import { default as default6 } from "../blocks/symbol";
-import { default as default7 } from "../blocks/button";
-import { default as default8 } from "../blocks/section";
-import { default as default9 } from "../blocks/fragment";
+import { default as default2 } from "../blocks/columns/index.js";
+import { default as default3 } from "../blocks/image/index.js";
+import { default as default4 } from "../blocks/text/index.js";
+import { default as default5 } from "../blocks/video/index.js";
+import { default as default6 } from "../blocks/symbol/index.js";
+import { default as default7 } from "../blocks/button/index.js";
+import { default as default8 } from "../blocks/section/index.js";
+import { default as default9 } from "../blocks/fragment/index.js";
 import { default as default10 } from "../components/render-content/render-content";
 export {
   default7 as Button,

package/src/index.js

@@ -1,13 +1,10 @@
-import("./index-helpers/top-of-file");
-import { isEditing } from "./functions/is-editing";
-if (isEditing()) {
-  import("./scripts/init-editing");
-}
-export * from "./index-helpers/blocks-exports";
-export * from "./functions/is-editing";
-export * from "./functions/is-previewing";
-export * from "./functions/register-component";
-export * from "./functions/register";
-export * from "./functions/set-editor-settings";
-export * from "./functions/get-content";
-export * from "./functions/get-builder-search-params";
+import "./index-helpers/top-of-file.js";
+import "./scripts/init-editing.js";
+export * from "./index-helpers/blocks-exports.js";
+export * from "./functions/is-editing.js";
+export * from "./functions/is-previewing.js";
+export * from "./functions/register-component.js";
+export * from "./functions/register.js";
+export * from "./functions/set-editor-settings.js";
+export * from "./functions/get-content/index.js";
+export * from "./functions/get-builder-search-params/index.js";

package/src/scripts/init-editing.js

@@ -1,71 +1,80 @@
-var _a;
-import { TARGET } from "../constants/target";
-import { isBrowser } from "../functions/is-browser";
-import { register } from "../functions/register";
-register("insertMenu", {
-  name: "_default",
-  default: true,
-  items: [
-    { name: "Box" },
-    { name: "Text" },
-    { name: "Image" },
-    { name: "Columns" },
-    ...TARGET === "reactNative" ? [] : [
-      { name: "Core:Section" },
-      { name: "Core:Button" },
-      { name: "Embed" },
-      { name: "Custom Code" }
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "../functions/is-browser.js";
+import { isEditing } from "../functions/is-editing.js";
+import { register } from "../functions/register.js";
+const registerInsertMenu = () => {
+  register("insertMenu", {
+    name: "_default",
+    default: true,
+    items: [
+      { name: "Box" },
+      { name: "Text" },
+      { name: "Image" },
+      { name: "Columns" },
+      ...TARGET === "reactNative" ? [] : [
+        { name: "Core:Section" },
+        { name: "Core:Button" },
+        { name: "Embed" },
+        { name: "Custom Code" }
+      ]
     ]
-  ]
-});
-if (isBrowser()) {
-  (_a = window.parent) == null ? void 0 : _a.postMessage({
-    type: "builder.sdkInfo",
-    data: {
-      target: TARGET,
-      supportsPatchUpdates: false
-    }
-  }, "*");
-  window.addEventListener("message", ({ data }) => {
-    var _a2, _b;
-    if (data) {
-      switch (data.type) {
-        case "builder.evaluate": {
-          const text = data.data.text;
-          const args = data.data.arguments || [];
-          const id = data.data.id;
-          const fn = new Function(text);
-          let result;
-          let error = null;
-          try {
-            result = fn.apply(null, args);
-          } catch (err) {
-            error = err;
-          }
-          if (error) {
-            (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
-              type: "builder.evaluateError",
-              data: { id, error: error.message }
-            }, "*");
-          } else {
-            if (result && typeof result.then === "function") {
-              result.then((finalResult) => {
-                var _a3;
-                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
+  });
+};
+const setupBrowserForEditing = () => {
+  var _a;
+  if (isBrowser()) {
+    (_a = window.parent) == null ? void 0 : _a.postMessage({
+      type: "builder.sdkInfo",
+      data: {
+        target: TARGET,
+        supportsPatchUpdates: false
+      }
+    }, "*");
+    window.addEventListener("message", ({ data }) => {
+      var _a2, _b;
+      if (data) {
+        switch (data.type) {
+          case "builder.evaluate": {
+            const text = data.data.text;
+            const args = data.data.arguments || [];
+            const id = data.data.id;
+            const fn = new Function(text);
+            let result;
+            let error = null;
+            try {
+              result = fn.apply(null, args);
+            } catch (err) {
+              error = err;
+            }
+            if (error) {
+              (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
+                type: "builder.evaluateError",
+                data: { id, error: error.message }
+              }, "*");
+            } else {
+              if (result && typeof result.then === "function") {
+                result.then((finalResult) => {
+                  var _a3;
+                  (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
+                    type: "builder.evaluateResult",
+                    data: { id, result: finalResult }
+                  }, "*");
+                }).catch(console.error);
+              } else {
+                (_b = window.parent) == null ? void 0 : _b.postMessage({
                   type: "builder.evaluateResult",
-                  data: { id, result: finalResult }
+                  data: { result, id }
                 }, "*");
-              }).catch(console.error);
-            } else {
-              (_b = window.parent) == null ? void 0 : _b.postMessage({
-                type: "builder.evaluateResult",
-                data: { result, id }
-              }, "*");
+              }
             }
+            break;
           }
-          break;
         }
       }
-    }
-  });
+    });
+  }
+};
+if (isEditing()) {
+  registerInsertMenu();
+  setupBrowserForEditing();
 }

package/src/blocks/button.jsx

@@ -1,8 +0,0 @@
-function Button(props) {
-  return <a {...props.attributes} role="button" href={props.link} target={props.openLinkInNewTab ? "_blank" : undefined}>
-      {props.text}
-    </a>;
-}
-
-export default Button;import { registerComponent } from '../functions/register-component';
-registerComponent(Button, {name:'Core:Button',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',defaultStyles:{appearance:'none',paddingTop:'15px',paddingBottom:'15px',paddingLeft:'25px',paddingRight:'25px',backgroundColor:'#000000',color:'white',borderRadius:'4px',textAlign:'center',cursor:'pointer'},inputs:[{name:'text',type:'text',defaultValue:'Click me!',bubble:true},{name:'link',type:'url',bubble:true},{name:'openLinkInNewTab',type:'boolean',defaultValue:false,friendlyName:'Open link in new tab'}],static:true,noWrap:true});

package/src/blocks/button.lite.tsx

@@ -1,14 +0,0 @@
-function Button(props) {
-  return (
-    <a
-      {...props.attributes}
-      role="button"
-      href={props.link}
-      target={props.openLinkInNewTab ? "_blank" : undefined}
-    >
-      {props.text}
-    </a>
-  );
-}
-
-export default Button;

package/src/blocks/columns.jsx

@@ -1,96 +0,0 @@
-import { For } from "solid-js";
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-import RenderBlocks from "../components/render-blocks";
-
-function Columns(props) {
-  console.log('columns')
-  const state = createMutable({
-    getGutterSize() {
-      return typeof props.space === "number" ? props.space || 0 : 20;
-    },
-
-    getColumns() {
-      return props.columns || [];
-    },
-
-    getWidth(index) {
-      const columns = this.getColumns();
-      return columns[index]?.width || 100 / columns.length;
-    },
-
-    getColumnCssWidth(index) {
-      const columns = this.getColumns();
-      const gutterSize = this.getGutterSize();
-      const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
-    },
-
-    maybeApplyForTablet(prop) {
-      const stackColumnsAt = props.stackColumnsAt || "tablet";
-      return stackColumnsAt === "tablet" ? prop : "inherit";
-    },
-
-    get columnsCssVars() {
-      const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
-      return {
-        "--flex-dir": flexDir,
-        "--flex-dir-tablet": this.maybeApplyForTablet(flexDir)
-      };
-    },
-
-    get columnCssVars() {
-      const width = "100%";
-      const marginLeft = "0";
-      return {
-        "--column-width": width,
-        "--column-margin-left": marginLeft,
-        "--column-width-tablet": this.maybeApplyForTablet(width),
-        "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft)
-      };
-    }
-
-  });
-
-  console.log('props.columns', props.columns, props.builderBlock.component.options.columns)
-  return <div class={css({
-    display: "flex",
-    alignItems: "stretch",
-    lineHeight: "normal",
-    "@media (max-width: 999px)": {
-      flexDirection: "var(--flex-dir-tablet)"
-    },
-    "@media (max-width: 639px)": {
-      flexDirection: "var(--flex-dir)"
-    }
-  }) + " builder-columns"} style={state.columnsCssVars}>
-      <For each={props.columns}>
-        {(column, _index) => {
-        const index = _index();
-
-        console.log('column', column)
-
-        return <div class={css({
-          flexGrow: "1",
-          "@media (max-width: 999px)": {
-            width: "var(--column-width-tablet) !important",
-            marginLeft: "var(--column-margin-left-tablet) !important"
-          },
-          "@media (max-width: 639px)": {
-            width: "var(--column-width) !important",
-            marginLeft: "var(--column-margin-left) !important"
-          }
-        }) + "builder-column"} style={{
-          width: state.getColumnCssWidth(index),
-          "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
-          ...state.columnCssVars
-        }}>
-              <RenderBlocks blocks={column.blocks}></RenderBlocks>
-            </div>;
-      }}
-      </For>
-    </div>;
-}
-
-export default Columns;import { registerComponent } from '../functions/register-component';
-registerComponent(Columns, {name:'Columns',builtIn:true,inputs:[{name:'columns',type:'array',broadcast:true,subFields:[{name:'blocks',type:'array',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]},{name:'width',type:'number',hideFromUI:true,helperText:'Width %, e.g. set to 50 to fill half of the space'},{name:'link',type:'url',helperText:'Optionally set a url that clicking this column will link to'}],defaultValue:[{blocks:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]},{blocks:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]}],onChange:"        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      "},{name:'space',type:'number',defaultValue:20,helperText:'Size of gap between columns',advanced:true},{name:'stackColumnsAt',type:'string',defaultValue:'tablet',helperText:'Convert horizontal columns to vertical at what device size',enum:['tablet','mobile','never'],advanced:true},{name:'reverseColumnsWhenStacked',type:'boolean',defaultValue:false,helperText:'When stacking columns for mobile devices, reverse the ordering',advanced:true}]});

package/src/blocks/fragment.jsx

@@ -1,6 +0,0 @@
-function FragmentComponent(props) {
-  return <span>{props.children}</span>;
-}
-
-export default FragmentComponent;import { registerComponent } from '../functions/register-component';
-registerComponent(FragmentComponent, {name:'Fragment',static:true,hidden:true,builtIn:true,canHaveChildren:true,noWrap:true});

package/src/blocks/image.jsx

@@ -1,120 +0,0 @@
-import { Show } from "solid-js";
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-
-function Image(props) {
-  const state = createMutable({
-    updateQueryParam: function updateQueryParam(uri = "", key, value) {
-      const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
-      const separator = uri.indexOf("?") !== -1 ? "&" : "?";
-
-      if (uri.match(re)) {
-        return uri.replace(re, "$1" + key + "=" + encodeURIComponent(value) + "$2");
-      }
-
-      return uri + separator + key + "=" + encodeURIComponent(value);
-    },
-    removeProtocol: function removeProtocol(path) {
-      return path.replace(/http(s)?:/, "");
-    },
-    getShopifyImageUrl: function getShopifyImageUrl(src, size) {
-      if (!src || !src?.match(/cdn\.shopify\.com/) || !size) {
-        return src;
-      }
-
-      if (size === "master") {
-        return state.removeProtocol(src);
-      }
-
-      const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
-
-      if (match) {
-        const prefix = src.split(match[0]);
-        const suffix = match[3];
-        const useSize = size.match("x") ? size : `${size}x`;
-        return state.removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
-      }
-
-      return null;
-    },
-    getSrcSet: function getSrcSet(url) {
-      if (!url) {
-        return url;
-      }
-
-      const sizes = [100, 200, 400, 800, 1200, 1600, 2000];
-
-      if (url.match(/builder\.io/)) {
-        let srcUrl = url;
-        const widthInSrc = Number(url.split("?width=")[1]);
-
-        if (!isNaN(widthInSrc)) {
-          srcUrl = `${srcUrl} ${widthInSrc}w`;
-        }
-
-        return sizes.filter(size => size !== widthInSrc).map(size => `${state.updateQueryParam(url, "width", size)} ${size}w`).concat([srcUrl]).join(", ");
-      }
-
-      if (url.match(/cdn\.shopify\.com/)) {
-        return sizes.map(size => [state.getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(", ");
-      }
-
-      return url;
-    },
-    useSrcSet: function useSrcSet() {
-      return props.srcset || state.getSrcSet(props.image) || "";
-    }
-  });
-  return <div class={css({
-    position: "relative"
-  })}>
-      <picture>
-        <img class={"builder-image" + (props.class ? " " + props.class : "") + " " + css({
-        opacity: "1",
-        transition: "opacity 0.2s ease-in-out",
-        position: "absolute",
-        height: "100%",
-        width: "100%",
-        top: "0px",
-        left: "0px"
-      })} loading="lazy" alt={props.altText} aria-role={props.altText ? "presentation" : undefined} style={{
-        "object-position": props.backgroundSize || "center",
-        "object-fit": props.backgroundSize || "cover"
-      }} src={props.image} srcset={props.srcset || state.getSrcSet(props.image)} sizes={props.sizes} />
-        <Show when={!props.noWebp && state.useSrcSet().includes("builder.io")}>
-          <source type="image/webp" srcSet={state.useSrcSet().replace(/\?/g, "?format=webp&")} />
-        </Show>
-      </picture>
-      <Show when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}>
-        <div class={css({
-        width: "100%",
-        pointerEvents: "none",
-        fontSize: "0"
-      })} style={{
-        "padding-top": props.aspectRatio * 100 + "%"
-      }}>
-          {" "}
-        </div>
-      </Show>
-      <Show when={props.builderBlock?.children?.length && props.fitContent}>
-        {props.children}
-      </Show>
-      <Show when={!props.fitContent}>
-        <div class={css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch",
-        position: "absolute",
-        top: "0",
-        left: "0",
-        width: "100%",
-        height: "100%"
-      })}>
-          {props.children}
-        </div>
-      </Show>
-    </div>;
-}
-
-export default Image;import { registerComponent } from '../functions/register-component';
-registerComponent(Image, {name:'Image',static:true,builtIn:true,image:'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',defaultStyles:{position:'relative',minHeight:'20px',minWidth:'20px',overflow:'hidden'},canHaveChildren:true,inputs:[{name:'image',type:'file',bubble:true,allowedFileTypes:['jpeg','jpg','png','svg'],required:true,defaultValue:'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',onChange:"        const DEFAULT_ASPECT_RATIO = 0.7041;        options.delete('srcset');        options.delete('noWebp');        function loadImage(url, timeout) {          return new Promise((resolve, reject) => {            const img = document.createElement('img');            let loaded = false;            img.onload = () => {              loaded = true;              resolve(img);            };            img.addEventListener('error', event => {              console.warn('Image load failed', event.error);              reject(event.error);            });            img.src = url;            setTimeout(() => {              if (!loaded) {                reject(new Error('Image load timed out'));              }            }, timeout);          });        }        function round(num) {          return Math.round(num * 1000) / 1000;        }        const value = options.get('image');        const aspectRatio = options.get('aspectRatio');        // For SVG images - don't render as webp, keep them as SVG        fetch(value)          .then(res => res.blob())          .then(blob => {            if (blob.type.includes('svg')) {              options.set('noWebp', true);            }          });        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {          return loadImage(value).then(img => {            const possiblyUpdatedAspectRatio = options.get('aspectRatio');            if (              options.get('image') === value &&              (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)            ) {              if (img.width && img.height) {                options.set('aspectRatio', round(img.height / img.width));                options.set('height', img.height);                options.set('width', img.width);              }            }          });        }"},{name:'backgroundSize',type:'text',defaultValue:'cover',enum:[{label:'contain',value:'contain',helperText:'The image should never get cropped'},{label:'cover',value:'cover',helperText:"The image should fill it's box, cropping when needed"}]},{name:'backgroundPosition',type:'text',defaultValue:'center',enum:['center','top','left','right','bottom','top left','top right','bottom left','bottom right']},{name:'altText',type:'string',helperText:'Text to display when the user has images off'},{name:'height',type:'number',hideFromUI:true},{name:'width',type:'number',hideFromUI:true},{name:'sizes',type:'string',hideFromUI:true},{name:'srcset',type:'string',hideFromUI:true},{name:'lazy',type:'boolean',defaultValue:true,hideFromUI:true},{name:'fitContent',type:'boolean',helperText:"When child blocks are provided, fit to them instead of using the image's aspect ratio",defaultValue:true},{name:'aspectRatio',type:'number',helperText:"This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",advanced:true,defaultValue:0.7041}]});