@builder.io/sdk-solid 0.0.1

package/src/blocks/form.js

@@ -0,0 +1,355 @@
+import { template as _$template } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+
+const _tmpl$ = /*#__PURE__*/_$template(`<pre></pre>`, 2),
+      _tmpl$2 = /*#__PURE__*/_$template(`<form></form>`, 2);
+
+import { Show, For } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { css } from "solid-styled-components";
+import RenderBlock from "../components/render-block";
+export default function FormComponent(props) {
+  const state = createMutable({
+    state: "unsubmitted",
+    responseData: null,
+    formErrorMessage: "",
+
+    get submissionState() {
+      return Builder.isEditing && props.previewState || state.state;
+    },
+
+    onSubmit(event) {
+      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;
+        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;
+            }
+          } 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
+        // 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.state = "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.state = 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.state = "error";
+        });
+      }
+    }
+
+  });
+  const formRef = useRef();
+  return (() => {
+    const _el$ = _tmpl$2.cloneNode(true);
+
+    _el$.addEventListener("submit", event => state.state.onSubmit(event));
+
+    formRef(_el$);
+
+    _$spread(_el$, () => props.attributes, false, true);
+
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.builderBlock && props.builderBlock.children;
+      },
+
+      get children() {
+        return _$createComponent(For, {
+          get each() {
+            return props.builderBlock?.children;
+          },
+
+          children: (block, index) => _$createComponent(RenderBlock, {
+            block: block
+          })
+        });
+      }
+
+    }), null);
+
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return state.state.submissionState === "error";
+      },
+
+      get children() {
+        return _$createComponent(BuilderBlocks, {
+          dataPath: "errorMessage",
+
+          get blocks() {
+            return props.errorMessage;
+          }
+
+        });
+      }
+
+    }), null);
+
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return state.state.submissionState === "sending";
+      },
+
+      get children() {
+        return _$createComponent(BuilderBlocks, {
+          dataPath: "sendingMessage",
+
+          get blocks() {
+            return props.sendingMessage;
+          }
+
+        });
+      }
+
+    }), null);
+
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return state.state.submissionState === "error" && state.state.responseData;
+      },
+
+      get children() {
+        const _el$2 = _tmpl$.cloneNode(true);
+
+        _$insert(_el$2, () => JSON.stringify(state.state.responseData, null, 2));
+
+        _$effect(() => _el$2.className = css({
+          padding: "10px",
+          color: "red",
+          textAlign: "center"
+        }));
+
+        return _el$2;
+      }
+
+    }), null);
+
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return state.state.submissionState === "success";
+      },
+
+      get children() {
+        return _$createComponent(BuilderBlocks, {
+          dataPath: "successMessage",
+
+          get blocks() {
+            return props.successMessage;
+          }
+
+        });
+      }
+
+    }), null);
+
+    _$effect(_p$ => {
+      const _v$ = props.validate,
+            _v$2 = !props.sendWithJs && props.action,
+            _v$3 = props.method,
+            _v$4 = props.name;
+
+      _v$ !== _p$._v$ && _$setAttribute(_el$, "validate", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "action", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && _$setAttribute(_el$, "method", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "name", _p$._v$4 = _v$4);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined
+    });
+
+    return _el$;
+  })();
+}import { registerComponent } from '../functions/register-component';
+registerComponent(FormComponent, {name:'Form:Form',builtIn:true,defaults:{responsiveStyles:{large:{marginTop:'15px',paddingBottom:'15px'}}},image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',inputs:[{name:'sendSubmissionsTo',type:'string',enum:[{label:'Send to email',value:'email',helperText:'Send form submissions to the email address of your choosing'},{label:'Custom',value:'custom',helperText:'Handle where the form requests go manually with a little code, e.g. to your own custom backend'}],defaultValue:'email'},{name:'sendSubmissionsToEmail',type:'string',required:true,defaultValue:'your@email.com',showIf:'options.get("sendSubmissionsTo") === "email"'},{name:'sendWithJs',type:'boolean',helperText:'Set to false to use basic html form action',defaultValue:true,showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'name',type:'string',defaultValue:'My form'},{name:'action',type:'string',helperText:'URL to send the form data to',showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'contentType',type:'string',defaultValue:'application/json',advanced:true,enum:['application/json','multipart/form-data','application/x-www-form-urlencoded'],showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'},{name:'method',type:'string',showIf:'options.get("sendSubmissionsTo") === "custom"',defaultValue:'POST',advanced:true},{name:'previewState',type:'string',enum:['unsubmitted','sending','success','error'],defaultValue:'unsubmitted',helperText:'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'successUrl',type:'url',helperText:'Optional URL to redirect the user to on form submission success',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'resetFormOnSubmit',type:'boolean',showIf:"options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",advanced:true},{name:'successMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Thanks!</span>'}}}]},{name:'validate',type:'boolean',defaultValue:true,advanced:true},{name:'errorMessagePath',type:'text',advanced:true,helperText:'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'},{name:'errorMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},bindings:{'component.options.text':'state.formErrorMessage || block.component.options.text'},component:{name:'Text',options:{text:'<span>Form submission error :( Please check your answers and try again</span>'}}}]},{name:'sendingMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Sending...</span>'}}}]},{name:'customHeaders',type:'map',valueType:{type:'string'},advanced:true,showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'}],noWrap:true,canHaveChildren:true,defaultChildren:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your name</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'name',placeholder:'Jane Doe'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your email</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'email',placeholder:'jane@doe.com'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:SubmitButton',options:{text:'Submit'}}}]});

