@builder.io/sdk-solid 0.12.1 → 0.12.2

package/dist/index.d.ts

@@ -635,6 +635,10 @@ interface ContentVariantsPrps {
      * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
      */
     blocksWrapperProps?: any;
+    /**
+     * List of hosts to allow editing content from.
+     */
+    trustedHosts?: string[];
 }
 
 type VariantsProviderProps = ContentVariantsPrps & {

package/lib/browser/dev.js

@@ -1,4 +1,4 @@
-import { createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, memo, Dynamic, use } from 'solid-js/web';
+import { createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, Dynamic, memo, use } from 'solid-js/web';
 import { createContext, Show, useContext, For, createSignal, onMount, createEffect, on } from 'solid-js';
 import { css } from 'solid-styled-components';
 
@@ -333,10 +333,6 @@ function getProcessedBlock({
 }
 
 // src/components/block/block.helpers.ts
-var EMPTY_HTML_ELEMENTS = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"];
-var isEmptyHtmlElement = (tagName) => {
-  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
-};
 var getComponent = ({
   block,
   context,
@@ -658,48 +654,80 @@ function getStyleAttribute(style) {
   }
 }
 
-// src/components/block/components/block-wrapper.tsx
-function BlockWrapper(props) {
+// src/components/dynamic-renderer/dynamic-renderer.helpers.ts
+var EMPTY_HTML_ELEMENTS = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]);
+var isEmptyElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.has(tagName.toLowerCase());
+};
+
+// src/components/dynamic-renderer/dynamic-renderer.tsx
+function DynamicRenderer(props) {
   return createComponent(Show, {
     get fallback() {
-      return createComponent(Dynamic, mergeProps(() => getBlockProperties({
-        block: props.block,
-        context: props.context
-      }), () => getBlockActions({
-        block: props.block,
-        rootState: props.context.rootState,
-        rootSetState: props.context.rootSetState,
-        localState: props.context.localState,
-        context: props.context.context,
-        stripPrefix: true
-      }), {
+      return createComponent(Dynamic, mergeProps(() => props.attributes, () => props.actionAttributes, {
         get component() {
-          return props.Wrapper;
+          return props.TagName;
         }
       }));
     },
     get when() {
-      return props.hasChildren;
+      return !isEmptyElement(props.TagName);
     },
     get children() {
-      return createComponent(Dynamic, mergeProps(() => getBlockProperties({
+      return createComponent(Show, {
+        get fallback() {
+          return createComponent(Dynamic, mergeProps(() => props.attributes, () => props.actionAttributes, {
+            get component() {
+              return props.TagName;
+            },
+            get children() {
+              return props.children;
+            }
+          }));
+        },
+        get when() {
+          return typeof props.TagName === "string";
+        },
+        get children() {
+          return createComponent(Dynamic, mergeProps(() => props.attributes, () => props.actionAttributes, {
+            get component() {
+              return props.TagName;
+            },
+            get children() {
+              return props.children;
+            }
+          }));
+        }
+      });
+    }
+  });
+}
+var dynamic_renderer_default = DynamicRenderer;
+
+// src/components/block/components/block-wrapper.tsx
+function BlockWrapper(props) {
+  return createComponent(dynamic_renderer_default, {
+    get TagName() {
+      return props.Wrapper;
+    },
+    get attributes() {
+      return getBlockProperties({
         block: props.block,
         context: props.context
-      }), () => getBlockActions({
+      });
+    },
+    get actionAttributes() {
+      return getBlockActions({
         block: props.block,
         rootState: props.context.rootState,
         rootSetState: props.context.rootSetState,
         localState: props.context.localState,
         context: props.context.context,
         stripPrefix: true
-      }), {
-        get component() {
-          return props.Wrapper;
-        },
-        get children() {
-          return props.children;
-        }
-      }));
+      });
+    },
+    get children() {
+      return props.children;
     }
   });
 }
@@ -940,29 +968,8 @@ function Block(props) {
           return !blockComponent()?.noWrap;
         },
         get children() {
-          return [createComponent(Show, {
-            get when() {
-              return isEmptyHtmlElement(Tag());
-            },
-            get children() {
-              return createComponent(block_wrapper_default, {
-                get Wrapper() {
-                  return Tag();
-                },
-                get block() {
-                  return processedBlock();
-                },
-                get context() {
-                  return props.context;
-                },
-                hasChildren: false
-              });
-            }
-          }), createComponent(Show, {
-            get when() {
-              return memo(() => !!!isEmptyHtmlElement(Tag()))() && repeatItem();
-            },
-            get children() {
+          return createComponent(Show, {
+            get fallback() {
               return createComponent(For, {
                 get each() {
                   return repeatItem();
@@ -983,10 +990,9 @@ function Block(props) {
                   });
                 }
               });
-            }
-          }), createComponent(Show, {
+            },
             get when() {
-              return memo(() => !!!isEmptyHtmlElement(Tag()))() && !repeatItem();
+              return !repeatItem();
             },
             get children() {
               return createComponent(block_wrapper_default, {
@@ -999,7 +1005,6 @@ function Block(props) {
                 get context() {
                   return props.context;
                 },
-                hasChildren: true,
                 get children() {
                   return [createComponent(component_ref_default, {
                     get componentRef() {
@@ -1049,7 +1054,7 @@ function Block(props) {
                 }
               });
             }
-          })];
+          });
         }
       })];
     }
@@ -3044,6 +3049,13 @@ async function fetchEntries(options) {
 }
 var getAllContent = fetchEntries;
 
+// src/functions/is-from-trusted-host.ts
+var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
+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;
+}
+
 // src/functions/is-previewing.ts
 function isPreviewing() {
   if (!isBrowser()) {
@@ -3295,7 +3307,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.1";
+var SDK_VERSION = "0.12.2";
 
 // src/functions/register.ts
 var registry = {};
@@ -3373,9 +3385,13 @@ var setupBrowserForEditing = (options = {}) => {
         options
       }
     }, "*");
-    window.addEventListener("message", ({
-      data
-    }) => {
+    window.addEventListener("message", (event) => {
+      if (!isFromTrustedHost(options.trustedHosts, event)) {
+        return;
+      }
+      const {
+        data
+      } = event;
       if (!data?.type) {
         return;
       }
@@ -3471,6 +3487,9 @@ function EnableEditor(props) {
     }));
   }
   function processMessage(event) {
+    if (!isFromTrustedHost(props.trustedHosts, event)) {
+      return;
+    }
     const {
       data
     } = event;
@@ -3602,6 +3621,9 @@ function EnableEditor(props) {
           } : {},
           ...props.enrich ? {
             enrich: props.enrich
+          } : {},
+          ...props.trustedHosts ? {
+            trustedHosts: props.trustedHosts
           } : {}
         });
         Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
@@ -3969,6 +3991,9 @@ function ContentComponent(props) {
         },
         get contentWrapperProps() {
           return props.contentWrapperProps;
+        },
+        get trustedHosts() {
+          return props.trustedHosts;
         }
       }, {
         setBuilderContextSignal
@@ -4128,6 +4153,9 @@ function ContentVariants(props) {
             },
             get contentWrapperProps() {
               return props.contentWrapperProps;
+            },
+            get trustedHosts() {
+              return props.trustedHosts;
             }
           });
         }
@@ -4182,6 +4210,9 @@ function ContentVariants(props) {
     },
     get contentWrapperProps() {
       return props.contentWrapperProps;
+    },
+    get trustedHosts() {
+      return props.trustedHosts;
     }
   }))];
 }

