@builder.io/sdk-svelte 1.1.2 → 2.0.1

package/lib/node/blocks/raw-text/component-info.js

@@ -1,10 +1,4 @@
 export const componentInfo = {
-    shouldReceiveBuilderProps: {
-        builderBlock: false,
-        builderContext: false,
-        builderComponents: false,
-        builderLinkComponent: false
-    },
     name: 'Builder:RawText',
     hideFromInsertMenu: true,
     inputs: [{

package/lib/node/blocks/section/component-info.js

@@ -1,10 +1,4 @@
 export const componentInfo = {
-    shouldReceiveBuilderProps: {
-        builderBlock: false,
-        builderContext: false,
-        builderComponents: false,
-        builderLinkComponent: false
-    },
     name: 'Core:Section',
     static: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a',

package/lib/node/blocks/slot/component-info.js

@@ -12,9 +12,6 @@ export const componentInfo = {
             defaultValue: 'children'
         }],
     shouldReceiveBuilderProps: {
-        builderBlock: false,
-        builderContext: true,
-        builderComponents: false,
-        builderLinkComponent: false
+        builderContext: true
     }
 };

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/blocks/text/component-info.js

@@ -1,10 +1,7 @@
 import { TARGET } from '../../constants/target';
 export const componentInfo = {
     shouldReceiveBuilderProps: {
-        builderBlock: TARGET === 'reactNative' ? true : false,
-        builderContext: false,
-        builderComponents: false,
-        builderLinkComponent: false
+        builderBlock: TARGET === 'reactNative' ? true : false
     },
     name: 'Text',
     static: true,

package/lib/node/blocks/video/component-info.js

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

package/lib/node/components/block/block.helpers.d.ts

@@ -17,22 +17,22 @@ export declare const getInheritedStyles: ({ block, context }: {
     context: BuilderContextInterface;
 }) => Partial<CSSStyleDeclaration>;
 export declare const provideLinkComponent: (block: RegisteredComponent | null | undefined, linkComponent: any) => {
-    builderLinkComponent?: undefined;
-} | {
     builderLinkComponent: any;
+} | {
+    builderLinkComponent?: undefined;
 };
 export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
-    builderComponents?: undefined;
-} | {
     builderComponents: RegisteredComponents;
+} | {
+    builderComponents?: undefined;
 };
 export declare const provideBuilderBlock: (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {
-    builderBlock?: undefined;
-} | {
     builderBlock: BuilderBlock;
+} | {
+    builderBlock?: undefined;
 };
 export declare const provideBuilderContext: (block: RegisteredComponent | null | undefined, context: Writable<BuilderContextInterface>) => {
-    builderContext?: undefined;
-} | {
     builderContext: Writable<BuilderContextInterface>;
+} | {
+    builderContext?: undefined;
 };

package/lib/node/components/block/block.helpers.js

@@ -73,54 +73,31 @@ export const getInheritedStyles = ({ block, context }) => {
     }
     return extractTextStyles(style);
 };
-const applyDefaults = (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, linkComponent) => {
-    if (!block)
-        return {};
-    const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderLinkComponent;
-    if (!shouldReceiveProp)
-        return {};
-    return {
-        builderLinkComponent: linkComponent
-    };
+    if (block?.shouldReceiveBuilderProps?.builderLinkComponent)
+        return {
+            builderLinkComponent: linkComponent
+        };
+    return {};
 };
 export const provideRegisteredComponents = (block, registeredComponents) => {
-    if (!block)
-        return {};
-    const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderComponents;
-    if (!shouldReceiveProp)
-        return {};
-    return {
-        builderComponents: registeredComponents
-    };
+    if (block?.shouldReceiveBuilderProps?.builderComponents)
+        return {
+            builderComponents: registeredComponents
+        };
+    return {};
 };
 export const provideBuilderBlock = (block, builderBlock) => {
-    if (!block)
-        return {};
-    const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderBlock;
-    if (!shouldReceiveProp)
-        return {};
-    return {
-        builderBlock
-    };
+    if (block?.shouldReceiveBuilderProps?.builderBlock)
+        return {
+            builderBlock
+        };
+    return {};
 };
 export const provideBuilderContext = (block, context) => {
-    if (!block)
-        return {};
-    const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderContext;
-    if (!shouldReceiveProp)
-        return {};
-    return {
-        builderContext: context
-    };
+    if (block?.shouldReceiveBuilderProps?.builderContext)
+        return {
+            builderContext: context
+        };
+    return {};
 };

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 = "1.1.2";
+export declare const SDK_VERSION = "2.0.1";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.1.2";
+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": "1.1.2",
+  "version": "2.0.1",
   "type": "module",
   "files": [
     "lib",

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

@@ -33,9 +33,6 @@ export const componentInfo: ComponentInfo = {
   static: true,
   noWrap: true,
   shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
     builderLinkComponent: true
   }
 }

package/src/blocks/columns/columns.svelte

@@ -45,8 +45,9 @@
     return cols[index]?.width || 100 / cols.length;
   }
   function getColumnCssWidth(index: number) {
-    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
-    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+    const width = getWidth(index);
+    const subtractWidth = gutterSize * (cols.length - 1) * (width / 100);
+    return `calc(${width}% - ${subtractWidth}px)`;
   }
   function getTabletStyle({
     stackedStyle,
@@ -172,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/custom-code/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Custom Code',
   static: true,
   requiredPermissions: ['editCode'],

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

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Embed',
   static: true,
   inputs: [{

package/src/blocks/form/input/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Form:Input',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
   inputs: [{

package/src/blocks/form/select/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Form:Select',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
   defaultStyles: {

package/src/blocks/form/submit-button/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Form:SubmitButton',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
   defaultStyles: {

package/src/blocks/form/textarea/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Form:TextArea',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
   inputs: [{

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

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Fragment',
   static: true,
   hidden: true,

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

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

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

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   // friendlyName?
   name: 'Raw:Img',
   hideFromInsertMenu: true,

package/src/blocks/raw-text/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Builder:RawText',
   hideFromInsertMenu: true,
   inputs: [{

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

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Core:Section',
   static: true,
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a',

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

@@ -13,9 +13,6 @@ export const componentInfo: ComponentInfo = {
     defaultValue: 'children'
   }],
   shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: true,
-    builderComponents: false,
-    builderLinkComponent: false
+    builderContext: true
   }
 }

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/blocks/text/component-info.ts

@@ -2,10 +2,7 @@ import { TARGET } from '../../constants/target';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   shouldReceiveBuilderProps: {
-    builderBlock: TARGET === 'reactNative' ? true : false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
+    builderBlock: TARGET === 'reactNative' ? true : false
   },
   name: 'Text',
   static: true,