@builder.io/sdk-svelte 0.12.1 → 0.12.2

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}

package/src/components/content-variants/content-variants.svelte

@@ -45,6 +45,7 @@
     undefined;
   export let contentWrapperProps: VariantsProviderProps["contentWrapperProps"] =
     undefined;
+  export let trustedHosts: VariantsProviderProps["trustedHosts"] = undefined;
 
   $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(
@@ -116,6 +117,7 @@
       {blocksWrapperProps}
       {contentWrapper}
       {contentWrapperProps}
+      {trustedHosts}
     />
   {/each}
 {/if}
@@ -139,4 +141,5 @@
   {blocksWrapperProps}
   {contentWrapper}
   {contentWrapperProps}
+  {trustedHosts}
 />

package/src/components/content-variants/content-variants.types.ts

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

package/src/components/dynamic-renderer/dynamic-renderer.helpers.ts

@@ -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: any): boolean => {
+  return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.has(tagName.toLowerCase());
+}

package/src/components/dynamic-renderer/dynamic-renderer.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { isEmptyElement } from "./dynamic-renderer.helpers.js";
+  import { setAttrs } from "../../blocks/helpers.js";
+  import type { PropsWithChildren } from "../../types/typescript.js";
+
+  export let attributes: PropsWithChildren<{
+    TagName: any;
+    attributes: any;
+    actionAttributes: any;
+  }>["attributes"];
+  export let TagName: PropsWithChildren<{
+    TagName: any;
+    attributes: any;
+    actionAttributes: any;
+  }>["TagName"];
+  export let actionAttributes: PropsWithChildren<{
+    TagName: any;
+    attributes: any;
+    actionAttributes: any;
+  }>["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/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.1"
+export const SDK_VERSION = "0.12.2"

package/src/functions/is-from-trusted-host.ts

@@ -0,0 +1,8 @@
+const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.io', 'localhost', 'qa.builder.io'];
+export function isFromTrustedHost(trustedHosts: string[] | undefined, e: {
+  origin: string;
+}): boolean {
+  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/src/scripts/init-editing.ts

@@ -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', {
@@ -30,6 +31,7 @@ export const setupBrowserForEditing = (options: {
   enrich?: boolean;
   includeRefs?: boolean;
   locale?: string;
+  trustedHosts?: string[];
 } = {}) => {
   if (isSetupForEditing) {
     return;
@@ -54,9 +56,13 @@ export const setupBrowserForEditing = (options: {
         options
       }
     }, '*');
-    window.addEventListener('message', ({
-      data
-    }) => {
+    window.addEventListener('message', (event: MessageEvent) => {
+      if (!isFromTrustedHost(options.trustedHosts, event)) {
+        return;
+      }
+      const {
+        data
+      } = event;
       if (!data?.type) {
         return;
       }