@builder.io/sdk-solid 0.0.20 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",

package/src/blocks/BaseText.jsx

@@ -1,9 +1,7 @@
 import { useContext } from "solid-js";
 import BuilderContext from "../context/builder.context.js";
-
 function BaseText(props) {
   const builderContext = useContext(BuilderContext);
   return <span style={builderContext.inheritedStyles}>{props.text}</span>;
 }
-
 export default BaseText;

package/src/blocks/button/button.jsx

@@ -1,16 +1,14 @@
 import { Show } from "solid-js";
 import { css } from "solid-styled-components";
-
 function Button(props) {
   return <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}>
+      <a role="button" {...props.attributes} href={props.link} target={props.openLinkInNewTab ? "_blank" : undefined}>
         {props.text}
       </a>
     </Show>;
 }
-
 export default Button;

package/src/blocks/columns/columns.jsx

@@ -1,35 +1,27 @@
 import { For } from "solid-js";
 import { css } from "solid-styled-components";
 import RenderBlocks from "../../components/render-blocks.jsx";
-import { markMutable } from "../../functions/mark-mutable";
-
 function Columns(props) {
   function getGutterSize() {
     return typeof props.space === "number" ? props.space || 0 : 20;
   }
-
   function getColumns() {
     return props.columns || [];
   }
-
   function getWidth(index) {
     const columns = getColumns();
     return columns[index]?.width || 100 / columns.length;
   }
-
   function getColumnCssWidth(index) {
     const columns = getColumns();
     const gutterSize = getGutterSize();
     const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
   }
-
   function maybeApplyForTablet(prop) {
     const _stackColumnsAt = props.stackColumnsAt || "tablet";
-
     return _stackColumnsAt === "tablet" ? prop : "inherit";
   }
-
   function columnsCssVars() {
     const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
     return {
@@ -37,7 +29,6 @@ function Columns(props) {
       "--flex-dir-tablet": maybeApplyForTablet(flexDir)
     };
   }
-
   function columnCssVars() {
     const width = "100%";
     const marginLeft = "0";
@@ -48,7 +39,6 @@ function Columns(props) {
       "--column-margin-left-tablet": maybeApplyForTablet(marginLeft)
     };
   }
-
   return <div class={"builder-columns " + css({
     display: "flex",
     alignItems: "stretch",
@@ -63,7 +53,6 @@ function Columns(props) {
       <For each={props.columns}>
         {(column, _index) => {
         const index = _index();
-
         return <div class={"builder-column " + css({
           display: "flex",
           flexDirection: "column",
@@ -81,7 +70,7 @@ function Columns(props) {
           "margin-left": `${index === 0 ? 0 : getGutterSize()}px`,
           ...columnCssVars()
         }} key={index}>
-              <RenderBlocks blocks={markMutable(column.blocks)} path={`component.options.columns.${index}.blocks`} parent={props.builderBlock.id} styleProp={{
+              <RenderBlocks blocks={column.blocks} path={`component.options.columns.${index}.blocks`} parent={props.builderBlock.id} styleProp={{
             flexGrow: "1"
           }}></RenderBlocks>
             </div>;
@@ -89,5 +78,4 @@ function Columns(props) {
       </For>
     </div>;
 }
-
 export default Columns;

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

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util.js";
+import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -187,7 +187,7 @@ const componentInfo = {
           ]
         }
       ],
-      onChange: markSerializable((options) => {
+      onChange: serializeFn((options) => {
         function clearWidths() {
           columns.forEach((col) => {
             col.delete("width");

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

@@ -1,22 +1,17 @@
 import { onMount, createSignal } from "solid-js";
-
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
-
   function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'
     if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
       const scripts = elem.getElementsByTagName("script");
-
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
-
         if (script.src) {
           if (scriptsInserted().includes(script.src)) {
             continue;
           }
-
           scriptsInserted().push(script.src);
           const newScript = document.createElement("script");
           newScript.async = true;
@@ -26,7 +21,6 @@ function CustomCode(props) {
           if (scriptsRun().includes(script.innerText)) {
             continue;
           }
-
           try {
             scriptsRun().push(script.innerText);
             new Function(script.innerText)();
@@ -37,12 +31,10 @@ function CustomCode(props) {
       }
     }
   }
-
   let elem;
   onMount(() => {
     findAndRunScripts();
   });
   return <div class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")} ref={elem} innerHTML={props.code}></div>;
 }
-
 export default CustomCode;

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

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util.js";
+import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -10,7 +10,7 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: markSerializable((options) => {
+      onChange: serializeFn((options) => {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");

package/src/blocks/embed/embed.jsx

@@ -1,18 +1,14 @@
 import { on, createEffect, createSignal } from "solid-js";
 import { isJsScript } from "./helpers.js";
-
 function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
   const [ranInitFn, setRanInitFn] = createSignal(false);
-
   function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName) return;
     const scripts = elem.getElementsByTagName("script");
-
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
-
       if (script.src && !scriptsInserted().includes(script.src)) {
         scriptsInserted().push(script.src);
         const newScript = document.createElement("script");
@@ -29,18 +25,14 @@ function Embed(props) {
       }
     }
   }
-
   let elem;
-
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
       findAndRunScripts();
     }
   }
-
   createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
   return <div class="builder-embed" ref={elem} innerHTML={props.content}></div>;
 }
-
 export default Embed;

package/src/blocks/form/form.jsx

@@ -3,19 +3,15 @@ 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 [formState, setFormState] = createSignal("unsubmitted");
   const [responseData, setResponseData] = createSignal(null);
   const [formErrorMessage, setFormErrorMessage] = createSignal("");
-
   function submissionState() {
     return isEditing() && props.previewState || formState();
   }
-
   function onSubmit(event) {
     const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
-
     if (props.sendSubmissionsTo === "zapier") {
       event.preventDefault();
     } else if (sendWithJs) {
@@ -23,17 +19,16 @@ function FormComponent(props) {
         event.preventDefault();
         return;
       }
-
       event.preventDefault();
       const el = event.currentTarget;
       const headers = props.customHeaders || {};
       let body;
-      const formData = new FormData(el); // TODO: maybe support null
+      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) {
@@ -47,7 +42,6 @@ function FormComponent(props) {
             value = el.checked;
           } else if (el.type === "number" || el.type === "range") {
             const num = el.valueAsNumber;
-
             if (!isNaN(num)) {
               value = num;
             }
@@ -60,28 +54,26 @@ function FormComponent(props) {
         } else {
           value = el.value;
         }
-
         return {
           key,
           value
         };
       });
       let contentType = props.contentType;
-
       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
+      });
+
+      // 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 {
@@ -95,65 +87,51 @@ function FormComponent(props) {
         });
         body = JSON.stringify(json);
       }
-
       if (contentType && contentType !== "multipart/form-data") {
-        if (
-        /* Zapier doesn't allow content-type header to be sent from browsers */
+        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
         }
       });
-
       if (formRef) {
         formRef.dispatchEvent(presubmitEvent);
-
         if (presubmitEvent.defaultPrevented) {
           return;
         }
       }
-
       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 */
-      , {
+      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();
         }
-
         if (!res.ok && props.errorMessagePath) {
           /* TODO: allow supplying an error formatter function */
           let message = get(body, props.errorMessagePath);
-
           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);
           }
         }
-
         setResponseData(body);
         setFormState(res.ok ? "success" : "error");
-
         if (res.ok) {
           const submitSuccessEvent = new CustomEvent("submit:success", {
             detail: {
@@ -161,23 +139,18 @@ function FormComponent(props) {
               body
             }
           });
-
           if (formRef) {
             formRef.dispatchEvent(submitSuccessEvent);
-
             if (submitSuccessEvent.defaultPrevented) {
               return;
             }
             /* TODO: option to turn this on/off? */
-
-
             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", {
@@ -186,7 +159,6 @@ function FormComponent(props) {
                 }
               });
               formRef.dispatchEvent(event);
-
               if (!event.defaultPrevented) {
                 location.href = props.successUrl;
               }
@@ -201,29 +173,24 @@ function FormComponent(props) {
             error: err
           }
         });
-
         if (formRef) {
           formRef.dispatchEvent(submitErrorEvent);
-
           if (submitErrorEvent.defaultPrevented) {
             return;
           }
         }
-
         setResponseData(err);
         setFormState("error");
       });
     }
   }
-
   let formRef;
   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)}>
+  return <form validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={event => onSubmit(event)} {...props.attributes}>
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
           {(block, _index) => {
           const index = _index();
-
           return <RenderBlock block={block} context={builderContext}></RenderBlock>;
         }}
         </For>
@@ -248,5 +215,4 @@ function FormComponent(props) {
       </Show>
     </form>;
 }
-
 export default FormComponent;

package/src/blocks/fragment/fragment.jsx

@@ -1,5 +1,4 @@
 function FragmentComponent(props) {
   return <span>{props.children}</span>;
 }
-
 export default FragmentComponent;

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

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

package/src/blocks/image/image.jsx

@@ -1,18 +1,16 @@
 import { Show } from "solid-js";
 import { css } from "solid-styled-components";
 import { getSrcSet } from "./image.helpers.js";
-
 function Image(props) {
   function srcSetToUse() {
     const imageToUse = props.image || props.src;
     const url = imageToUse;
-
-    if (!url || // We can auto add srcset for cdn.builder.io and shopify
+    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");
@@ -21,10 +19,8 @@ function Image(props) {
     } else if (props.image && !props.srcset) {
       return getSrcSet(url);
     }
-
     return getSrcSet(url);
   }
-
   function webpSrcSet() {
     if (srcSetToUse()?.match(/builder\.io/) && !props.noWebp) {
       return srcSetToUse().replace(/\?/g, "?format=webp&");
@@ -32,7 +28,6 @@ function Image(props) {
       return "";
     }
   }
-
   return <>
       <picture>
         <Show when={webpSrcSet()}>
@@ -58,7 +53,8 @@ function Image(props) {
         pointerEvents: "none",
         fontSize: "0"
       })} style={{
-        "padding-top": // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        "padding-top":
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         props.aspectRatio * 100 + "%"
       }}></div>
       </Show>
@@ -81,5 +77,4 @@ function Image(props) {
       </Show>
     </>;
 }
-
 export default Image;

package/src/blocks/img/img.jsx

@@ -1,10 +1,8 @@
 import { isEditing } from "../../functions/is-editing.js";
-
 function ImgComponent(props) {
-  return <img {...props.attributes} style={{
+  return <img style={{
     "object-fit": props.backgroundSize || "cover",
     "object-position": props.backgroundPosition || "center"
-  }} key={isEditing() && props.imgSrc || "default-key"} alt={props.altText} src={props.imgSrc || props.image} />;
+  }} key={isEditing() && props.imgSrc || "default-key"} alt={props.altText} src={props.imgSrc || props.image} {...props.attributes} />;
 }
-
 export default ImgComponent;

package/src/blocks/input/input.jsx

@@ -1,7 +1,5 @@
 import { isEditing } from "../../functions/is-editing.js";
-
 function FormInputComponent(props) {
   return <input {...props.attributes} key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"} placeholder={props.placeholder} type={props.type} name={props.name} value={props.value} defaultValue={props.defaultValue} required={props.required} />;
 }
-
 export default FormInputComponent;

package/src/blocks/raw-text/raw-text.jsx

@@ -1,5 +1,4 @@
 function RawText(props) {
   return <span class={props.attributes?.class || props.attributes?.className} innerHTML={props.text || ""}></span>;
 }
-
 export default RawText;

package/src/blocks/section/section.jsx

@@ -5,5 +5,4 @@ function SectionComponent(props) {
       {props.children}
     </section>;
 }
-
 export default SectionComponent;

package/src/blocks/select/select.jsx

@@ -1,16 +1,13 @@
 import { For } from "solid-js";
 import { isEditing } from "../../functions/is-editing.js";
-
 function SelectComponent(props) {
   return <select {...props.attributes} value={props.value} key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"} defaultValue={props.defaultValue} name={props.name}>
       <For each={props.options}>
         {(option, _index) => {
         const index = _index();
-
         return <option value={option.value}>{option.name || option.value}</option>;
       }}
       </For>
     </select>;
 }
-
 export default SelectComponent;

package/src/blocks/submit-button/submit-button.jsx

@@ -1,7 +1,6 @@
 function SubmitButton(props) {
-  return <button {...props.attributes} type="submit">
+  return <button type="submit" {...props.attributes}>
       {props.text}
     </button>;
 }
-
 export default SubmitButton;

package/src/blocks/symbol/symbol.jsx

@@ -2,20 +2,16 @@ import { useContext, on, createEffect, createSignal } from "solid-js";
 import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
-import { markMutable } from "../../functions/mark-mutable";
-
 function Symbol(props) {
   const [className, setClassName] = createSignal("builder-symbol");
   const [fetchedContent, setFetchedContent] = createSignal(null);
-
   function contentToUse() {
     return props.symbol?.content || fetchedContent();
   }
-
   const builderContext = useContext(BuilderContext);
-
   function onUpdateFn_0() {
     const symbolToUse = props.symbol;
+
     /**
      * If:
      * - we have a symbol prop
@@ -25,7 +21,6 @@ function Symbol(props) {
      *
      * then we want to re-fetch the symbol content.
      */
-
     if (symbolToUse && !symbolToUse.content && !fetchedContent() && symbolToUse.model) {
       getContent({
         model: symbolToUse.model,
@@ -38,16 +33,15 @@ function Symbol(props) {
       });
     }
   }
-
   createEffect(on(() => [props.symbol, fetchedContent()], onUpdateFn_0));
   return <div class={className()} {...props.attributes} dataSet={{
     class: className()
   }}>
-      <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} customComponents={markMutable(Object.values(builderContext.registeredComponents))} data={markMutable({ ...props.symbol?.data,
+      <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={markMutable(contentToUse())}></RenderContent>
+    }} model={props.symbol?.model} content={contentToUse()}></RenderContent>
     </div>;
 }
-
 export default Symbol;

package/src/blocks/text/text.jsx

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

package/src/blocks/textarea/textarea.jsx

@@ -1,5 +1,4 @@
 function Textarea(props) {
   return <textarea {...props.attributes} placeholder={props.placeholder} name={props.name} value={props.value} defaultValue={props.defaultValue}></textarea>;
 }
-
 export default Textarea;

package/src/blocks/util.js

@@ -1,7 +1,8 @@
-function markSerializable(fn) {
-  fn.__qwik_serializable__ = true;
-  return fn;
-}
+const serializeFn = (fnValue) => {
+  const fnStr = fnValue.toString().trim();
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
 export {
-  markSerializable
+  serializeFn
 };