@builder.io/sdk-qwik 0.0.24 → 0.0.26

package/README.md

@@ -35,11 +35,12 @@ import { useLocation } from "@builder.io/qwik-city";
 import { getContent, RenderContent, getBuilderSearchParams } from "@builder.io/sdk-qwik";
 
 export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY_GOES_HERE"; // ggignore
+export const BUILDER_MODEL = "page";
 export default component$(() => {
   const location = useLocation();
   const builderContentRsrc = useResource$<any>(() => {
     return getContent({
-      model: "page",
+      model: BUILDER_MODEL,
       apiKey: BUILDER_PUBLIC_API_KEY,
       options: getBuilderSearchParams(location.query),
       userAttributes: {
@@ -50,11 +51,11 @@ export default component$(() => {
 
   return (
     <Resource
-      resource={builderContentRsrc}
+      value={builderContentRsrc}
       onPending={() => <div>Loading...</div>}
       onResolved={(content) => (
         <RenderContent
-          model="page"
+          model={BUILDER_MODEL}
           content={content}
           apiKey={BUILDER_PUBLIC_API_KEY}
         />

package/lib/index.qwik.cjs

@@ -527,15 +527,27 @@ const RenderBlock = (props) => {
   };
   state.tagName = tagName2(props);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: shouldWrap(props) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [
-        repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
+        isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxRuntime.jsx(state.tagName, {
+          ...attributes(props)
+        }) : null,
+        !isEmptyHtmlElement(tagName2(props)) && TARGET === "vue2" && repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "vue2-root-element-workaround",
+          children: (repeatItemData(props) || []).map(function(data, index) {
+            return /* @__PURE__ */ jsxRuntime.jsx(RenderRepeatedBlock$1, {
+              repeatContext: data.context,
+              block: data.block
+            }, index);
+          })
+        }) : null,
+        !isEmptyHtmlElement(tagName2(props)) && TARGET !== "vue2" && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
           return /* @__PURE__ */ jsxRuntime.jsx(RenderRepeatedBlock$1, {
             repeatContext: data.context,
             block: data.block
           }, index);
         }) : null,
-        !repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsxs(state.tagName, {
+        !isEmptyHtmlElement(tagName2(props)) && !repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsxs(state.tagName, {
           ...attributes(props),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
@@ -556,8 +568,6 @@ const RenderBlock = (props) => {
           ]
         }) : null
       ]
-    }) : /* @__PURE__ */ jsxRuntime.jsx(state.tagName, {
-      ...attributes(props)
     }) : /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
       ...renderComponentProps(props),
       context: props.context
@@ -601,7 +611,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
     style: props.style,
     onClick$: qwik.inlinedQrl((event) => {
       const [builderContext2, props2, state2] = qwik.useLexicalScope();
-      return (event2) => onClick$1(props2);
+      return onClick$1(props2);
     }, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
       builderContext,
       props,
@@ -609,7 +619,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
     ]),
     onMouseEnter$: qwik.inlinedQrl((event) => {
       const [builderContext2, props2, state2] = qwik.useLexicalScope();
-      return (event2) => onMouseEnter(props2);
+      return onMouseEnter(props2);
     }, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
       builderContext,
       props,
@@ -1908,117 +1918,13 @@ async function getFetch() {
     throw new Error("`fetch()` not found, ensure you have it as part of your polyfills.");
   return globalFetch.default || globalFetch;
 }
-const handleABTesting = (item, testGroups) => {
-  if (item.variations && Object.keys(item.variations).length) {
-    const testGroup = item.id ? testGroups[item.id] : void 0;
-    const variationValue = testGroup ? item.variations[testGroup] : void 0;
-    if (testGroup && variationValue) {
-      item.data = variationValue.data;
-      item.testVariationId = variationValue.id;
-      item.testVariationName = variationValue.name;
-    } else {
-      let n = 0;
-      const random = Math.random();
-      let set2 = false;
-      for (const id in item.variations) {
-        const variation = item.variations[id];
-        const testRatio = variation.testRatio;
-        n += testRatio;
-        if (random < n) {
-          const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
-          set2 = true;
-          Object.assign(item, {
-            data: variation.data,
-            testVariationId: variation.id,
-            testVariationName: variationName
-          });
-        }
-      }
-      if (!set2)
-        Object.assign(item, {
-          testVariationId: item.id,
-          testVariationName: "Default"
-        });
-    }
-  }
-};
-async function getContent(options) {
-  return (await getAllContent({
-    ...options,
-    limit: 1
-  })).results[0] || null;
-}
-const generateContentUrl = (options) => {
-  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey } = options;
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
-  const queryOptions = {
-    ...getBuilderSearchParamsFromWindow(),
-    ...normalizeSearchParams(options.options || {})
-  };
-  const flattened = flatten(queryOptions);
-  for (const key in flattened)
-    url.searchParams.set(key, String(flattened[key]));
-  if (userAttributes)
-    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
-  if (query) {
-    const flattened1 = flatten({
-      query
-    });
-    for (const key1 in flattened1)
-      url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
-  }
-  return url;
-};
-async function getAllContent(options) {
-  const url = generateContentUrl(options);
-  const fetch2 = await getFetch();
-  const content = await fetch2(url.href).then((res) => res.json());
-  if (options.testGroups)
-    for (const item of content.results)
-      handleABTesting(item, options.testGroups);
-  return content;
-}
-function isPreviewing() {
-  if (!isBrowser())
-    return false;
-  if (isEditing())
-    return false;
-  return Boolean(location.search.indexOf("builder.preview=") !== -1);
-}
-const components = [];
-function registerComponent(component3, info) {
-  components.push({
-    component: component3,
-    ...info
-  });
-  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
-  return component3;
-}
-const createRegisterComponentMessage = ({ component: _, ...info }) => ({
-  type: "builder.registerComponent",
-  data: prepareComponentInfoToSend(info)
-});
-const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
-const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-const serializeFn = (fnValue) => {
-  const fnStr = fnValue.toString().trim();
-  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
-  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
-};
-const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
-  ...fastClone(info),
-  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), {}))
-});
 const getTopLevelDomain = (host) => {
   const parts = host.split(".");
   if (parts.length > 2)
     return parts.slice(1).join(".");
   return host;
 };
-const getCookie = ({ name, canTrack }) => {
+const getCookie = async ({ name, canTrack }) => {
   try {
     if (!canTrack)
       return void 0;
@@ -2070,7 +1976,7 @@ const createCookieString = ({ name, value, expires }) => {
   const cookie = stringifyCookie(cookieValue);
   return cookie;
 };
-const setCookie = ({ name, value, expires, canTrack }) => {
+const setCookie = async ({ name, value, expires, canTrack }) => {
   try {
     if (!canTrack)
       return void 0;
@@ -2084,7 +1990,156 @@ const setCookie = ({ name, value, expires, canTrack }) => {
     console.warn("[COOKIE] SET error: ", err);
   }
 };
+const BUILDER_STORE_PREFIX = "builderio.variations";
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
+const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
+  name: getContentTestKey(contentId),
+  canTrack
+});
+const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
+  name: getContentTestKey(contentId),
+  value,
+  canTrack
+});
 const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
+const getRandomVariationId = ({ id, variations }) => {
+  let n = 0;
+  const random = Math.random();
+  for (const id1 in variations) {
+    const testRatio = variations[id1]?.testRatio;
+    n += testRatio;
+    if (random < n)
+      return id1;
+  }
+  return id;
+};
+const getTestFields = ({ item, testGroupId }) => {
+  const variationValue = item.variations[testGroupId];
+  if (testGroupId === item.id || !variationValue)
+    return {
+      testVariationId: item.id,
+      testVariationName: "Default"
+    };
+  else
+    return {
+      data: variationValue.data,
+      testVariationId: variationValue.id,
+      testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
+    };
+};
+const getContentVariation = async ({ item, canTrack }) => {
+  const testGroupId = await getContentVariationCookie({
+    canTrack,
+    contentId: item.id
+  });
+  const testFields = testGroupId ? getTestFields({
+    item,
+    testGroupId
+  }) : void 0;
+  if (testFields)
+    return testFields;
+  else {
+    const randomVariationId = getRandomVariationId({
+      variations: item.variations,
+      id: item.id
+    });
+    setContentVariationCookie({
+      contentId: item.id,
+      value: randomVariationId,
+      canTrack
+    }).catch((err) => {
+      console.error("could not store A/B test variation: ", err);
+    });
+    return getTestFields({
+      item,
+      testGroupId: randomVariationId
+    });
+  }
+};
+const handleABTesting = async ({ item, canTrack }) => {
+  if (!checkIsBuilderContentWithVariations(item))
+    return;
+  const variationValue = await getContentVariation({
+    item,
+    canTrack
+  });
+  Object.assign(item, variationValue);
+};
+async function getContent(options) {
+  return (await getAllContent({
+    ...options,
+    limit: 1
+  })).results[0] || null;
+}
+const generateContentUrl = (options) => {
+  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey } = options;
+  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
+  const queryOptions = {
+    ...getBuilderSearchParamsFromWindow(),
+    ...normalizeSearchParams(options.options || {})
+  };
+  const flattened = flatten(queryOptions);
+  for (const key in flattened)
+    url.searchParams.set(key, String(flattened[key]));
+  if (userAttributes)
+    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
+  if (query) {
+    const flattened1 = flatten({
+      query
+    });
+    for (const key1 in flattened1)
+      url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
+  }
+  return url;
+};
+async function getAllContent(options) {
+  const url = generateContentUrl(options);
+  const fetch2 = await getFetch();
+  const content = await fetch2(url.href).then((res) => res.json());
+  const canTrack = options.canTrack !== false;
+  if (canTrack)
+    for (const item of content.results)
+      await handleABTesting({
+        item,
+        canTrack
+      });
+  return content;
+}
+function isPreviewing() {
+  if (!isBrowser())
+    return false;
+  if (isEditing())
+    return false;
+  return Boolean(location.search.indexOf("builder.preview=") !== -1);
+}
+const components = [];
+function registerComponent(component3, info) {
+  components.push({
+    component: component3,
+    ...info
+  });
+  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
+  return component3;
+}
+const createRegisterComponentMessage = ({ component: _, ...info }) => ({
+  type: "builder.registerComponent",
+  data: prepareComponentInfoToSend(info)
+});
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
+const serializeFn = (fnValue) => {
+  const fnStr = fnValue.toString().trim();
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
+const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
+  ...fastClone(info),
+  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
+    ...acc,
+    [key]: serializeValue(value)
+  }), {}))
+});
 function uuidv4() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
     const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
