@builder.io/sdk-svelte 2.0.22 → 2.0.24

package/lib/browser/blocks/text/text.svelte

@@ -20,7 +20,6 @@ $: processedText = () => {
         localState,
         rootState,
         rootSetState,
-        enableCache: false,
     }));
 };
 </script>

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

@@ -32,8 +32,7 @@ export const getRepeatItemData = ({ block, context }) => {
         localState: context.localState,
         rootState: context.rootState,
         rootSetState: context.rootSetState,
-        context: context.context,
-        enableCache: true
+        context: context.context
     });
     if (!Array.isArray(itemsArray)) {
         return undefined;

package/lib/browser/components/blocks/blocks-wrapper.svelte

@@ -3,6 +3,7 @@
 <script>import { onMount } from "svelte";
 import { isEditing } from "../../functions/is-editing";
 export let blocks;
+export let classNameProp = undefined;
 export let parent;
 export let path;
 export let styleProp;
@@ -41,7 +42,9 @@ function onMouseEnter() {
     }
 }
 $: className = () => {
-    return "builder-blocks" + (!blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !blocks?.length ? "no-blocks" : "", classNameProp]
+        .filter(Boolean)
+        .join(" ");
 };
 let blocksWrapperRef;
 onMount(() => { });

package/lib/browser/components/blocks/blocks.svelte

@@ -7,6 +7,7 @@ export let blocks;
 export let parent;
 export let path;
 export let styleProp;
+export let className = undefined;
 export let context = undefined;
 export let linkComponent = undefined;
 export let registeredComponents = undefined;
@@ -19,9 +20,10 @@ let componentsContext = getContext(ComponentsContext.key);
   {parent}
   {path}
   {styleProp}
-  BlocksWrapper={$context?.BlocksWrapper || $builderContext.BlocksWrapper}
+  classNameProp={className}
+  BlocksWrapper={$context?.BlocksWrapper || $builderContext?.BlocksWrapper}
   BlocksWrapperProps={$context?.BlocksWrapperProps ||
-    $builderContext.BlocksWrapperProps}
+    $builderContext?.BlocksWrapperProps}
 >
   {#if blocks}
     {#each blocks as block (block.id)}
@@ -30,7 +32,7 @@ let componentsContext = getContext(ComponentsContext.key);
         {linkComponent}
         context={context || builderContext}
         registeredComponents={registeredComponents ||
-          componentsContext.registeredComponents}
+          componentsContext?.registeredComponents}
       />
     {/each}
   {/if}</BlocksWrapper

package/lib/browser/components/blocks/blocks.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         parent: BlocksProps["parent"];
         path: BlocksProps["path"];
         styleProp: BlocksProps["styleProp"];
+        className?: BlocksProps["className"];
         context?: BlocksProps["context"];
         linkComponent?: BlocksProps["linkComponent"];
         registeredComponents?: BlocksProps["registeredComponents"];

package/lib/browser/components/blocks/blocks.types.d.ts

@@ -2,8 +2,9 @@
 import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
 import type { BlocksWrapperProps } from './blocks-wrapper.svelte';
-export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps' | 'classNameProp'>> & {
     context?: Writable<BuilderContextInterface>;
     registeredComponents?: RegisteredComponents;
     linkComponent?: any;
+    className?: string;
 };

package/lib/browser/components/content/components/enable-editor.svelte

@@ -123,7 +123,6 @@ function runHttpRequests() {
             localState: undefined,
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
-            enableCache: true,
         })));
         fetch(evaluatedUrl)
             .then((response) => response.json())

package/lib/browser/components/content/content.svelte

@@ -108,10 +108,6 @@ if (jsCode) {
             $builderContextSignal.rootSetState?.(newState);
         },
         isExpression: false,
-        /**
-         * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
-         */
-        enableCache: false,
     });
 }
 setContext(ComponentsContext.key, {

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.22";
+export declare const SDK_VERSION = "2.0.24";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.22";
+export const SDK_VERSION = "2.0.24";

package/lib/browser/functions/evaluate/evaluate.d.ts

@@ -1,4 +1,5 @@
 import type { EvaluatorArgs } from './helpers';
 type EvalValue = unknown;
-export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression, enableCache }: EvaluatorArgs): EvalValue;
+export declare const getSimpleExpressionGetPath: (code: string) => string | undefined;
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: EvaluatorArgs): EvalValue;
 export {};

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

