@builder.io/sdk-svelte 1.0.15 → 1.0.17

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

@@ -129,7 +129,7 @@ let flexDir = stackColumnsAt === "never"
   {...{}}
 >
   {#if TARGET !== "reactNative"}
-    <InlinedStyles styles={columnsStyles()} />
+    <InlinedStyles id="builderio-columns" styles={columnsStyles()} />
   {/if}
   {#each columns as column, index (index)}
     <DynamicRenderer

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

@@ -70,5 +70,5 @@ $: css = () => {
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}
-  <InlinedStyles styles={css()} />
+  <InlinedStyles id="builderio-block" styles={css()} />
 {/if}

package/lib/browser/components/content/components/enable-editor.svelte

@@ -122,41 +122,40 @@ function onClick(event) {
         clicked = true;
     }
 }
-function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
-        code: group,
-        context: context || {},
-        localState: undefined,
-        rootState: $builderContextSignal.rootState,
-        rootSetState: $builderContextSignal.rootSetState,
-        enableCache: true,
-    })));
-}
-function handleRequest({ url, key }) {
-    fetch(url)
-        .then((response) => response.json())
-        .then((json) => {
-        const newState = {
-            ...$builderContextSignal.rootState,
-            [key]: json,
-        };
-        $builderContextSignal.rootSetState?.(newState);
-        httpReqsData[key] = true;
-    })
-        .catch((err) => {
-        console.error("error fetching dynamic data", url, err);
-    });
-}
 function runHttpRequests() {
     const requests = $builderContextSignal.content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
-        if (url && (!httpReqsData[key] || isEditing())) {
-            const evaluatedUrl = evalExpression(url);
-            handleRequest({
-                url: evaluatedUrl,
-                key,
+        if (!url)
+            return;
+        // request already in progress
+        if (httpReqsPending[key])
+            return;
+        // request already completed, and not in edit mode
+        if (httpReqsData[key] && !isEditing())
+            return;
+        httpReqsPending[key] = true;
+        const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
+            code: group,
+            context: context || {},
+            localState: undefined,
+            rootState: $builderContextSignal.rootState,
+            rootSetState: $builderContextSignal.rootSetState,
+            enableCache: true,
+        })));
+        fetch(evaluatedUrl)
+            .then((response) => response.json())
+            .then((json) => {
+            mergeNewRootState({
+                [key]: json,
             });
-        }
+            httpReqsData[key] = true;
+        })
+            .catch((err) => {
+            console.error("error fetching dynamic data", url, err);
+        })
+            .finally(() => {
+            httpReqsPending[key] = false;
+        });
     });
 }
 function emitStateUpdate() {
@@ -228,6 +227,7 @@ function elementRef_onInitpreviewingbldr(event) {
 let elementRef;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
+let httpReqsPending = {};
 let clicked = false;
 onMount(() => {
     if (isBrowser()) {

package/lib/browser/components/content/components/styles.svelte

@@ -18,4 +18,4 @@ ${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 
-<InlinedStyles styles={injectedStyles} />
+<InlinedStyles id="builderio-content" styles={injectedStyles} />

package/lib/browser/components/content/content.svelte

@@ -98,7 +98,7 @@ setContext(ComponentsContext.key, {
   {...{}}
 >
   {#if isSsrAbTest}
-    <InlinedScript {scriptStr} />
+    <InlinedScript id="builderio-variant-visibility" {scriptStr} />
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles

package/lib/browser/components/content-variants/content-variants.svelte

@@ -7,7 +7,7 @@ import { getDefaultCanTrack } from "../../helpers/canTrack.js";
 import ContentComponent from "../content/content.svelte";
 import InlinedScript from "../inlined-script.svelte";
 import InlinedStyles from "../inlined-styles.svelte";
-import { checkShouldRenderVariants, getScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
+import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
 export let canTrack = undefined;
 export let content = undefined;
 export let isNestedRender = undefined;
@@ -60,15 +60,18 @@ onMount(() => {
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}
-  <InlinedScript scriptStr={getScriptString()} />
+  <InlinedScript
+    id="builderio-init-variants-fns"
+    scriptStr={getInitVariantsFnsScriptString()}
+  />
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedStyles
-    id={`variants-styles-${content?.id}`}
-    styles={hideVariantsStyleString()}
+  <InlinedStyles id="builderio-variants" styles={hideVariantsStyleString()} />
+  <InlinedScript
+    id="builderio-variants-visibility"
+    scriptStr={updateCookieAndStylesScriptStr()}
   />
-  <InlinedScript scriptStr={updateCookieAndStylesScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent

package/lib/browser/components/content-variants/helpers.d.ts

@@ -32,7 +32,7 @@ type VariantData = {
     id: string;
     testRatio?: number;
 };
-export declare const getScriptString: () => string;
+export declare const getInitVariantsFnsScriptString: () => string;
 export declare const getUpdateCookieAndStylesScript: (variants: VariantData[], contentId: string) => string;
 export declare const getUpdateVariantVisibilityScript: ({ contentId, variationId }: {
     variationId: string;

package/lib/browser/components/content-variants/helpers.js

@@ -41,7 +41,7 @@ export const checkShouldRenderVariants = ({ canTrack, content }) => {
 };
 const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
-export const getScriptString = () => `
+export const getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
   window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;

package/lib/browser/components/inlined-script.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>export let scriptStr;
-export let id = undefined;
+export let id;
 </script>
 
-{@html `<script  id=${id || ""}>${scriptStr}</script>`}
+{@html `<script  data-id=${id}>${scriptStr}</script>`}

package/lib/browser/components/inlined-script.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 interface Props {
     scriptStr: string;
-    id?: string;
+    id: string;
 }
 declare const __propDef: {
     props: {
         scriptStr: Props["scriptStr"];
-        id?: Props["id"];
+        id: Props["id"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/components/inlined-styles.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>export let styles;
-export let id = undefined;
+export let id;
 </script>
 
-{@html `<${"style"}  id=${id}  >${styles}<${"/style"}>`}
+{@html `<${"style"}  data-id=${id}  >${styles}<${"/style"}>`}

package/lib/browser/components/inlined-styles.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 interface Props {
     styles: string;
-    id?: string;
+    id: string;
 }
 declare const __propDef: {
     props: {
         styles: Props["styles"];
-        id?: Props["id"];
+        id: Props["id"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.15";
+export declare const SDK_VERSION = "1.0.17";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.15";
+export const SDK_VERSION = "1.0.17";

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

@@ -129,7 +129,7 @@ let flexDir = stackColumnsAt === "never"
   {...{}}
 >
   {#if TARGET !== "reactNative"}
-    <InlinedStyles styles={columnsStyles()} />
+    <InlinedStyles id="builderio-columns" styles={columnsStyles()} />
   {/if}
   {#each columns as column, index (index)}
     <DynamicRenderer

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

@@ -70,5 +70,5 @@ $: css = () => {
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}
-  <InlinedStyles styles={css()} />
+  <InlinedStyles id="builderio-block" styles={css()} />
 {/if}

package/lib/edge/components/content/components/enable-editor.svelte

@@ -122,41 +122,40 @@ function onClick(event) {
         clicked = true;
     }
 }
-function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
-        code: group,
-        context: context || {},
-        localState: undefined,
-        rootState: $builderContextSignal.rootState,
-        rootSetState: $builderContextSignal.rootSetState,
-        enableCache: true,
-    })));
-}
-function handleRequest({ url, key }) {
-    fetch(url)
-        .then((response) => response.json())
-        .then((json) => {
-        const newState = {
-            ...$builderContextSignal.rootState,
-            [key]: json,
-        };
-        $builderContextSignal.rootSetState?.(newState);
-        httpReqsData[key] = true;
-    })
-        .catch((err) => {
-        console.error("error fetching dynamic data", url, err);
-    });
-}
 function runHttpRequests() {
     const requests = $builderContextSignal.content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
-        if (url && (!httpReqsData[key] || isEditing())) {
-            const evaluatedUrl = evalExpression(url);
-            handleRequest({
-                url: evaluatedUrl,
-                key,
+        if (!url)
+            return;
+        // request already in progress
+        if (httpReqsPending[key])
+            return;
+        // request already completed, and not in edit mode
+        if (httpReqsData[key] && !isEditing())
+            return;
+        httpReqsPending[key] = true;
+        const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
+            code: group,
+            context: context || {},
+            localState: undefined,
+            rootState: $builderContextSignal.rootState,
+            rootSetState: $builderContextSignal.rootSetState,
+            enableCache: true,
+        })));
+        fetch(evaluatedUrl)
+            .then((response) => response.json())
+            .then((json) => {
+            mergeNewRootState({
+                [key]: json,
             });
-        }
+            httpReqsData[key] = true;
+        })
+            .catch((err) => {
+            console.error("error fetching dynamic data", url, err);
+        })
+            .finally(() => {
+            httpReqsPending[key] = false;
+        });
     });
 }
 function emitStateUpdate() {
@@ -228,6 +227,7 @@ function elementRef_onInitpreviewingbldr(event) {
 let elementRef;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
+let httpReqsPending = {};
 let clicked = false;
 onMount(() => {
     if (isBrowser()) {

package/lib/edge/components/content/components/styles.svelte

@@ -18,4 +18,4 @@ ${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 
-<InlinedStyles styles={injectedStyles} />
+<InlinedStyles id="builderio-content" styles={injectedStyles} />

package/lib/edge/components/content/content.svelte

@@ -98,7 +98,7 @@ setContext(ComponentsContext.key, {
   {...{}}
 >
   {#if isSsrAbTest}
-    <InlinedScript {scriptStr} />
+    <InlinedScript id="builderio-variant-visibility" {scriptStr} />
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles

package/lib/edge/components/content-variants/content-variants.svelte

@@ -7,7 +7,7 @@ import { getDefaultCanTrack } from "../../helpers/canTrack.js";
 import ContentComponent from "../content/content.svelte";
 import InlinedScript from "../inlined-script.svelte";
 import InlinedStyles from "../inlined-styles.svelte";
-import { checkShouldRenderVariants, getScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
+import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
 export let canTrack = undefined;
 export let content = undefined;
 export let isNestedRender = undefined;
@@ -60,15 +60,18 @@ onMount(() => {
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}
-  <InlinedScript scriptStr={getScriptString()} />
+  <InlinedScript
+    id="builderio-init-variants-fns"
+    scriptStr={getInitVariantsFnsScriptString()}
+  />
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedStyles
-    id={`variants-styles-${content?.id}`}
-    styles={hideVariantsStyleString()}
+  <InlinedStyles id="builderio-variants" styles={hideVariantsStyleString()} />
+  <InlinedScript
+    id="builderio-variants-visibility"
+    scriptStr={updateCookieAndStylesScriptStr()}
   />
-  <InlinedScript scriptStr={updateCookieAndStylesScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent

package/lib/edge/components/content-variants/helpers.d.ts

@@ -32,7 +32,7 @@ type VariantData = {
     id: string;
     testRatio?: number;
 };
-export declare const getScriptString: () => string;
+export declare const getInitVariantsFnsScriptString: () => string;
 export declare const getUpdateCookieAndStylesScript: (variants: VariantData[], contentId: string) => string;
 export declare const getUpdateVariantVisibilityScript: ({ contentId, variationId }: {
     variationId: string;

package/lib/edge/components/content-variants/helpers.js

@@ -41,7 +41,7 @@ export const checkShouldRenderVariants = ({ canTrack, content }) => {
 };
 const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
-export const getScriptString = () => `
+export const getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
   window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;

package/lib/edge/components/inlined-script.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>export let scriptStr;
-export let id = undefined;
+export let id;
 </script>
 
-{@html `<script  id=${id || ""}>${scriptStr}</script>`}
+{@html `<script  data-id=${id}>${scriptStr}</script>`}

package/lib/edge/components/inlined-script.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 interface Props {
     scriptStr: string;
-    id?: string;
+    id: string;
 }
 declare const __propDef: {
     props: {
         scriptStr: Props["scriptStr"];
-        id?: Props["id"];
+        id: Props["id"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/edge/components/inlined-styles.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>export let styles;
-export let id = undefined;
+export let id;
 </script>
 
-{@html `<${"style"}  id=${id}  >${styles}<${"/style"}>`}
+{@html `<${"style"}  data-id=${id}  >${styles}<${"/style"}>`}

package/lib/edge/components/inlined-styles.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 interface Props {
     styles: string;
-    id?: string;
+    id: string;
 }
 declare const __propDef: {
     props: {
         styles: Props["styles"];
-        id?: Props["id"];
+        id: Props["id"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.15";
+export declare const SDK_VERSION = "1.0.17";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.15";
+export const SDK_VERSION = "1.0.17";

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

@@ -129,7 +129,7 @@ let flexDir = stackColumnsAt === "never"
   {...{}}
 >
   {#if TARGET !== "reactNative"}
-    <InlinedStyles styles={columnsStyles()} />
+    <InlinedStyles id="builderio-columns" styles={columnsStyles()} />
   {/if}
   {#each columns as column, index (index)}
     <DynamicRenderer

package/lib/node/components/block/components/block-styles.svelte

@@ -70,5 +70,5 @@ $: css = () => {
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}
-  <InlinedStyles styles={css()} />
+  <InlinedStyles id="builderio-block" styles={css()} />
 {/if}

package/lib/node/components/content/components/enable-editor.svelte

@@ -122,41 +122,40 @@ function onClick(event) {
         clicked = true;
     }
 }
-function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
-        code: group,
-        context: context || {},
-        localState: undefined,
-        rootState: $builderContextSignal.rootState,
-        rootSetState: $builderContextSignal.rootSetState,
-        enableCache: true,
-    })));
-}
-function handleRequest({ url, key }) {
-    fetch(url)
-        .then((response) => response.json())
-        .then((json) => {
-        const newState = {
-            ...$builderContextSignal.rootState,
-            [key]: json,
-        };
-        $builderContextSignal.rootSetState?.(newState);
-        httpReqsData[key] = true;
-    })
-        .catch((err) => {
-        console.error("error fetching dynamic data", url, err);
-    });
-}
 function runHttpRequests() {
     const requests = $builderContextSignal.content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
-        if (url && (!httpReqsData[key] || isEditing())) {
-            const evaluatedUrl = evalExpression(url);
-            handleRequest({
-                url: evaluatedUrl,
-                key,
+        if (!url)
+            return;
+        // request already in progress
+        if (httpReqsPending[key])
+            return;
+        // request already completed, and not in edit mode
+        if (httpReqsData[key] && !isEditing())
+            return;
+        httpReqsPending[key] = true;
+        const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
+            code: group,
+            context: context || {},
+            localState: undefined,
+            rootState: $builderContextSignal.rootState,
+            rootSetState: $builderContextSignal.rootSetState,
+            enableCache: true,
+        })));
+        fetch(evaluatedUrl)
+            .then((response) => response.json())
+            .then((json) => {
+            mergeNewRootState({
+                [key]: json,
             });
-        }
+            httpReqsData[key] = true;
+        })
+            .catch((err) => {
+            console.error("error fetching dynamic data", url, err);
+        })
+            .finally(() => {
+            httpReqsPending[key] = false;
+        });
     });
 }
 function emitStateUpdate() {
@@ -228,6 +227,7 @@ function elementRef_onInitpreviewingbldr(event) {
 let elementRef;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
+let httpReqsPending = {};
 let clicked = false;
 onMount(() => {
     if (isBrowser()) {

package/lib/node/components/content/components/styles.svelte

@@ -18,4 +18,4 @@ ${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 
-<InlinedStyles styles={injectedStyles} />
+<InlinedStyles id="builderio-content" styles={injectedStyles} />

package/lib/node/components/content/content.svelte

@@ -98,7 +98,7 @@ setContext(ComponentsContext.key, {
   {...{}}
 >
   {#if isSsrAbTest}
-    <InlinedScript {scriptStr} />
+    <InlinedScript id="builderio-variant-visibility" {scriptStr} />
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles

package/lib/node/components/content-variants/content-variants.svelte

@@ -7,7 +7,7 @@ import { getDefaultCanTrack } from "../../helpers/canTrack.js";
 import ContentComponent from "../content/content.svelte";
 import InlinedScript from "../inlined-script.svelte";
 import InlinedStyles from "../inlined-styles.svelte";
-import { checkShouldRenderVariants, getScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
+import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
 export let canTrack = undefined;
 export let content = undefined;
 export let isNestedRender = undefined;
@@ -60,15 +60,18 @@ onMount(() => {
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}
-  <InlinedScript scriptStr={getScriptString()} />
+  <InlinedScript
+    id="builderio-init-variants-fns"
+    scriptStr={getInitVariantsFnsScriptString()}
+  />
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedStyles
-    id={`variants-styles-${content?.id}`}
-    styles={hideVariantsStyleString()}
+  <InlinedStyles id="builderio-variants" styles={hideVariantsStyleString()} />
+  <InlinedScript
+    id="builderio-variants-visibility"
+    scriptStr={updateCookieAndStylesScriptStr()}
   />
-  <InlinedScript scriptStr={updateCookieAndStylesScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent

package/lib/node/components/content-variants/helpers.d.ts

@@ -32,7 +32,7 @@ type VariantData = {
     id: string;
     testRatio?: number;
 };
-export declare const getScriptString: () => string;
+export declare const getInitVariantsFnsScriptString: () => string;
 export declare const getUpdateCookieAndStylesScript: (variants: VariantData[], contentId: string) => string;
 export declare const getUpdateVariantVisibilityScript: ({ contentId, variationId }: {
     variationId: string;

package/lib/node/components/content-variants/helpers.js

@@ -41,7 +41,7 @@ export const checkShouldRenderVariants = ({ canTrack, content }) => {
 };
 const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
-export const getScriptString = () => `
+export const getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
   window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;

package/lib/node/components/inlined-script.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>export let scriptStr;
-export let id = undefined;
+export let id;
 </script>
 
-{@html `<script  id=${id || ""}>${scriptStr}</script>`}
+{@html `<script  data-id=${id}>${scriptStr}</script>`}

package/lib/node/components/inlined-script.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 interface Props {
     scriptStr: string;
-    id?: string;
+    id: string;
 }
 declare const __propDef: {
     props: {
         scriptStr: Props["scriptStr"];
-        id?: Props["id"];
+        id: Props["id"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/components/inlined-styles.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>export let styles;
-export let id = undefined;
+export let id;
 </script>
 
-{@html `<${"style"}  id=${id}  >${styles}<${"/style"}>`}
+{@html `<${"style"}  data-id=${id}  >${styles}<${"/style"}>`}

package/lib/node/components/inlined-styles.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 interface Props {
     styles: string;
-    id?: string;
+    id: string;
 }
 declare const __propDef: {
     props: {
         styles: Props["styles"];
-        id?: Props["id"];
+        id: Props["id"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.15";
+export declare const SDK_VERSION = "1.0.17";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.15";
+export const SDK_VERSION = "1.0.17";

package/package.json

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

package/src/blocks/columns/columns.svelte

@@ -155,7 +155,7 @@
   {...{}}
 >
   {#if TARGET !== "reactNative"}
-    <InlinedStyles styles={columnsStyles()} />
+    <InlinedStyles id="builderio-columns" styles={columnsStyles()} />
   {/if}
   {#each columns as column, index (index)}
     <DynamicRenderer

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

@@ -91,5 +91,5 @@
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}
-  <InlinedStyles styles={css()} />
+  <InlinedStyles id="builderio-block" styles={css()} />
 {/if}

package/src/components/content/components/enable-editor.svelte

@@ -154,47 +154,45 @@
       clicked = true;
     }
   }
-  function evalExpression(expression: string) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
-      String(
-        evaluate({
-          code: group,
-          context: context || {},
-          localState: undefined,
-          rootState: $builderContextSignal.rootState,
-          rootSetState: $builderContextSignal.rootSetState,
-          enableCache: true,
-        })
-      )
-    );
-  }
-  function handleRequest({ url, key }: { key: string; url: string }) {
-    fetch(url)
-      .then((response) => response.json())
-      .then((json) => {
-        const newState = {
-          ...$builderContextSignal.rootState,
-          [key]: json,
-        };
-        $builderContextSignal.rootSetState?.(newState);
-        httpReqsData[key] = true;
-      })
-      .catch((err) => {
-        console.error("error fetching dynamic data", url, err);
-      });
-  }
   function runHttpRequests() {
     const requests: {
       [key: string]: string;
     } = $builderContextSignal.content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
-      if (url && (!httpReqsData[key] || isEditing())) {
-        const evaluatedUrl = evalExpression(url);
-        handleRequest({
-          url: evaluatedUrl,
-          key,
+      if (!url) return;
+
+      // request already in progress
+      if (httpReqsPending[key]) return;
+
+      // request already completed, and not in edit mode
+      if (httpReqsData[key] && !isEditing()) return;
+      httpReqsPending[key] = true;
+      const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) =>
+        String(
+          evaluate({
+            code: group,
+            context: context || {},
+            localState: undefined,
+            rootState: $builderContextSignal.rootState,
+            rootSetState: $builderContextSignal.rootSetState,
+            enableCache: true,
+          })
+        )
+      );
+      fetch(evaluatedUrl)
+        .then((response) => response.json())
+        .then((json) => {
+          mergeNewRootState({
+            [key]: json,
+          });
+          httpReqsData[key] = true;
+        })
+        .catch((err) => {
+          console.error("error fetching dynamic data", url, err);
+        })
+        .finally(() => {
+          httpReqsPending[key] = false;
         });
-      }
     });
   }
   function emitStateUpdate() {
@@ -284,6 +282,7 @@
 
   let ContentWrapper = contentWrapper || "div";
   let httpReqsData = {};
+  let httpReqsPending = {};
   let clicked = false;
 
   onMount(() => {

package/src/components/content/components/styles.svelte

@@ -29,4 +29,4 @@ ${getDefaultStyles(isNestedRender)}
 `.trim();
 </script>
 
-<InlinedStyles styles={injectedStyles} />
+<InlinedStyles id="builderio-content" styles={injectedStyles} />

package/src/components/content/content.svelte

@@ -122,7 +122,7 @@
   {...{}}
 >
   {#if isSsrAbTest}
-    <InlinedScript {scriptStr} />
+    <InlinedScript id="builderio-variant-visibility" {scriptStr} />
   {/if}
   {#if TARGET !== "reactNative"}
     <ContentStyles

package/src/components/content-variants/content-variants.svelte

@@ -19,7 +19,7 @@
   import type { ContentVariantsPrps } from "./content-variants.types.js";
   import {
     checkShouldRenderVariants,
-    getScriptString,
+    getInitVariantsFnsScriptString,
     getUpdateCookieAndStylesScript,
     getVariants,
   } from "./helpers.js";
@@ -87,15 +87,18 @@
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}
-  <InlinedScript scriptStr={getScriptString()} />
+  <InlinedScript
+    id="builderio-init-variants-fns"
+    scriptStr={getInitVariantsFnsScriptString()}
+  />
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedStyles
-    id={`variants-styles-${content?.id}`}
-    styles={hideVariantsStyleString()}
+  <InlinedStyles id="builderio-variants" styles={hideVariantsStyleString()} />
+  <InlinedScript
+    id="builderio-variants-visibility"
+    scriptStr={updateCookieAndStylesScriptStr()}
   />
-  <InlinedScript scriptStr={updateCookieAndStylesScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent

package/src/components/content-variants/helpers.ts

@@ -52,7 +52,7 @@ type VariantData = {
 };
 const getIsHydrationTarget = (target: Target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
-export const getScriptString = () => `
+export const getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
   window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;

package/src/components/inlined-script.svelte

@@ -1,13 +1,13 @@
 <script context="module" lang="ts">
   interface Props {
     scriptStr: string;
-    id?: string;
+    id: string;
   }
 </script>
 
 <script lang="ts">
   export let scriptStr: Props["scriptStr"];
-  export let id: Props["id"] = undefined;
+  export let id: Props["id"];
 </script>
 
-{@html `<script  id=${id || ""}>${scriptStr}</script>`}
+{@html `<script  data-id=${id}>${scriptStr}</script>`}

package/src/components/inlined-styles.svelte

@@ -1,13 +1,13 @@
 <script context="module" lang="ts">
   interface Props {
     styles: string;
-    id?: string;
+    id: string;
   }
 </script>
 
 <script lang="ts">
   export let styles: Props["styles"];
-  export let id: Props["id"] = undefined;
+  export let id: Props["id"];
 </script>
 
-{@html `<${"style"}  id=${id}  >${styles}<${"/style"}>`}
+{@html `<${"style"}  data-id=${id}  >${styles}<${"/style"}>`}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.15"
+export const SDK_VERSION = "1.0.17"