@builder.io/sdk-qwik 0.0.9 → 0.0.10

package/src/blocks/form/builder-blocks.jsx

@@ -9,78 +9,3 @@ export const BuilderBlocks = component$((props) => {
   );
 });
 export default BuilderBlocks;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {},
-  state: {},
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Fragment",
-      meta: {},
-      scope: {},
-      properties: {},
-      bindings: {},
-      children: [
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n      NOT YET IMPLEMENTED: ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "code",
-          meta: {},
-          scope: {},
-          properties: {},
-          bindings: {},
-          children: [
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "BuilderBlocks",
-              },
-              bindings: {},
-              children: [],
-            },
-          ],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n    ",
-          },
-          bindings: {},
-          children: [],
-        },
-      ],
-    },
-  ],
-  hooks: {},
-  context: {
-    get: {},
-    set: {},
-  },
-  name: "BuilderBlocks",
-  subComponents: [],
-  interfaces: [
-    "export interface BuilderBlocksProps {\n  dataPath: string;\n  blocks: any;\n}",
-  ],
-  propsTypeRef: "BuilderBlocksProps",
-};

package/src/blocks/form/form.jsx

@@ -5,7 +5,6 @@ import { isEditing } from "../../functions/is-editing.js";
 import BuilderBlocks from "./builder-blocks";
 import {
   Fragment,
-  Host,
   component$,
   h,
   useContext,
@@ -240,543 +239,65 @@ export const onSubmit = function onSubmit(
     );
   }
 };
-export const FormComponent = component$(
-  (props) => {
-    useStylesScoped$(STYLES);
-    const builderContext = useContext(BuilderContext);
-    const formRef = useRef();
-    const state = useStore({
-      formState: "unsubmitted",
-      responseData: null,
-      formErrorMessage: "",
-    });
-    return (
-      <Host
-        validate={props.validate}
-        ref={formRef}
-        action={(() => {
-          !props.sendWithJs && props.action;
-        })()}
-        method={props.method}
-        name={props.name}
-        onSubmit$={(event) =>
-          onSubmit(props, state, formRef, builderContext, event)
-        }
-        {...props.attributes}
-      >
-        <>
-          {props.builderBlock && props.builderBlock.children
-            ? (props.builderBlock?.children || []).map((block) => {
-                return (
-                  <RenderBlock
-                    block={block}
-                    context={builderContext}
-                  ></RenderBlock>
-                );
-              })
-            : null}
-          {submissionState(props, state, formRef, builderContext) ===
-          "error" ? (
-            <BuilderBlocks
-              dataPath="errorMessage"
-              blocks={props.errorMessage}
-            ></BuilderBlocks>
-          ) : null}
-          {submissionState(props, state, formRef, builderContext) ===
-          "sending" ? (
-            <BuilderBlocks
-              dataPath="sendingMessage"
-              blocks={props.sendingMessage}
-            ></BuilderBlocks>
-          ) : null}
-          {submissionState(props, state, formRef, builderContext) === "error" &&
-          state.responseData ? (
-            <pre class="builder-form-error-text pre-FormComponent">
-              {JSON.stringify(state.responseData, null, 2)}
-            </pre>
-          ) : null}
-          {submissionState(props, state, formRef, builderContext) ===
-          "success" ? (
-            <BuilderBlocks
-              dataPath="successMessage"
-              blocks={props.successMessage}
-            ></BuilderBlocks>
-          ) : null}
-        </>
-      </Host>
-    );
-  },
-  { tagName: "form" }
-);
+export const FormComponent = component$((props) => {
+  useStylesScoped$(STYLES);
+  const builderContext = useContext(BuilderContext);
+  const formRef = useRef();
+  const state = useStore({
+    formState: "unsubmitted",
+    responseData: null,
+    formErrorMessage: "",
+  });
+  return (
+    <form
+      validate={props.validate}
+      ref={formRef}
+      action={(() => {
+        !props.sendWithJs && props.action;
+      })()}
+      method={props.method}
+      name={props.name}
+      onSubmit$={(event) =>
+        onSubmit(props, state, formRef, builderContext, event)
+      }
+      {...props.attributes}
+    >
+      {props.builderBlock && props.builderBlock.children
+        ? (props.builderBlock?.children || []).map((block) => {
+            return (
+              <RenderBlock block={block} context={builderContext}></RenderBlock>
+            );
+          })
+        : null}
+      {submissionState(props, state, formRef, builderContext) === "error" ? (
+        <BuilderBlocks
+          dataPath="errorMessage"
+          blocks={props.errorMessage}
+        ></BuilderBlocks>
+      ) : null}
+      {submissionState(props, state, formRef, builderContext) === "sending" ? (
+        <BuilderBlocks
+          dataPath="sendingMessage"
+          blocks={props.sendingMessage}
+        ></BuilderBlocks>
+      ) : null}
+      {submissionState(props, state, formRef, builderContext) === "error" &&
+      state.responseData ? (
+        <pre class="builder-form-error-text pre-FormComponent">
+          {JSON.stringify(state.responseData, null, 2)}
+        </pre>
+      ) : null}
+      {submissionState(props, state, formRef, builderContext) === "success" ? (
+        <BuilderBlocks
+          dataPath="successMessage"
+          blocks={props.successMessage}
+        ></BuilderBlocks>
+      ) : null}
+    </form>
+  );
+});
 export default FormComponent;
 export const STYLES = `.pre-FormComponent { 
 padding: 10px;
 color: red;
 text-align: center; }`;
