@builder.io/sdk-solid 0.12.0 → 0.12.2

package/lib/browser/index.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';
 
@@ -331,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,
@@ -653,48 +649,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;
     }
   });
 }
@@ -935,29 +963,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();
@@ -978,10 +985,9 @@ function Block(props) {
                   });
                 }
               });
-            }
-          }), createComponent(Show, {
+            },
             get when() {
-              return memo(() => !!!isEmptyHtmlElement(Tag()))() && !repeatItem();
+              return !repeatItem();
             },
             get children() {
               return createComponent(block_wrapper_default, {
@@ -994,7 +1000,6 @@ function Block(props) {
                 get context() {
                   return props.context;
                 },
-                hasChildren: true,
                 get children() {
                   return [createComponent(component_ref_default, {
                     get componentRef() {
@@ -1044,7 +1049,7 @@ function Block(props) {
                 }
               });
             }
-          })];
+          });
         }
       })];
     }
@@ -2366,8 +2371,50 @@ 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"
+  }]
+};
+var _tmpl$11 = /* @__PURE__ */ template(`<div>`);
+function Slot(props) {
+  return (() => {
+    const _el$ = _tmpl$11();
+    _el$.style.setProperty("pointer-events", "auto");
+    spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
+      "builder-slot": props.name
+    }), false, true);
+    insert(_el$, createComponent(blocks_default, {
+      get parent() {
+        return props.builderContext.context?.symbolId;
+      },
+      get path() {
+        return `symbol.data.${props.name}`;
+      },
+      get context() {
+        return props.builderContext;
+      },
+      get blocks() {
+        return props.builderContext.rootState?.[props.name];
+      }
+    }));
+    return _el$;
+  })();
+}
+var slot_default = Slot;
+
+// src/blocks/symbol/component-info.ts
+var componentInfo10 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2403,7 +2450,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2422,10 +2469,10 @@ var componentInfo10 = {
     textAlign: "center"
   }
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<div class=builder-text>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
   return (() => {
-    const _el$ = _tmpl$11();
+    const _el$ = _tmpl$12();
     _el$.style.setProperty("outline", "none");
     effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
@@ -2434,7 +2481,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2516,7 +2563,7 @@ var componentInfo11 = {
     advanced: true
   }]
 };
-var _tmpl$12 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<source type=video/mp4>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
@@ -2579,7 +2626,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$12();
+        const _el$3 = _tmpl$13();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -2661,13 +2708,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
@@ -2738,10 +2788,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$13 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$13();
+    const _el$ = _tmpl$14();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id || "";
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -2988,6 +3038,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()) {
@@ -3236,7 +3293,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 = {};
@@ -3313,9 +3370,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;
       }
@@ -3411,6 +3472,9 @@ function EnableEditor(props) {
     }));
   }
   function processMessage(event) {
+    if (!isFromTrustedHost(props.trustedHosts, event)) {
+      return;
+    }
     const {
       data
     } = event;
@@ -3541,6 +3605,9 @@ function EnableEditor(props) {
           } : {},
           ...props.enrich ? {
             enrich: props.enrich
+          } : {},
+          ...props.trustedHosts ? {
+            trustedHosts: props.trustedHosts
           } : {}
         });
         Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
@@ -3908,6 +3975,9 @@ function ContentComponent(props) {
         },
         get contentWrapperProps() {
           return props.contentWrapperProps;
+        },
+        get trustedHosts() {
+          return props.trustedHosts;
         }
       }, {
         setBuilderContextSignal
@@ -4067,6 +4137,9 @@ function ContentVariants(props) {
             },
             get contentWrapperProps() {
               return props.contentWrapperProps;
+            },
+            get trustedHosts() {
+              return props.trustedHosts;
             }
           });
         }
@@ -4121,6 +4194,9 @@ function ContentVariants(props) {
     },
     get contentWrapperProps() {
       return props.contentWrapperProps;
+    },
+    get trustedHosts() {
+      return props.trustedHosts;
     }
   }))];
 }
@@ -4151,7 +4227,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$14 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   function className() {
@@ -4177,7 +4253,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [props.symbol], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$14();
+    const _el$ = _tmpl$15();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();
@@ -4192,7 +4268,10 @@ function Symbol(props) {
         return props.builderContext.apiKey;
       },
       get context() {
-        return props.builderContext.context;
+        return {
+          ...props.builderContext.context,
+          symbolId: props.builderBlock?.id
+        };
       },
       get customComponents() {
         return Object.values(props.builderComponents);