@builder.io/sdk-solid 0.0.16 → 0.0.17

package/src/blocks/columns/columns.lite.tsx

@@ -1,102 +0,0 @@
-import { For } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-
-import RenderBlocks from "../../components/render-blocks.js";
-
-function Columns(props) {
-  const state = createMutable({
-    getGutterSize() {
-      return typeof props.space === "number" ? props.space || 0 : 20;
-    },
-    getColumns() {
-      return props.columns || [];
-    },
-    getWidth(index: number) {
-      const columns = this.getColumns();
-      return columns[index]?.width || 100 / columns.length;
-    },
-    getColumnCssWidth(index: number) {
-      const columns = this.getColumns();
-      const gutterSize = this.getGutterSize();
-      const subtractWidth =
-        (gutterSize * (columns.length - 1)) / columns.length;
-      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
-    },
-    maybeApplyForTablet(prop: string) {
-      const _stackColumnsAt = props.stackColumnsAt || "tablet";
-
-      return _stackColumnsAt === "tablet" ? prop : "inherit";
-    },
-    get columnsCssVars() {
-      const flexDir =
-        props.stackColumnsAt === "never"
-          ? "inherit"
-          : props.reverseColumnsWhenStacked
-          ? "column-reverse"
-          : "column";
-      return {
-        "--flex-dir": flexDir,
-        "--flex-dir-tablet": this.maybeApplyForTablet(flexDir),
-      };
-    },
-    get columnCssVars() {
-      const width = "100%";
-      const marginLeft = "0";
-      return {
-        "--column-width": width,
-        "--column-margin-left": marginLeft,
-        "--column-width-tablet": this.maybeApplyForTablet(width),
-        "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft),
-      };
-    },
-  });
-
-  return (
-    <div
-      class={css({
-        display: "flex",
-        alignItems: "stretch",
-        lineHeight: "normal",
-        "@media (max-width: 999px)": {
-          flexDirection: "var(--flex-dir-tablet)",
-        },
-        "@media (max-width: 639px)": {
-          flexDirection: "var(--flex-dir)",
-        },
-      })}
-      style={state.columnsCssVars}
-    >
-      <For each={props.columns}>
-        {(column, _index) => {
-          const index = _index();
-          return (
-            <div
-              class={css({
-                flexGrow: "1",
-                "@media (max-width: 999px)": {
-                  width: "var(--column-width-tablet) !important",
-                  marginLeft: "var(--column-margin-left-tablet) !important",
-                },
-                "@media (max-width: 639px)": {
-                  width: "var(--column-width) !important",
-                  marginLeft: "var(--column-margin-left) !important",
-                },
-              })}
-              style={{
-                width: state.getColumnCssWidth(index),
-                "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
-                ...state.columnCssVars,
-              }}
-            >
-              <RenderBlocks blocks={column.blocks}></RenderBlocks>
-            </div>
-          );
-        }}
-      </For>
-    </div>
-  );
-}
-
-export default Columns;

package/src/blocks/columns/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import component from "./columns.js";
-import { componentInfo } from "./component-info.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/custom-code/custom-code.lite.tsx

@@ -1,67 +0,0 @@
-import { createMutable } from "solid-js/store";
-
-function CustomCode(props) {
-  const state = createMutable({
-    scriptsInserted: [],
-    scriptsRun: [],
-    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("`CustomCode`: Error running script:", error);
-            }
-          }
-        }
-      }
-    },
-  });
-
-  const elem = useRef();
-
-  onMount(() => {
-    state.findAndRunScripts();
-  });
-
-  return (
-    <div
-      class={
-        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
-      }
-      ref={elem}
-      innerHTML={props.code}
-    ></div>
-  );
-}
-
-export default CustomCode;

package/src/blocks/custom-code/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./custom-code.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/embed/embed.lite.tsx

