@builder.io/sdk-vue 0.6.1-1 → 0.6.1

package/vue3/src/components/content/content.vue

@@ -1,169 +0,0 @@
-<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";
-import Blocks from "../blocks/blocks.vue";
-import ContentStyles from "./components/styles.vue";
-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";
-import EnableEditor from "./components/enable-editor.vue";
-import InlinedScript from "../inlined-script.vue";
-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: {
-    EnableEditor: EnableEditor,
-    InlinedScript: InlinedScript,
-    ContentStyles: 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: wrapComponentRef(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/vue3/src/components/content/index.ts

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

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

@@ -1,7 +0,0 @@
-import { markRaw } from 'vue';
-
-/**
- * Wrap a component ref to prevent it from being observed by Vue.
- * This reduces overhead and improves performance.
- */
-export const wrapComponentRef = markRaw;

package/vue3/src/components/content-variants/content-variants.types.ts

@@ -1,20 +0,0 @@
-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/vue3/src/components/content-variants/content-variants.vue

@@ -1,151 +0,0 @@
-<template>
-  <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>
-
-    <template
-      :key="variant.testVariationId"
-      v-for="(variant, index) in getVariants(content)"
-    >
-      <content-component
-        :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"
-      ></content-component>
-    </template>
-  </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>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import {
-  checkShouldRunVariants,
-  getScriptString,
-  getVariants,
-  getVariantsScriptString,
-} from "./helpers.js";
-import ContentComponent from "../content/content.vue";
-import { getDefaultCanTrack } from "../../helpers/canTrack.js";
-import InlinedStyles from "../inlined-styles.vue";
-import { handleABTestingSync } from "../../helpers/ab-tests.js";
-import InlinedScript from "../inlined-script.vue";
-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: {
-    InlinedScript: InlinedScript,
-    InlinedStyles: InlinedStyles,
-    ContentComponent: 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/vue3/src/components/content-variants/helpers.ts

@@ -1,207 +0,0 @@
-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/vue3/src/components/inlined-script.vue

@@ -1,12 +0,0 @@
-<script lang="ts">
-import { defineComponent, h } from 'vue';
-
-export default defineComponent({
-  render() {
-    return h('script', { id: this.id, innerHTML: this.scriptStr });
-  },
-  name: 'inlined-script',
-
-  props: ['scriptStr', 'id'],
-});
-</script>

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

@@ -1,12 +0,0 @@
-<script lang="ts">
-import { defineComponent, h } from 'vue';
-
-export default defineComponent({
-  render() {
-    return h('style', { id: this.id, innerHTML: this.styles });
-  },
-  name: 'inlined-styles',
-
-  props: ['styles', 'id'],
-});
-</script>

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

@@ -1,62 +0,0 @@
-import { default as Button } from '../blocks/button/button.vue';
-import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
-import { default as Columns } from '../blocks/columns/columns.vue';
-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.vue';
-import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
-import { default as Image } from '../blocks/image/image.vue';
-import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
-import { default as Section } from '../blocks/section/section.vue';
-import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
-import { default as Symbol } from '../blocks/symbol/symbol.vue';
-import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
-import { default as Text } from '../blocks/text/text.vue';
-import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
-import { default as Video } from '../blocks/video/video.vue';
-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.vue';
-import { default as Img } from '../blocks/img/img.vue';
-import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
-import { default as customCode } from '../blocks/custom-code/custom-code.vue';
-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: Button,
-  ...buttonComponentInfo
-}, {
-  component: Columns,
-  ...columnsComponentInfo
-}, {
-  component: customCode,
-  ...customCodeInfo
-}, {
-  component: embed,
-  ...embedComponentInfo
-}, {
-  component: Fragment,
-  ...fragmentComponentInfo
-}, {
-  component: Image,
-  ...imageComponentInfo
-}, {
-  component: Img,
-  ...imgComponentInfo
-}, {
-  component: Section,
-  ...sectionComponentInfo
-}, {
-  component: Symbol,
-  ...symbolComponentInfo
-}, {
-  component: Text,
-  ...textComponentInfo
-}, {
-  component: Video,
-  ...videoComponentInfo
-}]