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

package/vue2/src/components/content/components/enable-editor.vue

@@ -1,418 +0,0 @@
-<template>
-  <div
-    v-if="builderContextSignal.content"
-    :key="forceReRenderCount"
-    ref="elementRef"
-    @click="onClick($event)"
-    :builder-content-id="builderContextSignal.content?.id"
-    :builder-model="model"
-    :class="_classStringToObject(classNameProp)"
-    v-bind="{
-      ...{},
-      ...(showContent
-        ? {}
-        : {
-            hidden: true,
-            'aria-hidden': true,
-          }),
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import type { BuilderContextInterface } from "../../../context/types.js";
-import { evaluate } from "../../../functions/evaluate/index.js";
-import { fetch } from "../../../functions/get-fetch.js";
-import { isBrowser } from "../../../functions/is-browser.js";
-import { isEditing } from "../../../functions/is-editing.js";
-import { createRegisterComponentMessage } from "../../../functions/register-component.js";
-import { _track } from "../../../functions/track/index.js";
-import builderContext from "../../../context/builder.context.js";
-import {
-  registerInsertMenu,
-  setupBrowserForEditing,
-} from "../../../scripts/init-editing.js";
-import { checkIsDefined } from "../../../helpers/nullable.js";
-import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
-import type {
-  ContentProps,
-  BuilderComponentStateChange,
-} from "../content.types.js";
-import { logger } from "../../../helpers/logger.js";
-import type { ComponentInfo } from "../../../types/components.js";
-import { fetchOneEntry } from "../../../functions/get-content/index.js";
-import { isPreviewing } from "../../../functions/is-previewing.js";
-import type { BuilderContent } from "../../../types/builder-content.js";
-import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
-import { fastClone } from "../../../functions/fast-clone.js";
-
-type BuilderEditorProps = Omit<
-  ContentProps,
-  "customComponents" | "data" | "apiVersion" | "isSsrAbTest"
-> & {
-  builderContextSignal: BuilderContextInterface;
-  setBuilderContextSignal?: (signal: any) => any;
-  children?: any;
-};
-
-export default defineComponent({
-  name: "enable-editor",
-
-  props: [
-    "canTrack",
-    "builderContextSignal",
-    "model",
-    "context",
-    "apiKey",
-    "showContent",
-    "classNameProp",
-    "content",
-    "locale",
-    "includeRefs",
-    "enrich",
-  ],
-
-  data() {
-    return {
-      canTrackToUse: checkIsDefined(this.canTrack) ? this.canTrack : true,
-      forceReRenderCount: 0,
-      lastUpdated: 0,
-      shouldSendResetCookie: false,
-      httpReqsData: {},
-      clicked: false,
-      builderContext,
-    };
-  },
-
-  provide() {
-    const _this = this;
-    return {
-      [builderContext.key]: _this.builderContextSignal,
-    };
-  },
-
-  mounted() {
-    if (!this.apiKey) {
-      logger.error(
-        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
-      );
-    }
-    if (isBrowser()) {
-      if (isEditing()) {
-        this.forceReRenderCount = this.forceReRenderCount + 1;
-        window.addEventListener("message", this.processMessage);
-        registerInsertMenu();
-        setupBrowserForEditing({
-          ...(this.locale
-            ? {
-                locale: this.locale,
-              }
-            : {}),
-          ...(this.includeRefs
-            ? {
-                includeRefs: this.includeRefs,
-              }
-            : {}),
-          ...(this.enrich
-            ? {
-                enrich: this.enrich,
-              }
-            : {}),
-        });
-        Object.values<ComponentInfo>(
-          this.builderContextSignal.componentInfos
-        ).forEach((registeredComponent) => {
-          const message = createRegisterComponentMessage(registeredComponent);
-          window.parent?.postMessage(message, "*");
-        });
-        window.addEventListener(
-          "builder:component:stateChangeListenerActivated",
-          this.emitStateUpdate
-        );
-      }
-      if (this.builderContextSignal.content) {
-        const variationId = this.builderContextSignal.content?.testVariationId;
-        const contentId = this.builderContextSignal.content?.id;
-        _track({
-          type: "impression",
-          canTrack: this.canTrackToUse,
-          contentId,
-          apiKey: this.apiKey,
-          variationId: variationId !== contentId ? variationId : undefined,
-        });
-      }
-      // override normal content in preview mode
-      if (isPreviewing()) {
-        const searchParams = new URL(location.href).searchParams;
-        const searchParamPreviewModel = searchParams.get("builder.preview");
-        const searchParamPreviewId = searchParams.get(
-          `builder.preview.${searchParamPreviewModel}`
-        );
-        const previewApiKey =
-          searchParams.get("apiKey") || searchParams.get("builder.space");
-
-        /**
-         * Make sure that:
-         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
-         *  at the same time, e.g. header/page/footer.
-         * - the API key is the same, since we don't want to preview content from other organizations.
-         * - if there is content, that the preview ID is the same as that of the one we receive.
-         *
-         * TO-DO: should we only update the state when there is a change?
-         **/
-        if (
-          searchParamPreviewModel === this.model &&
-          previewApiKey === this.apiKey &&
-          (!this.content || searchParamPreviewId === this.content.id)
-        ) {
-          fetchOneEntry({
-            model: this.model,
-            apiKey: this.apiKey,
-            apiVersion: this.builderContextSignal.apiVersion,
-          }).then((content) => {
-            if (content) {
-              this.mergeNewContent(content);
-            }
-          });
-        }
-      }
-      this.evaluateJsCode();
-      this.runHttpRequests();
-      this.emitStateUpdate();
-    }
-  },
-
-  watch: {
-    onUpdateHook0: {
-      handler() {
-        if (this.content) {
-          this.mergeNewContent(this.content);
-        }
-      },
-      immediate: true,
-    },
-    onUpdateHook1: { handler() {}, immediate: true },
-    onUpdateHook2: {
-      handler() {
-        this.evaluateJsCode();
-      },
-      immediate: true,
-    },
-    onUpdateHook3: {
-      handler() {
-        this.runHttpRequests();
-      },
-      immediate: true,
-    },
-    onUpdateHook4: {
-      handler() {
-        this.emitStateUpdate();
-      },
-      immediate: true,
-    },
-  },
-  unmounted() {
-    if (isBrowser()) {
-      window.removeEventListener("message", this.processMessage);
-      window.removeEventListener(
-        "builder:component:stateChangeListenerActivated",
-        this.emitStateUpdate
-      );
-    }
-  },
-
-  computed: {
-    onUpdateHook0() {
-      return {
-        0: this.content,
-      };
-    },
-    onUpdateHook1() {
-      return {
-        0: this.shouldSendResetCookie,
-      };
-    },
-    onUpdateHook2() {
-      return {
-        0: this.builderContextSignal.content?.data?.jsCode,
-        1: this.builderContextSignal.rootState,
-      };
-    },
-    onUpdateHook3() {
-      return {
-        0: this.builderContextSignal.content?.data?.httpRequests,
-      };
-    },
-    onUpdateHook4() {
-      return {
-        0: this.builderContextSignal.rootState,
-      };
-    },
-  },
-
-  methods: {
-    mergeNewContent(newContent: BuilderContent) {
-      const newContentValue = {
-        ...this.builderContextSignal.content,
-        ...newContent,
-        data: {
-          ...this.builderContextSignal.content?.data,
-          ...newContent?.data,
-        },
-        meta: {
-          ...this.builderContextSignal.content?.meta,
-          ...newContent?.meta,
-          breakpoints:
-            newContent?.meta?.breakpoints ||
-            this.builderContextSignal.content?.meta?.breakpoints,
-        },
-      };
-      this.builderContextSignal.content = newContentValue;
-    },
-    processMessage(event: MessageEvent) {
-      const { data } = event;
-      if (data) {
-        switch (data.type) {
-          case "builder.configureSdk": {
-            const messageContent = data.data;
-            const { breakpoints, contentId } = messageContent;
-            if (
-              !contentId ||
-              contentId !== this.builderContextSignal.content?.id
-            ) {
-              return;
-            }
-            if (breakpoints) {
-              this.mergeNewContent({
-                meta: {
-                  breakpoints,
-                },
-              });
-            }
-            this.forceReRenderCount = this.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
-            break;
-          }
-          case "builder.contentUpdate": {
-            const messageContent = data.data;
-            const key =
-              messageContent.key ||
-              messageContent.alias ||
-              messageContent.entry ||
-              messageContent.modelName;
-            const contentData = messageContent.data;
-            if (key === this.model) {
-              this.mergeNewContent(contentData);
-              this.forceReRenderCount = this.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
-            }
-
-            break;
-          }
-        }
-      }
-    },
-    evaluateJsCode() {
-      // run any dynamic JS code attached to content
-      const jsCode = this.builderContextSignal.content?.data?.jsCode;
-      if (jsCode) {
-        evaluate({
-          code: jsCode,
-          context: this.context || {},
-          localState: undefined,
-          rootState: this.builderContextSignal.rootState,
-          rootSetState: this.builderContextSignal.rootSetState,
-        });
-      }
-    },
-    onClick(event: any) {
-      if (this.builderContextSignal.content) {
-        const variationId = this.builderContextSignal.content?.testVariationId;
-        const contentId = this.builderContextSignal.content?.id;
-        _track({
-          type: "click",
-          canTrack: this.canTrackToUse,
-          contentId,
-          apiKey: this.apiKey,
-          variationId: variationId !== contentId ? variationId : undefined,
-          ...getInteractionPropertiesForEvent(event),
-          unique: !this.clicked,
-        });
-      }
-      if (!this.clicked) {
-        this.clicked = true;
-      }
-    },
-    evalExpression(expression: string) {
-      return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
-        evaluate({
-          code: group,
-          context: this.context || {},
-          localState: undefined,
-          rootState: this.builderContextSignal.rootState,
-          rootSetState: this.builderContextSignal.rootSetState,
-        })
-      );
-    },
-    handleRequest({ url, key }: { key: string; url: string }) {
-      fetch(url)
-        .then((response) => response.json())
-        .then((json) => {
-          const newState = {
-            ...this.builderContextSignal.rootState,
-            [key]: json,
-          };
-          this.builderContextSignal.rootSetState?.(newState);
-          this.httpReqsData[key] = true;
-        })
-        .catch((err) => {
-          console.error("error fetching dynamic data", url, err);
-        });
-    },
-    runHttpRequests() {
-      const requests: {
-        [key: string]: string;
-      } = this.builderContextSignal.content?.data?.httpRequests ?? {};
-      Object.entries(requests).forEach(([key, url]) => {
-        if (url && (!this.httpReqsData[key] || isEditing())) {
-          const evaluatedUrl = this.evalExpression(url);
-          this.handleRequest({
-            url: evaluatedUrl,
-            key,
-          });
-        }
-      });
-    },
-    emitStateUpdate() {
-      if (isEditing()) {
-        window.dispatchEvent(
-          new CustomEvent<BuilderComponentStateChange>(
-            "builder:component:stateChange",
-            {
-              detail: {
-                state: fastClone(this.builderContextSignal.rootState),
-                ref: {
-                  name: this.model,
-                },
-              },
-            }
-          )
-        );
-      }
-    },
-    _classStringToObject(str: string) {
-      const obj: Record<string, boolean> = {};
-      if (typeof str !== "string") {
-        return obj;
-      }
-      const classNames = str.trim().split(/\s+/);
-      for (const name of classNames) {
-        obj[name] = true;
-      }
-      return obj;
-    },
-  },
-});
-</script>

