@builder.io/sdk-svelte 0.3.1 → 0.4.1

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

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

@@ -1,11 +1,16 @@
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { GetContentOptions } from './types.js';
 export declare function getContent(options: GetContentOptions): Promise<BuilderContent | null>;
-type ContentResponse = {
+type ContentResults = {
     results: BuilderContent[];
-} | {
+};
+type ContentResponse = ContentResults | {
     status: number;
     message: string;
 };
+/**
+ * Exported only for testing purposes. Should not be used directly.
+ */
+export declare const processContentResult: (options: GetContentOptions, content: ContentResults) => Promise<ContentResults>;
 export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse | null>;
 export {};

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

@@ -1,37 +1,60 @@
+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;
 export async function getContent(options) {
     const allContent = await getAllContent({ ...options, limit: 1 });
-    if (allContent && 'results' in allContent) {
-        return allContent?.results[0] || null;
+    if (allContent && checkContentHasResults(allContent)) {
+        return allContent.results[0] || null;
     }
     return null;
 }
+const fetchContent = async (options) => {
+    const url = generateContentUrl(options);
+    const res = await fetch(url.href);
+    const content = await res.json();
+    return content;
+};
+/**
+ * Exported only for testing purposes. Should not be used directly.
+ */
+export const processContentResult = async (options, content) => {
+    const canTrack = getDefaultCanTrack(options.canTrack);
+    if (!canTrack)
+        return content;
+    if (!(isBrowser() || TARGET === 'reactNative'))
+        return content;
+    /**
+     * For client-side navigations, it is ideal to handle AB testing at this point instead of using our
+     * complex multi-rendering variants approach, which is only needed for SSR'd content.
+     *
+     * This is also where react-native would handle AB testing.
+     */
+    try {
+        const newResults = [];
+        for (const item of content.results) {
+            newResults.push(await handleABTesting({ item, canTrack }));
+        }
+        content.results = newResults;
+    }
+    catch (e) {
+        logger.error('Could not process A/B tests. ', e);
+    }
+    return content;
+};
 export async function getAllContent(options) {
     try {
         const url = generateContentUrl(options);
-        const res = await fetch(url.href);
-        const content = await res.json();
-        if ('status' in content && !('results' in content)) {
+        const content = await fetchContent(options);
+        if (!checkContentHasResults(content)) {
             logger.error('Error fetching data. ', { url, content, options });
             return content;
         }
-        const canTrack = options.canTrack !== false;
-        try {
-            if (canTrack &&
-                // This makes sure we have a non-error response with the results array.
-                Array.isArray(content.results)) {
-                for (const item of content.results) {
-                    await 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);

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

@@ -19,6 +19,7 @@ export interface GetContentOptions {
     /**
      * If set to `true`, it will lazy load symbols/references.
      * If set to `false`, it will render the entire content tree eagerly.
+     * @deprecated use `enrich` instead
      */
     noTraverse?: boolean;
     /**
@@ -30,8 +31,13 @@ export interface GetContentOptions {
     canTrack?: boolean;
     /**
      * Include references in the response. Defaults to `true`.
+     * @deprecated use `enrich` instead
      */
     includeRefs?: boolean;
+    /**
+     * Include multilevel references in the response.
+     */
+    enrich?: boolean;
     /**
      * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
      */

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

@@ -1,8 +1,9 @@
 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<void>;
+import type { BuilderContent } from '../types/builder-content.js';
+import type { Nullable } from '../types/typescript.js';
+export declare const handleABTestingSync: ({ item, canTrack, }: {
+    item: Nullable<BuilderContent>;
+} & CanTrack) => Nullable<BuilderContent>;
+export declare const handleABTesting: ({ item, canTrack, }: {
+    item: BuilderContent;
+} & CanTrack) => Promise<BuilderContent>;

package/package/helpers/ab-tests.js

@@ -1,5 +1,104 @@
-import { getCookie, setCookie } from './cookie.js';
-const BUILDER_STORE_PREFIX = 'builderio.variations';
+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}`;
-export const getContentVariationCookie = ({ contentId, canTrack, }) => getCookie({ name: getContentTestKey(contentId), canTrack });
-export const setContentVariationCookie = ({ contentId, canTrack, value, }) => setCookie({ name: getContentTestKey(contentId), value, canTrack });
+const getContentVariationCookie = ({ contentId }) => getCookie({ name: getContentTestKey(contentId), canTrack: true });
+const getContentVariationCookieSync = ({ contentId }) => getCookieSync({ name: getContentTestKey(contentId), canTrack: true });
+const setContentVariationCookie = ({ contentId, value, }) => setCookie({ name: getContentTestKey(contentId), value, canTrack: true });
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) &&
+    checkIsDefined(item.variations) &&
+    Object.keys(item.variations).length > 0;
+/**
+ * Randomly assign a variation to a user
+ */
+const getRandomVariationId = ({ id, variations, }) => {
+    let n = 0;
+    const random = Math.random();
+    // loop over variations test ratios, incrementing a counter,
+    // until we find the variation that this user should be assigned to
+    for (const id in variations) {
+        const testRatio = variations[id]?.testRatio;
+        n += testRatio;
+        if (random < n) {
+            return id;
+        }
+    }
+    // the variations array does not include the default variation.
+    // if we arrive here, then it means that the random number fits in the default variation bucket.
+    return id;
+};
+const getAndSetVariantId = (args) => {
+    // if variation not found in storage, assign a random variation to this user
+    const randomVariationId = getRandomVariationId(args);
+    // store variation in cookies/storage
+    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 ||
+        // handle edge-case where `testGroupId` points to non-existing variation
+        !variationValue) {
+        return {
+            testVariationId: item.id,
+            testVariationName: 'Default',
+        };
+    }
+    else {
+        return {
+            data: variationValue.data,
+            testVariationId: variationValue.id,
+            testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : ''),
+        };
+    }
+};
+export const handleABTestingSync = ({ item, canTrack, }) => {
+    if (!canTrack) {
+        return item;
+    }
+    if (!item) {
+        return undefined;
+    }
+    if (!checkIsBuilderContentWithVariations(item)) {
+        return item;
+    }
+    const testGroupId = getContentVariationCookieSync({
+        contentId: item.id,
+    }) ||
+        getAndSetVariantId({
+            variations: item.variations,
+            id: item.id,
+        });
+    const variationValue = getTestFields({ item, testGroupId });
+    return {
+        ...item,
+        ...variationValue,
+    };
+};
+export const handleABTesting = async ({ item, canTrack, }) => {
+    if (!canTrack) {
+        return item;
+    }
+    if (!checkIsBuilderContentWithVariations(item)) {
+        return item;
+    }
+    const cookieValue = await getContentVariationCookie({
+        contentId: item.id,
+    });
+    const testGroupId = cookieValue ||
+        getAndSetVariantId({
+            variations: item.variations,
+            id: item.id,
+        });
+    const variationValue = getTestFields({ item, testGroupId });
+    return {
+        ...item,
+        ...variationValue,
+    };
+};

package/package/helpers/canTrack.d.ts

@@ -0,0 +1 @@
+export declare const getDefaultCanTrack: (canTrack?: boolean) => boolean;

package/package/helpers/canTrack.js

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

package/package/helpers/cookie.d.ts

@@ -1,10 +1,13 @@
 import type { CanTrack } from '../types/can-track.js';
+type GetCookieArgs = {
+    name: string;
+} & CanTrack;
+export declare const getCookieSync: ({ name, canTrack, }: GetCookieArgs) => string | undefined;
 /**
  * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ * The sync version is only safe to use in code blocks that `react-native` is guaranteed not to not run.
  */
-export declare const getCookie: ({ name, canTrack, }: {
-    name: string;
-} & CanTrack) => Promise<string | undefined>;
+export declare const getCookie: (args: GetCookieArgs) => Promise<string | undefined>;
 /**
  * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
  */
@@ -13,3 +16,4 @@ export declare const setCookie: ({ name, value, expires, canTrack, }: {
     value: string;
     expires?: Date | undefined;
 } & CanTrack) => Promise<void>;
+export {};

package/package/helpers/cookie.js

@@ -1,10 +1,8 @@
 import { isBrowser } from '../functions/is-browser.js';
+import { logger } from './logger.js';
 import { checkIsDefined } from './nullable.js';
 import { getTopLevelDomain } from './url.js';
-/**
- * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
- */
-export const getCookie = async ({ name, canTrack, }) => {
+export const getCookieSync = ({ name, canTrack, }) => {
     try {
         if (!canTrack) {
             return undefined;
@@ -19,10 +17,15 @@ export const getCookie = async ({ name, canTrack, }) => {
             ?.split('=')[1];
     }
     catch (err) {
-        console.debug('[COOKIE] GET error: ', err);
+        logger.warn('[COOKIE] GET error: ', err?.message || err);
         return undefined;
     }
 };
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ * The sync version is only safe to use in code blocks that `react-native` is guaranteed not to not run.
+ */
+export const getCookie = async (args) => getCookieSync(args);
 const stringifyCookie = (cookie) => cookie
     .map(([key, value]) => (value ? `${key}=${value}` : key))
     .filter(checkIsDefined)
@@ -60,6 +63,6 @@ export const setCookie = async ({ name, value, expires, canTrack, }) => {
         document.cookie = cookie;
     }
     catch (err) {
-        console.warn('[COOKIE] SET error: ', err);
+        logger.warn('[COOKIE] SET error: ', err?.message || err);
     }
 };

package/package/helpers/logger.d.ts

@@ -2,4 +2,5 @@ export declare const logger: {
     log: (...message: any[]) => void;
     error: (...message: any[]) => void;
     warn: (...message: any[]) => void;
+    debug: (...message: any[]) => void;
 };

package/package/helpers/logger.js

@@ -3,4 +3,5 @@ export const logger = {
     log: (...message) => console.log(MSG_PREFIX, ...message),
     error: (...message) => console.error(MSG_PREFIX, ...message),
     warn: (...message) => console.warn(MSG_PREFIX, ...message),
+    debug: (...message) => console.debug(MSG_PREFIX, ...message),
 };

package/package/index-helpers/blocks-exports.d.ts

@@ -3,8 +3,8 @@ export { default as Columns } from '../blocks/columns/columns.svelte';
 export { default as Fragment } from '../blocks/fragment/fragment.svelte';
 export { default as Image } from '../blocks/image/image.svelte';
 export { default as RenderBlocks } from '../components/render-blocks.svelte';
-export { default as RenderContent } from '../components/render-content/render-content.svelte';
 export { default as Section } from '../blocks/section/section.svelte';
 export { default as Symbol } from '../blocks/symbol/symbol.svelte';
 export { default as Text } from '../blocks/text/text.svelte';
 export { default as Video } from '../blocks/video/video.svelte';
+export { default as RenderContent } from '../components/render-content-variants/render-content-variants.svelte';

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

@@ -3,8 +3,8 @@ export { default as Columns } from '../blocks/columns/columns.svelte';
 export { default as Fragment } from '../blocks/fragment/fragment.svelte';
 export { default as Image } from '../blocks/image/image.svelte';
 export { default as RenderBlocks } from '../components/render-blocks.svelte';
-export { default as RenderContent } from '../components/render-content/render-content.svelte';
 export { default as Section } from '../blocks/section/section.svelte';
 export { default as Symbol } from '../blocks/symbol/symbol.svelte';
 export { default as Text } from '../blocks/text/text.svelte';
 export { default as Video } from '../blocks/video/video.svelte';
+export { default as RenderContent } from '../components/render-content-variants/render-content-variants.svelte';

package/package/index.d.ts

@@ -1,12 +1,14 @@
 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';
+export { isEditing } from './functions/is-editing.js';
+export { isPreviewing } from './functions/is-previewing.js';
+export { createRegisterComponentMessage } from './functions/register-component.js';
+export { register } from './functions/register.js';
+export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
+export { setEditorSettings } from './functions/set-editor-settings.js';
+export type { Settings } from './functions/set-editor-settings.js';
+export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';

package/package/index.js

@@ -1,10 +1,10 @@
 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';
+export { isEditing } from './functions/is-editing.js';
+export { isPreviewing } from './functions/is-previewing.js';
+export { createRegisterComponentMessage } from './functions/register-component.js';
+export { register } from './functions/register.js';
+export { setEditorSettings } from './functions/set-editor-settings.js';
+export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';

package/package/scripts/init-editing.d.ts

@@ -1,5 +1,6 @@
 export declare const registerInsertMenu: () => void;
 export declare const setupBrowserForEditing: (options?: {
+    enrich?: boolean;
     includeRefs?: boolean;
     locale?: string;
 }) => void;

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

@@ -30,8 +30,6 @@ export interface BuilderContentVariation {
 }
 export interface BuilderContent extends BuilderContentVariation {
     '@version'?: number;
-    id?: string;
-    name?: string;
     published?: 'published' | 'draft' | 'archived';
     modelId?: string;
     priority?: number;
@@ -39,7 +37,7 @@ export interface BuilderContent extends BuilderContentVariation {
     startDate?: number;
     endDate?: number;
     variations?: {
-        [id: string]: BuilderContentVariation | undefined;
+        [id: string]: BuilderContentVariation;
     };
     testVariationId?: string;
     testVariationName?: string;

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.1",
   "type": "module",
   "files": [
     "package",
@@ -28,7 +28,6 @@
   },
   "types": "./package/index.d.ts",
   "scripts": {
-    "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -36,10 +35,10 @@
   },
   "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/src/components/render-block/render-block.svelte

@@ -160,23 +160,23 @@
     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/src/components/render-content/components/render-styles.svelte

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