@builder.io/sdk-svelte 0.13.1 → 0.13.3

package/lib/browser/blocks/columns/columns.svelte

@@ -8,7 +8,6 @@ import { TARGET } from "../../constants/target.js";
 import "../../functions/deopt.js";
 import { getClassPropName } from "../../functions/get-class-prop-name.js";
 import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.js";
-export let js;
 export let space = undefined;
 export let columns = undefined;
 export let stackColumnsAt = undefined;

package/lib/browser/blocks/columns/columns.svelte.d.ts

@@ -1,17 +1,15 @@
 import { SvelteComponent } from "svelte";
-import type { PropsWithBuilderData } from "../../types/builder-props.js";
 import type { ColumnProps } from "./columns.types.js";
 declare const __propDef: {
     props: {
-        js: any;
-        space?: PropsWithBuilderData<ColumnProps>["space"];
-        columns?: PropsWithBuilderData<ColumnProps>["columns"];
-        stackColumnsAt?: PropsWithBuilderData<ColumnProps>["stackColumnsAt"];
-        reverseColumnsWhenStacked?: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
-        builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
-        builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
-        builderLinkComponent?: PropsWithBuilderData<ColumnProps>["builderLinkComponent"];
-        builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
+        space?: ColumnProps["space"];
+        columns?: ColumnProps["columns"];
+        stackColumnsAt?: ColumnProps["stackColumnsAt"];
+        reverseColumnsWhenStacked?: ColumnProps["reverseColumnsWhenStacked"];
+        builderContext: ColumnProps["builderContext"];
+        builderBlock: ColumnProps["builderBlock"];
+        builderLinkComponent?: ColumnProps["builderLinkComponent"];
+        builderComponents: ColumnProps["builderComponents"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/blocks/columns/columns.types.d.ts

@@ -1,12 +1,12 @@
 import type { BuilderBlock } from '../../types/builder-block.js';
-import type { BuilderComponentsProp, BuilderLinkComponentProp } from '../../types/builder-props.js';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props.js';
 type Column = {
     blocks: BuilderBlock[];
     width?: number;
     link?: string;
 };
 type StackColumnsAt = 'tablet' | 'mobile' | 'never';
-export interface ColumnProps extends BuilderComponentsProp, BuilderLinkComponentProp {
+export interface ColumnProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
     columns?: Column[];
     space?: number;
     stackColumnsAt?: StackColumnsAt;

package/lib/browser/blocks/form/form/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/form/form/form.svelte

@@ -0,0 +1,302 @@
+<script context="module">/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */
+</script>
+
+<script>import Block from "../../../components/block/block.svelte";
+import Blocks from "../../../components/blocks/blocks.svelte";
+import { getEnv } from "../../../functions/get-env.js";
+import { get } from "../../../functions/get.js";
+import { isEditing } from "../../../functions/is-editing.js";
+import { set } from "../../../functions/set.js";
+import { filterAttrs } from "../../helpers.js";
+import { setAttrs } from "../../helpers.js";
+export let js;
+export let builderContext;
+export let previewState = undefined;
+export let sendWithJs = undefined;
+export let sendSubmissionsTo = undefined;
+export let action = undefined;
+export let customHeaders = undefined;
+export let contentType = undefined;
+export let sendSubmissionsToEmail = undefined;
+export let name = undefined;
+export let method = undefined;
+export let errorMessagePath = undefined;
+export let resetFormOnSubmit = undefined;
+export let successUrl = undefined;
+export let validate = undefined;
+export let attributes = undefined;
+export let builderBlock;
+export let builderComponents;
+export let builderLinkComponent = undefined;
+export let errorMessage = undefined;
+export let sendingMessage = undefined;
+export let successMessage = undefined;
+function mergeNewRootState(newData) {
+    const combinedState = {
+        ...$builderContext.rootState,
+        ...newData,
+    };
+    if ($builderContext.rootSetState) {
+        $builderContext.rootSetState?.(combinedState);
+    }
+    else {
+        $builderContext.rootState = combinedState;
+    }
+}
+function submissionState() {
+    return (isEditing() && previewState) || formState;
+}
+function onSubmit(event) {
+    const sendWithJsProp = sendWithJs || sendSubmissionsTo === "email";
+    if (sendSubmissionsTo === "zapier") {
+        event.preventDefault();
+    }
+    else if (sendWithJsProp) {
+        if (!(action || sendSubmissionsTo === "email")) {
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        const el = event.currentTarget;
+        const headers = customHeaders || {};
+        let body;
+        const formData = new FormData(el);
+        // TODO: maybe support null
+        const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea"))
+            .filter((el) => !!el.name)
+            .map((el) => {
+            let value;
+            const key = el.name;
+            if (el instanceof HTMLInputElement) {
+                if (el.type === "radio") {
+                    if (el.checked) {
+                        value = el.name;
+                        return {
+                            key,
+                            value,
+                        };
+                    }
+                }
+                else if (el.type === "checkbox") {
+                    value = el.checked;
+                }
+                else if (el.type === "number" || el.type === "range") {
+                    const num = el.valueAsNumber;
+                    if (!isNaN(num)) {
+                        value = num;
+                    }
+                }
+                else if (el.type === "file") {
+                    // TODO: one vs multiple files
+                    value = el.files;
+                }
+                else {
+                    value = el.value;
+                }
+            }
+            else {
+                value = el.value;
+            }
+            return {
+                key,
+                value,
+            };
+        });
+        let formContentType = contentType;
+        if (sendSubmissionsTo === "email") {
+            formContentType = "multipart/form-data";
+        }
+        Array.from(formPairs).forEach(({ value }) => {
+            if (value instanceof File ||
+                (Array.isArray(value) && value[0] instanceof File) ||
+                value instanceof FileList) {
+                formContentType = "multipart/form-data";
+            }
+        });
+        // TODO: send as urlEncoded or multipart by default
+        // because of ease of use and reliability in browser API
+        // for encoding the form?
+        if (formContentType !== "application/json") {
+            body = formData;
+        }
+        else {
+            // Json
+            const json = {};
+            Array.from(formPairs).forEach(({ value, key }) => {
+                set(json, key, value);
+            });
+            body = JSON.stringify(json);
+        }
+        if (formContentType && formContentType !== "multipart/form-data") {
+            if (
+            /* Zapier doesn't allow content-type header to be sent from browsers */
+            !(sendWithJsProp && action?.includes("zapier.com"))) {
+                headers["content-type"] = formContentType;
+            }
+        }
+        const presubmitEvent = new CustomEvent("presubmit", {
+            detail: {
+                body,
+            },
+        });
+        if (formRef) {
+            formRef.dispatchEvent(presubmitEvent);
+            if (presubmitEvent.defaultPrevented) {
+                return;
+            }
+        }
+        formState = "sending";
+        const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(sendSubmissionsToEmail || "")}&name=${encodeURIComponent(name || "")}`;
+        fetch(sendSubmissionsTo === "email"
+            ? formUrl
+            : action /* TODO: throw error if no action URL */, {
+            body,
+            headers,
+            method: method || "post",
+        }).then(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;
+                    mergeNewRootState({
+                        formErrorMessage: message,
+                    });
+                }
+            }
+            responseData = body;
+            formState = res.ok ? "success" : "error";
+            if (res.ok) {
+                const submitSuccessEvent = new CustomEvent("submit:success", {
+                    detail: {
+                        res,
+                        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 */
+                if (successUrl) {
+                    if (formRef) {
+                        const event = new CustomEvent("route", {
+                            detail: {
+                                url: successUrl,
+                            },
+                        });
+                        formRef.dispatchEvent(event);
+                        if (!event.defaultPrevented) {
+                            location.href = successUrl;
+                        }
+                    }
+                    else {
+                        location.href = successUrl;
+                    }
+                }
+            }
+        }, (err) => {
+            const submitErrorEvent = new CustomEvent("submit:error", {
+                detail: {
+                    error: err,
+                },
+            });
+            if (formRef) {
+                formRef.dispatchEvent(submitErrorEvent);
+                if (submitErrorEvent.defaultPrevented) {
+                    return;
+                }
+            }
+            responseData = err;
+            formState = "error";
+        });
+    }
+}
+let formRef;
+let formState = "unsubmitted";
+let responseData = null;
+let formErrorMessage = "";
+</script>
+
+<form
+  {validate}
+  bind:this={formRef}
+  action={!sendWithJs && action}
+  {method}
+  {name}
+  on:submit={(event) => {
+    onSubmit(event);
+  }}
+  {...filterAttrs(attributes, "on:", false)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+>
+  {#if builderBlock && builderBlock.children}
+    {#each builderBlock?.children as block, idx (`form-block-${idx}`)}
+      <Block
+        {block}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
+      />
+    {/each}
+  {/if}
+
+  {#if submissionState() === "error"}
+    <Blocks
+      path="errorMessage"
+      blocks={errorMessage}
+      context={builderContext}
+    />
+  {/if}
+
+  {#if submissionState() === "sending"}
+    <Blocks
+      path="sendingMessage"
+      blocks={sendingMessage}
+      context={builderContext}
+    />
+  {/if}
+
+  {#if submissionState() === "error" && responseData}
+    <pre class="builder-form-error-text pre">
+        {JSON.stringify(responseData, null, 2)}
+      </pre>
+  {/if}
+
+  {#if submissionState() === "success"}
+    <Blocks
+      path="successMessage"
+      blocks={successMessage}
+      context={builderContext}
+    />
+  {/if}
+</form>
+
+<style>
+  .pre {
+    padding: 10px;
+    color: red;
+    text-align: center;
+  }
+</style>

package/lib/browser/blocks/form/input/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/{input → form/input}/input.svelte

@@ -3,9 +3,9 @@
  */
 </script>
 
-<script>import { isEditing } from "../../functions/is-editing.js";
-import { filterAttrs } from "../helpers.js";
-import { setAttrs } from "../helpers.js";
+<script>import { isEditing } from "../../../functions/is-editing.js";
+import { filterAttrs } from "../../helpers.js";
+import { setAttrs } from "../../helpers.js";
 export let attributes = undefined;
 export let defaultValue = undefined;
 export let placeholder = undefined;

package/lib/browser/blocks/form/select/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/lib/{node/blocks → browser/blocks/form}/select/select.svelte

@@ -3,9 +3,9 @@
  */
 </script>
 
-<script>import { isEditing } from "../../functions/is-editing.js";
-import { filterAttrs } from "../helpers.js";
-import { setAttrs } from "../helpers.js";
+<script>import { isEditing } from "../../../functions/is-editing.js";
+import { filterAttrs } from "../../helpers.js";
+import { setAttrs } from "../../helpers.js";
 export let attributes = undefined;
 export let value = undefined;
 export let defaultValue = undefined;

package/lib/browser/blocks/form/submit-button/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/lib/{node/blocks → browser/blocks/form}/submit-button/submit-button.svelte

@@ -3,8 +3,8 @@
  */
 </script>
 
-<script>import { filterAttrs } from "../helpers.js";
-import { setAttrs } from "../helpers.js";
+<script>import { filterAttrs } from "../../helpers.js";
+import { setAttrs } from "../../helpers.js";
 export let attributes = undefined;
 export let text = undefined;
 </script>

package/lib/browser/blocks/slot/slot.svelte

@@ -2,6 +2,7 @@
 
 <script>import Blocks from "../../components/blocks/blocks.svelte";
 import "../../functions/deopt.js";
+export let js;
 export let builderContext;
 export let name;
 function mitosis_styling(node, vars) {

package/lib/browser/blocks/slot/slot.svelte.d.ts

@@ -1,15 +1,12 @@
 import { SvelteComponent } from "svelte";
-export interface DropzoneProps {
+export type DropzoneProps = BuilderDataProps & {
     name: string;
-    builderBlock: BuilderBlock;
-    builderContext: Writable<BuilderContextInterface>;
     attributes: any;
-}
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-import type { Writable } from "svelte/store";
+};
+import type { BuilderDataProps } from "../../types/builder-props.js";
 declare const __propDef: {
     props: {
+        js: any;
         builderContext: DropzoneProps["builderContext"];
         name: DropzoneProps["name"];
     };

package/lib/browser/blocks/symbol/symbol.svelte

@@ -4,7 +4,6 @@ import { filterAttrs } from "../helpers.js";
 import { getClassPropName } from "../../functions/get-class-prop-name.js";
 import { setAttrs } from "../helpers.js";
 import { fetchSymbolContent } from "./symbol.helpers.js";
-export let js;
 export let attributes = undefined;
 export let symbol = undefined;
 export let dynamic = undefined;

package/lib/browser/blocks/symbol/symbol.svelte.d.ts

@@ -1,16 +1,14 @@
 import { SvelteComponent } from "svelte";
-import type { PropsWithBuilderData } from "../../types/builder-props.js";
 import type { SymbolProps } from "./symbol.types.js";
 declare const __propDef: {
     props: {
-        js: any;
-        attributes?: PropsWithBuilderData<SymbolProps>["attributes"];
-        symbol?: PropsWithBuilderData<SymbolProps>["symbol"];
-        dynamic?: PropsWithBuilderData<SymbolProps>["dynamic"];
-        builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
-        builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
-        builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
-        builderLinkComponent?: PropsWithBuilderData<SymbolProps>["builderLinkComponent"];
+        attributes?: SymbolProps["attributes"];
+        symbol?: SymbolProps["symbol"];
+        dynamic?: SymbolProps["dynamic"];
+        builderContext: SymbolProps["builderContext"];
+        builderBlock: SymbolProps["builderBlock"];
+        builderComponents: SymbolProps["builderComponents"];
+        builderLinkComponent?: SymbolProps["builderLinkComponent"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/blocks/symbol/symbol.types.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderContent } from '../../types/builder-content.js';
-import type { BuilderComponentsProp, BuilderLinkComponentProp } from '../../types/builder-props.js';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props.js';
 interface SymbolInfo {
     model?: string;
     entry?: string;
@@ -8,7 +8,7 @@ interface SymbolInfo {
     inline?: boolean;
     dynamic?: boolean;
 }
-export interface SymbolProps extends BuilderComponentsProp, BuilderLinkComponentProp {
+export interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp {
     symbol?: SymbolInfo;
     dataOnly?: boolean;
     dynamic?: boolean;

package/lib/browser/components/block/block.svelte

@@ -81,13 +81,15 @@ $: componentRefProps = () => {
             builderContext: context,
             ...(blockComponent?.()?.name === "Core:Button" ||
                 blockComponent?.()?.name === "Symbol" ||
-                blockComponent?.()?.name === "Columns"
+                blockComponent?.()?.name === "Columns" ||
+                blockComponent?.()?.name === "Form:Form"
                 ? {
                     builderLinkComponent: linkComponent,
                 }
                 : {}),
             ...(blockComponent?.()?.name === "Symbol" ||
-                blockComponent?.()?.name === "Columns"
+                blockComponent?.()?.name === "Columns" ||
+                blockComponent?.()?.name === "Form:Form"
                 ? {
                     builderComponents: registeredComponents,
                 }

package/lib/browser/components/block/components/block-wrapper.svelte.d.ts

@@ -4,16 +4,16 @@ type BlockWrapperProps = {
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
     linkComponent: any;
+    children?: any;
 };
 import type { BuilderContextInterface } from "../../../context/types.js";
 import type { BuilderBlock } from "../../../types/builder-block.js";
-import type { PropsWithChildren } from "../../../types/typescript.js";
 import type { Writable } from "svelte/store";
 declare const __propDef: {
     props: {
-        Wrapper: PropsWithChildren<BlockWrapperProps>["Wrapper"];
-        block: PropsWithChildren<BlockWrapperProps>["block"];
-        context: PropsWithChildren<BlockWrapperProps>["context"];
+        Wrapper: BlockWrapperProps["Wrapper"];
+        block: BlockWrapperProps["block"];
+        context: BlockWrapperProps["context"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/components/block/components/component-ref/component-ref.helpers.d.ts

@@ -2,14 +2,14 @@
 import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponents } from '../../../../context/types.js';
 import type { BuilderBlock } from '../../../../types/builder-block.js';
-import type { PropsWithBuilderData } from '../../../../types/builder-props.js';
+import type { BuilderDataProps } from '../../../../types/builder-props.js';
 import type { InteractiveElementProps } from '../interactive-element.svelte';
-type ComponentOptions = PropsWithBuilderData<{
+type ComponentOptions = BuilderDataProps & {
     [index: string]: any;
     attributes?: {
         [index: string]: any;
     };
-}>;
+};
 export interface ComponentProps {
     componentRef: any;
     componentOptions: ComponentOptions;

package/lib/browser/components/content/content.types.d.ts

@@ -1,11 +1,5 @@
 import type { BuilderRenderState } from '../../context/types.js';
-import type { EnforcePartials } from '../../types/enforced-partials.js';
-import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
-interface InternalRenderProps {
-    showContent: boolean;
-    isSsrAbTest: boolean;
-}
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
+export type { ContentProps } from './contentProps.types.js';
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {
@@ -17,4 +11,3 @@ export interface BuilderComponentStateChange {
         };
     };
 }
-export {};

package/lib/browser/components/content/contentProps.types.d.ts

@@ -0,0 +1,12 @@
+import type { EnforcePartials } from '../../types/enforced-partials.js';
+import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
+interface InternalRenderProps {
+    showContent: boolean;
+    isSsrAbTest: boolean;
+}
+/**
+ * This is in a separate file so that we can override it (most notably in Vue,
+ * where prop types cannot be wrapped by generics like `EnforcePartials`).
+ */
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
+export {};

package/lib/browser/components/content/contentProps.types.js

@@ -0,0 +1 @@
+export {};

package/lib/browser/components/dynamic-renderer/dynamic-renderer.svelte

@@ -1,3 +1,5 @@
+<script context="module"></script>
+
 <script>import { isEmptyElement } from "./dynamic-renderer.helpers.js";
 import { setAttrs } from "../../blocks/helpers.js";
 export let attributes;

package/lib/browser/constants/builder-registered-components.js

@@ -2,16 +2,10 @@ import { default as Button } from '../blocks/button/button.svelte';
 import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
 import { default as Columns } from '../blocks/columns/columns.svelte';
 import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
-import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
-import { default as customCode } from '../blocks/custom-code/custom-code.svelte';
-import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
-import { default as embed } from '../blocks/embed/embed.svelte';
 import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
 import { default as Fragment } from '../blocks/fragment/fragment.svelte';
 import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
 import { default as Image } from '../blocks/image/image.svelte';
-import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
-import { default as Img } from '../blocks/img/img.svelte';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
 import { default as Section } from '../blocks/section/section.svelte';
 import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info.js';
@@ -20,8 +14,7 @@ import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component
 import { default as Symbol } from '../blocks/symbol/symbol.svelte';
 import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
 import { default as Text } from '../blocks/text/text.svelte';
-import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
-import { default as Video } from '../blocks/video/video.svelte';
+import { getExtraComponents } from './extra-components.js';
 /**
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
@@ -32,34 +25,22 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Columns,
         ...columnsComponentInfo
-    }, {
-        component: customCode,
-        ...customCodeInfo
-    }, {
-        component: embed,
-        ...embedComponentInfo
     }, {
         component: Fragment,
         ...fragmentComponentInfo
     }, {
         component: Image,
         ...imageComponentInfo
-    }, {
-        component: Img,
-        ...imgComponentInfo
     }, {
         component: Section,
         ...sectionComponentInfo
+    }, {
+        component: Slot,
+        ...slotComponentInfo
     }, {
         component: Symbol,
         ...symbolComponentInfo
     }, {
         component: Text,
         ...textComponentInfo
-    }, {
-        component: Video,
-        ...videoComponentInfo
-    }, {
-        component: Slot,
-        ...slotComponentInfo
-    }];
+    }, ...getExtraComponents()];