package/vue2/src/components/content/components/styles.helpers.ts

@@ -1,77 +0,0 @@
-export interface CustomFont {
-  family?: string;
-  kind?: string;
-  fileUrl?: string;
-  files?: {
-    [key: string]: string;
-  };
-}
-const getCssFromFont = (font: CustomFont) => {
-  // TODO: compute what font sizes are used and only load those.......
-  const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
-  const name = family.split(',')[0];
-  const url = font.fileUrl ?? font?.files?.regular;
-  let str = '';
-  if (url && family && name) {
-    str += `
-@font-face {
-font-family: "${family}";
-src: local("${name}"), url('${url}') format('woff2');
-font-display: fallback;
-font-weight: 400;
-}
-      `.trim();
-  }
-  if (font.files) {
-    for (const weight in font.files) {
-      const isNumber = String(Number(weight)) === weight;
-      if (!isNumber) {
-        continue;
-      }
-      // TODO: maybe limit number loaded
-      const weightUrl = font.files[weight];
-      if (weightUrl && weightUrl !== url) {
-        str += `
-@font-face {
-font-family: "${family}";
-src: url('${weightUrl}') format('woff2');
-font-display: fallback;
-font-weight: ${weight};
-}
-        `.trim();
-      }
-    }
-  }
-  return str;
-};
-export const getFontCss = ({
-  customFonts
-}: {
-  customFonts?: CustomFont[];
-}) => {
-  // TODO: flag for this
-  // if (!this.builder.allowCustomFonts) {
-  //   return '';
-  // }
-  // TODO: separate internal data from external
-  return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
-};
-export const getCss = ({
-  cssCode,
-  contentId
-}: {
-  cssCode?: string;
-  contentId?: string;
-}) => {
-  if (!cssCode) {
-    return '';
-  }
-  if (!contentId) {
-    return cssCode;
-  }
-
-  // Allow using `&` in custom CSS code like @emotion
-  // E.g. `& .foobar { ... }` to scope CSS
-  // TODO: handle if '&' is within a string like `content: "&"`
-  return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
-}

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

