@builder.io/sdk-svelte 1.0.11 → 1.0.13

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

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

package/lib/node/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/node/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/node/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/node/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/node/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/node/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/package.json

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

package/src/blocks/BaseText.svelte

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

package/src/blocks/button/button.svelte

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

package/src/blocks/columns/columns.svelte

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

package/src/blocks/form/form/form.svelte

@@ -317,7 +317,6 @@
       />
     {/each}
   {/if}
-
   {#if submissionState() === "error"}
     <Blocks
       path="errorMessage"
@@ -325,7 +324,6 @@
       context={builderContext}
     />
   {/if}
-
   {#if submissionState() === "sending"}
     <Blocks
       path="sendingMessage"
@@ -333,13 +331,13 @@
       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/src/blocks/form/submit-button/submit-button.svelte

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

package/src/blocks/image/image.svelte

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

package/src/blocks/symbol/symbol.svelte

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

package/src/blocks/video/video.svelte

@@ -93,9 +93,8 @@
   >
     {#if !lazyLoad}
       <source type="video/mp4" src={video} />
-    {/if}
-  </video>
-
+    {/if}</video
+  >
   {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
     <div
       use:mitosis_styling={{
@@ -106,7 +105,6 @@
       }}
     />
   {/if}
-
   {#if builderBlock?.children?.length && fitContent}
     <div
       use:mitosis_styling={{
@@ -118,7 +116,6 @@
       <slot />
     </div>
   {/if}
-
   {#if builderBlock?.children?.length && !fitContent}
     <div
       use:mitosis_styling={{

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

@@ -1,6 +1,8 @@
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
 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';
 import type { BuilderBlock } from '../../types/builder-block.js';
 import type { RepeatData } from './types.js';
 export const getComponent = ({
@@ -57,7 +59,8 @@ export const getRepeatItemData = ({
     localState: context.localState,
     rootState: context.rootState,
     rootSetState: context.rootSetState,
-    context: context.context
+    context: context.context,
+    enableCache: true
   });
   if (!Array.isArray(itemsArray)) {
     return undefined;
@@ -78,4 +81,20 @@ export const getRepeatItemData = ({
     block: blockWithoutRepeat
   }));
   return repeatArray;
+};
+export const getInheritedStyles = ({
+  block,
+  context
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}) => {
+  const style = getStyle({
+    block,
+    context
+  });
+  if (!style) {
+    return {};
+  }
+  return extractTextStyles(style);
 }

package/src/components/block/block.svelte

@@ -9,19 +9,20 @@
 
 <script lang="ts">
   import { onMount } from "svelte";
-  import { writable } from "svelte/store";
 
   import type {
     BuilderContextInterface,
     RegisteredComponents,
   } from "../../context/types.js";
-  import { extractTextStyles } from "../../functions/extract-text-styles.js";
   import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
-  import { getStyle } from "../../functions/get-style.js";
   import type { BuilderBlock } from "../../types/builder-block.js";
   import { bindAnimations } from "./animator.js";
-  import { getComponent, getRepeatItemData } from "./block.helpers.js";
+  import {
+    getComponent,
+    getInheritedStyles,
+    getRepeatItemData,
+  } from "./block.helpers.js";
   import BlockStyles from "./components/block-styles.svelte";
   import BlockWrapper from "./components/block-wrapper.svelte";
   import type { ComponentProps } from "./components/component-ref/component-ref.helpers.js";
@@ -116,7 +117,7 @@
             }
           : {}),
       },
-      context: childrenContext,
+      context: context,
       linkComponent: linkComponent,
       registeredComponents: registeredComponents,
       builderBlock: processedBlock(),
@@ -125,8 +126,6 @@
     };
   };
 
-  let childrenContext = writable($context);
-
   onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
@@ -153,8 +152,7 @@
         block={processedBlock()}
         {context}
         {linkComponent}
-      >
-        <ComponentRef
+        ><ComponentRef
           componentRef={componentRefProps().componentRef}
           componentOptions={componentRefProps().componentOptions}
           blockChildren={componentRefProps().blockChildren}
@@ -165,13 +163,12 @@
           includeBlockProps={componentRefProps().includeBlockProps}
           isInteractive={componentRefProps().isInteractive}
         />
-
         {#each childrenWithoutParentComponent() as child (child.id)}
           <svelte:self
             block={child}
-            context={childrenContext}
             {registeredComponents}
             {linkComponent}
+            {context}
           />
         {/each}
       </BlockWrapper>

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

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

package/src/components/block/components/interactive-element.svelte

@@ -41,7 +41,5 @@
           context: $context.context,
         }),
       }
-    : {}}
->
-  <slot />
-</svelte:component>
+    : {}}><slot /></svelte:component
+>

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

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

package/src/components/blocks/blocks.svelte

@@ -39,5 +39,5 @@
           componentsContext.registeredComponents}
       />
     {/each}
-  {/if}
-</BlocksWrapper>
+  {/if}</BlocksWrapper
+>

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

@@ -6,6 +6,7 @@
     | "isSsrAbTest"
     | "blocksWrapper"
     | "blocksWrapperProps"
+    | "isNestedRender"
   > & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
@@ -130,6 +131,10 @@
         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,
       });
     }
   }
