@builder.io/sdk-svelte 5.2.16 → 5.4.0

package/lib/node/helpers/bounded-cache.js

@@ -0,0 +1,12 @@
+export const createBoundedCache = (max) => {
+    const map = new Map();
+    return {
+        get: (key) => map.get(key),
+        set: (key, value) => {
+            if (!map.has(key) && map.size >= max) {
+                map.delete(map.keys().next().value);
+            }
+            map.set(key, value);
+        }
+    };
+};

package/lib/node/helpers/copy-plain-data.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Deep-copies plain objects and arrays (anything else is kept by reference), so
+ * that state writes made while rendering never reach the content object, which
+ * apps often cache and share between requests.
+ */
+export declare const copyPlainData: <T>(value: T, seen?: WeakMap<object, any>) => T;

package/lib/node/helpers/copy-plain-data.js

@@ -0,0 +1,40 @@
+/**
+ * Deep-copies plain objects and arrays (anything else is kept by reference), so
+ * that state writes made while rendering never reach the content object, which
+ * apps often cache and share between requests.
+ */
+export const copyPlainData = (value, seen = new WeakMap()) => {
+    if (value === null || typeof value !== 'object')
+        return value;
+    if (seen.has(value))
+        return seen.get(value);
+    if (Array.isArray(value)) {
+        const copy = [];
+        seen.set(value, copy);
+        for (let i = 0; i < value.length; i++) {
+            copy[i] = copyPlainData(value[i], seen);
+        }
+        return copy;
+    }
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== Object.prototype && proto !== null)
+        return value;
+    const copy = {};
+    seen.set(value, copy);
+    for (const key of Object.keys(value)) {
+        const copied = copyPlainData(value[key], seen);
+        if (key === '__proto__') {
+            // Assigning would call the prototype setter; JSON can carry `__proto__` as an own key.
+            Object.defineProperty(copy, key, {
+                value: copied,
+                enumerable: true,
+                writable: true,
+                configurable: true
+            });
+        }
+        else {
+            copy[key] = copied;
+        }
+    }
+    return copy;
+};

package/lib/node/index-helpers/blocks-exports.d.ts

@@ -7,6 +7,7 @@ export { default as Symbol } from '../blocks/symbol/index';
 export { default as Text } from '../blocks/text/index';
 export { default as Video } from '../blocks/video/index';
 export { default as Blocks } from '../components/blocks/index';