@@ -1,47 +1,38 @@
 import { logger } from '../../helpers/logger';
+import { get } from '../get';
 import { chooseBrowserOrServerEval } from './choose-eval';
 import { getBuilderGlobals, parseCode } from './helpers';
-// Caching is dangerous for several reasons
-// - JSON.stringify is not safe to run on things like `context`
-//   because anything can be passed, including non-stringifiable objects,
-//   circiular references, etc.
-// - JSON.stringify is expensive to run as a cache key
-// - This likely only helped because we were running processBlock multiple times
-//   but that is not fixed, and this will cause bugs and issues if enabled
-//
-// Perhaps the best approach is to allow users to configure if caching  is enabled or not
-// for instance on edge runtimes with slower evaluation times via the interpreter
-// That said, the repeat processBLock calls was making any evaluation time 10x+ slower
-// which is now fixed, so this still may not be necessary
-const DISABLE_CACHE = true;
-class EvalCache {
-    static cacheLimit = 20;
-    static cache = new Map();
-    static getCacheKey(args) {
-        return JSON.stringify({
-            ...args,
-            // replace the event with a random number to break cache
-            // thats because we can't serialize the event object due to circular refs in DOM node refs.
-            event: args.event ? Math.random() : undefined
-        });
-    }
-    static getCachedValue(key) {
-        const cachedVal = EvalCache.cache.get(key);
-        return cachedVal;
-    }
-    static setCachedValue(key, value) {
-        if (EvalCache.cache.size > 20) {
-            EvalCache.cache.delete(EvalCache.cache.keys().next().value);
-        }
-        EvalCache.cache.set(key, {
-            value
-        });
-    }
-}
-export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true, enableCache }) {
-    if (code === '') {
+/**
+ * handles multi-level gets on state: `state.x.y.z`
+ * does not handle bracket notation
+ * see https://regexr.com/87a9j
+ */
+const STATE_GETTER_REGEX = /^(return )?(\s*)?state(?<getPath>(\.\w+)+)(\s*);?$/;
+/**
+ * Handles multi-level gets on state transpiled by rollup with virtual index.
+ * see https://regexr.com/87ai4
+ */
+const VIRTUAL_INDEX_REGEX = /(\s)*var(\s)+_virtual_index(\s)*=(\s)*state(?<getPath>(\.\w+)+)(\s*);?(\s)*return(\s)*_virtual_index(\s)*/;
+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);
+};
+export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
+    if (code.trim() === '') {
         return undefined;
     }
+    /**
+     * For very simple expressions like "state.foo" we can optimize by skipping
+     * the executor altogether.
+     * We try not to take many risks with this optimizations, so we only do it for
+     * `state.{path}` expressions.
+     */
+    const getPath = getSimpleExpressionGetPath(code.trim());
+    if (getPath) {
+        return get({
+            ...rootState,
+            ...localState
+        }, getPath);
+    }
     const args = {
         code: parseCode(code, {
             isExpression
@@ -53,19 +44,8 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
         rootState,
         localState
     };
-    if (enableCache && !DISABLE_CACHE) {
-        const cacheKey = EvalCache.getCacheKey(args);
-        const cachedValue = EvalCache.getCachedValue(cacheKey);
-        if (cachedValue) {
-            return cachedValue.value;
-        }
-    }
     try {
         const newEval = chooseBrowserOrServerEval(args);
-        if (enableCache) {
-            const cacheKey = EvalCache.getCacheKey(args);
-            EvalCache.setCachedValue(cacheKey, newEval);
-        }
         return newEval;
     }
     catch (e) {

package/lib/browser/functions/evaluate/helpers.d.ts

@@ -3,7 +3,6 @@ import { getUserAttributes } from '../track/helpers';
 export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
     event?: Event;
     isExpression?: boolean;
-    enableCache: boolean;
 };
 export type BuilderGlobals = {
     isEditing: boolean | undefined;

package/lib/browser/functions/get-block-actions-handler.js

@@ -6,6 +6,5 @@ export const createEventHandler = (value, options) => event => evaluate({
     rootState: options.rootState,
     rootSetState: options.rootSetState,
     event,
-    isExpression: false,
-    enableCache: true
+    isExpression: false
 });

package/lib/browser/functions/get-processed-block.js

@@ -65,8 +65,7 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState
             localState,
             rootState,
             rootSetState,
-            context,
-            enableCache: true
+            context
         });
         set(copied, binding, value);
     }