@@ -1,60 +0,0 @@
-<template>
-  <inlined-styles :styles="injectedStyles"></inlined-styles>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-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 type { CustomFont } from "./styles.helpers.js";
-import { getCss } from "./styles.helpers.js";
-import { getFontCss } from "./styles.helpers.js";
-
-interface Props {
-  cssCode?: string;
-  customFonts?: CustomFont[];
-  contentId?: string;
-}
-
-export default defineComponent({
-  name: "content-styles",
-  components: { "inlined-styles": InlinedStyles },
-  props: ["cssCode", "contentId", "customFonts"],
-
-  data() {
-    return {
-      injectedStyles: `
-${getCss({
-  cssCode: this.cssCode,
-  contentId: this.contentId,
-})}
-${getFontCss({
-  customFonts: this.customFonts,
-})}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
-`.trim(),
-    };
-  },
-});
-</script>

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

@@ -1,42 +0,0 @@
-import type { BuilderRenderState } from '../../context/types.js';
-import type { BuilderContent } from '../../types/builder-content.js';
-import type { Nullable } from '../../types/typescript.js';
-import type { ContentProps } from './content.types.js';
-export const getContextStateInitialValue = ({
-  content,
-  data,
-  locale
-}: Pick<ContentProps, '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<ContentProps, 'content' | 'data'>): Nullable<BuilderContent> => {
-  return !content ? undefined : {
-    ...content,
-    data: {
-      ...content?.data,
-      ...data
-    },
-    meta: content?.meta
-  };
-}

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

@@ -1,23 +0,0 @@
-import type { BuilderRenderState } from '../../context/types.js';
-import type { EnforcePartials } from '../../types/enforced-partials.js';
-import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
-interface InternalRenderProps {
-  /**
-   * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
-   */
-  classNameProp: string | undefined;
-  showContent: boolean;
-  isSsrAbTest: boolean;
-}
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
-export interface BuilderComponentStateChange {
-  state: BuilderRenderState;
-  ref: {
-    name?: string;
-    props?: {
-      builderBlock?: {
-        id?: string;
-      };
-    };
-  };
-}