package/lib/browser/dev.jsx

@@ -325,10 +325,6 @@ function getProcessedBlock({
 }
 
 // src/components/block/block.helpers.ts
-var EMPTY_HTML_ELEMENTS = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"];
-var isEmptyHtmlElement = (tagName) => {
-  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
-};
 var getComponent = ({
   block,
   context,
@@ -553,10 +549,6 @@ function BlockStyles(props) {
 }
 var Block_styles_default = BlockStyles;
 
-// src/components/block/components/block-wrapper.tsx
-import { Show as Show3 } from "solid-js";
-import { Dynamic } from "solid-js/web";
-
 // src/functions/event-handler-name.ts
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
@@ -643,31 +635,49 @@ function getStyleAttribute(style) {
   }
 }
 
-// src/components/block/components/block-wrapper.tsx
-function BlockWrapper(props) {
+// src/components/dynamic-renderer/dynamic-renderer.tsx
+import { Show as Show3 } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+// src/components/dynamic-renderer/dynamic-renderer.helpers.ts
+var EMPTY_HTML_ELEMENTS = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]);
+var isEmptyElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.has(tagName.toLowerCase());
+};
+
+// src/components/dynamic-renderer/dynamic-renderer.tsx
+function DynamicRenderer(props) {
   return <Show3
     fallback={<Dynamic
-      {...getBlockProperties({
-        block: props.block,
-        context: props.context
-      })}
-      {...getBlockActions({
-        block: props.block,
-        rootState: props.context.rootState,
-        rootSetState: props.context.rootSetState,
-        localState: props.context.localState,
-        context: props.context.context,
-        stripPrefix: true
-      })}
-      component={props.Wrapper}
+      {...props.attributes}
+      {...props.actionAttributes}
+      component={props.TagName}
     />}
-    when={props.hasChildren}
+    when={!isEmptyElement(props.TagName)}
+  ><Show3
+    fallback={<Dynamic
+      {...props.attributes}
+      {...props.actionAttributes}
+      component={props.TagName}
+    >{props.children}</Dynamic>}
+    when={typeof props.TagName === "string"}
   ><Dynamic
-    {...getBlockProperties({
+    {...props.attributes}
+    {...props.actionAttributes}
+    component={props.TagName}
+  >{props.children}</Dynamic></Show3></Show3>;
+}
+var Dynamic_renderer_default = DynamicRenderer;
+
+// src/components/block/components/block-wrapper.tsx
+function BlockWrapper(props) {
+  return <Dynamic_renderer_default
+    TagName={props.Wrapper}
+    attributes={getBlockProperties({
       block: props.block,
       context: props.context
     })}
-    {...getBlockActions({
+    actionAttributes={getBlockActions({
       block: props.block,
       rootState: props.context.rootState,
       rootSetState: props.context.rootSetState,
@@ -675,8 +685,7 @@ function BlockWrapper(props) {
       context: props.context.context,
       stripPrefix: true
     })}
-    component={props.Wrapper}
-  >{props.children}</Dynamic></Show3>;
+  >{props.children}</Dynamic_renderer_default>;
 }
 var Block_wrapper_default = BlockWrapper;
 
@@ -855,14 +864,8 @@ function Block(props) {
         isInteractive={componentRefProps().isInteractive}
       />}
       when={!blockComponent()?.noWrap}
-    >
-      <Show5 when={isEmptyHtmlElement(Tag())}><Block_wrapper_default
-        Wrapper={Tag()}
-        block={processedBlock()}
-        context={props.context}
-        hasChildren={false}
-      /></Show5>
-      <Show5 when={!isEmptyHtmlElement(Tag()) && repeatItem()}><For2 each={repeatItem()}>{(data, _index) => {
+    ><Show5
+      fallback={<For2 each={repeatItem()}>{(data, _index) => {
         const index = _index();
         return <Repeated_block_default
           key={index}
@@ -870,34 +873,33 @@ function Block(props) {
           block={data.block}
           registeredComponents={props.registeredComponents}
         />;
-      }}</For2></Show5>
-      <Show5 when={!isEmptyHtmlElement(Tag()) && !repeatItem()}><Block_wrapper_default
-        Wrapper={Tag()}
-        block={processedBlock()}
-        context={props.context}
-        hasChildren={true}
-      >
-        <Component_ref_default
-          componentRef={componentRefProps().componentRef}
-          componentOptions={componentRefProps().componentOptions}
-          blockChildren={componentRefProps().blockChildren}
-          context={componentRefProps().context}
-          registeredComponents={componentRefProps().registeredComponents}
-          builderBlock={componentRefProps().builderBlock}
-          includeBlockProps={componentRefProps().includeBlockProps}
-          isInteractive={componentRefProps().isInteractive}
-        />
-        <For2 each={childrenWithoutParentComponent()}>{(child, _index) => {
-          const index = _index();
-          return <Block
-            key={child.id}
-            block={child}
-            context={childrenContext()}
-            registeredComponents={props.registeredComponents}
-          />;
-        }}</For2>
-      </Block_wrapper_default></Show5>
-    </Show5>
+      }}</For2>}
+      when={!repeatItem()}
+    ><Block_wrapper_default
+      Wrapper={Tag()}
+      block={processedBlock()}
+      context={props.context}
+    >
+      <Component_ref_default
+        componentRef={componentRefProps().componentRef}
+        componentOptions={componentRefProps().componentOptions}
+        blockChildren={componentRefProps().blockChildren}
+        context={componentRefProps().context}
+        registeredComponents={componentRefProps().registeredComponents}
+        builderBlock={componentRefProps().builderBlock}
+        includeBlockProps={componentRefProps().includeBlockProps}
+        isInteractive={componentRefProps().isInteractive}
+      />
+      <For2 each={childrenWithoutParentComponent()}>{(child, _index) => {
+        const index = _index();
+        return <Block
+          key={child.id}
+          block={child}
+          context={childrenContext()}
+          registeredComponents={props.registeredComponents}
+        />;
+      }}</For2>
+    </Block_wrapper_default></Show5></Show5>
   </Show5>;
 }
 var Block_default = Block;
@@ -2724,6 +2726,13 @@ async function fetchEntries(options) {
 }
 var getAllContent = fetchEntries;
 
+// src/functions/is-from-trusted-host.ts
+var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
+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;
+}
+
 // src/functions/is-previewing.ts
 function isPreviewing() {
   if (!isBrowser()) {
@@ -2975,7 +2984,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.1";
+var SDK_VERSION = "0.12.2";
 
 // src/functions/register.ts
 var registry = {};
@@ -3053,9 +3062,13 @@ var setupBrowserForEditing = (options = {}) => {
         options
       }
     }, "*");
-    window.addEventListener("message", ({
-      data
-    }) => {
+    window.addEventListener("message", (event) => {
+      if (!isFromTrustedHost(options.trustedHosts, event)) {
+        return;
+      }
+      const {
+        data
+      } = event;
       if (!data?.type) {
         return;
       }
@@ -3153,6 +3166,9 @@ function EnableEditor(props) {
     }));
   }
   function processMessage(event) {
+    if (!isFromTrustedHost(props.trustedHosts, event)) {
+      return;
+    }
     const { data } = event;
     if (data) {
       switch (data.type) {
@@ -3284,6 +3300,9 @@ function EnableEditor(props) {
           } : {},
           ...props.enrich ? {
             enrich: props.enrich
+          } : {},
+          ...props.trustedHosts ? {
+            trustedHosts: props.trustedHosts
           } : {}
         });
         Object.values(
@@ -3622,6 +3641,7 @@ function ContentComponent(props) {
     builderContextSignal={builderContextSignal()}
     contentWrapper={props.contentWrapper}
     contentWrapperProps={props.contentWrapperProps}
+    trustedHosts={props.trustedHosts}
     {...{
       setBuilderContextSignal
     }}
@@ -3704,6 +3724,7 @@ function ContentVariants(props) {
           blocksWrapperProps={props.blocksWrapperProps}
           contentWrapper={props.contentWrapper}
           contentWrapperProps={props.contentWrapperProps}
+          trustedHosts={props.trustedHosts}
         />;
       }}</For5>
     </Show12>
@@ -3726,6 +3747,7 @@ function ContentVariants(props) {
       blocksWrapperProps={props.blocksWrapperProps}
       contentWrapper={props.contentWrapper}
       contentWrapperProps={props.contentWrapperProps}
+      trustedHosts={props.trustedHosts}
     />
   </>;
 }