@builder.io/sdk-svelte 0.4.5 → 0.5.1

package/src/blocks/util.ts

@@ -1,18 +0,0 @@
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const serializeFn = (fnValue: Function) => {
-  const fnStr = fnValue.toString().trim();
-
-  // we need to account for a few different fn syntaxes:
-  // 1. `function name(args) => {code}`
-  // 2. `name(args) => {code}`
-  // 3. `(args) => {}`
-  const appendFunction =
-    !fnStr.startsWith('function') && !fnStr.startsWith('(');
-
-  return `return (${
-    appendFunction ? 'function ' : ''
-  }${fnStr}).apply(this, arguments)`;
-};

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

@@ -1,173 +0,0 @@
-<script context="module" lang="ts">
-  export type RenderBlockProps = {
-    block: BuilderBlock;
-    context: Writable<BuilderContextInterface>;
-  };
-</script>
-
-<script lang="ts">
-  import { writable } from "svelte/store";
-
-  import type { BuilderContextInterface } from "../../context/types.js";
-  import { getBlockActions } from "../../functions/get-block-actions.js";
-  import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-  import { getBlockProperties } from "../../functions/get-block-properties.js";
-  import { getProcessedBlock } from "../../functions/get-processed-block.js";
-  import type { BuilderBlock } from "../../types/builder-block.js";
-  import BlockStyles from "./block-styles.svelte";
-  import {
-    getComponent,
-    getRepeatItemData,
-    isEmptyHtmlElement,
-  } from "./render-block.helpers.js";
-  import type { RenderComponentProps } from "./render-component.svelte";
-  import RenderRepeatedBlock from "./render-repeated-block.svelte";
-  import { TARGET } from "../../constants/target.js";
-  import { extractTextStyles } from "../../functions/extract-text-styles.js";
-  import RenderComponent from "./render-component.svelte";
-  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-  import type { Writable } from "svelte/store";
-
-  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 block: RenderBlockProps["block"];
-  export let context: RenderBlockProps["context"];
-
-  $: repeatItem = () => {
-    return getRepeatItemData({
-      block: block,
-      context: $context,
-    });
-  };
-  $: useBlock = () => {
-    return repeatItem()
-      ? block
-      : getProcessedBlock({
-          block: block,
-          localState: $context.localState,
-          rootState: $context.rootState,
-          rootSetState: $context.rootSetState,
-          context: $context.context,
-          shouldEvaluateBindings: true,
-        });
-  };
-  $: canShowBlock = () => {
-    if ("hide" in useBlock()) {
-      return !useBlock().hide;
-    }
-    if ("show" in useBlock()) {
-      return useBlock().show;
-    }
-    return true;
-  };
-  $: actions = () => {
-    return getBlockActions({
-      block: useBlock(),
-      rootState: $context.rootState,
-      rootSetState: $context.rootSetState,
-      localState: $context.localState,
-      context: $context.context,
-    });
-  };
-  $: attributes = () => {
-    const blockProperties = getBlockProperties(useBlock());
-    return {
-      ...blockProperties,
-      ...(TARGET === "reactNative"
-        ? {
-            style: getReactNativeBlockStyles({
-              block: useBlock(),
-              context: $context,
-              blockStyles: blockProperties.style,
-            }),
-          }
-        : {}),
-    };
-  };
-  $: childrenWithoutParentComponent = () => {
-    /**
-     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
-     * we render them outside of `componentRef`.
-     * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
-     * blocks, and the children will be repeated within those blocks.
-     */
-    const shouldRenderChildrenOutsideRef =
-      !component?.component && !repeatItem();
-    return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
-  };
-  $: renderComponentProps = () => {
-    return {
-      blockChildren: useBlock().children ?? [],
-      componentRef: component?.component,
-      componentOptions: {
-        ...getBlockComponentOptions(useBlock()),
-        /**
-         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-         * they are provided to the component itself directly.
-         */
-        ...(!component?.noWrap
-          ? {}
-          : {
-              attributes: {
-                ...attributes(),
-                ...actions(),
-              },
-            }),
-      },
-      context: childrenContext,
-    };
-  };
-
-  let component = getComponent({
-    block: block,
-    context: $context,
-  });
-  let Tag = block.tagName || "div";
-  let childrenContext = writable($context);
-</script>
-
-{#if canShowBlock()}
-  {#if !component?.noWrap}
-    {#if isEmptyHtmlElement(Tag)}
-      <svelte:element this={Tag} {...attributes()} use:setAttrs={actions()} />
-    {/if}
-
-    {#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()}>
-        <RenderComponent {...renderComponentProps()} />
-
-        {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
-          <svelte:self block={child} context={childrenContext} />
-        {/each}
-
-        {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
-          <BlockStyles block={child} context={$childrenContext} />
-        {/each}
-      </svelte:element>
-    {/if}
-  {:else}
-    <RenderComponent {...renderComponentProps()} />
-  {/if}
-{/if}

package/src/components/render-block/render-component.svelte

@@ -1,40 +0,0 @@
-<script context="module" lang="ts">
-  type ComponentOptions = {
-    [index: string]: any;
-    attributes?: {
-      [index: string]: any;
-    };
-  };
-
-  export interface RenderComponentProps {
-    componentRef: any;
-    componentOptions: ComponentOptions;
-    blockChildren: BuilderBlock[];
-    context: Writable<BuilderContextInterface>;
-  }
-</script>
-
-<script lang="ts">
-  import type { BuilderBlock } from "../../types/builder-block.js";
-  import BlockStyles from "./block-styles.svelte";
-  import RenderBlock from "./render-block.svelte";
-  import type { BuilderContextInterface } from "../../context/types.js";
-  import type { Writable } from "svelte/store";
-
-  export let componentRef: RenderComponentProps["componentRef"];
-  export let componentOptions: RenderComponentProps["componentOptions"];
-  export let blockChildren: RenderComponentProps["blockChildren"];
-  export let context: RenderComponentProps["context"];
-</script>
-
-{#if componentRef}
-  <svelte:component this={componentRef} {...componentOptions}>
-    {#each blockChildren as child ("render-block-" + child.id)}
-      <RenderBlock block={child} {context} />
-    {/each}
-
-    {#each blockChildren as child ("block-style-" + child.id)}
-      <BlockStyles block={child} context={$context} />
-    {/each}
-  </svelte:component>
-{/if}

package/src/components/render-block/render-repeated-block.svelte

@@ -1,25 +0,0 @@
-<script context="module" lang="ts">
-  type Props = {
-    block: BuilderBlock;
-    repeatContext: BuilderContextInterface;
-  };
-</script>
-
-<script lang="ts">
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-
-  import BuilderContext from "../../context/builder.context.js";
-  import type { BuilderContextInterface } from "../../context/types.js";
-  import type { BuilderBlock } from "../../types/builder-block";
-  import RenderBlock from "./render-block.svelte";
-
-  export let repeatContext: Props["repeatContext"];
-  export let block: Props["block"];
-
-  let store = writable(repeatContext);
-
-  setContext(BuilderContext.key, store);
-</script>
-
-<RenderBlock {block} context={store} />

package/src/components/render-content/builder-editing.svelte

@@ -1,4 +0,0 @@
-<script lang="ts">
-</script>
-
-<div />

package/src/components/render-content/index.ts

@@ -1 +0,0 @@
-export { default } from './render-content.svelte';

package/src/components/render-content/render-content.helpers.ts

@@ -1,48 +0,0 @@
-import type { BuilderRenderState } from '../../context/types';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { RenderContentProps } from './render-content.types';
-
-export const getContextStateInitialValue = ({
-  content,
-  data,
-  locale,
-}: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
-  const defaultValues: BuilderRenderState = {};
-
-  // set default values for content state inputs
-  content?.data?.inputs?.forEach((input) => {
-    if (
-      input.name &&
-      input.defaultValue !== undefined &&
-      content?.data?.state &&
-      content.data.state[input.name] === undefined
-    ) {
-      defaultValues[input.name] = input.defaultValue;
-    }
-  });
-
-  const stateToUse: BuilderRenderState = {
-    ...content?.data?.state,
-    ...data,
-    ...(locale ? { locale } : {}),
-  };
-
-  return { ...defaultValues, ...stateToUse };
-};
-
-export const getContentInitialValue = ({
-  content,
-  data,
-}: Pick<RenderContentProps, 'content' | 'data'>): Nullable<BuilderContent> => {
-  return !content
-    ? undefined
-    : {
-        ...content,
-        data: {
-          ...content?.data,
-          ...data,
-        },
-        meta: content?.meta,
-      };
-};

package/src/functions/evaluate.test.ts

@@ -1,21 +0,0 @@
-import { flattenState } from './evaluate';
-
-describe('flatten state', () => {
-  it('should behave normally when no PROTO_STATE', () => {
-    const localState = {};
-    const rootState = { foo: 'bar' };
-    const flattened = flattenState(rootState, localState, undefined);
-    expect(flattened.foo).toEqual('bar');
-    flattened.foo = 'baz';
-    expect(rootState.foo).toEqual('baz');
-  });
-
-  it('should shadow write ', () => {
-    const rootState = { foo: 'foo' };
-    const localState = { foo: 'baz' };
-    const flattened = flattenState(rootState, localState, undefined);
-    expect(() => (flattened.foo = 'bar')).toThrow(
-      'Writing to local state is not allowed as it is read-only.'
-    );
-  });
-});

package/src/functions/evaluate.ts

@@ -1,99 +0,0 @@
-import type {
-  BuilderContextInterface,
-  BuilderRenderState,
-} from '../context/types.js';
-import { isBrowser } from './is-browser.js';
-import { isEditing } from './is-editing.js';
-
-export function evaluate({
-  code,
-  context,
-  localState,
-  rootState,
-  rootSetState,
-  event,
-  isExpression = true,
-}: {
-  code: string;
-  event?: Event;
-  isExpression?: boolean;
-} & Pick<
-  BuilderContextInterface,
-  'localState' | 'context' | 'rootState' | 'rootSetState'
->): 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 =
-    // we disable this for cases where we definitely don't want a return
-    isExpression &&
-    !(
-      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,
-      flattenState(rootState, localState, rootSetState),
-      context,
-      event
-    );
-  } catch (e) {
-    console.warn(
-      'Builder custom code error: \n While Evaluating: \n ',
-      useCode,
-      '\n',
-      e
-    );
-  }
-}
-
-export function flattenState(
-  rootState: Record<string | symbol, any>,
-  localState: Record<string | symbol, any> | undefined,
-  rootSetState: ((rootState: BuilderRenderState) => void) | undefined
-): BuilderRenderState {
-  if (rootState === localState) {
-    throw new Error('rootState === localState');
-  }
-  return new Proxy(rootState, {
-    get: (_, prop) => {
-      if (localState && prop in localState) {
-        return localState[prop];
-      }
-      return rootState[prop as string];
-    },
-    set: (_, prop, value) => {
-      if (localState && prop in localState) {
-        throw new Error(
-          'Writing to local state is not allowed as it is read-only.'
-        );
-      }
-      rootState[prop as string] = value;
-      rootSetState?.(rootState);
-      return true;
-    },
-  });
-}

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

@@ -1,19 +0,0 @@
-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-content/generate-content-url.test.ts

@@ -1,112 +0,0 @@
-import { generateContentUrl } from './generate-content-url';
-import type { GetContentOptions } from './types';
-
-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();
-  });
-
-  test('generate content url with apiVersion as default', () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options,
-    });
-    expect(output).toMatchSnapshot();
-  });
-
-  test('generate content url with apiVersion as v2', () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options,
-      apiVersion: 'v2',
-    });
-    expect(output).toMatchSnapshot();
-  });
-
-  test('generate content url with apiVersion as v3', () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options,
-      apiVersion: 'v3',
-    });
-    expect(output).toMatchSnapshot();
-  });
-
-  test('throw error when trying to generate content url with apiVersion as v1', () => {
-    expect(() => {
-      generateContentUrl({
-        apiKey: testKey,
-        model: testModel,
-        query: { id: testId },
-        options,
-        apiVersion: 'v1' as GetContentOptions['apiVersion'],
-      });
-    }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
-  });
-
-  test('throw error when trying to generate content url with an invalid apiVersion value', () => {
-    expect(() => {
-      generateContentUrl({
-        apiKey: testKey,
-        model: testModel,
-        query: { id: testId },
-        options,
-        apiVersion: 'INVALID_API_VERSION' as GetContentOptions['apiVersion'],
-      });
-    }).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-processed-block.test.ts

@@ -1,35 +0,0 @@
-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: {},
-    rootState: { test: 'hello' },
-    rootSetState: undefined,
-    localState: undefined,
-    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/on-change.test.ts

@@ -1,23 +0,0 @@
-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/set.test.ts

@@ -1,19 +0,0 @@
-import { set } from './set.js';
-
-test('can shallow set a property', () => {
-  const obj = { foo: 'bar' };
-  set(obj, 'foo', 'baz');
-  expect(obj.foo).toBe('baz');
-});
-
-test('can deeply set a property', () => {
-  const obj = { foo: 'bar' };
-  set(obj, 'foo.bar', 'baz');
-  expect((obj.foo as any).bar).toBe('baz');
-});
-
-test('can deeply create arrays', () => {
-  const obj = { foo: 'bar' };
-  set(obj, 'foo.bar.0', 'hi');
-  expect((obj.foo as any).bar).toEqual(['hi']);
-});

package/src/helpers/url.test.ts

@@ -1,23 +0,0 @@
-import { getTopLevelDomain } from './url.js';
-
-describe('getTopLevelDomain', () => {
-  test('handles root domain', () => {
-    const output = getTopLevelDomain('example.com');
-    expect(output).toBe('example.com');
-  });
-  test('handles subdomain', () => {
-    const output = getTopLevelDomain('wwww.example.com');
-    expect(output).toBe('example.com');
-  });
-  test('handles subdomain with long suffix', () => {
-    const output = getTopLevelDomain('www.example.co.uk');
-    expect(output).toBe('example.co.uk');
-  });
-  test('handles localhost', () => {
-    const output = getTopLevelDomain('localhost');
-    expect(output).toBe('localhost');
-
-    const output2 = getTopLevelDomain('127.0.0.1');
-    expect(output2).toBe('127.0.0.1');
-  });
-});