@builder.io/sdk-svelte 2.0.26 → 2.0.29

package/lib/browser/blocks/accordion/accordion.svelte

@@ -117,13 +117,15 @@ let open = [];
     <div
       style={stringifyStyles({
         ...accordionTitleStyles(),
-        width: grid ? gridRowWidth : undefined,
-        ...{
-          order:
-            openGridItemOrder() !== null
-              ? convertOrderNumberToString(index)
-              : convertOrderNumberToString(index + 1),
-        },
+        ...(grid && {
+          width: gridRowWidth,
+          ...{
+            order:
+              openGridItemOrder() !== null
+                ? convertOrderNumberToString(index)
+                : convertOrderNumberToString(index + 1),
+          },
+        }),
       })}
       class={getAccordionTitleClassName(index)}
       data-index={index}

package/lib/browser/blocks/columns/columns.svelte

@@ -32,30 +32,30 @@ function getTagName(column) {
     return column.link ? builderLinkComponent || "a" : "div";
 }
 function getWidth(index) {
-    return cols[index]?.width || 100 / cols.length;
+    return cols()[index]?.width || 100 / cols().length;
 }
 function getColumnCssWidth(index) {
     const width = getWidth(index);
-    const subtractWidth = gutterSize * (cols.length - 1) * (width / 100);
+    const subtractWidth = gutterSize() * (cols().length - 1) * (width / 100);
     return `calc(${width}% - ${subtractWidth}px)`;
 }
 function getTabletStyle({ stackedStyle, desktopStyle, }) {
-    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+    return stackAt() === "tablet" ? stackedStyle : desktopStyle;
 }
 function getMobileStyle({ stackedStyle, desktopStyle, }) {
-    return stackAt === "never" ? desktopStyle : stackedStyle;
+    return stackAt() === "never" ? desktopStyle : stackedStyle;
 }
 function columnsCssVars() {
     return {
-        "--flex-dir": flexDir,
+        "--flex-dir": flexDir(),
         "--flex-dir-tablet": getTabletStyle({
-            stackedStyle: flexDir,
+            stackedStyle: flexDir(),
             desktopStyle: "row",
         }),
     };
 }
 function columnCssVars(index) {
-    const gutter = index === 0 ? 0 : gutterSize;
+    const gutter = index === 0 ? 0 : gutterSize();
     const width = getColumnCssWidth(index);
     const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
@@ -132,14 +132,22 @@ function getAttributes(column, index) {
         style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
     };
 }
-let gutterSize = typeof space === "number" ? space || 0 : 20;
-let cols = columns || [];
-let stackAt = stackColumnsAt || "tablet";
-let flexDir = stackColumnsAt === "never"
-    ? "row"
-    : reverseColumnsWhenStacked
-        ? "column-reverse"
-        : "column";
+$: gutterSize = () => {
+    return typeof space === "number" ? space || 0 : 20;
+};
+$: cols = () => {
+    return columns || [];
+};
+$: stackAt = () => {
+    return stackColumnsAt || "tablet";
+};
+$: flexDir = () => {
+    return stackColumnsAt === "never"
+        ? "row"
+        : reverseColumnsWhenStacked
+            ? "column-reverse"
+            : "column";
+};
 </script>
 
 <div
@@ -160,7 +168,7 @@ let flexDir = stackColumnsAt === "never"
       actionAttributes={{}}
       attributes={getAttributes(column, index)}
       ><Blocks
