@builder.io/sdk-svelte 0.4.5 → 0.5.1

package/src/blocks/symbol/symbol.svelte

@@ -1,4 +1,7 @@
 <script context="module" lang="ts">
+  /**
+   * This import is used by the Svelte SDK. Do not remove.
+   */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
   export interface SymbolInfo {
     model?: string;
     entry?: string;
@@ -8,135 +11,85 @@
     dynamic?: boolean;
   }
 
-  export interface SymbolProps {
+  /**
+   * This import is used by the Svelte SDK. Do not remove.
+   */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+  export interface SymbolProps extends BuilderComponentsProp {
     symbol?: SymbolInfo;
     dataOnly?: boolean;
     dynamic?: boolean;
-    builderBlock?: BuilderBlock;
     attributes?: any;
     inheritState?: boolean;
   }
 </script>
 
 <script lang="ts">
-  import { getContext, onMount } from "svelte";
+  import { onMount } from "svelte";
 
-  import RenderContentVariants from "../../components/render-content-variants/render-content-variants.svelte";
-  import BuilderContext from "../../context/builder.context.js";
-  import { getContent } from "../../functions/get-content/index.js";
+  import ContentVariants from "../../components/content-variants/content-variants.svelte";
   import type { BuilderContent } from "../../types/builder-content.js";
-  import type { BuilderBlock } from "../../types/builder-block.js";
-  import { TARGET } from "../../constants/target";
-  import { logger } from "../../helpers/logger";
+  import type {
+    BuilderComponentsProp,
+    PropsWithBuilderData,
+  } from "../../types/builder-props.js";
+  import { filterAttrs } from "../helpers.js";
+  import { setAttrs } from "../helpers.js";
+  import { fetchContent } from "./symbol.helpers.js";
+  import type { Nullable } from "../../types/typescript.js";
 
-  const isEvent = (attr) => attr.startsWith("on:");
-  const isNonEvent = (attr) => !attr.startsWith("on:");
-  const filterAttrs = (attrs = {}, filter) => {
-    const validAttr = {};
-    Object.keys(attrs).forEach((attr) => {
-      if (filter(attr)) {
-        validAttr[attr] = attrs[attr];
+  export let js: PropsWithBuilderData<SymbolProps>["js"];
+  export let attributes: PropsWithBuilderData<SymbolProps>["attributes"];
+  export let symbol: PropsWithBuilderData<SymbolProps>["symbol"];
+  export let dynamic: PropsWithBuilderData<SymbolProps>["dynamic"];
+  export let builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
+  export let builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
+
+  function setContent() {
+    if (contentToUse) return;
+    fetchContent({
+      symbol: symbol,
+      builderContextValue: $builderContext,
+    }).then((newContent) => {
+      if (newContent) {
+        contentToUse = newContent;
       }
     });
-    return validAttr;
-  };
-  const setAttrs = (node, attrs = {}) => {
-    const attrKeys = Object.keys(attrs);
-    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
-    const teardown = (attr) =>
-      node.removeEventListener(attr.substr(3), attrs[attr]);
-    attrKeys.map(setup);
-    return {
-      update(attrs = {}) {
-        const attrKeys = Object.keys(attrs);
-        attrKeys.map(teardown);
-        attrKeys.map(setup);
-      },
-      destroy() {
-        attrKeys.map(teardown);
-      },
-    };
-  };
-
-  export let attributes: SymbolProps["attributes"];
-  export let symbol: SymbolProps["symbol"];
-  export let dynamic: SymbolProps["dynamic"];
-
-  let builderContext = getContext(BuilderContext.key);
-
-  function fetchContent() {
-    /**
-     * If:
-     * - we have a symbol prop
-     * - yet it does not have any content
-     * - and we have not already stored content from before
-     * - and it has a model name
-     *
-     * then we want to re-fetch the symbol content.
-     */
-    if (
-      !contentToUse &&
-      symbol?.model &&
-      // This is a hack, we should not need to check for this, but it is needed for Svelte.
-      $builderContext?.apiKey
-    ) {
-      getContent({
-        model: symbol.model,
-        apiKey: $builderContext.apiKey,
-        apiVersion: $builderContext.apiVersion,
-        ...(symbol?.entry && {
-          query: {
-            id: symbol.entry,
-          },
-        }),
-      })
-        .then((response) => {
-          if (response) {
-            contentToUse = response;
-          }
-        })
-        .catch((err) => {
-          logger.error("Could not fetch symbol content: ", err);
-        });
-    }
   }
+  $: className = () => {
+    return [
+      ...[attributes.class],
+      "builder-symbol",
+      symbol?.inline ? "builder-inline-symbol" : undefined,
+      symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
+    ]
+      .filter(Boolean)
+      .join(" ");
+  };
 
-  let className = [
-    ...(TARGET === "vue2" || TARGET === "vue3"
-      ? Object.keys(attributes.class)
-      : [attributes.class]),
-    "builder-symbol",
-    symbol?.inline ? "builder-inline-symbol" : undefined,
-    symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
-  ]
-    .filter(Boolean)
-    .join(" ");
   let contentToUse = symbol?.content;
 
   onMount(() => {
-    fetchContent();
+    setContent();
   });
 
   function onUpdateFn_0(..._args: any[]) {
-    fetchContent();
+    setContent();
   }
   $: onUpdateFn_0(...[symbol]);
 </script>
 
 <div
-  {...filterAttrs(attributes, isNonEvent)}
-  dataSet={{
-    class: className,
-  }}
-  class={className}
-  use:setAttrs={filterAttrs(attributes, isEvent)}
+  {...filterAttrs(attributes, "on:", false)}
+  {...{}}
+  class={className()}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
-  <RenderContentVariants
+  <ContentVariants
     __isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
     context={$builderContext.context}
-    customComponents={Object.values($builderContext.registeredComponents)}
+    customComponents={Object.values(builderComponents)}
     data={{
       ...symbol?.data,
       ...$builderContext.localState,

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

@@ -1,24 +1,20 @@
-import type { ComponentInfo } from '../../types/components';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Text',
   static: true,
-
-  image:
-    'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
-  inputs: [
-    {
-      name: 'text',
-      type: 'html',
-      required: true,
-      autoFocus: true,
-      bubble: true,
-      defaultValue: 'Enter some text...',
-    },
-  ],
+  isRSC: true,
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
+  inputs: [{
+    name: 'text',
+    type: 'html',
+    required: true,
+    autoFocus: true,
+    bubble: true,
+    defaultValue: 'Enter some text...'
+  }],
   defaultStyles: {
     lineHeight: 'normal',
     height: 'auto',
-    textAlign: 'center',
-  },
-};
+    textAlign: 'center'
+  }
+}

package/src/blocks/text/text.svelte

@@ -22,5 +22,5 @@
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text">{@html text?.toString()}</span
+  class="builder-text">{@html text?.toString() || ""}</span
 >

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

@@ -1,38 +1,28 @@
-import type { ComponentInfo } from '../../types/components';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Form:TextArea',
-
-  image:
-    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
-  inputs: [
-    {
-      advanced: true,
-      name: 'value',
-      type: 'string',
-    },
-    {
-      name: 'name',
-      type: 'string',
-      required: true,
-      helperText:
-        'Every input in a form needs a unique name describing what it gets, e.g. "email"',
-    },
-    {
-      name: 'defaultValue',
-      type: 'string',
-    },
-    {
-      name: 'placeholder',
-      type: 'string',
-      defaultValue: 'Hello there',
-    },
-    {
-      name: 'required',
-      type: 'boolean',
-      defaultValue: false,
-    },
-  ],
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
+  inputs: [{
+    advanced: true,
+    name: 'value',
+    type: 'string'
+  }, {
+    name: 'name',
+    type: 'string',
+    required: true,
+    helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+  }, {
+    name: 'defaultValue',
+    type: 'string'
+  }, {
+    name: 'placeholder',
+    type: 'string',
+    defaultValue: 'Hello there'
+  }, {
+    name: 'required',
+    type: 'boolean',
+    defaultValue: false
+  }],
   defaultStyles: {
     paddingTop: '10px',
     paddingBottom: '10px',
@@ -41,8 +31,8 @@ export const componentInfo: ComponentInfo = {
     borderRadius: '3px',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: '#ccc',
+    borderColor: '#ccc'
   },
   static: true,
-  noWrap: true,
-};
+  noWrap: true
+}

package/src/blocks/textarea/textarea.svelte

@@ -1,4 +1,7 @@
 <script context="module" lang="ts">
+  /**
+   * This import is used by the Svelte SDK. Do not remove.
+   */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
   export interface TextareaProps {
     attributes?: any;
     name?: string;
@@ -9,34 +12,8 @@
 </script>
 
 <script lang="ts">
-  const isEvent = (attr) => attr.startsWith("on:");
-  const isNonEvent = (attr) => !attr.startsWith("on:");
-  const filterAttrs = (attrs = {}, filter) => {
-    const validAttr = {};
-    Object.keys(attrs).forEach((attr) => {
-      if (filter(attr)) {
-        validAttr[attr] = attrs[attr];
-      }
-    });
-    return validAttr;
-  };
-  const setAttrs = (node, attrs = {}) => {
-    const attrKeys = Object.keys(attrs);
-    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
-    const teardown = (attr) =>
-      node.removeEventListener(attr.substr(3), attrs[attr]);
-    attrKeys.map(setup);
-    return {
-      update(attrs = {}) {
-        const attrKeys = Object.keys(attrs);
-        attrKeys.map(teardown);
-        attrKeys.map(setup);
-      },
-      destroy() {
-        attrKeys.map(teardown);
-      },
-    };
-  };
+  import { filterAttrs } from "../helpers.js";
+  import { setAttrs } from "../helpers.js";
 
   export let attributes: TextareaProps["attributes"];
   export let placeholder: TextareaProps["placeholder"];
@@ -46,10 +23,10 @@
 </script>
 
 <textarea
-  {...filterAttrs(attributes, isNonEvent)}
+  {...filterAttrs(attributes, "on:", false)}
   {placeholder}
   {name}
   {value}
   {defaultValue}
-  use:setAttrs={filterAttrs(attributes, isEvent)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
 />

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

@@ -1,109 +1,83 @@
-import type { ComponentInfo } from '../../types/components';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Video',
   canHaveChildren: true,
-
   defaultStyles: {
     minHeight: '20px',
-    minWidth: '20px',
+    minWidth: '20px'
   },
-  image:
-    'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
-  inputs: [
-    {
-      name: 'video',
-      type: 'file',
-      allowedFileTypes: ['mp4'],
-      bubble: true,
-      defaultValue:
-        'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
-      required: true,
-    },
-    {
-      name: 'posterImage',
-      type: 'file',
-      allowedFileTypes: ['jpeg', 'png'],
-      helperText: 'Image to show before the video plays',
-    },
-    {
-      name: 'autoPlay',
-      type: 'boolean',
-      defaultValue: true,
-    },
-    {
-      name: 'controls',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      name: 'muted',
-      type: 'boolean',
-      defaultValue: true,
-    },
-    {
-      name: 'loop',
-      type: 'boolean',
-      defaultValue: true,
-    },
-    {
-      name: 'playsInline',
-      type: 'boolean',
-      defaultValue: true,
-    },
-    {
-      name: 'fit',
-      type: 'text',
-      defaultValue: 'cover',
-      enum: ['contain', 'cover', 'fill', 'auto'],
-    },
-    {
-      name: 'fitContent',
-      type: 'boolean',
-      helperText:
-        'When child blocks are provided, fit to them instead of using the aspect ratio',
-      defaultValue: true,
-      advanced: true,
-    },
-    {
-      name: 'position',
-      type: 'text',
-      defaultValue: 'center',
-      enum: [
-        'center',
-        'top',
-        'left',
-        'right',
-        'bottom',
-        'top left',
-        'top right',
-        'bottom left',
-        'bottom right',
-      ],
-    },
-    {
-      name: 'height',
-      type: 'number',
-      advanced: true,
-    },
-    {
-      name: 'width',
-      type: 'number',
-      advanced: true,
-    },
-    {
-      name: 'aspectRatio',
-      type: 'number',
-      advanced: true,
-      defaultValue: 0.7004048582995948,
-    },
-    {
-      name: 'lazyLoad',
-      type: 'boolean',
-      helperText:
-        'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
-      defaultValue: true,
-      advanced: true,
-    },
-  ],
-};
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
+  inputs: [{
+    name: 'video',
+    type: 'file',
+    allowedFileTypes: ['mp4'],
+    bubble: true,
+    defaultValue: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
+    required: true
+  }, {
+    name: 'posterImage',
+    type: 'file',
+    allowedFileTypes: ['jpeg', 'png'],
+    helperText: 'Image to show before the video plays'
+  }, {
+    name: 'autoPlay',
+    type: 'boolean',
+    defaultValue: true
+  }, {
+    name: 'controls',
+    type: 'boolean',
+    defaultValue: false
+  }, {
+    name: 'muted',
+    type: 'boolean',
+    defaultValue: true
+  }, {
+    name: 'loop',
+    type: 'boolean',
+    defaultValue: true
+  }, {
+    name: 'playsInline',
+    type: 'boolean',
+    defaultValue: true
+  }, {
+    name: 'fit',
+    type: 'text',
+    defaultValue: 'cover',
+    enum: ['contain', 'cover', 'fill', 'auto']
+  }, {
+    name: 'preload',
+    type: 'text',
+    defaultValue: 'metadata',
+    enum: ['auto', 'metadata', 'none']
+  }, {
+    name: 'fitContent',
+    type: 'boolean',
+    helperText: 'When child blocks are provided, fit to them instead of using the aspect ratio',
+    defaultValue: true,
+    advanced: true
+  }, {
+    name: 'position',
+    type: 'text',
+    defaultValue: 'center',
+    enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+  }, {
+    name: 'height',
+    type: 'number',
+    advanced: true
+  }, {
+    name: 'width',
+    type: 'number',
+    advanced: true
+  }, {
+    name: 'aspectRatio',
+    type: 'number',
+    advanced: true,
+    defaultValue: 0.7004048582995948
+  }, {
+    name: 'lazyLoad',
+    type: 'boolean',
+    helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+    defaultValue: true,
+    advanced: true
+  }]
+}

package/src/blocks/video/video.svelte

@@ -11,6 +11,7 @@
     width?: number;
     height?: number;
     fit?: "contain" | "cover" | "fill";
+    preload?: "auto" | "metadata" | "none";
     position?:
       | "center"
       | "top"
@@ -27,41 +28,13 @@
 </script>
 
 <script lang="ts">
-  const isEvent = (attr) => attr.startsWith("on:");
-  const isNonEvent = (attr) => !attr.startsWith("on:");
-  const filterAttrs = (attrs = {}, filter) => {
-    const validAttr = {};
-    Object.keys(attrs).forEach((attr) => {
-      if (filter(attr)) {
-        validAttr[attr] = attrs[attr];
-      }
-    });
-    return validAttr;
-  };
-  const setAttrs = (node, attrs = {}) => {
-    const attrKeys = Object.keys(attrs);
-    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
-    const teardown = (attr) =>
-      node.removeEventListener(attr.substr(3), attrs[attr]);
-    attrKeys.map(setup);
-    return {
-      update(attrs = {}) {
-        const attrKeys = Object.keys(attrs);
-        attrKeys.map(teardown);
-        attrKeys.map(setup);
-      },
-      destroy() {
-        attrKeys.map(teardown);
-      },
-    };
-  };
-
   export let autoPlay: VideoProps["autoPlay"];
   export let muted: VideoProps["muted"];
   export let controls: VideoProps["controls"];
   export let loop: VideoProps["loop"];
   export let playsInline: VideoProps["playsInline"];
   export let attributes: VideoProps["attributes"];
+  export let preload: VideoProps["preload"];
   export let fit: VideoProps["fit"];
   export let position: VideoProps["position"];
   export let video: VideoProps["video"];
@@ -125,8 +98,8 @@
     // not have the video overflow
     borderRadius: 1,
   }}
-  {...filterAttrs(spreadProps(), isNonEvent)}
+  {...spreadProps()}
+  preload={preload || "metadata"}
   src={video || "no-src"}
   poster={posterImage}
-  use:setAttrs={filterAttrs(spreadProps(), isEvent)}
 />