@builder.io/sdk-solid 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "main": "src/index.js",
   "dependencies": {

package/src/blocks/columns.js

@@ -89,7 +89,7 @@ export default function Columns(props) {
           }),
                 _v$4 = {
             width: state.getColumnCssWidth(index),
-            marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
+            "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
             ...state.columnCssVars
           };
 

package/src/blocks/columns.lite.tsx

@@ -83,7 +83,7 @@ export default function Columns(props) {
             })}
             style={{
               width: state.getColumnCssWidth(index),
-              marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
+              "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
               ...state.columnCssVars,
             }}
           >

package/src/blocks/form.js

@@ -231,7 +231,7 @@ export default function FormComponent(props) {
   return (() => {
     const _el$ = _tmpl$2.cloneNode(true);
 
-    _el$.addEventListener("submit", event => state.state.onSubmit(event));
+    _el$.addEventListener("submit", event => state.onSubmit(event));
 
     formRef(_el$);
 
@@ -258,7 +258,7 @@ export default function FormComponent(props) {
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return state.state.submissionState === "error";
+        return state.submissionState === "error";
       },
 
       get children() {
@@ -276,7 +276,7 @@ export default function FormComponent(props) {
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return state.state.submissionState === "sending";
+        return state.submissionState === "sending";
       },
 
       get children() {
@@ -294,13 +294,13 @@ export default function FormComponent(props) {
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return state.state.submissionState === "error" && state.state.responseData;
+        return state.submissionState === "error" && state.responseData;
       },
 
       get children() {
         const _el$2 = _tmpl$.cloneNode(true);
 
-        _$insert(_el$2, () => JSON.stringify(state.state.responseData, null, 2));
+        _$insert(_el$2, () => JSON.stringify(state.responseData, null, 2));
 
         _$effect(() => _el$2.className = css({
           padding: "10px",
@@ -315,7 +315,7 @@ export default function FormComponent(props) {
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return state.state.submissionState === "success";
+        return state.submissionState === "success";
       },
 
       get children() {

package/src/blocks/form.lite.tsx

@@ -246,30 +246,26 @@ export default function FormComponent(props) {
       action={!props.sendWithJs && props.action}
       method={props.method}
       name={props.name}
-      onSubmit={(event) => state.state.onSubmit(event)}
+      onSubmit={(event) => state.onSubmit(event)}
     >
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
           {(block, index) => <RenderBlock block={block}></RenderBlock>}
         </For>
       </Show>
-      <Show when={state.state.submissionState === "error"}>
+      <Show when={state.submissionState === "error"}>
         <BuilderBlocks
           dataPath="errorMessage"
           blocks={props.errorMessage}
         ></BuilderBlocks>
       </Show>
-      <Show when={state.state.submissionState === "sending"}>
+      <Show when={state.submissionState === "sending"}>
         <BuilderBlocks
           dataPath="sendingMessage"
           blocks={props.sendingMessage}
         ></BuilderBlocks>
       </Show>
-      <Show
-        when={
-          state.state.submissionState === "error" && state.state.responseData
-        }
-      >
+      <Show when={state.submissionState === "error" && state.responseData}>
         <pre
           class={css({
             padding: "10px",
@@ -277,10 +273,10 @@ export default function FormComponent(props) {
             textAlign: "center",
           })}
         >
-          {JSON.stringify(state.state.responseData, null, 2)}
+          {JSON.stringify(state.responseData, null, 2)}
         </pre>
       </Show>
-      <Show when={state.state.submissionState === "success"}>
+      <Show when={state.submissionState === "success"}>
         <BuilderBlocks
           dataPath="successMessage"
           blocks={props.successMessage}

package/src/blocks/image.js

@@ -1,22 +1,100 @@
 import { template as _$template } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 
-const _tmpl$ = /*#__PURE__*/_$template(`<div> </div>`, 2),
-      _tmpl$2 = /*#__PURE__*/_$template(`<div></div>`, 2),
-      _tmpl$3 = /*#__PURE__*/_$template(`<div><picture><img loading="lazy"><source></picture></div>`, 6);
+const _tmpl$ = /*#__PURE__*/_$template(`<source type="image/webp">`, 1),
+      _tmpl$2 = /*#__PURE__*/_$template(`<div> </div>`, 2),
+      _tmpl$3 = /*#__PURE__*/_$template(`<div></div>`, 2),
+      _tmpl$4 = /*#__PURE__*/_$template(`<div><picture><img loading="lazy"></picture></div>`, 5);
 
 import { Show } from "solid-js";
+import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 export default 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 (() => {
-    const _el$ = _tmpl$3.cloneNode(true),
+    const _el$ = _tmpl$4.cloneNode(true),
           _el$2 = _el$.firstChild,
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$3.nextSibling;
+          _el$3 = _el$2.firstChild;
+
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!!props.noWebp, true)() && state.useSrcSet().includes("builder.io");
+      },
+
+      get children() {
+        const _el$4 = _tmpl$.cloneNode(true);
+
+        _$effect(() => _$setAttribute(_el$4, "srcset", state.useSrcSet().replace(/\?/g, "?format=webp&")));
+
+        return _el$4;
+      }
+
+    }), null);
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
@@ -24,7 +102,7 @@ export default function Image(props) {
       },
 
       get children() {
-        const _el$5 = _tmpl$.cloneNode(true);
+        const _el$5 = _tmpl$2.cloneNode(true);
 
         _$effect(_p$ => {
           const _v$ = css({
@@ -35,7 +113,7 @@ export default function Image(props) {
                 _v$2 = props.aspectRatio * 100 + "%";
 
           _v$ !== _p$._v$ && (_el$5.className = _p$._v$ = _v$);
-          _v$2 !== _p$._v$2 && _el$5.style.setProperty("paddingTop", _p$._v$2 = _v$2);
+          _v$2 !== _p$._v$2 && _el$5.style.setProperty("padding-top", _p$._v$2 = _v$2);
           return _p$;
         }, {
           _v$: undefined,
@@ -64,7 +142,7 @@ export default function Image(props) {
       },
 
       get children() {
-        const _el$6 = _tmpl$2.cloneNode(true);
+        const _el$6 = _tmpl$3.cloneNode(true);
 
         _$insert(_el$6, () => props.children);
 
@@ -102,20 +180,18 @@ export default function Image(props) {
             _v$7 = props.backgroundSize || "center",
             _v$8 = props.backgroundSize || "cover",
             _v$9 = props.image,
-            _v$10 = props.srcset,
-            _v$11 = props.sizes,
-            _v$12 = props.srcset;
+            _v$10 = props.srcset || state.getSrcSet(props.image),
+            _v$11 = props.sizes;
 
       _v$3 !== _p$._v$3 && (_el$.className = _p$._v$3 = _v$3);
       _v$4 !== _p$._v$4 && (_el$3.className = _p$._v$4 = _v$4);
       _v$5 !== _p$._v$5 && _$setAttribute(_el$3, "alt", _p$._v$5 = _v$5);
       _v$6 !== _p$._v$6 && _$setAttribute(_el$3, "aria-role", _p$._v$6 = _v$6);
-      _v$7 !== _p$._v$7 && _el$3.style.setProperty("objectPosition", _p$._v$7 = _v$7);
-      _v$8 !== _p$._v$8 && _el$3.style.setProperty("objectFit", _p$._v$8 = _v$8);
+      _v$7 !== _p$._v$7 && _el$3.style.setProperty("object-position", _p$._v$7 = _v$7);
+      _v$8 !== _p$._v$8 && _el$3.style.setProperty("object-fit", _p$._v$8 = _v$8);
       _v$9 !== _p$._v$9 && _$setAttribute(_el$3, "src", _p$._v$9 = _v$9);
       _v$10 !== _p$._v$10 && _$setAttribute(_el$3, "srcset", _p$._v$10 = _v$10);
       _v$11 !== _p$._v$11 && _$setAttribute(_el$3, "sizes", _p$._v$11 = _v$11);
-      _v$12 !== _p$._v$12 && _$setAttribute(_el$4, "srcset", _p$._v$12 = _v$12);
       return _p$;
     }, {
       _v$3: undefined,
@@ -126,8 +202,7 @@ export default function Image(props) {
       _v$8: undefined,
       _v$9: undefined,
       _v$10: undefined,
-      _v$11: undefined,
-      _v$12: undefined
+      _v$11: undefined
     });
 
     return _el$;

package/src/blocks/image.lite.tsx

@@ -1,8 +1,91 @@
 import { Show } from "solid-js";
 
+import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 
 export default 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({
@@ -29,14 +112,19 @@ export default function Image(props) {
           alt={props.altText}
           aria-role={props.altText ? "presentation" : undefined}
           style={{
-            objectPosition: props.backgroundSize || "center",
-            objectFit: props.backgroundSize || "cover",
+            "object-position": props.backgroundSize || "center",
+            "object-fit": props.backgroundSize || "cover",
           }}
           src={props.image}
-          srcset={props.srcset}
+          srcset={props.srcset || state.getSrcSet(props.image)}
           sizes={props.sizes}
         />
-        <source srcSet={props.srcset} />
+        <Show when={!props.noWebp && state.useSrcSet().includes("builder.io")}>
+          <source
+            type="image/webp"
+            srcSet={state.useSrcSet().replace(/\?/g, "?format=webp&")}
+          />
+        </Show>
       </picture>
       <Show
         when={
@@ -51,7 +139,7 @@ export default function Image(props) {
             fontSize: "0",
           })}
           style={{
-            paddingTop: props.aspectRatio * 100 + "%",
+            "padding-top": props.aspectRatio * 100 + "%",
           }}
         >
           {" "}

package/src/blocks/img.js

@@ -19,8 +19,8 @@ export default function ImgComponent(props) {
             _v$4 = props.altText,
             _v$5 = props.imgSrc;
 
-      _v$ !== _p$._v$ && _el$.style.setProperty("objectFit", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _el$.style.setProperty("objectPosition", _p$._v$2 = _v$2);
+      _v$ !== _p$._v$ && _el$.style.setProperty("object-fit", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && _el$.style.setProperty("object-position", _p$._v$2 = _v$2);
       _v$3 !== _p$._v$3 && _$setAttribute(_el$, "key", _p$._v$3 = _v$3);
       _v$4 !== _p$._v$4 && _$setAttribute(_el$, "alt", _p$._v$4 = _v$4);
       _v$5 !== _p$._v$5 && _$setAttribute(_el$, "src", _p$._v$5 = _v$5);

package/src/blocks/img.lite.tsx

@@ -5,8 +5,8 @@ export default function ImgComponent(props) {
     <img
       {...props.attributes}
       style={{
-        objectFit: props.backgroundSize || "cover",
-        objectPosition: props.backgroundPosition || "center",
+        "object-fit": props.backgroundSize || "cover",
+        "object-position": props.backgroundPosition || "center",
       }}
       key={(isEditing() && props.imgSrc) || "default-key"}
       alt={props.altText}

package/src/blocks/section.js

@@ -15,7 +15,7 @@ export default function SectionComponent(props) {
     _$insert(_el$, () => props.children);
 
     _$effect(_$p => _$style(_el$, props.maxWidth && typeof props.maxWidth === "number" ? {
-      maxWidth: props.maxWidth
+      "max-width": props.maxWidth
     } : undefined, _$p));
 
     return _el$;

package/src/blocks/section.lite.tsx

@@ -5,7 +5,7 @@ export default function SectionComponent(props) {
       style={
         props.maxWidth && typeof props.maxWidth === "number"
           ? {
-              maxWidth: props.maxWidth,
+              "max-width": props.maxWidth,
             }
           : undefined
       }

package/src/blocks/video.js

@@ -17,11 +17,11 @@ export default function Video(props) {
         width: "100%",
         height: "100%",
         ...props.attributes?.style,
-        objectFit: props.fit,
-        objectPosition: props.position,
+        "object-fit": props.fit,
+        "object-position": props.position,
         // Hack to get object fit to work as expected and
         // not have the video overflow
-        borderRadius: 1
+        "border-radius": 1
       },
             _v$2 = props.video || "no-src",
             _v$3 = props.posterImage,

package/src/blocks/video.lite.tsx

@@ -7,11 +7,11 @@ export default function Video(props) {
         width: "100%",
         height: "100%",
         ...props.attributes?.style,
-        objectFit: props.fit,
-        objectPosition: props.position,
+        "object-fit": props.fit,
+        "object-position": props.position,
         // Hack to get object fit to work as expected and
         // not have the video overflow
-        borderRadius: 1,
+        "border-radius": 1,
       }}
       key={props.video || "no-src"}
       poster={props.posterImage}

package/src/components/render-block.js

@@ -1,6 +1,6 @@
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-import { Show, For } from "solid-js";
+import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 import { getBlockComponentOptions } from "../functions/get-block-component-options";

package/src/components/render-block.lite.tsx

@@ -1,4 +1,4 @@
-import { Show, For } from "solid-js";
+import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 

package/src/components/render-content.js

@@ -266,27 +266,27 @@ export default function RenderContent(props) {
     get children() {
       return _$createComponent(Show, {
         get when() {
-          return state.state.useContent;
+          return state.useContent;
         },
 
         get children() {
           const _el$ = _tmpl$2.cloneNode(true);
 
           _el$.$$click = event => track("click", {
-            contentId: state.state.useContent.id
+            contentId: state.useContent.id
           });
 
           _$insert(_el$, _$createComponent(Show, {
             get when() {
-              return _$memo(() => !!(state.state.useContent?.data?.cssCode || state.state.useContent?.data?.customFonts?.length), true)() && !isReactNative();
+              return _$memo(() => !!(state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length), true)() && !isReactNative();
             },
 
             get children() {
               const _el$2 = _tmpl$.cloneNode(true);
 
-              _$insert(_el$2, () => state.state.useContent.data.cssCode, null);
+              _$insert(_el$2, () => state.useContent.data.cssCode, null);
 
-              _$insert(_el$2, () => state.state.getFontCss(state.state.useContent.data), null);
+              _$insert(_el$2, () => state.getFontCss(state.useContent.data), null);
 
               return _el$2;
             }
@@ -295,12 +295,12 @@ export default function RenderContent(props) {
 
           _$insert(_el$, _$createComponent(RenderBlocks, {
             get blocks() {
-              return state.state.useContent?.data?.blocks;
+              return state.useContent?.data?.blocks;
             }
 
           }), null);
 
-          _$effect(() => _$setAttribute(_el$, "data-builder-content-id", state.state.useContent?.id));
+          _$effect(() => _$setAttribute(_el$, "data-builder-content-id", state.useContent?.id));
 
           return _el$;
         }

package/src/components/render-content.lite.tsx

@@ -1,4 +1,4 @@
-import { Show, onMount } from "solid-js";
+import { useContext, Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 
@@ -258,30 +258,28 @@ export default function RenderContent(props) {
       }}
       component={BuilderContext.Provider}
     >
-      <Show when={state.state.useContent}>
+      <Show when={state.useContent}>
         <div
           onClick={(event) =>
             track("click", {
-              contentId: state.state.useContent.id,
+              contentId: state.useContent.id,
             })
           }
-          data-builder-content-id={state.state.useContent?.id}
+          data-builder-content-id={state.useContent?.id}
         >
           <Show
             when={
-              (state.state.useContent?.data?.cssCode ||
-                state.state.useContent?.data?.customFonts?.length) &&
+              (state.useContent?.data?.cssCode ||
+                state.useContent?.data?.customFonts?.length) &&
               !isReactNative()
             }
           >
             <style>
-              {state.state.useContent.data.cssCode}
-              {state.state.getFontCss(state.state.useContent.data)}
+              {state.useContent.data.cssCode}
+              {state.getFontCss(state.useContent.data)}
             </style>
           </Show>
-          <RenderBlocks
-            blocks={state.state.useContent?.data?.blocks}
-          ></RenderBlocks>
+          <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
         </div>
       </Show>
     </Dynamic>