-        path={`component.options.columns.${index}.blocks`}
+        path={`columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{
           flexGrow: "1",

package/lib/browser/blocks/tabs/tabs.svelte

@@ -55,7 +55,7 @@ let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
         }}
         ><Blocks
           parent={builderBlock.id}
-          path={`component.options.tabs.${index}.label`}
+          path={`tabs.${index}.label`}
           blocks={tab.label}
           context={builderContext}
           registeredComponents={builderComponents}
@@ -68,7 +68,7 @@ let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
     <div>
       <Blocks
         parent={builderBlock.id}
-        path={`component.options.tabs.${activeTab}.content`}
+        path={`tabs.${activeTab}.content`}
         blocks={activeTabContent(activeTab)}
         context={builderContext}
         registeredComponents={builderComponents}

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

@@ -4,8 +4,8 @@
 import { isEditing } from "../../functions/is-editing";
 export let blocks;
 export let classNameProp = undefined;
-export let parent;
 export let path;
+export let parent;
 export let styleProp;
 export let BlocksWrapperProps;
 export let BlocksWrapper;
@@ -25,7 +25,7 @@ function onClick() {
             type: "builder.clickEmptyBlocks",
             data: {
                 parentElementId: parent,
-                dataPath: path,
+                dataPath: dataPath(),
             },
         }, "*");
     }
@@ -36,7 +36,7 @@ function onMouseEnter() {
             type: "builder.hoverEmptyBlocks",
             data: {
                 parentElementId: parent,
-                dataPath: path,
+                dataPath: dataPath(),
             },
         }, "*");
     }
@@ -46,6 +46,13 @@ $: className = () => {
         .filter(Boolean)
         .join(" ");
 };
+$: dataPath = () => {
+    if (!path) {
+        return undefined;
+    }
+    const pathPrefix = "component.options.";
+    return path.startsWith(pathPrefix) ? path : `${pathPrefix}${path || ""}`;
+};
 let blocksWrapperRef;
 onMount(() => { });
 </script>
@@ -55,7 +62,7 @@ onMount(() => { });
   style={stringifyStyles(styleProp)}
   bind:this={blocksWrapperRef}
   class={className() + " svelte-element"}
-  builder-path={path}
+  builder-path={dataPath()}
   builder-parent-id={parent}
   {...{}}
   on:click={(event) => {

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.26";
+export declare const SDK_VERSION = "2.0.29";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.26";
+export const SDK_VERSION = "2.0.29";

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

@@ -63,6 +63,8 @@ let IVM_CONTEXT = null;
  * `safeDynamicRequire` trick to import the `isolated-vm` package.
  */
 export const setIvm = (ivm, options = {}) => {
+    if (IVM_INSTANCE)
+        return;
     IVM_INSTANCE = ivm;
     setIsolateContext(options);
 };
@@ -92,6 +94,8 @@ const getIvm = () => {
 function setIsolateContext(options = {
     memoryLimit: 128
 }) {
+    if (IVM_CONTEXT)
+        return IVM_CONTEXT;
     const ivm = getIvm();
     const isolate = new ivm.Isolate(options);
     const context = isolate.createContextSync();
@@ -108,10 +112,7 @@ function setIsolateContext(options = {
     return context;
 }
 const getIsolateContext = () => {
-    if (IVM_CONTEXT)
-        return IVM_CONTEXT;
-    const context = setIsolateContext();
-    return context;
+    return setIsolateContext();
 };
 export const runInNode = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
     const ivm = getIvm();

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

@@ -0,0 +1 @@
+export { setIvm } from './node-runtime';

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

@@ -0,0 +1 @@
+export { setIvm } from './node-runtime';

package/lib/edge/blocks/accordion/accordion.svelte

@@ -117,13 +117,15 @@ let open = [];
     <div
       style={stringifyStyles({
         ...accordionTitleStyles(),
-        width: grid ? gridRowWidth : undefined,
-        ...{
-          order:
-            openGridItemOrder() !== null
-              ? convertOrderNumberToString(index)
-              : convertOrderNumberToString(index + 1),
-        },
+        ...(grid && {
+          width: gridRowWidth,
+          ...{
+            order:
+              openGridItemOrder() !== null
+                ? convertOrderNumberToString(index)
+                : convertOrderNumberToString(index + 1),
+          },
+        }),
       })}
       class={getAccordionTitleClassName(index)}
       data-index={index}

package/lib/edge/blocks/columns/columns.svelte

@@ -32,30 +32,30 @@ function getTagName(column) {
     return column.link ? builderLinkComponent || "a" : "div";
 }
 function getWidth(index) {
-    return cols[index]?.width || 100 / cols.length;
+    return cols()[index]?.width || 100 / cols().length;
 }
 function getColumnCssWidth(index) {
     const width = getWidth(index);
-    const subtractWidth = gutterSize * (cols.length - 1) * (width / 100);
+    const subtractWidth = gutterSize() * (cols().length - 1) * (width / 100);
     return `calc(${width}% - ${subtractWidth}px)`;
 }
 function getTabletStyle({ stackedStyle, desktopStyle, }) {
-    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+    return stackAt() === "tablet" ? stackedStyle : desktopStyle;
 }
 function getMobileStyle({ stackedStyle, desktopStyle, }) {
-    return stackAt === "never" ? desktopStyle : stackedStyle;
+    return stackAt() === "never" ? desktopStyle : stackedStyle;
 }
 function columnsCssVars() {
     return {
-        "--flex-dir": flexDir,
+        "--flex-dir": flexDir(),
         "--flex-dir-tablet": getTabletStyle({
-            stackedStyle: flexDir,
+            stackedStyle: flexDir(),
             desktopStyle: "row",
         }),
     };
 }
 function columnCssVars(index) {
-    const gutter = index === 0 ? 0 : gutterSize;
+    const gutter = index === 0 ? 0 : gutterSize();
     const width = getColumnCssWidth(index);
     const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
@@ -132,14 +132,22 @@ function getAttributes(column, index) {
         style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
     };
 }
-let gutterSize = typeof space === "number" ? space || 0 : 20;
-let cols = columns || [];
-let stackAt = stackColumnsAt || "tablet";
-let flexDir = stackColumnsAt === "never"
-    ? "row"
-    : reverseColumnsWhenStacked
-        ? "column-reverse"
-        : "column";
+$: gutterSize = () => {
+    return typeof space === "number" ? space || 0 : 20;
+};
+$: cols = () => {
+    return columns || [];
+};
+$: stackAt = () => {
+    return stackColumnsAt || "tablet";
+};
+$: flexDir = () => {
+    return stackColumnsAt === "never"
+        ? "row"
+        : reverseColumnsWhenStacked
+            ? "column-reverse"
+            : "column";
+};
 </script>
 
 <div
@@ -160,7 +168,7 @@ let flexDir = stackColumnsAt === "never"
       actionAttributes={{}}
       attributes={getAttributes(column, index)}
       ><Blocks
-        path={`component.options.columns.${index}.blocks`}
+        path={`columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{
           flexGrow: "1",

package/lib/edge/blocks/tabs/tabs.svelte

@@ -55,7 +55,7 @@ let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
         }}
         ><Blocks
           parent={builderBlock.id}