package/lib/edge/blocks/text/text.svelte

@@ -20,7 +20,6 @@ $: processedText = () => {
         localState,
         rootState,
         rootSetState,
-        enableCache: false,
     }));
 };
 </script>

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

@@ -32,8 +32,7 @@ export const getRepeatItemData = ({ block, context }) => {
         localState: context.localState,
         rootState: context.rootState,
         rootSetState: context.rootSetState,
-        context: context.context,
-        enableCache: true
+        context: context.context
     });
     if (!Array.isArray(itemsArray)) {
         return undefined;

package/lib/edge/components/blocks/blocks-wrapper.svelte

@@ -3,6 +3,7 @@
 <script>import { onMount } from "svelte";
 import { isEditing } from "../../functions/is-editing";
 export let blocks;
+export let classNameProp = undefined;
 export let parent;
 export let path;
 export let styleProp;
@@ -41,7 +42,9 @@ function onMouseEnter() {
     }
 }
 $: className = () => {
-    return "builder-blocks" + (!blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !blocks?.length ? "no-blocks" : "", classNameProp]
+        .filter(Boolean)
+        .join(" ");
 };
 let blocksWrapperRef;
 onMount(() => { });

package/lib/edge/components/blocks/blocks.svelte

@@ -7,6 +7,7 @@ export let blocks;
 export let parent;
 export let path;
 export let styleProp;
+export let className = undefined;
 export let context = undefined;
 export let linkComponent = undefined;
 export let registeredComponents = undefined;
@@ -19,9 +20,10 @@ let componentsContext = getContext(ComponentsContext.key);
   {parent}
   {path}
   {styleProp}
-  BlocksWrapper={$context?.BlocksWrapper || $builderContext.BlocksWrapper}
+  classNameProp={className}
+  BlocksWrapper={$context?.BlocksWrapper || $builderContext?.BlocksWrapper}
   BlocksWrapperProps={$context?.BlocksWrapperProps ||
-    $builderContext.BlocksWrapperProps}
+    $builderContext?.BlocksWrapperProps}
 >
   {#if blocks}
     {#each blocks as block (block.id)}
@@ -30,7 +32,7 @@ let componentsContext = getContext(ComponentsContext.key);
         {linkComponent}
         context={context || builderContext}
         registeredComponents={registeredComponents ||
-          componentsContext.registeredComponents}
+          componentsContext?.registeredComponents}
       />
     {/each}
   {/if}</BlocksWrapper

package/lib/edge/components/blocks/blocks.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         parent: BlocksProps["parent"];
         path: BlocksProps["path"];
         styleProp: BlocksProps["styleProp"];
+        className?: BlocksProps["className"];
         context?: BlocksProps["context"];
         linkComponent?: BlocksProps["linkComponent"];
         registeredComponents?: BlocksProps["registeredComponents"];

package/lib/edge/components/blocks/blocks.types.d.ts

@@ -2,8 +2,9 @@
 import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
 import type { BlocksWrapperProps } from './blocks-wrapper.svelte';
-export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps' | 'classNameProp'>> & {
     context?: Writable<BuilderContextInterface>;
     registeredComponents?: RegisteredComponents;
     linkComponent?: any;
+    className?: string;
 };

package/lib/edge/components/content/components/enable-editor.svelte

@@ -123,7 +123,6 @@ function runHttpRequests() {
             localState: undefined,
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
-            enableCache: true,
         })));
         fetch(evaluatedUrl)
             .then((response) => response.json())

package/lib/edge/components/content/content.svelte

@@ -108,10 +108,6 @@ if (jsCode) {
             $builderContextSignal.rootSetState?.(newState);
         },
         isExpression: false,
-        /**
-         * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
-         */
-        enableCache: false,
     });
 }
 setContext(ComponentsContext.key, {

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.22";
+export declare const SDK_VERSION = "2.0.24";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.22";
+export const SDK_VERSION = "2.0.24";

package/lib/edge/functions/evaluate/evaluate.d.ts

@@ -1,4 +1,5 @@
 import type { EvaluatorArgs } from './helpers';
 type EvalValue = unknown;
-export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression, enableCache }: EvaluatorArgs): EvalValue;
+export declare const getSimpleExpressionGetPath: (code: string) => string | undefined;
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: EvaluatorArgs): EvalValue;
 export {};

