@builder.io/sdk-svelte 2.0.8 → 2.0.13

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

@@ -1,21 +1,63 @@
+import { TARGET } from '../constants/target';
+import { omit } from '../helpers/omit';
 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(obj) {
+    if (obj === null || typeof obj !== 'object') {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return obj.map((item) => deepCloneWithConditions(item));
+    }
+    if (obj['@type'] === '@builder.io/sdk:Element') {
+        return obj;
+    }
+    const clonedObj = {};
+    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) => {
+    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'));
+        return {
+            ...copy,
+            properties: {
+                ...copy.properties
+            },
+            actions: {
+                ...copy.actions
+            },
+            children: block.children,
+            meta: block.meta
+        };
+    }
+};
 const evaluateBindings = ({ block, context, localState, rootState, rootSetState }) => {
     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({

package/lib/node/functions/register-component.d.ts

@@ -3,4 +3,4 @@ export declare const createRegisterComponentMessage: (info: ComponentInfo) => {
     type: string;
     data: any;
 };
-export declare function serializeComponentInfo(info: ComponentInfo): any;
+export declare function serializeIncludingFunctions(info: ComponentInfo): any;

package/lib/node/functions/register-component.js

@@ -1,6 +1,6 @@
 export const createRegisterComponentMessage = (info) => ({
     type: 'builder.registerComponent',
-    data: serializeComponentInfo(info)
+    data: serializeIncludingFunctions(info)
 });
 // eslint-disable-next-line @typescript-eslint/ban-types
 const serializeFn = (fnValue) => {
@@ -12,7 +12,7 @@ const serializeFn = (fnValue) => {
     const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
     return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
-export function serializeComponentInfo(info) {
+export function serializeIncludingFunctions(info) {
     return JSON.parse(JSON.stringify(info, (key, value) => {
         if (typeof value === 'function') {
             return serializeFn(value);

package/lib/node/functions/register.js

@@ -1,6 +1,10 @@
 import { isBrowser } from './is-browser';
+import { serializeIncludingFunctions } from './register-component';
 const registry = {};
 export function register(type, info) {
+    if (type === 'plugin') {
+        info = serializeIncludingFunctions(info);
+    }
     let typeList = registry[type];
     if (!typeList) {
         typeList = registry[type] = [];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "2.0.8",
+  "version": "2.0.13",
   "type": "module",
   "files": [
     "lib",
@@ -54,8 +54,8 @@
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.22.4",
     "@sveltejs/package": "^2.2.0",
-    "nx": "16.10.0",
-    "nx-cloud": "16.5.2",
+    "nx": "^19.6.5",
+    "nx-cloud": "^19.0.0",
     "svelte": "^4.1.2",
     "svelte-check": "^3.4.6",
     "svelte-preprocess": "^5.0.4",

package/src/blocks/slot/component-info.ts

@@ -13,6 +13,7 @@ export const componentInfo: ComponentInfo = {
     defaultValue: 'children'
   }],
   shouldReceiveBuilderProps: {
-    builderContext: true
+    builderContext: true,
+    builderComponents: true
   }
 }

package/src/blocks/slot/slot.svelte

@@ -1,18 +1,23 @@
 <script context="module" lang="ts">
-  export type DropzoneProps = BuilderDataProps & {
-    name: string;
-    attributes: any;
-  };
+  export type DropzoneProps = BuilderDataProps &
+    BuilderComponentsProp & {
+      name: string;
+      attributes: any;
+    };
 </script>
 
 <script lang="ts">
   import Blocks from "../../components/blocks/blocks.svelte";
   import { deoptSignal } from "../../functions/deopt";
   import type { BuilderBlock } from "../../types/builder-block";
-  import type { BuilderDataProps } from "../../types/builder-props";
+  import type {
+    BuilderComponentsProp,
+    BuilderDataProps,
+  } from "../../types/builder-props";
 
   export let builderContext: DropzoneProps["builderContext"];
   export let name: DropzoneProps["name"];
+  export let builderComponents: DropzoneProps["builderComponents"];
   function stringifyStyles(stylesObj) {
     let styles = "";
     for (let key in stylesObj) {
@@ -37,6 +42,7 @@
     parent={$builderContext.context?.symbolId}
     path={`symbol.data.${name}`}
     context={builderContext}
+    registeredComponents={builderComponents}
     blocks={$builderContext.rootState?.[name]}
   />
 </div>

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

@@ -2,27 +2,17 @@ import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
-import { getProcessedBlock } from '../../functions/get-processed-block';
 import { getStyle } from '../../functions/get-style';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
 export const getComponent = ({
   block,
-  context,
   registeredComponents
 }: {
   block: BuilderBlock;
-  context: BuilderContextInterface;
   registeredComponents: RegisteredComponents;
 }) => {
-  const componentName = getProcessedBlock({
-    block,
-    localState: context.localState,
-    rootState: context.rootState,
-    rootSetState: context.rootSetState,
-    context: context.context,
-    shouldEvaluateBindings: false
-  }).component?.name;
+  const componentName = block.component?.name;
   if (!componentName) {
     return null;
   }

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/components/content/content.svelte

@@ -10,7 +10,7 @@
     BuilderRenderState,
     RegisteredComponents,
   } from "../../context/types";
-  import { serializeComponentInfo } from "../../functions/register-component";
+  import { serializeIncludingFunctions } from "../../functions/register-component";
   import type { ComponentInfo } from "../../types/components";
   import type { Dictionary } from "../../types/typescript";
   import Blocks from "../blocks/blocks.svelte";
@@ -70,7 +70,7 @@
       ...acc,
       [info.name]: {
         component: component,
-        ...serializeComponentInfo(info),
+        ...serializeIncludingFunctions(info),
       },
     }),
     {}
@@ -101,7 +101,7 @@
     ].reduce<Dictionary<ComponentInfo>>(
       (acc, { component: _, ...info }) => ({
         ...acc,
-        [info.name]: serializeComponentInfo(info),
+        [info.name]: serializeIncludingFunctions(info),
       }),
       {}
     ),

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.8"
+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({

package/src/functions/register-component.ts

@@ -1,7 +1,7 @@
 import type { ComponentInfo } from '../types/components';
 export const createRegisterComponentMessage = (info: ComponentInfo) => ({
   type: 'builder.registerComponent',
-  data: serializeComponentInfo(info)
+  data: serializeIncludingFunctions(info)
 });
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -15,7 +15,7 @@ const serializeFn = (fnValue: Function) => {
   const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
   return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
-export function serializeComponentInfo(info: ComponentInfo) {
+export function serializeIncludingFunctions(info: ComponentInfo) {
   return JSON.parse(JSON.stringify(info, (key, value) => {
     if (typeof value === 'function') {
       return serializeFn(value);

package/src/functions/register.ts

@@ -1,6 +1,7 @@
 import type { BuilderBlock } from '../types/builder-block';
 import type { DeepPartial } from '../types/deep-partial';
 import { isBrowser } from './is-browser';
+import { serializeIncludingFunctions } from './register-component';
 export interface InsertMenuItem {
   name: string;
   icon?: string;
@@ -19,6 +20,9 @@ const registry: {
 export function register(type: 'insertMenu', info: InsertMenuConfig): void;
 export function register(type: string, info: any): void;
 export function register(type: string, info: any) {
+  if (type === 'plugin') {
+    info = serializeIncludingFunctions(info);
+  }
   let typeList = registry[type];
   if (!typeList) {
     typeList = registry[type] = [];