@builder.io/sdk-solid 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+### 0.4.0
+
+- Feature: A/B tests are now rendered correctly during server-side rendering (SSR) when applicable. This behaviour is backwards compatible with previous versions.
+
+### 0.3.1
+
+- Feature: Added SDK version to data sent to visual editor for improved debugging.
+- Fix: Columns block: removed redundant margin-left in first column.
+
+### 0.3.0
+
+- No Changes.
+
 ### 0.2.3
 
 - No Changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",

package/src/components/render-block/render-block.jsx

@@ -25,7 +25,7 @@ function RenderBlock(props) {
     })
   );
 
-  const [tag, setTag] = createSignal(props.block.tagName || "div");
+  const [Tag, setTag] = createSignal(props.block.tagName || "div");
 
   function repeatItem() {
     return getRepeatItemData({
@@ -152,10 +152,10 @@ function RenderBlock(props) {
         }
         when={!component()?.noWrap}
       >
-        <Show when={isEmptyHtmlElement(tag())}>
-          <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
+        <Show when={isEmptyHtmlElement(Tag())}>
+          <Dynamic {...attributes()} {...actions()} component={Tag()}></Dynamic>
         </Show>
-        <Show when={!isEmptyHtmlElement(tag()) && repeatItem()}>
+        <Show when={!isEmptyHtmlElement(Tag()) && repeatItem()}>
           <For each={repeatItem()}>
             {(data, _index) => {
               const index = _index();
@@ -169,8 +169,8 @@ function RenderBlock(props) {
             }}
           </For>
         </Show>
-        <Show when={!isEmptyHtmlElement(tag()) && !repeatItem()}>
-          <Dynamic {...attributes()} {...actions()} component={tag()}>
+        <Show when={!isEmptyHtmlElement(Tag()) && !repeatItem()}>
+          <Dynamic {...attributes()} {...actions()} component={Tag()}>
             <RenderComponent {...renderComponentProps()}></RenderComponent>
             <For each={childrenWithoutParentComponent()}>
               {(child, _index) => {

package/src/components/render-content/components/render-styles.jsx

@@ -5,7 +5,8 @@ import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 
 function RenderContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal(`
+  const [injectedStyles, setInjectedStyles] = createSignal(
+    `
 ${getCss({
   cssCode: props.cssCode,
   contentId: props.contentId,
@@ -26,7 +27,8 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
-`);
+`.trim()
+  );
 
   return <RenderInlinedStyles styles={injectedStyles()}></RenderInlinedStyles>;
 }

package/src/components/render-content/render-content.jsx

@@ -29,6 +29,8 @@ import {
 } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
 import { logger } from "../../helpers/logger.js";
+import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
+import { wrapComponentRef } from "./wrap-component-ref.js";
 
 function RenderContent(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
@@ -60,9 +62,13 @@ function RenderContent(props) {
       ...components,
       ...(props.customComponents || []),
     ].reduce(
-      (acc, curr) => ({
+      (acc, { component, ...curr }) => ({
         ...acc,
-        [curr.name]: curr,
+        [curr.name]: {
+          component:
+            TARGET === "vue3" ? wrapComponentRef(component) : component,
+          ...curr,
+        },
       }),
       {}
     )
@@ -72,6 +78,14 @@ function RenderContent(props) {
 
   const [clicked, setClicked] = createSignal(false);
 
+  const [scriptStr, setScriptStr] = createSignal(
+    getRenderContentScriptString({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      contentId: props.content?.id,
+      parentContentId: props.parentContentId,
+    })
+  );
+
   function mergeNewContent(newContent) {
     setUseContent({
       ...useContent,
@@ -259,6 +273,11 @@ function RenderContent(props) {
                 includeRefs: props.includeRefs,
               }
             : {}),
+          ...(props.enrich
+            ? {
+                enrich: props.enrich,
+              }
+            : {}),
         });
         Object.values(allRegisteredComponents()).forEach(
           (registeredComponent) => {
@@ -365,11 +384,30 @@ function RenderContent(props) {
     >
       <Show when={useContent}>
         <div
+          class={props.classNameProp}
           ref={elementRef}
           onClick={(event) => onClick(event)}
           builder-content-id={useContent?.id}
           builder-model={props.model}
+          {...(TARGET === "reactNative"
+            ? {
+                dataSet: {
+                  // currently, we can't set the actual ID here.
+                  // we don't need it right now, we just need to identify content divs for testing.
+                  "builder-content-id": "",
+                },
+              }
+            : {})}
+          {...(props.hideContent
+            ? {
+                hidden: true,
+                "aria-hidden": true,
+              }
+            : {})}
         >
+          <Show when={props.isSsrAbTest}>
+            <script innerHTML={scriptStr()}></script>
+          </Show>
           <Show when={TARGET !== "reactNative"}>
             <RenderContentStyles
               contentId={useContent?.id}

package/src/components/render-content/wrap-component-ref.js

@@ -0,0 +1,4 @@
+const wrapComponentRef = (component) => component;
+export {
+  wrapComponentRef
+};

package/src/components/render-content-variants/helpers.js

@@ -0,0 +1,139 @@
+import { isBrowser } from "../../functions/is-browser";
+const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+const checkShouldRunVariants = ({
+  canTrack,
+  content
+}) => {
+  const hasVariants = getVariants(content).length > 0;
+  if (!hasVariants) {
+    return false;
+  }
+  if (!canTrack) {
+    return false;
+  }
+  if (isBrowser()) {
+    return false;
+  }
+  return true;
+};
+function bldrAbTest(contentId, variants, isHydrationTarget2) {
+  function getAndSetVariantId() {
+    function setCookie(name, value, days) {
+      let expires = "";
+      if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1e3);
+        expires = "; expires=" + date.toUTCString();
+      }
+      document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=None";
+    }
+    function getCookie(name) {
+      const nameEQ = name + "=";
+      const ca = document.cookie.split(";");
+      for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === " ")
+          c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) === 0)
+          return c.substring(nameEQ.length, c.length);
+      }
+      return null;
+    }
+    const cookieName = `builder.tests.${contentId}`;
+    const variantInCookie = getCookie(cookieName);
+    const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+    if (variantInCookie && availableIDs.includes(variantInCookie)) {
+      return variantInCookie;
+    }
+    let n = 0;
+    const random = Math.random();
+    for (let i = 0; i < variants.length; i++) {
+      const variant = variants[i];
+      const testRatio = variant.testRatio;
+      n += testRatio;
+      if (random < n) {
+        setCookie(cookieName, variant.id);
+        return variant.id;
+      }
+    }
+    setCookie(cookieName, contentId);
+    return contentId;
+  }
+  const winningVariantId = getAndSetVariantId();
+  const styleEl = document.getElementById(`variants-styles-${contentId}`);
+  if (isHydrationTarget2) {
+    styleEl.remove();
+    const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+    thisScriptEl == null ? void 0 : thisScriptEl.remove();
+  } else {
+    const newStyleStr = variants.concat({ id: contentId }).filter((variant) => variant.id !== winningVariantId).map((value) => {
+      return `.variant-${value.id} {  display: none; }
+        `;
+    }).join("");
+    styleEl.innerHTML = newStyleStr;
+  }
+}
+function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+  if (!navigator.cookieEnabled) {
+    return;
+  }
+  function getCookie(name) {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(";");
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === " ")
+        c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) === 0)
+        return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const cookieName = `builder.tests.${defaultContentId}`;
+  const variantId = getCookie(cookieName);
+  const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+  const variantIsDefaultContent = variantContentId === defaultContentId;
+  if (variantId === variantContentId) {
+    if (variantIsDefaultContent) {
+      return;
+    }
+    parentDiv == null ? void 0 : parentDiv.removeAttribute("hidden");
+    parentDiv == null ? void 0 : parentDiv.removeAttribute("aria-hidden");
+  } else {
+    if (variantIsDefaultContent) {
+      if (isHydrationTarget2) {
+        parentDiv == null ? void 0 : parentDiv.remove();
+      } else {
+        parentDiv == null ? void 0 : parentDiv.setAttribute("hidden", "true");
+        parentDiv == null ? void 0 : parentDiv.setAttribute("aria-hidden", "true");
+      }
+    }
+    return;
+  }
+  return;
+}
+const isHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const AB_TEST_FN_NAME = "bldrAbTest";
+const CONTENT_FN_NAME = "bldrCntntScrpt";
+const getVariantsScriptString = (variants, contentId) => {
+  const fnStr = bldrAbTest.toString().replace(/\s+/g, " ");
+  const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, " ");
+  return `
+  const ${AB_TEST_FN_NAME} = ${fnStr}
+  const ${CONTENT_FN_NAME} = ${fnStr2}
+  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  `;
+};
+const getRenderContentScriptString = ({
+  parentContentId,
+  contentId
+}) => {
+  return `
+  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+};
+export {
+  checkShouldRunVariants,
+  getRenderContentScriptString,
+  getVariants,
+  getVariantsScriptString
+};

package/src/components/render-content-variants/render-content-variants.jsx

@@ -0,0 +1,94 @@
+import { Show, For, createSignal } from "solid-js";
+
+import {
+  checkShouldRunVariants,
+  getVariants,
+  getVariantsScriptString,
+} from "./helpers";
+import RenderContent from "../render-content/render-content.jsx";
+import { getDefaultCanTrack } from "../../helpers/canTrack";
+import RenderInlinedStyles from "../render-inlined-styles.jsx";
+import { handleABTestingSync } from "../../helpers/ab-tests";
+
+function RenderContentVariants(props) {
+  const [variantScriptStr, setVariantScriptStr] = createSignal(
+    getVariantsScriptString(
+      getVariants(props.content).map((value) => ({
+        id: value.id,
+        testRatio: value.testRatio,
+      })),
+      props.content?.id || ""
+    )
+  );
+
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal(
+    checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content,
+    })
+  );
+
+  const [hideVariantsStyleString, setHideVariantsStyleString] = createSignal(
+    getVariants(props.content)
+      .map((value) => `.variant-${value.id} { display: none; } `)
+      .join("")
+  );
+
+  const [contentToRender, setContentToRender] = createSignal(
+    checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content,
+    })
+      ? props.content
+      : handleABTestingSync({
+          item: props.content,
+          canTrack: getDefaultCanTrack(props.canTrack),
+        })
+  );
+
+  return (
+    <>
+      <Show when={shouldRenderVariants()}>
+        <RenderInlinedStyles
+          id={`variants-styles-${props.content?.id}`}
+          styles={hideVariantsStyleString()}
+        ></RenderInlinedStyles>
+        <script
+          id={`variants-script-${props.content?.id}`}
+          innerHTML={variantScriptStr()}
+        ></script>
+        <For each={getVariants(props.content)}>
+          {(variant, _index) => {
+            const index = _index();
+            return (
+              <RenderContent
+                key={variant.id}
+                content={variant}
+                apiKey={props.apiKey}
+                apiVersion={props.apiVersion}
+                canTrack={props.canTrack}
+                customComponents={props.customComponents}
+                hideContent={true}
+                parentContentId={props.content?.id}
+                isSsrAbTest={shouldRenderVariants()}
+              ></RenderContent>
+            );
+          }}
+        </For>
+      </Show>
+      <RenderContent
+        model={props.model}
+        content={contentToRender()}
+        apiKey={props.apiKey}
+        apiVersion={props.apiVersion}
+        canTrack={props.canTrack}
+        customComponents={props.customComponents}
+        classNameProp={`variant-${props.content?.id}`}
+        parentContentId={props.content?.id}
+        isSsrAbTest={shouldRenderVariants()}
+      ></RenderContent>
+    </>
+  );
+}
+
+export default RenderContentVariants;

package/src/components/render-inlined-styles.jsx

@@ -1,27 +1,5 @@
-import { Show, createSignal } from "solid-js";
-import { Dynamic } from "solid-js/web";
-
-import { TARGET } from "../constants/target.js";
-
 function RenderInlinedStyles(props) {
-  function tag() {
-    // NOTE: we have to obfuscate the name of the tag due to a limitation in the svelte-preprocessor plugin.
-    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
-    return "sty" + "le";
-  }
-
-  function injectedStyleScript() {
-    return `<${tag()}>${props.styles}</${tag()}>`;
-  }
-
-  return (
-    <Show
-      fallback={<Dynamic component={tag()}>{props.styles}</Dynamic>}
-      when={TARGET === "svelte" || TARGET === "qwik"}
-    >
-      <Dynamic innerHTML={props.styles} component={tag()}></Dynamic>
-    </Show>
-  );
+  return <style innerHTML={props.styles} id={props.id}></style>;
 }
 
 export default RenderInlinedStyles;

package/src/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.3.1"
+export const SDK_VERSION = "0.4.0"

package/src/functions/get-content/generate-content-url.js

@@ -29,6 +29,7 @@ const generateContentUrl = (options) => {
     model,
     apiKey,
     includeRefs = true,
+    enrich,
     locale,
     apiVersion = DEFAULT_API_VERSION
   } = options;
@@ -38,7 +39,7 @@ const generateContentUrl = (options) => {
   if (!["v2", "v3"].includes(apiVersion)) {
     throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
   }
-  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}${enrich ? `&enrich=${enrich}` : ""}`);
   const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
   const flattened = flatten(queryOptions);
   for (const key in flattened) {

package/src/functions/get-content/generate-content-url.test.js

@@ -79,4 +79,19 @@ describe("Generate Content URL", () => {
       });
     }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`);
   });
+  test("generate content url with enrich option true", () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      enrich: true
+    });
+    expect(output).toMatchSnapshot();
+  });
+  test("generate content url with enrich option not present", () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel
+    });
+    expect(output).toMatchSnapshot();
+  });
 });

package/src/functions/get-content/index.js

@@ -37,40 +37,56 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+import { TARGET } from "../../constants/target.js";
+import { handleABTesting } from "../../helpers/ab-tests.js";
+import { getDefaultCanTrack } from "../../helpers/canTrack.js";
 import { logger } from "../../helpers/logger.js";
 import { fetch } from "../get-fetch.js";
-import { handleABTesting } from "./ab-testing.js";
+import { isBrowser } from "../is-browser.js";
 import { generateContentUrl } from "./generate-content-url.js";
+const checkContentHasResults = (content) => "results" in content;
 function getContent(options) {
   return __async(this, null, function* () {
     const allContent = yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }));
-    if (allContent && "results" in allContent) {
-      return (allContent == null ? void 0 : allContent.results[0]) || null;
+    if (allContent && checkContentHasResults(allContent)) {
+      return allContent.results[0] || null;
     }
     return null;
   });
 }
+const fetchContent = (options) => __async(void 0, null, function* () {
+  const url = generateContentUrl(options);
+  const res = yield fetch(url.href);
+  const content = yield res.json();
+  return content;
+});
+const processContentResult = (options, content) => __async(void 0, null, function* () {
+  const canTrack = getDefaultCanTrack(options.canTrack);
+  if (!canTrack)
+    return content;
+  if (!(isBrowser() || TARGET === "reactNative"))
+    return content;
+  try {
+    const newResults = [];
+    for (const item of content.results) {
+      newResults.push(yield handleABTesting({ item, canTrack }));
+    }
+    content.results = newResults;
+  } catch (e) {
+    logger.error("Could not process A/B tests. ", e);
+  }
+  return content;
+});
 function getAllContent(options) {
   return __async(this, null, function* () {
     try {
       const url = generateContentUrl(options);
-      const res = yield fetch(url.href);
-      const content = yield res.json();
-      if ("status" in content && !("results" in content)) {
+      const content = yield fetchContent(options);
+      if (!checkContentHasResults(content)) {
         logger.error("Error fetching data. ", { url, content, options });
         return content;
       }
-      const canTrack = options.canTrack !== false;
-      try {
-        if (canTrack && Array.isArray(content.results)) {
-          for (const item of content.results) {
-            yield handleABTesting({ item, canTrack });
-          }
-        }
-      } catch (e) {
-        logger.error("Could not setup A/B testing. ", e);
-      }
-      return content;
+      return processContentResult(options, content);
     } catch (error) {
       logger.error("Error fetching data. ", error);
       return null;
@@ -79,5 +95,6 @@ function getAllContent(options) {
 }
 export {
   getAllContent,
-  getContent
+  getContent,
+  processContentResult
 };

package/src/helpers/ab-tests.js

@@ -1,16 +1,138 @@
-import { getCookie, setCookie } from "./cookie.js";
-const BUILDER_STORE_PREFIX = "builderio.variations";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { getCookie, getCookieSync, setCookie } from "./cookie.js";
+import { checkIsDefined } from "../helpers/nullable.js";
+import { logger } from "./logger.js";
+const BUILDER_STORE_PREFIX = "builder.tests";
 const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
-const getContentVariationCookie = ({
-  contentId,
-  canTrack
-}) => getCookie({ name: getContentTestKey(contentId), canTrack });
+const getContentVariationCookie = ({ contentId }) => getCookie({ name: getContentTestKey(contentId), canTrack: true });
+const getContentVariationCookieSync = ({ contentId }) => getCookieSync({ name: getContentTestKey(contentId), canTrack: true });
 const setContentVariationCookie = ({
   contentId,
-  canTrack,
   value
-}) => setCookie({ name: getContentTestKey(contentId), value, canTrack });
+}) => setCookie({ name: getContentTestKey(contentId), value, canTrack: true });
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
+const getRandomVariationId = ({
+  id,
+  variations
+}) => {
+  var _a;
+  let n = 0;
+  const random = Math.random();
+  for (const id2 in variations) {
+    const testRatio = (_a = variations[id2]) == null ? void 0 : _a.testRatio;
+    n += testRatio;
+    if (random < n) {
+      return id2;
+    }
+  }
+  return id;
+};
+const getAndSetVariantId = (args) => {
+  const randomVariationId = getRandomVariationId(args);
+  setContentVariationCookie({
+    contentId: args.id,
+    value: randomVariationId
+  }).catch((err) => {
+    logger.error("could not store A/B test variation: ", err);
+  });
+  return randomVariationId;
+};
+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 handleABTestingSync = ({
+  item,
+  canTrack
+}) => {
+  if (!canTrack) {
+    return item;
+  }
+  if (!item) {
+    return void 0;
+  }
+  if (!checkIsBuilderContentWithVariations(item)) {
+    return item;
+  }
+  const testGroupId = getContentVariationCookieSync({
+    contentId: item.id
+  }) || getAndSetVariantId({
+    variations: item.variations,
+    id: item.id
+  });
+  const variationValue = getTestFields({ item, testGroupId });
+  return __spreadValues(__spreadValues({}, item), variationValue);
+};
+const handleABTesting = (_0) => __async(void 0, [_0], function* ({
+  item,
+  canTrack
+}) {
+  if (!canTrack) {
+    return item;
+  }
+  if (!checkIsBuilderContentWithVariations(item)) {
+    return item;
+  }
+  const cookieValue = yield getContentVariationCookie({
+    contentId: item.id
+  });
+  const testGroupId = cookieValue || getAndSetVariantId({
+    variations: item.variations,
+    id: item.id
+  });
+  const variationValue = getTestFields({ item, testGroupId });
+  return __spreadValues(__spreadValues({}, item), variationValue);
+});
 export {
-  getContentVariationCookie,
-  setContentVariationCookie
+  handleABTesting,
+  handleABTestingSync
 };

package/src/helpers/canTrack.js

@@ -0,0 +1,5 @@
+import { checkIsDefined } from "./nullable";
+const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
+export {
+  getDefaultCanTrack
+};

package/src/helpers/cookie.js

@@ -19,12 +19,13 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { isBrowser } from "../functions/is-browser.js";
+import { logger } from "./logger.js";
 import { checkIsDefined } from "./nullable.js";
 import { getTopLevelDomain } from "./url.js";
-const getCookie = (_0) => __async(void 0, [_0], function* ({
+const getCookieSync = ({
   name,
   canTrack
-}) {
+}) => {
   var _a;
   try {
     if (!canTrack) {
@@ -32,9 +33,12 @@ const getCookie = (_0) => __async(void 0, [_0], function* ({
     }
     return (_a = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))) == null ? void 0 : _a.split("=")[1];
   } catch (err) {
-    console.debug("[COOKIE] GET error: ", err);
+    logger.warn("[COOKIE] GET error: ", (err == null ? void 0 : err.message) || err);
     return void 0;
   }
+};
+const getCookie = (args) => __async(void 0, null, function* () {
+  return getCookieSync(args);
 });
 const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
 const SECURE_CONFIG = [
@@ -72,10 +76,11 @@ const setCookie = (_0) => __async(void 0, [_0], function* ({
     const cookie = createCookieString({ name, value, expires });
     document.cookie = cookie;
   } catch (err) {
-    console.warn("[COOKIE] SET error: ", err);
+    logger.warn("[COOKIE] SET error: ", (err == null ? void 0 : err.message) || err);
   }
 });
 export {
   getCookie,
+  getCookieSync,
   setCookie
 };

package/src/helpers/logger.js

@@ -2,7 +2,8 @@ const MSG_PREFIX = "[Builder.io]: ";
 const logger = {
   log: (...message) => console.log(MSG_PREFIX, ...message),
   error: (...message) => console.error(MSG_PREFIX, ...message),
-  warn: (...message) => console.warn(MSG_PREFIX, ...message)
+  warn: (...message) => console.warn(MSG_PREFIX, ...message),
+  debug: (...message) => console.debug(MSG_PREFIX, ...message)
 };
 export {
   logger

package/src/index-helpers/blocks-exports.js

@@ -3,20 +3,20 @@ import { default as default3 } from "../blocks/columns/columns";
 import { default as default4 } from "../blocks/fragment/fragment";
 import { default as default5 } from "../blocks/image/image";
 import { default as default6 } from "../components/render-blocks";
-import { default as default7 } from "../components/render-content/render-content";
-import { default as default8 } from "../blocks/section/section";
-import { default as default9 } from "../blocks/symbol/symbol";
-import { default as default10 } from "../blocks/text/text";
-import { default as default11 } from "../blocks/video/video";
+import { default as default7 } from "../blocks/section/section";
+import { default as default8 } from "../blocks/symbol/symbol";
+import { default as default9 } from "../blocks/text/text";
+import { default as default10 } from "../blocks/video/video";
+import { default as default11 } from "../components/render-content-variants/render-content-variants";
 export {
   default2 as Button,
   default3 as Columns,
   default4 as Fragment,
   default5 as Image,
   default6 as RenderBlocks,
-  default7 as RenderContent,
-  default8 as Section,
-  default9 as Symbol,
-  default10 as Text,
-  default11 as Video
+  default11 as RenderContent,
+  default7 as Section,
+  default8 as Symbol,
+  default9 as Text,
+  default10 as Video
 };

package/src/index.js

@@ -1,13 +1,24 @@
 export * from "./index-helpers/top-of-file.js";
 export * from "./index-helpers/blocks-exports.js";
-export * from "./functions/is-editing.js";
-export * from "./functions/is-previewing.js";
-export * from "./functions/register-component.js";
-export * from "./functions/register.js";
-export * from "./functions/set-editor-settings.js";
-export * from "./functions/get-content/index.js";
-export * from "./functions/get-builder-search-params/index.js";
+import { isEditing } from "./functions/is-editing.js";
+import { isPreviewing } from "./functions/is-previewing.js";
+import { createRegisterComponentMessage } from "./functions/register-component.js";
+import { register } from "./functions/register.js";
+import { setEditorSettings } from "./functions/set-editor-settings.js";
+import {
+  getAllContent,
+  getContent,
+  processContentResult
+} from "./functions/get-content/index.js";
 import { track } from "./functions/track/index.js";
 export {
+  createRegisterComponentMessage,
+  getAllContent,
+  getContent,
+  isEditing,
+  isPreviewing,
+  processContentResult,
+  register,
+  setEditorSettings,
   track
 };

package/src/functions/get-content/ab-testing.js

@@ -1,99 +0,0 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import {
-  getContentVariationCookie,
-  setContentVariationCookie
-} from "../../helpers/ab-tests.js";
-import { checkIsDefined } from "../../helpers/nullable.js";
-const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
-const getRandomVariationId = ({
-  id,
-  variations
-}) => {
-  var _a;
-  let n = 0;
-  const random = Math.random();
-  for (const id2 in variations) {
-    const testRatio = (_a = variations[id2]) == null ? void 0 : _a.testRatio;
-    n += testRatio;
-    if (random < n) {
-      return id2;
-    }
-  }
-  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 = (_0) => __async(void 0, [_0], function* ({
-  item,
-  canTrack
-}) {
-  const testGroupId = yield 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 = (_0) => __async(void 0, [_0], function* ({
-  item,
-  canTrack
-}) {
-  if (!checkIsBuilderContentWithVariations(item)) {
-    return;
-  }
-  const variationValue = yield getContentVariation({ item, canTrack });
-  Object.assign(item, variationValue);
-});
-export {
-  handleABTesting
-};