@builder.io/sdk-svelte 5.2.16 → 5.3.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/package.json

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

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/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/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.3.0"

package/src/functions/evaluate/browser-runtime/browser.ts

@@ -1,5 +1,18 @@
+import { createBoundedCache } from '../../../helpers/bounded-cache';
 import type { ExecutorArgs } from '../helpers';
 import { flattenState, getFunctionArguments } from '../helpers';
+const MAX_CACHED_FUNCTIONS = 5000;
+const FUNCTION_CACHE = createBoundedCache<(...args: any[]) => any>(MAX_CACHED_FUNCTIONS);
+
+// `getFunctionArguments` always returns the same argument names, so `code` alone is the key.
+const getCompiledFunction = (argNames: string[], code: string) => {
+  let fn = FUNCTION_CACHE.get(code);
+  if (!fn) {
+    fn = (new Function(...argNames, code) as (...args: any[]) => any);
+    FUNCTION_CACHE.set(code, fn);
+  }
+  return fn;
+};
 export const runInBrowser = ({
   code,
   builder,
@@ -19,5 +32,5 @@ export const runInBrowser = ({
       rootSetState
     })
   });
-  return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
+  return getCompiledFunction(functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
 }

package/src/functions/evaluate/evaluate.ts

@@ -1,3 +1,4 @@
+import { createBoundedCache } from '../../helpers/bounded-cache';
 import { logger } from '../../helpers/logger';
 import { get } from '../get';
 import { chooseBrowserOrServerEval } from './choose-eval';
@@ -20,6 +21,25 @@ const VIRTUAL_INDEX_REGEX = /(\s)*var(\s)+_virtual_index(\s)*=(\s)*state(?<getPa
 export const getSimpleExpressionGetPath = (code: string) => {
   return STATE_GETTER_REGEX.exec(code.trim())?.groups?.getPath?.slice(1) || VIRTUAL_INDEX_REGEX.exec(code.trim())?.groups?.getPath?.slice(1);
 };
+const MAX_CACHED_CODE_STRINGS = 5000;
+const SIMPLE_GET_PATH_CACHE = createBoundedCache<string | null>(MAX_CACHED_CODE_STRINGS);
+const getCachedSimpleExpressionGetPath = (code: string) => {
+  let getPath = SIMPLE_GET_PATH_CACHE.get(code);
+  if (getPath === undefined) {
+    getPath = getSimpleExpressionGetPath(code) || null;
+    SIMPLE_GET_PATH_CACHE.set(code, getPath);
+  }
+  return getPath;
+};
+
+/**
+ * Same result as `get({ ...rootState, ...localState }, getPath)`, without copying every state key.
+ */
+const getSimpleStateValue = (rootState: EvaluatorArgs['rootState'], localState: EvaluatorArgs['localState'], getPath: string) => {
+  const firstKey = getPath.split('.')[0];
+  const source = localState && Object.prototype.hasOwnProperty.call(localState, firstKey) ? localState : rootState;
+  return get(source, getPath);
+};
 export function evaluate({
   code,
   context,
@@ -40,12 +60,9 @@ export function evaluate({
    * We try not to take many risks with this optimizations, so we only do it for
    * `state.{path}` expressions.
    */
-  const getPath = getSimpleExpressionGetPath(code.trim());
+  const getPath = getCachedSimpleExpressionGetPath(code.trim());
   if (getPath) {
-    return get({
-      ...rootState,
-      ...localState
-    }, getPath);
+    return getSimpleStateValue(rootState, localState, getPath);
   }
   const args: ExecutorArgs = {
     code: parseCode(code, {