@builder.io/sdk-svelte 0.0.3 → 0.0.5

package/{package/components/render-inlined-styles.lite.tsx → src/components/render-inlined-styles.svelte}

@@ -12,7 +12,6 @@
   $: injectedStyleScript = () => {
     return `<${tagName()}>${styles}</${tagName()}>`;
   };
-
   $: tagName = () => {
     // NOTE: we have to obfusctate 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

package/src/constants/builder-registered-components.ts

@@ -0,0 +1,42 @@
+import { default as Button } from '../blocks/button/button.svelte';
+import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
+import { default as Columns } from '../blocks/columns/columns.svelte';
+import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
+import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
+import { default as Fragment } from '../blocks/fragment/fragment.svelte';
+import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
+import { default as Image } from '../blocks/image/image.svelte';
+import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
+import { default as Section } from '../blocks/section/section.svelte';
+import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
+import { default as Symbol } from '../blocks/symbol/symbol.svelte';
+import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
+import { default as Text } from '../blocks/text/text.svelte';
+import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
+import { default as Video } from '../blocks/video/video.svelte';
+import type { RegisteredComponent } from '../context/types.js';
+import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
+import { default as embed } from '../blocks/embed/embed.svelte';
+import { default as Img } from '../blocks/img/img.svelte';
+import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code.svelte';
+import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
+
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */
+export const getDefaultRegisteredComponents: () => RegisteredComponent[] =
+  () => [
+    { component: Columns, ...columnsComponentInfo },
+    { component: Image, ...imageComponentInfo },
+    { component: Img, ...imgComponentInfo },
+    { component: Text, ...textComponentInfo },
+    { component: Video, ...videoComponentInfo },
+    { component: Symbol, ...symbolComponentInfo },
+    { component: Button, ...buttonComponentInfo },
+    { component: Section, ...sectionComponentInfo },
+    { component: Fragment, ...fragmentComponentInfo },
+    { component: embed, ...embedComponentInfo },
+    { component: customCode, ...customCodeInfo },
+  ];

package/src/constants/device-sizes.ts

@@ -0,0 +1,28 @@
+export type SizeName = 'large' | 'medium' | 'small';
+
+interface Size {
+  min: number;
+  default: number;
+  max: number;
+}
+
+const SIZES: Record<SizeName, Size> = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640,
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991,
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200,
+  },
+};
+
+export const getMaxWidthQueryForSize = (size: SizeName) =>
+  `@media (max-width: ${SIZES[size].max}px)`;

package/src/constants/target.ts

@@ -0,0 +1,2 @@
+/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
+export const TARGET = 'svelte';

package/src/context/builder.context.ts

@@ -0,0 +1,13 @@
+const key = Symbol();
+
+export default {
+  Builder: {
+    content: null,
+    context: {},
+    state: {},
+    apiKey: null,
+    registeredComponents: {},
+    inheritedStyles: {},
+  },
+  key,
+};

package/src/context/types.ts

@@ -0,0 +1,23 @@
+import type { BuilderContent } from '../types/builder-content.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Dictionary, Nullable } from '../types/typescript.js';
+
+export type RegisteredComponent = ComponentInfo & {
+  component: any;
+};
+
+export type RegisteredComponents = Dictionary<RegisteredComponent>;
+
+export type BuilderRenderState = Record<string, unknown>;
+
+export type BuilderRenderContext = Record<string, unknown>;
+
+export interface BuilderContextInterface {
+  content: Nullable<BuilderContent>;
+  context: BuilderRenderContext;
+  state: BuilderRenderState;
+  apiKey: string | null;
+  registeredComponents: RegisteredComponents;
+  // Used to recursively store all CSS coming from a parent that would apply to a Text block
+  inheritedStyles: Record<string, unknown>;
+}

package/src/functions/camel-to-kebab-case.ts

@@ -0,0 +1,2 @@
+export const camelToKebabCase = (string: string) =>
+  string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();

package/src/functions/evaluate.ts

