@builder.io/sdk-svelte 1.1.2 → 2.0.1

package/src/blocks/video/component-info.ts

@@ -81,9 +81,6 @@ export const componentInfo: ComponentInfo = {
     advanced: true
   }],
   shouldReceiveBuilderProps: {
-    builderBlock: true,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
+    builderBlock: true
   }
 }

package/src/components/block/block.helpers.ts

@@ -4,7 +4,6 @@ import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getProcessedBlock } from '../../functions/get-processed-block';
 import { getStyle } from '../../functions/get-style';
-import type { ComponentInfo } from '../../server-index';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
 export const getComponent = ({
@@ -100,46 +99,27 @@ export const getInheritedStyles = ({
   }
   return extractTextStyles(style);
 };
-const applyDefaults = (shouldReceiveBuilderProps: ComponentInfo['shouldReceiveBuilderProps']) => {
-  return {
-    // once we bump to a major version, toggle this to `false`.
-    builderBlock: true,
-    // once we bump to a major version, toggle this to `false`.
-    builderContext: true,
-    builderComponents: false,
-    builderLinkComponent: false,
-    ...shouldReceiveBuilderProps
-  };
-};
 export const provideLinkComponent = (block: RegisteredComponent | null | undefined, linkComponent: any) => {
-  if (!block) return {};
-  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderLinkComponent;
-  if (!shouldReceiveProp) return {};
-  return {
+  if (block?.shouldReceiveBuilderProps?.builderLinkComponent) return {
     builderLinkComponent: linkComponent
   };
+  return {};
 };
 export const provideRegisteredComponents = (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
-  if (!block) return {};
-  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderComponents;
-  if (!shouldReceiveProp) return {};
-  return {
+  if (block?.shouldReceiveBuilderProps?.builderComponents) return {
     builderComponents: registeredComponents
   };
+  return {};
 };
 export const provideBuilderBlock = (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {
-  if (!block) return {};
-  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderBlock;
-  if (!shouldReceiveProp) return {};
-  return {
+  if (block?.shouldReceiveBuilderProps?.builderBlock) return {
     builderBlock
   };
+  return {};
 };
 export const provideBuilderContext = (block: RegisteredComponent | null | undefined, context: Writable<BuilderContextInterface>) => {
-  if (!block) return {};
-  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderContext;
-  if (!shouldReceiveProp) return {};
-  return {
+  if (block?.shouldReceiveBuilderProps?.builderContext) return {
     builderContext: context
   };
+  return {};
 }

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 = "1.1.2"
+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;
 }