@builder.io/sdk-svelte 0.12.1 → 0.12.3

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.1",
+  "version": "0.12.3",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/button/button.svelte

@@ -32,16 +32,11 @@
 {:else}
   <button
     use:mitosis_styling={attributes.style}
+    role="button"
     {...filterAttrs(attributes, "on:", false)}
-    class={attributes.class + " button"}
+    class={`builder-button ${attributes.class}`}
     use:setAttrs={filterAttrs(attributes, "on:", true)}
   >
     {text}
   </button>
-{/if}
-
-<style>
-  .button {
-    all: unset;
-  }
-</style>
+{/if}

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/components/styles.svelte

@@ -24,6 +24,10 @@ ${getFontCss({
   customFonts: customFonts,
 })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

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.3"

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;
       }