@builder.io/sdk-svelte 3.0.6 → 3.0.7

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

@@ -24,9 +24,11 @@ $: css = () => {
     const styles = processedBlock.responsiveStyles;
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
         return "";
@@ -51,6 +53,13 @@ $: css = () => {
             mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
         })
         : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint
+        ? createCssClass({
+            className,
+            styles: xsmallStyles,
+            mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints),
+        })
+        : "";
     const hoverAnimation = processedBlock.animations &&
         processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
@@ -72,6 +81,7 @@ $: css = () => {
         largeStylesClass,
         mediumStylesClass,
         smallStylesClass,
+        xsmallStylesClass,
         hoverStylesClass,
     ].join(" ");
 };

package/lib/browser/constants/device-sizes.d.ts

@@ -1,4 +1,4 @@
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
     min: number;
     default: number;
@@ -6,8 +6,9 @@ interface Size {
 }
 export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
 interface Breakpoints {
+    xsmall?: number;
     small?: number;
     medium?: number;
 }
-export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export declare const getSizesForBreakpoints: (breakpoints: Breakpoints) => Record<SizeName, Size>;
 export {};

package/lib/browser/constants/device-sizes.js

@@ -1,7 +1,12 @@
 import { fastClone } from '../functions/fast-clone';
 const SIZES = {
+    xsmall: {
+        min: 0,
+        default: 160,
+        max: 320
+    },
     small: {
-        min: 320,
+        min: 321,
         default: 321,
         max: 640
     },
@@ -17,12 +22,24 @@ const SIZES = {
     }
 };
 export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-export const getSizesForBreakpoints = ({ small, medium }) => {
+export const getSizesForBreakpoints = (breakpoints) => {
     const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+    if (!breakpoints) {
+        return newSizes;
+    }
+    const { xsmall, small, medium } = breakpoints;
+    if (xsmall) {
+        const xsmallMin = Math.floor(xsmall / 2);
+        newSizes.xsmall = {
+            max: xsmall,
+            min: xsmallMin,
+            default: xsmallMin + 1
+        };
+    }
     if (!small || !medium) {
         return newSizes;
     }
-    const smallMin = Math.floor(small / 2);
+    const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
     newSizes.small = {
         max: small,
         min: smallMin,

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.6";
+export declare const SDK_VERSION = "3.0.7";

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

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.6";
+export const SDK_VERSION = "3.0.7";

package/lib/browser/scripts/init-editing.js

@@ -43,6 +43,7 @@ export const setupBrowserForEditing = (options = {}) => {
                 // scope our '+ add block' button styling
                 supportsAddBlockScoping: true,
                 supportsCustomBreakpoints: true,
+                supportsXSmallBreakpoint: TARGET === 'reactNative' ? false : true,
                 blockLevelPersonalization: true
             }
         }, '*');

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

@@ -37,7 +37,6 @@ export interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {

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

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block';
 import type { Input } from './input';
 import type { Nullable } from './typescript';
 export interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }

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

@@ -24,9 +24,11 @@ $: css = () => {
     const styles = processedBlock.responsiveStyles;
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
         return "";
@@ -51,6 +53,13 @@ $: css = () => {
             mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
         })
         : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint
+        ? createCssClass({
+            className,
+            styles: xsmallStyles,
+            mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints),
+        })
+        : "";
     const hoverAnimation = processedBlock.animations &&
         processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
@@ -72,6 +81,7 @@ $: css = () => {
         largeStylesClass,
         mediumStylesClass,
         smallStylesClass,
+        xsmallStylesClass,
         hoverStylesClass,
     ].join(" ");
 };

package/lib/edge/constants/device-sizes.d.ts

@@ -1,4 +1,4 @@
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
     min: number;
     default: number;
@@ -6,8 +6,9 @@ interface Size {
 }
 export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
 interface Breakpoints {
+    xsmall?: number;
     small?: number;
     medium?: number;
 }
-export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export declare const getSizesForBreakpoints: (breakpoints: Breakpoints) => Record<SizeName, Size>;
 export {};

package/lib/edge/constants/device-sizes.js

@@ -1,7 +1,12 @@
 import { fastClone } from '../functions/fast-clone';
 const SIZES = {
+    xsmall: {
+        min: 0,
+        default: 160,
+        max: 320
+    },
     small: {
-        min: 320,
+        min: 321,
         default: 321,
         max: 640
     },
@@ -17,12 +22,24 @@ const SIZES = {
     }
 };
 export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-export const getSizesForBreakpoints = ({ small, medium }) => {
+export const getSizesForBreakpoints = (breakpoints) => {
     const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+    if (!breakpoints) {
+        return newSizes;
+    }
+    const { xsmall, small, medium } = breakpoints;
+    if (xsmall) {
+        const xsmallMin = Math.floor(xsmall / 2);
+        newSizes.xsmall = {
+            max: xsmall,
+            min: xsmallMin,
+            default: xsmallMin + 1
+        };
+    }
     if (!small || !medium) {
         return newSizes;
     }
-    const smallMin = Math.floor(small / 2);
+    const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
     newSizes.small = {
         max: small,
         min: smallMin,

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.6";
+export declare const SDK_VERSION = "3.0.7";

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

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.6";
+export const SDK_VERSION = "3.0.7";

package/lib/edge/scripts/init-editing.js

@@ -43,6 +43,7 @@ export const setupBrowserForEditing = (options = {}) => {
                 // scope our '+ add block' button styling
                 supportsAddBlockScoping: true,
                 supportsCustomBreakpoints: true,
+                supportsXSmallBreakpoint: TARGET === 'reactNative' ? false : true,
                 blockLevelPersonalization: true
             }
         }, '*');

package/lib/edge/types/builder-block.d.ts

@@ -37,7 +37,6 @@ export interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {

package/lib/edge/types/builder-content.d.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block';
 import type { Input } from './input';
 import type { Nullable } from './typescript';
 export interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }

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

@@ -24,9 +24,11 @@ $: css = () => {
     const styles = processedBlock.responsiveStyles;
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
         return "";
@@ -51,6 +53,13 @@ $: css = () => {
             mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
         })
         : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint
+        ? createCssClass({
+            className,
+            styles: xsmallStyles,
+            mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints),
+        })
+        : "";
     const hoverAnimation = processedBlock.animations &&
         processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
