@builder.io/sdk-svelte 5.2.16 → 5.4.0

package/src/functions/get-processed-block.ts

@@ -1,61 +1,10 @@
-import { TARGET } from '../constants/target';
 import type { BuilderContextInterface } from '../context/types';
-import { omit } from '../helpers/omit';
 import type { BuilderBlock } from '../types/builder-block';
 import { evaluate } from './evaluate/index';
 import { resolveLocalizedValues } from './extract-localized-values';
-import { fastClone } from './fast-clone';
-import { set } from './set';
+import { isEditingOrPreviewing } from './is-editing-or-previewing';
+import { setCopyOnWrite } from './set';
 import { transformBlock } from './transform-block';
-
-// Deep clone a block but without cloning any child blocks
-export function deepCloneWithConditions<T = any>(obj: T): T {
-  if (obj === null || typeof obj !== 'object') {
-    return obj;
-  }
-  if (Array.isArray(obj)) {
-    return (obj.map((item: any) => deepCloneWithConditions(item)) as T);
-  }
-  if ((obj as any)['@type'] === '@builder.io/sdk:Element') {
-    return obj;
-  }
-  const clonedObj: any = {};
-  for (const key in obj) {
-    if (key !== 'meta' && Object.prototype.hasOwnProperty.call(obj, key)) {
-      clonedObj[key] = deepCloneWithConditions(obj[key]);
-    }
-  }
-  return clonedObj;
-}
-const IS_SDK_WITHOUT_CACHED_PROCESSED_BLOCK = ['svelte', 'vue', 'angular', 'qwik', 'solid'].includes(TARGET);
-const getCopy = (block: BuilderBlock): BuilderBlock => {
-  if (IS_SDK_WITHOUT_CACHED_PROCESSED_BLOCK) {
-    const copy = fastClone(block);
-    const copied = {
-      ...copy,
-      properties: {
-        ...copy.properties
-      },
-      actions: {
-        ...copy.actions
-      }
-    };
-    return copied;
-  } else {
-    const copy = (deepCloneWithConditions(omit(block, 'children', 'meta')) as BuilderBlock);
-    return {
-      ...copy,
-      properties: {
-        ...copy.properties
-      },
-      actions: {
-        ...copy.actions
-      },
-      children: block.children,
-      meta: block.meta
-    };
-  }
-};
 const evaluateBindings = ({
   block,
   context,
@@ -68,7 +17,19 @@ const evaluateBindings = ({
   if (!block.bindings) {
     return block;
   }
-  const copied = getCopy(block);
+  // Only objects along a bound path are copied: the block (and content) passed in is never mutated.
+  const copied = new WeakSet<object>();
+  const copy: BuilderBlock = {
+    ...block,
+    properties: {
+      ...block.properties
+    },
+    actions: {
+      ...block.actions
+    }
+  };
+  copied.add(copy.properties!);
+  copied.add(copy.actions!);
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
     const value = evaluate({
@@ -78,9 +39,24 @@ const evaluateBindings = ({
       rootSetState,
       context
     });
-    set(copied, binding, value);
+    setCopyOnWrite(copy, binding, value, copied);
   }
-  return copied;
+  return copy;
+};
+
+/**
+ * A block without bindings processes to the same result for a given locale, so
+ * it is computed once per block object instead of on every render.
+ * Only the latest locale is kept, so a block holds at most one cached result.
+ */
+const PROCESSED_BLOCKS_WITHOUT_BINDINGS = new WeakMap<BuilderBlock, {
+  locale: string;
+  block: BuilderBlock;
+}>();
+const hasBindings = (block: BuilderBlock) => {
+  if (!block.bindings) return false;
+  for (const _ in block.bindings) return true;
+  return false;
 };
 export function getProcessedBlock({
   block,
@@ -91,6 +67,13 @@ export function getProcessedBlock({
 }: {
   block: BuilderBlock;
 } & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock {
+  const locale = (rootState.locale as string | undefined);
+  const canUseCache = !hasBindings(block) && typeof block === 'object' && block !== null && !isEditingOrPreviewing();
+  const cacheKey = locale ?? '';
+  if (canUseCache) {
+    const cached = PROCESSED_BLOCKS_WITHOUT_BINDINGS.get(block);
+    if (cached && cached.locale === cacheKey) return cached.block;
+  }
   let transformedBlock = transformBlock(block);
   transformedBlock = evaluateBindings({
     block: transformedBlock,
@@ -99,6 +82,12 @@ export function getProcessedBlock({
     rootSetState,
     context
   });
-  transformedBlock = resolveLocalizedValues(transformedBlock, (rootState.locale as string | undefined));
+  transformedBlock = resolveLocalizedValues(transformedBlock, locale);
+  if (canUseCache) {
+    PROCESSED_BLOCKS_WITHOUT_BINDINGS.set(block, {
+      locale: cacheKey,
+      block: transformedBlock
+    });
+  }
   return transformedBlock;
 }

package/src/functions/is-editing-or-previewing.ts

@@ -0,0 +1,3 @@
+import { isEditing } from './is-editing';
+import { isPreviewing } from './is-previewing';
+export const isEditingOrPreviewing = () => isEditing() || isPreviewing()

package/src/functions/set.ts

@@ -1,17 +1,102 @@
+const parsePath = (path: string) => (path.toString().match(/[^.[\]]+/g) as string[] | null);
+const isArrayIndex = (key: string | undefined) => Math.abs(Number(key)) >> 0 === +key!;
+
+/**
+ * `__proto__` is never allowed. `constructor` and `prototype` are allowed only as
+ * the final key, where they are written as ordinary own properties.
+ */
+const hasUnsafeSegment = (path: string[]) => path.some((key, i) => key === '__proto__' || i < path.length - 1 && (key === 'constructor' || key === 'prototype'));
+
+/**
+ * Own properties only, so a path can never walk into a value shared through a
+ * prototype (e.g. `Object.prototype.toString`) and mutate it.
+ */
+const getOwn = (obj: any, key: string) => Object.prototype.hasOwnProperty.call(obj, key) ? obj[key] : undefined;
+
 /**
  * Minimal implementation of lodash's _.set
  * https://lodash.com/docs/4.17.15#set
  *
- * See ./set.test.ts for usage examples
+ * Mutates `obj` in place, creating missing objects/arrays along the path:
+ *
+ *   const obj = { a: { b: 1 } };
+ *   set(obj, 'a.c', 2);      // obj is { a: { b: 1, c: 2 } }
+ *   set(obj, 'list.0', 'x'); // obj.list is ['x']
+ *
+ * See ./set.test.ts for more usage examples
  */
 export const set = (obj: any, _path: string | string[], value: any) => {
   if (Object(obj) !== obj) {
     return obj;
   }
-  const path: string[] = Array.isArray(_path) ? _path : (_path.toString().match(/[^.[\]]+/g) as string[]);
-  if (!path || path.some((key, i) => key === '__proto__' || i < path.length - 1 && (key === 'constructor' || key === 'prototype'))) {
+  const path: string[] = Array.isArray(_path) ? _path : (parsePath(_path) as string[]);
+  if (!path || hasUnsafeSegment(path)) {
     return obj;
   }
-  path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
+  path.slice(0, -1).reduce((a, c, i) => {
+    const next = getOwn(a, c);
+    return Object(next) === next ? next : a[c] = isArrayIndex(path[i + 1]) ? [] : {};
+  }, obj)[path[path.length - 1]] = value;
+  return obj;
+};
+
+/**
+ * Like `set`, but every object or array along `path` that is not in `copied`
+ * is shallow-copied before being written to, so objects shared with the
+ * original are never mutated. `obj` itself must already be a copy.
+ *
+ *   const block = { options: { text: 'a' }, style: { color: 'red' } };
+ *   const copy = { ...block };
+ *   setCopyOnWrite(copy, 'options.text', 'b', new WeakSet());
+ *   // copy.options is a new object: { text: 'b' }
+ *   // block.options.text is still 'a'
+ *   // copy.style === block.style (untouched branches stay shared)
+ */
+export const setCopyOnWrite = (obj: any, _path: string, value: any, copied: WeakSet<object>) => {
+  if (Object(obj) !== obj) {
+    return obj;
+  }
+  const path = parsePath(_path);
+  if (!path || hasUnsafeSegment(path)) {
+    return obj;
+  }
+  copied.add(obj);
+  let current = obj;
+  for (let i = 0; i < path.length - 1; i++) {
+    const key = path[i];
+    let next = getOwn(current, key);
+    if (Object(next) !== next) {
+      next = isArrayIndex(path[i + 1]) ? [] : {};
+      copied.add(next);
+      current[key] = next;
+    } else if (typeof next === 'object' && !copied.has(next)) {
+      next = Array.isArray(next) ? next.slice() : {
+        ...next
+      };
+      copied.add(next);
+      current[key] = next;
+    }
+    current = next;
+  }
+  current[path[path.length - 1]] = value;
+  return obj;
+};
+
+/**
+ * Deletes the property at `path`, the inverse of `set` for an array path.
+ * Mutates `obj` in place and does nothing when a parent is missing:
+ *
+ *   const obj = { a: { b: 1, c: 2 } };
+ *   unset(obj, ['a', 'b']); // obj is { a: { c: 2 } }
+ *   unset(obj, ['x', 'y']); // no-op
+ */
+export const unset = (obj: any, path: string[]) => {
+  if (Object(obj) !== obj || !path.length || hasUnsafeSegment(path)) {
+    return obj;
+  }
+  const parent = path.slice(0, -1).reduce((a, c) => Object(a) === a ? getOwn(a, c) : undefined, obj);
+  if (Object(parent) === parent) {
+    delete parent[path[path.length - 1]];
+  }
   return obj;
 }

package/src/helpers/bounded-cache.ts

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

package/src/helpers/copy-plain-data.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 = <T,>(value: T, seen = new WeakMap<object, any>()): T => {
+  if (value === null || typeof value !== 'object') return value;
+  if (seen.has(value)) return seen.get(value);
+  if (Array.isArray(value)) {
+    const copy: any[] = [];
+    seen.set(value, copy);
+    for (let i = 0; i < value.length; i++) {
+      copy[i] = copyPlainData(value[i], seen);
+    }
+    return (copy as T);
+  }
+  const proto = Object.getPrototypeOf(value);
+  if (proto !== Object.prototype && proto !== null) return value;
+  const copy: Record<string, any> = {};
+  seen.set(value, copy);
+  for (const key of Object.keys(value)) {
+    const copied = copyPlainData((value as any)[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 as T);
+}

package/src/index-helpers/blocks-exports.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';
 
 /**