@builder.io/sdk-svelte 0.0.4 → 0.0.6

package/src/functions/get-builder-search-params/fn.test.ts

@@ -0,0 +1,19 @@
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from '.';
+
+const querystring =
+  'someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017';
+
+const url = new URL(`localhost:3000/about-us?${querystring}`);
+
+describe('Get Builder SearchParams', () => {
+  test('correctly converts URLSearchParams to object', () => {
+    const output = convertSearchParamsToQueryObject(url.searchParams);
+    expect(output).toMatchSnapshot();
+  });
+  test('correctly extracts all builder params from a query object', () => {
+    const output = getBuilderSearchParams(
+      convertSearchParamsToQueryObject(url.searchParams)
+    );
+    expect(output).toMatchSnapshot();
+  });
+});

package/src/functions/get-builder-search-params/index.ts

@@ -0,0 +1,48 @@
+import { isBrowser } from '../is-browser.js';
+
+const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+
+type QueryObject = Record<string, string>;
+
+export const convertSearchParamsToQueryObject = (
+  searchParams: URLSearchParams
+): QueryObject => {
+  const options: Record<string, string> = {};
+  searchParams.forEach((value, key) => {
+    options[key] = value;
+  });
+  return options;
+};
+
+export const getBuilderSearchParams = (
+  _options: QueryObject | URLSearchParams | undefined
+) => {
+  if (!_options) {
+    return {};
+  }
+  const options = normalizeSearchParams(_options);
+
+  const newOptions: QueryObject = {};
+  Object.keys(options).forEach((key) => {
+    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '');
+      newOptions[trimmedKey] = options[key];
+    }
+  });
+  return newOptions;
+};
+
+export const getBuilderSearchParamsFromWindow = () => {
+  if (!isBrowser()) {
+    return {};
+  }
+  const searchParams = new URLSearchParams(window.location.search);
+  return getBuilderSearchParams(searchParams);
+};
+
+export const normalizeSearchParams = (
+  searchParams: QueryObject | URLSearchParams
+): QueryObject =>
+  searchParams instanceof URLSearchParams
+    ? convertSearchParamsToQueryObject(searchParams)
+    : searchParams;

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

@@ -0,0 +1,132 @@
+import type {
+  BuilderContent,
+  BuilderContentVariation,
+} from '../../types/builder-content.js';
+import {
+  getContentVariationCookie,
+  setContentVariationCookie,
+} from '../../helpers/ab-tests.js';
+import type { Overwrite } from '../../types/typescript.js';
+import type { CanTrack } from '../../types/can-track.js';
+import { checkIsDefined } from '../../helpers/nullable.js';
+
+type BuilderContentWithVariations = Overwrite<
+  BuilderContent,
+  Required<Pick<BuilderContent, 'variations' | 'id'>>
+>;
+
+const checkIsBuilderContentWithVariations = (
+  item: BuilderContent
+): item is BuilderContentWithVariations =>
+  checkIsDefined(item.id) &&
+  checkIsDefined(item.variations) &&
+  Object.keys(item.variations).length > 0;
+
+/**
+ * Randomly assign a variation to this user and store it in cookies/storage
+ */
+const getRandomVariationId = ({
+  id,
+  variations,
+}: BuilderContentWithVariations) => {
+  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;
+    }
+  }
+
+  // `item.variations` 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 getTestFields = ({
+  item,
+  testGroupId,
+}: {
+  item: BuilderContentWithVariations;
+  testGroupId: string;
+}): TestFields => {
+  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' : ''),
+    };
+  }
+};
+
+type TestFields = {
+  data?: BuilderContentVariation['data'];
+  testVariationId?: string;
+  testVariationName: string;
+};
+
+const getContentVariation = async ({
+  item,
+  canTrack,
+}: {
+  item: BuilderContentWithVariations;
+} & CanTrack): Promise<TestFields> => {
+  // try to find test variation in cookies/storage
+  const testGroupId = await getContentVariationCookie({
+    canTrack,
+    contentId: item.id,
+  });
+
+  const testFields = testGroupId
+    ? getTestFields({ item, testGroupId })
+    : undefined;
+
+  if (testFields) {
+    return testFields;
+  } else {
+    // if variation not found in storage, assign a random variation to this user
+    const randomVariationId = getRandomVariationId({
+      variations: item.variations,
+      id: item.id,
+    });
+
+    // store variation in cookies/storage
+    setContentVariationCookie({
+      contentId: item.id,
+      value: randomVariationId,
+      canTrack,
+    }).catch((err) => {
+      console.error('could not store A/B test variation: ', err);
+    });
+
+    return getTestFields({ item, testGroupId: randomVariationId });
+  }
+};
+
+export const handleABTesting = async ({
+  item,
+  canTrack,
+}: { item: BuilderContent } & CanTrack) => {
+  if (!checkIsBuilderContentWithVariations(item)) {
+    return;
+  }
+
+  const variationValue = await getContentVariation({ item, canTrack });
+  Object.assign(item, variationValue);
+};

