@builder.io/sdk-solid 0.12.0 → 0.12.2

package/lib/browser/index.jsx

@@ -323,10 +323,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,
@@ -548,10 +544,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);
@@ -638,31 +630,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 +680,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 +859,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,34 +868,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;
@@ -2089,8 +2091,42 @@ var componentInfo8 = {
   }]
 };
 
-// src/blocks/symbol/component-info.ts
+// src/blocks/slot/component-info.ts
 var componentInfo9 = {
+  name: "Slot",
+  isRSC: true,
+  description: "Allow child blocks to be inserted into this content when used as a Symbol",
+  docsLink: "https://www.builder.io/c/docs/symbols-with-blocks",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56",
+  // Maybe wrap this for canHaveChildren so bind children to this hm
+  inputs: [{
+    name: "name",
+    type: "string",
+    required: true,
+    defaultValue: "children"
+  }]
+};
+
+// src/blocks/slot/slot.tsx
+function Slot(props) {
+  return <div
+    style={{
+      "pointer-events": "auto"
+    }}
+    {...!props.builderContext.context?.symbolId && {
+      "builder-slot": props.name
+    }}
+  ><Blocks_default
+    parent={props.builderContext.context?.symbolId}
+    path={`symbol.data.${props.name}`}
+    context={props.builderContext}
+    blocks={props.builderContext.rootState?.[props.name]}
+  /></div>;
+}
+var slot_default = Slot;
+
+// src/blocks/symbol/component-info.ts
+var componentInfo10 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2126,7 +2162,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2159,7 +2195,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2356,13 +2392,16 @@ var getDefaultRegisteredComponents = () => [{
   ...componentInfo8
 }, {
   component: symbol_default,
-  ...componentInfo9
+  ...componentInfo10
 }, {
   component: text_default,
-  ...componentInfo10
+  ...componentInfo11
 }, {
   component: video_default,
-  ...componentInfo11
+  ...componentInfo12
+}, {
+  component: slot_default,
+  ...componentInfo9
 }];
 
 // src/functions/register-component.ts
@@ -2676,6 +2715,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()) {
@@ -2924,7 +2970,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.0";
+var SDK_VERSION = "0.12.2";
 
 // src/functions/register.ts
 var registry = {};
@@ -3001,9 +3047,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;
       }
@@ -3101,6 +3151,9 @@ function EnableEditor(props) {
     }));
   }
   function processMessage(event) {
+    if (!isFromTrustedHost(props.trustedHosts, event)) {
+      return;
+    }
     const { data } = event;
     if (data) {
       switch (data.type) {
@@ -3231,6 +3284,9 @@ function EnableEditor(props) {
           } : {},
           ...props.enrich ? {
             enrich: props.enrich
+          } : {},
+          ...props.trustedHosts ? {
+            trustedHosts: props.trustedHosts
           } : {}
         });
         Object.values(
@@ -3569,6 +3625,7 @@ function ContentComponent(props) {
     builderContextSignal={builderContextSignal()}
     contentWrapper={props.contentWrapper}
     contentWrapperProps={props.contentWrapperProps}
+    trustedHosts={props.trustedHosts}
     {...{
       setBuilderContextSignal
     }}
@@ -3651,6 +3708,7 @@ function ContentVariants(props) {
           blocksWrapperProps={props.blocksWrapperProps}
           contentWrapper={props.contentWrapper}
           contentWrapperProps={props.contentWrapperProps}
+          trustedHosts={props.trustedHosts}
         />;
       }}</For5>
     </Show12>
@@ -3673,6 +3731,7 @@ function ContentVariants(props) {
       blocksWrapperProps={props.blocksWrapperProps}
       contentWrapper={props.contentWrapper}
       contentWrapperProps={props.contentWrapperProps}
+      trustedHosts={props.trustedHosts}
     />
   </>;
 }
@@ -3736,7 +3795,10 @@ function Symbol(props) {
     __isNestedRender={true}
     apiVersion={props.builderContext.apiVersion}
     apiKey={props.builderContext.apiKey}
-    context={props.builderContext.context}
+    context={{
+      ...props.builderContext.context,
+      symbolId: props.builderBlock?.id
+    }}
     customComponents={Object.values(props.builderComponents)}
     data={{
       ...props.symbol?.data,