-          path={`component.options.tabs.${index}.label`}
+          path={`tabs.${index}.label`}
           blocks={tab.label}
           context={builderContext}
           registeredComponents={builderComponents}
@@ -68,7 +68,7 @@ let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
     <div>
       <Blocks
         parent={builderBlock.id}
-        path={`component.options.tabs.${activeTab}.content`}
+        path={`tabs.${activeTab}.content`}
         blocks={activeTabContent(activeTab)}
         context={builderContext}
         registeredComponents={builderComponents}

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

@@ -4,8 +4,8 @@
 import { isEditing } from "../../functions/is-editing";
 export let blocks;
 export let classNameProp = undefined;
-export let parent;
 export let path;
+export let parent;
 export let styleProp;
 export let BlocksWrapperProps;
 export let BlocksWrapper;
@@ -25,7 +25,7 @@ function onClick() {
             type: "builder.clickEmptyBlocks",
             data: {
                 parentElementId: parent,
-                dataPath: path,
+                dataPath: dataPath(),
             },
         }, "*");
     }
@@ -36,7 +36,7 @@ function onMouseEnter() {
             type: "builder.hoverEmptyBlocks",
             data: {
                 parentElementId: parent,
-                dataPath: path,
+                dataPath: dataPath(),
             },
         }, "*");
     }
@@ -46,6 +46,13 @@ $: className = () => {
         .filter(Boolean)
         .join(" ");
 };
