@builder.io/sdk-svelte 1.0.11 → 1.0.13

package/lib/edge/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/edge/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/edge/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/edge/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/node/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/node/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/node/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/node/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/node/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/node/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/node/blocks/symbol/symbol.svelte

@@ -50,7 +50,7 @@ $: onUpdateFn_0(...[symbol]);
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   <ContentVariants
-    __isNestedRender={true}
+    isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
     context={{

package/lib/node/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/node/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/node/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/node/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/node/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/node/components/block/components/interactive-element.svelte

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

package/lib/node/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/node/components/blocks/blocks.svelte

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

package/lib/node/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/node/components/content/components/enable-editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps"> & {
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender"> & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;

package/lib/node/components/content/components/styles.helpers.d.ts

@@ -13,3 +13,4 @@ export declare const getCss: ({ cssCode, contentId }: {
     cssCode?: string | undefined;
     contentId?: string | undefined;
 }) => string;
+export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n.builder-button {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";

package/lib/node/components/content/components/styles.helpers.js

@@ -56,3 +56,24 @@ export const getCss = ({ cssCode, contentId }) => {
     // TODO: handle if '&' is within a string like `content: "&"`
     return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
 };
+const DEFAULT_STYLES = `
+.builder-button {
+  all: unset;
+}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`;
+export const getDefaultStyles = (isNested) => {
+    return !isNested ? DEFAULT_STYLES : '';
+};

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

@@ -1,10 +1,11 @@
 <script context="module"></script>
 
 <script>import InlinedStyles from "../../inlined-styles.svelte";
-import { getCss, getFontCss } from "./styles.helpers.js";
+import { getCss, getDefaultStyles, getFontCss } from "./styles.helpers.js";
 export let cssCode = undefined;
 export let contentId = undefined;
 export let customFonts = undefined;
+export let isNestedRender = undefined;
 let injectedStyles = `
 ${getCss({
     cssCode: cssCode,
@@ -13,23 +14,7 @@ ${getCss({
 ${getFontCss({
     customFonts: customFonts,
 })}
-
-.builder-button {
-  all: unset;
-}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
+${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 

package/lib/node/components/content/components/styles.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
+    isNestedRender?: boolean;
 }
 import type { CustomFont } from "./styles.helpers.js";
 declare const __propDef: {
@@ -10,6 +11,7 @@ declare const __propDef: {
         cssCode?: Props["cssCode"];
         contentId?: Props["contentId"];
         customFonts?: Props["customFonts"];
+        isNestedRender?: Props["isNestedRender"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -29,6 +29,7 @@ export let contentWrapperProps = undefined;
 export let linkComponent = undefined;
 export let trustedHosts = undefined;
 export let isSsrAbTest;
+export let isNestedRender = undefined;
 function contentSetState(newRootState) {
     $builderContextSignal.rootState = newRootState;
 }
@@ -99,18 +100,17 @@ setContext(ComponentsContext.key, {
   {#if isSsrAbTest}
     <InlinedScript {scriptStr} />
   {/if}
-
   {#if TARGET !== "reactNative"}
     <ContentStyles
+      {isNestedRender}
       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/node/components/content/content.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         linkComponent?: ContentProps["linkComponent"];
         trustedHosts?: ContentProps["trustedHosts"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
+        isNestedRender?: ContentProps["isNestedRender"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/components/content/contentProps.types.d.ts

@@ -8,5 +8,10 @@ interface InternalRenderProps {
  * This is in a separate file so that we can override it (most notably in Vue,
  * where prop types cannot be wrapped by generics like `EnforcePartials`).
  */
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps> & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    isNestedRender?: boolean;
+};
 export {};

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

@@ -10,7 +10,7 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
 export let canTrack = undefined;
 export let content = undefined;
-export let __isNestedRender = undefined;
+export let isNestedRender = undefined;
 export let model = undefined;
 export let data = undefined;
 export let context = undefined;
@@ -59,7 +59,7 @@ onMount(() => {
 });
 </script>
 
-{#if !__isNestedRender && TARGET !== "reactNative"}
+{#if !isNestedRender && TARGET !== "reactNative"}
   <InlinedScript scriptStr={getScriptString()} />
 {/if}
 
@@ -68,11 +68,11 @@ onMount(() => {
     id={`variants-styles-${content?.id}`}
     styles={hideVariantsStyleString()}
   />
-
   <InlinedScript scriptStr={updateCookieAndStylesScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent
+      {isNestedRender}
       content={variant}
       showContent={false}
       {model}
@@ -94,8 +94,8 @@ onMount(() => {
     />
   {/each}
 {/if}
-
 <ContentComponent
+  {isNestedRender}
   {...{}}
   content={defaultContent()}
   showContent={true}

package/lib/node/components/content-variants/content-variants.svelte.d.ts

@@ -3,14 +3,14 @@ type VariantsProviderProps = ContentVariantsPrps & {
     /**
      * For internal use only. Do not provide this prop.
      */
-    __isNestedRender?: boolean;
+    isNestedRender?: boolean;
 };
 import type { ContentVariantsPrps } from "./content-variants.types.js";
 declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content?: VariantsProviderProps["content"];
-        __isNestedRender?: VariantsProviderProps["__isNestedRender"];
+        isNestedRender?: VariantsProviderProps["isNestedRender"];
         model?: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];

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

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