@builder.io/sdk-svelte 2.0.28 → 2.0.30

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

@@ -168,7 +168,7 @@ $: flexDir = () => {
       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/form/form/form.svelte

@@ -10,6 +10,7 @@ import { get } from "../../../functions/get";
 import { isEditing } from "../../../functions/is-editing";
 import { set } from "../../../functions/set";
 import { filterAttrs } from "../../helpers";
+import { logFetch } from "../../../functions/log-fetch";
 import { setAttrs } from "../../helpers";
 export let builderContext;
 export let previewState = undefined;
@@ -148,9 +149,11 @@ function onSubmit(event) {
         }
         formState = "sending";
         const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(sendSubmissionsToEmail || "")}&name=${encodeURIComponent(name || "")}`;
-        fetch(sendSubmissionsTo === "email"
+        const url = sendSubmissionsTo === "email"
             ? formUrl
-            : action /* TODO: throw error if no action URL */, {
+            : action; /* TODO: throw error if no action URL */
+        logFetch(url);
+        fetch(url, {
             body,
             headers,
             method: method || "post",

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

@@ -8,6 +8,7 @@ import { fetchOneEntry } from "../../../functions/get-content/index";
 import { isBrowser } from "../../../functions/is-browser";
 import { isEditing } from "../../../functions/is-editing";
 import { isPreviewing } from "../../../functions/is-previewing";
+import { logFetch } from "../../../functions/log-fetch";
 import { createRegisterComponentMessage } from "../../../functions/register-component";
 import { _track } from "../../../functions/track/index";
 import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction";
@@ -127,6 +128,7 @@ function runHttpRequests() {
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
         })));
+        logFetch(evaluatedUrl);
         fetch(evaluatedUrl)
             .then((response) => response.json())
             .then((json) => {

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.28";
+export declare const SDK_VERSION = "2.0.30";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.28";
+export const SDK_VERSION = "2.0.30";

package/lib/browser/functions/log-fetch.d.ts

@@ -0,0 +1 @@
+export declare function logFetch(url: string): void;

package/lib/browser/functions/log-fetch.js

@@ -0,0 +1,8 @@
+import { logger } from '../helpers/logger';
+export function logFetch(url) {
+    if (typeof process !== 'undefined' && process.env?.DEBUG) {
+        if (String(process.env.DEBUG) == 'true') {
+            logger.log(url);
+        }
+    }
+}

package/lib/browser/functions/track/index.js

@@ -5,6 +5,7 @@ import { getSessionId } from '../../helpers/sessionId';
 import { getVisitorId } from '../../helpers/visitorId';
 import { isBrowser } from '../is-browser';
 import { isEditing } from '../is-editing';
+import { logFetch } from '../log-fetch';
 import { getUserAttributes } from './helpers';
 const getTrackingEventData = async ({ canTrack }) => {
     if (!canTrack) {
@@ -54,7 +55,9 @@ export async function _track({ apiHost, ...eventProps }) {
         return;
     }
     const baseUrl = apiHost || 'https://cdn.builder.io';
-    return fetch(`${baseUrl}/api/v1/track`, {
+    const url = `${baseUrl}/api/v1/track`;
+    logFetch(url);
+    return fetch(url, {
         method: 'POST',
         body: JSON.stringify({
             events: [await createEvent(eventProps)]

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

@@ -168,7 +168,7 @@ $: flexDir = () => {
       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/form/form/form.svelte

@@ -10,6 +10,7 @@ import { get } from "../../../functions/get";
 import { isEditing } from "../../../functions/is-editing";
 import { set } from "../../../functions/set";
 import { filterAttrs } from "../../helpers";
+import { logFetch } from "../../../functions/log-fetch";
 import { setAttrs } from "../../helpers";
 export let builderContext;
 export let previewState = undefined;
@@ -148,9 +149,11 @@ function onSubmit(event) {
         }
         formState = "sending";
         const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(sendSubmissionsToEmail || "")}&name=${encodeURIComponent(name || "")}`;
