@builder.io/sdk-svelte 2.0.0 → 2.0.1

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/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

@@ -22,6 +22,7 @@ export let apiKey;
 export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
+export let nonce = undefined;
 export let model = undefined;
 export let enrich = undefined;
 export let showContent;
@@ -76,6 +77,7 @@ let builderContextSignal = writable({
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
+    nonce: nonce || "",
 });
 setContext(ComponentsContext.key, {
     registeredComponents: registeredComponents,
@@ -83,6 +85,7 @@ setContext(ComponentsContext.key, {
 </script>
 
 <EnableEditor
+  {nonce}
   {content}
   {data}
   {model}
@@ -99,10 +102,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

@@ -12,6 +12,7 @@ declare const __propDef: {
         apiVersion?: ContentProps["apiVersion"];
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
+        nonce?: ContentProps["nonce"];
         model?: ContentProps["model"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];

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

@@ -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;
@@ -64,19 +65,26 @@ afterUpdate(() => { });
   <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 +107,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.1";

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

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

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/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

@@ -22,6 +22,7 @@ export let apiKey;
 export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
+export let nonce = undefined;
 export let model = undefined;
 export let enrich = undefined;
 export let showContent;
@@ -76,6 +77,7 @@ let builderContextSignal = writable({
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
+    nonce: nonce || "",
 });
 setContext(ComponentsContext.key, {
     registeredComponents: registeredComponents,
@@ -83,6 +85,7 @@ setContext(ComponentsContext.key, {
 </script>
 
 <EnableEditor
+  {nonce}
   {content}
   {data}
   {model}
@@ -99,10 +102,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

@@ -12,6 +12,7 @@ declare const __propDef: {
         apiVersion?: ContentProps["apiVersion"];
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
+        nonce?: ContentProps["nonce"];
         model?: ContentProps["model"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];

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

@@ -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;
@@ -64,19 +65,26 @@ afterUpdate(() => { });
   <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 +107,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.1";

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

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

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

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

package/lib/edge/context/builder.context.js

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

package/lib/edge/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/edge/types/builder-props.d.ts

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

package/lib/node/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/node/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/node/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/node/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/node/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/node/components/content/content.svelte

@@ -22,6 +22,7 @@ export let apiKey;
 export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
+export let nonce = undefined;
 export let model = undefined;
 export let enrich = undefined;
 export let showContent;
@@ -76,6 +77,7 @@ let builderContextSignal = writable({
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
+    nonce: nonce || "",
 });
 setContext(ComponentsContext.key, {
     registeredComponents: registeredComponents,
@@ -83,6 +85,7 @@ setContext(ComponentsContext.key, {
 </script>
 
 <EnableEditor
+  {nonce}
   {content}
   {data}
   {model}
@@ -99,10 +102,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/node/components/content/content.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         apiVersion?: ContentProps["apiVersion"];
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
+        nonce?: ContentProps["nonce"];
         model?: ContentProps["model"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];

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

@@ -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;
@@ -64,19 +65,26 @@ afterUpdate(() => { });
   <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 +107,7 @@ afterUpdate(() => { });
   {/each}
 {/if}
 <ContentComponent
+  {nonce}
   {isNestedRender}
   {...{}}
   content={defaultContent()}

package/lib/node/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/node/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/node/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/node/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/node/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/node/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/node/constants/sdk-version.d.ts

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

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

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

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

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

package/lib/node/context/builder.context.js

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

package/lib/node/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/node/types/builder-props.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/columns/columns.svelte

@@ -173,7 +173,11 @@
   {...{}}
 >
   {#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/src/blocks/symbol/symbol.svelte

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

package/src/components/block/components/block-styles.svelte

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

package/src/components/content/components/styles.svelte

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  interface Props {
+  interface Props extends BuilderNonceProp {
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
@@ -8,6 +8,7 @@
 </script>
 
 <script lang="ts">
+  import type { BuilderNonceProp } from "../../../types/builder-props";
   import InlinedStyles from "../../inlined-styles.svelte";
   import type { CustomFont } from "./styles.helpers";
   import { getCss, getDefaultStyles, getFontCss } from "./styles.helpers";
@@ -16,6 +17,7 @@
   export let contentId: Props["contentId"] = undefined;
   export let customFonts: Props["customFonts"] = undefined;
   export let isNestedRender: Props["isNestedRender"] = undefined;
+  export let nonce: Props["nonce"];
 
   let injectedStyles = `
 ${getCss({
@@ -29,4 +31,4 @@ ${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 
-<InlinedStyles id="builderio-content" styles={injectedStyles} />
+<InlinedStyles id="builderio-content" styles={injectedStyles} {nonce} />

package/src/components/content/content.svelte

@@ -36,6 +36,7 @@
   export let apiVersion: ContentProps["apiVersion"] = undefined;
   export let blocksWrapper: ContentProps["blocksWrapper"] = undefined;
   export let blocksWrapperProps: ContentProps["blocksWrapperProps"] = undefined;
+  export let nonce: ContentProps["nonce"] = undefined;
   export let model: ContentProps["model"] = undefined;
   export let enrich: ContentProps["enrich"] = undefined;
   export let showContent: ContentProps["showContent"];
@@ -99,6 +100,7 @@
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
+    nonce: nonce || "",
   });
 
   setContext(ComponentsContext.key, {
@@ -107,6 +109,7 @@
 </script>
 
 <EnableEditor
+  {nonce}
   {content}
   {data}
   {model}
@@ -123,10 +126,15 @@
   {...{}}
 >
   {#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/src/components/content-variants/content-variants.svelte

@@ -28,6 +28,7 @@
   export let content: VariantsProviderProps["content"] = undefined;
   export let isNestedRender: VariantsProviderProps["isNestedRender"] =
     undefined;
+  export let nonce: VariantsProviderProps["nonce"] = undefined;
   export let model: VariantsProviderProps["model"] = undefined;
   export let data: VariantsProviderProps["data"] = undefined;
   export let context: VariantsProviderProps["context"] = undefined;
@@ -92,19 +93,26 @@
   <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}
@@ -127,6 +135,7 @@
   {/each}
 {/if}
 <ContentComponent
+  {nonce}
   {isNestedRender}
   {...{}}
   content={defaultContent()}

package/src/components/content-variants/content-variants.types.ts

@@ -81,4 +81,9 @@ 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/src/components/inlined-script.svelte

@@ -1,13 +1,16 @@
 <script context="module" lang="ts">
-  interface Props {
+  interface Props extends BuilderNonceProp {
     scriptStr: string;
     id: string;
   }
 </script>
 
 <script lang="ts">
+  import type { BuilderNonceProp } from "../types/builder-props";
+
   export let scriptStr: Props["scriptStr"];
   export let id: Props["id"];
+  export let nonce: Props["nonce"];
 </script>
 
-{@html `<script  data-id=${id}>${scriptStr}</script>`}
+{@html `<script  data-id=${id}  nonce=${nonce || ""}>${scriptStr}</script>`}

package/src/components/inlined-styles.svelte

@@ -1,13 +1,16 @@
 <script context="module" lang="ts">
-  interface Props {
+  interface Props extends BuilderNonceProp {
     styles: string;
     id: string;
   }
 </script>
 
 <script lang="ts">
+  import type { BuilderNonceProp } from "../types/builder-props";
+
   export let styles: Props["styles"];
   export let id: Props["id"];
+  export let nonce: Props["nonce"];
 </script>
 
-{@html `<${"style"}  data-id=${id}  >${styles}<${"/style"}>`}
+{@html `<${"style"}  data-id=${id}  nonce=${nonce}  >${styles}<${"/style"}>`}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.0"
+export const SDK_VERSION = "2.0.1"

package/src/context/builder.context.ts

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

package/src/context/types.ts

@@ -34,5 +34,6 @@ export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'Block
   componentInfos: Dictionary<ComponentInfo>;
   // Used to recursively store all CSS coming from a parent that would apply to a Text block
   inheritedStyles: Record<string, unknown>;
+  nonce: string;
   canTrack?: boolean;
 }

package/src/types/builder-props.ts

@@ -10,4 +10,7 @@ export type BuilderComponentsProp = {
 };
 export type BuilderLinkComponentProp = {
   builderLinkComponent?: any;
+};
+export type BuilderNonceProp = {
+  nonce: string;
 }