package/lib/edge/functions/evaluate/evaluate.js

@@ -1,47 +1,38 @@
 import { logger } from '../../helpers/logger';
+import { get } from '../get';
 import { chooseBrowserOrServerEval } from './choose-eval';
 import { getBuilderGlobals, parseCode } from './helpers';
-// Caching is dangerous for several reasons
-// - JSON.stringify is not safe to run on things like `context`
-//   because anything can be passed, including non-stringifiable objects,
-//   circiular references, etc.
-// - JSON.stringify is expensive to run as a cache key
-// - This likely only helped because we were running processBlock multiple times
-//   but that is not fixed, and this will cause bugs and issues if enabled
-//
-// Perhaps the best approach is to allow users to configure if caching  is enabled or not
-// for instance on edge runtimes with slower evaluation times via the interpreter
-// That said, the repeat processBLock calls was making any evaluation time 10x+ slower
-// which is now fixed, so this still may not be necessary
-const DISABLE_CACHE = true;
-class EvalCache {
-    static cacheLimit = 20;
-    static cache = new Map();
-    static getCacheKey(args) {
-        return JSON.stringify({
-            ...args,
-            // replace the event with a random number to break cache
-            // thats because we can't serialize the event object due to circular refs in DOM node refs.
-            event: args.event ? Math.random() : undefined
-        });
-    }
-    static getCachedValue(key) {
-        const cachedVal = EvalCache.cache.get(key);
-        return cachedVal;
-    }
-    static setCachedValue(key, value) {
-        if (EvalCache.cache.size > 20) {
-            EvalCache.cache.delete(EvalCache.cache.keys().next().value);
-        }
-        EvalCache.cache.set(key, {
-            value
-        });
-    }
-}
-export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true, enableCache }) {
-    if (code === '') {
+/**
+ * handles multi-level gets on state: `state.x.y.z`
+ * does not handle bracket notation
+ * see https://regexr.com/87a9j
+ */
+const STATE_GETTER_REGEX = /^(return )?(\s*)?state(?<getPath>(\.\w+)+)(\s*);?$/;
+/**
+ * Handles multi-level gets on state transpiled by rollup with virtual index.
+ * see https://regexr.com/87ai4
+ */
+const VIRTUAL_INDEX_REGEX = /(\s)*var(\s)+_virtual_index(\s)*=(\s)*state(?<getPath>(\.\w+)+)(\s*);?(\s)*return(\s)*_virtual_index(\s)*/;
+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);
+};
+export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
+    if (code.trim() === '') {
         return undefined;
     }
+    /**
+     * For very simple expressions like "state.foo" we can optimize by skipping
+     * the executor altogether.
+     * We try not to take many risks with this optimizations, so we only do it for
+     * `state.{path}` expressions.
+     */
+    const getPath = getSimpleExpressionGetPath(code.trim());
+    if (getPath) {
+        return get({
+            ...rootState,
+            ...localState
+        }, getPath);
+    }
     const args = {
         code: parseCode(code, {
             isExpression
@@ -53,19 +44,8 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
         rootState,
         localState
     };
-    if (enableCache && !DISABLE_CACHE) {
-        const cacheKey = EvalCache.getCacheKey(args);
-        const cachedValue = EvalCache.getCachedValue(cacheKey);
-        if (cachedValue) {
-            return cachedValue.value;
-        }
-    }
     try {
         const newEval = chooseBrowserOrServerEval(args);
-        if (enableCache) {
-            const cacheKey = EvalCache.getCacheKey(args);
-            EvalCache.setCachedValue(cacheKey, newEval);
-        }
         return newEval;
     }
     catch (e) {

package/lib/edge/functions/evaluate/helpers.d.ts

@@ -3,7 +3,6 @@ import { getUserAttributes } from '../track/helpers';
 export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
     event?: Event;
     isExpression?: boolean;
-    enableCache: boolean;
 };
 export type BuilderGlobals = {
     isEditing: boolean | undefined;

package/lib/edge/functions/get-block-actions-handler.js

@@ -6,6 +6,5 @@ export const createEventHandler = (value, options) => event => evaluate({
     rootState: options.rootState,
     rootSetState: options.rootSetState,
     event,
-    isExpression: false,
-    enableCache: true
+    isExpression: false
 });

package/lib/edge/functions/get-processed-block.js

@@ -65,8 +65,7 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState
             localState,
             rootState,
             rootSetState,
-            context,
-            enableCache: true
+            context
         });
         set(copied, binding, value);
     }

