@builder.io/sdk-svelte 0.12.1 → 0.12.3

package/lib/browser/blocks/button/button.svelte

@@ -29,16 +29,11 @@ function mitosis_styling(node, vars) {
 {: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/lib/browser/components/block/block.helpers.d.ts

@@ -1,7 +1,6 @@
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
 import type { BuilderBlock } from '../../types/builder-block.js';
 import type { RepeatData } from './types.js';
-export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
 export declare const getComponent: ({ block, context, registeredComponents }: {
     block: BuilderBlock;
     context: BuilderContextInterface;

package/lib/browser/components/block/block.helpers.js

@@ -1,12 +1,5 @@
 import { evaluate } from '../../functions/evaluate/index.js';
 import { getProcessedBlock } from '../../functions/get-processed-block.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) => {
-    return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
-};
 export const getComponent = ({ block, context, registeredComponents }) => {
     const componentName = getProcessedBlock({
         block,

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

@@ -5,7 +5,7 @@ import "../../functions/extract-text-styles.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-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 ComponentRef from "./components/component-ref/component-ref.svelte";
@@ -91,32 +91,8 @@ let childrenContext = writable($context);
   <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}
@@ -136,6 +112,14 @@ let childrenContext = writable($context);
           />
         {/each}
       </BlockWrapper>
+    {:else}
+      {#each repeatItem() as data, index (index)}
+        <RepeatedBlock
+          repeatContext={data.context}
+          block={data.block}
+          {registeredComponents}
+        />
+      {/each}
     {/if}
   {:else}
     <ComponentRef

package/lib/browser/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/browser/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/browser/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/browser/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/browser/components/content/components/styles.svelte

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

package/lib/browser/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/browser/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/browser/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/browser/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/browser/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/browser/components/dynamic-renderer/dynamic-renderer.helpers.d.ts

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

package/lib/browser/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/browser/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/browser/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/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.1";
+export declare const SDK_VERSION = "0.12.3";

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

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.1";
+export const SDK_VERSION = "0.12.3";

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

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

package/lib/browser/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/browser/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/browser/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/lib/edge/blocks/button/button.svelte

@@ -29,16 +29,11 @@ function mitosis_styling(node, vars) {
 {: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/lib/edge/components/block/block.helpers.d.ts

@@ -1,7 +1,6 @@
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
 import type { BuilderBlock } from '../../types/builder-block.js';
 import type { RepeatData } from './types.js';
-export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
 export declare const getComponent: ({ block, context, registeredComponents }: {
     block: BuilderBlock;
     context: BuilderContextInterface;

package/lib/edge/components/block/block.helpers.js

@@ -1,12 +1,5 @@
 import { evaluate } from '../../functions/evaluate/index.js';
 import { getProcessedBlock } from '../../functions/get-processed-block.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) => {
-    return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
-};
 export const getComponent = ({ block, context, registeredComponents }) => {
     const componentName = getProcessedBlock({
         block,

package/lib/edge/components/block/block.svelte

@@ -5,7 +5,7 @@ import "../../functions/extract-text-styles.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-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 ComponentRef from "./components/component-ref/component-ref.svelte";
@@ -91,32 +91,8 @@ let childrenContext = writable($context);
   <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}
@@ -136,6 +112,14 @@ let childrenContext = writable($context);
           />
         {/each}
       </BlockWrapper>
+    {:else}
+      {#each repeatItem() as data, index (index)}
+        <RepeatedBlock
+          repeatContext={data.context}
+          block={data.block}
+          {registeredComponents}
+        />
+      {/each}
     {/if}
   {:else}
     <ComponentRef

package/lib/edge/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/edge/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>;