@builder.io/sdk-svelte 0.12.0 → 0.12.2

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/builder-registered-components.ts

@@ -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';
@@ -59,4 +61,7 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Video,
   ...videoComponentInfo
+}, {
+  component: Slot,
+  ...slotComponentInfo
 }]

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.0"
+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;
       }