package/lib/node/blocks/text/text.svelte

@@ -20,7 +20,6 @@ $: processedText = () => {
         localState,
         rootState,
         rootSetState,
-        enableCache: false,
     }));
 };
 </script>

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

@@ -32,8 +32,7 @@ export const getRepeatItemData = ({ block, context }) => {
         localState: context.localState,
         rootState: context.rootState,
         rootSetState: context.rootSetState,
-        context: context.context,
-        enableCache: true
+        context: context.context
     });
     if (!Array.isArray(itemsArray)) {
         return undefined;

package/lib/node/components/blocks/blocks-wrapper.svelte

@@ -3,6 +3,7 @@
 <script>import { onMount } from "svelte";
 import { isEditing } from "../../functions/is-editing";
 export let blocks;
+export let classNameProp = undefined;
 export let parent;
 export let path;
 export let styleProp;
@@ -41,7 +42,9 @@ function onMouseEnter() {
     }
 }
 $: className = () => {
-    return "builder-blocks" + (!blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !blocks?.length ? "no-blocks" : "", classNameProp]
+        .filter(Boolean)
+        .join(" ");
 };
 let blocksWrapperRef;
 onMount(() => { });

package/lib/node/components/blocks/blocks.svelte

@@ -7,6 +7,7 @@ export let blocks;
 export let parent;
 export let path;
 export let styleProp;
+export let className = undefined;
 export let context = undefined;
 export let linkComponent = undefined;
 export let registeredComponents = undefined;
@@ -19,9 +20,10 @@ let componentsContext = getContext(ComponentsContext.key);
   {parent}
   {path}
   {styleProp}
-  BlocksWrapper={$context?.BlocksWrapper || $builderContext.BlocksWrapper}
+  classNameProp={className}
+  BlocksWrapper={$context?.BlocksWrapper || $builderContext?.BlocksWrapper}
   BlocksWrapperProps={$context?.BlocksWrapperProps ||
-    $builderContext.BlocksWrapperProps}
+    $builderContext?.BlocksWrapperProps}
 >
   {#if blocks}
     {#each blocks as block (block.id)}
@@ -30,7 +32,7 @@ let componentsContext = getContext(ComponentsContext.key);
         {linkComponent}
         context={context || builderContext}
         registeredComponents={registeredComponents ||
-          componentsContext.registeredComponents}
+          componentsContext?.registeredComponents}
       />
     {/each}
   {/if}</BlocksWrapper

package/lib/node/components/blocks/blocks.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         parent: BlocksProps["parent"];
         path: BlocksProps["path"];
         styleProp: BlocksProps["styleProp"];
+        className?: BlocksProps["className"];
         context?: BlocksProps["context"];
         linkComponent?: BlocksProps["linkComponent"];
         registeredComponents?: BlocksProps["registeredComponents"];

package/lib/node/components/blocks/blocks.types.d.ts

@@ -2,8 +2,9 @@
 import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
 import type { BlocksWrapperProps } from './blocks-wrapper.svelte';
-export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps' | 'classNameProp'>> & {
     context?: Writable<BuilderContextInterface>;
     registeredComponents?: RegisteredComponents;
     linkComponent?: any;
+    className?: string;
 };

package/lib/node/components/content/components/enable-editor.svelte

@@ -123,7 +123,6 @@ function runHttpRequests() {
             localState: undefined,
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
-            enableCache: true,
         })));
         fetch(evaluatedUrl)
             .then((response) => response.json())

package/lib/node/components/content/content.svelte

@@ -108,10 +108,6 @@ if (jsCode) {
             $builderContextSignal.rootSetState?.(newState);
         },
         isExpression: false,
-        /**
-         * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
-         */
-        enableCache: false,
     });
 }
 setContext(ComponentsContext.key, {

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.22";
+export declare const SDK_VERSION = "2.0.24";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.22";
+export const SDK_VERSION = "2.0.24";

package/lib/node/functions/evaluate/evaluate.d.ts

@@ -1,4 +1,5 @@
 import type { EvaluatorArgs } from './helpers';
 type EvalValue = unknown;
-export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression, enableCache }: EvaluatorArgs): EvalValue;
+export declare const getSimpleExpressionGetPath: (code: string) => string | undefined;
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: EvaluatorArgs): EvalValue;
 export {};

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