@@ -2095,10 +2150,10 @@ function uuid() {
   return uuidv4().replace(/-/g, "");
 }
 const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
-const getSessionId = ({ canTrack }) => {
+const getSessionId = async ({ canTrack }) => {
   if (!canTrack)
     return void 0;
-  const sessionId = getCookie({
+  const sessionId = await getCookie({
     name: SESSION_LOCAL_STORAGE_KEY,
     canTrack
   });
@@ -2160,13 +2215,13 @@ const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
   value: id,
   canTrack
 });
-const getTrackingEventData = ({ canTrack }) => {
+const getTrackingEventData = async ({ canTrack }) => {
   if (!canTrack)
     return {
       visitorId: void 0,
       sessionId: void 0
     };
-  const sessionId = getSessionId({
+  const sessionId = await getSessionId({
     canTrack
   });
   const visitorId = getVisitorId({
@@ -2177,11 +2232,11 @@ const getTrackingEventData = ({ canTrack }) => {
     visitorId
   };
 };
-const createEvent = ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
+const createEvent = async ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
   type: eventType,
   data: {
     ...properties,
-    ...getTrackingEventData({
+    ...await getTrackingEventData({
       canTrack
     }),
     ownerId: orgId,
@@ -2199,7 +2254,7 @@ async function track(eventProps) {
     method: "POST",
     body: JSON.stringify({
       events: [
-        createEvent(eventProps)
+        await createEvent(eventProps)
       ]
     }),
     headers: {
@@ -2411,7 +2466,6 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     if (isBrowser()) {
       if (isEditing()) {
         state2.forceReRenderCount = state2.forceReRenderCount + 1;
-        elementRef2.current && qwik._useMutableProps(elementRef2.current, true);
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents(props2)).forEach((registeredComponent) => {
@@ -2494,7 +2548,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
       ref: elementRef,
       onClick$: qwik.inlinedQrl((event) => {
         const [elementRef2, props2, state2] = qwik.useLexicalScope();
-        return (event2) => onClick2(props2, state2);
+        return onClick2(props2, state2);
       }, "RenderContent_component__Fragment_div_onClick_wLg5o3ZkpC0", [
         elementRef,
         props,

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { createContext, inlinedQrl, useLexicalScope, mutable, componentQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, Slot, useRef, useWatchQrl, useClientEffectQrl, _useMutableProps, useCleanupQrl } from "@builder.io/qwik";
+import { createContext, inlinedQrl, useLexicalScope, mutable, componentQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, Slot, useRef, useWatchQrl, useClientEffectQrl, useCleanupQrl } from "@builder.io/qwik";
 import { jsx, Fragment as Fragment$1, jsxs } from "@builder.io/qwik/jsx-runtime";
 const TARGET = "qwik";
 function isBrowser() {
@@ -525,15 +525,27 @@ const RenderBlock = (props) => {
   };
   state.tagName = tagName2(props);
   return /* @__PURE__ */ jsx(Fragment$1, {
-    children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxs(Fragment$1, {
+    children: shouldWrap(props) ? /* @__PURE__ */ jsxs(Fragment$1, {
       children: [
-        repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
+        isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsx(state.tagName, {
+          ...attributes(props)
+        }) : null,
+        !isEmptyHtmlElement(tagName2(props)) && TARGET === "vue2" && repeatItemData(props) ? /* @__PURE__ */ jsx("div", {
+          class: "vue2-root-element-workaround",
+          children: (repeatItemData(props) || []).map(function(data, index) {
+            return /* @__PURE__ */ jsx(RenderRepeatedBlock$1, {
+              repeatContext: data.context,
+              block: data.block
+            }, index);
+          })
+        }) : null,
+        !isEmptyHtmlElement(tagName2(props)) && TARGET !== "vue2" && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
           return /* @__PURE__ */ jsx(RenderRepeatedBlock$1, {
             repeatContext: data.context,
             block: data.block
           }, index);
         }) : null,
-        !repeatItemData(props) ? /* @__PURE__ */ jsxs(state.tagName, {
+        !isEmptyHtmlElement(tagName2(props)) && !repeatItemData(props) ? /* @__PURE__ */ jsxs(state.tagName, {
           ...attributes(props),
           children: [
             /* @__PURE__ */ jsx(RenderComponent$1, {
@@ -554,8 +566,6 @@ const RenderBlock = (props) => {
           ]
         }) : null
       ]
-    }) : /* @__PURE__ */ jsx(state.tagName, {
-      ...attributes(props)
     }) : /* @__PURE__ */ jsx(RenderComponent$1, {
       ...renderComponentProps(props),
       context: props.context
@@ -599,7 +609,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     style: props.style,
     onClick$: inlinedQrl((event) => {
       const [builderContext2, props2, state2] = useLexicalScope();
-      return (event2) => onClick$1(props2);
+      return onClick$1(props2);
     }, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
       builderContext,
       props,
@@ -607,7 +617,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     ]),
     onMouseEnter$: inlinedQrl((event) => {
       const [builderContext2, props2, state2] = useLexicalScope();
-      return (event2) => onMouseEnter(props2);
+      return onMouseEnter(props2);
     }, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
       builderContext,
       props,
@@ -1906,117 +1916,13 @@ async function getFetch() {
     throw new Error("`fetch()` not found, ensure you have it as part of your polyfills.");
   return globalFetch.default || globalFetch;
 }
-const handleABTesting = (item, testGroups) => {
-  if (item.variations && Object.keys(item.variations).length) {
-    const testGroup = item.id ? testGroups[item.id] : void 0;
-    const variationValue = testGroup ? item.variations[testGroup] : void 0;
-    if (testGroup && variationValue) {
-      item.data = variationValue.data;
-      item.testVariationId = variationValue.id;
-      item.testVariationName = variationValue.name;
-    } else {
-      let n = 0;
-      const random = Math.random();
-      let set2 = false;
-      for (const id in item.variations) {
-        const variation = item.variations[id];
-        const testRatio = variation.testRatio;
-        n += testRatio;
-        if (random < n) {
-          const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
-          set2 = true;
-          Object.assign(item, {
-            data: variation.data,
-            testVariationId: variation.id,
-            testVariationName: variationName
-          });
-        }
-      }
-      if (!set2)
-        Object.assign(item, {
-          testVariationId: item.id,
-          testVariationName: "Default"
-        });
-    }
-  }
-};
-async function getContent(options) {
-  return (await getAllContent({
-    ...options,
-    limit: 1
-  })).results[0] || null;
-}
-const generateContentUrl = (options) => {
-  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey } = options;
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
-  const queryOptions = {
-    ...getBuilderSearchParamsFromWindow(),
-    ...normalizeSearchParams(options.options || {})
-  };
-  const flattened = flatten(queryOptions);
-  for (const key in flattened)
-    url.searchParams.set(key, String(flattened[key]));
-  if (userAttributes)
-    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
-  if (query) {
-    const flattened1 = flatten({
-      query
-    });
-    for (const key1 in flattened1)
-      url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
-  }
-  return url;
-};
-async function getAllContent(options) {
-  const url = generateContentUrl(options);
-  const fetch2 = await getFetch();
-  const content = await fetch2(url.href).then((res) => res.json());
-  if (options.testGroups)
-    for (const item of content.results)
-      handleABTesting(item, options.testGroups);
-  return content;
-}
-function isPreviewing() {
-  if (!isBrowser())
-    return false;
-  if (isEditing())
-    return false;
-  return Boolean(location.search.indexOf("builder.preview=") !== -1);
-}
-const components = [];
-function registerComponent(component3, info) {
-  components.push({
-    component: component3,
-    ...info
-  });
-  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
-  return component3;
-}
-const createRegisterComponentMessage = ({ component: _, ...info }) => ({
-  type: "builder.registerComponent",
-  data: prepareComponentInfoToSend(info)
-});
-const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
-const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-const serializeFn = (fnValue) => {
-  const fnStr = fnValue.toString().trim();
-  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
-  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
-};
-const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
-  ...fastClone(info),
-  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), {}))
-});
 const getTopLevelDomain = (host) => {
   const parts = host.split(".");
   if (parts.length > 2)
     return parts.slice(1).join(".");
   return host;
 };
-const getCookie = ({ name, canTrack }) => {
+const getCookie = async ({ name, canTrack }) => {
   try {
     if (!canTrack)
       return void 0;
@@ -2068,7 +1974,7 @@ const createCookieString = ({ name, value, expires }) => {
   const cookie = stringifyCookie(cookieValue);
   return cookie;
 };
-const setCookie = ({ name, value, expires, canTrack }) => {
+const setCookie = async ({ name, value, expires, canTrack }) => {
   try {
     if (!canTrack)
       return void 0;
@@ -2082,7 +1988,156 @@ const setCookie = ({ name, value, expires, canTrack }) => {
     console.warn("[COOKIE] SET error: ", err);
   }
 };
+const BUILDER_STORE_PREFIX = "builderio.variations";
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
+const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
+  name: getContentTestKey(contentId),
+  canTrack
+});
+const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
+  name: getContentTestKey(contentId),
+  value,
+  canTrack
+});
 const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
+const getRandomVariationId = ({ id, variations }) => {
+  let n = 0;
+  const random = Math.random();
+  for (const id1 in variations) {
+    const testRatio = variations[id1]?.testRatio;
+    n += testRatio;
+    if (random < n)
+      return id1;
+  }
+  return id;
+};
+const getTestFields = ({ item, testGroupId }) => {
+  const variationValue = item.variations[testGroupId];
+  if (testGroupId === item.id || !variationValue)
+    return {
+      testVariationId: item.id,
+      testVariationName: "Default"
+    };
+  else
+    return {
+      data: variationValue.data,
+      testVariationId: variationValue.id,
+      testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
+    };
+};
+const getContentVariation = async ({ item, canTrack }) => {
+  const testGroupId = await getContentVariationCookie({
+    canTrack,
+    contentId: item.id
+  });
+  const testFields = testGroupId ? getTestFields({
+    item,
+    testGroupId
+  }) : void 0;
+  if (testFields)
+    return testFields;
+  else {
+    const randomVariationId = getRandomVariationId({
+      variations: item.variations,
+      id: item.id
+    });
+    setContentVariationCookie({
+      contentId: item.id,
+      value: randomVariationId,
+      canTrack
+    }).catch((err) => {
+      console.error("could not store A/B test variation: ", err);
+    });
+    return getTestFields({
+      item,
+      testGroupId: randomVariationId
+    });
+  }
+};
+const handleABTesting = async ({ item, canTrack }) => {
+  if (!checkIsBuilderContentWithVariations(item))
+    return;
+  const variationValue = await getContentVariation({
+    item,
+    canTrack
+  });
+  Object.assign(item, variationValue);
+};
+async function getContent(options) {
+  return (await getAllContent({
+    ...options,
+    limit: 1
+  })).results[0] || null;
+}
+const generateContentUrl = (options) => {
+  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey } = options;
+  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
+  const queryOptions = {
+    ...getBuilderSearchParamsFromWindow(),
+    ...normalizeSearchParams(options.options || {})
+  };
+  const flattened = flatten(queryOptions);
+  for (const key in flattened)
+    url.searchParams.set(key, String(flattened[key]));
+  if (userAttributes)
+    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
+  if (query) {
+    const flattened1 = flatten({
+      query
+    });
+    for (const key1 in flattened1)
+      url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
+  }
+  return url;
+};
+async function getAllContent(options) {
+  const url = generateContentUrl(options);
+  const fetch2 = await getFetch();
+  const content = await fetch2(url.href).then((res) => res.json());
+  const canTrack = options.canTrack !== false;
+  if (canTrack)
+    for (const item of content.results)
+      await handleABTesting({
+        item,
+        canTrack
+      });
+  return content;
+}
+function isPreviewing() {
+  if (!isBrowser())
+    return false;
+  if (isEditing())
+    return false;
+  return Boolean(location.search.indexOf("builder.preview=") !== -1);
+}
+const components = [];
+function registerComponent(component3, info) {
+  components.push({
+    component: component3,
+    ...info
+  });
+  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
+  return component3;
+}
+const createRegisterComponentMessage = ({ component: _, ...info }) => ({
+  type: "builder.registerComponent",
+  data: prepareComponentInfoToSend(info)
+});
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
+const serializeFn = (fnValue) => {
+  const fnStr = fnValue.toString().trim();
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
+const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
+  ...fastClone(info),
+  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
+    ...acc,
+    [key]: serializeValue(value)
+  }), {}))
+});
 function uuidv4() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
     const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
@@ -2093,10 +2148,10 @@ function uuid() {
   return uuidv4().replace(/-/g, "");
 }
 const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
-const getSessionId = ({ canTrack }) => {
+const getSessionId = async ({ canTrack }) => {
   if (!canTrack)
     return void 0;
-  const sessionId = getCookie({
+  const sessionId = await getCookie({
     name: SESSION_LOCAL_STORAGE_KEY,
     canTrack
   });
@@ -2158,13 +2213,13 @@ const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
   value: id,
   canTrack
 });
-const getTrackingEventData = ({ canTrack }) => {
+const getTrackingEventData = async ({ canTrack }) => {
   if (!canTrack)
     return {
       visitorId: void 0,
       sessionId: void 0
     };
-  const sessionId = getSessionId({
+  const sessionId = await getSessionId({
     canTrack
   });
   const visitorId = getVisitorId({
@@ -2175,11 +2230,11 @@ const getTrackingEventData = ({ canTrack }) => {
     visitorId
   };
 };
-const createEvent = ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
+const createEvent = async ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
   type: eventType,
   data: {
     ...properties,
-    ...getTrackingEventData({
+    ...await getTrackingEventData({
       canTrack
     }),
     ownerId: orgId,
@@ -2197,7 +2252,7 @@ async function track(eventProps) {
     method: "POST",
     body: JSON.stringify({
       events: [
-        createEvent(eventProps)
+        await createEvent(eventProps)
       ]
     }),
     headers: {
@@ -2409,7 +2464,6 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     if (isBrowser()) {
       if (isEditing()) {
         state2.forceReRenderCount = state2.forceReRenderCount + 1;
-        elementRef2.current && _useMutableProps(elementRef2.current, true);
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents(props2)).forEach((registeredComponent) => {
@@ -2492,7 +2546,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       ref: elementRef,
       onClick$: inlinedQrl((event) => {
         const [elementRef2, props2, state2] = useLexicalScope();
-        return (event2) => onClick2(props2, state2);
+        return onClick2(props2, state2);
       }, "RenderContent_component__Fragment_div_onClick_wLg5o3ZkpC0", [
         elementRef,
         props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",

package/types/blocks/columns/columns.d.ts

@@ -1,5 +1,4 @@
-import { BuilderBlock } from "../../types/builder-block";
-import { JSX } from "@builder.io/mitosis/jsx-runtime";
+import type { BuilderBlock } from "../../types/builder-block";
 declare type Column = {
     blocks: any;
     width?: number;
@@ -16,7 +15,7 @@ export declare const getGutterSize: (props: any, state: any) => any;
 export declare const getColumns: (props: any, state: any) => any;
 export declare const getWidth: (props: any, state: any, index: number) => any;
 export declare const getColumnCssWidth: (props: any, state: any, index: number) => string;
-export declare const maybeApplyForTablet: (props: any, state: any, prop: JSX.CSS["flexDirection"]) => string | undefined;
+export declare const maybeApplyForTablet: (props: any, state: any, prop: string | undefined) => string | undefined;
 export declare const columnsCssVars: (props: any, state: any) => {
     "--flex-dir": string;
     "--flex-dir-tablet": string | undefined;

package/types/blocks/image/image.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from "@builder.io/mitosis/jsx-runtime";
+/// <reference types="react" />
 import type { BuilderBlock } from "../../types/builder-block.js";
 export interface ImageProps {
     className?: string;

package/types/blocks/symbol/symbol.d.ts

@@ -1,5 +1,5 @@
-import { BuilderBlock } from "../../types/builder-block.js";
-import { BuilderContent } from "../../types/builder-content.js";
+import type { BuilderContent } from "../../types/builder-content.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 export interface SymbolInfo {
     model?: string;
     entry?: string;

package/types/components/render-block/block-styles.d.ts

@@ -1,5 +1,5 @@
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 export declare type BlockStylesProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;

package/types/components/render-block/render-block.d.ts

@@ -1,6 +1,6 @@
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block.js";
-import { RepeatData } from "./types.js";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { RepeatData } from "./types.js";
 export declare type RenderBlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;

package/types/components/render-block/render-component.d.ts

@@ -1,5 +1,5 @@
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../context/types.js";
 export interface RenderComponentProps {
     componentRef: any;
     componentOptions: any;

package/types/components/render-block/types.d.ts

@@ -1,5 +1,5 @@
-import { BuilderContextInterface } from '../../context/types.js';
-import { BuilderBlock } from '../../types/builder-block.js';
+import type { BuilderContextInterface } from '../../context/types.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
 export interface RepeatData {
     block: BuilderBlock;
     context: BuilderContextInterface;

package/types/components/render-blocks.d.ts

@@ -1,4 +1,4 @@
-import { BuilderBlock } from "../types/builder-block.js";
+import type { BuilderBlock } from "../types/builder-block.js";
 export declare type RenderBlockProps = {
     blocks?: BuilderBlock[];
     parent?: string;

package/types/components/render-content/render-content.d.ts

@@ -1,5 +1,5 @@
-import { BuilderRenderContext, RegisteredComponent } from "../../context/types.js";
-import { BuilderContent } from "../../types/builder-content.js";
+import type { BuilderRenderContext, RegisteredComponent } from "../../context/types.js";
+import type { BuilderContent } from "../../types/builder-content.js";
 import type { Nullable } from "../../types/typescript.js";
 export declare type RenderContentProps = {
     content?: Nullable<BuilderContent>;

package/types/context/types.d.ts

@@ -1,6 +1,6 @@
-import { BuilderContent } from '../types/builder-content.js';
-import { ComponentInfo } from '../types/components.js';
-import { Dictionary, Nullable } from '../types/typescript.js';
+import type { BuilderContent } from '../types/builder-content.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Dictionary, Nullable } from '../types/typescript.js';
 export declare type RegisteredComponent = ComponentInfo & {
     component: any;
 };

package/types/functions/get-block-actions-handler.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderContextInterface } from '../context/types.js';
-import { BuilderBlock } from '../types/builder-block.js';
+import type { BuilderBlock } from '../types/builder-block.js';
 export declare function crateEventHandler(value: string, options: {
     block: BuilderBlock;
 } & Pick<BuilderContextInterface, 'state' | 'context'>): (event: Event) => any;

package/types/functions/get-block-actions.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderContextInterface } from '../context/types.js';
-import { BuilderBlock } from '../types/builder-block.js';
+import type { BuilderBlock } from '../types/builder-block.js';
 declare type Actions = {
     [index: string]: (event: Event) => any;
 };

package/types/functions/get-block-component-options.d.ts

@@ -1,2 +1,2 @@
-import { BuilderBlock } from '../types/builder-block.js';
+import type { BuilderBlock } from '../types/builder-block.js';
 export declare function getBlockComponentOptions(block: BuilderBlock): any;

package/types/functions/get-block-properties.d.ts

@@ -1,4 +1,4 @@
-import { BuilderBlock } from '../types/builder-block.js';
+import type { BuilderBlock } from '../types/builder-block.js';
 export declare function getBlockProperties(block: BuilderBlock): {
     'builder-id': string | undefined;
     class: string;

package/types/functions/get-block-styles.d.ts

@@ -1,2 +1,2 @@
-import { BuilderBlock } from '../types/builder-block.js';
+import type { BuilderBlock } from '../types/builder-block.js';
 export declare function getBlockStyles(block: BuilderBlock): Partial<CSSStyleDeclaration>;

package/types/functions/get-block-tag.d.ts

@@ -1,3 +1,3 @@
-import { BuilderBlock } from '../types/builder-block.js';
+import type { BuilderBlock } from '../types/builder-block.js';
 export declare type TagName = string;
 export declare function getBlockTag(block: BuilderBlock): TagName;

package/types/functions/get-content/ab-testing.d.ts

@@ -1,3 +1,5 @@
-import { GetContentOptions } from './types.js';
-import { BuilderContent } from '../../types/builder-content.js';
-export declare const handleABTesting: (item: BuilderContent, testGroups: NonNullable<GetContentOptions['testGroups']>) => void;
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { CanTrack } from '../../types/can-track.js';
+export declare const handleABTesting: ({ item, canTrack, }: {
+    item: BuilderContent;
+} & CanTrack) => Promise<void>;

package/types/functions/get-content/index.d.ts

@@ -1,4 +1,4 @@
-import { BuilderContent } from '../../types/builder-content.js';
+import type { BuilderContent } from '../../types/builder-content.js';
 export declare type GetContentOptions = import('./types.js').GetContentOptions;
 export declare function getContent(options: GetContentOptions): Promise<BuilderContent | null>;
 export declare const generateContentUrl: (options: GetContentOptions) => URL;

package/types/functions/get-content/types.d.ts

@@ -3,8 +3,6 @@ export interface GetContentOptions {
     model: string;
     /** Your public API key */
     apiKey: string;
-    /** A/B test groups the current visitor is in. Key is the content ID, value is the variation ID */
-    testGroups?: Record<string, string> | null;
     /** Number of items to fetch. Default is 1 */
     limit?: number;
     /** User attributes to target on, such as { urlPath: '/foo', device: 'mobile', ...etc } */
@@ -23,4 +21,11 @@ export interface GetContentOptions {
      * If set to `false`, it will render the entire content tree eagerly.
      */
     noTraverse?: boolean;
+    /**
+     * If set to `false`, it will not use cookies to target content. Therefore, A/B Testing will be disabled and
+     * only the default variation will be returned to every user.
+     *
+     * Defaults to `true`.
+     */
+    canTrack?: boolean;
 }

package/types/functions/get-processed-block.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderContextInterface } from '../context/types.js';
-import { BuilderBlock } from '../types/builder-block.js';
+import type { BuilderBlock } from '../types/builder-block.js';
 export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }: {
     block: BuilderBlock;
     /**

package/types/functions/register-component.d.ts

@@ -1,4 +1,4 @@
-import { RegisteredComponent } from '../context/types.js';
+import type { RegisteredComponent } from '../context/types.js';
 import type { ComponentInfo } from '../types/components.js';
 /**
  * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.

package/types/functions/register.d.ts

@@ -1,5 +1,5 @@
-import { BuilderBlock } from '../types/builder-block.js';
-import { DeepPartial } from '../types/deep-partial.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import type { DeepPartial } from '../types/deep-partial.js';
 export interface InsertMenuItem {
     name: string;
     icon?: string;

package/types/functions/track.d.ts

@@ -1,4 +1,4 @@
-import { CanTrack } from '../types/can-track.js';
+import type { CanTrack } from '../types/can-track.js';
 interface Event {
     type: 'click' | 'impression';
     data: {

package/types/functions/transform-block.d.ts

@@ -1,2 +1,2 @@
-import { BuilderBlock } from '../types/builder-block.js';
+import type { BuilderBlock } from '../types/builder-block.js';
 export declare function transformBlock(block: BuilderBlock): BuilderBlock;

package/types/helpers/ab-tests.d.ts

@@ -0,0 +1,8 @@
+import type { CanTrack } from '../types/can-track.js';
+export declare const getContentVariationCookie: ({ contentId, canTrack, }: {
+    contentId: string;
+} & CanTrack) => Promise<string | undefined>;
+export declare const setContentVariationCookie: ({ contentId, canTrack, value, }: {
+    contentId: string;
+    value: string;
+} & CanTrack) => Promise<undefined>;

package/types/helpers/cookie.d.ts

@@ -1,9 +1,15 @@
-import { CanTrack } from '../types/can-track.js';
+import type { CanTrack } from '../types/can-track.js';
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
 export declare const getCookie: ({ name, canTrack, }: {
     name: string;
-} & CanTrack) => string | undefined;
+} & CanTrack) => Promise<string | undefined>;
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
 export declare const setCookie: ({ name, value, expires, canTrack, }: {
     name: string;
     value: string;
     expires?: Date | undefined;
-} & CanTrack) => undefined;
+} & CanTrack) => Promise<undefined>;

package/types/helpers/localStorage.d.ts

@@ -1,9 +1,8 @@
+import type { CanTrack } from '../types/can-track.js';
 export declare const getLocalStorageItem: ({ key, canTrack, }: {
     key: string;
-    canTrack: boolean;
-}) => string | null | undefined;
+} & CanTrack) => string | null | undefined;
 export declare const setLocalStorageItem: ({ key, canTrack, value, }: {
     key: string;
     value: string;
-    canTrack: boolean;
-}) => void;
+} & CanTrack) => void;

package/types/helpers/sessionId.d.ts

@@ -1,7 +1,6 @@
-import { CanTrack } from '../types/can-track.js';
-export declare const getSessionId: ({ canTrack }: CanTrack) => string | undefined;
+import type { CanTrack } from '../types/can-track.js';
+export declare const getSessionId: ({ canTrack }: CanTrack) => Promise<string | undefined>;
 export declare const createSessionId: () => string;
 export declare const setSessionId: ({ id, canTrack, }: {
     id: string;
-    canTrack: boolean;
-}) => undefined;
+} & CanTrack) => Promise<undefined>;

package/types/helpers/visitorId.d.ts

@@ -1,8 +1,6 @@
-export declare const getVisitorId: ({ canTrack }: {
-    canTrack: boolean;
-}) => string | undefined;
+import type { CanTrack } from '../types/can-track.js';
+export declare const getVisitorId: ({ canTrack }: CanTrack) => string | undefined;
 export declare const createVisitorId: () => string;
 export declare const setVisitorId: ({ id, canTrack, }: {
     id: string;
-    canTrack: boolean;
-}) => void;
+} & CanTrack) => void;

package/types/types/builder-content.d.ts

@@ -1,4 +1,4 @@
-import { BuilderBlock } from './builder-block.js';
+import type { BuilderBlock } from './builder-block.js';
 declare type Input = any;
 export interface BuilderContentVariation {
     data?: {

package/types/types/typescript.d.ts

@@ -2,3 +2,4 @@ export declare type Nullable<T> = T | null | undefined;
 export declare type Dictionary<T> = {
     [key: string]: T;
 };
+export declare type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;