@@ -153,13 +158,16 @@
   }
   function evalExpression(expression: string) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
-      evaluate({
-        code: group,
-        context: context || {},
-        localState: undefined,
-        rootState: $builderContextSignal.rootState,
-        rootSetState: $builderContextSignal.rootSetState,
-      })
+      String(
+        evaluate({
+          code: group,
+          context: context || {},
+          localState: undefined,
+          rootState: $builderContextSignal.rootState,
+          rootSetState: $builderContextSignal.rootSetState,
+          enableCache: true,
+        })
+      )
     );
   }
   function handleRequest({ url, key }: { key: string; url: string }) {
@@ -333,15 +341,18 @@
   }
 
   $: onUpdateFn_0(...[content]);
+
   function onUpdateFn_1(..._args: any[]) {}
 
   $: onUpdateFn_1(...[shouldSendResetCookie]);
+
   function onUpdateFn_2(..._args: any[]) {
     evaluateJsCode();
   }
   $: onUpdateFn_2_builderContextSignal_content__data__jsCode =
     $builderContextSignal.content?.data?.jsCode;
   $: onUpdateFn_2(...[onUpdateFn_2_builderContextSignal_content__data__jsCode]);
+
   function onUpdateFn_3(..._args: any[]) {
     runHttpRequests();
   }
@@ -350,12 +361,14 @@
   $: onUpdateFn_3(
     ...[onUpdateFn_3_builderContextSignal_content__data__httpRequests]
   );
+
   function onUpdateFn_4(..._args: any[]) {
     emitStateUpdate();
   }
   $: onUpdateFn_4_builderContextSignal_rootState =
     $builderContextSignal.rootState;
   $: onUpdateFn_4(...[onUpdateFn_4_builderContextSignal_rootState]);
+
   function onUpdateFn_5(..._args: any[]) {
     if (data) {
       mergeNewRootState(data);
@@ -363,6 +376,7 @@
   }
 
   $: onUpdateFn_5(...[data]);
+
   function onUpdateFn_6(..._args: any[]) {
     if (locale) {
       mergeNewRootState({
@@ -411,8 +425,6 @@
     }}
     on:initpreviewingbldr={(event) => {
       elementRef_onInitpreviewingbldr(event);
-    }}
+    }}><slot /></svelte:element
   >
-    <slot />
-  </svelte:element>
 {/if}

package/src/components/content/components/styles.helpers.ts

@@ -74,4 +74,25 @@ export const getCss = ({
   // E.g. `& .foobar { ... }` to scope CSS
   // 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: boolean | undefined) => {
+  return !isNested ? DEFAULT_STYLES : '';
 }

package/src/components/content/components/styles.svelte

@@ -3,17 +3,19 @@
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
+    isNestedRender?: boolean;
   }
 </script>
 
 <script lang="ts">
   import InlinedStyles from "../../inlined-styles.svelte";
   import type { CustomFont } from "./styles.helpers.js";
-  import { getCss, getFontCss } from "./styles.helpers.js";
+  import { getCss, getDefaultStyles, getFontCss } from "./styles.helpers.js";
 
   export let cssCode: Props["cssCode"] = undefined;
   export let contentId: Props["contentId"] = undefined;
   export let customFonts: Props["customFonts"] = undefined;
+  export let isNestedRender: Props["isNestedRender"] = undefined;
 
   let injectedStyles = `
 ${getCss({
@@ -23,23 +25,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/src/components/content/content.svelte

@@ -44,6 +44,7 @@
   export let linkComponent: ContentProps["linkComponent"] = undefined;
   export let trustedHosts: ContentProps["trustedHosts"] = undefined;
   export let isSsrAbTest: ContentProps["isSsrAbTest"];
+  export let isNestedRender: ContentProps["isNestedRender"] = undefined;
 
   function contentSetState(newRootState: BuilderRenderState) {
     $builderContextSignal.rootState = newRootState;
@@ -123,18 +124,17 @@
   {#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/src/components/content/contentProps.types.ts

@@ -9,4 +9,9 @@ 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;
+}