@@ -1,47 +1,38 @@
 import { logger } from '../../helpers/logger';
+import { get } from '../get';
 import { chooseBrowserOrServerEval } from './choose-eval';
 import { getBuilderGlobals, parseCode } from './helpers';
-// Caching is dangerous for several reasons
-// - JSON.stringify is not safe to run on things like `context`
-//   because anything can be passed, including non-stringifiable objects,
-//   circiular references, etc.
-// - JSON.stringify is expensive to run as a cache key
-// - This likely only helped because we were running processBlock multiple times
-//   but that is not fixed, and this will cause bugs and issues if enabled
-//
-// Perhaps the best approach is to allow users to configure if caching  is enabled or not
-// for instance on edge runtimes with slower evaluation times via the interpreter
-// That said, the repeat processBLock calls was making any evaluation time 10x+ slower
-// which is now fixed, so this still may not be necessary
-const DISABLE_CACHE = true;
-class EvalCache {
-    static cacheLimit = 20;
-    static cache = new Map();
-    static getCacheKey(args) {
-        return JSON.stringify({
-            ...args,
-            // replace the event with a random number to break cache
-            // thats because we can't serialize the event object due to circular refs in DOM node refs.
-            event: args.event ? Math.random() : undefined
-        });
-    }
-    static getCachedValue(key) {
-        const cachedVal = EvalCache.cache.get(key);
-        return cachedVal;
-    }
-    static setCachedValue(key, value) {
-        if (EvalCache.cache.size > 20) {
-            EvalCache.cache.delete(EvalCache.cache.keys().next().value);
-        }
-        EvalCache.cache.set(key, {
-            value
-        });
-    }
-}
-export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true, enableCache }) {
-    if (code === '') {
+/**
+ * handles multi-level gets on state: `state.x.y.z`
+ * does not handle bracket notation
+ * see https://regexr.com/87a9j
+ */
+const STATE_GETTER_REGEX = /^(return )?(\s*)?state(?<getPath>(\.\w+)+)(\s*);?$/;
+/**
+ * Handles multi-level gets on state transpiled by rollup with virtual index.
+ * see https://regexr.com/87ai4
+ */
+const VIRTUAL_INDEX_REGEX = /(\s)*var(\s)+_virtual_index(\s)*=(\s)*state(?<getPath>(\.\w+)+)(\s*);?(\s)*return(\s)*_virtual_index(\s)*/;
+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);
+};
+export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
+    if (code.trim() === '') {
         return undefined;
     }
+    /**
+     * For very simple expressions like "state.foo" we can optimize by skipping
+     * the executor altogether.
+     * We try not to take many risks with this optimizations, so we only do it for
+     * `state.{path}` expressions.
+     */
+    const getPath = getSimpleExpressionGetPath(code.trim());
+    if (getPath) {
+        return get({
+            ...rootState,
+            ...localState
+        }, getPath);
+    }
     const args = {
         code: parseCode(code, {
             isExpression
@@ -53,19 +44,8 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
         rootState,
         localState
     };
-    if (enableCache && !DISABLE_CACHE) {
-        const cacheKey = EvalCache.getCacheKey(args);
-        const cachedValue = EvalCache.getCachedValue(cacheKey);
-        if (cachedValue) {
-            return cachedValue.value;
-        }
-    }
     try {
         const newEval = chooseBrowserOrServerEval(args);
-        if (enableCache) {
-            const cacheKey = EvalCache.getCacheKey(args);
-            EvalCache.setCachedValue(cacheKey, newEval);
-        }
         return newEval;
     }
     catch (e) {

package/lib/node/functions/evaluate/helpers.d.ts

@@ -3,7 +3,6 @@ import { getUserAttributes } from '../track/helpers';
 export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
     event?: Event;
     isExpression?: boolean;
-    enableCache: boolean;
 };
 export type BuilderGlobals = {
     isEditing: boolean | undefined;

package/lib/node/functions/get-block-actions-handler.js

@@ -6,6 +6,5 @@ export const createEventHandler = (value, options) => event => evaluate({
     rootState: options.rootState,
     rootSetState: options.rootSetState,
     event,
-    isExpression: false,
-    enableCache: true
+    isExpression: false
 });

package/lib/node/functions/get-processed-block.js

@@ -65,8 +65,7 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState
             localState,
             rootState,
             rootSetState,
-            context,
-            enableCache: true
+            context
         });
         set(copied, binding, value);
     }

