@builder.io/sdk-solid 0.12.3 → 0.12.4

package/lib/browser/index.js

@@ -1,44 +1,99 @@
 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 { createContext, useContext, Show, 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 role=button>`);
-function Button(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 (() => {
-        const _el$2 = _tmpl$2();
-        spread(_el$2, mergeProps({
-          get ["class"]() {
-            return `builder-button ${props.attributes.class}`;
-          }
-        }, {}, () => props.attributes, {
-          get style() {
-            return props.attributes.style;
-          }
-        }), false, true);
-        insert(_el$2, () => props.text);
-        return _el$2;
-      })();
+      return createComponent(Dynamic, mergeProps(() => props.attributes, () => props.actionAttributes, {
+        get component() {
+          return props.TagName;
+        }
+      }));
     },
     get when() {
-      return props.link;
+      return !isEmptyElement(props.TagName);
     },
     get children() {
-      const _el$ = _tmpl$();
-      spread(_el$, mergeProps({}, () => props.attributes, {
-        get href() {
-          return props.link;
+      return createComponent(Show, {
+        get fallback() {
+          return createComponent(Dynamic, mergeProps(() => props.attributes, () => props.actionAttributes, {
+            get component() {
+              return props.TagName;
+            },
+            get children() {
+              return props.children;
+            }
+          }));
         },
-        get target() {
-          return props.openLinkInNewTab ? "_blank" : void 0;
+        get when() {
+          return typeof props.TagName === "string";
         },
-        "role": "button"
-      }), false, true);
-      insert(_el$, () => props.text);
-      return _el$;
+        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/constants/target.ts
+var TARGET = "solid";
+
+// src/functions/get-class-prop-name.ts
+var getClassPropName = () => {
+  switch (TARGET) {
+    case "react":
+    case "reactNative":
+    case "rsc":
+      return "className";
+    case "svelte":
+    case "vue":
+    case "solid":
+    case "qwik":
+      return "class";
+  }
+};
+
+// src/blocks/button/button.tsx
+function Button(props) {
+  return createComponent(dynamic_renderer_default, {
+    get TagName() {
+      return props.link ? props.builderLinkComponent || "a" : "button";
+    },
+    get attributes() {
+      return {
+        ...props.attributes,
+        [getClassPropName()]: `${props.link ? "" : "builder-button"} ${props.attributes[getClassPropName()] || ""}`,
+        ...props.link ? {
+          href: props.link,
+          target: props.openLinkInNewTab ? "_blank" : void 0,
+          role: "link"
+        } : {
+          role: "button"
+        }
+      };
+    },
+    actionAttributes: {},
+    get children() {
+      return props.text;
     }
   });
 }
@@ -84,9 +139,6 @@ function isBrowser() {
   return typeof window !== "undefined" && typeof document !== "undefined";
 }
 
-// src/constants/target.ts
-var TARGET = "solid";
-
 // src/functions/is-iframe.ts
 function isIframe() {
   return isBrowser() && window.self !== window.top;
@@ -474,10 +526,10 @@ var createCssClass = ({
     return cssClass;
   }
 };
-var _tmpl$3 = /* @__PURE__ */ template(`<style>`);
+var _tmpl$ = /* @__PURE__ */ template(`<style>`);
 function InlinedStyles(props) {
   return (() => {
-    const _el$ = _tmpl$3();
+    const _el$ = _tmpl$();
     effect((_p$) => {
       const _v$ = props.styles, _v$2 = props.id;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -603,6 +655,38 @@ function getBlockActions(options) {
   return obj;
 }
 
+// src/functions/transform-style-property.ts
+function transformStyleProperty({
+  style
+}) {
+  return style;
+}
+
+// src/functions/get-style.ts
+var getStyle = ({
+  block,
+  context
+}) => {
+  return mapStyleObjToStrIfNeeded(transformStyleProperty({
+    style: block.style || {},
+    context,
+    block
+  }));
+};
+function mapStyleObjToStrIfNeeded(style) {
+  switch (TARGET) {
+    case "svelte":
+    case "vue":
+    case "solid":
+      return convertStyleMapToCSSArray(style).join(" ");
+    case "qwik":
+    case "reactNative":
+    case "react":
+    case "rsc":
+      return style;
+  }
+}
+
 // src/functions/transform-block-properties.ts
 function transformBlockProperties({
   properties
@@ -624,8 +708,11 @@ function getBlockProperties({
     ...extractRelevantRootBlockProperties(block),
     ...block.properties,
     "builder-id": block.id,
-    style: block.style ? getStyleAttribute(block.style) : void 0,
-    class: [block.id, "builder-block", block.class, block.properties?.class].filter(Boolean).join(" ")
+    style: getStyle({
+      block,
+      context
+    }),
+    [getClassPropName()]: [block.id, "builder-block", block.class, block.properties?.class].filter(Boolean).join(" ")
   };
   return transformBlockProperties({
     properties,
@@ -633,69 +720,6 @@ function getBlockProperties({
     block
   });
 }
-function getStyleAttribute(style) {
-  switch (TARGET) {
-    case "svelte":
-    case "vue":
-    case "solid":
-      return convertStyleMapToCSSArray(style).join(" ");
-    case "qwik":
-    case "reactNative":
-    case "react":
-    case "rsc":
-      return style;
-  }
-}
-
-// 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(() => props.attributes, () => props.actionAttributes, {
-        get component() {
-          return props.TagName;
-        }
-      }));
-    },
-    get when() {
-      return !isEmptyElement(props.TagName);
-    },
-    get children() {
-      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) {
@@ -798,6 +822,7 @@ function ComponentRef(props) {
         builderBlock: props.builderBlock,
         context: props.context,
         componentRef: props.componentRef,
+        linkComponent: props.linkComponent,
         includeBlockProps: props.includeBlockProps,
         isInteractive: props.isInteractive,
         contextValue: props.context
@@ -822,6 +847,9 @@ function ComponentRef(props) {
                 },
                 get registeredComponents() {
                   return props.registeredComponents;
+                },
+                get linkComponent() {
+                  return props.linkComponent;
                 }
               });
             }
@@ -848,6 +876,9 @@ function RepeatedBlock(props) {
         },
         get registeredComponents() {
           return props.registeredComponents;
+        },
+        get linkComponent() {
+          return props.linkComponent;
         }
       });
     }
@@ -882,6 +913,10 @@ function Block(props) {
     });
   }
   function Tag() {
+    const shouldUseLink = props.block.tagName === "a" || processedBlock().properties?.href || processedBlock().href;
+    if (shouldUseLink) {
+      return props.linkComponent || "a";
+    }
     return props.block.tagName || "div";
   }
   function canShowBlock() {
@@ -905,11 +940,15 @@ function Block(props) {
       componentOptions: {
         ...getBlockComponentOptions(processedBlock()),
         builderContext: props.context,
+        ...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
+          builderLinkComponent: props.linkComponent
+        } : {},
         ...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
           builderComponents: props.registeredComponents
         } : {}
       },
       context: childrenContext(),
+      linkComponent: props.linkComponent,
       registeredComponents: props.registeredComponents,
       builderBlock: processedBlock(),
       includeBlockProps: blockComponent()?.noWrap === true,
@@ -946,6 +985,9 @@ function Block(props) {
             get registeredComponents() {
               return componentRefProps().registeredComponents;
             },
+            get linkComponent() {
+              return componentRefProps().linkComponent;
+            },
             get builderBlock() {
               return componentRefProps().builderBlock;
             },
@@ -979,6 +1021,9 @@ function Block(props) {
                     },
                     get registeredComponents() {
                       return props.registeredComponents;
+                    },
+                    get linkComponent() {
+                      return props.linkComponent;
                     }
                   });
                 }
@@ -998,6 +1043,9 @@ function Block(props) {
                 get context() {
                   return props.context;
                 },
+                get linkComponent() {
+                  return props.linkComponent;
+                },
                 get children() {
                   return [createComponent(component_ref_default, {
                     get componentRef() {
@@ -1015,6 +1063,9 @@ function Block(props) {
                     get registeredComponents() {
                       return componentRefProps().registeredComponents;
                     },
+                    get linkComponent() {
+                      return componentRefProps().linkComponent;
+                    },
                     get builderBlock() {
                       return componentRefProps().builderBlock;
                     },
@@ -1040,6 +1091,9 @@ function Block(props) {
                         },
                         get registeredComponents() {
                           return props.registeredComponents;
+                        },
+                        get linkComponent() {
+                          return props.linkComponent;
                         }
                       });
                     }
@@ -1152,6 +1206,9 @@ function Blocks(props) {
                   return block.id;
                 },
                 block,
+                get linkComponent() {
+                  return props.linkComponent;
+                },
                 get context() {
                   return props.context || builderContext;
                 },
@@ -1169,7 +1226,7 @@ function Blocks(props) {
 var blocks_default = Blocks;
 
 // src/blocks/columns/columns.tsx
-var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
 function Columns(props) {
   const [gutterSize, setGutterSize] = createSignal(typeof props.space === "number" ? props.space || 0 : 20);
   const [cols, setCols] = createSignal(props.columns || []);
@@ -1210,7 +1267,13 @@ function Columns(props) {
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     const marginLeftKey = "margin-left";
+    const sharedStyles = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch"
+    };
     return {
+      ...sharedStyles,
       width,
       [marginLeftKey]: gutterPixels,
       "--column-width-mobile": getMobileStyle({
@@ -1263,7 +1326,7 @@ function Columns(props) {
       `;
   }
   return (() => {
-    const _el$ = _tmpl$4();
+    const _el$ = _tmpl$2();
     spread(_el$, mergeProps({
       get ["class"]() {
         return `builder-columns ${props.builderBlock.id}-breakpoints ` + css({
@@ -1291,52 +1354,56 @@ function Columns(props) {
       },
       children: (column, _index) => {
         const index = _index();
-        return (() => {
-          const _el$2 = _tmpl$4();
-          spread(_el$2, mergeProps({
-            get ["class"]() {
-              return "builder-column " + css({
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "stretch"
-              });
-            },
-            get style() {
-              return columnCssVars(index);
-            }
-          }, {}, {
-            "key": index
-          }), false, true);
-          insert(_el$2, createComponent(blocks_default, {
-            path: `component.options.columns.${index}.blocks`,
-            get parent() {
-              return props.builderBlock.id;
-            },
-            styleProp: {
-              flexGrow: "1"
-            },
-            get context() {
-              return props.builderContext;
-            },
-            get registeredComponents() {
-              return props.builderComponents;
-            },
-            get blocks() {
-              return column.blocks;
-            }
-          }));
-          return _el$2;
-        })();
+        return createComponent(dynamic_renderer_default, {
+          key: index,
+          get TagName() {
+            return column.link ? props.builderLinkComponent || "a" : "div";
+          },
+          actionAttributes: {},
+          get attributes() {
+            return {
+              ...{},
+              ...column.link ? {
+                href: column.link
+              } : {},
+              [getClassPropName()]: "builder-column",
+              style: mapStyleObjToStrIfNeeded(columnCssVars(index))
+            };
+          },
+          get children() {
+            return createComponent(blocks_default, {
+              path: `component.options.columns.${index}.blocks`,
+              get parent() {
+                return props.builderBlock.id;
+              },
+              styleProp: {
+                flexGrow: "1"
+              },
+              get context() {
+                return props.builderContext;
+              },
+              get registeredComponents() {
+                return props.builderComponents;
+              },
+              get linkComponent() {
+                return props.builderLinkComponent;
+              },
+              get blocks() {
+                return column.blocks;
+              }
+            });
+          }
+        });
       }
     }), null);
     return _el$;
   })();
 }
 var columns_default = Columns;
-var _tmpl$5 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
 function FragmentComponent(props) {
   return (() => {
-    const _el$ = _tmpl$5();
+    const _el$ = _tmpl$3();
     insert(_el$, () => props.children);
     return _el$;
   })();
@@ -1391,7 +1458,7 @@ function getSrcSet(url) {
 }
 
 // src/blocks/image/image.tsx
-var _tmpl$6 = /* @__PURE__ */ template(`<source type=image/webp>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<source type=image/webp>`);
 var _tmpl$22 = /* @__PURE__ */ template(`<picture><img loading=lazy>`);
 var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
 function Image(props) {
@@ -1437,7 +1504,7 @@ function Image(props) {
         return webpSrcSet();
       },
       get children() {
-        const _el$2 = _tmpl$6();
+        const _el$2 = _tmpl$4();
         effect(() => setAttribute(_el$2, "srcset", webpSrcSet()));
         return _el$2;
       }
@@ -1519,10 +1586,10 @@ function Image(props) {
   })];
 }
 var image_default = Image;
-var _tmpl$7 = /* @__PURE__ */ template(`<section>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<section>`);
 function SectionComponent(props) {
   return (() => {
-    const _el$ = _tmpl$7();
+    const _el$ = _tmpl$5();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get style() {
         return {
@@ -2016,7 +2083,7 @@ var componentInfo3 = {
     advanced: true
   }]
 };
-var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -2050,7 +2117,7 @@ function CustomCode(props) {
     }
   });
   return (() => {
-    const _el$ = _tmpl$8();
+    const _el$ = _tmpl$6();
     const _ref$ = elementRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
     effect((_p$) => {
@@ -2110,7 +2177,7 @@ var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "applicati
 var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
-var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-embed>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div class=builder-embed>`);
 function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -2145,7 +2212,7 @@ function Embed(props) {
   }
   createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$9();
+    const _el$ = _tmpl$7();
     const _ref$ = elem;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elem = _el$;
     effect(() => _el$.innerHTML = props.content);
@@ -2301,10 +2368,10 @@ var componentInfo7 = {
   noWrap: true,
   static: true
 };
-var _tmpl$10 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<img>`);
 function ImgComponent(props) {
   return (() => {
-    const _el$ = _tmpl$10();
+    const _el$ = _tmpl$8();
     spread(_el$, mergeProps({
       get style() {
         return {
@@ -2384,10 +2451,10 @@ var componentInfo9 = {
     defaultValue: "children"
   }]
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
 function Slot(props) {
   return (() => {
-    const _el$ = _tmpl$11();
+    const _el$ = _tmpl$9();
     _el$.style.setProperty("pointer-events", "auto");
     spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
       "builder-slot": props.name
@@ -2467,10 +2534,10 @@ var componentInfo11 = {
     textAlign: "center"
   }
 };
-var _tmpl$12 = /* @__PURE__ */ template(`<div class=builder-text>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
   return (() => {
-    const _el$ = _tmpl$12();
+    const _el$ = _tmpl$10();
     _el$.style.setProperty("outline", "none");
     effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
@@ -2561,7 +2628,7 @@ var componentInfo12 = {
     advanced: true
   }]
 };
-var _tmpl$13 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$11 = /* @__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) {
@@ -2624,7 +2691,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$13();
+        const _el$3 = _tmpl$11();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -2786,10 +2853,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$14 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$14();
+    const _el$ = _tmpl$12();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id || "";
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -3291,7 +3358,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.3";
+var SDK_VERSION = "0.12.4";
 
 // src/functions/register.ts
 var registry = {};
@@ -3978,6 +4045,9 @@ function ContentComponent(props) {
         get contentWrapperProps() {
           return props.contentWrapperProps;
         },
+        get linkComponent() {
+          return props.linkComponent;
+        },
         get trustedHosts() {
           return props.trustedHosts;
         }
@@ -4020,6 +4090,9 @@ function ContentComponent(props) {
             },
             get registeredComponents() {
               return registeredComponents();
+            },
+            get linkComponent() {
+              return props.linkComponent;
             }
           })];
         }
@@ -4113,6 +4186,9 @@ function ContentVariants(props) {
             get customComponents() {
               return props.customComponents;
             },
+            get linkComponent() {
+              return props.linkComponent;
+            },
             get canTrack() {
               return props.canTrack;
             },
@@ -4170,6 +4246,9 @@ function ContentVariants(props) {
     get customComponents() {
       return props.customComponents;
     },
+    get linkComponent() {
+      return props.linkComponent;
+    },
     get canTrack() {
       return props.canTrack;
     },
@@ -4229,11 +4308,11 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$15 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   function className() {
-    return [...[props.attributes.class], "builder-symbol", props.symbol?.inline ? "builder-inline-symbol" : void 0, props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0].filter(Boolean).join(" ");
+    return [...[props.attributes[getClassPropName()]], "builder-symbol", props.symbol?.inline ? "builder-inline-symbol" : void 0, props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0].filter(Boolean).join(" ");
   }
   function setContent() {
     if (contentToUse())
@@ -4255,7 +4334,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [props.symbol], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$15();
+    const _el$ = _tmpl$13();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();
@@ -4290,6 +4369,9 @@ function Symbol(props) {
       },
       get content() {
         return contentToUse();
+      },
+      get linkComponent() {
+        return props.builderLinkComponent;
       }
     }));
     return _el$;