-        fetch(sendSubmissionsTo === "email"
+        const url = sendSubmissionsTo === "email"
             ? formUrl
-            : action /* TODO: throw error if no action URL */, {
+            : action; /* TODO: throw error if no action URL */
+        logFetch(url);
+        fetch(url, {
             body,
             headers,
             method: method || "post",

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

@@ -8,6 +8,7 @@ import { fetchOneEntry } from "../../../functions/get-content/index";
 import { isBrowser } from "../../../functions/is-browser";
 import { isEditing } from "../../../functions/is-editing";
 import { isPreviewing } from "../../../functions/is-previewing";
+import { logFetch } from "../../../functions/log-fetch";
 import { createRegisterComponentMessage } from "../../../functions/register-component";
 import { _track } from "../../../functions/track/index";
 import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction";
@@ -127,6 +128,7 @@ function runHttpRequests() {
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
         })));
+        logFetch(evaluatedUrl);
         fetch(evaluatedUrl)
             .then((response) => response.json())
             .then((json) => {

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.28";
+export declare const SDK_VERSION = "2.0.30";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.28";
+export const SDK_VERSION = "2.0.30";

package/lib/edge/functions/log-fetch.d.ts

@@ -0,0 +1 @@
+export declare function logFetch(url: string): void;

package/lib/edge/functions/log-fetch.js

@@ -0,0 +1,8 @@
+import { logger } from '../helpers/logger';
+export function logFetch(url) {
+    if (typeof process !== 'undefined' && process.env?.DEBUG) {
+        if (String(process.env.DEBUG) == 'true') {
+            logger.log(url);
+        }
+    }
+}

package/lib/edge/functions/track/index.js

@@ -5,6 +5,7 @@ import { getSessionId } from '../../helpers/sessionId';
 import { getVisitorId } from '../../helpers/visitorId';
 import { isBrowser } from '../is-browser';
 import { isEditing } from '../is-editing';
+import { logFetch } from '../log-fetch';
 import { getUserAttributes } from './helpers';
 const getTrackingEventData = async ({ canTrack }) => {
     if (!canTrack) {
@@ -54,7 +55,9 @@ export async function _track({ apiHost, ...eventProps }) {
         return;
     }
     const baseUrl = apiHost || 'https://cdn.builder.io';
-    return fetch(`${baseUrl}/api/v1/track`, {
+    const url = `${baseUrl}/api/v1/track`;
+    logFetch(url);
+    return fetch(url, {
         method: 'POST',
         body: JSON.stringify({
             events: [await createEvent(eventProps)]

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

@@ -168,7 +168,7 @@ $: flexDir = () => {
       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/form/form/form.svelte

@@ -10,6 +10,7 @@ import { get } from "../../../functions/get";
 import { isEditing } from "../../../functions/is-editing";
 import { set } from "../../../functions/set";
 import { filterAttrs } from "../../helpers";
+import { logFetch } from "../../../functions/log-fetch";
 import { setAttrs } from "../../helpers";
 export let builderContext;
 export let previewState = undefined;
@@ -148,9 +149,11 @@ function onSubmit(event) {
         }
         formState = "sending";
         const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(sendSubmissionsToEmail || "")}&name=${encodeURIComponent(name || "")}`;
-        fetch(sendSubmissionsTo === "email"
+        const url = sendSubmissionsTo === "email"
             ? formUrl
-            : action /* TODO: throw error if no action URL */, {
+            : action; /* TODO: throw error if no action URL */
+        logFetch(url);
+        fetch(url, {
             body,
             headers,
             method: method || "post",

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

@@ -8,6 +8,7 @@ import { fetchOneEntry } from "../../../functions/get-content/index";
 import { isBrowser } from "../../../functions/is-browser";
 import { isEditing } from "../../../functions/is-editing";
 import { isPreviewing } from "../../../functions/is-previewing";
+import { logFetch } from "../../../functions/log-fetch";
 import { createRegisterComponentMessage } from "../../../functions/register-component";
 import { _track } from "../../../functions/track/index";
 import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction";
@@ -127,6 +128,7 @@ function runHttpRequests() {
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
         })));
+        logFetch(evaluatedUrl);
         fetch(evaluatedUrl)
             .then((response) => response.json())
             .then((json) => {

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.28";
+export declare const SDK_VERSION = "2.0.30";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.28";
+export const SDK_VERSION = "2.0.30";

package/lib/node/functions/log-fetch.d.ts

@@ -0,0 +1 @@
+export declare function logFetch(url: string): void;

package/lib/node/functions/log-fetch.js

@@ -0,0 +1,8 @@
+import { logger } from '../helpers/logger';
+export function logFetch(url) {
+    if (typeof process !== 'undefined' && process.env?.DEBUG) {
+        if (String(process.env.DEBUG) == 'true') {
+            logger.log(url);
+        }
+    }
+}

package/lib/node/functions/track/index.js

@@ -5,6 +5,7 @@ import { getSessionId } from '../../helpers/sessionId';
 import { getVisitorId } from '../../helpers/visitorId';
 import { isBrowser } from '../is-browser';
 import { isEditing } from '../is-editing';
+import { logFetch } from '../log-fetch';
 import { getUserAttributes } from './helpers';
 const getTrackingEventData = async ({ canTrack }) => {
     if (!canTrack) {
@@ -54,7 +55,9 @@ export async function _track({ apiHost, ...eventProps }) {
         return;
     }
     const baseUrl = apiHost || 'https://cdn.builder.io';
-    return fetch(`${baseUrl}/api/v1/track`, {
+    const url = `${baseUrl}/api/v1/track`;
+    logFetch(url);
+    return fetch(url, {
         method: 'POST',
         body: JSON.stringify({
             events: [await createEvent(eventProps)]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "2.0.28",
+  "version": "2.0.30",
   "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

@@ -192,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/form/form/form.svelte

@@ -49,6 +49,7 @@
   } from "../../../types/builder-props";
   import type { Dictionary } from "../../../types/typescript";
   import { filterAttrs } from "../../helpers";
+  import { logFetch } from "../../../functions/log-fetch";
   import { setAttrs } from "../../helpers";
 
   export let builderContext: FormProps["builderContext"];
@@ -195,16 +196,17 @@
       }/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(
         sendSubmissionsToEmail || ""
       )}&name=${encodeURIComponent(name || "")}`;
-      fetch(
+      const url =
         sendSubmissionsTo === "email"
           ? formUrl
-          : action! /* TODO: throw error if no action URL */,
-        {
-          body,
-          headers,
-          method: method || "post",
-        }
-      ).then(
+          : action!; /* TODO: throw error if no action URL */
+
+      logFetch(url);
+      fetch(url, {
+        body,
+        headers,
+        method: method || "post",
+      }).then(
         async (res) => {
           let body;
           const contentType = res.headers.get("content-type");

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

@@ -25,6 +25,7 @@
   import { isBrowser } from "../../../functions/is-browser";
   import { isEditing } from "../../../functions/is-editing";
   import { isPreviewing } from "../../../functions/is-previewing";
+  import { logFetch } from "../../../functions/log-fetch";
   import { createRegisterComponentMessage } from "../../../functions/register-component";
   import { _track } from "../../../functions/track/index";
   import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction";
@@ -163,6 +164,7 @@
           })
         )
       );
+      logFetch(evaluatedUrl);
       fetch(evaluatedUrl)
         .then((response) => response.json())
         .then((json) => {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.28"
+export const SDK_VERSION = "2.0.30"

package/src/functions/log-fetch.ts

@@ -0,0 +1,8 @@
+import { logger } from '../helpers/logger';
+export function logFetch(url: string) {
+  if (typeof process !== 'undefined' && process.env?.DEBUG) {
+    if (String(process.env.DEBUG) == 'true') {
+      logger.log(url);
+    }
+  }
+}

package/src/functions/track/index.ts

@@ -7,6 +7,7 @@ import type { CanTrack } from '../../types/can-track';
 import type { Dictionary } from '../../types/typescript';
 import { isBrowser } from '../is-browser';
 import { isEditing } from '../is-editing';
+import { logFetch } from '../log-fetch';
 import { getUserAttributes } from './helpers';
 interface Event {
   /**
@@ -119,7 +120,9 @@ export async function _track({
     return;
   }
   const baseUrl = apiHost || 'https://cdn.builder.io';
-  return fetch(`${baseUrl}/api/v1/track`, {
+  const url = `${baseUrl}/api/v1/track`;
+  logFetch(url);
+  return fetch(url, {
     method: 'POST',
     body: JSON.stringify({
       events: [await createEvent(eventProps)]