@builder.io/sdk-solid 0.0.8-2 → 0.0.8-22

package/README.md

@@ -1,3 +1,7 @@
 # Builder.io SDK for Solid
 
-More info comign soon
+More info coming soon.
+
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).

package/package.json

@@ -1,23 +1,27 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-2",
-  "type": "module",
+  "version": "0.0.8-22",
   "description": "",
-  "module": "src/index.js",
-  "main": "src/index.js",
+  "type": "module",
+  "main": "./src/solid-index.jsx",
+  "module": "./src/solid-index.jsx",
   "exports": {
-    ".": "./src/index.js"
+    ".": "./src/solid-index.jsx"
   },
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },
   "dependencies": {
+    "node-fetch": "^2.6.7",
     "solid-styled-components": "^0.27.6"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.15"
+    "solid-js": "^1.4.3"
   },
   "devDependencies": {
-    "solid-js": "^1.3.15"
+    "babel-preset-solid": "^1.3.17",
+    "solid-js": "^1.4.3",
+    "vite": "^2.9.8",
+    "vite-plugin-solid": "^2.2.6"
   }
 }

package/src/blocks/button/button.jsx

@@ -1,8 +1,13 @@
 import { Show } from "solid-js";
+import { css } from "solid-styled-components";
 
 function Button(props) {
   return <>
-      <Show when={props.link}>
+      <Show fallback={<button class={css({
+      all: "unset"
+    })} {...props.attributes}>
+            {props.text}
+          </button>} when={props.link}>
         <a {...props.attributes} role="button" href={props.link} target={props.openLinkInNewTab ? "_blank" : undefined}>
           {props.text}
         </a>

package/src/blocks/columns/columns.jsx

@@ -1,7 +1,7 @@
 import { For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
-import RenderBlocks from "../../components/render-blocks";
+import RenderBlocks from "../../components/render-blocks.jsx";
 
 function Columns(props) {
   const state = createMutable({
@@ -51,11 +51,11 @@ function Columns(props) {
     }
 
   });
-  return <div class={css({
+  return <div class={"builder-columns " + css({
     display: "flex",
     alignItems: "stretch",
     lineHeight: "normal",
-    "@media (max-width: 999px)": {
+    "@media (max-width: 991px)": {
       flexDirection: "var(--flex-dir-tablet)"
     },
     "@media (max-width: 639px)": {
@@ -66,9 +66,9 @@ function Columns(props) {
         {(column, _index) => {
         const index = _index();
 
-        return <div class={css({
+        return <div class={"builder-column " + css({
           flexGrow: "1",
-          "@media (max-width: 999px)": {
+          "@media (max-width: 991px)": {
             width: "var(--column-width-tablet) !important",
             marginLeft: "var(--column-margin-left-tablet) !important"
           },
@@ -80,8 +80,8 @@ function Columns(props) {
           width: state.getColumnCssWidth(index),
           "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
           ...state.columnCssVars
-        }}>
-              <RenderBlocks blocks={column.blocks}></RenderBlocks>
+        }} key={index}>
+              <RenderBlocks blocks={column.blocks} path={`component.options.columns.${index}.blocks`} parent={props.builderBlock.id}></RenderBlocks>
             </div>;
       }}
       </For>

package/src/blocks/columns/component-info.js

@@ -186,7 +186,31 @@ const componentInfo = {
           ]
         }
       ],
-      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();              }            }          }        }      "
+      onChange(options) {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete("width");
+          });
+        }
+        const columns = options.get("columns");
+        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",

package/src/blocks/custom-code/custom-code.jsx

@@ -1,3 +1,4 @@
+import { onMount } from "solid-js";
 import { createMutable } from "solid-js/store";
 
 function CustomCode(props) {
@@ -8,7 +9,6 @@ function CustomCode(props) {
     findAndRunScripts() {
       // TODO: Move this function to standalone one in '@builder.io/utils'
       if (elem && typeof window !== "undefined") {
-        /** @type {HTMLScriptElement[]} */
         const scripts = elem.getElementsByTagName("script");
 
         for (let i = 0; i < scripts.length; i++) {
@@ -41,7 +41,7 @@ function CustomCode(props) {
     }
 
   });
-  const elem = useRef();
+  let elem;
   onMount(() => {
     state.findAndRunScripts();
   });

package/src/blocks/embed/component-info.js

@@ -9,7 +9,26 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: "        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      "
+      onChange(options) {
+        const url = options.get("url");
+        if (url) {
+          options.set("content", "Loading...");
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+            if (options.get("url") === url) {
+              if (data.html) {
+                options.set("content", data.html);
+              } else {
+                options.set("content", "Invalid url, please try another");
+              }
+            }
+          }).catch((_err) => {
+            options.set("content", "There was an error embedding this URL, please try again or another URL");
+          });
+        } else {
+          options.delete("content");
+        }
+      }
     },
     {
       name: "content",

package/src/blocks/embed/embed.jsx

@@ -1,51 +1,48 @@
+import { on, createEffect } from "solid-js";
 import { createMutable } from "solid-js/store";
+import { isJsScript } from "./helpers";
 
 function Embed(props) {
   const state = createMutable({
     scriptsInserted: [],
     scriptsRun: [],
+    ranInitFn: false,
 
     findAndRunScripts() {
-      // TODO: Move this function to standalone one in '@builder.io/utils'
-      if (elem && typeof window !== "undefined") {
-        /** @type {HTMLScriptElement[]} */
-        const scripts = elem.getElementsByTagName("script");
-
-        for (let i = 0; i < scripts.length; i++) {
-          const script = scripts[i];
-
-          if (script.src) {
-            if (state.scriptsInserted.includes(script.src)) {
-              continue;
-            }
-
-            state.scriptsInserted.push(script.src);
-            const newScript = document.createElement("script");
-            newScript.async = true;
-            newScript.src = script.src;
-            document.head.appendChild(newScript);
-          } else if (!script.type || ["text/javascript", "application/javascript", "application/ecmascript"].includes(script.type)) {
-            if (state.scriptsRun.includes(script.innerText)) {
-              continue;
-            }
-
-            try {
-              state.scriptsRun.push(script.innerText);
-              new Function(script.innerText)();
-            } catch (error) {
-              console.warn("`Embed`: Error running script:", error);
-            }
+      const scripts = elem.getElementsByTagName("script");
+
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+
+        if (script.src && !state.scriptsInserted.includes(script.src)) {
+          state.scriptsInserted.push(script.src);
+          const newScript = document.createElement("script");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText)) {
+          try {
+            state.scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn("`Embed`: Error running script:", error);
           }
         }
       }
     }
 
   });
-  const elem = useRef();
-  onMount(() => {
-    state.findAndRunScripts();
-  });
-  return <div ref={elem} innerHTML={props.content}></div>;
+  let elem;
+
+  function onUpdateFn_0() {
+    if (elem && !state.ranInitFn) {
+      state.ranInitFn = true;
+      state.findAndRunScripts();
+    }
+  }
+
+  createEffect(on(() => [elem, state.ranInitFn], onUpdateFn_0));
+  return <div class="builder-embed" ref={elem} innerHTML={props.content}></div>;
 }
 
 export default Embed;

package/src/blocks/embed/helpers.js

@@ -0,0 +1,9 @@
+const SCRIPT_MIME_TYPES = [
+  "text/javascript",
+  "application/javascript",
+  "application/ecmascript"
+];
+const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+export {
+  isJsScript
+};

package/src/blocks/form/form.jsx

@@ -1,7 +1,7 @@
 import { Show, For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
-import RenderBlock from "../../components/render-block/render-block";
+import RenderBlock from "../../components/render-block/render-block.jsx";
 import { isEditing } from "../../functions/is-editing.js";
 
 function FormComponent(props) {
@@ -218,7 +218,7 @@ function FormComponent(props) {
     }
 
   });
-  const formRef = useRef();
+  let formRef;
   return <form {...props.attributes} validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={event => state.onSubmit(event)}>
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
@@ -236,7 +236,7 @@ function FormComponent(props) {
         <BuilderBlocks dataPath="sendingMessage" blocks={props.sendingMessage}></BuilderBlocks>
       </Show>
       <Show when={state.submissionState === "error" && state.responseData}>
-        <pre class={css({
+        <pre class={"builder-form-error-text " + css({
         padding: "10px",
         color: "red",
         textAlign: "center"

package/src/blocks/image/component-info.js

@@ -18,7 +18,53 @@ const componentInfo = {
       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);              }            }          });        }"
+      onChange(options) {
+        const DEFAULT_ASPECT_RATIO = 0.7041;
+        options.delete("srcset");
+        options.delete("noWebp");
+        function loadImage(url, timeout = 6e4) {
+          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 * 1e3) / 1e3;
+        }
+        const value = options.get("image");
+        const aspectRatio = options.get("aspectRatio");
+        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",

package/src/blocks/image/image.helpers.js

@@ -0,0 +1,48 @@
+function removeProtocol(path) {
+  return path.replace(/http(s)?:/, "");
+}
+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);
+}
+function getShopifyImageUrl(src, size) {
+  if (!src || !(src == null ? void 0 : src.match(/cdn\.shopify\.com/)) || !size) {
+    return src;
+  }
+  if (size === "master") {
+    return 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 removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
+  }
+  return null;
+}
+function getSrcSet(url) {
+  if (!url) {
+    return url;
+  }
+  const sizes = [100, 200, 400, 800, 1200, 1600, 2e3];
+  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) => `${updateQueryParam(url, "width", size)} ${size}w`).concat([srcUrl]).join(", ");
+  }
+  if (url.match(/cdn\.shopify\.com/)) {
+    return sizes.map((size) => [getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(", ");
+  }
+  return url;
+}
+export {
+  getSrcSet
+};

package/src/blocks/image/image.jsx

@@ -1,11 +1,48 @@
 import { Show } from "solid-js";
+import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
+import { getSrcSet } from "./image.helpers";
 
 function Image(props) {
+  const state = createMutable({
+    get srcSetToUse() {
+      const imageToUse = props.image || props.src;
+      const url = imageToUse;
+
+      if (!url || // We can auto add srcset for cdn.builder.io and shopify
+      // images, otherwise you can supply this prop manually
+      !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
+        return props.srcset;
+      }
+
+      if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
+        if (!props.srcset.includes(props.image.split("?")[0])) {
+          console.debug("Removed given srcset");
+          return getSrcSet(url);
+        }
+      } else if (props.image && !props.srcset) {
+        return getSrcSet(url);
+      }
+
+      return getSrcSet(url);
+    },
+
+    get webpSrcSet() {
+      if (state.srcSetToUse?.match(/builder\.io/) && !props.noWebp) {
+        return state.srcSetToUse.replace(/\?/g, "?format=webp&");
+      } else {
+        return "";
+      }
+    }
+
+  });
   return <div class={css({
     position: "relative"
   })}>
       <picture>
+        <Show when={state.webpSrcSet}>
+          <source type="image/webp" srcset={state.webpSrcSet} />
+        </Show>
         <img class={"builder-image" + (props.className ? " " + props.className : "") + " " + css({
         opacity: "1",
         transition: "opacity 0.2s ease-in-out",
@@ -14,22 +51,21 @@ function Image(props) {
         width: "100%",
         top: "0px",
         left: "0px"
-      })} loading="lazy" alt={props.altText} aria-role={props.altText ? "presentation" : undefined} style={{
+      })} loading="lazy" alt={props.altText} role={props.altText ? "presentation" : undefined} style={{
         "object-position": props.backgroundSize || "center",
         "object-fit": props.backgroundSize || "cover"
-      }} src={props.image} srcset={props.srcset} sizes={props.sizes} />
-        <source srcSet={props.srcset} />
+      }} src={props.image} srcset={state.srcSetToUse} sizes={props.sizes} />
+        <source srcset={state.srcSetToUse} />
       </picture>
       <Show when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}>
-        <div class={css({
+        <div class={"builder-image-sizer " + css({
         width: "100%",
         pointerEvents: "none",
         fontSize: "0"
       })} style={{
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         "padding-top": props.aspectRatio * 100 + "%"
-      }}>
-          {" "}
-        </div>
+      }}></div>
       </Show>
       <Show when={props.builderBlock?.children?.length && props.fitContent}>
         {props.children}

package/src/blocks/symbol/component-info.js

@@ -2,6 +2,7 @@ const componentInfo = {
   name: "Symbol",
   noWrap: true,
   static: true,
+  builtIn: true,
   inputs: [
     {
       name: "symbol",

package/src/blocks/symbol/symbol.jsx

@@ -1,6 +1,8 @@
+import { useContext, onMount, on, createEffect } from "solid-js";
 import { createMutable } from "solid-js/store";
-import RenderContent from "../../components/render-content/render-content";
+import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context";
+import { getContent } from "../../functions/get-content/index.js";
 
 function Symbol(props) {
   const state = createMutable({
@@ -11,12 +13,39 @@ function Symbol(props) {
   onMount(() => {
     state.content = props.symbol?.content;
   });
+
+  function onUpdateFn_0() {
+    const symbolToUse = props.symbol;
+    /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
+
+    if (symbolToUse && !symbolToUse.content && !state.content && symbolToUse.model) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        query: {
+          id: symbolToUse.entry
+        }
+      }).then(response => {
+        state.content = response;
+      });
+    }
+  }
+
+  createEffect(on(() => [props.symbol?.content, props.symbol?.model, props.symbol?.entry, state.content], onUpdateFn_0));
   return <div class={state.className} {...props.attributes} dataSet={{
     class: state.className
   }}>
-      <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} data={{ ...props.symbol?.data,
+      <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} customComponents={Object.values(builderContext.registeredComponents)} data={{ ...props.symbol?.data,
       ...builderContext.state,
-      ...props.symbol?.state.content?.data?.state
+      ...props.symbol?.content?.data?.state
     }} model={props.symbol?.model} content={state.content}></RenderContent>
     </div>;
 }

package/src/blocks/text/text.jsx

@@ -1,5 +1,5 @@
 function Text(props) {
-  return <div innerHTML={props.text}></div>;
+  return <div class="builder-text" innerHTML={props.text}></div>;
 }
 
 export default Text;

package/src/blocks/video/video.jsx

@@ -1,5 +1,28 @@
+import { createMutable } from "solid-js/store";
+
 function Video(props) {
-  return <video {...props.attributes} preload="none" style={{
+  const state = createMutable({
+    get videoProps() {
+      return { ...(props.autoPlay === true ? {
+          autoPlay: true
+        } : {}),
+        ...(props.muted === true ? {
+          muted: true
+        } : {}),
+        ...(props.controls === true ? {
+          controls: true
+        } : {}),
+        ...(props.loop === true ? {
+          loop: true
+        } : {}),
+        ...(props.playsInline === true ? {
+          playsInline: true
+        } : {})
+      };
+    }
+
+  });
+  return <video {...state.videoProps} style={{
     width: "100%",
     height: "100%",
     ...props.attributes?.style,
@@ -8,7 +31,7 @@ function Video(props) {
     // Hack to get object fit to work as expected and
     // not have the video overflow
     "border-radius": 1
-  }} key={props.video || "no-src"} poster={props.posterImage} autoPlay={props.autoPlay} muted={props.muted} controls={props.controls} loop={props.loop}></video>;
+  }} src={props.video || "no-src"} poster={props.posterImage}></video>;
 }
 
 export default Video;