package/src/functions/get-content/fn.test.ts

@@ -0,0 +1,35 @@
+import { generateContentUrl } from '.';
+
+const testKey = 'YJIGb4i01jvw0SRdL5Bt';
+const testModel = 'page';
+const testId = 'c1b81bab59704599b997574eb0736def';
+
+const options = {
+  cachebust: 'true',
+  noCache: 'true',
+  'overrides.037948e52eaf4743afed464f02c70da4':
+    '037948e52eaf4743afed464f02c70da4',
+  'overrides.page': '037948e52eaf4743afed464f02c70da4',
+  'overrides.page:/': '037948e52eaf4743afed464f02c70da4',
+  preview: 'page',
+};
+
+describe('Generate Content URL', () => {
+  test('generates the proper value for a simple query', () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+    });
+    expect(output).toMatchSnapshot();
+  });
+  test('Handles overrides correctly', () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options,
+    });
+    expect(output).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,77 @@
+import { flatten } from '../../helpers/flatten.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import {
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams,
+} from '../get-builder-search-params/index.js';
+import { getFetch } from '../get-fetch.js';
+import { handleABTesting } from './ab-testing.js';
+
+export type GetContentOptions = import('./types.js').GetContentOptions;
+
+export async function getContent(
+  options: GetContentOptions
+): Promise<BuilderContent | null> {
+  return (await getAllContent({ ...options, limit: 1 })).results[0] || null;
+}
+
+export const generateContentUrl = (options: GetContentOptions): URL => {
+  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 flattened = flatten({ query });
+    for (const key in flattened) {
+      url.searchParams.set(key, JSON.stringify((flattened as any)[key]));
+    }
+  }
+
+  return url;
+};
+
+interface ContentResponse {
+  results: BuilderContent[];
+}
+
+export async function getAllContent(
+  options: GetContentOptions
+): Promise<ContentResponse> {
+  const url = generateContentUrl(options);
+
+  const fetch = await getFetch();
+  const content: ContentResponse = await fetch(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;
+}

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

@@ -0,0 +1,36 @@
+export interface GetContentOptions {
+  /** The model to get content for */
+  model: string;
+
+  /** Your public API key */
+  apiKey: string;
+
+  /** Number of items to fetch. Default is 1 */
+  limit?: number;
+
+  /** User attributes to target on, such as { urlPath: '/foo', device: 'mobile', ...etc } */
+  userAttributes?: (Record<string, string> & { urlPath?: string }) | null;
+
+  /** Custom query */
+  query?: Record<string, any>;
+
+  /**
+   * Any other API options.
+   * Accepts both a key/value object or a `URLSearchParams` instance
+   * */
+  options?: Record<string, any> | URLSearchParams;
+
+  /**
+   * If set to `true`, it will lazy load symbols/references.
+   * 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/src/functions/get-fetch.ts

@@ -0,0 +1,14 @@
+import { getGlobalThis } from './get-global-this.js';
+
+export async function getFetch(): Promise<typeof global.fetch> {
+  const globalFetch: typeof global.fetch = getGlobalThis().fetch;
+
+  if (typeof globalFetch === 'undefined' && typeof global !== 'undefined') {
+    const nodeFetch = import('node-fetch').then((d) => d.default) as Promise<
+      typeof global.fetch
+    >;
+    return (nodeFetch as any).default || nodeFetch;
+  }
+
+  return (globalFetch as any).default || globalFetch;
+}

package/src/functions/get-global-this.ts

@@ -0,0 +1,15 @@
+export function getGlobalThis(): any {
+  if (typeof globalThis !== 'undefined') {
+    return globalThis;
+  }
+  if (typeof window !== 'undefined') {
+    return window;
+  }
+  if (typeof global !== 'undefined') {
+    return global;
+  }
+  if (typeof self !== 'undefined') {
+    return self;
+  }
+  return null;
+}

package/src/functions/get-processed-block.test.ts

@@ -0,0 +1,33 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+import { getProcessedBlock } from './get-processed-block.js';
+
+test('Can process bindings', () => {
+  const block: BuilderBlock = {
+    '@type': '@builder.io/sdk:Element',
+    properties: {
+      foo: 'bar',
+    },
+    bindings: {
+      'properties.foo': '"baz"',
+      'responsiveStyles.large.zIndex': '1 + 1',
+      'properties.test': 'state.test',
+      'properties.block': `
+        const foo = 'bar';
+        return foo;
+      `,
+      'properties.isEditing': 'builder.isEditing',
+    },
+  };
+  const processed = getProcessedBlock({
+    block,
+    context: {},
+    state: { test: 'hello' },
+    shouldEvaluateBindings: true,
+  });
+  expect(processed).not.toEqual(block);
+  expect(processed.properties?.foo).toEqual('baz');
+  expect(processed.properties?.test).toEqual('hello');
+  expect(processed.properties?.block).toEqual('bar');
+  expect(processed.properties?.isEditing).toEqual(false);
+  expect(processed.responsiveStyles?.large?.zIndex).toEqual(2);
+});

package/src/functions/get-processed-block.ts

@@ -0,0 +1,54 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { evaluate } from './evaluate.js';
+import { fastClone } from './fast-clone.js';
+import { set } from './set.js';
+import { transformBlock } from './transform-block.js';
+
+const evaluateBindings = ({
+  block,
+  context,
+  state,
+}: {
+  block: BuilderBlock;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): BuilderBlock => {
+  if (!block.bindings) {
+    return block;
+  }
+  const copy = fastClone(block);
+  const copied = {
+    ...copy,
+    properties: { ...copy.properties },
+    actions: { ...copy.actions },
+  };
+
+  for (const binding in block.bindings) {
+    const expression = block.bindings[binding];
+    const value = evaluate({ code: expression, state, context });
+    set(copied, binding, value);
+  }
+
+  return copied;
+};
+
+export function getProcessedBlock({
+  block,
+  context,
+  shouldEvaluateBindings,
+  state,
+}: {
+  block: BuilderBlock;
+  /**
+   * In some cases, we want to avoid evaluating bindings and only want framework-specific block transformation. It is
+   * also sometimes too early to consider bindings, e.g. when we might be looking at a repeated block.
+   */
+  shouldEvaluateBindings: boolean;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): BuilderBlock {
+  const transformedBlock = transformBlock(block);
+
+  if (shouldEvaluateBindings) {
+    return evaluateBindings({ block: transformedBlock, state, context });
+  } else {
+    return transformedBlock;
+  }
+}

package/src/functions/get-react-native-block-styles.ts

@@ -0,0 +1,30 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
+
+export function getReactNativeBlockStyles({
+  block,
+  context,
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}): CSSStyleDeclaration | Record<string, string | undefined> {
+  const responsiveStyles = block.responsiveStyles;
+  if (!responsiveStyles) {
+    return {};
+  }
+
+  const styles = {
+    // recursively apply inherited styles so that they can be passed down to children `Text` blocks
+    ...context.inheritedStyles,
+    ...(responsiveStyles.large || {}),
+    ...(responsiveStyles.medium || {}),
+    ...(responsiveStyles.small || {}),
+  } as Record<string, string | number>;
+
+  const newStyles = sanitizeReactNativeBlockStyles(
+    styles
+  ) as any as CSSStyleDeclaration;
+
+  return newStyles;
+}

package/src/functions/if-target.ts

@@ -0,0 +1,20 @@
+import { TARGET } from '../constants/target.js';
+
+type Target = import('../types/targets').Target;
+
+// TODO: babel compile to include certain code only if the target matches
+export function ifTarget<A, B>({
+  targets,
+  doThing,
+  elseThing,
+}: {
+  targets: Target[];
+  doThing: () => A;
+  elseThing?: () => B;
+}) {
+  if (TARGET && targets.includes(TARGET)) {
+    return doThing();
+  } else {
+    return elseThing?.();
+  }
+}

package/src/functions/is-browser.ts

@@ -0,0 +1,3 @@
+export function isBrowser(): boolean {
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
+}

package/src/functions/is-editing.ts

@@ -0,0 +1,7 @@
+import { isIframe } from './is-iframe.js';
+
+export function isEditing(): boolean {
+  return (
+    isIframe() && window.location.search.indexOf('builder.frameEditing=') !== -1
+  );
+}

package/src/functions/is-iframe.ts

@@ -0,0 +1,5 @@
+import { isBrowser } from './is-browser.js';
+
+export function isIframe(): boolean {
+  return isBrowser() && window.self !== window.top;
+}

package/src/functions/is-previewing.ts

@@ -0,0 +1,14 @@
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+
+export function isPreviewing() {
+  if (!isBrowser()) {
+    return false;
+  }
+
+  if (isEditing()) {
+    return false;
+  }
+
+  return Boolean(location.search.indexOf('builder.preview=') !== -1);
+}

package/src/functions/mark-mutable.ts

@@ -0,0 +1,7 @@
+export function markMutable<T = any>(value: T): T {
+  return value;
+}
+
+export function markPropsMutable<T = any>(props: T): T {
+  return props;
+}

package/src/functions/on-change.test.ts

@@ -0,0 +1,23 @@
+import { onChange } from './on-change.js';
+
+test('onChange can observe a shallow change', () => {
+  let changeHappend = false;
+  const obj = onChange({ foo: 'hi' }, () => (changeHappend = true));
+  obj.foo = 'yo';
+  expect(changeHappend).toBe(true);
+});
+
+test('onChange can observe a deep change', () => {
+  let changeHappend = false;
+  const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
+  obj.foo.bar = 'yo';
+  expect(changeHappend).toBe(true);
+});
+
+test('Smoke test: callback is not fired if no properties updated', () => {
+  let changeHappend = false;
+  const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
+  // Access some properties
+  obj.foo.bar;
+  expect(changeHappend).toBe(false);
+});

package/src/functions/on-change.ts

@@ -0,0 +1,29 @@
+export const onChangeProxySymbol = Symbol('onChangeProxySymbol');
+
+/**
+ * Deeply observe an object and run a callback when it changes
+ *
+ * See ./on-change.test.ts for more info
+ */
+export function onChange<T extends object = any>(obj: T, cb: () => void): T {
+  return new Proxy(obj, {
+    get(target, key) {
+      if (key === onChangeProxySymbol) {
+        return true;
+      }
+      const value = Reflect.get(target, key);
+      if (value && typeof value === 'object') {
+        if (value[onChangeProxySymbol]) {
+          return value;
+        }
+        return onChange(value, cb);
+      }
+      return value;
+    },
+    set(target, key, value) {
+      const returnValue = Reflect.set(target, key, value);
+      cb();
+      return returnValue;
+    },
+  });
+}