@@ -72,6 +81,7 @@ $: css = () => {
         largeStylesClass,
         mediumStylesClass,
         smallStylesClass,
+        xsmallStylesClass,
         hoverStylesClass,
     ].join(" ");
 };

package/lib/node/constants/device-sizes.d.ts

@@ -1,4 +1,4 @@
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
     min: number;
     default: number;
@@ -6,8 +6,9 @@ interface Size {
 }
 export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
 interface Breakpoints {
+    xsmall?: number;
     small?: number;
     medium?: number;
 }
-export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export declare const getSizesForBreakpoints: (breakpoints: Breakpoints) => Record<SizeName, Size>;
 export {};

package/lib/node/constants/device-sizes.js

@@ -1,7 +1,12 @@
 import { fastClone } from '../functions/fast-clone';
 const SIZES = {
+    xsmall: {
+        min: 0,
+        default: 160,
+        max: 320
+    },
     small: {
-        min: 320,
+        min: 321,
         default: 321,
         max: 640
     },
@@ -17,12 +22,24 @@ const SIZES = {
     }
 };
 export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-export const getSizesForBreakpoints = ({ small, medium }) => {
+export const getSizesForBreakpoints = (breakpoints) => {
     const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+    if (!breakpoints) {
+        return newSizes;
+    }
+    const { xsmall, small, medium } = breakpoints;
+    if (xsmall) {
+        const xsmallMin = Math.floor(xsmall / 2);
+        newSizes.xsmall = {
+            max: xsmall,
+            min: xsmallMin,
+            default: xsmallMin + 1
+        };
+    }
     if (!small || !medium) {
         return newSizes;
     }
-    const smallMin = Math.floor(small / 2);
+    const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
     newSizes.small = {
         max: small,
         min: smallMin,

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.6";
+export declare const SDK_VERSION = "3.0.7";

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

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.6";
+export const SDK_VERSION = "3.0.7";

package/lib/node/scripts/init-editing.js

@@ -43,6 +43,7 @@ export const setupBrowserForEditing = (options = {}) => {
                 // scope our '+ add block' button styling
                 supportsAddBlockScoping: true,
                 supportsCustomBreakpoints: true,
+                supportsXSmallBreakpoint: TARGET === 'reactNative' ? false : true,
                 blockLevelPersonalization: true
             }
         }, '*');

package/lib/node/types/builder-block.d.ts

@@ -37,7 +37,6 @@ export interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {

package/lib/node/types/builder-content.d.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block';
 import type { Input } from './input';
 import type { Nullable } from './typescript';
 export interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }

package/package.json

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

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

@@ -39,9 +39,13 @@
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
     );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -72,6 +76,17 @@
           ),
         })
       : "";
+    const xsmallStylesClass =
+      xsmallStyles && contentHasXSmallBreakpoint
+        ? createCssClass({
+            className,
+            styles: xsmallStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "xsmall",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
     const hoverAnimation =
       processedBlock.animations &&
       processedBlock.animations.find((item) => item.trigger === "hover");
@@ -96,6 +111,7 @@
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass,
     ].join(" ");
   };

package/src/constants/device-sizes.ts

@@ -1,13 +1,18 @@
 import { fastClone } from '../functions/fast-clone';
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
   min: number;
   default: number;
   max: number;
 }
 const SIZES: Record<SizeName, Size> = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -24,19 +29,33 @@ const SIZES: Record<SizeName, Size> = {
 };
 export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 interface Breakpoints {
+  xsmall?: number;
   small?: number;
   medium?: number;
 }
-export const getSizesForBreakpoints = ({
-  small,
-  medium
-}: Breakpoints) => {
+export const getSizesForBreakpoints = (breakpoints: Breakpoints) => {
   const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
 
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.6"
+export const SDK_VERSION = "3.0.7"

package/src/scripts/init-editing.ts

@@ -48,6 +48,7 @@ export const setupBrowserForEditing = (options: {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === 'reactNative' ? false : true,
         blockLevelPersonalization: true
       }
     }, '*');

package/src/types/builder-block.ts

@@ -41,7 +41,6 @@ export interface BuilderBlock {
     large?: Partial<CSSStyleDeclaration>;
     medium?: Partial<CSSStyleDeclaration>;
     small?: Partial<CSSStyleDeclaration>;
-    /** @deprecated */
     xsmall?: Partial<CSSStyleDeclaration>;
   };
   component?: {

package/src/types/builder-content.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block';
 import type { Input } from './input';
 import type { Nullable } from './typescript';
 export interface Breakpoints {
+  xsmall?: number;
   small: number;
   medium: number;
 }