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

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

@@ -0,0 +1,419 @@
+<template>
+  <template v-if="builderContextSignal.content">
+    <div
+      :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>
+</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/vue3/src/components/content/components/styles.helpers.ts

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

@@ -0,0 +1,51 @@
+<template>
+  <inlined-styles :styles="injectedStyles"></inlined-styles>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import InlinedStyles from "../../inlined-styles.vue";
+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: { InlinedStyles: 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/vue3/src/components/content/content.helpers.ts

@@ -0,0 +1,42 @@
+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/vue3/src/components/content/content.types.ts

@@ -0,0 +1,23 @@
+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;
+      };
+    };
+  };
+}