@@ -0,0 +1,52 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+
+export function evaluate({
+  code,
+  context,
+  state,
+  event,
+}: {
+  code: string;
+  event?: Event;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): any {
+  if (code === '') {
+    console.warn('Skipping evaluation of empty code block.');
+    return;
+  }
+
+  const builder = {
+    isEditing: isEditing(),
+    isBrowser: isBrowser(),
+    isServer: !isBrowser(),
+  };
+
+  // Be able to handle simple expressions like "state.foo" or "1 + 1"
+  // as well as full blocks like "var foo = "bar"; return foo"
+  const useReturn = !(
+    code.includes(';') ||
+    code.includes(' return ') ||
+    code.trim().startsWith('return ')
+  );
+
+  const useCode = useReturn ? `return (${code});` : code;
+
+  try {
+    return new Function(
+      'builder',
+      'Builder' /* <- legacy */,
+      'state',
+      'context',
+      'event',
+      useCode
+    )(builder, builder, state, context, event);
+  } catch (e) {
+    console.warn(
+      'Builder custom code error: \n While Evaluating: \n ',
+      useCode,
+      '\n',
+      (e as any).message || e
+    );
+  }
+}

package/src/functions/event-handler-name.ts

@@ -0,0 +1,6 @@
+function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export const getEventHandlerName = (key: string) =>
+  `on${capitalizeFirstLetter(key)}`;

package/src/functions/extract-text-styles.ts

@@ -0,0 +1,39 @@
+const TEXT_STYLE_KEYS = [
+  'color',
+  'whiteSpace',
+  'direction',
+  'hyphens',
+  'overflowWrap',
+];
+
+/**
+ * Check if the key represent a CSS style property that applies to text
+ * See MDN docs for refrence of what properties apply to text.
+ * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#summary
+ */
+const isTextStyle = (key: string) => {
+  return (
+    TEXT_STYLE_KEYS.includes(key) ||
+    key.startsWith('font') ||
+    key.startsWith('text') ||
+    key.startsWith('letter') ||
+    key.startsWith('line') ||
+    key.startsWith('word') ||
+    key.startsWith('writing')
+  );
+};
+
+/**
+ * Extract styles that apply to text from a style object.
+ */
+export const extractTextStyles = (styles: Partial<CSSStyleDeclaration>) => {
+  const textStyles: Partial<CSSStyleDeclaration> = {};
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Object.entries(styles).forEach(([key, value]: [any, any]) => {
+    if (isTextStyle(key)) {
+      textStyles[key] = value;
+    }
+  });
+
+  return textStyles;
+};

package/src/functions/fast-clone.ts

@@ -0,0 +1,5 @@
+/**
+ * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
+ */
+export const fastClone = <T extends object>(obj: T): T =>
+  JSON.parse(JSON.stringify(obj));

package/src/functions/get-block-actions-handler.ts

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

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

@@ -0,0 +1,25 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { getEventHandlerName } from './event-handler-name.js';
+import { crateEventHandler } from './get-block-actions-handler.js';
+
+type Actions = { [index: string]: (event: Event) => any };
+
+export function getBlockActions(
+  options: {
+    block: BuilderBlock;
+  } & Pick<BuilderContextInterface, 'state' | 'context'>
+): Actions {
+  const obj: Actions = {};
+  const optionActions = options.block.actions ?? {};
+
+  for (const key in optionActions) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!optionActions.hasOwnProperty(key)) {
+      continue;
+    }
+    const value = optionActions[key];
+    obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+  }
+  return obj;
+}

package/src/functions/get-block-component-options.ts

@@ -0,0 +1,12 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+
+export function getBlockComponentOptions(block: BuilderBlock) {
+  return {
+    ...block.component?.options,
+    ...(block as any).options,
+    /**
+     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+     */
+    builderBlock: block,
+  };
+}

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

@@ -0,0 +1,11 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+
+export function getBlockProperties(block: BuilderBlock) {
+  return {
+    ...block.properties,
+    'builder-id': block.id,
+    class: [block.id, 'builder-block', block.class, block.properties?.class]
+      .filter(Boolean)
+      .join(' '),
+  };
+}

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

@@ -0,0 +1,7 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+
+export type TagName = string;
+
+export function getBlockTag(block: BuilderBlock): TagName {
+  return block.tagName || 'div';
+}

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