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

package/vue3/src/blocks/video/video.vue

@@ -0,0 +1,105 @@
+<template>
+  <video
+    :preload="preload || 'metadata'"
+    :style="{
+      width: '100%',
+      height: '100%',
+      ...attributes?.style,
+      objectFit: fit,
+      objectPosition: position,
+      // Hack to get object fit to work as expected and
+      // not have the video overflow
+      borderRadius: 1,
+    }"
+    :src="video || 'no-src'"
+    :poster="posterImage"
+    v-bind="spreadProps"
+  ></video>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export interface VideoProps {
+  attributes?: any;
+  video?: string;
+  autoPlay?: boolean;
+  controls?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  playsInline?: boolean;
+  aspectRatio?: number;
+  width?: number;
+  height?: number;
+  fit?: "contain" | "cover" | "fill";
+  preload?: "auto" | "metadata" | "none";
+  position?:
+    | "center"
+    | "top"
+    | "left"
+    | "right"
+    | "bottom"
+    | "top left"
+    | "top right"
+    | "bottom left"
+    | "bottom right";
+  posterImage?: string;
+  lazyLoad?: boolean;
+}
+
+export default defineComponent({
+  name: "builder-video",
+
+  props: [
+    "autoPlay",
+    "muted",
+    "controls",
+    "loop",
+    "playsInline",
+    "attributes",
+    "preload",
+    "fit",
+    "position",
+    "video",
+    "posterImage",
+  ],
+
+  computed: {
+    videoProps() {
+      return {
+        ...(this.autoPlay === true
+          ? {
+              autoPlay: true,
+            }
+          : {}),
+        ...(this.muted === true
+          ? {
+              muted: true,
+            }
+          : {}),
+        ...(this.controls === true
+          ? {
+              controls: true,
+            }
+          : {}),
+        ...(this.loop === true
+          ? {
+              loop: true,
+            }
+          : {}),
+        ...(this.playsInline === true
+          ? {
+              playsInline: true,
+            }
+          : {}),
+      };
+    },
+    spreadProps() {
+      return {
+        ...this.attributes,
+        ...this.videoProps,
+      };
+    },
+  },
+});
+</script>

package/vue3/src/components/block/block.helpers.ts

