@builder.io/sdk-svelte 0.0.1-31 → 0.0.1-32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-31",
+  "version": "0.0.1-32",
   "type": "module",
   "files": [
     "src"

package/src/blocks/button/button.svelte

@@ -1,8 +1,17 @@
-<script>
-  export let attributes;
-  export let text;
-  export let link;
-  export let openLinkInNewTab;
+<script context="module" lang="ts">
+  export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+    link?: string;
+    openLinkInNewTab?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: ButtonProps["attributes"];
+  export let text: ButtonProps["text"];
+  export let link: ButtonProps["link"];
+  export let openLinkInNewTab: ButtonProps["openLinkInNewTab"];
 </script>
 
 {#if link}

package/src/blocks/columns/columns.svelte

@@ -1,11 +1,32 @@
-<script>
+<script context="module" lang="ts">
+  type Column = {
+    blocks: any; // TODO: Implement this when support for dynamic CSS lands
+
+    width?: number;
+  };
+
+  type StackColumnsAt = "tablet" | "mobile" | "never";
+
+  export interface ColumnProps {
+    columns?: Column[];
+    builderBlock: BuilderBlock; // TODO: Implement this when support for dynamic CSS lands
+
+    space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+    stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
+
+    reverseColumnsWhenStacked?: boolean;
+  }
+</script>
+
+<script lang="ts">
   import RenderBlocks from "../../components/render-blocks.svelte";
 
-  export let space;
-  export let columns;
-  export let stackColumnsAt;
-  export let reverseColumnsWhenStacked;
-  export let builderBlock;
+  export let space: ColumnProps["space"];
+  export let columns: ColumnProps["columns"];
+  export let stackColumnsAt: ColumnProps["stackColumnsAt"];
+  export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
+  export let builderBlock: ColumnProps["builderBlock"];
 
   function mitosis_styling(node, vars) {
     Object.entries(vars).forEach(([p, v]) => {

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

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -186,7 +187,7 @@ const componentInfo = {
           ]
         }
       ],
-      onChange(options) {
+      onChange: markSerializable((options) => {
         function clearWidths() {
           columns.forEach((col) => {
             col.delete("width");
@@ -210,7 +211,7 @@ const componentInfo = {
             }
           }
         }
-      }
+      })
     },
     {
       name: "space",

package/src/blocks/custom-code/custom-code.svelte

@@ -1,9 +1,16 @@
-<script>
+<script context="module" lang="ts">
+  export interface CustomCodeProps {
+    code: string;
+    replaceNodes?: boolean;
+  }
+</script>
+
+<script lang="ts">
   import { onMount } from "svelte";
 
-  export let elem;
-  export let replaceNodes;
-  export let code;
+  export let elem: CustomCodeProps["elem"];
+  export let replaceNodes: CustomCodeProps["replaceNodes"];
+  export let code: CustomCodeProps["code"];
 
   const findAndRunScripts = function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'

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

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -9,7 +10,7 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange(options) {
+      onChange: markSerializable((options) => {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");
@@ -28,7 +29,7 @@ const componentInfo = {
         } else {
           options.delete("content");
         }
-      }
+      })
     },
     {
       name: "content",

package/src/blocks/embed/embed.svelte

@@ -1,10 +1,16 @@
-<script>
+<script context="module" lang="ts">
+  export interface EmbedProps {
+    content: string;
+  }
+</script>
+
+<script lang="ts">
   import { afterUpdate } from "svelte";
 
   import { isJsScript } from "./helpers";
 
-  export let elem;
-  export let content;
+  export let elem: EmbedProps["elem"];
+  export let content: EmbedProps["content"];
 
   const findAndRunScripts = function findAndRunScripts() {
     const scripts = elem.getElementsByTagName("script");

package/src/blocks/form/form.svelte

@@ -1,26 +1,87 @@
-<script>
+<script context="module" lang="ts">
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-nocheck
+
+  /* eslint-disable */
+
+  /**
+   * 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
+  // @ts-nocheck
+
+  /* eslint-disable */
+
+  /**
+   * 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;
+    action?: string;
+    validate?: boolean;
+    method?: string;
+    builderBlock?: BuilderElement;
+    sendSubmissionsTo?: string;
+    sendSubmissionsToEmail?: string;
+    sendWithJs?: boolean;
+    contentType?: string;
+    customHeaders?: {
+      [key: string]: string;
+    };
+    successUrl?: string;
+    previewState?: FormState;
+    successMessage?: BuilderElement[];
+    errorMessage?: BuilderElement[];
+    sendingMessage?: BuilderElement[];
+    resetFormOnSubmit?: boolean;
+    errorMessagePath?: string;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-nocheck
+
+  /* eslint-disable */
+
+  /**
+   * 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>
+
+<script lang="ts">
   import RenderBlock from "../../components/render-block/render-block.svelte";
+  import BuilderBlocks from "../../components/render-blocks.svelte";
   import { isEditing } from "../../functions/is-editing.js";
 
-  export let formRef;
-  export let previewState;
-  export let sendWithJs;
-  export let sendSubmissionsTo;
-  export let action;
-  export let customHeaders;
-  export let contentType;
-  export let sendSubmissionsToEmail;
-  export let name;
-  export let method;
-  export let errorMessagePath;
-  export let resetFormOnSubmit;
-  export let successUrl;
-  export let validate;
-  export let attributes;
-  export let builderBlock;
-  export let errorMessage;
-  export let sendingMessage;
-  export let successMessage;
+  import { getContext, setContext } from "svelte";
+
+  export let formRef: FormProps["formRef"];
+  export let previewState: FormProps["previewState"];
+  export let sendWithJs: FormProps["sendWithJs"];
+  export let sendSubmissionsTo: FormProps["sendSubmissionsTo"];
+  export let action: FormProps["action"];
+  export let customHeaders: FormProps["customHeaders"];
+  export let contentType: FormProps["contentType"];
+  export let sendSubmissionsToEmail: FormProps["sendSubmissionsToEmail"];
+  export let name: FormProps["name"];
+  export let method: FormProps["method"];
+  export let errorMessagePath: FormProps["errorMessagePath"];
+  export let resetFormOnSubmit: FormProps["resetFormOnSubmit"];
+  export let successUrl: FormProps["successUrl"];
+  export let validate: FormProps["validate"];
+  export let attributes: FormProps["attributes"];
+  export let builderBlock: FormProps["builderBlock"];
+  export let errorMessage: FormProps["errorMessage"];
+  export let sendingMessage: FormProps["sendingMessage"];
+  export let successMessage: FormProps["successMessage"];
+
+  let builderContext = getContext(BuilderContext.key);
 
   const onSubmit = function onSubmit(event) {
     const sendWithJs = sendWithJs || sendSubmissionsTo === "email";
@@ -256,41 +317,27 @@
   }}
 >
   {#if builderBlock && builderBlock.children}
-    {#each builderBlock?.children as block, undefined}
-      <RenderBlock {block} />
+    {#each builderBlock?.children as block}
+      <RenderBlock {block} context={builderContext} />
     {/each}
   {/if}
 
   {#if submissionState() === "error"}
-    <svelte:component
-      this={BuilderBlocks}
-      dataPath="errorMessage"
-      blocks={errorMessage}
-    />
+    <BuilderBlocks dataPath="errorMessage" blocks={errorMessage} />
   {/if}
 
   {#if submissionState() === "sending"}
-    <svelte:component
-      this={BuilderBlocks}
-      dataPath="sendingMessage"
-      blocks={sendingMessage}
-    />
+    <BuilderBlocks dataPath="sendingMessage" blocks={sendingMessage} />
   {/if}
 
   {#if submissionState() === "error" && responseData}
     <pre class="builder-form-error-text pre">
-        
-{JSON.stringify(responseData, null, 2)}
-
+        {JSON.stringify(responseData, null, 2)}
       </pre>
   {/if}
 
   {#if submissionState() === "success"}
-    <svelte:component
-      this={BuilderBlocks}
-      dataPath="successMessage"
-      blocks={successMessage}
-    />
+    <BuilderBlocks dataPath="successMessage" blocks={successMessage} />
   {/if}
 </form>
 

package/src/blocks/fragment/fragment.svelte

@@ -1,4 +1,12 @@
-<script>
+<script context="module" lang="ts">
+  export interface FragmentProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+  }
+</script>
+
+<script lang="ts">
 </script>
 
 <span><slot /></span>

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

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Image",
   static: true,
@@ -18,7 +19,7 @@ const componentInfo = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange(options) {
+      onChange: markSerializable((options) => {
         const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");
         options.delete("noWebp");
@@ -64,7 +65,7 @@ const componentInfo = {
             }
           });
         }
-      }
+      })
     },
     {
       name: "backgroundSize",

package/src/blocks/image/image.svelte

@@ -1,17 +1,38 @@
-<script>
+<script context="module" lang="ts">
+  export interface ImageProps {
+    className?: string;
+    image: string;
+    sizes?: string;
+    lazy?: boolean;
+    height?: number;
+    width?: number;
+    altText?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    srcset?: string;
+    aspectRatio?: number;
+    children?: JSX.Element;
+    fitContent?: boolean;
+    builderBlock?: BuilderBlock;
+    noWebp?: boolean;
+    src?: string;
+  }
+</script>
+
+<script lang="ts">
   import { getSrcSet } from "./image.helpers";
 
-  export let image;
-  export let src;
-  export let srcset;
-  export let noWebp;
-  export let altText;
-  export let backgroundSize;
-  export let className;
-  export let sizes;
-  export let aspectRatio;
-  export let fitContent;
-  export let builderBlock;
+  export let image: ImageProps["image"];
+  export let src: ImageProps["src"];
+  export let srcset: ImageProps["srcset"];
+  export let noWebp: ImageProps["noWebp"];
+  export let altText: ImageProps["altText"];
+  export let backgroundSize: ImageProps["backgroundSize"];
+  export let className: ImageProps["className"];
+  export let sizes: ImageProps["sizes"];
+  export let aspectRatio: ImageProps["aspectRatio"];
+  export let fitContent: ImageProps["fitContent"];
+  export let builderBlock: ImageProps["builderBlock"];
 
   function mitosis_styling(node, vars) {
     Object.entries(vars).forEach(([p, v]) => {
@@ -57,7 +78,6 @@
     {#if webpSrcSet()}
       <source type="image/webp" srcset={webpSrcSet()} />
     {/if}
-
     <img
       use:mitosis_styling={{
         objectPosition: backgroundSize || "center",
@@ -71,7 +91,6 @@
       srcset={srcSetToUse()}
       {sizes}
     />
-
     <source srcset={srcSetToUse()} />
   </picture>
 

package/src/blocks/img/img.svelte

@@ -1,11 +1,33 @@
-<script>
+<script context="module" lang="ts">
+  export interface ImgProps {
+    attributes?: any;
+    imgSrc?: string; // TODO(misko): I think this is unused
+
+    image?: string;
+    altText?: string;
+    backgroundSize?: "cover" | "contain";
+    backgroundPosition?:
+      | "center"
+      | "top"
+      | "left"
+      | "right"
+      | "bottom"
+      | "top left"
+      | "top right"
+      | "bottom left"
+      | "bottom right";
+  }
+</script>
+
+<script lang="ts">
   import { isEditing } from "../../functions/is-editing.js";
 
-  export let backgroundSize;
-  export let backgroundPosition;
-  export let attributes;
-  export let imgSrc;
-  export let altText;
+  export let backgroundSize: ImgProps["backgroundSize"];
+  export let backgroundPosition: ImgProps["backgroundPosition"];
+  export let imgSrc: ImgProps["imgSrc"];
+  export let altText: ImgProps["altText"];
+  export let image: ImgProps["image"];
+  export let attributes: ImgProps["attributes"];
 
   function mitosis_styling(node, vars) {
     Object.entries(vars).forEach(([p, v]) => {
@@ -22,5 +44,5 @@
   }}
   key={(isEditing() && imgSrc) || "default-key"}
   alt={altText}
-  src={imgSrc}
+  src={imgSrc || image}
 />

package/src/blocks/input/input.svelte

@@ -1,13 +1,25 @@
-<script>
+<script context="module" lang="ts">
+  export interface FormInputProps {
+    type?: string;
+    attributes?: any;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    required?: boolean;
+  }
+</script>
+
+<script lang="ts">
   import { isEditing } from "../../functions/is-editing.js";
 
-  export let attributes;
-  export let defaultValue;
-  export let placeholder;
-  export let type;
-  export let name;
-  export let value;
-  export let required;
+  export let attributes: FormInputProps["attributes"];
+  export let defaultValue: FormInputProps["defaultValue"];
+  export let placeholder: FormInputProps["placeholder"];
+  export let type: FormInputProps["type"];
+  export let name: FormInputProps["name"];
+  export let value: FormInputProps["value"];
+  export let required: FormInputProps["required"];
 </script>
 
 <input

package/src/blocks/raw-text/raw-text.svelte

@@ -1,6 +1,13 @@
-<script>
-  export let attributes;
-  export let text;
+<script context="module" lang="ts">
+  export interface RawTextProps {
+    attributes?: any;
+    text?: string; // builderBlock?: any;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: RawTextProps["attributes"];
+  export let text: RawTextProps["text"];
 </script>
 
 <span class={attributes?.class || attributes?.className}

package/src/blocks/section/section.svelte

@@ -1,6 +1,15 @@
-<script>
-  export let attributes;
-  export let maxWidth;
+<script context="module" lang="ts">
+  export interface SectionProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+    builderBlock?: any;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: SectionProps["attributes"];
+  export let maxWidth: SectionProps["maxWidth"];
 
   function mitosis_styling(node, vars) {
     Object.entries(vars).forEach(([p, v]) => {

package/src/blocks/select/select.svelte

@@ -1,11 +1,24 @@
-<script>
+<script context="module" lang="ts">
+  export interface FormSelectProps {
+    options?: {
+      name?: string;
+      value: string;
+    }[];
+    attributes?: any;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+  }
+</script>
+
+<script lang="ts">
   import { isEditing } from "../../functions/is-editing.js";
 
-  export let attributes;
-  export let value;
-  export let defaultValue;
-  export let name;
-  export let options;
+  export let attributes: FormSelectProps["attributes"];
+  export let value: FormSelectProps["value"];
+  export let defaultValue: FormSelectProps["defaultValue"];
+  export let name: FormSelectProps["name"];
+  export let options: FormSelectProps["options"];
 </script>
 
 <select
@@ -15,7 +28,7 @@
   {defaultValue}
   {name}
 >
-  {#each options as option, undefined}
+  {#each options as option}
     <option value={option.value}>{option.name || option.value}</option>
   {/each}
 </select>

package/src/blocks/submit-button/submit-button.svelte

@@ -1,6 +1,13 @@
-<script>
-  export let attributes;
-  export let text;
+<script context="module" lang="ts">
+  export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: ButtonProps["attributes"];
+  export let text: ButtonProps["text"];
 </script>
 
 <button {...attributes} type="submit">

package/src/blocks/symbol/symbol.svelte

@@ -1,4 +1,24 @@
-<script>
+<script context="module" lang="ts">
+  export interface SymbolInfo {
+    model?: string;
+    entry?: string;
+    data?: any;
+    content?: BuilderContent;
+    inline?: boolean;
+    dynamic?: boolean;
+  }
+
+  export interface SymbolProps {
+    symbol?: SymbolInfo;
+    dataOnly?: boolean;
+    dynamic?: boolean;
+    builderBlock?: BuilderBlock;
+    attributes?: any;
+    inheritState?: boolean;
+  }
+</script>
+
+<script lang="ts">
   import { onMount } from "svelte";
   import { afterUpdate } from "svelte";
 
@@ -8,8 +28,8 @@
 
   import { getContext, setContext } from "svelte";
 
-  export let attributes;
-  export let symbol;
+  export let attributes: SymbolProps["attributes"];
+  export let symbol: SymbolProps["symbol"];
 
   let builderContext = getContext(BuilderContext.key);
 

package/src/blocks/text/text.svelte

@@ -1,5 +1,11 @@
-<script>
-  export let text;
+<script context="module" lang="ts">
+  export interface TextProps {
+    text: string;
+  }
+</script>
+
+<script lang="ts">
+  export let text: TextProps["text"];
 </script>
 
 <div class="builder-text">{@html text}</div>

package/src/blocks/textarea/textarea.svelte

@@ -1,9 +1,19 @@
-<script>
-  export let attributes;
-  export let placeholder;
-  export let name;
-  export let value;
-  export let defaultValue;
+<script context="module" lang="ts">
+  export interface TextareaProps {
+    attributes?: any;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: TextareaProps["attributes"];
+  export let placeholder: TextareaProps["placeholder"];
+  export let name: TextareaProps["name"];
+  export let value: TextareaProps["value"];
+  export let defaultValue: TextareaProps["defaultValue"];
 </script>
 
 <textarea {...attributes} {placeholder} {name} {value} {defaultValue} />