@builder.io/sdk-svelte 2.0.9 → 2.0.13

package/src/components/block/block.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { afterUpdate, onMount } from "svelte";
 
   import { TARGET } from "../../constants/target";
   import type {
@@ -17,6 +17,7 @@
   } from "../../context/types";
   import { getBlockComponentOptions } from "../../functions/get-block-component-options";
   import { getProcessedBlock } from "../../functions/get-processed-block";
+  import { isPreviewing } from "../../server-index";
   import type { BuilderBlock } from "../../types/builder-block";
   import DynamicDiv from "../dynamic-div.svelte";
   import { bindAnimations } from "./animator";
@@ -41,13 +42,6 @@
   export let registeredComponents: BlockProps["registeredComponents"];
   export let linkComponent: BlockProps["linkComponent"];
 
-  $: blockComponent = () => {
-    return getComponent({
-      block: block,
-      context: $context,
-      registeredComponents: registeredComponents,
-    });
-  };
   $: repeatItem = () => {
     return getRepeatItemData({
       block: block,
@@ -55,7 +49,7 @@
     });
   };
   $: processedBlock = () => {
-    return block.repeat?.collection
+    const blockToUse = block.repeat?.collection
       ? block
       : getProcessedBlock({
           block: block,
@@ -65,6 +59,13 @@
           context: $context.context,
           shouldEvaluateBindings: true,
         });
+    return blockToUse;
+  };
+  $: blockComponent = () => {
+    return getComponent({
+      block: processedBlock(),
+      registeredComponents: registeredComponents,
+    });
   };
   $: Tag = () => {
     const shouldUseLink =
@@ -120,6 +121,11 @@
     };
   };
 
+  let _processedBlock = {
+    value: null as BuilderBlock | null,
+    update: false,
+  };
+
   onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
@@ -132,10 +138,12 @@
       );
     }
   });
+
+  afterUpdate(() => {});
 </script>
 
 {#if canShowBlock()}
-  <BlockStyles {block} context={$context} />
+  <BlockStyles block={processedBlock()} context={$context} />
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}
@@ -170,7 +178,7 @@
         />
       {/each}
     {/if}
-  {:else}
+  {:else if !repeatItem()}
     <ComponentRef
       componentRef={componentRefProps().componentRef}
       componentOptions={componentRefProps().componentOptions}
@@ -182,5 +190,14 @@
       includeBlockProps={componentRefProps().includeBlockProps}
       isInteractive={componentRefProps().isInteractive}
     />
