@builder.io/sdk-svelte 2.0.0 → 2.0.2

package/lib/browser/blocks/columns/columns.svelte

@@ -147,7 +147,11 @@ let flexDir = stackColumnsAt === "never"
   {...{}}
 >
   {#if TARGET !== "reactNative"}
-    <InlinedStyles id="builderio-columns" styles={columnsStyles()} />
+    <InlinedStyles
+      id="builderio-columns"
+      styles={columnsStyles()}
+      nonce={$builderContext.nonce}
+    />
   {/if}
   {#each columns as column, index (index)}
     <DynamicRenderer

package/lib/browser/blocks/image/image.svelte

@@ -31,6 +31,9 @@ $: srcSetToUse = () => {
         !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
         return srcset;
     }
+    if (noWebp) {
+        return undefined; // no need to add srcset to svg images
+    }
     if (srcset && image?.includes("builder.io/api/v1/image")) {
         if (!srcset.includes(image.split("?")[0])) {
             console.debug("Removed given srcset");

package/lib/browser/blocks/symbol/symbol.svelte

@@ -57,6 +57,7 @@ $: onUpdateFn_0(...[symbol]);
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   <ContentVariants
+    nonce={$builderContext.nonce}
     isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}

package/lib/browser/components/block/components/block-styles.svelte

@@ -93,5 +93,5 @@ $: css = () => {
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}
-  <InlinedStyles id="builderio-block" styles={css()} />
+  <InlinedStyles id="builderio-block" styles={css()} nonce={context.nonce} />
 {/if}

package/lib/browser/components/content/components/styles.svelte

@@ -6,6 +6,7 @@ export let cssCode = undefined;
 export let contentId = undefined;
 export let customFonts = undefined;
 export let isNestedRender = undefined;
+export let nonce;
 let injectedStyles = `
 ${getCss({
     cssCode: cssCode,
@@ -18,4 +19,4 @@ ${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 
-<InlinedStyles id="builderio-content" styles={injectedStyles} />
+<InlinedStyles id="builderio-content" styles={injectedStyles} {nonce} />

package/lib/browser/components/content/components/styles.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponent } from "svelte";
-interface Props {
+interface Props extends BuilderNonceProp {
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
     isNestedRender?: boolean;
 }
+import type { BuilderNonceProp } from "../../../types/builder-props";
 import type { CustomFont } from "./styles.helpers";
 declare const __propDef: {
     props: {
@@ -12,6 +13,7 @@ declare const __propDef: {
         contentId?: Props["contentId"];
         customFonts?: Props["customFonts"];
         isNestedRender?: Props["isNestedRender"];
+        nonce: Props["nonce"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/components/content/content.svelte

@@ -14,6 +14,7 @@ import { getContentInitialValue, getRootStateInitialValue, } from "./content.hel
 import "./wrap-component-ref";
 export let content = undefined;
 export let customComponents = undefined;
+export let model = undefined;
 export let data = undefined;
 export let locale = undefined;
 export let context = undefined;
@@ -22,7 +23,7 @@ export let apiKey;
 export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
-export let model = undefined;
+export let nonce = undefined;
 export let enrich = undefined;
 export let showContent;
 export let contentWrapper = undefined;
@@ -42,7 +43,13 @@ let scriptStr = getUpdateVariantVisibilityScript({
 });
 let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents || []),
+    ...(customComponents?.filter(({ models }) => {
+        if (!models?.length)
+            return true;
+        if (!model)
+            return true;
+        return models.includes(model);
+    }) || []),
 ].reduce((acc, { component, ...info }) => ({
     ...acc,
     [info.name]: {
@@ -68,7 +75,13 @@ let builderContextSignal = writable({
     apiVersion: apiVersion,
     componentInfos: [
         ...getDefaultRegisteredComponents(),
-        ...(customComponents || []),
+        ...(customComponents?.filter(({ models }) => {
+            if (!models?.length)
+                return true;
+            if (!model)
+                return true;
+            return models.includes(model);
+        }) || []),
     ].reduce((acc, { component: _, ...info }) => ({
         ...acc,
         [info.name]: serializeComponentInfo(info),
@@ -76,6 +89,7 @@ let builderContextSignal = writable({
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
+    nonce: nonce || "",
 });
 setContext(ComponentsContext.key, {
     registeredComponents: registeredComponents,
@@ -83,6 +97,7 @@ setContext(ComponentsContext.key, {
 </script>
 
 <EnableEditor
+  {nonce}
   {content}
   {data}
   {model}
@@ -99,10 +114,15 @@ setContext(ComponentsContext.key, {
   {...{}}
 >
   {#if isSsrAbTest}
-    <InlinedScript id="builderio-variant-visibility" {scriptStr} />
+    <InlinedScript
+      id="builderio-variant-visibility"
+      {scriptStr}
+      nonce={nonce || ""}
+    />
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles
+      nonce={nonce || ""}
       {isNestedRender}
       contentId={$builderContextSignal.content?.id}
       cssCode={$builderContextSignal.content?.data?.cssCode}

package/lib/browser/components/content/content.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         content?: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
+        model?: ContentProps["model"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
         context?: ContentProps["context"];
@@ -12,7 +13,7 @@ declare const __propDef: {
         apiVersion?: ContentProps["apiVersion"];
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
-        model?: ContentProps["model"];
+        nonce?: ContentProps["nonce"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];

package/lib/browser/components/content-variants/content-variants.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { afterUpdate, onMount } from "svelte";
+<script>import { onMount } from "svelte";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -11,6 +11,7 @@ import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCoo
 export let canTrack = undefined;
 export let content = undefined;
 export let isNestedRender = undefined;
+export let nonce = undefined;
 export let model = undefined;
 export let data = undefined;
 export let context = undefined;
@@ -57,26 +58,32 @@ onMount(() => {
      */
     shouldRenderVariants = false;
 });
-afterUpdate(() => { });
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}
   <InlinedScript
     id="builderio-init-variants-fns"
     scriptStr={getInitVariantsFnsScriptString()}
+    nonce={nonce || ""}
   />
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedStyles id="builderio-variants" styles={hideVariantsStyleString()} />
+  <InlinedStyles
+    id="builderio-variants"
+    styles={hideVariantsStyleString()}
+    nonce={nonce || ""}
+  />
   <InlinedScript
     id="builderio-variants-visibility"
     scriptStr={updateCookieAndStylesScriptStr()}
+    nonce={nonce || ""}
   />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent
       {isNestedRender}
+      {nonce}
       content={variant}
       showContent={false}
       {model}
@@ -99,6 +106,7 @@ afterUpdate(() => { });
   {/each}
 {/if}
 <ContentComponent
+  {nonce}
   {isNestedRender}
   {...{}}
   content={defaultContent()}

package/lib/browser/components/content-variants/content-variants.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         canTrack?: VariantsProviderProps["canTrack"];
         content?: VariantsProviderProps["content"];
         isNestedRender?: VariantsProviderProps["isNestedRender"];
+        nonce?: VariantsProviderProps["nonce"];
         model?: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];

package/lib/browser/components/content-variants/content-variants.types.d.ts

@@ -68,4 +68,8 @@ export 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;
 }

package/lib/browser/components/inlined-script.svelte

@@ -2,6 +2,7 @@
 
 <script>export let scriptStr;
 export let id;
+export let nonce;
 </script>
 
-{@html `<script  data-id=${id}>${scriptStr}</script>`}
+{@html `<script  data-id=${id}  nonce=${nonce || ""}>${scriptStr}</script>`}

package/lib/browser/components/inlined-script.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
-interface Props {
+interface Props extends BuilderNonceProp {
     scriptStr: string;
     id: string;
 }
+import type { BuilderNonceProp } from "../types/builder-props";
 declare const __propDef: {
     props: {
         scriptStr: Props["scriptStr"];
         id: Props["id"];
+        nonce: Props["nonce"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/components/inlined-styles.svelte

@@ -2,6 +2,7 @@
 
 <script>export let styles;
 export let id;
+export let nonce;
 </script>
 
-{@html `<${"style"}  data-id=${id}  >${styles}<${"/style"}>`}
+{@html `<${"style"}  data-id=${id}  nonce=${nonce}  >${styles}<${"/style"}>`}

package/lib/browser/components/inlined-styles.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
-interface Props {
+interface Props extends BuilderNonceProp {
     styles: string;
     id: string;
 }
+import type { BuilderNonceProp } from "../types/builder-props";
 declare const __propDef: {
     props: {
         styles: Props["styles"];
         id: Props["id"];
+        nonce: Props["nonce"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.0";
+export declare const SDK_VERSION = "2.0.2";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.0";
+export const SDK_VERSION = "2.0.2";

package/lib/browser/context/builder.context.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
         inheritedStyles: {};
         BlocksWrapper: string;
         BlocksWrapperProps: {};
+        nonce: string;
     }>;
     key: symbol;
 };

package/lib/browser/context/builder.context.js

@@ -13,6 +13,7 @@ export default {
         inheritedStyles: {},
         BlocksWrapper: "div",
         BlocksWrapperProps: {},
+        nonce: "",
     }),
     key,
 };

package/lib/browser/context/types.d.ts

@@ -33,5 +33,6 @@ export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'Block
     apiVersion: ApiVersion | undefined;
     componentInfos: Dictionary<ComponentInfo>;
     inheritedStyles: Record<string, unknown>;
+    nonce: string;
     canTrack?: boolean;
 }

package/lib/browser/types/builder-props.d.ts

@@ -12,3 +12,6 @@ export type BuilderComponentsProp = {
 export type BuilderLinkComponentProp = {
     builderLinkComponent?: any;
 };
+export type BuilderNonceProp = {
+    nonce: string;
+};

package/lib/edge/blocks/columns/columns.svelte

@@ -147,7 +147,11 @@ let flexDir = stackColumnsAt === "never"
   {...{}}
 >
   {#if TARGET !== "reactNative"}
-    <InlinedStyles id="builderio-columns" styles={columnsStyles()} />
+    <InlinedStyles
+      id="builderio-columns"
+      styles={columnsStyles()}
+      nonce={$builderContext.nonce}
+    />
   {/if}
   {#each columns as column, index (index)}
     <DynamicRenderer

package/lib/edge/blocks/image/image.svelte

@@ -31,6 +31,9 @@ $: srcSetToUse = () => {
         !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
         return srcset;
     }
+    if (noWebp) {
+        return undefined; // no need to add srcset to svg images
+    }
     if (srcset && image?.includes("builder.io/api/v1/image")) {
         if (!srcset.includes(image.split("?")[0])) {
             console.debug("Removed given srcset");

package/lib/edge/blocks/symbol/symbol.svelte

@@ -57,6 +57,7 @@ $: onUpdateFn_0(...[symbol]);
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   <ContentVariants
+    nonce={$builderContext.nonce}
     isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}

package/lib/edge/components/block/components/block-styles.svelte

@@ -93,5 +93,5 @@ $: css = () => {
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}
-  <InlinedStyles id="builderio-block" styles={css()} />
+  <InlinedStyles id="builderio-block" styles={css()} nonce={context.nonce} />
 {/if}

package/lib/edge/components/content/components/styles.svelte

@@ -6,6 +6,7 @@ export let cssCode = undefined;
 export let contentId = undefined;
 export let customFonts = undefined;
 export let isNestedRender = undefined;
+export let nonce;
 let injectedStyles = `
 ${getCss({
     cssCode: cssCode,
@@ -18,4 +19,4 @@ ${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 
-<InlinedStyles id="builderio-content" styles={injectedStyles} />
+<InlinedStyles id="builderio-content" styles={injectedStyles} {nonce} />

package/lib/edge/components/content/components/styles.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponent } from "svelte";
-interface Props {
+interface Props extends BuilderNonceProp {
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
     isNestedRender?: boolean;
 }
+import type { BuilderNonceProp } from "../../../types/builder-props";
 import type { CustomFont } from "./styles.helpers";
 declare const __propDef: {
     props: {
@@ -12,6 +13,7 @@ declare const __propDef: {
         contentId?: Props["contentId"];
         customFonts?: Props["customFonts"];
         isNestedRender?: Props["isNestedRender"];
+        nonce: Props["nonce"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/edge/components/content/content.svelte

@@ -14,6 +14,7 @@ import { getContentInitialValue, getRootStateInitialValue, } from "./content.hel
 import "./wrap-component-ref";
 export let content = undefined;
 export let customComponents = undefined;
+export let model = undefined;
 export let data = undefined;
 export let locale = undefined;
 export let context = undefined;
@@ -22,7 +23,7 @@ export let apiKey;
 export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
-export let model = undefined;
+export let nonce = undefined;
 export let enrich = undefined;
 export let showContent;
 export let contentWrapper = undefined;
@@ -42,7 +43,13 @@ let scriptStr = getUpdateVariantVisibilityScript({
 });
 let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents || []),
+    ...(customComponents?.filter(({ models }) => {
+        if (!models?.length)
+            return true;
+        if (!model)
+            return true;
+        return models.includes(model);
+    }) || []),
 ].reduce((acc, { component, ...info }) => ({
     ...acc,
     [info.name]: {
@@ -68,7 +75,13 @@ let builderContextSignal = writable({
     apiVersion: apiVersion,
     componentInfos: [
         ...getDefaultRegisteredComponents(),
-        ...(customComponents || []),
+        ...(customComponents?.filter(({ models }) => {
+            if (!models?.length)
+                return true;
+            if (!model)
+                return true;
+            return models.includes(model);
+        }) || []),
     ].reduce((acc, { component: _, ...info }) => ({
         ...acc,
         [info.name]: serializeComponentInfo(info),
@@ -76,6 +89,7 @@ let builderContextSignal = writable({
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
+    nonce: nonce || "",
 });
 setContext(ComponentsContext.key, {
     registeredComponents: registeredComponents,
@@ -83,6 +97,7 @@ setContext(ComponentsContext.key, {
 </script>
 
 <EnableEditor
+  {nonce}
   {content}
   {data}
   {model}
@@ -99,10 +114,15 @@ setContext(ComponentsContext.key, {
   {...{}}
 >
   {#if isSsrAbTest}
-    <InlinedScript id="builderio-variant-visibility" {scriptStr} />
+    <InlinedScript
+      id="builderio-variant-visibility"
+      {scriptStr}
+      nonce={nonce || ""}
+    />
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles
+      nonce={nonce || ""}
       {isNestedRender}
       contentId={$builderContextSignal.content?.id}
       cssCode={$builderContextSignal.content?.data?.cssCode}

package/lib/edge/components/content/content.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         content?: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
+        model?: ContentProps["model"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
         context?: ContentProps["context"];
@@ -12,7 +13,7 @@ declare const __propDef: {
         apiVersion?: ContentProps["apiVersion"];
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
-        model?: ContentProps["model"];
+        nonce?: ContentProps["nonce"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];

package/lib/edge/components/content-variants/content-variants.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { afterUpdate, onMount } from "svelte";
+<script>import { onMount } from "svelte";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -11,6 +11,7 @@ import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCoo
 export let canTrack = undefined;
 export let content = undefined;
 export let isNestedRender = undefined;
+export let nonce = undefined;
 export let model = undefined;
 export let data = undefined;
 export let context = undefined;
@@ -57,26 +58,32 @@ onMount(() => {
      */
     shouldRenderVariants = false;
 });
-afterUpdate(() => { });
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}
   <InlinedScript
     id="builderio-init-variants-fns"
     scriptStr={getInitVariantsFnsScriptString()}
+    nonce={nonce || ""}
   />
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedStyles id="builderio-variants" styles={hideVariantsStyleString()} />
+  <InlinedStyles
+    id="builderio-variants"
+    styles={hideVariantsStyleString()}
+    nonce={nonce || ""}
+  />
   <InlinedScript
     id="builderio-variants-visibility"
     scriptStr={updateCookieAndStylesScriptStr()}
+    nonce={nonce || ""}
   />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent
       {isNestedRender}
+      {nonce}
       content={variant}
       showContent={false}
       {model}
@@ -99,6 +106,7 @@ afterUpdate(() => { });
   {/each}
 {/if}
 <ContentComponent
+  {nonce}
   {isNestedRender}
   {...{}}
   content={defaultContent()}

package/lib/edge/components/content-variants/content-variants.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         canTrack?: VariantsProviderProps["canTrack"];
         content?: VariantsProviderProps["content"];
         isNestedRender?: VariantsProviderProps["isNestedRender"];
+        nonce?: VariantsProviderProps["nonce"];
         model?: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];

package/lib/edge/components/content-variants/content-variants.types.d.ts

@@ -68,4 +68,8 @@ export 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;
 }

package/lib/edge/components/inlined-script.svelte

@@ -2,6 +2,7 @@
 
 <script>export let scriptStr;
 export let id;
+export let nonce;
 </script>
 
-{@html `<script  data-id=${id}>${scriptStr}</script>`}
+{@html `<script  data-id=${id}  nonce=${nonce || ""}>${scriptStr}</script>`}

package/lib/edge/components/inlined-script.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
-interface Props {
+interface Props extends BuilderNonceProp {
     scriptStr: string;
     id: string;
 }
+import type { BuilderNonceProp } from "../types/builder-props";
 declare const __propDef: {
     props: {
         scriptStr: Props["scriptStr"];
         id: Props["id"];
+        nonce: Props["nonce"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/edge/components/inlined-styles.svelte

@@ -2,6 +2,7 @@
 
 <script>export let styles;
 export let id;
+export let nonce;
 </script>
 
-{@html `<${"style"}  data-id=${id}  >${styles}<${"/style"}>`}
+{@html `<${"style"}  data-id=${id}  nonce=${nonce}  >${styles}<${"/style"}>`}

package/lib/edge/components/inlined-styles.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
-interface Props {
+interface Props extends BuilderNonceProp {
     styles: string;
     id: string;
 }
+import type { BuilderNonceProp } from "../types/builder-props";
 declare const __propDef: {
     props: {
         styles: Props["styles"];
         id: Props["id"];
+        nonce: Props["nonce"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.0";
+export declare const SDK_VERSION = "2.0.2";