@builder.io/sdk-svelte 2.0.9 → 2.0.14

package/README.md

@@ -13,7 +13,7 @@ To check the status of the SDK, look at [these tables](../../README.md#feature-i
 ## Getting Started
 
 ```
-npm install @builder.io/sdk-svelte@dev
+npm install @builder.io/sdk-svelte
 ```
 
 Take a look at [our example repo](/examples/svelte/sveltekit) for how to use this SDK.

package/lib/browser/blocks/slot/component-info.js

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

package/lib/browser/blocks/slot/slot.svelte

@@ -4,6 +4,7 @@
 import "../../functions/deopt";
 export let builderContext;
 export let name;
+export let builderComponents;
 function stringifyStyles(stylesObj) {
     let styles = "";
     for (let key in stylesObj) {
@@ -28,6 +29,7 @@ function stringifyStyles(stylesObj) {
     parent={$builderContext.context?.symbolId}
     path={`symbol.data.${name}`}
     context={builderContext}
+    registeredComponents={builderComponents}
     blocks={$builderContext.rootState?.[name]}
   />
 </div>

package/lib/browser/blocks/slot/slot.svelte.d.ts

@@ -1,13 +1,14 @@
 import { SvelteComponent } from "svelte";
-export type DropzoneProps = BuilderDataProps & {
+export type DropzoneProps = BuilderDataProps & BuilderComponentsProp & {
     name: string;
     attributes: any;
 };
-import type { BuilderDataProps } from "../../types/builder-props";
+import type { BuilderComponentsProp, BuilderDataProps } from "../../types/builder-props";
 declare const __propDef: {
     props: {
         builderContext: DropzoneProps["builderContext"];
         name: DropzoneProps["name"];
+        builderComponents: DropzoneProps["builderComponents"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,9 +3,8 @@ import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
-export declare const getComponent: ({ block, context, registeredComponents }: {
+export declare const getComponent: ({ block, registeredComponents }: {
     block: BuilderBlock;
-    context: BuilderContextInterface;
     registeredComponents: RegisteredComponents;
 }) => RegisteredComponent | null | undefined;
 export declare const getRepeatItemData: ({ block, context }: {

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

@@ -1,16 +1,8 @@
 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';
-export const getComponent = ({ block, context, registeredComponents }) => {
-    const componentName = getProcessedBlock({
-        block,
-        localState: context.localState,
-        rootState: context.rootState,
-        rootSetState: context.rootSetState,
-        context: context.context,
-        shouldEvaluateBindings: false
-    }).component?.name;
+export const getComponent = ({ block, registeredComponents }) => {
+    const componentName = block.component?.name;
     if (!componentName) {
         return null;
     }

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

@@ -1,9 +1,10 @@
 <script context="module"></script>
 
-<script>import { onMount } from "svelte";
+<script>import { afterUpdate, onMount } from "svelte";
 import { TARGET } from "../../constants/target";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options";
 import { getProcessedBlock } from "../../functions/get-processed-block";
+import "../../server-index";
 import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
 import { getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
@@ -15,13 +16,6 @@ export let block;
 export let context;
 export let registeredComponents;
 export let linkComponent;
-$: blockComponent = () => {
-    return getComponent({
-        block: block,
-        context: $context,
-        registeredComponents: registeredComponents,
-    });
-};
 $: repeatItem = () => {
     return getRepeatItemData({
         block: block,
@@ -29,7 +23,7 @@ $: repeatItem = () => {
     });
 };
 $: processedBlock = () => {
-    return block.repeat?.collection
+    const blockToUse = block.repeat?.collection
         ? block
         : getProcessedBlock({
             block: block,
@@ -39,6 +33,13 @@ $: processedBlock = () => {
             context: $context.context,
             shouldEvaluateBindings: true,
         });
+    return blockToUse;
+};
+$: blockComponent = () => {
+    return getComponent({
+        block: processedBlock(),
+        registeredComponents: registeredComponents,
+    });
 };
 $: Tag = () => {
     const shouldUseLink = block.tagName === "a" ||
@@ -90,6 +91,10 @@ $: componentRefProps = () => {
         isInteractive: !(blockComponent?.()?.isRSC && TARGET === "rsc"),
     };
 };
+let _processedBlock = {
+    value: null,
+    update: false,
+};
 onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
@@ -100,10 +105,11 @@ onMount(() => {
         })));
     }
 });
+afterUpdate(() => { });
 </script>
 
 {#if canShowBlock()}
-  <BlockStyles {block} context={$context} />
+  <BlockStyles block={processedBlock()} context={$context} />
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}
@@ -138,7 +144,7 @@ onMount(() => {
         />
       {/each}
     {/if}
-  {:else}
+  {:else if !repeatItem()}
     <ComponentRef
       componentRef={componentRefProps().componentRef}
       componentOptions={componentRefProps().componentOptions}
@@ -150,5 +156,14 @@ onMount(() => {
       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/lib/browser/components/block/components/block-styles.svelte

@@ -3,21 +3,13 @@
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes";
 import { TARGET } from "../../../constants/target";
 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 InlinedStyles from "../../inlined-styles.svelte";
 export let block;
 export let 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;
@@ -28,14 +20,7 @@ $: canShowBlock = () => {
     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(content?.meta?.breakpoints || {});

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

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
-<script>import { isEditing } from "../../functions/is-editing";
+<script>import { onMount } from "svelte";
+import { isEditing } from "../../functions/is-editing";
 export let blocks;
 export let parent;
 export let path;
@@ -42,11 +43,14 @@ function onMouseEnter() {
 $: 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/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.9";
+export declare const SDK_VERSION = "2.0.14";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.9";
+export const SDK_VERSION = "2.0.14";

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

@@ -1,6 +1,19 @@
 import { logger } from '../../helpers/logger';
 import { chooseBrowserOrServerEval } from './choose-eval';
 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;
 class EvalCache {
     static cacheLimit = 20;
     static cache = new Map();
@@ -40,7 +53,7 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
         rootState,
         localState
     };
-    if (enableCache) {
+    if (enableCache && !DISABLE_CACHE) {
         const cacheKey = EvalCache.getCacheKey(args);
         const cachedValue = EvalCache.getCachedValue(cacheKey);
         if (cachedValue) {

package/lib/browser/functions/evaluate/node-runtime/init.d.ts

@@ -7,6 +7,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 declare const initializeNodeRuntime: (args?: {
     ivmIsolateOptions?: IsolateOptions;

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

@@ -20,6 +20,7 @@ import { setIvm } from './node-runtime';
  * 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) => {
     const { ivmIsolateOptions } = args || {};

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

@@ -67,7 +67,7 @@ export const setIvm = (ivm, options = {}) => {
     setIsolateContext(options);
 };
 // 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 = () => {
     try {
         if (IVM_INSTANCE)
@@ -83,7 +83,7 @@ const getIvm = () => {
     
     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/lib/browser/functions/get-processed-block.d.ts

@@ -1,5 +1,6 @@
 import type { BuilderContextInterface } from '../context/types';
 import type { BuilderBlock } from '../types/builder-block';
+export declare function deepCloneWithConditions<T = any>(obj: T): T;
 export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }: {
     block: BuilderBlock;
     /**

package/lib/browser/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/edge/blocks/slot/component-info.js

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

package/lib/edge/blocks/slot/slot.svelte

@@ -4,6 +4,7 @@
 import "../../functions/deopt";
 export let builderContext;
 export let name;
+export let builderComponents;
 function stringifyStyles(stylesObj) {
     let styles = "";
     for (let key in stylesObj) {
@@ -28,6 +29,7 @@ function stringifyStyles(stylesObj) {
     parent={$builderContext.context?.symbolId}
     path={`symbol.data.${name}`}
     context={builderContext}
+    registeredComponents={builderComponents}
     blocks={$builderContext.rootState?.[name]}
   />
 </div>

package/lib/edge/blocks/slot/slot.svelte.d.ts

@@ -1,13 +1,14 @@
 import { SvelteComponent } from "svelte";
-export type DropzoneProps = BuilderDataProps & {
+export type DropzoneProps = BuilderDataProps & BuilderComponentsProp & {
     name: string;
     attributes: any;
 };
-import type { BuilderDataProps } from "../../types/builder-props";
+import type { BuilderComponentsProp, BuilderDataProps } from "../../types/builder-props";
 declare const __propDef: {
     props: {
         builderContext: DropzoneProps["builderContext"];
         name: DropzoneProps["name"];
+        builderComponents: DropzoneProps["builderComponents"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,9 +3,8 @@ import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
-export declare const getComponent: ({ block, context, registeredComponents }: {
+export declare const getComponent: ({ block, registeredComponents }: {
     block: BuilderBlock;
-    context: BuilderContextInterface;
     registeredComponents: RegisteredComponents;
 }) => RegisteredComponent | null | undefined;
 export declare const getRepeatItemData: ({ block, context }: {

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

@@ -1,16 +1,8 @@
 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';
-export const getComponent = ({ block, context, registeredComponents }) => {
-    const componentName = getProcessedBlock({
-        block,
-        localState: context.localState,
-        rootState: context.rootState,
-        rootSetState: context.rootSetState,
-        context: context.context,
-        shouldEvaluateBindings: false
-    }).component?.name;
+export const getComponent = ({ block, registeredComponents }) => {
+    const componentName = block.component?.name;
     if (!componentName) {
         return null;
     }

package/lib/edge/components/block/block.svelte

@@ -1,9 +1,10 @@
 <script context="module"></script>
 
-<script>import { onMount } from "svelte";
+<script>import { afterUpdate, onMount } from "svelte";
 import { TARGET } from "../../constants/target";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options";
 import { getProcessedBlock } from "../../functions/get-processed-block";
+import "../../server-index";
 import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
 import { getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
@@ -15,13 +16,6 @@ export let block;
 export let context;
 export let registeredComponents;
 export let linkComponent;
-$: blockComponent = () => {
-    return getComponent({
-        block: block,
-        context: $context,
-        registeredComponents: registeredComponents,
-    });
-};
 $: repeatItem = () => {
     return getRepeatItemData({
         block: block,
@@ -29,7 +23,7 @@ $: repeatItem = () => {
     });
 };
 $: processedBlock = () => {
-    return block.repeat?.collection
+    const blockToUse = block.repeat?.collection
         ? block
         : getProcessedBlock({
             block: block,
@@ -39,6 +33,13 @@ $: processedBlock = () => {
             context: $context.context,
             shouldEvaluateBindings: true,
         });
+    return blockToUse;
+};
+$: blockComponent = () => {
+    return getComponent({
+        block: processedBlock(),
+        registeredComponents: registeredComponents,
+    });
 };
 $: Tag = () => {
     const shouldUseLink = block.tagName === "a" ||
@@ -90,6 +91,10 @@ $: componentRefProps = () => {
         isInteractive: !(blockComponent?.()?.isRSC && TARGET === "rsc"),
     };
 };
+let _processedBlock = {
+    value: null,
+    update: false,
+};
 onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
@@ -100,10 +105,11 @@ onMount(() => {
         })));
     }
 });
+afterUpdate(() => { });
 </script>
 
 {#if canShowBlock()}
-  <BlockStyles {block} context={$context} />
+  <BlockStyles block={processedBlock()} context={$context} />
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}
@@ -138,7 +144,7 @@ onMount(() => {
         />
       {/each}
     {/if}
-  {:else}
+  {:else if !repeatItem()}
     <ComponentRef
       componentRef={componentRefProps().componentRef}
       componentOptions={componentRefProps().componentOptions}
@@ -150,5 +156,14 @@ onMount(() => {
       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/lib/edge/components/block/components/block-styles.svelte

@@ -3,21 +3,13 @@
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes";
 import { TARGET } from "../../../constants/target";
 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 InlinedStyles from "../../inlined-styles.svelte";
 export let block;
 export let 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;
@@ -28,14 +20,7 @@ $: canShowBlock = () => {
     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(content?.meta?.breakpoints || {});

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

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
-<script>import { isEditing } from "../../functions/is-editing";
+<script>import { onMount } from "svelte";
+import { isEditing } from "../../functions/is-editing";
 export let blocks;
 export let parent;
 export let path;
@@ -42,11 +43,14 @@ function onMouseEnter() {
 $: 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/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.9";
+export declare const SDK_VERSION = "2.0.14";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.9";
+export const SDK_VERSION = "2.0.14";