@builder.io/sdk-vue 0.5.9 → 0.6.1-0

package/vue2/src/components/content/content.vue

@@ -0,0 +1,205 @@
+<template>
+  <enable-editor
+    :content="content"
+    :model="model"
+    :context="context"
+    :apiKey="apiKey"
+    :canTrack="canTrack"
+    :locale="locale"
+    :includeRefs="includeRefs"
+    :enrich="enrich"
+    :classNameProp="classNameProp"
+    :showContent="showContent"
+    :builderContextSignal="builderContextSignal"
+    v-bind="{}"
+  >
+    <template v-if="isSsrAbTest">
+      <inlined-script :scriptStr="scriptStr"></inlined-script>
+    </template>
+
+    <template v-if="TARGET !== 'reactNative'">
+      <content-styles
+        :contentId="builderContextSignal.content?.id"
+        :cssCode="builderContextSignal.content?.data?.cssCode"
+        :customFonts="builderContextSignal.content?.data?.customFonts"
+      ></content-styles>
+    </template>
+
+    <blocks
+      :blocks="builderContextSignal.content?.data?.blocks"
+      :context="builderContextSignal"
+      :registeredComponents="registeredComponents"
+    ></blocks>
+  </enable-editor>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import type {
+  BuilderContextInterface,
+  BuilderRenderState,
+  RegisteredComponents,
+} from "../../context/types.js";
+import {
+  components,
+  serializeComponentInfo,
+} from "../../functions/register-component.js";
+const Blocks = () =>
+  import("../blocks/blocks.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component Blocks at ../blocks/blocks.vue",
+        err
+      );
+      throw err;
+    });
+const ContentStyles = () =>
+  import("./components/styles.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component ContentStyles at ./components/styles.vue",
+        err
+      );
+      throw err;
+    });
+import type { ContentProps } from "./content.types.js";
+import {
+  getContentInitialValue,
+  getContextStateInitialValue,
+} from "./content.helpers.js";
+import { TARGET } from "../../constants/target.js";
+import { getRenderContentScriptString } from "../content-variants/helpers.js";
+const EnableEditor = () =>
+  import("./components/enable-editor.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component EnableEditor at ./components/enable-editor.vue",
+        err
+      );
+      throw err;
+    });
+const InlinedScript = () =>
+  import("../inlined-script.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component InlinedScript at ../inlined-script.vue",
+        err
+      );
+      throw err;
+    });
+import { wrapComponentRef } from "./wrap-component-ref.js";
+import type { ComponentInfo } from "../../types/components.js";
+import type { Dictionary } from "../../types/typescript.js";
+import ComponentsContext from "../../context/components.context.js";
+
+export default defineComponent({
+  name: "content-component",
+  components: {
+    "enable-editor": EnableEditor,
+    "inlined-script": InlinedScript,
+    "content-styles": ContentStyles,
+    blocks: Blocks,
+  },
+  props: [
+    "content",
+    "customComponents",
+    "data",
+    "locale",
+    "context",
+    "apiKey",
+    "apiVersion",
+    "model",
+    "canTrack",
+    "includeRefs",
+    "enrich",
+    "classNameProp",
+    "showContent",
+    "isSsrAbTest",
+  ],
+
+  data() {
+    return {
+      scriptStr: getRenderContentScriptString({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+        variationId: this.content?.testVariationId!,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+        contentId: this.content?.id!,
+      }),
+      registeredComponents: [
+        ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...(this.customComponents || []),
+      ].reduce<RegisteredComponents>(
+        (acc, { component, ...info }) => ({
+          ...acc,
+          [info.name]: {
+            component: component,
+            ...serializeComponentInfo(info),
+          },
+        }),
+        {}
+      ),
+      builderContextSignal: {
+        content: getContentInitialValue({
+          content: this.content,
+          data: this.data,
+        }),
+        localState: undefined,
+        rootState: getContextStateInitialValue({
+          content: this.content,
+          data: this.data,
+          locale: this.locale,
+        }),
+        rootSetState: this.contentSetState,
+        context: this.context || {},
+        apiKey: this.apiKey,
+        apiVersion: this.apiVersion,
+        componentInfos: [
+          ...getDefaultRegisteredComponents(),
+          // While this `components` object is deprecated, we must maintain support for it.
+          // Since users are able to override our default components, we need to make sure that we do not break such
+          // existing usage.
+          // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+          // which is the new standard way of providing custom components, and must therefore take precedence.
+          ...components,
+          ...(this.customComponents || []),
+        ].reduce<Dictionary<ComponentInfo>>(
+          (acc, { component: _, ...info }) => ({
+            ...acc,
+            [info.name]: serializeComponentInfo(info),
+          }),
+          {}
+        ),
+        inheritedStyles: {},
+      },
+      TARGET,
+    };
+  },
+
+  provide() {
+    const _this = this;
+    return {
+      [ComponentsContext.key]: {
+        registeredComponents: _this.registeredComponents,
+      },
+    };
+  },
+
+  methods: {
+    contentSetState(newRootState: BuilderRenderState) {
+      this.builderContextSignal.rootState = newRootState;
+    },
+  },
+});
+</script>

