@builder.io/sdk-solid 0.12.1 → 0.12.3

package/lib/browser/index.jsx

@@ -1,12 +1,10 @@
 // src/blocks/button/button.tsx
 import { Show } from "solid-js";
-import { css } from "solid-styled-components";
 function Button(props) {
   return <Show
     fallback={<button
-      class={props.attributes.class + " " + css({
-        all: "unset"
-      })}
+      class={`builder-button ${props.attributes.class}`}
+      role="button"
       {...{}}
       {...props.attributes}
       style={props.attributes.style}
@@ -24,7 +22,7 @@ var button_default = Button;
 
 // src/blocks/columns/columns.tsx
 import { Show as Show7, For as For4, createSignal as createSignal5 } from "solid-js";
-import { css as css3 } from "solid-styled-components";
+import { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
 import { useContext, Show as Show6, For as For3 } from "solid-js";
@@ -323,10 +321,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,
@@ -501,7 +495,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -544,14 +538,10 @@ function BlockStyles(props) {
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   }
-  return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default styles={css5()} /></Show2>;
+  return <Show2 when={TARGET !== "reactNative" && css4() && canShowBlock()}><Inlined_styles_default styles={css4()} /></Show2>;
 }
 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);
@@ -638,31 +628,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,
@@ -670,8 +678,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;
 
@@ -850,14 +857,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}
@@ -865,41 +866,40 @@ 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;
 
 // src/components/blocks/blocks-wrapper.tsx
 import { Dynamic as Dynamic4 } from "solid-js/web";
-import { css as css2 } from "solid-styled-components";
+import { css } from "solid-styled-components";
 function BlocksWrapper(props) {
   function className() {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -933,7 +933,7 @@ function BlocksWrapper(props) {
     }
   }
   return <Dynamic4
-    class={className() + " " + css2({
+    class={className() + " " + css({
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
@@ -1074,7 +1074,7 @@ function Columns(props) {
       `;
   }
   return <div
-    class={`builder-columns ${props.builderBlock.id}-breakpoints ` + css3({
+    class={`builder-columns ${props.builderBlock.id}-breakpoints ` + css2({
       display: "flex",
       lineHeight: "normal"
     })}
@@ -1085,7 +1085,7 @@ function Columns(props) {
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
       return <div
-        class={"builder-column " + css3({
+        class={"builder-column " + css2({
           display: "flex",
           flexDirection: "column",
           alignItems: "stretch"
@@ -1116,7 +1116,7 @@ var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
 import { Show as Show8 } from "solid-js";
-import { css as css4 } from "solid-styled-components";
+import { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1206,7 +1206,7 @@ function Image(props) {
     <picture>
       <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
       <img
-        class={"builder-image" + (props.className ? " " + props.className : "") + " " + css4({
+        class={"builder-image" + (props.className ? " " + props.className : "") + " " + css3({
           opacity: "1",
           transition: "opacity 0.2s ease-in-out"
         })}
@@ -1226,7 +1226,7 @@ function Image(props) {
     <Show8
       when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
     ><div
-      class={"builder-image-sizer " + css4({
+      class={"builder-image-sizer " + css3({
         width: "100%",
         pointerEvents: "none",
         fontSize: "0"
@@ -1237,7 +1237,7 @@ function Image(props) {
     /></Show8>
     <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
     <Show8 when={!props.fitContent && props.children}><div
-      class={css4({
+      class={css3({
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",
@@ -2713,6 +2713,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()) {
@@ -2961,7 +2968,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 = {};
@@ -3038,9 +3045,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;
       }
@@ -3138,6 +3149,9 @@ function EnableEditor(props) {
     }));
   }
   function processMessage(event) {
+    if (!isFromTrustedHost(props.trustedHosts, event)) {
+      return;
+    }
     const { data } = event;
     if (data) {
       switch (data.type) {
@@ -3268,6 +3282,9 @@ function EnableEditor(props) {
           } : {},
           ...props.enrich ? {
             enrich: props.enrich
+          } : {},
+          ...props.trustedHosts ? {
+            trustedHosts: props.trustedHosts
           } : {}
         });
         Object.values(
@@ -3462,6 +3479,10 @@ ${getFontCss({
       customFonts: props.customFonts
     })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }
@@ -3606,6 +3627,7 @@ function ContentComponent(props) {
     builderContextSignal={builderContextSignal()}
     contentWrapper={props.contentWrapper}
     contentWrapperProps={props.contentWrapperProps}
+    trustedHosts={props.trustedHosts}
     {...{
       setBuilderContextSignal
     }}
@@ -3688,6 +3710,7 @@ function ContentVariants(props) {
           blocksWrapperProps={props.blocksWrapperProps}
           contentWrapper={props.contentWrapper}
           contentWrapperProps={props.contentWrapperProps}
+          trustedHosts={props.trustedHosts}
         />;
       }}</For5>
     </Show12>
@@ -3710,6 +3733,7 @@ function ContentVariants(props) {
       blocksWrapperProps={props.blocksWrapperProps}
       contentWrapper={props.contentWrapper}
       contentWrapperProps={props.contentWrapperProps}
+      trustedHosts={props.trustedHosts}
     />
   </>;
 }