@builder.io/sdk-solid 0.12.1 → 0.12.3

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,10 +1,10 @@
-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';
 
 // src/blocks/button/button.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<a>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button role=button>`);
 function Button(props) {
   return createComponent(Show, {
     get fallback() {
@@ -12,9 +12,7 @@ function Button(props) {
         const _el$2 = _tmpl$2();
         spread(_el$2, mergeProps({
           get ["class"]() {
-            return props.attributes.class + " " + css({
-              all: "unset"
-            });
+            return `builder-button ${props.attributes.class}`;
           }
         }, {}, () => props.attributes, {
           get style() {
@@ -333,10 +331,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,
@@ -522,7 +516,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -559,12 +553,12 @@ function BlockStyles(props) {
   }
   return createComponent(Show, {
     get when() {
-      return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
+      return memo(() => !!(TARGET !== "reactNative" && css4()))() && canShowBlock();
     },
     get children() {
       return createComponent(inlined_styles_default, {
         get styles() {
-          return css5();
+          return css4();
         }
       });
     }
@@ -658,48 +652,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 +966,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 +988,9 @@ function Block(props) {
                   });
                 }
               });
-            }
-          }), createComponent(Show, {
+            },
             get when() {
-              return memo(() => !!!isEmptyHtmlElement(Tag()))() && !repeatItem();
+              return !repeatItem();
             },
             get children() {
               return createComponent(block_wrapper_default, {
@@ -999,7 +1003,6 @@ function Block(props) {
                 get context() {
                   return props.context;
                 },
-                hasChildren: true,
                 get children() {
                   return [createComponent(component_ref_default, {
                     get componentRef() {
@@ -1049,7 +1052,7 @@ function Block(props) {
                 }
               });
             }
-          })];
+          });
         }
       })];
     }
@@ -3044,6 +3047,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 +3305,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.1";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -3373,9 +3383,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 +3485,9 @@ function EnableEditor(props) {
     }));
   }
   function processMessage(event) {
+    if (!isFromTrustedHost(props.trustedHosts, event)) {
+      return;
+    }
     const {
       data
     } = event;
@@ -3602,6 +3619,9 @@ function EnableEditor(props) {
           } : {},
           ...props.enrich ? {
             enrich: props.enrich
+          } : {},
+          ...props.trustedHosts ? {
+            trustedHosts: props.trustedHosts
           } : {}
         });
         Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
@@ -3798,6 +3818,10 @@ ${getFontCss({
     customFonts: props.customFonts
   })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }
@@ -3969,6 +3993,9 @@ function ContentComponent(props) {
         },
         get contentWrapperProps() {
           return props.contentWrapperProps;
+        },
+        get trustedHosts() {
+          return props.trustedHosts;
         }
       }, {
         setBuilderContextSignal
@@ -4128,6 +4155,9 @@ function ContentVariants(props) {
             },
             get contentWrapperProps() {
               return props.contentWrapperProps;
+            },
+            get trustedHosts() {
+              return props.trustedHosts;
             }
           });
         }
@@ -4182,6 +4212,9 @@ function ContentVariants(props) {
     },
     get contentWrapperProps() {
       return props.contentWrapperProps;
+    },
+    get trustedHosts() {
+      return props.trustedHosts;
     }
   }))];
 }