@builder.io/sdk-solid 0.0.16 → 0.0.18

package/src/scripts/init-editing.js

@@ -1,6 +1,5 @@
 import { TARGET } from "../constants/target.js";
 import { isBrowser } from "../functions/is-browser.js";
-import { isEditing } from "../functions/is-editing.js";
 import { register } from "../functions/register.js";
 const registerInsertMenu = () => {
   register("insertMenu", {
@@ -32,49 +31,50 @@ const setupBrowserForEditing = () => {
     }, "*");
     window.addEventListener("message", ({ data }) => {
       var _a2, _b;
-      if (data) {
-        switch (data.type) {
-          case "builder.evaluate": {
-            const text = data.data.text;
-            const args = data.data.arguments || [];
-            const id = data.data.id;
-            const fn = new Function(text);
-            let result;
-            let error = null;
-            try {
-              result = fn.apply(null, args);
-            } catch (err) {
-              error = err;
-            }
-            if (error) {
-              (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
-                type: "builder.evaluateError",
-                data: { id, error: error.message }
-              }, "*");
-            } else {
-              if (result && typeof result.then === "function") {
-                result.then((finalResult) => {
-                  var _a3;
-                  (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
-                    type: "builder.evaluateResult",
-                    data: { id, result: finalResult }
-                  }, "*");
-                }).catch(console.error);
-              } else {
-                (_b = window.parent) == null ? void 0 : _b.postMessage({
+      if (!(data == null ? void 0 : data.type)) {
+        return;
+      }
+      switch (data.type) {
+        case "builder.evaluate": {
+          const text = data.data.text;
+          const args = data.data.arguments || [];
+          const id = data.data.id;
+          const fn = new Function(text);
+          let result;
+          let error = null;
+          try {
+            result = fn.apply(null, args);
+          } catch (err) {
+            error = err;
+          }
+          if (error) {
+            (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
+              type: "builder.evaluateError",
+              data: { id, error: error.message }
+            }, "*");
+          } else {
+            if (result && typeof result.then === "function") {
+              result.then((finalResult) => {
+                var _a3;
+                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
                   type: "builder.evaluateResult",
-                  data: { result, id }
+                  data: { id, result: finalResult }
                 }, "*");
-              }
+              }).catch(console.error);
+            } else {
+              (_b = window.parent) == null ? void 0 : _b.postMessage({
+                type: "builder.evaluateResult",
+                data: { result, id }
+              }, "*");
             }
-            break;
           }
+          break;
         }
       }
     });
   }
 };
-if (isEditing()) {
-  registerInsertMenu();
-  setupBrowserForEditing();
-}
+export {
+  registerInsertMenu,
+  setupBrowserForEditing
+};

package/src/blocks/button/button.lite.tsx

@@ -1,20 +0,0 @@
-import { Show } from "solid-js";
-
-function Button(props) {
-  return (
-    <>
-      <Show when={props.link}>
-        <a
-          {...props.attributes}
-          role="button"
-          href={props.link}
-          target={props.openLinkInNewTab ? "_blank" : undefined}
-        >
-          {props.text}
-        </a>
-      </Show>
-    </>
-  );
-}
-
-export default Button;

package/src/blocks/button/index.js

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

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
-};