@builder.io/sdk-svelte 0.3.1 → 0.4.0

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "package",
@@ -78,6 +78,9 @@
     "./components/render-content/render-content.helpers": "./components/render-content/render-content.helpers.js",
     "./components/render-content/render-content.svelte": "./components/render-content/render-content.svelte",
     "./components/render-content/render-content.types": "./components/render-content/render-content.types.js",
+    "./components/render-content/wrap-component-ref": "./components/render-content/wrap-component-ref.js",
+    "./components/render-content-variants/helpers": "./components/render-content-variants/helpers.js",
+    "./components/render-content-variants/render-content-variants.svelte": "./components/render-content-variants/render-content-variants.svelte",
     "./components/render-inlined-styles.svelte": "./components/render-inlined-styles.svelte",
     "./constants/builder-registered-components": "./constants/builder-registered-components.js",
     "./constants/device-sizes": "./constants/device-sizes.js",
@@ -97,7 +100,6 @@
     "./functions/get-block-properties": "./functions/get-block-properties.js",
     "./functions/get-builder-search-params/fn.test": "./functions/get-builder-search-params/fn.test.js",
     "./functions/get-builder-search-params": "./functions/get-builder-search-params/index.js",
-    "./functions/get-content/ab-testing": "./functions/get-content/ab-testing.js",
     "./functions/get-content/generate-content-url.test": "./functions/get-content/generate-content-url.test.js",
     "./functions/get-content/generate-content-url": "./functions/get-content/generate-content-url.js",
     "./functions/get-content": "./functions/get-content/index.js",
@@ -126,6 +128,7 @@
     "./functions/transform-block-properties": "./functions/transform-block-properties.js",
     "./functions/transform-block": "./functions/transform-block.js",
     "./helpers/ab-tests": "./helpers/ab-tests.js",
+    "./helpers/canTrack": "./helpers/canTrack.js",
     "./helpers/cookie": "./helpers/cookie.js",
     "./helpers/css": "./helpers/css.js",
     "./helpers/flatten": "./helpers/flatten.js",
