@builder.io/sdk-svelte 0.4.4 → 0.5.0

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

@@ -1,97 +0,0 @@
-import { generateContentUrl } from './generate-content-url';
-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',
-            });
-        }).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',
-            });
-        }).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-processed-block.test.js

@@ -1,33 +0,0 @@
-import { getProcessedBlock } from './get-processed-block.js';
-test('Can process bindings', () => {
-    const block = {
-        '@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/package/functions/on-change.test.d.ts

@@ -1 +0,0 @@
-export {};

package/package/functions/on-change.test.js

@@ -1,20 +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/package/functions/set.test.d.ts

@@ -1 +0,0 @@
-export {};

package/package/functions/set.test.js

@@ -1,16 +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.bar).toBe('baz');
-});
-test('can deeply create arrays', () => {
-    const obj = { foo: 'bar' };
-    set(obj, 'foo.bar.0', 'hi');
-    expect(obj.foo.bar).toEqual(['hi']);
-});

package/package/helpers/url.test.d.ts

@@ -1 +0,0 @@
-export {};

package/package/helpers/url.test.js

@@ -1,21 +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');
-    });
-});

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/components/render-content/render-content.types.ts

@@ -1,42 +0,0 @@
-import type {
-  BuilderRenderContext,
-  RegisteredComponent,
-  BuilderRenderState,
-} from '../../context/types';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { ApiVersion } from '../../types/api-version';
-
-export interface RenderContentProps {
-  content?: Nullable<BuilderContent>;
-  model?: string;
-  data?: { [key: string]: any };
-  context?: BuilderRenderContext;
-  apiKey: string;
-  apiVersion?: ApiVersion;
-  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: {
-    name?: string;
-    props?: {
-      builderBlock?: {
-        id?: string;
-      };
-    };
-  };
-}

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

@@ -1,83 +0,0 @@
-<script context="module" lang="ts">
-  type VariantsProviderProps = RenderContentProps;
-</script>
-
-<script lang="ts">
-  import {
-    checkShouldRunVariants,
-    getVariants,
-    getVariantsScriptString,
-  } from "./helpers";
-  import RenderContent from "../render-content/render-content.svelte";
-  import type { RenderContentProps } from "../render-content/render-content.types";
-  import { getDefaultCanTrack } from "../../helpers/canTrack";
-  import RenderInlinedStyles from "../render-inlined-styles.svelte";
-  import { handleABTestingSync } from "../../helpers/ab-tests";
-
-  export let content: VariantsProviderProps["content"];
-  export let canTrack: VariantsProviderProps["canTrack"];
-  export let apiKey: VariantsProviderProps["apiKey"];
-  export let apiVersion: VariantsProviderProps["apiVersion"];
-  export let customComponents: VariantsProviderProps["customComponents"];
-  export let model: VariantsProviderProps["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/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.'
-    );
-  });
-});