-export const COMPONENT = {
-  "@type": "@builder.io/mitosis/component",
-  imports: [
-    {
-      imports: {
-        RenderBlock: "default",
-      },
-      path: "../../components/render-block/render-block.lite",
-    },
-    {
-      imports: {
-        isEditing: "isEditing",
-      },
-      path: "../../functions/is-editing.js",
-    },
-    {
-      imports: {
-        BuilderBlocks: "default",
-      },
-      path: "./builder-blocks.lite",
-    },
-  ],
-  exports: {},
-  inputs: [],
-  meta: {},
-  refs: {
-    formRef: {
-      argument: "",
-    },
-  },
-  state: {
-    formState: "unsubmitted",
-    responseData: null,
-    formErrorMessage: "",
-    submissionState:
-      "@builder.io/mitosis/method:get submissionState() {\n  return isEditing() && props.previewState || state.formState;\n}",
-    onSubmit:
-      "@builder.io/mitosis/method:onSubmit(event: Event & {\n  currentTarget: HTMLFormElement;\n}) {\n  const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === 'email';\n\n  if (props.sendSubmissionsTo === 'zapier') {\n    event.preventDefault();\n  } else if (sendWithJs) {\n    if (!(props.action || props.sendSubmissionsTo === 'email')) {\n      event.preventDefault();\n      return;\n    }\n\n    event.preventDefault();\n    const el = event.currentTarget;\n    const headers = props.customHeaders || {};\n    let body: any;\n    const formData = new FormData(el); // TODO: maybe support null\n\n    const formPairs: {\n      key: string;\n      value: File | boolean | number | string | FileList;\n    }[] = Array.from(event.currentTarget.querySelectorAll('input,select,textarea')).filter(el => !!(el as HTMLInputElement).name).map(el => {\n      let value: any;\n      const key = (el as HTMLImageElement).name;\n\n      if (el instanceof HTMLInputElement) {\n        if (el.type === 'radio') {\n          if (el.checked) {\n            value = el.name;\n            return {\n              key,\n              value\n            };\n          }\n        } else if (el.type === 'checkbox') {\n          value = el.checked;\n        } else if (el.type === 'number' || el.type === 'range') {\n          const num = el.valueAsNumber;\n\n          if (!isNaN(num)) {\n            value = num;\n          }\n        } else if (el.type === 'file') {\n          // TODO: one vs multiple files\n          value = el.files;\n        } else {\n          value = el.value;\n        }\n      } else {\n        value = (el as HTMLInputElement).value;\n      }\n\n      return {\n        key,\n        value\n      };\n    });\n    let contentType = props.contentType;\n\n    if (props.sendSubmissionsTo === 'email') {\n      contentType = 'multipart/form-data';\n    }\n\n    Array.from(formPairs).forEach(({\n      value\n    }) => {\n      if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList) {\n        contentType = 'multipart/form-data';\n      }\n    }); // TODO: send as urlEncoded or multipart by default\n    // because of ease of use and reliability in browser API\n    // for encoding the form?\n\n    if (contentType !== 'application/json') {\n      body = formData;\n    } else {\n      // Json\n      const json = {};\n      Array.from(formPairs).forEach(({\n        value,\n        key\n      }) => {\n        set(json, key, value);\n      });\n      body = JSON.stringify(json);\n    }\n\n    if (contentType && contentType !== 'multipart/form-data') {\n      if (\n      /* Zapier doesn't allow content-type header to be sent from browsers */\n      !(sendWithJs && props.action?.includes('zapier.com'))) {\n        headers['content-type'] = contentType;\n      }\n    }\n\n    const presubmitEvent = new CustomEvent('presubmit', {\n      detail: {\n        body\n      }\n    });\n\n    if (formRef) {\n      formRef.dispatchEvent(presubmitEvent);\n\n      if (presubmitEvent.defaultPrevented) {\n        return;\n      }\n    }\n\n    state.formState = 'sending';\n    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 || '')}`;\n    fetch(props.sendSubmissionsTo === 'email' ? formUrl : props.action!\n    /* TODO: throw error if no action URL */\n    , {\n      body,\n      headers,\n      method: props.method || 'post'\n    }).then(async res => {\n      let body;\n      const contentType = res.headers.get('content-type');\n\n      if (contentType && contentType.indexOf('application/json') !== -1) {\n        body = await res.json();\n      } else {\n        body = await res.text();\n      }\n\n      if (!res.ok && props.errorMessagePath) {\n        /* TODO: allow supplying an error formatter function */\n        let message = get(body, props.errorMessagePath);\n\n        if (message) {\n          if (typeof message !== 'string') {\n            /* TODO: ideally convert json to yaml so it woul dbe like\n             error: - email has been taken */\n            message = JSON.stringify(message);\n          }\n\n          state.formErrorMessage = message;\n        }\n      }\n\n      state.responseData = body;\n      state.formState = res.ok ? 'success' : 'error';\n\n      if (res.ok) {\n        const submitSuccessEvent = new CustomEvent('submit:success', {\n          detail: {\n            res,\n            body\n          }\n        });\n\n        if (formRef) {\n          formRef.dispatchEvent(submitSuccessEvent);\n\n          if (submitSuccessEvent.defaultPrevented) {\n            return;\n          }\n          /* TODO: option to turn this on/off? */\n\n\n          if (props.resetFormOnSubmit !== false) {\n            formRef.reset();\n          }\n        }\n        /* TODO: client side route event first that can be preventDefaulted */\n\n\n        if (props.successUrl) {\n          if (formRef) {\n            const event = new CustomEvent('route', {\n              detail: {\n                url: props.successUrl\n              }\n            });\n            formRef.dispatchEvent(event);\n\n            if (!event.defaultPrevented) {\n              location.href = props.successUrl;\n            }\n          } else {\n            location.href = props.successUrl;\n          }\n        }\n      }\n    }, err => {\n      const submitErrorEvent = new CustomEvent('submit:error', {\n        detail: {\n          error: err\n        }\n      });\n\n      if (formRef) {\n        formRef.dispatchEvent(submitErrorEvent);\n\n        if (submitErrorEvent.defaultPrevented) {\n          return;\n        }\n      }\n\n      state.responseData = err;\n      state.formState = 'error';\n    });\n  }\n}",
-  },
-  children: [
-    {
-      "@type": "@builder.io/mitosis/node",
-      name: "Host",
-      meta: {},
-      scope: {},
-      properties: {},
-      bindings: {
-        validate: {
-          code: "props.validate",
-        },
-        ref: {
-          code: "formRef",
-        },
-        action: {
-          code: "!props.sendWithJs && props.action",
-        },
-        method: {
-          code: "props.method",
-        },
-        name: {
-          code: "props.name",
-        },
-        onSubmit: {
-          code: "onSubmit(props,state,formRef,builderContext,event)",
-          arguments: ["event"],
-        },
-        _spread: {
-          code: "props.attributes",
-        },
-      },
-      children: [
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n      ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "Show",
-          meta: {},
-          scope: {},
-          properties: {},
-          bindings: {
-            when: {
-              code: "props.builderBlock && props.builderBlock.children",
-            },
-          },
-          children: [
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n        ",
-              },
-              bindings: {},
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "For",
-              meta: {},
-              scope: {
-                For: ["block"],
-              },
-              properties: {
-                _forName: "block",
-              },
-              bindings: {
-                each: {
-                  code: "props.builderBlock?.children",
-                },
-              },
-              children: [
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "RenderBlock",
-                  meta: {},
-                  scope: {},
-                  properties: {},
-                  bindings: {
-                    block: {
-                      code: "block",
-                    },
-                    context: {
-                      code: "builderContext",
-                    },
-                  },
-                  children: [],
-                },
-              ],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n      ",
-              },
-              bindings: {},
-              children: [],
-            },
-          ],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n\n      ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "Show",
-          meta: {},
-          scope: {},
-          properties: {},
-          bindings: {
-            when: {
-              code: "submissionState(props,state,formRef,builderContext) === 'error'",
-            },
-          },
-          children: [
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n        ",
-              },
-              bindings: {},
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "BuilderBlocks",
-              meta: {},
-              scope: {},
-              properties: {
-                dataPath: "errorMessage",
-              },
-              bindings: {
-                blocks: {
-                  code: "props.errorMessage",
-                },
-              },
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n      ",
-              },
-              bindings: {},
-              children: [],
-            },
-          ],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n\n      ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "Show",
-          meta: {},
-          scope: {},
-          properties: {},
-          bindings: {
-            when: {
-              code: "submissionState(props,state,formRef,builderContext) === 'sending'",
-            },
-          },
-          children: [
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n        ",
-              },
-              bindings: {},
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "BuilderBlocks",
-              meta: {},
-              scope: {},
-              properties: {
-                dataPath: "sendingMessage",
-              },
-              bindings: {
-                blocks: {
-                  code: "props.sendingMessage",
-                },
-              },
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n      ",
-              },
-              bindings: {},
-              children: [],
-            },
-          ],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n\n      ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "Show",
-          meta: {},
-          scope: {},
-          properties: {},
-          bindings: {
-            when: {
-              code: "submissionState(props,state,formRef,builderContext) === 'error' && state.responseData",
-            },
-          },
-          children: [
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n        ",
-              },
-              bindings: {},
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "pre",
-              meta: {},
-              scope: {},
-              properties: {
-                class: "builder-form-error-text pre-FormComponent",
-              },
-              bindings: {},
-              children: [
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "div",
-                  meta: {},
-                  scope: {},
-                  properties: {
-                    _text: "\n          ",
-                  },
-                  bindings: {},
-                  children: [],
-                },
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "div",
-                  meta: {},
-                  scope: {},
-                  properties: {},
-                  bindings: {
-                    _text: {
-                      code: "JSON.stringify(state.responseData, null, 2)",
-                    },
-                  },
-                  children: [],
-                },
-                {
-                  "@type": "@builder.io/mitosis/node",
-                  name: "div",
-                  meta: {},
-                  scope: {},
-                  properties: {
-                    _text: "\n        ",
-                  },
-                  bindings: {},
-                  children: [],
-                },
-              ],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n      ",
-              },
-              bindings: {},
-              children: [],
-            },
-          ],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n\n      ",
-          },
-          bindings: {},
-          children: [],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "Show",
-          meta: {},
-          scope: {},
-          properties: {},
-          bindings: {
-            when: {
-              code: "submissionState(props,state,formRef,builderContext) === 'success'",
-            },
-          },
-          children: [
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n        ",
-              },
-              bindings: {},
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "BuilderBlocks",
-              meta: {},
-              scope: {},
-              properties: {
-                dataPath: "successMessage",
-              },
-              bindings: {
-                blocks: {
-                  code: "props.successMessage",
-                },
-              },
-              children: [],
-            },
-            {
-              "@type": "@builder.io/mitosis/node",
-              name: "div",
-              meta: {},
-              scope: {},
-              properties: {
-                _text: "\n      ",
-              },
-              bindings: {},
-              children: [],
-            },
-          ],
-        },
-        {
-          "@type": "@builder.io/mitosis/node",
-          name: "div",
-          meta: {},
-          scope: {},
-          properties: {
-            _text: "\n    ",
-          },
-          bindings: {},
-          children: [],
-        },
-      ],
-    },
-  ],
-  hooks: {},
-  context: {
-    get: {
-      builderContext: {
-        name: "BuilderContext",
-        path: null,
-      },
-    },
-    set: {},
-  },
-  name: "FormComponent",
-  subComponents: [],
-  interfaces: [
-    "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\n\n/* eslint-disable */\n\n/**\n * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs\n * to be cleaned up before the component can actually be usable.\n */\ninterface BuilderElement {}",
-    "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\n\n/* eslint-disable */\n\n/**\n * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs\n * to be cleaned up before the component can actually be usable.\n */\nexport interface FormProps {\n  attributes?: any;\n  name?: string;\n  action?: string;\n  validate?: boolean;\n  method?: string;\n  builderBlock?: BuilderElement;\n  sendSubmissionsTo?: string;\n  sendSubmissionsToEmail?: string;\n  sendWithJs?: boolean;\n  contentType?: string;\n  customHeaders?: {\n    [key: string]: string;\n  };\n  successUrl?: string;\n  previewState?: FormState;\n  successMessage?: BuilderElement[];\n  errorMessage?: BuilderElement[];\n  sendingMessage?: BuilderElement[];\n  resetFormOnSubmit?: boolean;\n  errorMessagePath?: string;\n}",
-  ],
-  types: [
-    "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\n\n/* eslint-disable */\n\n/**\n * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs\n * to be cleaned up before the component can actually be usable.\n */\nexport type FormState = 'unsubmitted' | 'sending' | 'success' | 'error';",
-  ],
-  propsTypeRef: "FormProps",
-};