@builder.io/sdk-svelte 0.2.3 → 0.4.0

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

@@ -42,6 +42,37 @@
   } from "./render-content.helpers.js";
   import { TARGET } from "../../constants/target.js";
   import { logger } from "../../helpers/logger.js";
+  import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
+  import { wrapComponentRef } from "./wrap-component-ref.js";
+
+  const isEvent = (attr) => attr.startsWith("on:");
+  const isNonEvent = (attr) => !attr.startsWith("on:");
+  const filterAttrs = (attrs = {}, filter) => {
+    const validAttr = {};
+    Object.keys(attrs).forEach((attr) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    return validAttr;
+  };
+  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 content: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
@@ -51,7 +82,12 @@
   export let model: RenderContentProps["model"];
   export let context: RenderContentProps["context"];
   export let apiKey: RenderContentProps["apiKey"];
+  export let parentContentId: RenderContentProps["parentContentId"];
+  export let hideContent: RenderContentProps["hideContent"];
+  export let classNameProp: RenderContentProps["classNameProp"];
+  export let isSsrAbTest: RenderContentProps["isSsrAbTest"];
   export let includeRefs: RenderContentProps["includeRefs"];
+  export let enrich: RenderContentProps["enrich"];
   export let apiVersion: RenderContentProps["apiVersion"];
 
   function mergeNewContent(newContent: BuilderContent) {
@@ -79,8 +115,8 @@
       },
     };
   }
-  function setContextState(newState: BuilderRenderState) {
-    contentState = newState;
+  function contentSetState(newRootState: BuilderRenderState) {
+    contentState = newRootState;
   }
   function processMessage(event: MessageEvent) {
     const { data } = event;
@@ -127,7 +163,9 @@
       evaluate({
         code: jsCode,
         context: context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       });
     }
   }
@@ -154,7 +192,9 @@
       evaluate({
         code: group,
         context: context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       })
     );
   }
