@builder.io/sdk-svelte 1.0.11 → 1.0.12

package/lib/browser/blocks/BaseText.svelte

@@ -16,6 +16,4 @@ function mitosis_styling(node, vars) {
 let builderContext = getContext(BuilderContext.key);
 </script>
 
-<span use:mitosis_styling={$builderContext.inheritedStyles}>
-  {text}
-</span>
+<span use:mitosis_styling={$builderContext.inheritedStyles}>{text}</span>

package/lib/browser/blocks/button/button.svelte

@@ -26,6 +26,5 @@ export let text = undefined;
   }}
   TagName={link ? builderLinkComponent || "a" : "button"}
   actionAttributes={filterAttrs(attributes, "on:", true)}
->
-  {text}
-</DynamicRenderer>
+  >{text}</DynamicRenderer
+>

package/lib/browser/blocks/columns/columns.svelte

@@ -131,7 +131,6 @@ let flexDir = stackColumnsAt === "never"
   {#if TARGET !== "reactNative"}
     <InlinedStyles styles={columnsStyles()} />
   {/if}
-
   {#each columns as column, index (index)}
     <DynamicRenderer
       TagName={column.link ? builderLinkComponent || "a" : "div"}
@@ -146,8 +145,7 @@ let flexDir = stackColumnsAt === "never"
         [getClassPropName()]: "builder-column",
         style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
       }}