@@ -1,59 +0,0 @@
-import { createMutable } from "solid-js/store";
-
-function Embed(props) {
-  const state = createMutable({
-    scriptsInserted: [],
-    scriptsRun: [],
-    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 elem = useRef();
-
-  onMount(() => {
-    state.findAndRunScripts();
-  });
-
-  return <div ref={elem} innerHTML={props.content}></div>;
-}
-
-export default Embed;

package/src/blocks/embed/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./embed.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/form/form.lite.tsx

@@ -1,293 +0,0 @@
-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.js";
-import { isEditing } from "../../functions/is-editing.js";
-
-function FormComponent(props) {
-  const state = createMutable({
-    formState: "unsubmitted",
-    responseData: null,
-    formErrorMessage: "",
-    get submissionState() {
-      return (isEditing() && props.previewState) || state.formState;
-    },
-    onSubmit(
-      event: Event & {
-        currentTarget: HTMLFormElement;
-      }
-    ) {
-      const sendWithJs =
-        props.sendWithJs || props.sendSubmissionsTo === "email";
-
-      if (props.sendSubmissionsTo === "zapier") {
-        event.preventDefault();
-      } else if (sendWithJs) {
-        if (!(props.action || props.sendSubmissionsTo === "email")) {
-          event.preventDefault();
-          return;
-        }
-
-        event.preventDefault();
-        const el = event.currentTarget;
-        const headers = props.customHeaders || {};
-        let body: any;
-        const formData = new FormData(el); // TODO: maybe support null
-
-        const formPairs: {
-          key: string;
-          value: File | boolean | number | string | FileList;
-        }[] = Array.from(
-          event.currentTarget.querySelectorAll("input,select,textarea")
-        )
-          .filter((el) => !!(el as HTMLInputElement).name)
-          .map((el) => {
-            let value: any;
-            const key = (el as HTMLImageElement).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;
-              }
-            } else {
-              value = (el as HTMLInputElement).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
-        // 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, 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;
-          }
-        }
-
-        const presubmitEvent = new CustomEvent("presubmit", {
-          detail: {
-            body,
-          },
-        });
-
-        if (formRef) {
-          formRef.dispatchEvent(presubmitEvent);
-
-          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();
-            }
-
-            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);
-                }
-
-                state.formErrorMessage = message;
-              }
-            }
-
-            state.responseData = body;
-            state.formState = res.ok ? "success" : "error";
-
-            if (res.ok) {
-              const submitSuccessEvent = new CustomEvent("submit:success", {
-                detail: {
-                  res,
-                  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 */
-
-              if (props.successUrl) {
-                if (formRef) {
-                  const event = new CustomEvent("route", {
-                    detail: {
-                      url: props.successUrl,
-                    },
-                  });
-                  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,
-              },
-            });
-
-            if (formRef) {
-              formRef.dispatchEvent(submitErrorEvent);
-
-              if (submitErrorEvent.defaultPrevented) {
-                return;
-              }
-            }
-
-            state.responseData = err;
-            state.formState = "error";
-          }
-        );
-      }
-    },
-  });
-
-  const formRef = useRef();
-
-  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}>
-          {(block, _index) => {
-            const index = _index();
-            return <RenderBlock block={block}></RenderBlock>;
-          }}
-        </For>
-      </Show>
-      <Show when={state.submissionState === "error"}>
-        <BuilderBlocks
-          dataPath="errorMessage"
-          blocks={props.errorMessage}
-        ></BuilderBlocks>
-      </Show>
-      <Show when={state.submissionState === "sending"}>
-        <BuilderBlocks
-          dataPath="sendingMessage"
-          blocks={props.sendingMessage}
-        ></BuilderBlocks>
-      </Show>
-      <Show when={state.submissionState === "error" && state.responseData}>
-        <pre
-          class={css({
-            padding: "10px",
-            color: "red",
-            textAlign: "center",
-          })}
-        >
-          {JSON.stringify(state.responseData, null, 2)}
-        </pre>
-      </Show>
-      <Show when={state.submissionState === "success"}>
-        <BuilderBlocks
-          dataPath="successMessage"
-          blocks={props.successMessage}
-        ></BuilderBlocks>
-      </Show>
-    </form>
-  );
-}
-
-export default FormComponent;

package/src/blocks/form/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./form.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/fragment/fragment.lite.tsx

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

package/src/blocks/fragment/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./fragment.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/image/image.lite.tsx

@@ -1,83 +0,0 @@
-import { Show } from "solid-js";
-
-import { css } from "solid-styled-components";
-
-function Image(props) {
-  return (
-    <div
-      class={css({
-        position: "relative",
-      })}
-    >
-      <picture>
-        <img
-          class={
-            "builder-image" +
-            (props.className ? " " + props.className : "") +
-            " " +
-            css({
-              opacity: "1",
-              transition: "opacity 0.2s ease-in-out",
-              position: "absolute",
-              height: "100%",
-              width: "100%",
-              top: "0px",
-              left: "0px",
-            })
-          }
-          loading="lazy"
-          alt={props.altText}
-          aria-role={props.altText ? "presentation" : undefined}
-          style={{
-            "object-position": props.backgroundSize || "center",
-            "object-fit": props.backgroundSize || "cover",
-          }}
-          src={props.image}
-          srcset={props.srcset}
-          sizes={props.sizes}
-        />
-        <source srcSet={props.srcset} />
-      </picture>
-      <Show
-        when={
-          props.aspectRatio &&
-          !(props.fitContent && props.builderBlock?.children?.length)
-        }
-      >
-        <div
-          class={css({
-            width: "100%",
-            pointerEvents: "none",
-            fontSize: "0",
-          })}
-          style={{
-            "padding-top": props.aspectRatio * 100 + "%",
-          }}
-        >
-          {" "}
-        </div>
-      </Show>
-      <Show when={props.builderBlock?.children?.length && props.fitContent}>
-        {props.children}
-      </Show>
-      <Show when={!props.fitContent}>
-        <div
-          class={css({
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            position: "absolute",
-            top: "0",
-            left: "0",
-            width: "100%",
-            height: "100%",
-          })}
-        >
-          {props.children}
-        </div>
-      </Show>
-    </div>
-  );
-}
-
-export default Image;

package/src/blocks/image/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./image.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/img/img.lite.tsx

@@ -1,18 +0,0 @@
-import { isEditing } from "../../functions/is-editing.js";
-
-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}
-    />
-  );
-}
-
-export default ImgComponent;

package/src/blocks/img/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./img.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};