@builder.io/sdk-solid 1.0.15 → 1.0.17

package/lib/edge/dev.js

@@ -4024,7 +4024,7 @@ function InlinedStyles(props) {
     effect((_p$) => {
       const _v$ = props.styles, _v$2 = props.id;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && setAttribute(_el$, "id", _p$._v$2 = _v$2);
+      _v$2 !== _p$._v$2 && setAttribute(_el$, "data-id", _p$._v$2 = _v$2);
       return _p$;
     }, {
       _v$: void 0,
@@ -4095,6 +4095,7 @@ function BlockStyles(props) {
     },
     get children() {
       return createComponent(inlined_styles_default, {
+        id: "builderio-block",
         get styles() {
           return css5();
         }
@@ -4811,6 +4812,7 @@ function Columns(props) {
       when: TARGET !== "reactNative",
       get children() {
         return createComponent(inlined_styles_default, {
+          id: "builderio-columns",
           get styles() {
             return columnsStyles();
           }
@@ -7082,7 +7084,7 @@ var checkShouldRenderVariants = ({
 };
 var getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 var isHydrationTarget = getIsHydrationTarget(TARGET);
-var getScriptString = () => `
+var getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
   window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;
@@ -7101,9 +7103,9 @@ function InlinedScript(props) {
   return (() => {
     const _el$ = _tmpl$16();
     effect((_p$) => {
-      const _v$ = props.scriptStr, _v$2 = props.id || "";
+      const _v$ = props.scriptStr, _v$2 = props.id;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && setAttribute(_el$, "id", _p$._v$2 = _v$2);
+      _v$2 !== _p$._v$2 && setAttribute(_el$, "data-id", _p$._v$2 = _v$2);
       return _p$;
     }, {
       _v$: void 0,
@@ -7600,7 +7602,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.15";
+var SDK_VERSION = "1.0.17";
 
 // src/functions/register.ts
 var registry = {};
@@ -7801,6 +7803,7 @@ var subscribeToEditor = (model, callback, options) => {
 function EnableEditor(props) {
   const [ContentWrapper, setContentWrapper] = createSignal(props.contentWrapper || "div");
   const [httpReqsData, setHttpReqsData] = createSignal({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal({});
   const [clicked, setClicked] = createSignal(false);
   function mergeNewRootState(newData) {
     const combinedState = {
@@ -7899,41 +7902,34 @@ function EnableEditor(props) {
       setClicked(true);
     }
   }
-  function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
-      code: group,
-      context: props.context || {},
-      localState: void 0,
-      rootState: props.builderContextSignal.rootState,
-      rootSetState: props.builderContextSignal.rootSetState,
-      enableCache: true
-    })));
-  }
-  function handleRequest({
-    url,
-    key
-  }) {
-    fetch2(url).then((response) => response.json()).then((json) => {
-      const newState = {
-        ...props.builderContextSignal.rootState,
-        [key]: json
-      };
-      props.builderContextSignal.rootSetState?.(newState);
-      httpReqsData()[key] = true;
-    }).catch((err) => {
-      console.error("error fetching dynamic data", url, err);
-    });
-  }
   function runHttpRequests() {
     const requests = props.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;
+      if (httpReqsPending()[key])
+        return;
+      if (httpReqsData()[key] && !isEditing())
+        return;
+      httpReqsPending()[key] = true;
+      const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
+        code: group,
+        context: props.context || {},
+        localState: void 0,
+        rootState: props.builderContextSignal.rootState,
+        rootSetState: props.builderContextSignal.rootSetState,
+        enableCache: true
+      })));
+      fetch2(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() {
@@ -8182,6 +8178,7 @@ ${getFontCss({
 ${getDefaultStyles(props.isNestedRender)}
 `.trim());
   return createComponent(inlined_styles_default, {
+    id: "builderio-content",
     get styles() {
       return injectedStyles();
     }
@@ -8335,6 +8332,7 @@ function ContentComponent(props) {
             },
             get children() {
               return createComponent(inlined_script_default, {
+                id: "builderio-variant-visibility",
                 get scriptStr() {
                   return scriptStr();
                 }
@@ -8412,8 +8410,9 @@ function ContentVariants(props) {
     },
     get children() {
       return createComponent(inlined_script_default, {
+        id: "builderio-init-variants-fns",
         get scriptStr() {
-          return getScriptString();
+          return getInitVariantsFnsScriptString();
         }
       });
     }
@@ -8423,13 +8422,12 @@ function ContentVariants(props) {
     },
     get children() {
       return [createComponent(inlined_styles_default, {
-        get id() {
-          return `variants-styles-${props.content?.id}`;
-        },
+        id: "builderio-variants",
         get styles() {
           return hideVariantsStyleString();
         }
       }), createComponent(inlined_script_default, {
+        id: "builderio-variants-visibility",
         get scriptStr() {
           return updateCookieAndStylesScriptStr();
         }

package/lib/edge/dev.jsx

@@ -4012,7 +4012,7 @@ var getSizesForBreakpoints = ({
 
 // src/components/inlined-styles.tsx
 function InlinedStyles(props) {
-  return <style innerHTML={props.styles} id={props.id} />;
+  return <style innerHTML={props.styles} data-id={props.id} />;
 }
 var Inlined_styles_default = InlinedStyles;
 
@@ -4078,7 +4078,7 @@ function BlockStyles(props) {
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   });
-  return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default styles={css5()} /></Show2>;
+  return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css5()} /></Show2>;
 }
 var Block_styles_default = BlockStyles;
 
@@ -4613,7 +4613,10 @@ function Columns(props) {
     style={columnsCssVars()}
     {...{}}
   >
-    <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default styles={columnsStyles()} /></Show6>
+    <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
+      id="builderio-columns"
+      styles={columnsStyles()}
+    /></Show6>
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
       return <Dynamic_renderer_default
@@ -6667,7 +6670,7 @@ var checkShouldRenderVariants = ({
 };
 var getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 var isHydrationTarget = getIsHydrationTarget(TARGET);
-var getScriptString = () => `
+var getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
   window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;
@@ -6684,7 +6687,7 @@ var getUpdateVariantVisibilityScript = ({
 
 // src/components/inlined-script.tsx
 function InlinedScript(props) {
-  return <script innerHTML={props.scriptStr} id={props.id || ""} />;
+  return <script innerHTML={props.scriptStr} data-id={props.id} />;
 }
 var Inlined_script_default = InlinedScript;
 
@@ -7185,7 +7188,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.15";
+var SDK_VERSION = "1.0.17";
 
 // src/functions/register.ts
 var registry = {};
@@ -7388,6 +7391,7 @@ function EnableEditor(props) {
     props.contentWrapper || "div"
   );
   const [httpReqsData, setHttpReqsData] = createSignal12({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal12({});
   const [clicked, setClicked] = createSignal12(false);
   function mergeNewRootState(newData) {
     const combinedState = {
@@ -7483,43 +7487,39 @@ function EnableEditor(props) {
       setClicked(true);
     }
   }
-  function evalExpression(expression) {
-    return expression.replace(
-      /{{([^}]+)}}/g,
-      (_match, group) => String(
-        evaluate({
-          code: group,
-          context: props.context || {},
-          localState: void 0,
-          rootState: props.builderContextSignal.rootState,
-          rootSetState: props.builderContextSignal.rootSetState,
-          enableCache: true
-        })
-      )
-    );
-  }
-  function handleRequest({ url, key }) {
-    fetch2(url).then((response) => response.json()).then((json) => {
-      const newState = {
-        ...props.builderContextSignal.rootState,
-        [key]: json
-      };
-      props.builderContextSignal.rootSetState?.(newState);
-      httpReqsData()[key] = true;
-    }).catch((err) => {
-      console.error("error fetching dynamic data", url, err);
-    });
-  }
   function runHttpRequests() {
     const requests = props.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;
+      if (httpReqsPending()[key])
+        return;
+      if (httpReqsData()[key] && !isEditing())
+        return;
+      httpReqsPending()[key] = true;
+      const evaluatedUrl = url.replace(
+        /{{([^}]+)}}/g,
+        (_match, group) => String(
+          evaluate({
+            code: group,
+            context: props.context || {},
+            localState: void 0,
+            rootState: props.builderContextSignal.rootState,
+            rootSetState: props.builderContextSignal.rootSetState,
+            enableCache: true
+          })
+        )
+      );
+      fetch2(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() {
@@ -7779,7 +7779,10 @@ ${getFontCss({
 ${getDefaultStyles(props.isNestedRender)}
 `.trim()
   );
-  return <Inlined_styles_default styles={injectedStyles()} />;
+  return <Inlined_styles_default
+    id="builderio-content"
+    styles={injectedStyles()}
+  />;
 }
 var Styles_default = ContentStyles;
 
@@ -7902,7 +7905,10 @@ function ContentComponent(props) {
       setBuilderContextSignal
     }}
   >
-    <Show11 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show11>
+    <Show11 when={props.isSsrAbTest}><Inlined_script_default
+      id="builderio-variant-visibility"
+      scriptStr={scriptStr()}
+    /></Show11>
     <Show11 when={TARGET !== "reactNative"}><Styles_default
       isNestedRender={props.isNestedRender}
       contentId={builderContextSignal().content?.id}
@@ -7952,13 +7958,17 @@ function ContentVariants(props) {
     setShouldRenderVariants(false);
   });
   return <>
-    <Show12 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show12>
+    <Show12 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
+      id="builderio-init-variants-fns"
+      scriptStr={getInitVariantsFnsScriptString()}
+    /></Show12>
     <Show12 when={shouldRenderVariants()}>
       <Inlined_styles_default
-        id={`variants-styles-${props.content?.id}`}
+        id="builderio-variants"
         styles={hideVariantsStyleString()}
       />
       <Inlined_script_default
+        id="builderio-variants-visibility"
         scriptStr={updateCookieAndStylesScriptStr()}
       />
       <For7 each={getVariants(props.content)}>{(variant, _index) => {

package/lib/edge/index.js

@@ -4018,7 +4018,7 @@ function InlinedStyles(props) {
     effect((_p$) => {
       const _v$ = props.styles, _v$2 = props.id;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && setAttribute(_el$, "id", _p$._v$2 = _v$2);
+      _v$2 !== _p$._v$2 && setAttribute(_el$, "data-id", _p$._v$2 = _v$2);
       return _p$;
     }, {
       _v$: void 0,
@@ -4089,6 +4089,7 @@ function BlockStyles(props) {
     },
     get children() {
       return createComponent(inlined_styles_default, {
+        id: "builderio-block",
         get styles() {
           return css5();
         }
@@ -4805,6 +4806,7 @@ function Columns(props) {
       when: TARGET !== "reactNative",
       get children() {
         return createComponent(inlined_styles_default, {
+          id: "builderio-columns",
           get styles() {
             return columnsStyles();
           }
@@ -7072,7 +7074,7 @@ var checkShouldRenderVariants = ({
 };
 var getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 var isHydrationTarget = getIsHydrationTarget(TARGET);
-var getScriptString = () => `
+var getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
   window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;
@@ -7091,9 +7093,9 @@ function InlinedScript(props) {
   return (() => {
     const _el$ = _tmpl$16();
     effect((_p$) => {
-      const _v$ = props.scriptStr, _v$2 = props.id || "";
+      const _v$ = props.scriptStr, _v$2 = props.id;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && setAttribute(_el$, "id", _p$._v$2 = _v$2);
+      _v$2 !== _p$._v$2 && setAttribute(_el$, "data-id", _p$._v$2 = _v$2);
       return _p$;
     }, {
       _v$: void 0,
@@ -7585,7 +7587,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.15";
+var SDK_VERSION = "1.0.17";
 
 // src/functions/register.ts
 var registry = {};
@@ -7785,6 +7787,7 @@ var subscribeToEditor = (model, callback, options) => {
 function EnableEditor(props) {
   const [ContentWrapper, setContentWrapper] = createSignal(props.contentWrapper || "div");
   const [httpReqsData, setHttpReqsData] = createSignal({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal({});
   const [clicked, setClicked] = createSignal(false);
   function mergeNewRootState(newData) {
     const combinedState = {
@@ -7883,40 +7886,33 @@ function EnableEditor(props) {
       setClicked(true);
     }
   }
-  function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
-      code: group,
-      context: props.context || {},
-      localState: void 0,
-      rootState: props.builderContextSignal.rootState,
-      rootSetState: props.builderContextSignal.rootSetState,
-      enableCache: true
-    })));
-  }
-  function handleRequest({
-    url,
-    key
-  }) {
-    fetch2(url).then((response) => response.json()).then((json) => {
-      const newState = {
-        ...props.builderContextSignal.rootState,
-        [key]: json
-      };
-      props.builderContextSignal.rootSetState?.(newState);
-      httpReqsData()[key] = true;
-    }).catch((err) => {
-    });
-  }
   function runHttpRequests() {
     const requests = props.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;
+      if (httpReqsPending()[key])
+        return;
+      if (httpReqsData()[key] && !isEditing())
+        return;
+      httpReqsPending()[key] = true;
+      const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
+        code: group,
+        context: props.context || {},
+        localState: void 0,
+        rootState: props.builderContextSignal.rootState,
+        rootSetState: props.builderContextSignal.rootSetState,
+        enableCache: true
+      })));
+      fetch2(evaluatedUrl).then((response) => response.json()).then((json) => {
+        mergeNewRootState({
+          [key]: json
         });
-      }
+        httpReqsData()[key] = true;
+      }).catch((err) => {
+      }).finally(() => {
+        httpReqsPending()[key] = false;
+      });
     });
   }
   function emitStateUpdate() {
@@ -8165,6 +8161,7 @@ ${getFontCss({
 ${getDefaultStyles(props.isNestedRender)}
 `.trim());
   return createComponent(inlined_styles_default, {
+    id: "builderio-content",
     get styles() {
       return injectedStyles();
     }
@@ -8318,6 +8315,7 @@ function ContentComponent(props) {
             },
             get children() {
               return createComponent(inlined_script_default, {
+                id: "builderio-variant-visibility",
                 get scriptStr() {
                   return scriptStr();
                 }
@@ -8395,8 +8393,9 @@ function ContentVariants(props) {
     },
     get children() {
       return createComponent(inlined_script_default, {
+        id: "builderio-init-variants-fns",
         get scriptStr() {
-          return getScriptString();
+          return getInitVariantsFnsScriptString();
         }
       });
     }
@@ -8406,13 +8405,12 @@ function ContentVariants(props) {
     },
     get children() {
       return [createComponent(inlined_styles_default, {
-        get id() {
-          return `variants-styles-${props.content?.id}`;
-        },
+        id: "builderio-variants",
         get styles() {
           return hideVariantsStyleString();
         }
       }), createComponent(inlined_script_default, {
+        id: "builderio-variants-visibility",
         get scriptStr() {
           return updateCookieAndStylesScriptStr();
         }

package/lib/edge/index.jsx

@@ -4006,7 +4006,7 @@ var getSizesForBreakpoints = ({
 
 // src/components/inlined-styles.tsx
 function InlinedStyles(props) {
-  return <style innerHTML={props.styles} id={props.id} />;
+  return <style innerHTML={props.styles} data-id={props.id} />;
 }
 var Inlined_styles_default = InlinedStyles;
 
@@ -4072,7 +4072,7 @@ function BlockStyles(props) {
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   });
-  return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default styles={css5()} /></Show2>;
+  return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css5()} /></Show2>;
 }
 var Block_styles_default = BlockStyles;
 
@@ -4607,7 +4607,10 @@ function Columns(props) {
     style={columnsCssVars()}
     {...{}}
   >
-    <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default styles={columnsStyles()} /></Show6>
+    <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
+      id="builderio-columns"
+      styles={columnsStyles()}
+    /></Show6>
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
       return <Dynamic_renderer_default
@@ -6657,7 +6660,7 @@ var checkShouldRenderVariants = ({
 };
 var getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 var isHydrationTarget = getIsHydrationTarget(TARGET);
-var getScriptString = () => `
+var getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
   window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;
@@ -6674,7 +6677,7 @@ var getUpdateVariantVisibilityScript = ({
 
 // src/components/inlined-script.tsx
 function InlinedScript(props) {
-  return <script innerHTML={props.scriptStr} id={props.id || ""} />;
+  return <script innerHTML={props.scriptStr} data-id={props.id} />;
 }
 var Inlined_script_default = InlinedScript;
 
@@ -7170,7 +7173,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.15";
+var SDK_VERSION = "1.0.17";
 
 // src/functions/register.ts
 var registry = {};
@@ -7372,6 +7375,7 @@ function EnableEditor(props) {
     props.contentWrapper || "div"
   );
   const [httpReqsData, setHttpReqsData] = createSignal12({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal12({});
   const [clicked, setClicked] = createSignal12(false);
   function mergeNewRootState(newData) {
     const combinedState = {
@@ -7467,42 +7471,38 @@ function EnableEditor(props) {
       setClicked(true);
     }
   }
-  function evalExpression(expression) {
-    return expression.replace(
-      /{{([^}]+)}}/g,
-      (_match, group) => String(
-        evaluate({
-          code: group,
-          context: props.context || {},
-          localState: void 0,
-          rootState: props.builderContextSignal.rootState,
-          rootSetState: props.builderContextSignal.rootSetState,
-          enableCache: true
-        })
-      )
-    );
-  }
-  function handleRequest({ url, key }) {
-    fetch2(url).then((response) => response.json()).then((json) => {
-      const newState = {
-        ...props.builderContextSignal.rootState,
-        [key]: json
-      };
-      props.builderContextSignal.rootSetState?.(newState);
-      httpReqsData()[key] = true;
-    }).catch((err) => {
-    });
-  }
   function runHttpRequests() {
     const requests = props.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;
+      if (httpReqsPending()[key])
+        return;
+      if (httpReqsData()[key] && !isEditing())
+        return;
+      httpReqsPending()[key] = true;
+      const evaluatedUrl = url.replace(
+        /{{([^}]+)}}/g,
+        (_match, group) => String(
+          evaluate({
+            code: group,
+            context: props.context || {},
+            localState: void 0,
+            rootState: props.builderContextSignal.rootState,
+            rootSetState: props.builderContextSignal.rootSetState,
+            enableCache: true
+          })
+        )
+      );
+      fetch2(evaluatedUrl).then((response) => response.json()).then((json) => {
+        mergeNewRootState({
+          [key]: json
         });
-      }
+        httpReqsData()[key] = true;
+      }).catch((err) => {
+      }).finally(() => {
+        httpReqsPending()[key] = false;
+      });
     });
   }
   function emitStateUpdate() {
@@ -7762,7 +7762,10 @@ ${getFontCss({
 ${getDefaultStyles(props.isNestedRender)}
 `.trim()
   );
-  return <Inlined_styles_default styles={injectedStyles()} />;
+  return <Inlined_styles_default
+    id="builderio-content"
+    styles={injectedStyles()}
+  />;
 }
 var Styles_default = ContentStyles;
 
@@ -7885,7 +7888,10 @@ function ContentComponent(props) {
       setBuilderContextSignal
     }}
   >
-    <Show11 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show11>
+    <Show11 when={props.isSsrAbTest}><Inlined_script_default
+      id="builderio-variant-visibility"
+      scriptStr={scriptStr()}
+    /></Show11>
     <Show11 when={TARGET !== "reactNative"}><Styles_default
       isNestedRender={props.isNestedRender}
       contentId={builderContextSignal().content?.id}
@@ -7935,13 +7941,17 @@ function ContentVariants(props) {
     setShouldRenderVariants(false);
   });
   return <>
-    <Show12 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show12>
+    <Show12 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
+      id="builderio-init-variants-fns"
+      scriptStr={getInitVariantsFnsScriptString()}
+    /></Show12>
     <Show12 when={shouldRenderVariants()}>
       <Inlined_styles_default
-        id={`variants-styles-${props.content?.id}`}
+        id="builderio-variants"
         styles={hideVariantsStyleString()}
       />
       <Inlined_script_default
+        id="builderio-variants-visibility"
         scriptStr={updateCookieAndStylesScriptStr()}
       />
       <For7 each={getVariants(props.content)}>{(variant, _index) => {