@@ -0,0 +1,89 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
+import { evaluate } from '../../functions/evaluate/index.js';
+import { getProcessedBlock } from '../../functions/get-processed-block.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
+import type { RepeatData } from './types.js';
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+export const isEmptyHtmlElement = (tagName: unknown) => {
+  return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export const getComponent = ({
+  block,
+  context,
+  registeredComponents
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  registeredComponents: RegisteredComponents;
+}) => {
+  const componentName = getProcessedBlock({
+    block,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
+    context: context.context,
+    shouldEvaluateBindings: false
+  }).component?.name;
+  if (!componentName) {
+    return null;
+  }
+  const ref = registeredComponents[componentName];
+  if (!ref) {
+    // TODO: Public doc page with more info about this message
+    console.warn(`
+      Could not find a registered component named "${componentName}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+    return undefined;
+  } else {
+    return ref;
+  }
+};
+export const getRepeatItemData = ({
+  block,
+  context
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}): RepeatData[] | undefined => {
+  /**
+   * we don't use `state.processedBlock` here because the processing done within its logic includes evaluating the block's bindings,
+   * which will not work if there is a repeat.
+   */
+  const {
+    repeat,
+    ...blockWithoutRepeat
+  } = block;
+  if (!repeat?.collection) {
+    return undefined;
+  }
+  const itemsArray = evaluate({
+    code: repeat.collection,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
+    context: context.context
+  });
+  if (!Array.isArray(itemsArray)) {
+    return undefined;
+  }
+  const collectionName = repeat.collection.split('.').pop();
+  const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
+  const repeatArray = itemsArray.map<RepeatData>((item, index) => ({
+    context: {
+      ...context,
+      localState: {
+        ...context.localState,
+        $index: index,
+        $item: item,
+        [itemNameToUse]: item,
+        [`$${itemNameToUse}Index`]: index
+      }
+    },
+    block: blockWithoutRepeat
+  }));
+  return repeatArray;
+}

package/vue3/src/components/block/block.vue

@@ -0,0 +1,214 @@
+<template>
+  <template v-if="canShowBlock">
+    <template v-if="!blockComponent?.noWrap">
+      <template v-if="isEmptyHtmlElement(Tag)">
+        <block-wrapper
+          :Wrapper="Tag"
+          :block="processedBlock"
+          :context="context"
+          :hasChildren="false"
+        ></block-wrapper>
+      </template>
+
+      <template v-if="!isEmptyHtmlElement(Tag) && repeatItem">
+        <template :key="index" v-for="(data, index) in repeatItem">
+          <repeated-block
+            :repeatContext="data.context"
+            :block="data.block"
+            :registeredComponents="registeredComponents"
+          ></repeated-block>
+        </template>
+      </template>
+
+      <template v-if="!isEmptyHtmlElement(Tag) && !repeatItem">
+        <block-wrapper
+          :Wrapper="Tag"
+          :block="processedBlock"
+          :context="context"
+          :hasChildren="true"
+        >
+          <component-ref v-bind="componentRefProps"></component-ref>
+
+          <template
+            :key="'block-' + child.id"
+            v-for="(child, index) in childrenWithoutParentComponent"
+          >
+            <block
+              :block="child"
+              :context="childrenContext"
+              :registeredComponents="registeredComponents"
+            ></block>
+          </template>
+          <template
+            :key="'block-style-' + child.id"
+            v-for="(child, index) in childrenWithoutParentComponent"
+          >
+            <block-styles
+              :block="child"
+              :context="childrenContext"
+            ></block-styles>
+          </template>
+        </block-wrapper>
+      </template>
+    </template>
+
+    <template v-else>
+      <component-ref v-bind="componentRefProps"></component-ref>
+    </template>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from "vue";
+
+import type {
+  BuilderContextInterface,
+  RegisteredComponents,
+} from "../../context/types.js";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import { getBlockProperties } from "../../functions/get-block-properties.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+const BlockStyles = () =>
+  import("./components/block-styles.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component BlockStyles at ./components/block-styles.vue",
+        err
+      );
+      throw err;
+    });
+import {
+  getComponent,
+  getRepeatItemData,
+  isEmptyHtmlElement,
+} from "./block.helpers.js";
+const RepeatedBlock = () =>
+  import("./components/repeated-block.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component RepeatedBlock at ./components/repeated-block.vue",
+        err
+      );
+      throw err;
+    });
+import { extractTextStyles } from "../../functions/extract-text-styles.js";
+const ComponentRef = () =>
+  import("./components/component-ref/component-ref.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component ComponentRef at ./components/component-ref/component-ref.vue",
+        err
+      );
+      throw err;
+    });
+import type { ComponentProps } from "./components/component-ref/component-ref.helpers.js";
+const BlockWrapper = () =>
+  import("./components/block-wrapper.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component BlockWrapper at ./components/block-wrapper.vue",
+        err
+      );
+      throw err;
+    });
+
+export type BlockProps = {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  registeredComponents: RegisteredComponents;
+};
+
+export default defineComponent({
+  name: "block",
+  components: {
+    ComponentRef: defineAsyncComponent(ComponentRef),
+    BlockWrapper: defineAsyncComponent(BlockWrapper),
+    RepeatedBlock: defineAsyncComponent(RepeatedBlock),
+    BlockStyles: defineAsyncComponent(BlockStyles),
+  },
+  props: ["block", "context", "registeredComponents"],
+
+  data() {
+    return { childrenContext: this.context, isEmptyHtmlElement };
+  },
+
+  computed: {
+    blockComponent() {
+      return getComponent({
+        block: this.block,
+        context: this.context,
+        registeredComponents: this.registeredComponents,
+      });
+    },
+    repeatItem() {
+      return getRepeatItemData({
+        block: this.block,
+        context: this.context,
+      });
+    },
+    processedBlock() {
+      return this.repeatItem
+        ? this.block
+        : getProcessedBlock({
+            block: this.block,
+            localState: this.context.localState,
+            rootState: this.context.rootState,
+            rootSetState: this.context.rootSetState,
+            context: this.context.context,
+            shouldEvaluateBindings: true,
+          });
+    },
+    Tag() {
+      return this.block.tagName || "div";
+    },
+    canShowBlock() {
+      if ("hide" in this.processedBlock) {
+        return !this.processedBlock.hide;
+      }
+      if ("show" in this.processedBlock) {
+        return this.processedBlock.show;
+      }
+      return true;
+    },
+    childrenWithoutParentComponent() {
+      /**
+       * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+       * we render them outside of `componentRef`.
+       * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+       * blocks, and the children will be repeated within those blocks.
+       */
+      const shouldRenderChildrenOutsideRef =
+        !this.blockComponent?.component && !this.repeatItem;
+      return shouldRenderChildrenOutsideRef
+        ? this.processedBlock.children ?? []
+        : [];
+    },
+    componentRefProps() {
+      return {
+        blockChildren: this.processedBlock.children ?? [],
+        componentRef: this.blockComponent?.component,
+        componentOptions: {
+          ...getBlockComponentOptions(this.processedBlock),
+          builderContext: this.context,
+          ...(this.blockComponent?.name === "Symbol" ||
+          this.blockComponent?.name === "Columns"
+            ? {
+                builderComponents: this.registeredComponents,
+              }
+            : {}),
+        },
+        context: this.childrenContext,
+        registeredComponents: this.registeredComponents,
+        builderBlock: this.processedBlock,
+        includeBlockProps: this.blockComponent?.noWrap === true,
+        isInteractive: !this.blockComponent?.isRSC,
+      };
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,100 @@
+<template>
+  <template v-if="TARGET !== 'reactNative' && css && canShowBlock">
+    <inlined-styles :styles="css"></inlined-styles>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints,
+} from "../../../constants/device-sizes.js";
+import { TARGET } from "../../../constants/target.js";
+import type { BuilderContextInterface } from "../../../context/types.js";
+import { getProcessedBlock } from "../../../functions/get-processed-block.js";
+import { createCssClass } from "../../../helpers/css.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+import InlinedStyles from "../../inlined-styles.vue";
+
+export type BlockStylesProps = {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+};
+
+export default defineComponent({
+  name: "block-styles",
+  components: { InlinedStyles: InlinedStyles },
+  props: ["block", "context"],
+
+  data() {
+    return {
+      processedBlock: getProcessedBlock({
+        block: this.block,
+        localState: this.context.localState,
+        rootState: this.context.rootState,
+        rootSetState: this.context.rootSetState,
+        context: this.context.context,
+        shouldEvaluateBindings: true,
+      }),
+      TARGET,
+    };
+  },
+
+  computed: {
+    canShowBlock() {
+      // only render styles for blocks that are visible
+      if (checkIsDefined(this.processedBlock.hide)) {
+        return !this.processedBlock.hide;
+      }
+      if (checkIsDefined(this.processedBlock.show)) {
+        return this.processedBlock.show;
+      }
+      return true;
+    },
+    css() {
+      const styles = this.processedBlock.responsiveStyles;
+      const content = this.context.content;
+      const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
+        content?.meta?.breakpoints || {}
+      );
+      const largeStyles = styles?.large;
+      const mediumStyles = styles?.medium;
+      const smallStyles = styles?.small;
+      const className = this.processedBlock.id;
+      if (!className) {
+        return "";
+      }
+      const largeStylesClass = largeStyles
+        ? createCssClass({
+            className,
+            styles: largeStyles,
+          })
+        : "";
+      const mediumStylesClass = mediumStyles
+        ? createCssClass({
+            className,
+            styles: mediumStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "medium",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
+      const smallStylesClass = smallStyles
+        ? createCssClass({
+            className,
+            styles: smallStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "small",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
+      return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    },
+  },
+});
+</script>

package/vue3/src/components/block/components/block-wrapper.vue

@@ -0,0 +1,86 @@
+<template>
+  <template v-if="hasChildren">
+    <component
+      :is="Wrapper"
+      v-bind="
+        getBlockProperties({
+          block: block,
+          context: context,
+        })
+      "
+      v-on="
+        getBlockActions({
+          block: block,
+          rootState: context.rootState,
+          rootSetState: context.rootSetState,
+          localState: context.localState,
+          context: context.context,
+          stripPrefix: true,
+        })
+      "
+    >
+      <slot />
+    </component>
+  </template>
+
+  <template v-else>
+    <component
+      :is="Wrapper"
+      v-bind="
+        getBlockProperties({
+          block: block,
+          context: context,
+        })
+      "
+      v-on="
+        getBlockActions({
+          block: block,
+          rootState: context.rootState,
+          rootSetState: context.rootSetState,
+          localState: context.localState,
+          context: context.context,
+          stripPrefix: true,
+        })
+      "
+    ></component>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from "vue";
+
+import type { PropsWithChildren } from "../../../types/typescript.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../../context/types.js";
+import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+import { setAttrs } from "../../../blocks/helpers.js";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+type BlockWrapperProps = {
+  Wrapper: string;
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  hasChildren: boolean;
+};
+
+/**
+ * This component renders a block's wrapper HTML element (from the block's `tagName` property).
+ * It reuses the exact same logic as the `InteractiveElement` component, but we need to have 2 separate components for
+ * Svelte's sake, as it needs to know at compile-time whether to use:
+ *  - `<svelte:element>` (for HTML element) or
+ *  - `<svelte:component>` (for custom components)
+ */
+
+export default defineComponent({
+  name: "block-wrapper",
+
+  props: ["Wrapper", "block", "context", "hasChildren"],
+
+  data() {
+    return { getBlockActions, getBlockProperties };
+  },
+});
+</script>

package/vue3/src/components/block/components/component-ref/component-ref.helpers.ts

@@ -0,0 +1,52 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../../../context/types.js';
+import { getBlockProperties } from '../../../../functions/get-block-properties.js';
+import type { BuilderBlock } from '../../../../types/builder-block.js';
+import type { PropsWithBuilderData } from '../../../../types/builder-props.js';
+import type { InteractiveElementProps } from '../interactive-element.vue';
+type ComponentOptions = PropsWithBuilderData<{
+  [index: string]: any;
+  attributes?: {
+    [index: string]: any;
+  };
+}>;
+export interface ComponentProps {
+  componentRef: any;
+  componentOptions: ComponentOptions;
+  blockChildren: BuilderBlock[];
+  context: BuilderContextInterface;
+  registeredComponents: RegisteredComponents;
+  builderBlock: BuilderBlock;
+  includeBlockProps: boolean;
+  isInteractive: boolean | undefined;
+}
+export const getWrapperProps = ({
+  componentOptions,
+  builderBlock,
+  context,
+  componentRef,
+  includeBlockProps,
+  isInteractive,
+  contextValue
+}: Omit<ComponentProps, 'blockChildren' | 'registeredComponents'> & {
+  contextValue: BuilderContextInterface;
+}) => {
+  const interactiveElementProps: InteractiveElementProps = {
+    Wrapper: componentRef,
+    block: builderBlock,
+    context,
+    wrapperProps: componentOptions
+  };
+  return isInteractive ? interactiveElementProps : {
+    ...componentOptions,
+    /**
+     * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
+     * component itself directly. Otherwise, they are provided to the wrapper element.
+     */
+    ...(includeBlockProps ? {
+      attributes: getBlockProperties({
+        block: builderBlock,
+        context: contextValue
+      })
+    } : {})
+  };
+}