@@ -155,10 +158,10 @@
   "types": "./package/index.d.ts",
   "devDependencies": {
     "@sveltejs/adapter-auto": "1.0.0-next.71",
-    "@sveltejs/kit": "^1.15.2",
+    "@sveltejs/kit": "^1.16.2",
     "@sveltejs/package": "1.0.0-next.1",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.7.1",
+    "svelte": "^3.59.1",
+    "svelte-check": "^3.3.2",
     "svelte-preprocess": "^4.10.6",
     "tslib": "^2.3.1",
     "typescript": "^4",

package/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/components/render-block/render-block.svelte

@@ -139,23 +139,23 @@ let component = getComponent({
     block: block,
     context: context,
 });
-let tag = block.tagName || "div";
+let Tag = block.tagName || "div";
 </script>
 
 {#if canShowBlock()}
   {#if !component?.noWrap}
-    {#if isEmptyHtmlElement(tag)}
-      <svelte:element this={tag} {...attributes()} use:setAttrs={actions()} />
+    {#if isEmptyHtmlElement(Tag)}
+      <svelte:element this={Tag} {...attributes()} use:setAttrs={actions()} />
     {/if}
 
-    {#if !isEmptyHtmlElement(tag) && repeatItem()}
+    {#if !isEmptyHtmlElement(Tag) && repeatItem()}
       {#each repeatItem() as data, index (index)}
         <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
       {/each}
     {/if}
 
-    {#if !isEmptyHtmlElement(tag) && !repeatItem()}
-      <svelte:element this={tag} {...attributes()} use:setAttrs={actions()}>
+    {#if !isEmptyHtmlElement(Tag) && !repeatItem()}
+      <svelte:element this={Tag} {...attributes()} use:setAttrs={actions()}>
         <RenderComponent {...renderComponentProps()} />
 
         {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}

package/package/components/render-content/components/render-styles.svelte

@@ -27,7 +27,7 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
-`;
+`.trim();
 </script>
 
 <RenderInlinedStyles styles={injectedStyles} />

package/package/components/render-content/render-content.svelte

@@ -17,6 +17,35 @@ import { getInteractionPropertiesForEvent } from "../../functions/track/interact
 import { getContentInitialValue, getContextStateInitialValue, } 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";
+const isEvent = (attr) => attr.startsWith("on:");
+const isNonEvent = (attr) => !attr.startsWith("on:");
+const filterAttrs = (attrs = {}, filter) => {
+    const validAttr = {};
+    Object.keys(attrs).forEach((attr) => {
+        if (filter(attr)) {
+            validAttr[attr] = attrs[attr];
+        }
+    });
+    return validAttr;
+};
+const setAttrs = (node, attrs = {}) => {
+    const attrKeys = Object.keys(attrs);
+    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
+    const teardown = (attr) => node.removeEventListener(attr.substr(3), attrs[attr]);
+    attrKeys.map(setup);
+    return {
+        update(attrs = {}) {
+            const attrKeys = Object.keys(attrs);
+            attrKeys.map(teardown);
+            attrKeys.map(setup);
+        },
+        destroy() {
+            attrKeys.map(teardown);
+        },
+    };
+};
 export let content;
 export let data;
 export let canTrack;
@@ -25,7 +54,12 @@ export let customComponents;
 export let model;
 export let context;
 export let apiKey;
+export let parentContentId;
+export let hideContent;
+export let classNameProp;
+export let isSsrAbTest;
 export let includeRefs;
+export let enrich;
 export let apiVersion;
 function mergeNewContent(newContent) {
     useContent = {
@@ -191,12 +225,20 @@ let allRegisteredComponents = [
     // which is the new standard way of providing custom components, and must therefore take precedence.
     ...components,
     ...(customComponents || []),
-].reduce((acc, curr) => ({
+].reduce((acc, { component, ...curr }) => ({
     ...acc,
-    [curr.name]: curr,
+    [curr.name]: {
+        component: TARGET === "vue3" ? wrapComponentRef(component) : component,
+        ...curr,
+    },
 }), {});
 let httpReqsData = {};
 let clicked = false;
+let scriptStr = getRenderContentScriptString({
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+    contentId: content?.id,
+    parentContentId: parentContentId,
+});
 onMount(() => {
     if (!apiKey) {
         logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -216,6 +258,11 @@ onMount(() => {
                         includeRefs: includeRefs,
                     }
                     : {}),
+                ...(enrich
+                    ? {
+                        enrich: enrich,
+                    }
+                    : {}),
             });
             Object.values(allRegisteredComponents).forEach((registeredComponent) => {
                 const message = createRegisterComponentMessage(registeredComponent);
@@ -332,7 +379,42 @@ onDestroy(() => {
     }}
     builder-content-id={useContent?.id}
     builder-model={model}
+    {...filterAttrs(
+      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": "",
+            },
+          }
+        : {},
+      isNonEvent
+    )}
+    {...hideContent
+      ? {
+          hidden: true,
+          "aria-hidden": true,
+        }
+      : {}}
+    class={classNameProp}
+    use:setAttrs={filterAttrs(
+      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": "",
+            },
+          }
+        : {},
+      isEvent
+    )}
   >
+    {#if isSsrAbTest}
+      <svelte:element this={"script"}>{@html scriptStr}</svelte:element>
+    {/if}
+
     {#if TARGET !== "reactNative"}
       <RenderContentStyles
         contentId={useContent?.id}

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

@@ -10,7 +10,12 @@ declare const __propDef: {
         model: RenderContentProps["model"];
         context: RenderContentProps["context"];
         apiKey: RenderContentProps["apiKey"];
+        parentContentId: RenderContentProps["parentContentId"];
+        hideContent: RenderContentProps["hideContent"];
+        classNameProp: RenderContentProps["classNameProp"];
+        isSsrAbTest: RenderContentProps["isSsrAbTest"];
         includeRefs: RenderContentProps["includeRefs"];
+        enrich: RenderContentProps["enrich"];
         apiVersion: RenderContentProps["apiVersion"];
     };
     events: {

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

@@ -2,7 +2,7 @@ import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } fr
 import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
 import type { ApiVersion } from '../../types/api-version';
-export type RenderContentProps = {
+export interface RenderContentProps {
     content?: Nullable<BuilderContent>;
     model?: string;
     data?: {
@@ -14,8 +14,17 @@ export type RenderContentProps = {
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
     locale?: string;
+    /** @deprecated use `enrich` instead **/
     includeRefs?: boolean;
-};
+    enrich?: boolean;
+    /**
+     * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
+     */
+    classNameProp?: string;
+    hideContent?: boolean;
+    parentContentId?: string;
+    isSsrAbTest?: boolean;
+}
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {

package/package/components/render-content/wrap-component-ref.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export declare const wrapComponentRef: (component: any) => any;

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

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export const wrapComponentRef = (component) => component;

package/package/components/render-content-variants/helpers.d.ts

@@ -0,0 +1,17 @@
+import type { Nullable } from '../../helpers/nullable';
+import type { BuilderContent } from '../../types/builder-content';
+export declare const getVariants: (content: Nullable<BuilderContent>) => import("../../types/builder-content").BuilderContentVariation[];
+export declare const checkShouldRunVariants: ({ canTrack, content, }: {
+    canTrack: Nullable<boolean>;
+    content: Nullable<BuilderContent>;
+}) => boolean;
+type VariantData = {
+    id: string;
+    testRatio?: number;
+};
+export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
+export declare const getRenderContentScriptString: ({ parentContentId, contentId, }: {
+    contentId: string;
+    parentContentId: string;
+}) => string;
+export {};

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

@@ -0,0 +1,182 @@
+import { isBrowser } from '../../functions/is-browser';
+export const getVariants = (content) => Object.values(content?.variations || {});
+export const checkShouldRunVariants = ({ canTrack, content, }) => {
+    const hasVariants = getVariants(content).length > 0;
+    if (!hasVariants) {
+        return false;
+    }
+    if (!canTrack) {
+        return false;
+    }
+    if (isBrowser()) {
+        return false;
+    }
+    return true;
+};
+/**
+ * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
+ * Make sure to write multi-line comments only.
+ */
+function bldrAbTest(contentId, variants, isHydrationTarget) {
+    function getAndSetVariantId() {
+        function setCookie(name, value, days) {
+            let expires = '';
+            if (days) {
+                const date = new Date();
+                date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+                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);
+        /**
+         * cookie already exists
+         */
+        if (variantInCookie && availableIDs.includes(variantInCookie)) {
+            return variantInCookie;
+        }
+        /**
+         * no cookie exists, find variant
+         */
+        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;
+            }
+        }
+        /**
+         * no variant found, assign default content
+         */
+        setCookie(cookieName, contentId);
+        return contentId;
+    }
+    const winningVariantId = getAndSetVariantId();
+    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    /**
+     * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
+     */
+    if (isHydrationTarget) {
+        styleEl.remove();
+        const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+        thisScriptEl?.remove();
+    }
+    else {
+        /* update styles to hide all variants except the winning variant */
+        const newStyleStr = variants
+            .concat({ id: contentId })
+            .filter((variant) => variant.id !== winningVariantId)
+            .map((value) => {
+            return `.variant-${value.id} {  display: none; }
+        `;
+        })
+            .join('');
+        /* TO-DO: check if this actually updates the style */
+        styleEl.innerHTML = newStyleStr;
+    }
+}
+/**
+ * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
+ * Make sure to write multi-line comments only.
+ */
+function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
+    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);
+    /** get parent div by searching on `builder-content-id` attr */
+    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const variantIsDefaultContent = variantContentId === defaultContentId;
+    if (variantId === variantContentId) {
+        if (variantIsDefaultContent) {
+            /** the default content is already visible, no need to do anything */
+            return;
+        }
+        /** this is the winning variant and not already visible: remove `hidden` and `aria-hidden` attr */
+        parentDiv?.removeAttribute('hidden');
+        parentDiv?.removeAttribute('aria-hidden');
+    }
+    else {
+        if (variantIsDefaultContent) {
+            if (isHydrationTarget) {
+                /**
+                 * For React to work, we need to support hydration, in which case the first CSR will have none of the hidden variants.
+                 * So we completely remove that node.
+                 */
+                parentDiv?.remove();
+            }
+            else {
+                /** this is not the winning variant, add `hidden` attr */
+                parentDiv?.setAttribute('hidden', 'true');
+                parentDiv?.setAttribute('aria-hidden', 'true');
+            }
+        }
+        /** This is not the winning variant, and it's not the default content.
+         * There's no need to hide it, because it's already hidden.
+         */
+        return;
+    }
+    return;
+}
+const isHydrationTarget = (target) => target === 'react' ||
+    target === 'reactNative' ||
+    target === 'vue3' ||
+    target === 'vue2';
+/**
+ * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
+ * Some bundlers will minify the fn name, etc.
+ *
+ * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
+ */
+const AB_TEST_FN_NAME = 'bldrAbTest';
+const CONTENT_FN_NAME = 'bldrCntntScrpt';
+export 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})
+  `;
+};
+export const getRenderContentScriptString = ({ parentContentId, contentId, }) => {
+    return `
+  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+};

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

@@ -0,0 +1,70 @@
+<script context="module"></script>
+
+<script>import { checkShouldRunVariants, getVariants, getVariantsScriptString, } from "./helpers";
+import RenderContent from "../render-content/render-content.svelte";
+import { getDefaultCanTrack } from "../../helpers/canTrack";
+import RenderInlinedStyles from "../render-inlined-styles.svelte";
+import { handleABTestingSync } from "../../helpers/ab-tests";
+export let content;
+export let canTrack;
+export let apiKey;
+export let apiVersion;
+export let customComponents;
+export let model;
+let variantScriptStr = getVariantsScriptString(getVariants(content).map((value) => ({
+    id: value.id,
+    testRatio: value.testRatio,
+})), content?.id || "");
+let shouldRenderVariants = checkShouldRunVariants({
+    canTrack: getDefaultCanTrack(canTrack),
+    content: content,
+});
+let hideVariantsStyleString = getVariants(content)
+    .map((value) => `.variant-${value.id} { display: none; } `)
+    .join("");
+let contentToRender = checkShouldRunVariants({
+    canTrack: getDefaultCanTrack(canTrack),
+    content: content,
+})
+    ? content
+    : handleABTestingSync({
+        item: content,
+        canTrack: getDefaultCanTrack(canTrack),
+    });
+</script>
+
+{#if shouldRenderVariants}
+  <RenderInlinedStyles
+    id={`variants-styles-${content?.id}`}
+    styles={hideVariantsStyleString}
+  />
+
+  <svelte:element this={"script"} id={`variants-script-${content?.id}`}
+    >{@html variantScriptStr}</svelte:element
+  >
+
+  {#each getVariants(content) as variant (variant.id)}
+    <RenderContent
+      content={variant}
+      {apiKey}
+      {apiVersion}
+      {canTrack}
+      {customComponents}
+      hideContent={true}
+      parentContentId={content?.id}
+      isSsrAbTest={shouldRenderVariants}
+    />
+  {/each}
+{/if}
+
+<RenderContent
+  {model}
+  content={contentToRender}
+  {apiKey}
+  {apiVersion}
+  {canTrack}
+  {customComponents}
+  classNameProp={`variant-${content?.id}`}
+  parentContentId={content?.id}
+  isSsrAbTest={shouldRenderVariants}
+/>

package/package/components/render-content-variants/render-content-variants.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+type VariantsProviderProps = RenderContentProps;
+import type { RenderContentProps } from "../render-content/render-content.types";
+declare const __propDef: {
+    props: {
+        content: VariantsProviderProps["content"];
+        canTrack: VariantsProviderProps["canTrack"];
+        apiKey: VariantsProviderProps["apiKey"];
+        apiVersion: VariantsProviderProps["apiVersion"];
+        customComponents: VariantsProviderProps["customComponents"];
+        model: VariantsProviderProps["model"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RenderContentVariantsProps = typeof __propDef.props;
+export type RenderContentVariantsEvents = typeof __propDef.events;
+export type RenderContentVariantsSlots = typeof __propDef.slots;
+export default class RenderContentVariants extends SvelteComponentTyped<RenderContentVariantsProps, RenderContentVariantsEvents, RenderContentVariantsSlots> {
+}
+export {};

package/package/components/render-inlined-styles.svelte

@@ -1,19 +1,7 @@
 <script context="module"></script>
 
-<script>import { TARGET } from "../constants/target.js";
-export let styles;
-$: 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");
-};
-$: injectedStyleScript = () => {
-    return `<${tag()}>${styles}</${tag()}>`;
-};
+<script>export let styles;
+export let id;
 </script>
 
-{#if TARGET === "svelte" || TARGET === "qwik"}
-  {@html injectedStyleScript()}
-{:else}
-  <svelte:element this={tag()}>{styles}</svelte:element>
-{/if}
+<svelte:element this={"sty" + "le"} {id}>{@html styles}</svelte:element>

package/package/components/render-inlined-styles.svelte.d.ts

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

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

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

package/package/constants/sdk-version.js

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

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

@@ -2,14 +2,14 @@ import { flatten } from '../../helpers/flatten.js';
 import { getBuilderSearchParamsFromWindow, normalizeSearchParams, } from '../get-builder-search-params/index.js';
 import { DEFAULT_API_VERSION } from '../../types/api-version';
 export const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = DEFAULT_API_VERSION, } = options;
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, enrich, locale, apiVersion = DEFAULT_API_VERSION, } = options;
     if (!apiKey) {
         throw new Error('Missing API key');
     }
     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 = {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {}),

package/package/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();
+    });
 });