@builder.io/sdk-svelte 5.2.16 → 5.3.0

package/lib/node/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/node/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/node/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/node/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/node/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/node/constants/sdk-version.d.ts

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

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

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

package/lib/node/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/node/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, {

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

@@ -1,16 +1,19 @@
 import { SDK_NAME } from '../../../constants/sdk-name';
 import { MSG_PREFIX, logger } from '../../../helpers/logger';
 import { fastClone } from '../../fast-clone';
-import { set } from '../../set';
+import { set, unset } from '../../set';
 import { getFunctionArguments } from '../helpers';
+import { NOT_EVALUATED, evaluateSafeStateExpression } from '../safe-state-expression';
 import { safeDynamicRequire } from './safeDynamicRequire';
 const getSyncValName = (key) => `bldr_${key}_sync`;
 const BUILDER_SET_STATE_NAME = 'BUILDER_SET_STATE';
+const BUILDER_DELETE_STATE_NAME = 'BUILDER_DELETE_STATE';
 const INJECTED_IVM_GLOBAL = 'BUILDER_IVM';
 // Convert all argument references to proxies, and pass `copySync` method to target object, to return a copy of the original JS object
+// Only the `state` proxy carries a `path`, so only writes and deletes on `state` reach the host's root state.
 // https://github.com/laverdet/isolated-vm#referencecopysync
 const REF_TO_PROXY_FN = `
-var refToProxy = (obj) => {
+var refToProxy = (obj, path) => {
   if (typeof obj !== 'object' || obj === null) {
     return obj;
   }
@@ -21,25 +24,33 @@ var refToProxy = (obj) => {
         }
         const val = obj.getSync(key);
         if (typeof val?.getSync === 'function') {
-            return refToProxy(val);
+            return refToProxy(val, path && path.concat(key));
         }
         return val;
     },
     set(target, key, value) {
+        // Functions cannot cross the isolate boundary, and server renders never call them.
+        if (typeof value === 'function') {
+          return true;
+        }
         const v = typeof value === 'object' ? new ${INJECTED_IVM_GLOBAL}.Reference(value) : value;
         obj.setSync(key, v);
-        ${BUILDER_SET_STATE_NAME}(key, value)
+        if (path) ${BUILDER_SET_STATE_NAME}(path.concat(key), value);
+        return true;
     },
     deleteProperty(target, key) {
         obj.deleteSync(key);
+        if (path) ${BUILDER_DELETE_STATE_NAME}(path.concat(key));
+        return true;
     }
   })
 }
 `;
 const processCode = ({ code, args }) => {
-    const fnArgs = args.map(([name]) => `var ${name} = refToProxy(${getSyncValName(name)}); `).join('');
+    const fnArgs = args.map(([name]) => `var ${name} = refToProxy(${getSyncValName(name)}${name === 'state' ? ', []' : ''}); `).join('');
     // the output is stringified and parsed back to the parent isolate if needed (when it's an `object`)
-    return `
+    // Wrapped in an IIFE so it compiles as a reusable script whose completion value is the result.
+    return `(function () {
 ${REF_TO_PROXY_FN}
 ${fnArgs}
 function theFunction() {
@@ -53,13 +64,57 @@ if (typeof output === 'object' && output !== null) {
 } else {
   return output;
 }
-`;
+})()`;
 };
 let IVM_INSTANCE = null;
-// Create fresh isolates per request to prevent memory leaks
 let IVM_OPTIONS = {
     memoryLimit: 128
 };
+/**
+ * Evaluations share one isolate, each in a fresh context. The isolate is disposed at the end of the
+ * current task (or after a fixed number of evaluations), so a render's bindings share it without it
+ * outliving that work: a single long-lived isolate leaked memory (#4210), and one still alive at
+ * worker-thread teardown crashes `isolated-vm` on Linux.
+ */
+const MAX_EVALUATIONS_PER_ISOLATE = 1000;
+let POOLED = null;
+let DISPOSE_TIMER = null;
+let IS_EXIT_HANDLER_REGISTERED = false;
+const disposePooledIsolate = () => {
+    if (DISPOSE_TIMER) {
+        clearTimeout(DISPOSE_TIMER);
+        DISPOSE_TIMER = null;
+    }
+    if (POOLED && !POOLED.isolate.isDisposed) {
+        try {
+            POOLED.isolate.dispose();
+        }
+        catch (e) {
+            // Ignore disposal errors
+        }
+    }
+    POOLED = null;
+};
+const getPooledIsolate = (ivm) => {
+    if (!POOLED || POOLED.isolate.isDisposed || POOLED.evaluations >= MAX_EVALUATIONS_PER_ISOLATE) {
+        disposePooledIsolate();
+        POOLED = {
+            isolate: new ivm.Isolate(IVM_OPTIONS),
+            evaluations: 0,
+            scripts: new Map()
+        };
+    }
+    if (!DISPOSE_TIMER) {
+        DISPOSE_TIMER = setTimeout(disposePooledIsolate, 0);
+        DISPOSE_TIMER.unref?.();
+    }
+    if (!IS_EXIT_HANDLER_REGISTERED && typeof process !== 'undefined' && typeof process.once === 'function') {
+        IS_EXIT_HANDLER_REGISTERED = true;
+        process.once('exit', disposePooledIsolate);
+    }
+    POOLED.evaluations++;
+    return POOLED;
+};
 /**
  * Set the `isolated-vm` instance to be used by the node runtime.
  * This is useful for environments that are not able to rely on our
@@ -97,13 +152,34 @@ const getIvm = () => {
     For more information, visit https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments`;
     throw new Error(ERROR_MESSAGE);
 };
+let IS_PROXY;
+/**
+ * Node's `util.types.isProxy`, which detects a Proxy without running its traps.
+ * `null` when unavailable, in which case the pure-expression fast path is skipped.
+ */
+const getIsProxy = () => {
+    if (IS_PROXY === undefined) {
+        try {
+            IS_PROXY = safeDynamicRequire('node:util')?.types?.isProxy ?? null;
+        }
+        catch {
+            IS_PROXY = null;
+        }
+    }
+    return IS_PROXY;
+};
 export const runInNode = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
+    const isProxy = getIsProxy();
+    if (isProxy) {
+        const safeValue = evaluateSafeStateExpression(code, rootState, localState, isProxy);
+        if (safeValue !== NOT_EVALUATED)
+            return safeValue;
+    }
     const ivm = getIvm();
-    // Use stored options from setIvm, or default to { memoryLimit: 128 }
-    let isolate;
+    const pooled = getPooledIsolate(ivm);
+    const isolateContext = pooled.isolate.createContextSync();
+    const references = [];
     try {
-        isolate = new ivm.Isolate(IVM_OPTIONS);
-        const isolateContext = isolate.createContextSync();
         const jail = isolateContext.global;
         // Setup the isolate
         jail.setSync('global', jail.derefInto());
@@ -124,13 +200,17 @@ export const runInNode = ({ code, builder, context, event, localState, rootSetSt
         /**
          * Propagate state changes back to the reactive root state.
          */
-        jail.setSync(BUILDER_SET_STATE_NAME, function (key, value) {
+        jail.setSync(BUILDER_SET_STATE_NAME, function (path, value) {
             // mutate the `rootState` object itself. Important for cases where we do not have `rootSetState`
             // like Qwik.
-            set(rootState, key, value);
+            set(rootState, path, value);
             // call the `rootSetState` function if it exists
             rootSetState?.(rootState);
         });
+        jail.setSync(BUILDER_DELETE_STATE_NAME, function (path) {
+            unset(rootState, path);
+            rootSetState?.(rootState);
+        });
         args.forEach(([key, arg]) => {
             const val = typeof arg === 'object' ? new ivm.Reference(
             // workaround: methods with default values for arguments is not being cloned over
@@ -138,13 +218,19 @@ export const runInNode = ({ code, builder, context, event, localState, rootSetSt
                 ...arg,
                 getUserAttributes: () => arg.getUserAttributes()
             } : arg) : null;
+            if (val)
+                references.push(val);
             jail.setSync(getSyncValName(key), val);
         });
-        const evalStr = processCode({
-            code,
-            args
-        });
-        const resultStr = isolateContext.evalClosureSync(evalStr);
+        let script = pooled.scripts.get(code);
+        if (!script) {
+            script = pooled.isolate.compileScriptSync(processCode({
+                code,
+                args
+            }));
+            pooled.scripts.set(code, script);
+        }
+        const resultStr = script.runSync(isolateContext);
         try {
             // returning objects throw errors in isolated vm, so we stringify it and parse it back
             const res = JSON.parse(resultStr);
@@ -155,14 +241,19 @@ export const runInNode = ({ code, builder, context, event, localState, rootSetSt
         }
     }
     finally {
-        // Destroy the entire VM, this frees ALL memory at the C++ level.
-        if (isolate) {
+        references.forEach(reference => {
             try {
-                isolate.dispose();
+                reference.release();
             }
             catch (e) {
-                // Ignore disposal errors
+                // Ignore release errors
             }
+        });
+        try {
+            isolateContext.release();
+        }
+        catch (e) {
+            // Ignore release errors (e.g. the isolate was disposed after hitting its memory limit)
         }
     }
 };

package/lib/node/functions/evaluate/safe-state-expression.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Returns `expression` when it only uses the allowed grammar, otherwise `null`.
+ */
+export declare const getSafeStateExpression: (expression: string) => string | null;
+/**
+ * Extracts the expression from code produced by `parseCode` (`return (expr);`) or
+ * from the editor's transpiled form (`var _virtual_index=expr;` followed by a return of it).
+ * (Mitosis treats any file containing a literal "return" + " _virtual_index" as a function body.)
+ */
+export declare const getSafeStateExpressionFromCode: (code: string) => string | null;
+type SafeExpressionFn = (state: Record<string, any>) => unknown;
+/**
+ * The compiled expression for `code`, or `null` when `code` is not a safe state expression.
+ */
+export declare const getSafeStateExpressionFn: (code: string) => SafeExpressionFn | null;
+/**
+ * A read-only view of local state over root state, without copying either.
+ *
+ * Plain objects and arrays are wrapped so every nested read is checked: accessors
+ * anywhere on the prototype chain, class instances and functions (which could run
+ * getters or custom `valueOf`/`toString`) abort the read. Each source object maps to
+ * one wrapper for the life of the view, so `===` still compares the underlying objects.
+ * Wrappers target a fresh empty container rather than the object itself, because proxy
+ * invariants forbid returning a wrapper for a frozen (non-configurable) property.
+ */
+export declare const getReadOnlyStateView: (rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, isProxy: (value: unknown) => boolean) => {};
+export declare const NOT_EVALUATED: unique symbol;
+/**
+ * Evaluates `code` outside the sandbox when it is a safe state expression over plain
+ * data and produces a primitive. Returns `NOT_EVALUATED` when the sandbox must run it.
+ */
+export declare const evaluateSafeStateExpression: (code: string, rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, isProxy: (value: unknown) => boolean) => unknown;
+export {};