@builder.io/sdk-svelte 2.0.0 → 2.0.2

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

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

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

@@ -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/node/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/node/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/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.2";

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

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

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.2",
   "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/image/image.svelte

@@ -38,6 +38,9 @@
     ) {
       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/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

@@ -28,6 +28,7 @@
 
   export let content: ContentProps["content"] = undefined;
   export let customComponents: ContentProps["customComponents"] = undefined;
+  export let model: ContentProps["model"] = undefined;
   export let data: ContentProps["data"] = undefined;
   export let locale: ContentProps["locale"] = undefined;
   export let context: ContentProps["context"] = undefined;
@@ -36,7 +37,7 @@
   export let apiVersion: ContentProps["apiVersion"] = undefined;
   export let blocksWrapper: ContentProps["blocksWrapper"] = undefined;
   export let blocksWrapperProps: ContentProps["blocksWrapperProps"] = undefined;
-  export let model: ContentProps["model"] = undefined;
+  export let nonce: ContentProps["nonce"] = undefined;
   export let enrich: ContentProps["enrich"] = undefined;
   export let showContent: ContentProps["showContent"];
   export let contentWrapper: ContentProps["contentWrapper"] = undefined;
@@ -59,7 +60,11 @@
   });
   let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents || []),
+    ...(customComponents?.filter(({ models }) => {
+      if (!models?.length) return true;
+      if (!model) return true;
+      return models.includes(model);
+    }) || []),
   ].reduce<RegisteredComponents>(
     (acc, { component, ...info }) => ({
       ...acc,
@@ -88,7 +93,11 @@
     apiVersion: apiVersion,
     componentInfos: [
       ...getDefaultRegisteredComponents(),
-      ...(customComponents || []),
+      ...(customComponents?.filter(({ models }) => {
+        if (!models?.length) return true;
+        if (!model) return true;
+        return models.includes(model);
+      }) || []),
     ].reduce<Dictionary<ComponentInfo>>(
       (acc, { component: _, ...info }) => ({
         ...acc,
@@ -99,6 +108,7 @@
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
+    nonce: nonce || "",
   });
 
   setContext(ComponentsContext.key, {
@@ -107,6 +117,7 @@
 </script>
 
 <EnableEditor
+  {nonce}
   {content}
   {data}
   {model}
@@ -123,10 +134,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

@@ -8,7 +8,7 @@
 </script>
 
 <script lang="ts">
-  import { afterUpdate, onMount } from "svelte";
+  import { onMount } from "svelte";
 
   import { TARGET } from "../../constants/target";
   import { handleABTestingSync } from "../../helpers/ab-tests";
@@ -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;
@@ -84,27 +85,32 @@
      */
     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}
@@ -127,6 +133,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.2"