@builder.io/sdk-svelte 5.2.16 → 5.4.0

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, {

package/lib/browser/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/browser/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 {};

package/lib/browser/functions/evaluate/safe-state-expression.js

@@ -0,0 +1,236 @@
+import { createBoundedCache } from '../../helpers/bounded-cache';
+/**
+ * Recognizes binding expressions that only read `state` and combine the values
+ * with operators and literals, e.g. `!state.open`, `state.$index + 1` or
+ * `state.plan === "pro" ? "Upgrade" : "Manage"`. Such an expression cannot call
+ * functions, assign, loop or reach any global, so it can run as a plain function
+ * instead of in a sandbox. Anything else returns `null` and is sandboxed as usual.
+ */
+const IDENTIFIER = /^[A-Za-z_$][\w$]*/;
+const NUMBER = /^(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/;
+/**
+ * The length of a single- or double-quoted string literal at the start of `code`
+ * (no escapes or line breaks), or 0 when there is none.
+ */
+const getStringLiteralLength = (code) => {
+    const quote = code[0];
+    if (quote !== '"' && quote !== "'")
+        return 0;
+    for (let i = 1; i < code.length; i++) {
+        const char = code[i];
+        if (char === quote)
+            return i + 1;
+        if (char === '\\' || char === '\n' || char === '\r')
+            return 0;
+    }
+    return 0;
+};
+const OPERATORS = ['===', '!==', '==', '!=', '<=', '>=', '&&', '||', '??', '<', '>', '!', '+', '-', '*', '/', '%', '?', ':'];
+const LITERAL_KEYWORDS = new Set(['true', 'false', 'null', 'undefined']);
+// Reading these is harmless on data, but they lead to functions and prototypes.
+const BLOCKED_PROPERTIES = new Set(['constructor', '__proto__', 'prototype', '__defineGetter__', '__defineSetter__', '__lookupGetter__', '__lookupSetter__']);
+const MAX_EXPRESSION_LENGTH = 500;
+/**
+ * Returns `expression` when it only uses the allowed grammar, otherwise `null`.
+ */
+export const getSafeStateExpression = (expression) => {
+    if (expression.length > MAX_EXPRESSION_LENGTH)
+        return null;
+    let rest = expression.trim();
+    if (!rest)
+        return null;
+    let depth = 0;
+    // A value (state path, literal or closing paren) was just read: `(` here would be a call.
+    let afterValue = false;
+    let readsState = false;
+    while (rest) {
+        const whitespace = /^\s+/.exec(rest);
+        if (whitespace) {
+            rest = rest.slice(whitespace[0].length);
+            continue;
+        }
+        const identifier = IDENTIFIER.exec(rest);
+        if (identifier) {
+            if (afterValue)
+                return null;
+            const word = identifier[0];
+            rest = rest.slice(word.length);
+            if (LITERAL_KEYWORDS.has(word)) {
+                afterValue = true;
+                continue;
+            }
+            if (word !== 'state')
+                return null;
+            let hasProperty = false;
+            let property = /^\s*\.\s*([A-Za-z_$][\w$]*)/.exec(rest);
+            while (property) {
+                if (BLOCKED_PROPERTIES.has(property[1]))
+                    return null;
+                hasProperty = true;
+                rest = rest.slice(property[0].length);
+                property = /^\s*\.\s*([A-Za-z_$][\w$]*)/.exec(rest);
+            }
+            if (!hasProperty)
+                return null;
+            readsState = true;
+            afterValue = true;
+            continue;
+        }
+        const literalLength = NUMBER.exec(rest)?.[0].length || getStringLiteralLength(rest);
+        if (literalLength) {
+            if (afterValue)
+                return null;
+            rest = rest.slice(literalLength);
+            afterValue = true;
+            continue;
+        }
+        if (rest[0] === '(') {
+            if (afterValue)
+                return null;
+            depth++;
+            rest = rest.slice(1);
+            continue;
+        }
+        if (rest[0] === ')') {
+            if (depth === 0)
+                return null;
+            depth--;
+            rest = rest.slice(1);
+            afterValue = true;
+            continue;
+        }
+        const operator = OPERATORS.find(op => rest.startsWith(op));
+        if (!operator)
+            return null;
+        // `?.` is optional chaining (a property access we do not handle)
+        if (operator === '?' && rest[1] === '.')
+            return null;
+        // `++` / `--` would write to state
+        if ((operator === '+' || operator === '-') && rest[1] === operator) {
+            return null;
+        }
+        rest = rest.slice(operator.length);
+        afterValue = false;
+    }
+    if (depth !== 0 || !readsState || !afterValue)
+        return null;
+    return expression.trim();
+};
+const RETURN_EXPRESSION = /^\s*return\s*\(([\s\S]*)\);\s*$/;
+const VIRTUAL_INDEX_EXPRESSION = /^\s*var\s+_virtual_index\s*=\s*([\s\S]*?);?\s*return\s+_virtual_index\s*;?\s*$/;
+/**
+ * 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 const getSafeStateExpressionFromCode = (code) => {
+    const match = RETURN_EXPRESSION.exec(code) || VIRTUAL_INDEX_EXPRESSION.exec(code);
+    return match ? getSafeStateExpression(match[1]) : null;
+};
+const isPrimitiveValue = (value) => value === null || typeof value !== 'object' && typeof value !== 'function';
+const MAX_CACHED_EXPRESSIONS = 5000;
+const COMPILED_EXPRESSIONS = createBoundedCache(MAX_CACHED_EXPRESSIONS);
+/**
+ * The compiled expression for `code`, or `null` when `code` is not a safe state expression.
+ */
+export const getSafeStateExpressionFn = (code) => {
+    let fn = COMPILED_EXPRESSIONS.get(code);
+    if (fn === undefined) {
+        const expression = getSafeStateExpressionFromCode(code);
+        fn = null;
+        if (expression) {
+            try {
+                fn = new Function('state', `return (${expression});`);
+            }
+            catch (e) {
+                fn = null;
+            }
+        }
+        COMPILED_EXPRESSIONS.set(code, fn);
+    }
+    return fn;
+};
+const UNSAFE_STATE_READ = Symbol('unsafe state read');
+const isPlainContainer = (value) => {
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === Object.prototype || prototype === Array.prototype || prototype === null;
+};
+const READ_ONLY_TRAPS = {
+    set: () => false,
+    deleteProperty: () => false
+};
+const findDescriptor = (target, prop) => {
+    for (let o = target; o; o = Object.getPrototypeOf(o)) {
+        const descriptor = Object.getOwnPropertyDescriptor(o, prop);
+        if (descriptor)
+            return descriptor;
+    }
+    return undefined;
+};
+/**
+ * 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 const getReadOnlyStateView = (rootState, localState, isProxy) => {
+    // Reflecting on a Proxy (even `Object.getPrototypeOf`) runs its traps.
+    const isInspectable = (value) => !isProxy(value) && isPlainContainer(value);
+    if (!isInspectable(rootState) || localState && isProxy(localState)) {
+        throw UNSAFE_STATE_READ;
+    }
+    const wrappers = new WeakMap();
+    const guardStateValue = (value) => {
+        if (value === null || typeof value !== 'object') {
+            if (typeof value === 'function')
+                throw UNSAFE_STATE_READ;
+            return value;
+        }
+        if (!isInspectable(value))
+            throw UNSAFE_STATE_READ;
+        let wrapper = wrappers.get(value);
+        if (!wrapper) {
+            wrapper = new Proxy(Array.isArray(value) ? [] : {}, {
+                get: (_, prop) => readDataProperty(value, prop),
+                ...READ_ONLY_TRAPS
+            });
+            wrappers.set(value, wrapper);
+        }
+        return wrapper;
+    };
+    const readDataProperty = (target, prop) => {
+        const descriptor = findDescriptor(target, prop);
+        if (descriptor && (descriptor.get || descriptor.set)) {
+            throw UNSAFE_STATE_READ;
+        }
+        return guardStateValue(descriptor?.value);
+    };
+    return new Proxy({}, {
+        get: (_, prop) => localState && Object.prototype.hasOwnProperty.call(localState, prop) ? readDataProperty(localState, prop) : readDataProperty(rootState, prop),
+        ...READ_ONLY_TRAPS
+    });
+};
+export const NOT_EVALUATED = Symbol('not evaluated');
+/**
+ * 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 const evaluateSafeStateExpression = (code, rootState, localState, isProxy) => {
+    const fn = getSafeStateExpressionFn(code);
+    if (!fn)
+        return NOT_EVALUATED;
+    let value;
+    try {
+        value = fn(getReadOnlyStateView(rootState, localState, isProxy));
+    }
+    catch {
+        // Unsafe reads and ordinary errors (e.g. a null-prototype object in `+`) both
+        // go to the regular evaluator, so behavior matches evaluation without the fast path.
+        return NOT_EVALUATED;
+    }
+    return isPrimitiveValue(value) ? value : NOT_EVALUATED;
+};

package/lib/browser/functions/evaluate/should-force-browser-runtime-in-node.js

@@ -1,5 +1,6 @@
 import { logger } from '../../helpers/logger';
 import { isNodeRuntime } from '../is-node-runtime';
+let hasLoggedWarning = false;
 export const shouldForceBrowserRuntimeInNode = ({ shouldLogWarning }) => {
     if (!isNodeRuntime())
         return false;
@@ -7,7 +8,8 @@ export const shouldForceBrowserRuntimeInNode = ({ shouldLogWarning }) => {
     const isNode20 = process.version.startsWith('v20');
     const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes('--no-node-snapshot');
     if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
-        if (shouldLogWarning) {
+        if (shouldLogWarning && !hasLoggedWarning) {
+            hasLoggedWarning = true;
             logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
     If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.
     See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.

package/lib/browser/functions/extract-localized-values.d.ts

@@ -1,2 +1,6 @@
 import type { BuilderBlock } from '../types/builder-block';
+/**
+ * Returns the block with localized values in `component.options` resolved.
+ * The block is returned unchanged (same object) when it has none.
+ */
 export declare function resolveLocalizedValues(block: BuilderBlock, locale: string | undefined): BuilderBlock;

package/lib/browser/functions/extract-localized-values.js

@@ -1,37 +1,76 @@
-import { traverse } from './traverse';
 function isLocalizedField(value) {
     return value && typeof value === 'object' && value['@type'] === '@builder.io/core:LocalizedValue';
 }
-function containsLocalizedValues(data) {
-    if (!data || !Object.getOwnPropertyNames(data).length) {
-        return false;
+const isPlainObjectOrArray = (value) => {
+    if (Array.isArray(value))
+        return true;
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+};
+/**
+ * Returns `value` with every localized value replaced by its `locale` entry.
+ * Only the objects and arrays on the way to a replaced value are copied: the
+ * input is never mutated, and a value with nothing localized is returned as-is.
+ */
+function resolveLocalized(value, locale, seen) {
+    if (value === null || typeof value !== 'object')
+        return value;
+    if (isLocalizedField(value)) {
+        return resolveLocalized(value[locale] ?? undefined, locale, seen);
     }
-    let hasLocalizedValues = false;
-    traverse(data, value => {
-        if (isLocalizedField(value)) {
-            hasLocalizedValues = true;
-            return;
+    if (!isPlainObjectOrArray(value))
+        return value;
+    if (seen.has(value))
+        return seen.get(value);
+    seen.set(value, value);
+    let copy = null;
+    if (Array.isArray(value)) {
+        for (let i = 0; i < value.length; i++) {
+            const next = resolveLocalized(value[i], locale, seen);
+            if (next !== value[i]) {
+                if (!copy)
+                    copy = value.slice();
+                copy[i] = next;
+            }
         }
-    });
-    return hasLocalizedValues;
-}
-function extractLocalizedValues(data, locale) {
-    if (!data || !Object.getOwnPropertyNames(data).length) {
-        return {};
     }
-    traverse(data, (value, update) => {
-        if (isLocalizedField(value)) {
-            update(value[locale] ?? undefined);
+    else {
+        for (const key of Object.keys(value)) {
+            const next = resolveLocalized(value[key], locale, seen);
+            if (next !== value[key]) {
+                if (!copy)
+                    copy = {
+                        ...value
+                    };
+                copy[key] = next;
+            }
         }
-    });
-    return data;
+    }
+    const result = copy ?? value;
+    seen.set(value, result);
+    return result;
 }
+/**
+ * Returns the block with localized values in `component.options` resolved.
+ * The block is returned unchanged (same object) when it has none.
+ */
 export function resolveLocalizedValues(block, locale) {
-    if (block.component?.options && containsLocalizedValues(block.component?.options)) {
-        if (!locale) {
-            console.warn('[Builder.io] In order to use localized fields in Builder, you must pass a locale prop to the BuilderComponent or to options object while fetching the content to resolve localized fields. Learn more: https://www.builder.io/c/docs/localization-inline#targeting-and-inline-localization');
-        }
-        block.component.options = extractLocalizedValues(block.component.options, locale ?? 'Default');
+    const options = block.component?.options;
+    if (!options || typeof options !== 'object' || isLocalizedField(options)) {
+        return block;
     }
-    return block;
+    const resolvedOptions = resolveLocalized(options, locale ?? 'Default', new WeakMap());
+    if (resolvedOptions === options) {
+        return block;
+    }
+    if (!locale) {
+        console.warn('[Builder.io] In order to use localized fields in Builder, you must pass a locale prop to the BuilderComponent or to options object while fetching the content to resolve localized fields. Learn more: https://www.builder.io/c/docs/localization-inline#targeting-and-inline-localization');
+    }
+    return {
+        ...block,
+        component: {
+            ...block.component,
+            options: resolvedOptions
+        }
+    };
 }