+$: dataPath = () => {
+    if (!path) {
+        return undefined;
+    }
+    const pathPrefix = "component.options.";
+    return path.startsWith(pathPrefix) ? path : `${pathPrefix}${path || ""}`;
+};
 let blocksWrapperRef;
 onMount(() => { });
 </script>
@@ -55,7 +62,7 @@ onMount(() => { });
   style={stringifyStyles(styleProp)}
   bind:this={blocksWrapperRef}
   class={className() + " svelte-element"}
-  builder-path={path}
+  builder-path={dataPath()}
   builder-parent-id={parent}
   {...{}}
   on:click={(event) => {

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.26";
+export declare const SDK_VERSION = "2.0.29";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.26";
+export const SDK_VERSION = "2.0.29";

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

@@ -63,6 +63,8 @@ let IVM_CONTEXT = null;
  * `safeDynamicRequire` trick to import the `isolated-vm` package.
  */
 export const setIvm = (ivm, options = {}) => {
+    if (IVM_INSTANCE)
+        return;
     IVM_INSTANCE = ivm;
     setIsolateContext(options);
 };
@@ -92,6 +94,8 @@ const getIvm = () => {
 function setIsolateContext(options = {
     memoryLimit: 128
 }) {
+    if (IVM_CONTEXT)
+        return IVM_CONTEXT;
     const ivm = getIvm();
     const isolate = new ivm.Isolate(options);
     const context = isolate.createContextSync();
@@ -108,10 +112,7 @@ function setIsolateContext(options = {
     return context;
 }
 const getIsolateContext = () => {
-    if (IVM_CONTEXT)
-        return IVM_CONTEXT;
-    const context = setIsolateContext();
-    return context;
+    return setIsolateContext();
 };
 export const runInNode = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
     const ivm = getIvm();

package/lib/edge/functions/evaluate/node-runtime/setIvm.d.ts

@@ -0,0 +1 @@
+export { setIvm } from './node-runtime';

package/lib/edge/functions/evaluate/node-runtime/setIvm.js

@@ -0,0 +1 @@
+export { setIvm } from './node-runtime';

package/lib/node/blocks/accordion/accordion.svelte

@@ -117,13 +117,15 @@ let open = [];
     <div
       style={stringifyStyles({
         ...accordionTitleStyles(),
-        width: grid ? gridRowWidth : undefined,
-        ...{
-          order:
-            openGridItemOrder() !== null
-              ? convertOrderNumberToString(index)
-              : convertOrderNumberToString(index + 1),
-        },
+        ...(grid && {
+          width: gridRowWidth,
+          ...{
+            order:
+              openGridItemOrder() !== null
+                ? convertOrderNumberToString(index)
+                : convertOrderNumberToString(index + 1),
+          },
+        }),
       })}
       class={getAccordionTitleClassName(index)}
       data-index={index}

package/lib/node/blocks/columns/columns.svelte

@@ -32,30 +32,30 @@ function getTagName(column) {
     return column.link ? builderLinkComponent || "a" : "div";
 }
 function getWidth(index) {
-    return cols[index]?.width || 100 / cols.length;
+    return cols()[index]?.width || 100 / cols().length;
 }
 function getColumnCssWidth(index) {
     const width = getWidth(index);
-    const subtractWidth = gutterSize * (cols.length - 1) * (width / 100);
+    const subtractWidth = gutterSize() * (cols().length - 1) * (width / 100);
     return `calc(${width}% - ${subtractWidth}px)`;
 }
 function getTabletStyle({ stackedStyle, desktopStyle, }) {
-    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+    return stackAt() === "tablet" ? stackedStyle : desktopStyle;
 }
 function getMobileStyle({ stackedStyle, desktopStyle, }) {
-    return stackAt === "never" ? desktopStyle : stackedStyle;
+    return stackAt() === "never" ? desktopStyle : stackedStyle;
 }
 function columnsCssVars() {
     return {
-        "--flex-dir": flexDir,
+        "--flex-dir": flexDir(),
         "--flex-dir-tablet": getTabletStyle({
-            stackedStyle: flexDir,
+            stackedStyle: flexDir(),
             desktopStyle: "row",
         }),
     };
 }
 function columnCssVars(index) {
-    const gutter = index === 0 ? 0 : gutterSize;
+    const gutter = index === 0 ? 0 : gutterSize();
     const width = getColumnCssWidth(index);
     const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
@@ -132,14 +132,22 @@ function getAttributes(column, index) {
         style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
     };
 }
-let gutterSize = typeof space === "number" ? space || 0 : 20;
-let cols = columns || [];
-let stackAt = stackColumnsAt || "tablet";
-let flexDir = stackColumnsAt === "never"
-    ? "row"
-    : reverseColumnsWhenStacked
-        ? "column-reverse"
-        : "column";
+$: gutterSize = () => {
+    return typeof space === "number" ? space || 0 : 20;
+};
+$: cols = () => {
+    return columns || [];
+};
+$: stackAt = () => {
+    return stackColumnsAt || "tablet";
+};
+$: flexDir = () => {
+    return stackColumnsAt === "never"
+        ? "row"
+        : reverseColumnsWhenStacked
+            ? "column-reverse"
+            : "column";
+};
 </script>
 
 <div
@@ -160,7 +168,7 @@ let flexDir = stackColumnsAt === "never"
       actionAttributes={{}}
       attributes={getAttributes(column, index)}
       ><Blocks
-        path={`component.options.columns.${index}.blocks`}
+        path={`columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{
           flexGrow: "1",

package/lib/node/blocks/tabs/tabs.svelte

@@ -55,7 +55,7 @@ let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
         }}
         ><Blocks
           parent={builderBlock.id}
-          path={`component.options.tabs.${index}.label`}
+          path={`tabs.${index}.label`}
           blocks={tab.label}
           context={builderContext}
           registeredComponents={builderComponents}
@@ -68,7 +68,7 @@ let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
     <div>
       <Blocks
         parent={builderBlock.id}
-        path={`component.options.tabs.${activeTab}.content`}
+        path={`tabs.${activeTab}.content`}
         blocks={activeTabContent(activeTab)}
         context={builderContext}
         registeredComponents={builderComponents}

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

@@ -4,8 +4,8 @@
 import { isEditing } from "../../functions/is-editing";
 export let blocks;
 export let classNameProp = undefined;
-export let parent;
 export let path;
+export let parent;
 export let styleProp;
 export let BlocksWrapperProps;
 export let BlocksWrapper;
@@ -25,7 +25,7 @@ function onClick() {
             type: "builder.clickEmptyBlocks",
             data: {
                 parentElementId: parent,
-                dataPath: path,
+                dataPath: dataPath(),
             },
         }, "*");
     }
@@ -36,7 +36,7 @@ function onMouseEnter() {
             type: "builder.hoverEmptyBlocks",
             data: {
                 parentElementId: parent,
-                dataPath: path,
+                dataPath: dataPath(),
             },
         }, "*");
     }
@@ -46,6 +46,13 @@ $: className = () => {
         .filter(Boolean)
         .join(" ");
 };
+$: dataPath = () => {
+    if (!path) {
+        return undefined;
+    }
+    const pathPrefix = "component.options.";
+    return path.startsWith(pathPrefix) ? path : `${pathPrefix}${path || ""}`;
+};
 let blocksWrapperRef;
 onMount(() => { });
 </script>
@@ -55,7 +62,7 @@ onMount(() => { });
   style={stringifyStyles(styleProp)}
   bind:this={blocksWrapperRef}
   class={className() + " svelte-element"}
-  builder-path={path}
+  builder-path={dataPath()}
   builder-parent-id={parent}
   {...{}}
   on:click={(event) => {

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.26";
+export declare const SDK_VERSION = "2.0.29";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.26";
+export const SDK_VERSION = "2.0.29";

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

@@ -63,6 +63,8 @@ let IVM_CONTEXT = null;
  * `safeDynamicRequire` trick to import the `isolated-vm` package.
  */
 export const setIvm = (ivm, options = {}) => {
+    if (IVM_INSTANCE)
+        return;
     IVM_INSTANCE = ivm;
     setIsolateContext(options);
 };
@@ -92,6 +94,8 @@ const getIvm = () => {
 function setIsolateContext(options = {
     memoryLimit: 128
 }) {
+    if (IVM_CONTEXT)
+        return IVM_CONTEXT;
     const ivm = getIvm();
     const isolate = new ivm.Isolate(options);
     const context = isolate.createContextSync();
@@ -108,10 +112,7 @@ function setIsolateContext(options = {
     return context;
 }
 const getIsolateContext = () => {
-    if (IVM_CONTEXT)
-        return IVM_CONTEXT;
-    const context = setIsolateContext();
-    return context;
+    return setIsolateContext();
 };
 export const runInNode = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
     const ivm = getIvm();

package/lib/node/functions/evaluate/node-runtime/setIvm.d.ts

@@ -0,0 +1 @@
+export { setIvm } from './node-runtime';

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

@@ -0,0 +1 @@
+export { setIvm } from './node-runtime';

package/package.json

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

package/src/blocks/accordion/accordion.svelte

@@ -154,13 +154,15 @@
     <div
       style={stringifyStyles({
         ...accordionTitleStyles(),
-        width: grid ? gridRowWidth : undefined,
-        ...{
-          order:
-            openGridItemOrder() !== null
-              ? convertOrderNumberToString(index)
-              : convertOrderNumberToString(index + 1),
-        },
+        ...(grid && {
+          width: gridRowWidth,
+          ...{
+            order:
+              openGridItemOrder() !== null
+                ? convertOrderNumberToString(index)
+                : convertOrderNumberToString(index + 1),
+          },
+        }),
       })}
       class={getAccordionTitleClassName(index)}
       data-index={index}

package/src/blocks/columns/columns.svelte

@@ -42,11 +42,11 @@
     return column.link ? builderLinkComponent || "a" : "div";
   }
   function getWidth(index: number) {
-    return cols[index]?.width || 100 / cols.length;
+    return cols()[index]?.width || 100 / cols().length;
   }
   function getColumnCssWidth(index: number) {
     const width = getWidth(index);
-    const subtractWidth = gutterSize * (cols.length - 1) * (width / 100);
+    const subtractWidth = gutterSize() * (cols().length - 1) * (width / 100);
     return `calc(${width}% - ${subtractWidth}px)`;
   }
   function getTabletStyle({
@@ -56,7 +56,7 @@
     stackedStyle: CSSVal;
     desktopStyle: CSSVal;
   }) {
-    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+    return stackAt() === "tablet" ? stackedStyle : desktopStyle;
   }
   function getMobileStyle({
     stackedStyle,
@@ -65,19 +65,19 @@
     stackedStyle: CSSVal;
     desktopStyle: CSSVal;
   }) {
-    return stackAt === "never" ? desktopStyle : stackedStyle;
+    return stackAt() === "never" ? desktopStyle : stackedStyle;
   }
   function columnsCssVars() {
     return {
-      "--flex-dir": flexDir,
+      "--flex-dir": flexDir(),
       "--flex-dir-tablet": getTabletStyle({
-        stackedStyle: flexDir,
+        stackedStyle: flexDir(),
         desktopStyle: "row",
       }),
     } as Dictionary<string>;
   }
   function columnCssVars(index: number) {
-    const gutter = index === 0 ? 0 : gutterSize;
+    const gutter = index === 0 ? 0 : gutterSize();
     const width = getColumnCssWidth(index);
     const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
@@ -156,16 +156,22 @@
       style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
     };
   }
-
-  let gutterSize = typeof space === "number" ? space || 0 : 20;
-  let cols = columns || [];
-  let stackAt = stackColumnsAt || "tablet";
-  let flexDir =
-    stackColumnsAt === "never"
+  $: gutterSize = () => {
+    return typeof space === "number" ? space || 0 : 20;
+  };
+  $: cols = () => {
+    return columns || [];
+  };
+  $: stackAt = () => {
+    return stackColumnsAt || "tablet";
+  };
+  $: flexDir = () => {
+    return stackColumnsAt === "never"
       ? "row"
       : reverseColumnsWhenStacked
       ? "column-reverse"
       : "column";
+  };
 </script>
 
 <div
@@ -186,7 +192,7 @@
       actionAttributes={{}}
       attributes={getAttributes(column, index)}
       ><Blocks
-        path={`component.options.columns.${index}.blocks`}
+        path={`columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{
           flexGrow: "1",

package/src/blocks/tabs/tabs.svelte

@@ -61,7 +61,7 @@
         }}
         ><Blocks
           parent={builderBlock.id}
-          path={`component.options.tabs.${index}.label`}
+          path={`tabs.${index}.label`}
           blocks={tab.label}
           context={builderContext}
           registeredComponents={builderComponents}
@@ -74,7 +74,7 @@
     <div>
       <Blocks
         parent={builderBlock.id}
-        path={`component.options.tabs.${activeTab}.content`}
+        path={`tabs.${activeTab}.content`}
         blocks={activeTabContent(activeTab)}
         context={builderContext}
         registeredComponents={builderComponents}

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

@@ -25,8 +25,8 @@
 
   export let blocks: BlocksWrapperProps["blocks"];
   export let classNameProp: BlocksWrapperProps["classNameProp"] = undefined;
-  export let parent: BlocksWrapperProps["parent"];
   export let path: BlocksWrapperProps["path"];
+  export let parent: BlocksWrapperProps["parent"];
   export let styleProp: BlocksWrapperProps["styleProp"];
   export let BlocksWrapperProps: BlocksWrapperProps["BlocksWrapperProps"];
   export let BlocksWrapper: BlocksWrapperProps["BlocksWrapper"];
@@ -49,7 +49,7 @@
           type: "builder.clickEmptyBlocks",
           data: {
             parentElementId: parent,
-            dataPath: path,
+            dataPath: dataPath(),
           },
         },
         "*"
@@ -63,7 +63,7 @@
           type: "builder.hoverEmptyBlocks",
           data: {
             parentElementId: parent,
-            dataPath: path,
+            dataPath: dataPath(),
           },
         },
         "*"
@@ -75,6 +75,13 @@
       .filter(Boolean)
       .join(" ");
   };
+  $: dataPath = () => {
+    if (!path) {
+      return undefined;
+    }
+    const pathPrefix = "component.options.";
+    return path.startsWith(pathPrefix) ? path : `${pathPrefix}${path || ""}`;
+  };
 
   let blocksWrapperRef;
 
@@ -86,7 +93,7 @@
   style={stringifyStyles(styleProp)}
   bind:this={blocksWrapperRef}
   class={className() + " svelte-element"}
-  builder-path={path}
+  builder-path={dataPath()}
   builder-parent-id={parent}
   {...{}}
   on:click={(event) => {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.26"
+export const SDK_VERSION = "2.0.29"

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

@@ -75,6 +75,7 @@ let IVM_CONTEXT: Context | null = null;
  * `safeDynamicRequire` trick to import the `isolated-vm` package.
  */
 export const setIvm = (ivm: IsolatedVMImport, options: IsolateOptions = {}) => {
+  if (IVM_INSTANCE) return;
   IVM_INSTANCE = ivm;
   setIsolateContext(options);
 };
@@ -102,6 +103,7 @@ const getIvm = (): IsolatedVMImport => {
 function setIsolateContext(options: IsolateOptions = {
   memoryLimit: 128
 }) {
+  if (IVM_CONTEXT) return IVM_CONTEXT;
   const ivm = getIvm();
   const isolate = new ivm.Isolate(options);
   const context = isolate.createContextSync();
@@ -120,9 +122,7 @@ function setIsolateContext(options: IsolateOptions = {
   return context;
 }
 const getIsolateContext = () => {
-  if (IVM_CONTEXT) return IVM_CONTEXT;
-  const context = setIsolateContext();
-  return context;
+  return setIsolateContext();
 };
 export const runInNode = ({
   code,

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

@@ -0,0 +1 @@
+export { setIvm } from './node-runtime'