-    >
-      <Blocks
+      ><Blocks
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{
@@ -157,8 +155,8 @@ let flexDir = stackColumnsAt === "never"
         registeredComponents={builderComponents}
         linkComponent={builderLinkComponent}
         blocks={column.blocks}
-      />
-    </DynamicRenderer>
+      /></DynamicRenderer
+    >
   {/each}
 </div>
 

package/lib/browser/blocks/form/form/form.svelte

@@ -261,7 +261,6 @@ let formErrorMessage = "";
       />
     {/each}
   {/if}
-
   {#if submissionState() === "error"}
     <Blocks
       path="errorMessage"
@@ -269,7 +268,6 @@ let formErrorMessage = "";
       context={builderContext}
     />
   {/if}
-
   {#if submissionState() === "sending"}
     <Blocks
       path="sendingMessage"
@@ -277,13 +275,13 @@ let formErrorMessage = "";
       context={builderContext}
     />
   {/if}
-
   {#if submissionState() === "error" && responseData}
-    <pre class="builder-form-error-text pre">
-        {JSON.stringify(responseData, null, 2)}
-      </pre>
+    <pre class="builder-form-error-text pre">{JSON.stringify(
+        responseData,
+        null,
+        2
+      )}</pre>
   {/if}
-
   {#if submissionState() === "success"}
     <Blocks
       path="successMessage"

package/lib/browser/blocks/form/submit-button/submit-button.svelte

@@ -12,7 +12,5 @@ export let text = undefined;
 <button
   type="submit"
   {...filterAttrs(attributes, "on:", false)}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
->
-  {text}
-</button>
+  use:setAttrs={filterAttrs(attributes, "on:", true)}>{text}</button
+>

package/lib/browser/blocks/image/image.svelte

@@ -65,8 +65,7 @@ $: aspectRatioCss = () => {
 <picture>
   {#if webpSrcSet()}
     <source type="image/webp" srcset={webpSrcSet()} />
-  {/if}
-  <img
+  {/if}<img
     use:mitosis_styling={{
       objectPosition: backgroundPosition || "center",
       objectFit: backgroundSize || "cover",
@@ -79,8 +78,8 @@ $: aspectRatioCss = () => {
     src={image}
     srcset={srcSetToUse()}
     {sizes}
-  />
-</picture>
+  /></picture
+>
 
 {#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
   <div
@@ -96,9 +95,7 @@ $: aspectRatioCss = () => {
 {/if}
 
 {#if !fitContent && $$slots.default}
-  <div class="div-2">
-    <slot />
-  </div>
+  <div class="div-2"><slot /></div>
 {/if}
 
 <style>

package/lib/browser/blocks/video/video.svelte

@@ -89,9 +89,8 @@ $: spreadProps = () => {
   >
     {#if !lazyLoad}
       <source type="video/mp4" src={video} />
-    {/if}
-  </video>
-
+    {/if}</video
+  >
   {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
     <div
       use:mitosis_styling={{
@@ -102,7 +101,6 @@ $: spreadProps = () => {
       }}
     />
   {/if}
-
   {#if builderBlock?.children?.length && fitContent}
     <div
       use:mitosis_styling={{
@@ -114,7 +112,6 @@ $: spreadProps = () => {
       <slot />
     </div>
   {/if}
-
   {#if builderBlock?.children?.length && !fitContent}
     <div
       use:mitosis_styling={{

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

@@ -10,3 +10,7 @@ export declare const getRepeatItemData: ({ block, context }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => RepeatData[] | undefined;
+export declare const getInheritedStyles: ({ block, context }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => Partial<CSSStyleDeclaration>;

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

@@ -1,5 +1,7 @@
 import { evaluate } from '../../functions/evaluate/index.js';
+import { extractTextStyles } from '../../functions/extract-text-styles.js';
 import { getProcessedBlock } from '../../functions/get-processed-block.js';
+import { getStyle } from '../../functions/get-style.js';
 export const getComponent = ({ block, context, registeredComponents }) => {
     const componentName = getProcessedBlock({
         block,
@@ -38,7 +40,8 @@ export const getRepeatItemData = ({ block, context }) => {
         localState: context.localState,
         rootState: context.rootState,
         rootSetState: context.rootSetState,
-        context: context.context
+        context: context.context,
+        enableCache: true
     });
     if (!Array.isArray(itemsArray)) {
         return undefined;
@@ -60,3 +63,13 @@ export const getRepeatItemData = ({ block, context }) => {
     }));
     return repeatArray;
 };
+export const getInheritedStyles = ({ block, context }) => {
+    const style = getStyle({
+        block,
+        context
+    });
+    if (!style) {
+        return {};
+    }
+    return extractTextStyles(style);
+};

package/lib/browser/components/block/block.svelte

@@ -1,13 +1,10 @@
 <script context="module"></script>
 
 <script>import { onMount } from "svelte";
-import { writable } from "svelte/store";
-import "../../functions/extract-text-styles.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import "../../functions/get-style.js";
 import { bindAnimations } from "./animator.js";
-import { getComponent, getRepeatItemData } from "./block.helpers.js";
+import { getComponent, getRepeatItemData, } from "./block.helpers.js";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
@@ -95,7 +92,7 @@ $: componentRefProps = () => {
                 }
                 : {}),
         },
-        context: childrenContext,
+        context: context,
         linkComponent: linkComponent,
         registeredComponents: registeredComponents,
         builderBlock: processedBlock(),
@@ -103,7 +100,6 @@ $: componentRefProps = () => {
         isInteractive: !blockComponent?.()?.isRSC,
     };
 };
-let childrenContext = writable($context);
 onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
@@ -128,8 +124,7 @@ onMount(() => {
         block={processedBlock()}
         {context}
         {linkComponent}
-      >
-        <ComponentRef
+        ><ComponentRef
           componentRef={componentRefProps().componentRef}
           componentOptions={componentRefProps().componentOptions}
           blockChildren={componentRefProps().blockChildren}
@@ -140,13 +135,12 @@ onMount(() => {
           includeBlockProps={componentRefProps().includeBlockProps}
           isInteractive={componentRefProps().isInteractive}
         />
-
         {#each childrenWithoutParentComponent() as child (child.id)}
           <svelte:self
             block={child}
-            context={childrenContext}
             {registeredComponents}
             {linkComponent}
+            {context}
           />
         {/each}
       </BlockWrapper>

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

@@ -24,7 +24,5 @@ export let context;
     localState: $context.localState,
     context: $context.context,
     stripPrefix: true,
-  })}
->
-  <slot />
-</DynamicRenderer>
+  })}><slot /></DynamicRenderer
+>

package/lib/browser/components/block/components/interactive-element.svelte

@@ -26,7 +26,5 @@ export let context;
           context: $context.context,
         }),
       }
-    : {}}
->
-  <slot />
-</svelte:component>
+    : {}}><slot /></svelte:component
+>

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

@@ -60,10 +60,8 @@ $: className = () => {
   on:keypress={(event) => {
     onClick();
   }}
-  {...BlocksWrapperProps}
+  {...BlocksWrapperProps}><slot /></svelte:element
 >
-  <slot />
-</svelte:element>
 
 <style>
   .svelte-element {

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

@@ -33,5 +33,5 @@ let componentsContext = getContext(ComponentsContext.key);
           componentsContext.registeredComponents}
       />
     {/each}
-  {/if}
-</BlocksWrapper>
+  {/if}</BlocksWrapper
+>

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

@@ -99,6 +99,10 @@ function evaluateJsCode() {
             localState: undefined,
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
+            /**
+             * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
+             */
+            enableCache: false,
         });
     }
 }
@@ -121,13 +125,14 @@ function onClick(event) {
     }
 }
 function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
         code: group,
         context: context || {},
         localState: undefined,
         rootState: $builderContextSignal.rootState,
         rootSetState: $builderContextSignal.rootSetState,
-    }));
+        enableCache: true,
+    })));
 }
 function handleRequest({ url, key }) {
     fetch(url)
@@ -341,8 +346,6 @@ onDestroy(() => {
     }}
     on:initpreviewingbldr={(event) => {
       elementRef_onInitpreviewingbldr(event);
-    }}
+    }}><slot /></svelte:element
   >
-    <slot />
-  </svelte:element>
 {/if}

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

@@ -99,18 +99,16 @@ setContext(ComponentsContext.key, {
   {#if isSsrAbTest}
     <InlinedScript {scriptStr} />
   {/if}
-
   {#if TARGET !== "reactNative"}
     <ContentStyles
       contentId={$builderContextSignal.content?.id}
       cssCode={$builderContextSignal.content?.data?.cssCode}
       customFonts={$builderContextSignal.content?.data?.customFonts}
     />
-  {/if}
-  <Blocks
+  {/if}<Blocks
     blocks={$builderContextSignal.content?.data?.blocks}
     context={builderContextSignal}
     {registeredComponents}
     {linkComponent}
-  />
-</EnableEditor>
+  /></EnableEditor
+>

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

@@ -68,7 +68,6 @@ onMount(() => {
     id={`variants-styles-${content?.id}`}
     styles={hideVariantsStyleString()}
   />
-
   <InlinedScript scriptStr={updateCookieAndStylesScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
@@ -94,7 +93,6 @@ onMount(() => {
     />
   {/each}
 {/if}
-
 <ContentComponent
   {...{}}
   content={defaultContent()}

package/lib/browser/components/dynamic-renderer/dynamic-renderer.svelte

@@ -12,14 +12,12 @@ export let actionAttributes;
     <svelte:element
       this={TagName}
       {...attributes}
-      use:setAttrs={actionAttributes}
+      use:setAttrs={actionAttributes}><slot /></svelte:element
     >
-      <slot />
-    </svelte:element>
   {:else}
-    <svelte:component this={TagName} {...attributes} {...actionAttributes}>
-      <slot />
-    </svelte:component>
+    <svelte:component this={TagName} {...attributes} {...actionAttributes}
+      ><slot /></svelte:component
+    >
   {/if}
 {:else}
   <svelte:element

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.11";
+export declare const SDK_VERSION = "1.0.12";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.11";
+export const SDK_VERSION = "1.0.12";

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

@@ -19,7 +19,7 @@ export function flattenState({ rootState, localState, rootSetState }) {
                 return localState[prop];
             }
             const val = target[prop];
-            if (typeof val === 'object') {
+            if (typeof val === 'object' && val !== null) {
                 return flattenState({
                     rootState: val,
                     localState: undefined,

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

@@ -1,2 +1,4 @@
 import type { EvaluatorArgs } from './helpers.js';
-export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: EvaluatorArgs): any;
+type EvalValue = unknown;
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression, enableCache }: EvaluatorArgs): EvalValue;
+export {};

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

@@ -1,10 +1,34 @@
 import { logger } from '../../helpers/logger.js';
 import { chooseBrowserOrServerEval } from './choose-eval.js';
 import { getBuilderGlobals, parseCode } from './helpers.js';
-export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = 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 === '') {
         logger.warn('Skipping evaluation of empty code block.');
-        return;
+        return undefined;
     }
     const args = {
         code: parseCode(code, {
@@ -17,8 +41,20 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
         rootState,
         localState
     };
+    if (enableCache) {
+        const cacheKey = EvalCache.getCacheKey(args);
+        const cachedValue = EvalCache.getCachedValue(cacheKey);
+        if (cachedValue) {
+            return cachedValue.value;
+        }
+    }
     try {
-        return chooseBrowserOrServerEval(args);
+        const newEval = chooseBrowserOrServerEval(args);
+        if (enableCache) {
+            const cacheKey = EvalCache.getCacheKey(args);
+            EvalCache.setCachedValue(cacheKey, newEval);
+        }
+        return newEval;
     }
     catch (e) {
         logger.error('Failed code evaluation: ' + e.message, {

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

@@ -3,6 +3,7 @@ import { getUserAttributes } from '../track/helpers.js';
 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,5 +6,6 @@ export const createEventHandler = (value, options) => event => evaluate({
     rootState: options.rootState,
     rootSetState: options.rootSetState,
     event,
-    isExpression: false
+    isExpression: false,
+    enableCache: true
 });

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

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

package/lib/edge/blocks/BaseText.svelte

@@ -16,6 +16,4 @@ function mitosis_styling(node, vars) {
 let builderContext = getContext(BuilderContext.key);
 </script>
 
-<span use:mitosis_styling={$builderContext.inheritedStyles}>
-  {text}
-</span>
+<span use:mitosis_styling={$builderContext.inheritedStyles}>{text}</span>

package/lib/edge/blocks/button/button.svelte

@@ -26,6 +26,5 @@ export let text = undefined;
   }}
   TagName={link ? builderLinkComponent || "a" : "button"}
   actionAttributes={filterAttrs(attributes, "on:", true)}
->
-  {text}
-</DynamicRenderer>
+  >{text}</DynamicRenderer
+>

package/lib/edge/blocks/columns/columns.svelte

@@ -131,7 +131,6 @@ let flexDir = stackColumnsAt === "never"
   {#if TARGET !== "reactNative"}
     <InlinedStyles styles={columnsStyles()} />
   {/if}
-
   {#each columns as column, index (index)}
     <DynamicRenderer
       TagName={column.link ? builderLinkComponent || "a" : "div"}
@@ -146,8 +145,7 @@ let flexDir = stackColumnsAt === "never"
         [getClassPropName()]: "builder-column",
         style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
       }}
-    >
-      <Blocks
+      ><Blocks
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{
@@ -157,8 +155,8 @@ let flexDir = stackColumnsAt === "never"
         registeredComponents={builderComponents}
         linkComponent={builderLinkComponent}
         blocks={column.blocks}
-      />
-    </DynamicRenderer>
+      /></DynamicRenderer
+    >
   {/each}
 </div>
 

package/lib/edge/blocks/form/form/form.svelte

@@ -261,7 +261,6 @@ let formErrorMessage = "";
       />
     {/each}
   {/if}
-
   {#if submissionState() === "error"}
     <Blocks
       path="errorMessage"
@@ -269,7 +268,6 @@ let formErrorMessage = "";
       context={builderContext}
     />
   {/if}
-
   {#if submissionState() === "sending"}
     <Blocks
       path="sendingMessage"
@@ -277,13 +275,13 @@ let formErrorMessage = "";
       context={builderContext}
     />
   {/if}
-
   {#if submissionState() === "error" && responseData}
-    <pre class="builder-form-error-text pre">
-        {JSON.stringify(responseData, null, 2)}
-      </pre>
+    <pre class="builder-form-error-text pre">{JSON.stringify(
+        responseData,
+        null,
+        2
+      )}</pre>
   {/if}
-
   {#if submissionState() === "success"}
     <Blocks
       path="successMessage"

package/lib/edge/blocks/form/submit-button/submit-button.svelte

@@ -12,7 +12,5 @@ export let text = undefined;
 <button
   type="submit"
   {...filterAttrs(attributes, "on:", false)}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
->
-  {text}
-</button>
+  use:setAttrs={filterAttrs(attributes, "on:", true)}>{text}</button
+>

package/lib/edge/blocks/image/image.svelte

@@ -65,8 +65,7 @@ $: aspectRatioCss = () => {
 <picture>
   {#if webpSrcSet()}
     <source type="image/webp" srcset={webpSrcSet()} />
-  {/if}
-  <img
+  {/if}<img
     use:mitosis_styling={{
       objectPosition: backgroundPosition || "center",
       objectFit: backgroundSize || "cover",
@@ -79,8 +78,8 @@ $: aspectRatioCss = () => {
     src={image}
     srcset={srcSetToUse()}
     {sizes}
-  />
-</picture>
+  /></picture
+>
 
 {#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
   <div
@@ -96,9 +95,7 @@ $: aspectRatioCss = () => {
 {/if}
 
 {#if !fitContent && $$slots.default}
-  <div class="div-2">
-    <slot />
-  </div>
+  <div class="div-2"><slot /></div>
 {/if}
 
 <style>

package/lib/edge/blocks/video/video.svelte

@@ -89,9 +89,8 @@ $: spreadProps = () => {
   >
     {#if !lazyLoad}
       <source type="video/mp4" src={video} />
-    {/if}
-  </video>
-
+    {/if}</video
+  >
   {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
     <div
       use:mitosis_styling={{
@@ -102,7 +101,6 @@ $: spreadProps = () => {
       }}
     />
   {/if}
-
   {#if builderBlock?.children?.length && fitContent}
     <div
       use:mitosis_styling={{
@@ -114,7 +112,6 @@ $: spreadProps = () => {
       <slot />
     </div>
   {/if}
-
   {#if builderBlock?.children?.length && !fitContent}
     <div
       use:mitosis_styling={{