@builder.io/sdk-solid 2.0.0 → 2.0.2

package/dist/index.d.ts

@@ -510,6 +510,7 @@ interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'BlocksWrappe
     apiVersion: ApiVersion | undefined;
     componentInfos: Dictionary<ComponentInfo>;
     inheritedStyles: Record<string, unknown>;
+    nonce: string;
     canTrack?: boolean;
 }
 
@@ -708,6 +709,10 @@ interface ContentVariantsPrps {
      * List of hosts to allow editing content from.
      */
     trustedHosts?: string[];
+    /**
+     * A CSP nonce to use for the SDK's inlined `<script>` and `<style>` tags.
+     */
+    nonce?: string;
 }
 
 type VariantsProviderProps = ContentVariantsPrps & {
@@ -731,6 +736,7 @@ declare const _default: solid_js.Context<{
     inheritedStyles: {};
     BlocksWrapper: string;
     BlocksWrapperProps: {};
+    nonce: string;
 }>;
 
 type QueryObject = Record<string, string | string[]>;

package/lib/browser/dev.js

@@ -113,7 +113,8 @@ var builder_context_default = createContext({
   componentInfos: {},
   inheritedStyles: {},
   BlocksWrapper: "div",
-  BlocksWrapperProps: {}
+  BlocksWrapperProps: {},
+  nonce: ""
 });
 var components_context_default = createContext({ registeredComponents: {} });
 
@@ -866,13 +867,15 @@ function InlinedStyles(props) {
   return (() => {
     const _el$ = _tmpl$();
     effect((_p$) => {
-      const _v$ = props.styles, _v$2 = props.id;
+      const _v$ = props.styles, _v$2 = props.id, _v$3 = props.nonce;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && setAttribute(_el$, "data-id", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && setAttribute(_el$, "nonce", _p$._v$3 = _v$3);
       return _p$;
     }, {
       _v$: void 0,
-      _v$2: void 0
+      _v$2: void 0,
+      _v$3: void 0
     });
     return _el$;
   })();
@@ -955,6 +958,9 @@ function BlockStyles(props) {
         id: "builderio-block",
         get styles() {
           return css();
+        },
+        get nonce() {
+          return props.context.nonce;
         }
       });
     }
@@ -1557,7 +1563,7 @@ var getColumnsClass = (id) => {
 
 // src/blocks/columns/columns.tsx
 var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-710294c2 {
+var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-5b8fb3ac {
   display: flex;
   line-height: normal;
 }`);
@@ -1677,7 +1683,7 @@ function Columns(props) {
     const _el$ = _tmpl$3();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return getColumnsClass(props.builderBlock?.id) + " div-710294c2";
+        return getColumnsClass(props.builderBlock?.id) + " div-5b8fb3ac";
       },
       get style() {
         return columnsCssVars();
@@ -1690,6 +1696,9 @@ function Columns(props) {
           id: "builderio-columns",
           get styles() {
             return columnsStyles();
+          },
+          get nonce() {
+            return props.builderContext.nonce;
           }
         });
       }
@@ -1799,16 +1808,16 @@ function getSrcSet(url) {
 // src/blocks/image/image.tsx
 var _tmpl$5 = /* @__PURE__ */ template(`<source type=image/webp>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<picture><img>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-54b38751">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-54b38751-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-54b38751 {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-e3b1053e">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-e3b1053e-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-e3b1053e {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-54b38751 {
+}.div-e3b1053e {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-54b38751-2 {
+}.div-e3b1053e-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1827,6 +1836,9 @@ function Image(props) {
     !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
       return props.srcset;
     }
+    if (props.noWebp) {
+      return void 0;
+    }
     if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
       if (!props.srcset.includes(props.image.split("?")[0])) {
         console.debug("Removed given srcset");
@@ -1868,7 +1880,7 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-54b38751", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
+      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-e3b1053e", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
@@ -4625,13 +4637,15 @@ function InlinedScript(props) {
   return (() => {
     const _el$ = _tmpl$20();
     effect((_p$) => {
-      const _v$ = props.scriptStr, _v$2 = props.id;
+      const _v$ = props.scriptStr, _v$2 = props.id, _v$3 = props.nonce || "";
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && setAttribute(_el$, "data-id", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && setAttribute(_el$, "nonce", _p$._v$3 = _v$3);
       return _p$;
     }, {
       _v$: void 0,
-      _v$2: void 0
+      _v$2: void 0,
+      _v$3: void 0
     });
     return _el$;
   })();
@@ -5137,7 +5151,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.0";
+var SDK_VERSION = "2.0.2";
 
 // src/functions/register.ts
 var registry = {};
@@ -5720,6 +5734,9 @@ ${getDefaultStyles(props.isNestedRender)}
     id: "builderio-content",
     get styles() {
       return injectedStyles();
+    },
+    get nonce() {
+      return props.nonce;
     }
   });
 }
@@ -5769,7 +5786,15 @@ function ContentComponent(props) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     contentId: props.content?.id
   }));
-  const [registeredComponents, setRegisteredComponents] = createSignal([...getDefaultRegisteredComponents(), ...props.customComponents || []].reduce((acc, {
+  const [registeredComponents, setRegisteredComponents] = createSignal([...getDefaultRegisteredComponents(), ...props.customComponents?.filter(({
+    models
+  }) => {
+    if (!models?.length)
+      return true;
+    if (!props.model)
+      return true;
+    return models.includes(props.model);
+  }) || []].reduce((acc, {
     component,
     ...info
   }) => ({
@@ -5795,7 +5820,15 @@ function ContentComponent(props) {
     canTrack: props.canTrack,
     apiKey: props.apiKey,
     apiVersion: props.apiVersion,
-    componentInfos: [...getDefaultRegisteredComponents(), ...props.customComponents || []].reduce((acc, {
+    componentInfos: [...getDefaultRegisteredComponents(), ...props.customComponents?.filter(({
+      models
+    }) => {
+      if (!models?.length)
+        return true;
+      if (!props.model)
+        return true;
+      return models.includes(props.model);
+    }) || []].reduce((acc, {
       component: _,
       ...info
     }) => ({
@@ -5804,7 +5837,8 @@ function ContentComponent(props) {
     }), {}),
     inheritedStyles: {},
     BlocksWrapper: props.blocksWrapper || "div",
-    BlocksWrapperProps: props.blocksWrapperProps || {}
+    BlocksWrapperProps: props.blocksWrapperProps || {},
+    nonce: props.nonce || ""
   });
   function contentSetState(newRootState) {
     setBuilderContextSignal((PREVIOUS_VALUE) => ({
@@ -5820,6 +5854,9 @@ function ContentComponent(props) {
     },
     get children() {
       return createComponent(enable_editor_default, mergeProps({
+        get nonce() {
+          return props.nonce;
+        },
         get content() {
           return props.content;
         },
@@ -5872,6 +5909,9 @@ function ContentComponent(props) {
                 id: "builderio-variant-visibility",
                 get scriptStr() {
                   return scriptStr();
+                },
+                get nonce() {
+                  return props.nonce || "";
                 }
               });
             }
@@ -5879,6 +5919,9 @@ function ContentComponent(props) {
             when: TARGET !== "reactNative",
             get children() {
               return createComponent(styles_default, {
+                get nonce() {
+                  return props.nonce || "";
+                },
                 get isNestedRender() {
                   return props.isNestedRender;
                 },
@@ -5950,6 +5993,9 @@ function ContentVariants(props) {
         id: "builderio-init-variants-fns",
         get scriptStr() {
           return getInitVariantsFnsScriptString();
+        },
+        get nonce() {
+          return props.nonce || "";
         }
       });
     }
@@ -5962,11 +6008,17 @@ function ContentVariants(props) {
         id: "builderio-variants",
         get styles() {
           return hideVariantsStyleString();
+        },
+        get nonce() {
+          return props.nonce || "";
         }
       }), createComponent(inlined_script_default, {
         id: "builderio-variants-visibility",
         get scriptStr() {
           return updateCookieAndStylesScriptStr();
+        },
+        get nonce() {
+          return props.nonce || "";
         }
       }), createComponent(For, {
         get each() {
@@ -5981,6 +6033,9 @@ function ContentVariants(props) {
             get key() {
               return variant.testVariationId;
             },
+            get nonce() {
+              return props.nonce;
+            },
             content: variant,
             showContent: false,
             get model() {
@@ -6036,6 +6091,9 @@ function ContentVariants(props) {
       })];
     }
   }), createComponent(content_default, mergeProps({
+    get nonce() {
+      return props.nonce;
+    },
     get isNestedRender() {
       return props.isNestedRender;
     }
@@ -6160,6 +6218,9 @@ function Symbol(props) {
       }
     }, {}, () => props.attributes, {}), false, true);
     insert(_el$, createComponent(content_variants_default, {
+      get nonce() {
+        return props.builderContext.nonce;
+      },
       isNestedRender: true,
       get apiVersion() {
         return props.builderContext.apiVersion;

package/lib/browser/dev.jsx

@@ -94,7 +94,8 @@ var builder_context_default = createContext({
   componentInfos: {},
   inheritedStyles: {},
   BlocksWrapper: "div",
-  BlocksWrapperProps: {}
+  BlocksWrapperProps: {},
+  nonce: ""
 });
 
 // src/context/components.context.ts
@@ -854,7 +855,11 @@ var getSizesForBreakpoints = ({
 
 // src/components/inlined-styles.tsx
 function InlinedStyles(props) {
-  return <><style innerHTML={props.styles} data-id={props.id} /></>;
+  return <><style
+    innerHTML={props.styles}
+    data-id={props.id}
+    nonce={props.nonce}
+  /></>;
 }
 var Inlined_styles_default = InlinedStyles;
 
@@ -940,7 +945,11 @@ function BlockStyles(props) {
       hoverStylesClass
     ].join(" ");
   });
-  return <><Show2 when={TARGET !== "reactNative" && css() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css()} /></Show2></>;
+  return <><Show2 when={TARGET !== "reactNative" && css() && canShowBlock()}><Inlined_styles_default
+    id="builderio-block"
+    styles={css()}
+    nonce={props.context.nonce}
+  /></Show2></>;
 }
 var Block_styles_default = BlockStyles;
 
@@ -1493,13 +1502,14 @@ function Columns(props) {
   }
   return <>
     <div
-      class={getColumnsClass(props.builderBlock?.id) + " div-710294c2"}
+      class={getColumnsClass(props.builderBlock?.id) + " div-5b8fb3ac"}
       style={columnsCssVars()}
       {...{}}
     >
       <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
         id="builderio-columns"
         styles={columnsStyles()}
+        nonce={props.builderContext.nonce}
       /></Show6>
       <For4 each={props.columns}>{(column, _index) => {
         const index = _index();
@@ -1521,7 +1531,7 @@ function Columns(props) {
         /></Dynamic_renderer_default>;
       }}</For4>
     </div>
-    <style>{`.div-710294c2 {
+    <style>{`.div-5b8fb3ac {
   display: flex;
   line-height: normal;
 }`}</style>
@@ -1595,6 +1605,9 @@ function Image(props) {
     !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
       return props.srcset;
     }
+    if (props.noWebp) {
+      return void 0;
+    }
     if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
       if (!props.srcset.includes(props.image.split("?")[0])) {
         console.debug("Removed given srcset");
@@ -1628,7 +1641,7 @@ function Image(props) {
       <picture>
         <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-54b38751"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-e3b1053e"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1646,22 +1659,22 @@ function Image(props) {
       <Show7
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-54b38751"
+        class="builder-image-sizer div-e3b1053e"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show7>
       <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
-      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-54b38751-2">{props.children}</div></Show7>
+      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-e3b1053e-2">{props.children}</div></Show7>
     </>
-    <style>{`.img-54b38751 {
+    <style>{`.img-e3b1053e {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-54b38751 {
+}.div-e3b1053e {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-54b38751-2 {
+}.div-e3b1053e-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1697,16 +1710,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount5, on as on4, createEffect as createEffect4, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
+import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import {
-  Show as Show14,
-  For as For9,
-  onMount as onMount4,
-  createMemo as createMemo18,
-  createSignal as createSignal18
-} from "solid-js";
+import { Show as Show14, For as For9, onMount as onMount4, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -4139,7 +4146,11 @@ var getUpdateVariantVisibilityScript = ({
 
 // src/components/inlined-script.tsx
 function InlinedScript(props) {
-  return <><script innerHTML={props.scriptStr} data-id={props.id} /></>;
+  return <><script
+    innerHTML={props.scriptStr}
+    data-id={props.id}
+    nonce={props.nonce || ""}
+  /></>;
 }
 var Inlined_script_default = InlinedScript;
 
@@ -4653,7 +4664,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.0";
+var SDK_VERSION = "2.0.2";
 
 // src/functions/register.ts
 var registry = {};
@@ -5253,6 +5264,7 @@ ${getDefaultStyles(props.isNestedRender)}
   return <><Inlined_styles_default
     id="builderio-content"
     styles={injectedStyles()}
+    nonce={props.nonce}
   /></>;
 }
 var Styles_default = ContentStyles;
@@ -5306,7 +5318,13 @@ function ContentComponent(props) {
   const [registeredComponents, setRegisteredComponents] = createSignal17(
     [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents || []
+      ...props.customComponents?.filter(({ models }) => {
+        if (!models?.length)
+          return true;
+        if (!props.model)
+          return true;
+        return models.includes(props.model);
+      }) || []
     ].reduce(
       (acc, { component, ...info }) => ({
         ...acc,
@@ -5336,7 +5354,13 @@ function ContentComponent(props) {
     apiVersion: props.apiVersion,
     componentInfos: [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents || []
+      ...props.customComponents?.filter(({ models }) => {
+        if (!models?.length)
+          return true;
+        if (!props.model)
+          return true;
+        return models.includes(props.model);
+      }) || []
     ].reduce(
       (acc, { component: _, ...info }) => ({
         ...acc,
@@ -5346,7 +5370,8 @@ function ContentComponent(props) {
     ),
     inheritedStyles: {},
     BlocksWrapper: props.blocksWrapper || "div",
-    BlocksWrapperProps: props.blocksWrapperProps || {}
+    BlocksWrapperProps: props.blocksWrapperProps || {},
+    nonce: props.nonce || ""
   });
   function contentSetState(newRootState) {
     setBuilderContextSignal((PREVIOUS_VALUE) => ({
@@ -5359,6 +5384,7 @@ function ContentComponent(props) {
       registeredComponents: registeredComponents()
     }}
   ><Enable_editor_default
+    nonce={props.nonce}
     content={props.content}
     data={props.data}
     model={props.model}
@@ -5379,8 +5405,10 @@ function ContentComponent(props) {
     <Show13 when={props.isSsrAbTest}><Inlined_script_default
       id="builderio-variant-visibility"
       scriptStr={scriptStr()}
+      nonce={props.nonce || ""}
     /></Show13>
     <Show13 when={TARGET !== "reactNative"}><Styles_default
+      nonce={props.nonce || ""}
       isNestedRender={props.isNestedRender}
       contentId={builderContextSignal().content?.id}
       cssCode={builderContextSignal().content?.data?.cssCode}
@@ -5432,21 +5460,25 @@ function ContentVariants(props) {
     <Show14 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
       id="builderio-init-variants-fns"
       scriptStr={getInitVariantsFnsScriptString()}
+      nonce={props.nonce || ""}
     /></Show14>
     <Show14 when={shouldRenderVariants()}>
       <Inlined_styles_default
         id="builderio-variants"
         styles={hideVariantsStyleString()}
+        nonce={props.nonce || ""}
       />
       <Inlined_script_default
         id="builderio-variants-visibility"
         scriptStr={updateCookieAndStylesScriptStr()}
+        nonce={props.nonce || ""}
       />
       <For9 each={getVariants(props.content)}>{(variant, _index) => {
         const index = _index();
         return <Content_default
           isNestedRender={props.isNestedRender}
           key={variant.testVariationId}
+          nonce={props.nonce}
           content={variant}
           showContent={false}
           model={props.model}
@@ -5469,6 +5501,7 @@ function ContentVariants(props) {
       }}</For9>
     </Show14>
     <Content_default
+      nonce={props.nonce}
       isNestedRender={props.isNestedRender}
       {...{}}
       content={defaultContent()}
@@ -5553,8 +5586,9 @@ function Symbol(props) {
   function onUpdateFn_0() {
     setContent();
   }
-  createEffect4(on4(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
+  createEffect3(on3(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
+    nonce={props.builderContext.nonce}
     isNestedRender={true}
     apiVersion={props.builderContext.apiVersion}
     apiKey={props.builderContext.apiKey}