package/src/blocks/form.lite.tsx

@@ -0,0 +1,291 @@
+import { Show, For } from "solid-js";
+
+import { createMutable } from "solid-js/store";
+import { css } from "solid-styled-components";
+
+import RenderBlock from "../components/render-block.lite";
+
+export default function FormComponent(props) {
+  const state = createMutable({
+    state: "unsubmitted",
+    responseData: null,
+    formErrorMessage: "",
+    get submissionState() {
+      return (Builder.isEditing && props.previewState) || state.state;
+    },
+    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.state = "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.state = 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.state = "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.state.onSubmit(event)}
+    >
+      <Show when={props.builderBlock && props.builderBlock.children}>
+        <For each={props.builderBlock?.children}>
+          {(block, index) => <RenderBlock block={block}></RenderBlock>}
+        </For>
+      </Show>
+      <Show when={state.state.submissionState === "error"}>
+        <BuilderBlocks
+          dataPath="errorMessage"
+          blocks={props.errorMessage}
+        ></BuilderBlocks>
+      </Show>
+      <Show when={state.state.submissionState === "sending"}>
+        <BuilderBlocks
+          dataPath="sendingMessage"
+          blocks={props.sendingMessage}
+        ></BuilderBlocks>
+      </Show>
+      <Show
+        when={
+          state.state.submissionState === "error" && state.state.responseData
+        }
+      >
+        <pre
+          class={css({
+            padding: "10px",
+            color: "red",
+            textAlign: "center",
+          })}
+        >
+          {JSON.stringify(state.state.responseData, null, 2)}
+        </pre>
+      </Show>
+      <Show when={state.state.submissionState === "success"}>
+        <BuilderBlocks
+          dataPath="successMessage"
+          blocks={props.successMessage}
+        ></BuilderBlocks>
+      </Show>
+    </form>
+  );
+}

package/src/blocks/fragment.js

@@ -0,0 +1,15 @@
+import { template as _$template } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+
+const _tmpl$ = /*#__PURE__*/_$template(`<span></span>`, 2);
+
+export default function FragmentComponent(props) {
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    _$insert(_el$, () => props.children);
+
+    return _el$;
+  })();
+}import { registerComponent } from '../functions/register-component';
+registerComponent(FragmentComponent, {name:'Fragment',static:true,hidden:true,builtIn:true,canHaveChildren:true,noWrap:true});

package/src/blocks/fragment.lite.tsx

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