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

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

@@ -1,105 +0,0 @@
-<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

@@ -1,89 +0,0 @@
-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

@@ -1,214 +0,0 @@
-<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

@@ -1,100 +0,0 @@
-<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

@@ -1,86 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-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
-      })
-    } : {})
-  };
-}