+export { default as BuilderScripts } from '../components/builder-scripts.svelte';
 export { default as Content } from '../components/content-variants/index';
 /**
  * Builder Context

package/lib/node/index-helpers/blocks-exports.js

@@ -7,6 +7,7 @@ export { default as Symbol } from '../blocks/symbol/index';
 export { default as Text } from '../blocks/text/index';
 export { default as Video } from '../blocks/video/index';
 export { default as Blocks } from '../components/blocks/index';
+export { default as BuilderScripts } from '../components/builder-scripts.svelte';
 export { default as Content } from '../components/content-variants/index';
 /**
  * Builder Context

package/package.json

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

package/src/blocks/symbol/symbol.helpers.ts

@@ -12,6 +12,13 @@ export interface SymbolInfo {
   ownerId?: string;
   global?: boolean;
 }
+const isSymbolContentBinding = (key: string) => {
+  const path = key.startsWith('component.') ? key.slice(10) : key;
+  return path === 'options.symbol' || path === 'options.symbol.content' || path.startsWith('options.symbol.content.');
+};
+
+// Bound symbol content is evaluated at render time, so it is not in the parent content JSON.
+export const isSymbolContentInlinedInParent = (symbol: SymbolInfo | undefined, bindings: Record<string, string> | undefined) => !!symbol?.content && !Object.keys(bindings || {}).some(isSymbolContentBinding);
 export const fetchSymbolContent = async ({
   builderContextValue,
   symbol

package/src/blocks/symbol/symbol.svelte

@@ -8,7 +8,10 @@
   import { getClassPropName } from "../../functions/get-class-prop-name";
   import type { Nullable } from "../../types/typescript";
   import { setAttrs } from "../helpers";
-  import { fetchSymbolContent } from "./symbol.helpers";
+  import {
+    fetchSymbolContent,
+    isSymbolContentInlinedInParent,
+  } from "./symbol.helpers";
   import type { SymbolProps } from "./symbol.types";
 
   export let symbol: SymbolProps["symbol"] = undefined;
@@ -75,6 +78,10 @@
   <ContentVariants
     nonce={$builderContext.nonce}
     isNestedRender={true}
+    isContentInlinedInParent={isSymbolContentInlinedInParent(
+      symbol,
+      builderBlock?.bindings
+    )}
     apiVersion={$builderContext.apiVersion}
     apiKey={symbol?.global && symbol?.ownerId
       ? symbol.ownerId

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

@@ -3,6 +3,7 @@ import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents
 import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getStyle } from '../../functions/get-style';
+import { isEditingOrPreviewing } from '../../functions/is-editing-or-previewing';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
 const checkIsComponentRestricted = (component: RegisteredComponent | null | undefined, model: string) => {
@@ -34,6 +35,28 @@ export const getComponent = ({
     return ref;
   }
 };
+
+// Reused per block so repeated items keep a stable block identity across renders.
+const BLOCKS_WITHOUT_REPEAT = new WeakMap<BuilderBlock, BuilderBlock>();
+const getBlockWithoutRepeat = (block: BuilderBlock) => {
+  if (isEditingOrPreviewing()) {
+    const {
+      repeat: _repeat,
+      ...rest
+    } = block;
+    return rest;
+  }
+  let blockWithoutRepeat = BLOCKS_WITHOUT_REPEAT.get(block);
+  if (!blockWithoutRepeat) {
+    const {
+      repeat: _repeat,
+      ...rest
+    } = block;
+    blockWithoutRepeat = rest;
+    BLOCKS_WITHOUT_REPEAT.set(block, blockWithoutRepeat);
+  }
+  return blockWithoutRepeat;
+};
 export const getRepeatItemData = ({
   block,
   context
@@ -46,8 +69,7 @@ export const getRepeatItemData = ({
    * which will not work if there is a repeat.
    */
   const {
-    repeat,
-    ...blockWithoutRepeat
+    repeat
   } = block;
   if (!repeat?.collection) {
     return undefined;
@@ -64,6 +86,7 @@ export const getRepeatItemData = ({
   }
   const collectionName = repeat.collection.split('.').pop();
   const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
+  const blockWithoutRepeat = getBlockWithoutRepeat(block);
   const repeatArray = itemsArray.map<RepeatData>((item, index) => ({
     context: {
       ...context,
@@ -101,11 +124,21 @@ export const provideLinkComponent = (block: RegisteredComponent | null | undefin
   };
   return {};
 };
+const FILTERED_REGISTERED_COMPONENTS = new WeakMap<RegisteredComponents, Map<string, RegisteredComponents>>();
 export const provideRegisteredComponents = (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents, model: string) => {
   if (block?.shouldReceiveBuilderProps?.builderComponents) {
-    const filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
-      return !checkIsComponentRestricted(component, model);
-    }));
+    let byModel = FILTERED_REGISTERED_COMPONENTS.get(registeredComponents);
+    if (!byModel) {
+      byModel = new Map();
+      FILTERED_REGISTERED_COMPONENTS.set(registeredComponents, byModel);
+    }
+    let filteredRegisteredComponents = byModel.get(model);
+    if (!filteredRegisteredComponents) {
+      filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
+        return !checkIsComponentRestricted(component, model);
+      }));
+      byModel.set(model, filteredRegisteredComponents);
+    }
     return {
       builderComponents: filteredRegisteredComponents
     };

package/src/components/block/block.svelte

@@ -103,7 +103,15 @@
       : [];
   };
   $: componentRefProps = () => {
-    return {
+    const deps: unknown[] = [
+      processedBlock(),
+      $context,
+      $context.rootState,
+      $context.localState,
+      registeredComponents,
+      linkComponent,
+    ];
+    const componentRefProps: ComponentProps = {
       blockChildren: processedBlock().children ?? [],
       componentRef: blockComponent?.()?.component,
       componentOptions: {
@@ -124,12 +132,17 @@
       includeBlockProps: blockComponent?.()?.noWrap === true,
       isInteractive: !(blockComponent?.()?.isRSC && TARGET === "rsc"),
     };
+    return componentRefProps;
   };
 
   let _processedBlock = {
     value: null as BuilderBlock | null,
     update: false,
   };
+  let _componentRefProps = {
+    value: null as ComponentProps | null,
+    deps: [] as unknown[],
+  };
 
   onMount(() => {
     const blockId = processedBlock().id;

package/src/components/builder-scripts.svelte

@@ -0,0 +1,57 @@
+<script context="module" lang="ts">
+  type BuilderScriptsProps = {
+    nonce?: string;
+    children?: any;
+  };
+
+  /**
+   * Emits the Variant Container and A/B test helper scripts once for all `Content` components inside it.
+   */
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import {
+    getInitPersonalizationVariantsFnsScriptString,
+    SDKS_SUPPORTING_PERSONALIZATION,
+  } from "../blocks/personalization-container/helpers";
+  import { TARGET } from "../constants/target";
+  import BuilderScriptsContext from "../context/builder-scripts.context";
+  import { isBrowser } from "../functions/is-browser";
+  import {
+    getInitVariantsFnsScriptString,
+    SDKS_SUPPORTING_BUILDER_SCRIPTS,
+  } from "./content-variants/helpers";
+  import InlinedScript from "./inlined-script.svelte";
+
+  export let nonce: BuilderScriptsProps["nonce"] = undefined;
+
+  let parentScriptsContext = getContext(BuilderScriptsContext.key);
+
+  let isSupported = SDKS_SUPPORTING_BUILDER_SCRIPTS.includes(TARGET);
+  let shouldRenderAbTestFns = TARGET !== "react" || !isBrowser();
+
+  setContext(BuilderScriptsContext.key, {
+    scriptsEmitted: isSupported,
+  });
+</script>
+
+{#if isSupported && !parentScriptsContext?.scriptsEmitted}
+  {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
+    <InlinedScript
+      id="builderio-init-personalization-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+    />
+  {/if}
+
+  {#if shouldRenderAbTestFns}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitVariantsFnsScriptString()}
+    />
+  {/if}
+{/if}
+<slot />

package/src/components/content/components/styles.helpers.ts

@@ -76,7 +76,7 @@ export const getCss = ({
   return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
 };
 const DEFAULT_STYLES = `
-.builder-button {
+:where(.builder-button) {
   all: unset;
 }
 

package/src/components/content/content.helpers.ts

@@ -1,19 +1,60 @@
-import type { BuilderRenderState } from '../../context/types';
+import type { BuilderRenderState, RegisteredComponent, RegisteredComponents } from '../../context/types';
+import { serializeIncludingFunctions } from '../../functions/register-component';
+import { copyPlainData } from '../../helpers/copy-plain-data';
 import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
+import type { ComponentInfo } from '../../types/components';
+import type { Dictionary, Nullable } from '../../types/typescript';
 import type { ContentProps } from './content.types';
+
+// Registrations are usually module constants, so their derived forms are built once per object.
+const SERIALIZED_COMPONENT_INFOS = new WeakMap<object, ComponentInfo>();
+const REGISTERED_COMPONENT_ENTRIES = new WeakMap<object, RegisteredComponent>();
+const getSerializedComponentInfo = (registration: RegisteredComponent): ComponentInfo => {
+  const cached = SERIALIZED_COMPONENT_INFOS.get(registration);
+  if (cached) return cached;
+  const {
+    component: _,
+    ...rest
+  } = registration;
+  const info: ComponentInfo = serializeIncludingFunctions((rest as ComponentInfo));
+  SERIALIZED_COMPONENT_INFOS.set(registration, info);
+  return info;
+};
+export const getRegisteredComponents = (registrations: RegisteredComponent[], wrapComponent: (component: any) => any): RegisteredComponents => {
+  const registeredComponents: RegisteredComponents = {};
+  for (const registration of registrations) {
+    let entry = REGISTERED_COMPONENT_ENTRIES.get(registration);
+    if (!entry) {
+      entry = ({
+        component: wrapComponent(registration.component),
+        ...getSerializedComponentInfo(registration)
+      } as RegisteredComponent);
+      REGISTERED_COMPONENT_ENTRIES.set(registration, entry);
+    }
+    registeredComponents[registration.name] = entry;
+  }
+  return registeredComponents;
+};
+export const getComponentInfos = (registrations: RegisteredComponent[]): Dictionary<ComponentInfo> => {
+  const componentInfos: Dictionary<ComponentInfo> = {};
+  for (const registration of registrations) {
+    componentInfos[registration.name] = getSerializedComponentInfo(registration);
+  }
+  return componentInfos;
+};
 export const getRootStateInitialValue = ({
   content,
   data,
   locale
 }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
   const defaultValues: BuilderRenderState = {};
-  const initialState = content?.data?.state || {};
+  const seen = new WeakMap<object, any>();
+  const initialState = copyPlainData(content?.data?.state || {}, seen);
 
   // set default values for content state inputs
   content?.data?.inputs?.forEach(input => {
     if (input.name && input.defaultValue !== undefined) {
-      defaultValues[input.name] = input.defaultValue;
+      defaultValues[input.name] = copyPlainData(input.defaultValue, seen);
     }
   });
   return {

package/src/components/content/content.svelte

@@ -8,13 +8,9 @@
   import type {
     BuilderContextInterface,
     BuilderRenderState,
-    RegisteredComponents,
   } from "../../context/types";
   import { evaluate } from "../../functions/evaluate/evaluate";
-  import { serializeIncludingFunctions } from "../../functions/register-component";
   import { logger } from "../../helpers/logger";
-  import type { ComponentInfo } from "../../types/components";
-  import type { Dictionary } from "../../types/typescript";
   import Blocks from "../blocks/blocks.svelte";
   import { getUpdateVariantVisibilityScript } from "../content-variants/helpers";
   import DynamicDiv from "../dynamic-div.svelte";
@@ -22,7 +18,9 @@
   import EnableEditor from "./components/enable-editor.svelte";
   import ContentStyles from "./components/styles.svelte";
   import {
+    getComponentInfos,
     getContentInitialValue,
+    getRegisteredComponents,
     getRootStateInitialValue,
   } from "./content.helpers";
   import type { ContentProps } from "./content.types";
@@ -62,18 +60,9 @@
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     contentId: content?.id!,
   });
-  let registeredComponents = [
-    ...getDefaultRegisteredComponents(),
-    ...(customComponents || []),
-  ].reduce<RegisteredComponents>(
-    (acc, { component, ...info }) => ({
-      ...acc,
-      [info.name]: {
-        component: component,
-        ...serializeIncludingFunctions(info),
-      },
-    }),
-    {}
+  let registeredComponents = getRegisteredComponents(
+    [...getDefaultRegisteredComponents(), ...(customComponents || [])],
+    (component) => component
   );
   let builderContextSignal = writable({
     content: getContentInitialValue({
@@ -91,16 +80,10 @@
     canTrack: canTrack,
     apiKey: apiKey,
     apiVersion: apiVersion,
-    componentInfos: [
+    componentInfos: getComponentInfos([
       ...getDefaultRegisteredComponents(),
       ...(customComponents || []),
-    ].reduce<Dictionary<ComponentInfo>>(
-      (acc, { component: _, ...info }) => ({
-        ...acc,
-        [info.name]: serializeIncludingFunctions(info),
-      }),
-      {}
-    ),
+    ]),
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},

package/src/components/content-variants/content-variants.svelte

@@ -4,11 +4,15 @@
      * For internal use only. Do not provide this prop.
      */
     isNestedRender?: boolean;
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    isContentInlinedInParent?: boolean;
   };
 </script>
 
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { getContext, onMount } from "svelte";
 
   import {
     SDKS_SUPPORTING_PERSONALIZATION,
@@ -16,6 +20,7 @@
     hasPersonalizationContainer,
   } from "../../blocks/personalization-container/helpers";
   import { TARGET } from "../../constants/target";
+  import BuilderScriptsContext from "../../context/builder-scripts.context";
   import { handleABTestingSync } from "../../helpers/ab-tests";
   import { getDefaultCanTrack } from "../../helpers/canTrack";
   import ContentComponent from "../content/content.svelte";
@@ -31,6 +36,8 @@
 
   export let canTrack: VariantsProviderProps["canTrack"] = undefined;
   export let content: VariantsProviderProps["content"];
+  export let isContentInlinedInParent: VariantsProviderProps["isContentInlinedInParent"] =
+    undefined;
   export let nonce: VariantsProviderProps["nonce"] = undefined;
   export let apiHost: VariantsProviderProps["apiHost"] = undefined;
   export let isNestedRender: VariantsProviderProps["isNestedRender"] =
@@ -55,6 +62,8 @@
     undefined;
   export let trustedHosts: VariantsProviderProps["trustedHosts"] = undefined;
 
+  let scriptsContext = getContext(BuilderScriptsContext.key);
+
   $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(
       getVariants(content).map((value) => ({
@@ -86,7 +95,9 @@
     content: content,
   });
   let shouldEmitPersonalizationFns =
-    TARGET !== "reactNative" && hasPersonalizationContainer(content);
+    TARGET !== "reactNative" &&
+    !isContentInlinedInParent &&
+    hasPersonalizationContainer(content);
 
   onMount(() => {
     /**
@@ -96,7 +107,7 @@
   });
 </script>
 
-{#if shouldEmitPersonalizationFns}
+{#if shouldEmitPersonalizationFns && !!!scriptsContext?.scriptsEmitted}
   {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
     <InlinedScript
       id="builderio-init-personalization-variants-fns"
@@ -107,11 +118,13 @@
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedScript
-    id="builderio-init-variants-fns"
-    scriptStr={getInitVariantsFnsScriptString()}
-    nonce={nonce || ""}
-  />
+  {#if !!!scriptsContext?.scriptsEmitted}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      scriptStr={getInitVariantsFnsScriptString()}
+      nonce={nonce || ""}
+    />
+  {/if}
   <InlinedStyles
     id="builderio-variants"
     styles={hideVariantsStyleString()}

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

@@ -13,6 +13,12 @@ import { UPDATE_COOKIES_AND_STYLES_SCRIPT, UPDATE_VARIANT_VISIBILITY_SCRIPT } fr
  */
 const UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = 'builderIoAbTest';
 const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'builderIoRenderContent';
+
+/**
+ * SDKs where `BuilderScripts` can dedupe helper scripts. Elsewhere `Content` cannot read its context
+ * (RSC server components, Angular DI) or has no inline scripts (React Native).
+ */
+export const SDKS_SUPPORTING_BUILDER_SCRIPTS = (['react', 'vue', 'svelte', 'solid', 'qwik'] as Target[]);
 export const getVariants = (content: Nullable<BuilderContent>) => Object.values(content?.variations || {}).map(variant => ({
   ...variant,
   testVariationId: variant.id,

package/src/constants/builder-registered-components.ts

@@ -24,42 +24,48 @@ import { default as Text } from '../blocks/text/index';
 import type { RegisteredComponent } from '../context/types';
 import { getExtraComponents } from './extra-components';
 import { TARGET } from './target';
+let DEFAULT_REGISTERED_COMPONENTS: RegisteredComponent[] | undefined;
 
 /**
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
+ * The list is built once, on first use, so its entries keep a stable identity.
  */
-export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () => [{
-  component: Button,
-  ...buttonComponentInfo
-}, {
-  component: Columns,
-  ...columnsComponentInfo
-}, {
-  component: Fragment,
-  ...fragmentComponentInfo
-}, {
-  component: Image,
-  ...imageComponentInfo
-}, {
-  component: Section,
-  ...sectionComponentInfo
-}, {
-  component: Slot,
-  ...slotComponentInfo
-}, {
-  component: Symbol,
-  ...symbolComponentInfo
-}, {
-  component: Text,
-  ...textComponentInfo
-}, ...(SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? [{
-  component: PersonalizationContainer,
-  ...personalizationContainerComponentInfo
-}] : []), ...(TARGET === 'rsc' ? [] : [{
-  component: Tabs,
-  ...tabsComponentInfo
-}, {
-  component: Accordion,
-  ...accordionComponentInfo
-}]), ...getExtraComponents()]
+export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () => {
+  if (DEFAULT_REGISTERED_COMPONENTS) return DEFAULT_REGISTERED_COMPONENTS;
+  DEFAULT_REGISTERED_COMPONENTS = [{
+    component: Button,
+    ...buttonComponentInfo
+  }, {
+    component: Columns,
+    ...columnsComponentInfo
+  }, {
+    component: Fragment,
+    ...fragmentComponentInfo
+  }, {
+    component: Image,
+    ...imageComponentInfo
+  }, {
+    component: Section,
+    ...sectionComponentInfo
+  }, {
+    component: Slot,
+    ...slotComponentInfo
+  }, {
+    component: Symbol,
+    ...symbolComponentInfo
+  }, {
+    component: Text,
+    ...textComponentInfo
+  }, ...(SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? [{
+    component: PersonalizationContainer,
+    ...personalizationContainerComponentInfo
+  }] : []), ...(TARGET === 'rsc' ? [] : [{
+    component: Tabs,
+    ...tabsComponentInfo
+  }, {
+    component: Accordion,
+    ...accordionComponentInfo
+  }]), ...getExtraComponents()];
+  return DEFAULT_REGISTERED_COMPONENTS;
+}

package/src/constants/device-sizes.ts

@@ -1,4 +1,3 @@
-import { fastClone } from '../functions/fast-clone';
 export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
   min: number;
@@ -34,8 +33,20 @@ interface Breakpoints {
   medium?: number;
 }
 export const getSizesForBreakpoints = (breakpoints: Breakpoints) => {
-  const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
-
+  const newSizes: Record<SizeName, Size> = {
+    xsmall: {
+      ...SIZES.xsmall
+    },
+    small: {
+      ...SIZES.small
+    },
+    medium: {
+      ...SIZES.medium
+    },
+    large: {
+      ...SIZES.large
+    }
+  };
   if (!breakpoints) {
     return newSizes;
   }

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.16"
+export const SDK_VERSION = "5.4.0"

package/src/context/builder-scripts.context.ts

@@ -0,0 +1,6 @@
+const key = Symbol();
+
+export default {
+  BuilderScripts: { scriptsEmitted: false },
+  key,
+};