@builder.io/sdk-svelte 5.2.15 → 5.3.0

package/README.md

@@ -2,6 +2,10 @@
 
 This is Builder's Svelte SDK.
 
+## Minimum supported version
+
+The [`peerDependencies`](./package.json) permit **Svelte 4.1.2 through 4.x** (`^4.1.2`, not Svelte 5). This installation range does not establish an actively supported minimum; see the [framework version matrix](../../README.md#framework-version-guidance).
+
 ## Mitosis
 
 This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).

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

@@ -22,9 +22,7 @@ export declare const provideLinkComponent: (block: RegisteredComponent | null |
     builderLinkComponent?: undefined;
 };
 export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents, model: string) => {
-    builderComponents: {
-        [k: string]: RegisteredComponent;
-    };
+    builderComponents: RegisteredComponents;
 } | {
     builderComponents?: undefined;
 };

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

@@ -1,6 +1,7 @@
 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';
 const checkIsComponentRestricted = (component, model) => {
     if (!component)
         return true;
@@ -25,12 +26,27 @@ export const getComponent = ({ block, registeredComponents, model }) => {
         return ref;
     }
 };
+// Reused per block so repeated items keep a stable block identity across renders.
+const BLOCKS_WITHOUT_REPEAT = new WeakMap();
+const getBlockWithoutRepeat = (block) => {
+    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 }) => {
     /**
      * we don't use `state.processedBlock` here because the processing done within its logic includes evaluating the block's bindings,
      * which will not work if there is a repeat.
      */
-    const { repeat, ...blockWithoutRepeat } = block;
+    const { repeat } = block;
     if (!repeat?.collection) {
         return undefined;
     }
@@ -46,6 +62,7 @@ export const getRepeatItemData = ({ block, context }) => {
     }
     const collectionName = repeat.collection.split('.').pop();
     const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
+    const blockWithoutRepeat = getBlockWithoutRepeat(block);
     const repeatArray = itemsArray.map((item, index) => ({
         context: {
             ...context,
@@ -78,11 +95,21 @@ export const provideLinkComponent = (block, linkComponent) => {
         };
     return {};
 };
+const FILTERED_REGISTERED_COMPONENTS = new WeakMap();
 export const provideRegisteredComponents = (block, registeredComponents, model) => {
     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/lib/browser/components/block/block.svelte

@@ -73,7 +73,15 @@ $: childrenWithoutParentComponent = () => {
         : [];
 };
 $: componentRefProps = () => {
-    return {
+    const deps = [
+        processedBlock(),
+        $context,
+        $context.rootState,
+        $context.localState,
+        registeredComponents,
+        linkComponent,
+    ];
+    const componentRefProps = {
         blockChildren: processedBlock().children ?? [],
         componentRef: blockComponent?.()?.component,
         componentOptions: {
@@ -90,11 +98,16 @@ $: componentRefProps = () => {
         includeBlockProps: blockComponent?.()?.noWrap === true,
         isInteractive: !(blockComponent?.()?.isRSC && TARGET === "rsc"),
     };
+    return componentRefProps;
 };
 let _processedBlock = {
     value: null,
     update: false,
 };
+let _componentRefProps = {
+    value: null,
+    deps: [],
+};
 onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;

package/lib/browser/components/content/components/styles.helpers.d.ts

@@ -13,5 +13,5 @@ export declare const getCss: ({ cssCode, contentId }: {
     cssCode?: string | undefined;
     contentId?: string | undefined;
 }) => string;
-export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n.builder-button {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";
+export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n:where(.builder-button) {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";
 export declare const getWrapperClassName: (variationId?: string) => string;

package/lib/browser/components/content/components/styles.helpers.js

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

package/lib/browser/components/content/content.helpers.d.ts

@@ -1,6 +1,10 @@
+import type { RegisteredComponent, RegisteredComponents } from '../../context/types';
 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';
+export declare const getRegisteredComponents: (registrations: RegisteredComponent[], wrapComponent: (component: any) => any) => RegisteredComponents;
+export declare const getComponentInfos: (registrations: RegisteredComponent[]) => Dictionary<ComponentInfo>;
 export declare const getRootStateInitialValue: ({ content, data, locale }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
     locale?: string | undefined;
 };

package/lib/browser/components/content/content.helpers.js

@@ -1,10 +1,47 @@
+import { serializeIncludingFunctions } from '../../functions/register-component';
+import { copyPlainData } from '../../helpers/copy-plain-data';
+// Registrations are usually module constants, so their derived forms are built once per object.
+const SERIALIZED_COMPONENT_INFOS = new WeakMap();
+const REGISTERED_COMPONENT_ENTRIES = new WeakMap();
+const getSerializedComponentInfo = (registration) => {
+    const cached = SERIALIZED_COMPONENT_INFOS.get(registration);
+    if (cached)
+        return cached;
+    const { component: _, ...rest } = registration;
+    const info = serializeIncludingFunctions(rest);
+    SERIALIZED_COMPONENT_INFOS.set(registration, info);
+    return info;
+};
+export const getRegisteredComponents = (registrations, wrapComponent) => {
+    const registeredComponents = {};
+    for (const registration of registrations) {
+        let entry = REGISTERED_COMPONENT_ENTRIES.get(registration);
+        if (!entry) {
+            entry = {
+                component: wrapComponent(registration.component),
+                ...getSerializedComponentInfo(registration)
+            };
+            REGISTERED_COMPONENT_ENTRIES.set(registration, entry);
+        }
+        registeredComponents[registration.name] = entry;
+    }
+    return registeredComponents;
+};
+export const getComponentInfos = (registrations) => {
+    const componentInfos = {};
+    for (const registration of registrations) {
+        componentInfos[registration.name] = getSerializedComponentInfo(registration);
+    }
+    return componentInfos;
+};
 export const getRootStateInitialValue = ({ content, data, locale }) => {
     const defaultValues = {};
-    const initialState = content?.data?.state || {};
+    const seen = new WeakMap();
+    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/lib/browser/components/content/content.svelte

@@ -4,7 +4,6 @@ import { getDefaultRegisteredComponents } from "../../constants/builder-register
 import { TARGET } from "../../constants/target";
 import ComponentsContext from "../../context/components.context";
 import { evaluate } from "../../functions/evaluate/evaluate";
-import { serializeIncludingFunctions } from "../../functions/register-component";
 import { logger } from "../../helpers/logger";
 import Blocks from "../blocks/blocks.svelte";
 import { getUpdateVariantVisibilityScript } from "../content-variants/helpers";
@@ -12,7 +11,7 @@ import "../dynamic-div.svelte";
 import InlinedScript from "../inlined-script.svelte";
 import EnableEditor from "./components/enable-editor.svelte";
 import ContentStyles from "./components/styles.svelte";
-import { getContentInitialValue, getRootStateInitialValue, } from "./content.helpers";
+import { getComponentInfos, getContentInitialValue, getRegisteredComponents, getRootStateInitialValue, } from "./content.helpers";
 import "./wrap-component-ref";
 export let content;
 export let data = undefined;
@@ -45,16 +44,7 @@ let scriptStr = getUpdateVariantVisibilityScript({
     // 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((acc, { component, ...info }) => ({
-    ...acc,
-    [info.name]: {
-        component: component,
-        ...serializeIncludingFunctions(info),
-    },
-}), {});
+let registeredComponents = getRegisteredComponents([...getDefaultRegisteredComponents(), ...(customComponents || [])], (component) => component);
 let builderContextSignal = writable({
     content: getContentInitialValue({
         content: content,
@@ -71,13 +61,10 @@ let builderContextSignal = writable({
     canTrack: canTrack,
     apiKey: apiKey,
     apiVersion: apiVersion,
-    componentInfos: [
+    componentInfos: getComponentInfos([
         ...getDefaultRegisteredComponents(),
         ...(customComponents || []),
-    ].reduce((acc, { component: _, ...info }) => ({
-        ...acc,
-        [info.name]: serializeIncludingFunctions(info),
-    }), {}),
+    ]),
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},

package/lib/browser/constants/builder-registered-components.d.ts

@@ -2,5 +2,6 @@ import type { RegisteredComponent } from '../context/types';
 /**
  * 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 declare const getDefaultRegisteredComponents: () => RegisteredComponent[];

package/lib/browser/constants/builder-registered-components.js

@@ -23,41 +23,48 @@ import { componentInfo as textComponentInfo } from '../blocks/text/component-inf
 import { default as Text } from '../blocks/text/index';
 import { getExtraComponents } from './extra-components';
 import { TARGET } from './target';
+let DEFAULT_REGISTERED_COMPONENTS;
 /**
  * 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 = () => [{
-        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
+export const getDefaultRegisteredComponents = () => {
+    if (DEFAULT_REGISTERED_COMPONENTS)
+        return DEFAULT_REGISTERED_COMPONENTS;
+    DEFAULT_REGISTERED_COMPONENTS = [{
+            component: Button,
+            ...buttonComponentInfo
         }, {
-            component: Accordion,
-            ...accordionComponentInfo
-        }]), ...getExtraComponents()];
+            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/lib/browser/constants/device-sizes.js

@@ -1,4 +1,3 @@
-import { fastClone } from '../functions/fast-clone';
 const SIZES = {
     xsmall: {
         min: 0,
@@ -23,7 +22,20 @@ const SIZES = {
 };
 export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 export const getSizesForBreakpoints = (breakpoints) => {
-    const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+    const newSizes = {
+        xsmall: {
+            ...SIZES.xsmall
+        },
+        small: {
+            ...SIZES.small
+        },
+        medium: {
+            ...SIZES.medium
+        },
+        large: {
+            ...SIZES.large
+        }
+    };
     if (!breakpoints) {
         return newSizes;
     }

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.15";
+export declare const SDK_VERSION = "5.3.0";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.15";
+export const SDK_VERSION = "5.3.0";

package/lib/browser/functions/evaluate/browser-runtime/browser.js

@@ -1,4 +1,16 @@
+import { createBoundedCache } from '../../../helpers/bounded-cache';
 import { flattenState, getFunctionArguments } from '../helpers';
+const MAX_CACHED_FUNCTIONS = 5000;
+const FUNCTION_CACHE = createBoundedCache(MAX_CACHED_FUNCTIONS);
+// `getFunctionArguments` always returns the same argument names, so `code` alone is the key.
+const getCompiledFunction = (argNames, code) => {
+    let fn = FUNCTION_CACHE.get(code);
+    if (!fn) {
+        fn = new Function(...argNames, code);
+        FUNCTION_CACHE.set(code, fn);
+    }
+    return fn;
+};
 export const runInBrowser = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
     const functionArgs = getFunctionArguments({
         builder,
@@ -10,5 +22,5 @@ export const runInBrowser = ({ code, builder, context, event, localState, rootSe
             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/lib/browser/functions/evaluate/evaluate.js

@@ -1,3 +1,4 @@
+import { createBoundedCache } from '../../helpers/bounded-cache';
 import { logger } from '../../helpers/logger';
 import { get } from '../get';
 import { chooseBrowserOrServerEval } from './choose-eval';
@@ -16,6 +17,24 @@ const VIRTUAL_INDEX_REGEX = /(\s)*var(\s)+_virtual_index(\s)*=(\s)*state(?<getPa
 export const getSimpleExpressionGetPath = (code) => {
     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(MAX_CACHED_CODE_STRINGS);
+const getCachedSimpleExpressionGetPath = (code) => {
+    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, localState, getPath) => {
+    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, localState, rootState, rootSetState, event, isExpression = true, trackingContext }) {
     if (code.trim() === '') {
         return undefined;
@@ -26,12 +45,9 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
      * 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 = {
         code: parseCode(code, {