@builder.io/sdk-svelte 0.0.3 → 0.0.5

package/src/blocks/custom-code/component-info.ts

@@ -0,0 +1,31 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Custom Code',
+  static: true,
+  builtIn: true,
+  requiredPermissions: ['editCode'],
+  inputs: [
+    {
+      name: 'code',
+      type: 'html',
+      required: true,
+      defaultValue: '<p>Hello there, I am custom HTML code!</p>',
+      code: true,
+    },
+    {
+      name: 'replaceNodes',
+      type: 'boolean',
+      helperText: 'Preserve server rendered dom nodes',
+      advanced: true,
+    },
+    {
+      name: 'scriptsClientOnly',
+      type: 'boolean',
+      defaultValue: false,
+      helperText:
+        'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
+      advanced: true,
+    },
+  ],
+};

package/{package/blocks/custom-code/custom-code.lite.tsx → src/blocks/custom-code/custom-code.svelte}

@@ -13,17 +13,14 @@
 
   function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem && typeof window !== "undefined") {
+    if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
       const scripts = elem.getElementsByTagName("script");
-
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
-
         if (script.src) {
           if (scriptsInserted.includes(script.src)) {
             continue;
           }
-
           scriptsInserted.push(script.src);
           const newScript = document.createElement("script");
           newScript.async = true;
@@ -40,7 +37,6 @@
           if (scriptsRun.includes(script.innerText)) {
             continue;
           }
-
           try {
             scriptsRun.push(script.innerText);
             new Function(script.innerText)();

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

@@ -0,0 +1,53 @@
+import type { ComponentInfo } from '../../types/components';
+import { markSerializable } from '../util.js';
+
+export const componentInfo: 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: Map<string, any>) => {
+        const url = options.get('url');
+        if (url) {
+          options.set('content', 'Loading...');
+          // TODO: get this out of here!
+          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,
+    },
+  ],
+};

package/{package/blocks/embed/embed.lite.tsx → src/blocks/embed/embed.svelte}

@@ -12,11 +12,10 @@
   export let content: EmbedProps["content"];
 
   function findAndRunScripts() {
+    if (!elem || !elem.getElementsByTagName) return;
     const scripts = elem.getElementsByTagName("script");
-
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
-
       if (script.src && !scriptsInserted.includes(script.src)) {
         scriptsInserted.push(script.src);
         const newScript = document.createElement("script");

package/src/blocks/embed/helpers.ts

@@ -0,0 +1,8 @@
+const SCRIPT_MIME_TYPES = [
+  'text/javascript',
+  'application/javascript',
+  'application/ecmascript',
+];
+
+export const isJsScript = (script: HTMLScriptElement) =>
+  SCRIPT_MIME_TYPES.includes(script.type);

package/src/blocks/form/component-info.ts

@@ -0,0 +1,282 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Form:Form',
+  builtIn: true,
+  // editableTags: ['builder-form-error']
+  defaults: {
+    responsiveStyles: {
+      large: {
+        marginTop: '15px',
+        paddingBottom: '15px',
+      },
+    },
+  },
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
+  inputs: [
+    {
+      name: 'sendSubmissionsTo',
+      type: 'string',
+      // TODO: save to builder data and user can download as csv
+      // TODO: easy for mode too or computed add/remove fields form mode
+      // so you can edit details and high level mode at same time...
+      // Later - more integrations like mailchimp
+      // /api/v1/form-submit?to=mailchimp
+      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, // TODO: required: () => options.get("sendSubmissionsTo") === "email"
+      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',
+      // advanced: true
+    },
+    {
+      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,
+      // TODO: do automatically if file input
+      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',
+      // TODO: persist: false flag
+      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/{package/blocks/form/form.lite.tsx → src/blocks/form/form.svelte}

@@ -8,6 +8,7 @@
    * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
    * to be cleaned up before the component can actually be usable.
    */
+
   interface BuilderElement {}
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -19,6 +20,7 @@
    * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
    * to be cleaned up before the component can actually be usable.
    */
+
   export interface FormProps {
     attributes?: any;
     name?: string;
@@ -51,6 +53,7 @@
    * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
    * to be cleaned up before the component can actually be usable.
    */
+
   export type FormState = "unsubmitted" | "sending" | "success" | "error";
 </script>
 
@@ -84,7 +87,6 @@
 
   function onSubmit(event) {
     const sendWithJs = sendWithJs || sendSubmissionsTo === "email";
-
     if (sendSubmissionsTo === "zapier") {
       event.preventDefault();
     } else if (sendWithJs) {
@@ -92,13 +94,13 @@
         event.preventDefault();
         return;
       }
-
       event.preventDefault();
       const el = event.currentTarget;
       const headers = customHeaders || {};
       let body;
-      const formData = new FormData(el); // TODO: maybe support null
+      const formData = new FormData(el);
 
+      // TODO: maybe support null
       const formPairs = Array.from(
         event.currentTarget.querySelectorAll("input,select,textarea")
       )
@@ -106,7 +108,6 @@
         .map((el) => {
           let value;
           const key = el.name;
-
           if (el instanceof HTMLInputElement) {
             if (el.type === "radio") {
               if (el.checked) {
@@ -120,7 +121,6 @@
               value = el.checked;
             } else if (el.type === "number" || el.type === "range") {
               const num = el.valueAsNumber;
-
               if (!isNaN(num)) {
                 value = num;
               }
@@ -133,18 +133,15 @@
           } else {
             value = el.value;
           }
-
           return {
             key,
             value,
           };
         });
       let contentType = contentType;
-
       if (sendSubmissionsTo === "email") {
         contentType = "multipart/form-data";
       }
-
       Array.from(formPairs).forEach(({ value }) => {
         if (
           value instanceof File ||
@@ -153,10 +150,11 @@
         ) {
           contentType = "multipart/form-data";
         }
-      }); // TODO: send as urlEncoded or multipart by default
+      });
+
+      // 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 {
@@ -167,7 +165,6 @@
         });
         body = JSON.stringify(json);
       }
-
       if (contentType && contentType !== "multipart/form-data") {
         if (
           /* Zapier doesn't allow content-type header to be sent from browsers */
@@ -176,21 +173,17 @@
           headers["content-type"] = contentType;
         }
       }
-
       const presubmitEvent = new CustomEvent("presubmit", {
         detail: {
           body,
         },
       });
-
       if (formRef) {
         formRef.dispatchEvent(presubmitEvent);
-
         if (presubmitEvent.defaultPrevented) {
           return;
         }
       }
-
       formState = "sending";
       const formUrl = `${
         builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"
@@ -198,8 +191,9 @@
         sendSubmissionsToEmail || ""
       )}&name=${encodeURIComponent(name || "")}`;
       fetch(
-        sendSubmissionsTo === "email" ? formUrl : action,
-        /* TODO: throw error if no action URL */
+        sendSubmissionsTo === "email"
+          ? formUrl
+          : action /* TODO: throw error if no action URL */,
         {
           body,
           headers,
@@ -209,31 +203,25 @@
         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 && errorMessagePath) {
             /* TODO: allow supplying an error formatter function */
             let message = get(body, 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);
               }
-
               formErrorMessage = message;
             }
           }
-
           responseData = body;
           formState = res.ok ? "success" : "error";
-
           if (res.ok) {
             const submitSuccessEvent = new CustomEvent("submit:success", {
               detail: {
@@ -241,21 +229,18 @@
                 body,
               },
             });
-
             if (formRef) {
               formRef.dispatchEvent(submitSuccessEvent);
-
               if (submitSuccessEvent.defaultPrevented) {
                 return;
               }
               /* TODO: option to turn this on/off? */
-
               if (resetFormOnSubmit !== false) {
                 formRef.reset();
               }
             }
-            /* TODO: client side route event first that can be preventDefaulted */
 
+            /* TODO: client side route event first that can be preventDefaulted */
             if (successUrl) {
               if (formRef) {
                 const event = new CustomEvent("route", {
@@ -264,7 +249,6 @@
                   },
                 });
                 formRef.dispatchEvent(event);
-
                 if (!event.defaultPrevented) {
                   location.href = successUrl;
                 }
@@ -280,15 +264,12 @@
               error: err,
             },
           });
-
           if (formRef) {
             formRef.dispatchEvent(submitErrorEvent);
-
             if (submitErrorEvent.defaultPrevented) {
               return;
             }
           }
-
           responseData = err;
           formState = "error";
         }

package/src/blocks/fragment/component-info.ts

@@ -0,0 +1,10 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Fragment',
+  static: true,
+  hidden: true,
+  builtIn: true,
+  canHaveChildren: true,
+  noWrap: true,
+};