package/vue2/src/components/content/index.ts

@@ -0,0 +1 @@
+export { default } from './content.vue'

package/vue2/src/components/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/vue2/src/components/content-variants/content-variants.types.ts

@@ -0,0 +1,20 @@
+import type { BuilderRenderContext, RegisteredComponent } from '../../context/types.js';
+import type { ApiVersion } from '../../types/api-version.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+export interface ContentVariantsPrps {
+  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;
+}

package/vue2/src/components/content-variants/content-variants.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <template v-if="!__isNestedRender && TARGET !== 'reactNative'">
+      <inlined-script :scriptStr="getScriptString()"></inlined-script>
+    </template>
+
+    <template v-if="shouldRenderVariants">
+      <inlined-styles
+        :id="`variants-styles-${content?.id}`"
+        :styles="hideVariantsStyleString"
+      ></inlined-styles>
+
+      <inlined-script :scriptStr="variantScriptStr"></inlined-script>
+
+      <content-component
+        v-for="(variant, index) in getVariants(content)"
+        :content="variant"
+        :showContent="false"
+        :classNameProp="undefined"
+        :model="model"
+        :data="data"
+        :context="context"
+        :apiKey="apiKey"
+        :apiVersion="apiVersion"
+        :customComponents="customComponents"
+        :canTrack="canTrack"
+        :locale="locale"
+        :includeRefs="includeRefs"
+        :enrich="enrich"
+        :isSsrAbTest="shouldRenderVariants"
+        :key="variant.testVariationId"
+      ></content-component>
+    </template>
+
+    <content-component
+      :content="defaultContent"
+      :classNameProp="`variant-${content?.id}`"
+      :showContent="true"
+      :model="model"
+      :data="data"
+      :context="context"
+      :apiKey="apiKey"
+      :apiVersion="apiVersion"
+      :customComponents="customComponents"
+      :canTrack="canTrack"
+      :locale="locale"
+      :includeRefs="includeRefs"
+      :enrich="enrich"
+      :isSsrAbTest="shouldRenderVariants"
+      v-bind="{
+        key: shouldRenderVariants.toString(),
+      }"
+    ></content-component>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  checkShouldRunVariants,
+  getScriptString,
+  getVariants,
+  getVariantsScriptString,
+} from "./helpers.js";
+const ContentComponent = () =>
+  import("../content/content.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component ContentComponent at ../content/content.vue",
+        err
+      );
+      throw err;
+    });
+import { getDefaultCanTrack } from "../../helpers/canTrack.js";
+const InlinedStyles = () =>
+  import("../inlined-styles.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component InlinedStyles at ../inlined-styles.vue",
+        err
+      );
+      throw err;
+    });
+import { handleABTestingSync } from "../../helpers/ab-tests.js";
+const InlinedScript = () =>
+  import("../inlined-script.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component InlinedScript at ../inlined-script.vue",
+        err
+      );
+      throw err;
+    });
+import { TARGET } from "../../constants/target.js";
+import type { ContentVariantsPrps } from "./content-variants.types.js";
+
+type VariantsProviderProps = ContentVariantsPrps & {
+  /**
+   * For internal use only. Do not provide this prop.
+   */
+  __isNestedRender?: boolean;
+};
+
+export default defineComponent({
+  name: "content-variants",
+  components: {
+    "inlined-script": InlinedScript,
+    "inlined-styles": InlinedStyles,
+    "content-component": ContentComponent,
+  },
+  props: [
+    "canTrack",
+    "content",
+    "__isNestedRender",
+    "model",
+    "data",
+    "context",
+    "apiKey",
+    "apiVersion",
+    "customComponents",
+    "locale",
+    "includeRefs",
+    "enrich",
+  ],
+
+  data() {
+    return {
+      shouldRenderVariants: checkShouldRunVariants({
+        canTrack: getDefaultCanTrack(this.canTrack),
+        content: this.content,
+      }),
+      getScriptString,
+      getVariants,
+      TARGET,
+    };
+  },
+
+  mounted() {
+    /**
+     * We unmount the non-winning variants post-hydration in Vue.
+     */
+    this.shouldRenderVariants = false;
+  },
+
+  computed: {
+    variantScriptStr() {
+      return getVariantsScriptString(
+        getVariants(this.content).map((value) => ({
+          id: value.testVariationId!,
+          testRatio: value.testRatio,
+        })),
+        this.content?.id || ""
+      );
+    },
+    hideVariantsStyleString() {
+      return getVariants(this.content)
+        .map((value) => `.variant-${value.testVariationId} { display: none; } `)
+        .join("");
+    },
+    defaultContent() {
+      return this.shouldRenderVariants
+        ? {
+            ...this.content,
+            testVariationId: this.content?.id,
+          }
+        : handleABTestingSync({
+            item: this.content,
+            canTrack: getDefaultCanTrack(this.canTrack),
+          });
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,207 @@
+import { TARGET } from '../../constants/target.js';
+import { isBrowser } from '../../functions/is-browser.js';
+import type { Nullable } from '../../helpers/nullable.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Target } from '../../types/targets.js';
+export const getVariants = (content: Nullable<BuilderContent>) => Object.values(content?.variations || {}).map(variant => ({
+  ...variant,
+  testVariationId: variant.id,
+  id: content?.id
+}));
+export const checkShouldRunVariants = ({
+  canTrack,
+  content
+}: {
+  canTrack: Nullable<boolean>;
+  content: Nullable<BuilderContent>;
+}) => {
+  const hasVariants = getVariants(content).length > 0;
+
+  /**
+   * We cannot SSR in React-Native.
+   */
+  if (TARGET === 'reactNative') return false;
+  if (!hasVariants) return false;
+  if (!canTrack) return false;
+
+  /**
+   * For Vue 2 and Vue 3, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
+   * Unlike React, Vue's hydration checks are shallow and do not check the attributes/contents of each element, so we
+   * are able to modify the `hidden` HTML attributes and `display` CSS properties without causing a hydration mismatch error.
+   *
+   * NOTE: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
+   */
+  if (TARGET === 'vue2' || TARGET === 'vue3') return true;
+  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.currentScript?.previousElementSibling 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.currentScript;
+    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('');
+    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);
+  const parentDiv = document.currentScript?.parentElement;
+  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 getIsHydrationTarget = (target: Target) => target === 'react' || target === 'reactNative';
+const isHydrationTarget = getIsHydrationTarget(TARGET);
+
+/**
+ * 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 = 'builderIoAbTest';
+const CONTENT_FN_NAME = 'builderIoRenderContent';
+export const getScriptString = () => {
+  const fnStr = bldrAbTest.toString().replace(/\s+/g, ' ');
+  const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, ' ');
+  return `
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
+  `;
+};
+export const getVariantsScriptString = (variants: VariantData[], contentId: string) => {
+  return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
+export const getRenderContentScriptString = ({
+  contentId,
+  variationId
+}: {
+  variationId: string;
+  contentId: string;
+}) => {
+  return `
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
+}

package/vue2/src/components/inlined-script.vue

@@ -0,0 +1,18 @@
+<template>
+  <component v-html="scriptStr" :id="id" :is="'script'"></component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+interface Props {
+  scriptStr: string;
+  id?: string;
+}
+
+export default defineComponent({
+  name: "inlined-script",
+
+  props: ["scriptStr", "id"],
+});
+</script>

package/vue2/src/components/inlined-styles.vue

@@ -0,0 +1,18 @@
+<template>
+  <component v-html="styles" :id="id" :is="'style'"></component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+interface Props {
+  styles: string;
+  id?: string;
+}
+
+export default defineComponent({
+  name: "inlined-styles",
+
+  props: ["styles", "id"],
+});
+</script>