package/package.json

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

package/src/blocks/text/text.svelte

@@ -32,7 +32,6 @@
           localState,
           rootState,
           rootSetState,
-          enableCache: false,
         }) as string
     );
   };

package/src/components/block/block.helpers.ts

@@ -50,8 +50,7 @@ export const getRepeatItemData = ({
     localState: context.localState,
     rootState: context.rootState,
     rootSetState: context.rootSetState,
-    context: context.context,
-    enableCache: true
+    context: context.context
   });
   if (!Array.isArray(itemsArray)) {
     return undefined;

package/src/components/blocks/blocks-wrapper.svelte

@@ -13,6 +13,7 @@
      */
     BlocksWrapperProps: any;
     children?: any;
+    classNameProp?: string;
   };
 </script>
 
@@ -23,6 +24,7 @@
   import type { BuilderBlock } from "../../types/builder-block";
 
   export let blocks: BlocksWrapperProps["blocks"];
+  export let classNameProp: BlocksWrapperProps["classNameProp"] = undefined;
   export let parent: BlocksWrapperProps["parent"];
   export let path: BlocksWrapperProps["path"];
   export let styleProp: BlocksWrapperProps["styleProp"];
@@ -69,7 +71,9 @@
     }
   }
   $: className = () => {
-    return "builder-blocks" + (!blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !blocks?.length ? "no-blocks" : "", classNameProp]
+      .filter(Boolean)
+      .join(" ");
   };
 
   let blocksWrapperRef;

package/src/components/blocks/blocks.svelte

@@ -11,6 +11,7 @@
   export let parent: BlocksProps["parent"];
   export let path: BlocksProps["path"];
   export let styleProp: BlocksProps["styleProp"];
+  export let className: BlocksProps["className"] = undefined;
   export let context: BlocksProps["context"] = undefined;
   export let linkComponent: BlocksProps["linkComponent"] = undefined;
   export let registeredComponents: BlocksProps["registeredComponents"] =
@@ -25,9 +26,10 @@
   {parent}
   {path}
   {styleProp}
-  BlocksWrapper={$context?.BlocksWrapper || $builderContext.BlocksWrapper}
+  classNameProp={className}
+  BlocksWrapper={$context?.BlocksWrapper || $builderContext?.BlocksWrapper}
   BlocksWrapperProps={$context?.BlocksWrapperProps ||
-    $builderContext.BlocksWrapperProps}
+    $builderContext?.BlocksWrapperProps}
 >
   {#if blocks}
     {#each blocks as block (block.id)}
@@ -36,7 +38,7 @@
         {linkComponent}
         context={context || builderContext}
         registeredComponents={registeredComponents ||
-          componentsContext.registeredComponents}
+          componentsContext?.registeredComponents}
       />
     {/each}
   {/if}</BlocksWrapper

package/src/components/blocks/blocks.types.ts

@@ -1,8 +1,9 @@
 import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
 import type { BlocksWrapperProps } from './blocks-wrapper.svelte';
-export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps' | 'classNameProp'>> & {
   context?: Writable<BuilderContextInterface>;
   registeredComponents?: RegisteredComponents;
   linkComponent?: any;
+  className?: string;
 }

package/src/components/content/components/enable-editor.svelte

@@ -158,7 +158,6 @@
             localState: undefined,
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
-            enableCache: true,
           })
         )
       );

package/src/components/content/content.svelte

@@ -130,10 +130,6 @@
         $builderContextSignal.rootSetState?.(newState);
       },
       isExpression: false,
-      /**
-       * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
-       */
-      enableCache: false,
     });
   }
 

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.22"
+export const SDK_VERSION = "2.0.24"

package/src/functions/evaluate/evaluate.ts

@@ -1,48 +1,25 @@
 import { logger } from '../../helpers/logger';
+import { get } from '../get';
 import { chooseBrowserOrServerEval } from './choose-eval';
 import type { EvaluatorArgs, ExecutorArgs } from './helpers';
 import { getBuilderGlobals, parseCode } from './helpers';