+  {:else}
+    {#each repeatItem() as data, index (index)}
+      <RepeatedBlock
+        repeatContext={data.context}
+        block={data.block}
+        {registeredComponents}
+        {linkComponent}
+      />
+    {/each}
   {/if}
 {/if}

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

@@ -13,7 +13,6 @@
   import { TARGET } from "../../../constants/target";
   import type { BuilderContextInterface } from "../../../context/types";
   import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
-  import { getProcessedBlock } from "../../../functions/get-processed-block";
   import { createCssClass } from "../../../helpers/css";
   import { checkIsDefined } from "../../../helpers/nullable";
   import type { BuilderBlock } from "../../../types/builder-block";
@@ -23,14 +22,7 @@
   export let context: BlockStylesProps["context"];
 
   $: canShowBlock = () => {
-    const processedBlock = getProcessedBlock({
-      block: block,
-      localState: context.localState,
-      rootState: context.rootState,
-      rootSetState: context.rootSetState,
-      context: context.context,
-      shouldEvaluateBindings: true,
-    });
+    const processedBlock = block;
     // only render styles for blocks that are visible
     if (checkIsDefined(processedBlock.hide)) {
       return !processedBlock.hide;
@@ -41,14 +33,7 @@
     return true;
   };
   $: css = () => {
-    const processedBlock = getProcessedBlock({
-      block: block,
-      localState: context.localState,
-      rootState: context.rootState,
-      rootSetState: context.rootSetState,
-      context: context.context,
-      shouldEvaluateBindings: true,
-    });
+    const processedBlock = block;
     const styles = processedBlock.responsiveStyles;
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(

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

@@ -17,6 +17,8 @@
 </script>
 
 <script lang="ts">
+  import { onMount } from "svelte";
+
   import { isEditing } from "../../functions/is-editing";
   import type { BuilderBlock } from "../../types/builder-block";
 
@@ -69,11 +71,16 @@
   $: className = () => {
     return "builder-blocks" + (!blocks?.length ? " no-blocks" : "");
   };
+
+  let blocksWrapperRef;
+
+  onMount(() => {});
 </script>
 
 <svelte:element
   this={BlocksWrapper}
   style={stringifyStyles(styleProp)}
+  bind:this={blocksWrapperRef}
   class={className() + " svelte-element"}
   builder-path={path}
   builder-parent-id={parent}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.9"
+export const SDK_VERSION = "2.0.13"

package/src/functions/evaluate/evaluate.ts

@@ -2,6 +2,20 @@ import { logger } from '../../helpers/logger';
 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;
@@ -53,7 +67,7 @@ export function evaluate({
     rootState,
     localState
   };
-  if (enableCache) {
+  if (enableCache && !DISABLE_CACHE) {
     const cacheKey = EvalCache.getCacheKey(args);
     const cachedValue = EvalCache.getCachedValue(cacheKey);
     if (cachedValue) {

package/src/functions/evaluate/node-runtime/init.ts

@@ -22,6 +22,7 @@ import type { IsolateOptions } from 'isolated-vm';
  * from a server-only location, such as:
  * - The NextJS Pages router's `_document.tsx`
  * - Your Remix route's `loader`
+ * - Qwik's `entry.ssr.tsx` file
  */
 export const initializeNodeRuntime = (args?: {
   ivmIsolateOptions?: IsolateOptions;

package/src/functions/evaluate/node-runtime/node-runtime.ts

@@ -80,7 +80,7 @@ export const setIvm = (ivm: IsolatedVMImport, options: IsolateOptions = {}) => {
 };
 
 // only mention the script for SDKs that have it.
-const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react';
+const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik';
 const getIvm = (): IsolatedVMImport => {
   try {
     if (IVM_INSTANCE) return IVM_INSTANCE;
@@ -93,7 +93,7 @@ const getIvm = (): IsolatedVMImport => {
     
     SOLUTION: In a server-only execution path within your application, do one of the following:
   
-    ${SHOULD_MENTION_INITIALIZE_SCRIPT ? '- import and call `initializeNodeRuntime()` from "${SDK_NAME}/node/init".' : ''}
+    ${SHOULD_MENTION_INITIALIZE_SCRIPT ? `- import and call \`initializeNodeRuntime()\` from "${SDK_NAME}/node/init".` : ''}
     - add the following import: \`await import('isolated-vm')\`.
 
     For more information, visit https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments`;

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

@@ -1,9 +1,60 @@
+import { TARGET } from '../constants/target';
 import type { BuilderContextInterface } from '../context/types';
+import { omit } from '../helpers/omit';
 import type { BuilderBlock } from '../types/builder-block';
 import { evaluate } from './evaluate/index';
 import { fastClone } from './fast-clone';
 import { set } from './set';
 import { transformBlock } from './transform-block';
+
+// Deep clone a block but without cloning any child blocks
+export function deepCloneWithConditions<T = any>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return (obj.map((item: any) => deepCloneWithConditions(item)) as T);
+  }
+  if ((obj as any)['@type'] === '@builder.io/sdk:Element') {
+    return obj;
+  }
+  const clonedObj: any = {};
+  for (const key in obj) {
+    if (key !== 'meta' && Object.prototype.hasOwnProperty.call(obj, key)) {
+      clonedObj[key] = deepCloneWithConditions(obj[key]);
+    }
+  }
+  return clonedObj;
+}
+const IS_SDK_WITHOUT_CACHED_PROCESSED_BLOCK = ['svelte', 'vue', 'angular', 'qwik', 'solid'].includes(TARGET);
+const getCopy = (block: BuilderBlock): BuilderBlock => {
+  if (IS_SDK_WITHOUT_CACHED_PROCESSED_BLOCK) {
+    const copy = fastClone(block);
+    const copied = {
+      ...copy,
+      properties: {
+        ...copy.properties
+      },
+      actions: {
+        ...copy.actions
+      }
+    };
+    return copied;
+  } else {
+    const copy = (deepCloneWithConditions(omit(block, 'children', 'meta')) as BuilderBlock);
+    return {
+      ...copy,
+      properties: {
+        ...copy.properties
+      },
+      actions: {
+        ...copy.actions
+      },
+      children: block.children,
+      meta: block.meta
+    };
+  }
+};
 const evaluateBindings = ({
   block,
   context,
@@ -16,16 +67,7 @@ const evaluateBindings = ({
   if (!block.bindings) {
     return block;
   }
-  const copy = fastClone(block);
-  const copied = {
-    ...copy,
-    properties: {
-      ...copy.properties
-    },
-    actions: {
-      ...copy.actions
-    }
-  };
+  const copied = getCopy(block);
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
     const value = evaluate({