@builder.io/sdk-qwik 0.0.8 → 0.0.9

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

@@ -0,0 +1,44 @@
+import { markSerializable } from "../util";
+const componentInfo = {
+  name: "Embed",
+  static: true,
+  builtIn: true,
+  inputs: [
+    {
+      name: "url",
+      type: "url",
+      required: true,
+      defaultValue: "",
+      helperText: "e.g. enter a youtube url, google map, etc",
+      onChange: markSerializable((options) => {
+        const url = options.get("url");
+        if (url) {
+          options.set("content", "Loading...");
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+            if (options.get("url") === url) {
+              if (data.html) {
+                options.set("content", data.html);
+              } else {
+                options.set("content", "Invalid url, please try another");
+              }
+            }
+          }).catch((_err) => {
+            options.set("content", "There was an error embedding this URL, please try again or another URL");
+          });
+        } else {
+          options.delete("content");
+        }
+      })
+    },
+    {
+      name: "content",
+      type: "html",
+      defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+      hideFromUI: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/embed/embed.jsx

@@ -0,0 +1,130 @@
+// GENERATED BY MITOSIS
+
+import { isJsScript } from "./helpers";
+import {
+  Fragment,
+  Host,
+  component$,
+  h,
+  useRef,
+  useStore,
+  useWatch$,
+} from "@builder.io/qwik";
+export const findAndRunScripts = function findAndRunScripts(
+  props,
+  state,
+  elem
+) {
+  const scripts = elem.getElementsByTagName("script");
+
+  for (let i = 0; i < scripts.length; i++) {
+    const script = scripts[i];
+
+    if (script.src && !state.scriptsInserted.includes(script.src)) {
+      state.scriptsInserted.push(script.src);
+      const newScript = document.createElement("script");
+      newScript.async = true;
+      newScript.src = script.src;
+      document.head.appendChild(newScript);
+    } else if (
+      isJsScript(script) &&
+      !state.scriptsRun.includes(script.innerText)
+    ) {
+      try {
+        state.scriptsRun.push(script.innerText);
+        new Function(script.innerText)();
+      } catch (error) {
+        console.warn("`Embed`: Error running script:", error);
+      }
+    }
+  }
+};
+export const Embed = component$(
+  (props) => {
+    const elem = useRef();
+    const state = useStore({
+      scriptsInserted: [],
+      scriptsRun: [],
+      ranInitFn: false,
+    });
+    useWatch$(({ track }) => {
+      state && track(state, "ranInitFn");
+      if (elem && !state.ranInitFn) {
+        state.ranInitFn = true;
+        findAndRunScripts(props, state, elem);
+      }
+    });
+    return (
+      <Host
+        class="builder-embed"
+        ref={elem}
+        dangerouslySetInnerHTML={props.content}
+      ></Host>
+    );
+  },
+  { tagName: "div" }
+);
+export default Embed;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [
+    {
+      imports: {
+        isJsScript: "isJsScript",
+      },
+      path: "./helpers",
+    },
+  ],
+  exports: {},
+  inputs: [],
+  meta: {},
+  refs: {
+    elem: {
+      argument: "",
+      typeParameter: "HTMLDivElement",
+    },
+  },
+  state: {
+    scriptsInserted: [],
+    scriptsRun: [],
+    ranInitFn: false,
+    findAndRunScripts:
+      "@builder.io/mitosis/method:findAndRunScripts() {\n  const scripts = elem.getElementsByTagName('script');\n\n  for (let i = 0; i < scripts.length; i++) {\n    const script = scripts[i];\n\n    if (script.src && !state.scriptsInserted.includes(script.src)) {\n      state.scriptsInserted.push(script.src);\n      const newScript = document.createElement('script');\n      newScript.async = true;\n      newScript.src = script.src;\n      document.head.appendChild(newScript);\n    } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText)) {\n      try {\n        state.scriptsRun.push(script.innerText);\n        new Function(script.innerText)();\n      } catch (error) {\n        console.warn('`Embed`: Error running script:', error);\n      }\n    }\n  }\n}",
+  },
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Host",
+      meta: {},
+      scope: {},
+      properties: {
+        class: "builder-embed",
+      },
+      bindings: {
+        ref: {
+          code: "elem",
+        },
+        innerHTML: {
+          code: "props.content",
+        },
+      },
+      children: [],
+    },
+  ],
+  hooks: {
+    onUpdate: [
+      {
+        code: "\n  if (elem && !state.ranInitFn) {\n    state.ranInitFn = true;\n    findAndRunScripts(props,state,elem,);\n  }\n",
+        deps: "[elem, state.ranInitFn]",
+      },
+    ],
+  },
+  context: {
+    get: {},
+    set: {},
+  },
+  name: "Embed",
+  subComponents: [],
+  interfaces: ["export interface EmbedProps {\n  content: string;\n}"],
+  propsTypeRef: "EmbedProps",
+};

package/src/blocks/embed/helpers.js

@@ -0,0 +1,9 @@
+const SCRIPT_MIME_TYPES = [
+  "text/javascript",
+  "application/javascript",
+  "application/ecmascript"
+];
+const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+export {
+  isJsScript
+};

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

@@ -0,0 +1,86 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const BuilderBlocks = component$((props) => {
+  return (
+    <Fragment>
+      NOT YET IMPLEMENTED: <code>BuilderBlocks</code>
+    </Fragment>
+  );
+});
+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/component-info.js

@@ -0,0 +1,262 @@
+const componentInfo = {
+  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"
+        }
+      }
+    }
+  ]
+};
+export {
+  componentInfo
+};