-
-// Caching is dangerous for several reasons
-// - JSON.stringify is not safe to run on things like `context`
-//   because anything can be passed, including non-stringifiable objects,
-//   circiular references, etc.
-// - JSON.stringify is expensive to run as a cache key
-// - This likely only helped because we were running processBlock multiple times
-//   but that is not fixed, and this will cause bugs and issues if enabled
-//
-// Perhaps the best approach is to allow users to configure if caching  is enabled or not
-// for instance on edge runtimes with slower evaluation times via the interpreter
-// That said, the repeat processBLock calls was making any evaluation time 10x+ slower
-// which is now fixed, so this still may not be necessary
-const DISABLE_CACHE = true;
 type EvalValue = unknown;
-class EvalCache {
-  static cacheLimit = 20;
-  static cache = new Map<string, {
-    value: EvalValue;
-  } | undefined>();
-  static getCacheKey(args: ExecutorArgs) {
-    return JSON.stringify({
-      ...args,
-      // replace the event with a random number to break cache
-      // thats because we can't serialize the event object due to circular refs in DOM node refs.
-      event: args.event ? Math.random() : undefined
-    });
-  }
-  static getCachedValue(key: string) {
-    const cachedVal = EvalCache.cache.get(key);
-    return cachedVal;
-  }
-  static setCachedValue(key: string, value: EvalValue) {
-    if (EvalCache.cache.size > 20) {
-      EvalCache.cache.delete(EvalCache.cache.keys().next().value);
-    }
-    EvalCache.cache.set(key, {
-      value
-    });
-  }
-}
+
+/**
+ * handles multi-level gets on state: `state.x.y.z`
+ * does not handle bracket notation
+ * see https://regexr.com/87a9j
+ */
+const STATE_GETTER_REGEX = /^(return )?(\s*)?state(?<getPath>(\.\w+)+)(\s*);?$/;
+
+/**
+ * Handles multi-level gets on state transpiled by rollup with virtual index.
+ * see https://regexr.com/87ai4
+ */
+const VIRTUAL_INDEX_REGEX = /(\s)*var(\s)+_virtual_index(\s)*=(\s)*state(?<getPath>(\.\w+)+)(\s*);?(\s)*return(\s)*_virtual_index(\s)*/;
+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);
+};
 export function evaluate({
   code,
   context,
@@ -50,12 +27,25 @@ export function evaluate({
   rootState,
   rootSetState,
   event,
-  isExpression = true,
-  enableCache
+  isExpression = true
 }: EvaluatorArgs): EvalValue {
-  if (code === '') {
+  if (code.trim() === '') {
     return undefined;
   }
+
+  /**
+   * For very simple expressions like "state.foo" we can optimize by skipping
+   * the executor altogether.
+   * We try not to take many risks with this optimizations, so we only do it for
+   * `state.{path}` expressions.
+   */
+  const getPath = getSimpleExpressionGetPath(code.trim());
+  if (getPath) {
+    return get({
+      ...rootState,
+      ...localState
+    }, getPath);
+  }
   const args: ExecutorArgs = {
     code: parseCode(code, {
       isExpression
@@ -67,19 +57,8 @@ export function evaluate({
     rootState,
     localState
   };
-  if (enableCache && !DISABLE_CACHE) {
-    const cacheKey = EvalCache.getCacheKey(args);
-    const cachedValue = EvalCache.getCachedValue(cacheKey);
-    if (cachedValue) {
-      return cachedValue.value;
-    }
-  }
   try {
     const newEval = chooseBrowserOrServerEval(args);
-    if (enableCache) {
-      const cacheKey = EvalCache.getCacheKey(args);
-      EvalCache.setCachedValue(cacheKey, newEval);
-    }
     return newEval;
   } catch (e: any) {
     logger.error('Failed code evaluation: ' + e.message, {

package/src/functions/evaluate/helpers.ts

@@ -5,7 +5,6 @@ import { getUserAttributes } from '../track/helpers';
 export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
   event?: Event;
   isExpression?: boolean;
-  enableCache: boolean;
 };
 export type BuilderGlobals = {
   isEditing: boolean | undefined;

package/src/functions/get-block-actions-handler.ts

@@ -12,6 +12,5 @@ export const createEventHandler = (value: string, options: Options): EventHandle
   rootState: options.rootState,
   rootSetState: options.rootSetState,
   event,
-  isExpression: false,
-  enableCache: true
+  isExpression: false
 })

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

@@ -75,8 +75,7 @@ const evaluateBindings = ({
       localState,
       rootState,
       rootSetState,
-      context,
-      enableCache: true
+      context
     });
     set(copied, binding, value);
   }