@@ -166,7 +206,7 @@
           ...contentState,
           [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -229,14 +269,22 @@
     ...components,
     ...(customComponents || []),
   ].reduce(
-    (acc, curr) => ({
+    (acc, { component, ...curr }) => ({
       ...acc,
-      [curr.name]: curr,
+      [curr.name]: {
+        component: TARGET === "vue3" ? wrapComponentRef(component) : component,
+        ...curr,
+      },
     }),
     {} as RegisteredComponents
   );
   let httpReqsData = {};
   let clicked = false;
+  let scriptStr = getRenderContentScriptString({
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+    contentId: content?.id!,
+    parentContentId: parentContentId!,
+  });
 
   onMount(() => {
     if (!apiKey) {
@@ -259,6 +307,11 @@
                 includeRefs: includeRefs,
               }
             : {}),
+          ...(enrich
+            ? {
+                enrich: enrich,
+              }
+            : {}),
         });
         Object.values<RegisteredComponent>(allRegisteredComponents).forEach(
           (registeredComponent) => {
@@ -348,11 +401,14 @@
     get content() {
       return useContent;
     },
-    get state() {
+    get localState() {
+      return undefined;
+    },
+    get rootState() {
       return contentState;
     },
-    get setState() {
-      return setContextState;
+    get rootSetState() {
+      return TARGET === "qwik" ? undefined : contentSetState;
     },
     get context() {
       return context || {};
@@ -390,7 +446,42 @@
     }}
     builder-content-id={useContent?.id}
     builder-model={model}
+    {...filterAttrs(
+      TARGET === "reactNative"
+        ? {
+            dataSet: {
+              // currently, we can't set the actual ID here.
+              // we don't need it right now, we just need to identify content divs for testing.
+              "builder-content-id": "",
+            },
+          }
+        : {},
+      isNonEvent
+    )}
+    {...hideContent
+      ? {
+          hidden: true,
+          "aria-hidden": true,
+        }
+      : {}}
+    class={classNameProp}
+    use:setAttrs={filterAttrs(
+      TARGET === "reactNative"
+        ? {
+            dataSet: {
+              // currently, we can't set the actual ID here.
+              // we don't need it right now, we just need to identify content divs for testing.
+              "builder-content-id": "",
+            },
+          }
+        : {},
+      isEvent
+    )}
   >
+    {#if isSsrAbTest}
+      <svelte:element this={"script"}>{@html scriptStr}</svelte:element>
+    {/if}
+
     {#if TARGET !== "reactNative"}
       <RenderContentStyles
         contentId={useContent?.id}

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

@@ -7,7 +7,7 @@ import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
 import type { ApiVersion } from '../../types/api-version';
 
-export type RenderContentProps = {
+export interface RenderContentProps {
   content?: Nullable<BuilderContent>;
   model?: string;
   data?: { [key: string]: any };
@@ -17,8 +17,17 @@ export type RenderContentProps = {
   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;

package/src/components/render-content/wrap-component-ref.ts

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export const wrapComponentRef = (component: any) => component;

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

@@ -0,0 +1,245 @@
+import { isBrowser } from '../../functions/is-browser';
+import type { Nullable } from '../../helpers/nullable';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Target } from '../../types/targets';
+
+export const getVariants = (content: Nullable<BuilderContent>) =>
+  Object.values(content?.variations || {});
+
+export const checkShouldRunVariants = ({
+  canTrack,
+  content,
+}: {
+  canTrack: Nullable<boolean>;
+  content: Nullable<BuilderContent>;
+}) => {
+  const hasVariants = getVariants(content).length > 0;
+
+  if (!hasVariants) {
+    return false;
+  }
+
+  if (!canTrack) {
+    return false;
+  }
+
+  if (isBrowser()) {
+    return false;
+  }
+
+  return true;
+};
+
+type VariantData = {
+  id: string;
+  testRatio?: number;
+};
+
+/**
+ * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
+ * Make sure to write multi-line comments only.
+ */
+function bldrAbTest(
+  contentId: string,
+  variants: VariantData[],
+  isHydrationTarget: boolean
+) {
+  function getAndSetVariantId(): string {
+    function setCookie(name: string, value: string, days?: number) {
+      let expires = '';
+      if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+        expires = '; expires=' + date.toUTCString();
+      }
+      document.cookie =
+        name +
+        '=' +
+        (value || '') +
+        expires +
+        '; path=/' +
+        '; Secure; SameSite=None';
+    }
+    function getCookie(name: string) {
+      const nameEQ = name + '=';
+      const ca = document.cookie.split(';');
+      for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) === 0)
+          return c.substring(nameEQ.length, c.length);
+      }
+      return null;
+    }
+    const cookieName = `builder.tests.${contentId}`;
+    const variantInCookie = getCookie(cookieName);
+    const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+    /**
+     * cookie already exists
+     */
+    if (variantInCookie && availableIDs.includes(variantInCookie)) {
+      return variantInCookie;
+    }
+
+    /**
+     * no cookie exists, find variant
+     */
+    let n = 0;
+    const random = Math.random();
+    for (let i = 0; i < variants.length; i++) {
+      const variant = variants[i];
+      const testRatio = variant.testRatio;
+      n += testRatio!;
+      if (random < n) {
+        setCookie(cookieName, variant.id);
+        return variant.id;
+      }
+    }
+
+    /**
+     * no variant found, assign default content
+     */
+    setCookie(cookieName, contentId);
+
+    return contentId;
+  }
+
+  const winningVariantId = getAndSetVariantId();
+
+  const styleEl = document.getElementById(
+    `variants-styles-${contentId}`
+  ) as HTMLStyleElement;
+
+  /**
+   * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
+   */
+  if (isHydrationTarget) {
+    styleEl.remove();
+    const thisScriptEl = document.getElementById(
+      `variants-script-${contentId}`
+    );
+    thisScriptEl?.remove();
+  } else {
+    /* update styles to hide all variants except the winning variant */
+    const newStyleStr = variants
+      .concat({ id: contentId })
+      .filter((variant) => variant.id !== winningVariantId)
+      .map((value) => {
+        return `.variant-${value.id} {  display: none; }
+        `;
+      })
+      .join('');
+
+    /* TO-DO: check if this actually updates the style */
+    styleEl.innerHTML = newStyleStr;
+  }
+}
+
+/**
+ * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
+ * Make sure to write multi-line comments only.
+ */
+function bldrCntntScrpt(
+  variantContentId: string,
+  defaultContentId: string,
+  isHydrationTarget: boolean
+) {
+  if (!navigator.cookieEnabled) {
+    return;
+  }
+
+  function getCookie(name: string) {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const cookieName = `builder.tests.${defaultContentId}`;
+  const variantId = getCookie(cookieName);
+
+  /** get parent div by searching on `builder-content-id` attr */
+  const parentDiv = document.querySelector(
+    `[builder-content-id="${variantContentId}"]`
+  );
+
+  const variantIsDefaultContent = variantContentId === defaultContentId;
+
+  if (variantId === variantContentId) {
+    if (variantIsDefaultContent) {
+      /** the default content is already visible, no need to do anything */
+      return;
+    }
+
+    /** this is the winning variant and not already visible: remove `hidden` and `aria-hidden` attr */
+
+    parentDiv?.removeAttribute('hidden');
+    parentDiv?.removeAttribute('aria-hidden');
+  } else {
+    if (variantIsDefaultContent) {
+      if (isHydrationTarget) {
+        /**
+         * For React to work, we need to support hydration, in which case the first CSR will have none of the hidden variants.
+         * So we completely remove that node.
+         */
+        parentDiv?.remove();
+      } else {
+        /** this is not the winning variant, add `hidden` attr */
+        parentDiv?.setAttribute('hidden', 'true');
+        parentDiv?.setAttribute('aria-hidden', 'true');
+      }
+    }
+
+    /** This is not the winning variant, and it's not the default content.
+     * There's no need to hide it, because it's already hidden.
+     */
+    return;
+  }
+
+  return;
+}
+
+const isHydrationTarget = (target: Target) =>
+  target === 'react' ||
+  target === 'reactNative' ||
+  target === 'vue3' ||
+  target === 'vue2';
+
+/**
+ * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
+ * Some bundlers will minify the fn name, etc.
+ *
+ * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
+ */
+const AB_TEST_FN_NAME = 'bldrAbTest';
+const CONTENT_FN_NAME = 'bldrCntntScrpt';
+
+export const getVariantsScriptString = (
+  variants: VariantData[],
+  contentId: string
+) => {
+  const fnStr = bldrAbTest.toString().replace(/\s+/g, ' ');
+  const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, ' ');
+
+  return `
+  const ${AB_TEST_FN_NAME} = ${fnStr}
+  const ${CONTENT_FN_NAME} = ${fnStr2}
+  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(
+    variants
+  )}, ${isHydrationTarget})
+  `;
+};
+
+export const getRenderContentScriptString = ({
+  parentContentId,
+  contentId,
+}: {
+  contentId: string;
+  parentContentId: string;
+}) => {
+  return `
+  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+};

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

@@ -0,0 +1,83 @@
+<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/components/render-inlined-styles.svelte

@@ -1,26 +1,13 @@
 <script context="module" lang="ts">
   interface Props {
     styles: string;
+    id?: string;
   }
 </script>
 
 <script lang="ts">
-  import { TARGET } from "../constants/target.js";
-
   export let styles: Props["styles"];
-
-  $: tag = () => {
-    // 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
-    return "sty" + "le";
-  };
-  $: injectedStyleScript = () => {
-    return `<${tag()}>${styles}</${tag()}>`;
-  };
+  export let id: Props["id"];
 </script>
 
-{#if TARGET === "svelte" || TARGET === "qwik"}
-  {@html injectedStyleScript()}
-{:else}
-  <svelte:element this={tag()}>{styles}</svelte:element>
-{/if}
+<svelte:element this={"sty" + "le"} {id}>{@html styles}</svelte:element>

package/src/constants/sdk-version.ts

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.4.0"

package/src/context/builder.context.ts

@@ -4,8 +4,9 @@ export default {
   Builder: {
     content: null,
     context: {},
-    state: {},
-    setState() {},
+    localState: undefined,
+    rootSetState() {},
+    rootState: {},
     apiKey: null,
     apiVersion: undefined,
     registeredComponents: {},

package/src/context/types.ts

@@ -16,8 +16,23 @@ export type BuilderRenderContext = Record<string, unknown>;
 export interface BuilderContextInterface {
   content: Nullable<BuilderContent>;
   context: BuilderRenderContext;
-  state: BuilderRenderState;
-  setState?: (state: BuilderRenderState) => void;
+  /**
+   * The state of the application.
+   *
+   * NOTE: see `localState` below to understand how it is different from `rootState`.
+   */
+  rootState: BuilderRenderState;
+  /**
+   * Some frameworks have a `setState` function which needs to be invoked to notify
+   * the framework of state change. (other frameworks don't in which case it is `undefined')
+   */
+  rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+  /**
+   * The local state of the current component. This is different from `rootState` in that
+   * it can be a child state created by a repeater containing local state.
+   * The `rootState` is where all of the state mutations are actually stored.
+   */
+  localState: BuilderRenderState | undefined;
   apiKey: string | null;
   apiVersion: ApiVersion | undefined;
   registeredComponents: RegisteredComponents;

package/src/functions/evaluate.test.ts

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