@builder.io/sdk-solid 0.0.8-21 → 0.0.8-24

package/src/blocks/form/form.jsx

@@ -1,250 +1,249 @@
-import { Show, For } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { useContext, Show, For, createSignal } from "solid-js";
 import { css } from "solid-styled-components";
 import RenderBlock from "../../components/render-block/render-block.jsx";
+import BuilderBlocks from "../../components/render-blocks.jsx";
 import { isEditing } from "../../functions/is-editing.js";
 
 function FormComponent(props) {
-  const state = createMutable({
-    formState: "unsubmitted",
-    responseData: null,
-    formErrorMessage: "",
+  const [formState, setFormState] = createSignal("unsubmitted");
+  const [responseData, setResponseData] = createSignal(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal("");
 
-    get submissionState() {
-      return isEditing() && props.previewState || state.formState;
-    },
+  function submissionState() {
+    return isEditing() && props.previewState || formState();
+  }
 
-    onSubmit(event) {
-      const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
+  function onSubmit(event) {
+    const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
 
-      if (props.sendSubmissionsTo === "zapier") {
+    if (props.sendSubmissionsTo === "zapier") {
+      event.preventDefault();
+    } else if (sendWithJs) {
+      if (!(props.action || props.sendSubmissionsTo === "email")) {
         event.preventDefault();
-      } else if (sendWithJs) {
-        if (!(props.action || props.sendSubmissionsTo === "email")) {
-          event.preventDefault();
-          return;
-        }
+        return;
+      }
 
-        event.preventDefault();
-        const el = event.currentTarget;
-        const headers = props.customHeaders || {};
-        let body;
-        const formData = new FormData(el); // TODO: maybe support null
-
-        const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter(el => !!el.name).map(el => {
-          let value;
-          const key = el.name;
-
-          if (el instanceof HTMLInputElement) {
-            if (el.type === "radio") {
-              if (el.checked) {
-                value = el.name;
-                return {
-                  key,
-                  value
-                };
-              }
-            } else if (el.type === "checkbox") {
-              value = el.checked;
-            } else if (el.type === "number" || el.type === "range") {
-              const num = el.valueAsNumber;
+      event.preventDefault();
+      const el = event.currentTarget;
+      const headers = props.customHeaders || {};
+      let body;
+      const formData = new FormData(el); // TODO: maybe support null
+
+      const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter(el => !!el.name).map(el => {
+        let value;
+        const key = el.name;
+
+        if (el instanceof HTMLInputElement) {
+          if (el.type === "radio") {
+            if (el.checked) {
+              value = el.name;
+              return {
+                key,
+                value
+              };
+            }
+          } else if (el.type === "checkbox") {
+            value = el.checked;
+          } else if (el.type === "number" || el.type === "range") {
+            const num = el.valueAsNumber;
 
-              if (!isNaN(num)) {
-                value = num;
-              }
-            } else if (el.type === "file") {
-              // TODO: one vs multiple files
-              value = el.files;
-            } else {
-              value = el.value;
+            if (!isNaN(num)) {
+              value = num;
             }
+          } else if (el.type === "file") {
+            // TODO: one vs multiple files
+            value = el.files;
           } else {
             value = el.value;
           }
+        } else {
+          value = el.value;
+        }
 
-          return {
-            key,
-            value
-          };
-        });
-        let contentType = props.contentType;
+        return {
+          key,
+          value
+        };
+      });
+      let contentType = props.contentType;
 
-        if (props.sendSubmissionsTo === "email") {
+      if (props.sendSubmissionsTo === "email") {
+        contentType = "multipart/form-data";
+      }
+
+      Array.from(formPairs).forEach(({
+        value
+      }) => {
+        if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList) {
           contentType = "multipart/form-data";
         }
-
+      }); // TODO: send as urlEncoded or multipart by default
+      // because of ease of use and reliability in browser API
+      // for encoding the form?
+
+      if (contentType !== "application/json") {
+        body = formData;
+      } else {
+        // Json
+        const json = {};
         Array.from(formPairs).forEach(({
-          value
+          value,
+          key
         }) => {
-          if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList) {
-            contentType = "multipart/form-data";
-          }
-        }); // TODO: send as urlEncoded or multipart by default
-        // because of ease of use and reliability in browser API
-        // for encoding the form?
+          set(json, key, value);
+        });
+        body = JSON.stringify(json);
+      }
 
-        if (contentType !== "application/json") {
-          body = formData;
-        } else {
-          // Json
-          const json = {};
-          Array.from(formPairs).forEach(({
-            value,
-            key
-          }) => {
-            set(json, key, value);
-          });
-          body = JSON.stringify(json);
+      if (contentType && contentType !== "multipart/form-data") {
+        if (
+        /* Zapier doesn't allow content-type header to be sent from browsers */
+        !(sendWithJs && props.action?.includes("zapier.com"))) {
+          headers["content-type"] = contentType;
         }
+      }
 
-        if (contentType && contentType !== "multipart/form-data") {
-          if (
-          /* Zapier doesn't allow content-type header to be sent from browsers */
-          !(sendWithJs && props.action?.includes("zapier.com"))) {
-            headers["content-type"] = contentType;
-          }
+      const presubmitEvent = new CustomEvent("presubmit", {
+        detail: {
+          body
         }
+      });
 
-        const presubmitEvent = new CustomEvent("presubmit", {
-          detail: {
-            body
-          }
-        });
-
-        if (formRef) {
-          formRef.dispatchEvent(presubmitEvent);
+      if (formRef) {
+        formRef.dispatchEvent(presubmitEvent);
 
-          if (presubmitEvent.defaultPrevented) {
-            return;
-          }
+        if (presubmitEvent.defaultPrevented) {
+          return;
         }
+      }
 
-        state.formState = "sending";
-        const formUrl = `${builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
-        fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action,
-        /* TODO: throw error if no action URL */
-        {
-          body,
-          headers,
-          method: props.method || "post"
-        }).then(async res => {
-          let body;
-          const contentType = res.headers.get("content-type");
-
-          if (contentType && contentType.indexOf("application/json") !== -1) {
-            body = await res.json();
-          } else {
-            body = await res.text();
-          }
+      setFormState("sending");
+      const formUrl = `${builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
+      fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action,
+      /* TODO: throw error if no action URL */
+      {
+        body,
+        headers,
+        method: props.method || "post"
+      }).then(async res => {
+        let body;
+        const contentType = res.headers.get("content-type");
 
-          if (!res.ok && props.errorMessagePath) {
-            /* TODO: allow supplying an error formatter function */
-            let message = get(body, props.errorMessagePath);
+        if (contentType && contentType.indexOf("application/json") !== -1) {
+          body = await res.json();
+        } else {
+          body = await res.text();
+        }
 
-            if (message) {
-              if (typeof message !== "string") {
-                /* TODO: ideally convert json to yaml so it woul dbe like
-                error: - email has been taken */
-                message = JSON.stringify(message);
-              }
+        if (!res.ok && props.errorMessagePath) {
+          /* TODO: allow supplying an error formatter function */
+          let message = get(body, props.errorMessagePath);
 
-              state.formErrorMessage = message;
+          if (message) {
+            if (typeof message !== "string") {
+              /* TODO: ideally convert json to yaml so it woul dbe like
+              error: - email has been taken */
+              message = JSON.stringify(message);
             }
+
+            setFormErrorMessage(message);
           }
+        }
 
-          state.responseData = body;
-          state.formState = res.ok ? "success" : "error";
+        setResponseData(body);
+        setFormState(res.ok ? "success" : "error");
 
-          if (res.ok) {
-            const submitSuccessEvent = new CustomEvent("submit:success", {
-              detail: {
-                res,
-                body
-              }
-            });
+        if (res.ok) {
+          const submitSuccessEvent = new CustomEvent("submit:success", {
+            detail: {
+              res,
+              body
+            }
+          });
 
-            if (formRef) {
-              formRef.dispatchEvent(submitSuccessEvent);
+          if (formRef) {
+            formRef.dispatchEvent(submitSuccessEvent);
 
-              if (submitSuccessEvent.defaultPrevented) {
-                return;
-              }
-              /* TODO: option to turn this on/off? */
+            if (submitSuccessEvent.defaultPrevented) {
+              return;
+            }
+            /* TODO: option to turn this on/off? */
 
 
-              if (props.resetFormOnSubmit !== false) {
-                formRef.reset();
-              }
+            if (props.resetFormOnSubmit !== false) {
+              formRef.reset();
             }
-            /* TODO: client side route event first that can be preventDefaulted */
-
+          }
+          /* TODO: client side route event first that can be preventDefaulted */
 
-            if (props.successUrl) {
-              if (formRef) {
-                const event = new CustomEvent("route", {
-                  detail: {
-                    url: props.successUrl
-                  }
-                });
-                formRef.dispatchEvent(event);
 
-                if (!event.defaultPrevented) {
-                  location.href = props.successUrl;
+          if (props.successUrl) {
+            if (formRef) {
+              const event = new CustomEvent("route", {
+                detail: {
+                  url: props.successUrl
                 }
-              } else {
+              });
+              formRef.dispatchEvent(event);
+
+              if (!event.defaultPrevented) {
                 location.href = props.successUrl;
               }
+            } else {
+              location.href = props.successUrl;
             }
           }
-        }, err => {
-          const submitErrorEvent = new CustomEvent("submit:error", {
-            detail: {
-              error: err
-            }
-          });
+        }
+      }, err => {
+        const submitErrorEvent = new CustomEvent("submit:error", {
+          detail: {
+            error: err
+          }
+        });
 
-          if (formRef) {
-            formRef.dispatchEvent(submitErrorEvent);
+        if (formRef) {
+          formRef.dispatchEvent(submitErrorEvent);
 
-            if (submitErrorEvent.defaultPrevented) {
-              return;
-            }
+          if (submitErrorEvent.defaultPrevented) {
+            return;
           }
+        }
 
-          state.responseData = err;
-          state.formState = "error";
-        });
-      }
+        setResponseData(err);
+        setFormState("error");
+      });
     }
+  }
 
-  });
   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)}>
+  const builderContext = useContext(BuilderContext);
+  return <form {...props.attributes} validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={event => onSubmit(event)}>
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
           {(block, _index) => {
           const index = _index();
 
-          return <RenderBlock block={block}></RenderBlock>;
+          return <RenderBlock block={block} context={builderContext}></RenderBlock>;
         }}
         </For>
       </Show>
-      <Show when={state.submissionState === "error"}>
+      <Show when={submissionState() === "error"}>
         <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage}></BuilderBlocks>
       </Show>
-      <Show when={state.submissionState === "sending"}>
+      <Show when={submissionState() === "sending"}>
         <BuilderBlocks dataPath="sendingMessage" blocks={props.sendingMessage}></BuilderBlocks>
       </Show>
-      <Show when={state.submissionState === "error" && state.responseData}>
+      <Show when={submissionState() === "error" && responseData()}>
         <pre class={"builder-form-error-text " + css({
         padding: "10px",
         color: "red",
         textAlign: "center"
       })}>
-          {JSON.stringify(state.responseData, null, 2)}
+          {JSON.stringify(responseData(), null, 2)}
         </pre>
       </Show>
-      <Show when={state.submissionState === "success"}>
+      <Show when={submissionState() === "success"}>
         <BuilderBlocks dataPath="successMessage" blocks={props.successMessage}></BuilderBlocks>
       </Show>
     </form>;

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

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Image",
   static: true,
@@ -18,7 +19,7 @@ const componentInfo = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange(options) {
+      onChange: markSerializable((options) => {
         const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");
         options.delete("noWebp");
@@ -64,7 +65,7 @@ const componentInfo = {
             }
           });
         }
-      }
+      })
     },
     {
       name: "backgroundSize",

package/src/blocks/image/image.jsx

@@ -1,47 +1,44 @@
 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;
+  function 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 (!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) {
+    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);
-    },
+    }
 
-    get webpSrcSet() {
-      if (state.srcSetToUse?.match(/builder\.io/) && !props.noWebp) {
-        return state.srcSetToUse.replace(/\?/g, "?format=webp&");
-      } else {
-        return "";
-      }
+    return getSrcSet(url);
+  }
+
+  function webpSrcSet() {
+    if (srcSetToUse()?.match(/builder\.io/) && !props.noWebp) {
+      return 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 when={webpSrcSet()}>
+          <source type="image/webp" srcset={webpSrcSet()} />
         </Show>
         <img class={"builder-image" + (props.className ? " " + props.className : "") + " " + css({
         opacity: "1",
@@ -54,8 +51,8 @@ function Image(props) {
       })} 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={state.srcSetToUse} sizes={props.sizes} />
-        <source srcset={state.srcSetToUse} />
+      }} src={props.image} srcset={srcSetToUse()} sizes={props.sizes} />
+        <source srcset={srcSetToUse()} />
       </picture>
       <Show when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}>
         <div class={"builder-image-sizer " + css({

package/src/blocks/img/img.jsx

@@ -4,7 +4,7 @@ function ImgComponent(props) {
   return <img {...props.attributes} style={{
     "object-fit": props.backgroundSize || "cover",
     "object-position": props.backgroundPosition || "center"
-  }} key={isEditing() && props.imgSrc || "default-key"} alt={props.altText} src={props.imgSrc} />;
+  }} key={isEditing() && props.imgSrc || "default-key"} alt={props.altText} src={props.imgSrc || props.image} />;
 }
 
 export default ImgComponent;

package/src/blocks/symbol/symbol.jsx

@@ -1,17 +1,14 @@
-import { useContext, onMount, on, createEffect } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { useContext, onMount, on, createEffect, createSignal } from "solid-js";
 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({
-    className: "builder-symbol",
-    content: null
-  });
+  const [className, setClassName] = createSignal("builder-symbol");
+  const [content, setContent] = createSignal(null);
   const builderContext = useContext(BuilderContext);
   onMount(() => {
-    state.content = props.symbol?.content;
+    setContent(props.symbol?.content);
   });
 
   function onUpdateFn_0() {
@@ -26,7 +23,7 @@ function Symbol(props) {
      * then we want to re-fetch the symbol content.
      */
 
-    if (symbolToUse && !symbolToUse.content && !state.content && symbolToUse.model) {
+    if (symbolToUse && !symbolToUse.content && !content() && symbolToUse.model) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
@@ -34,19 +31,19 @@ function Symbol(props) {
           id: symbolToUse.entry
         }
       }).then(response => {
-        state.content = response;
+        setContent(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
+  createEffect(on(() => [props.symbol?.content, props.symbol?.model, props.symbol?.entry, content()], onUpdateFn_0));
+  return <div class={className()} {...props.attributes} dataSet={{
+    class: className()
   }}>
       <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} customComponents={Object.values(builderContext.registeredComponents)} data={{ ...props.symbol?.data,
       ...builderContext.state,
       ...props.symbol?.content?.data?.state
-    }} model={props.symbol?.model} content={state.content}></RenderContent>
+    }} model={props.symbol?.model} content={content()}></RenderContent>
     </div>;
 }
 

package/src/blocks/util.js

@@ -0,0 +1,7 @@
+function markSerializable(fn) {
+  fn.__qwik_serializable__ = true;
+  return fn;
+}
+export {
+  markSerializable
+};

package/src/blocks/video/video.jsx

@@ -1,28 +1,24 @@
-import { createMutable } from "solid-js/store";
-
 function Video(props) {
-  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
-        } : {})
-      };
-    }
+  function 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={{
+  return <video {...videoProps()} style={{
     width: "100%",
     height: "100%",
     ...props.attributes?.style,