@builder.io/sdk-svelte 0.12.0 → 0.12.2

package/lib/node/components/block/components/block-wrapper.svelte

@@ -1,56 +1,30 @@
 <script context="module">/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-/**
  * This component renders a block's wrapper HTML element (from the block's `tagName` property).
- * It reuses the exact same logic as the `InteractiveElement` component, but we need to have 2 separate components for
- * Svelte's sake, as it needs to know at compile-time whether to use:
- *  - `<svelte:element>` (for HTML element) or
- *  - `<svelte:component>` (for custom components)
  */
 </script>
 
 <script>import { getBlockActions } from "../../../functions/get-block-actions.js";
 import { getBlockProperties } from "../../../functions/get-block-properties.js";
-import { setAttrs } from "../../../blocks/helpers.js";
+import DynamicRenderer from "../../dynamic-renderer/dynamic-renderer.svelte";
 export let Wrapper;
 export let block;
 export let context;
-export let hasChildren;
 </script>
 
-{#if hasChildren}
-  <svelte:element
-    this={Wrapper}
-    {...getBlockProperties({
-      block: block,
-      context: $context,
-    })}
-    use:setAttrs={getBlockActions({
-      block: block,
-      rootState: $context.rootState,
-      rootSetState: $context.rootSetState,
-      localState: $context.localState,
-      context: $context.context,
-      stripPrefix: true,
-    })}
-  >
-    <slot />
-  </svelte:element>
-{:else}
-  <svelte:element
-    this={Wrapper}
-    {...getBlockProperties({
-      block: block,
-      context: $context,
-    })}
-    use:setAttrs={getBlockActions({
-      block: block,
-      rootState: $context.rootState,
-      rootSetState: $context.rootSetState,
-      localState: $context.localState,
-      context: $context.context,
-      stripPrefix: true,
-    })}
-  />
-{/if}
+<DynamicRenderer
+  TagName={Wrapper}
+  attributes={getBlockProperties({
+    block: block,
+    context: $context,
+  })}
+  actionAttributes={getBlockActions({
+    block: block,
+    rootState: $context.rootState,
+    rootSetState: $context.rootSetState,
+    localState: $context.localState,
+    context: $context.context,
+    stripPrefix: true,
+  })}
+>
+  <slot />
+</DynamicRenderer>

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

@@ -1,12 +1,8 @@
 import { SvelteComponent } from "svelte";
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
 type BlockWrapperProps = {
     Wrapper: string;
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
-    hasChildren: boolean;
 };
 import type { BuilderContextInterface } from "../../../context/types.js";
 import type { BuilderBlock } from "../../../types/builder-block.js";
@@ -17,7 +13,6 @@ declare const __propDef: {
         Wrapper: PropsWithChildren<BlockWrapperProps>["Wrapper"];
         block: PropsWithChildren<BlockWrapperProps>["block"];
         context: PropsWithChildren<BlockWrapperProps>["context"];
-        hasChildren: PropsWithChildren<BlockWrapperProps>["hasChildren"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/components/content/components/enable-editor.svelte

@@ -8,6 +8,7 @@ import { fetchOneEntry } from "../../../functions/get-content/index.js";
 import { fetch } from "../../../functions/get-fetch.js";
 import { isBrowser } from "../../../functions/is-browser.js";
 import { isEditing } from "../../../functions/is-editing.js";
+import { isFromTrustedHost } from "../../../functions/is-from-trusted-host.js";
 import { isPreviewing } from "../../../functions/is-previewing.js";
 import { createRegisterComponentMessage } from "../../../functions/register-component.js";
 import { _track } from "../../../functions/track/index.js";
@@ -18,6 +19,7 @@ import "../../../helpers/preview-lru-cache/set.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
 export let builderContextSignal;
 export let contentWrapper = undefined;
+export let trustedHosts = undefined;
 export let model = undefined;
 export let context = undefined;
 export let canTrack = undefined;
@@ -59,6 +61,9 @@ function mergeNewContent(newContent) {
     $builderContextSignal.content = newContentValue;
 }
 function processMessage(event) {
+    if (!isFromTrustedHost(trustedHosts, event)) {
+        return;
+    }
     const { data } = event;
     if (data) {
         switch (data.type) {
@@ -193,6 +198,11 @@ function elementRef_onIniteditingbldr(event) {
                 enrich: enrich,
             }
             : {}),
+        ...(trustedHosts
+            ? {
+                trustedHosts: trustedHosts,
+            }
+            : {}),
     });
     Object.values($builderContextSignal.componentInfos).forEach((registeredComponent) => {
         const message = createRegisterComponentMessage(registeredComponent);

package/lib/node/components/content/components/enable-editor.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
     props: {
         builderContextSignal: BuilderEditorProps["builderContextSignal"];
         contentWrapper?: BuilderEditorProps["contentWrapper"];
+        trustedHosts?: BuilderEditorProps["trustedHosts"];
         model?: BuilderEditorProps["model"];
         context?: BuilderEditorProps["context"];
         canTrack?: BuilderEditorProps["canTrack"];

package/lib/node/components/content/content.svelte

@@ -27,6 +27,7 @@ export let enrich = undefined;
 export let showContent;
 export let contentWrapper = undefined;
 export let contentWrapperProps = undefined;
+export let trustedHosts = undefined;
 export let isSsrAbTest;
 function contentSetState(newRootState) {
     $builderContextSignal.rootState = newRootState;
@@ -104,6 +105,7 @@ setContext(ComponentsContext.key, {
   {builderContextSignal}
   {contentWrapper}
   {contentWrapperProps}
+  {trustedHosts}
   {...{}}
 >
   {#if isSsrAbTest}

package/lib/node/components/content/content.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];
         contentWrapperProps?: ContentProps["contentWrapperProps"];
+        trustedHosts?: ContentProps["trustedHosts"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
     };
     events: {

package/lib/node/components/content-variants/content-variants.svelte

@@ -24,6 +24,7 @@ export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
 export let contentWrapper = undefined;
 export let contentWrapperProps = undefined;
+export let trustedHosts = undefined;
 $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(getVariants(content).map((value) => ({
         id: value.testVariationId,
@@ -89,6 +90,7 @@ onMount(() => {
       {blocksWrapperProps}
       {contentWrapper}
       {contentWrapperProps}
+      {trustedHosts}
     />
   {/each}
 {/if}
@@ -112,4 +114,5 @@ onMount(() => {
   {blocksWrapperProps}
   {contentWrapper}
   {contentWrapperProps}
+  {trustedHosts}
 />

package/lib/node/components/content-variants/content-variants.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
         blocksWrapperProps?: VariantsProviderProps["blocksWrapperProps"];
         contentWrapper?: VariantsProviderProps["contentWrapper"];
         contentWrapperProps?: VariantsProviderProps["contentWrapperProps"];
+        trustedHosts?: VariantsProviderProps["trustedHosts"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/components/content-variants/content-variants.types.d.ts

@@ -62,4 +62,8 @@ export interface ContentVariantsPrps {
      * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
      */
     blocksWrapperProps?: any;
+    /**
+     * List of hosts to allow editing content from.
+     */
+    trustedHosts?: string[];
 }

package/lib/node/components/dynamic-renderer/dynamic-renderer.helpers.d.ts

@@ -0,0 +1 @@
+export declare const isEmptyElement: (tagName: any) => boolean;

package/lib/node/components/dynamic-renderer/dynamic-renderer.helpers.js

@@ -0,0 +1,7 @@
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+export const isEmptyElement = (tagName) => {
+    return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.has(tagName.toLowerCase());
+};

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

@@ -0,0 +1,28 @@
+<script>import { isEmptyElement } from "./dynamic-renderer.helpers.js";
+import { setAttrs } from "../../blocks/helpers.js";
+export let attributes;
+export let TagName;
+export let actionAttributes;
+</script>
+
+{#if !isEmptyElement(TagName)}
+  {#if typeof TagName === "string"}
+    <svelte:element
+      this={TagName}
+      {...attributes}
+      use:setAttrs={actionAttributes}
+    >
+      <slot />
+    </svelte:element>
+  {:else}
+    <svelte:component this={TagName} {...attributes} {...actionAttributes}>
+      <slot />
+    </svelte:component>
+  {/if}
+{:else}
+  <svelte:element
+    this={TagName}
+    {...attributes}
+    use:setAttrs={actionAttributes}
+  />
+{/if}

package/lib/node/components/dynamic-renderer/dynamic-renderer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { PropsWithChildren } from "../../types/typescript.js";
+declare const __propDef: {
+    props: {
+        attributes: any;
+        TagName: any;
+        actionAttributes: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DynamicRendererProps = typeof __propDef.props;
+export type DynamicRendererEvents = typeof __propDef.events;
+export type DynamicRendererSlots = typeof __propDef.slots;
+export default class DynamicRenderer extends SvelteComponent<DynamicRendererProps, DynamicRendererEvents, DynamicRendererSlots> {
+}
+export {};

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

@@ -14,6 +14,8 @@ import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.
 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';
+import { default as Slot } from '../blocks/slot/slot.svelte';
 import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
 import { default as Symbol } from '../blocks/symbol/symbol.svelte';
 import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
@@ -57,4 +59,7 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Video,
         ...videoComponentInfo
+    }, {
+        component: Slot,
+        ...slotComponentInfo
     }];

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.0";
+export declare const SDK_VERSION = "0.12.2";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.0";
+export const SDK_VERSION = "0.12.2";

package/lib/node/functions/is-from-trusted-host.d.ts

@@ -0,0 +1,3 @@
+export declare function isFromTrustedHost(trustedHosts: string[] | undefined, e: {
+    origin: string;
+}): boolean;

package/lib/node/functions/is-from-trusted-host.js

@@ -0,0 +1,5 @@
+const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.io', 'localhost', 'qa.builder.io'];
+export function isFromTrustedHost(trustedHosts, e) {
+    const url = new URL(e.origin), hostname = url.hostname;
+    return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
+}

package/lib/node/scripts/init-editing.d.ts

@@ -3,4 +3,5 @@ export declare const setupBrowserForEditing: (options?: {
     enrich?: boolean;
     includeRefs?: boolean;
     locale?: string;
+    trustedHosts?: string[];
 }) => void;

package/lib/node/scripts/init-editing.js

@@ -1,6 +1,7 @@
 import { SDK_VERSION } from '../constants/sdk-version.js';
 import { TARGET } from '../constants/target.js';
 import { isBrowser } from '../functions/is-browser.js';
+import { isFromTrustedHost } from '../functions/is-from-trusted-host.js';
 import { register } from '../functions/register.js';
 export const registerInsertMenu = () => {
     register('insertMenu', {
@@ -50,7 +51,11 @@ export const setupBrowserForEditing = (options = {}) => {
                 options
             }
         }, '*');
-        window.addEventListener('message', ({ data }) => {
+        window.addEventListener('message', (event) => {
+            if (!isFromTrustedHost(options.trustedHosts, event)) {
+                return;
+            }
+            const { data } = event;
             if (!data?.type) {
                 return;
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "type": "module",
   "files": [
     "lib",

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

@@ -0,0 +1,15 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Slot',
+  isRSC: true,
+  description: 'Allow child blocks to be inserted into this content when used as a Symbol',
+  docsLink: 'https://www.builder.io/c/docs/symbols-with-blocks',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56',
+  // Maybe wrap this for canHaveChildren so bind children to this hm
+  inputs: [{
+    name: 'name',
+    type: 'string',
+    required: true,
+    defaultValue: 'children'
+  }]
+}

package/src/blocks/slot/slot.svelte

@@ -0,0 +1,45 @@
+<script context="module" lang="ts">
+  export interface DropzoneProps {
+    name: string;
+    builderBlock: BuilderBlock;
+    builderContext: Writable<BuilderContextInterface>;
+    attributes: any;
+  }
+</script>
+
+<script lang="ts">
+  import Blocks from "../../components/blocks/blocks.svelte";
+  import type { BuilderContextInterface } from "../../context/types.js";
+  import { deoptSignal } from "../../functions/deopt.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
+  import type { Writable } from "svelte/store";
+
+  export let builderContext: DropzoneProps["builderContext"];
+  export let name: DropzoneProps["name"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
+    });
+  }
+</script>
+
+<div
+  use:mitosis_styling={{
+    pointerEvents: "auto",
+  }}
+  {...!$builderContext.context?.symbolId && {
+    "builder-slot": name,
+  }}
+>
+  <Blocks
+    parent={$builderContext.context?.symbolId}
+    path={`symbol.data.${name}`}
+    context={builderContext}
+    blocks={$builderContext.rootState?.[name]}
+  />
+</div>

package/src/blocks/symbol/symbol.svelte

@@ -16,6 +16,7 @@
   export let symbol: PropsWithBuilderData<SymbolProps>["symbol"] = undefined;
   export let dynamic: PropsWithBuilderData<SymbolProps>["dynamic"] = undefined;
   export let builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
+  export let builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
   export let builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
 
   function setContent() {
@@ -62,7 +63,10 @@
     __isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
-    context={$builderContext.context}
+    context={{
+      ...$builderContext.context,
+      symbolId: builderBlock?.id,
+    }}
     customComponents={Object.values(builderComponents)}
     data={{
       ...symbol?.data,

package/src/components/block/block.helpers.ts

@@ -3,14 +3,6 @@ import { evaluate } from '../../functions/evaluate/index.js';
 import { getProcessedBlock } from '../../functions/get-processed-block.js';
 import type { BuilderBlock } from '../../types/builder-block.js';
 import type { RepeatData } from './types.js';
-
-/**
- * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
- */
-const EMPTY_HTML_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
-export const isEmptyHtmlElement = (tagName: unknown) => {
-  return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
-};
 export const getComponent = ({
   block,
   context,

package/src/components/block/block.svelte

@@ -18,11 +18,7 @@
   import { getBlockProperties } from "../../functions/get-block-properties.js";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
   import type { BuilderBlock } from "../../types/builder-block.js";
-  import {
-    getComponent,
-    getRepeatItemData,
-    isEmptyHtmlElement,
-  } from "./block.helpers.js";
+  import { getComponent, getRepeatItemData } from "./block.helpers.js";
   import BlockStyles from "./components/block-styles.svelte";
   import BlockWrapper from "./components/block-wrapper.svelte";
   import type { ComponentProps } from "./components/component-ref/component-ref.helpers.js";
@@ -115,32 +111,8 @@
   <BlockStyles {block} context={$context} />
 
   {#if !blockComponent?.()?.noWrap}
-    {#if isEmptyHtmlElement(Tag())}
-      <BlockWrapper
-        Wrapper={Tag()}
-        block={processedBlock()}
-        {context}
-        hasChildren={false}
-      />
-    {/if}
-
-    {#if !isEmptyHtmlElement(Tag()) && repeatItem()}
-      {#each repeatItem() as data, index (index)}
-        <RepeatedBlock
-          repeatContext={data.context}
-          block={data.block}
-          {registeredComponents}
-        />
-      {/each}
-    {/if}
-
-    {#if !isEmptyHtmlElement(Tag()) && !repeatItem()}
-      <BlockWrapper
-        Wrapper={Tag()}
-        block={processedBlock()}
-        {context}
-        hasChildren={true}
-      >
+    {#if !repeatItem()}
+      <BlockWrapper Wrapper={Tag()} block={processedBlock()} {context}>
         <ComponentRef
           componentRef={componentRefProps().componentRef}
           componentOptions={componentRefProps().componentOptions}
@@ -160,6 +132,14 @@
           />
         {/each}
       </BlockWrapper>
+    {:else}
+      {#each repeatItem() as data, index (index)}
+        <RepeatedBlock
+          repeatContext={data.context}
+          block={data.block}
+          {registeredComponents}
+        />
+      {/each}
     {/if}
   {:else}
     <ComponentRef

package/src/components/block/components/block-wrapper.svelte

@@ -1,21 +1,12 @@
 <script context="module" lang="ts">
-  /**
-   * This import is used by the Svelte SDK. Do not remove.
-   */
-
   type BlockWrapperProps = {
     Wrapper: string;
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
-    hasChildren: boolean;
   };
 
   /**
    * This component renders a block's wrapper HTML element (from the block's `tagName` property).
-   * It reuses the exact same logic as the `InteractiveElement` component, but we need to have 2 separate components for
-   * Svelte's sake, as it needs to know at compile-time whether to use:
-   *  - `<svelte:element>` (for HTML element) or
-   *  - `<svelte:component>` (for custom components)
    */
 </script>
 
@@ -25,47 +16,28 @@
   import { getBlockProperties } from "../../../functions/get-block-properties.js";
   import type { BuilderBlock } from "../../../types/builder-block.js";
   import type { PropsWithChildren } from "../../../types/typescript.js";
-  import { setAttrs } from "../../../blocks/helpers.js";
+  import DynamicRenderer from "../../dynamic-renderer/dynamic-renderer.svelte";
   import type { Writable } from "svelte/store";
 
   export let Wrapper: PropsWithChildren<BlockWrapperProps>["Wrapper"];
   export let block: PropsWithChildren<BlockWrapperProps>["block"];
   export let context: PropsWithChildren<BlockWrapperProps>["context"];
-  export let hasChildren: PropsWithChildren<BlockWrapperProps>["hasChildren"];
 </script>
 
-{#if hasChildren}
-  <svelte:element
-    this={Wrapper}
-    {...getBlockProperties({
-      block: block,
-      context: $context,
-    })}
-    use:setAttrs={getBlockActions({
-      block: block,
-      rootState: $context.rootState,
-      rootSetState: $context.rootSetState,
-      localState: $context.localState,
-      context: $context.context,
-      stripPrefix: true,
-    })}
-  >
-    <slot />
-  </svelte:element>
-{:else}
-  <svelte:element
-    this={Wrapper}
-    {...getBlockProperties({
-      block: block,
-      context: $context,
-    })}
-    use:setAttrs={getBlockActions({
-      block: block,
-      rootState: $context.rootState,
-      rootSetState: $context.rootSetState,
-      localState: $context.localState,
-      context: $context.context,
-      stripPrefix: true,
-    })}
-  />
-{/if}
+<DynamicRenderer
+  TagName={Wrapper}
+  attributes={getBlockProperties({
+    block: block,
+    context: $context,
+  })}
+  actionAttributes={getBlockActions({
+    block: block,
+    rootState: $context.rootState,
+    rootSetState: $context.rootSetState,
+    localState: $context.localState,
+    context: $context.context,
+    stripPrefix: true,
+  })}
+>
+  <slot />
+</DynamicRenderer>

package/src/components/content/components/enable-editor.svelte

@@ -24,6 +24,7 @@
   import { fetch } from "../../../functions/get-fetch.js";
   import { isBrowser } from "../../../functions/is-browser.js";
   import { isEditing } from "../../../functions/is-editing.js";
+  import { isFromTrustedHost } from "../../../functions/is-from-trusted-host.js";
   import { isPreviewing } from "../../../functions/is-previewing.js";
   import { createRegisterComponentMessage } from "../../../functions/register-component.js";
   import { _track } from "../../../functions/track/index.js";
@@ -46,6 +47,7 @@
 
   export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
   export let contentWrapper: BuilderEditorProps["contentWrapper"] = undefined;
+  export let trustedHosts: BuilderEditorProps["trustedHosts"] = undefined;
   export let model: BuilderEditorProps["model"] = undefined;
   export let context: BuilderEditorProps["context"] = undefined;
   export let canTrack: BuilderEditorProps["canTrack"] = undefined;
@@ -90,6 +92,9 @@
     $builderContextSignal.content = newContentValue;
   }
   function processMessage(event: MessageEvent) {
+    if (!isFromTrustedHost(trustedHosts, event)) {
+      return;
+    }
     const { data } = event;
     if (data) {
       switch (data.type) {
@@ -234,6 +239,11 @@
             enrich: enrich,
           }
         : {}),
+      ...(trustedHosts
+        ? {
+            trustedHosts: trustedHosts,
+          }
+        : {}),
     });
     Object.values<ComponentInfo>($builderContextSignal.componentInfos).forEach(
       (registeredComponent) => {

package/src/components/content/content.svelte

@@ -45,6 +45,7 @@
   export let contentWrapper: ContentProps["contentWrapper"] = undefined;
   export let contentWrapperProps: ContentProps["contentWrapperProps"] =
     undefined;
+  export let trustedHosts: ContentProps["trustedHosts"] = undefined;
   export let isSsrAbTest: ContentProps["isSsrAbTest"];
 
   function contentSetState(newRootState: BuilderRenderState) {
@@ -131,6 +132,7 @@
   {builderContextSignal}
   {contentWrapper}
   {contentWrapperProps}
+  {trustedHosts}
   {...{}}
 >
   {#if isSsrAbTest}