vue-datocms 3.0.3 → 4.0.1

package/dist/index.cjs.js

@@ -190,6 +190,36 @@ const imageShowStrategy = ({ lazyLoad, loaded }) => {
   }
   return true;
 };
+const buildSrcSet = (src, width, candidateMultipliers) => {
+  if (!src || !width) {
+    return void 0;
+  }
+  return candidateMultipliers.map((multiplier) => {
+    const url = new URL(src);
+    if (multiplier !== 1) {
+      url.searchParams.set("dpr", `${multiplier}`);
+      const maxH = url.searchParams.get("max-h");
+      const maxW = url.searchParams.get("max-w");
+      if (maxH) {
+        url.searchParams.set(
+          "max-h",
+          `${Math.floor(parseInt(maxH) * multiplier)}`
+        );
+      }
+      if (maxW) {
+        url.searchParams.set(
+          "max-w",
+          `${Math.floor(parseInt(maxW) * multiplier)}`
+        );
+      }
+    }
+    const finalWidth = Math.floor(width * multiplier);
+    if (finalWidth < 50) {
+      return null;
+    }
+    return `${url.toString()} ${finalWidth}w`;
+  }).filter(Boolean).join(",");
+};
 const Image = vueDemi.defineComponent({
   name: "DatocmsImage",
   props: {
@@ -239,6 +269,24 @@ const Image = vueDemi.defineComponent({
     },
     objectPosition: {
       type: String
+    },
+    usePlaceholder: {
+      type: Boolean,
+      default: true
+    },
+    sizes: {
+      type: String
+    },
+    priority: {
+      type: Boolean,
+      default: false
+    },
+    srcSetCandidates: {
+      type: Array,
+      validator: (values) => values.every((value) => {
+        return typeof value === "number";
+      }),
+      default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
     }
   },
   setup(props) {
@@ -250,21 +298,33 @@ const Image = vueDemi.defineComponent({
       threshold: props.intersectionThreshold || props.intersectionTreshold || 0,
       rootMargin: props.intersectionMargin || "0px 0px 0px 0px"
     });
+    const computedLazyLoad = vueDemi.ref(props.priority ? false : props.lazyLoad);
+    const imageRef = vueDemi.ref();
+    vueDemi.watchEffect(() => {
+      if (!imageRef.value) {
+        return;
+      }
+      if (imageRef.value.complete && imageRef.value.naturalWidth) {
+        handleLoad();
+      }
+    });
     return {
       inView,
       elRef,
       loaded,
-      handleLoad
+      handleLoad,
+      computedLazyLoad,
+      imageRef
     };
   },
   render() {
     const addImage = imageAddStrategy({
-      lazyLoad: this.lazyLoad,
+      lazyLoad: this.computedLazyLoad,
       inView: this.inView,
       loaded: this.loaded
     });
     const showImage = imageShowStrategy({
-      lazyLoad: this.lazyLoad,
+      lazyLoad: this.computedLazyLoad,
       inView: this.inView,
       loaded: this.loaded
     });
@@ -272,30 +332,30 @@ const Image = vueDemi.defineComponent({
       ...vueDemi.isVue2 && {
         props: {
           srcset: this.data.webpSrcSet,
-          sizes: this.data.sizes,
+          sizes: this.sizes ?? this.data.sizes ?? void 0,
           type: "image/webp"
         }
       },
       ...vueDemi.isVue3 && {
         srcset: this.data.webpSrcSet,
-        sizes: this.data.sizes,
+        sizes: this.sizes ?? this.data.sizes ?? void 0,
         type: "image/webp"
       }
     });
     const regularSource = this.data.srcSet && vueDemi.h(Source, {
       ...vueDemi.isVue2 && {
         props: {
-          srcset: this.data.srcSet,
-          sizes: this.data.sizes
+          srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+          sizes: this.sizes ?? this.data.sizes ?? void 0
         }
       },
       ...vueDemi.isVue3 && {
-        srcset: this.data.srcSet,
-        sizes: this.data.sizes
+        srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+        sizes: this.sizes ?? this.data.sizes ?? void 0
       }
     });
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
-    const placeholder = vueDemi.h("div", {
+    const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? vueDemi.h("div", {
       style: {
         backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
         backgroundColor: this.data.bgColor,
@@ -304,11 +364,15 @@ const Image = vueDemi.defineComponent({
         objectFit: this.objectFit,
         objectPosition: this.objectPosition,
         transition,
-        ...absolutePositioning
+        position: "absolute",
+        left: "-5%",
+        top: "-5%",
+        width: "110%",
+        height: "110%"
       }
-    });
+    }) : null;
     const { width, aspectRatio } = this.data;
-    const height = this.data.height || width / aspectRatio;
+    const height = this.data.height ?? (aspectRatio ? width / aspectRatio : 0);
     const sizer = this.layout !== "fill" ? vueDemi.h(Sizer, {
       ...vueDemi.isVue2 && {
         props: {
@@ -349,7 +413,8 @@ const Image = vueDemi.defineComponent({
               attrs: {
                 src: this.data.src,
                 alt: this.data.alt,
-                title: this.data.title
+                title: this.data.title,
+                fetchpriority: this.priority ? "high" : void 0
               },
               on: {
                 load: this.handleLoad
@@ -359,16 +424,18 @@ const Image = vueDemi.defineComponent({
               src: this.data.src,
               alt: this.data.alt,
               title: this.data.title,
+              fetchpriority: this.priority ? "high" : void 0,
               onLoad: this.handleLoad
             },
+            ref: "imageRef",
             class: this.pictureClass,
             style: {
-              ...absolutePositioning,
-              ...this.pictureStyle,
               opacity: showImage ? 1 : 0,
               transition,
+              ...absolutePositioning,
               objectFit: this.objectFit,
-              objectPosition: this.objectPosition
+              objectPosition: this.objectPosition,
+              ...this.pictureStyle
             }
           })
         ]),
@@ -390,8 +457,14 @@ const Image = vueDemi.defineComponent({
                   alt: this.data.alt,
                   title: this.data.title,
                   class: this.pictureClass,
-                  style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
-                  loading: "lazy"
+                  style: toCss({
+                    ...absolutePositioning,
+                    objectFit: this.objectFit,
+                    objectPosition: this.objectPosition,
+                    ...this.pictureStyle
+                  }),
+                  loading: this.computedLazyLoad ? "lazy" : void 0,
+                  fetchpriority: this.priority ? "high" : void 0
                 })
               ])
             }
@@ -413,7 +486,8 @@ const Image = vueDemi.defineComponent({
                 title: this.data.title,
                 class: this.pictureClass,
                 style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
-                loading: "lazy"
+                loading: this.computedLazyLoad ? "lazy" : void 0,
+                fetchpriority: this.priority ? "high" : void 0
               })
             ])
           }
@@ -589,46 +663,34 @@ const DatocmsStructuredTextPlugin = {
   }
 };
 
-function useQuerySubscription(options) {
-  const { enabled, initialData, ...other } = options;
+const useQuerySubscription = ({ enabled = true, initialData, query, token, ...other }) => {
   const error = vueDemi.ref(null);
-  const data = vueDemi.ref(null);
-  const status = vueDemi.ref(
-    enabled ? "connecting" : "closed"
-  );
+  const data = vueDemi.ref(vueDemi.unref(initialData) || null);
+  const status = vueDemi.ref(vueDemi.unref(enabled) ? "connecting" : "closed");
   const subscribeToQueryOptions = other;
-  vueDemi.watchEffect((onCleanup) => {
-    if (enabled === false) {
-      status.value = "closed";
-      return () => {
-      };
-    }
-    let unsubscribe;
-    async function subscribe() {
-      unsubscribe = await datocmsListen.subscribeToQuery({
+  vueDemi.watchEffect(async (onCleanup) => {
+    if (query && token && vueDemi.unref(enabled)) {
+      const unsubscribe = await datocmsListen.subscribeToQuery({
         ...subscribeToQueryOptions,
+        query,
+        token,
         onStatusChange: (connectionStatus) => {
           status.value = connectionStatus;
         },
-        onUpdate: (updateData) => {
+        onUpdate: ({ response }) => {
           error.value = null;
-          data.value = updateData.response.data;
+          data.value = response.data;
         },
         onChannelError: (errorData) => {
           data.value = null;
           error.value = errorData;
         }
       });
+      onCleanup(unsubscribe);
     }
-    subscribe();
-    onCleanup(() => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
-    });
   });
-  return { error, status, data: data || initialData };
-}
+  return { data, status, error };
+};
 
 const highlightPieces = (textWithHighlightMarker) => {
   return textWithHighlightMarker.split(/\[h\](.+?)\[\/h\]/g).map((text, index) => ({

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { Options, ConnectionStatus } from 'datocms-listen';
 
 declare type ResponsiveImageType = {
     /** The aspect ratio (width/height) of the image */
-    aspectRatio: number;
+    aspectRatio?: number;
     /** A base64-encoded thumbnail to offer during image loading */
     base64?: string;
     /** The height of the image */
@@ -100,11 +100,47 @@ declare const Image: vue_demi.DefineComponent<{
     objectPosition: {
         type: StringConstructor;
     };
+    /** Whether the component should use a blurred image placeholder */
+    usePlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The HTML5 `sizes` attribute for the image
+     *
+     * Learn more about srcset and sizes:
+     * -> https://web.dev/learn/design/responsive-images/#sizes
+     * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     **/
+    sizes: {
+        type: StringConstructor;
+    };
+    /**
+     * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
+     * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
+     * Should only be used when the image is visible above the fold.
+     **/
+    priority: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
+     *
+     * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+     **/
+    srcSetCandidates: {
+        type: ArrayConstructor;
+        validator: (values: any[]) => values is number[];
+        default: () => number[];
+    };
 }, {
     inView: vue_demi.Ref<boolean>;
     elRef: vue_demi.Ref<HTMLElement | null>;
     loaded: vue_demi.Ref<boolean>;
     handleLoad: () => void;
+    computedLazyLoad: vue_demi.Ref<boolean>;
+    imageRef: vue_demi.Ref<HTMLImageElement | undefined>;
 }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
@@ -175,6 +211,40 @@ declare const Image: vue_demi.DefineComponent<{
     objectPosition: {
         type: StringConstructor;
     };
+    /** Whether the component should use a blurred image placeholder */
+    usePlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The HTML5 `sizes` attribute for the image
+     *
+     * Learn more about srcset and sizes:
+     * -> https://web.dev/learn/design/responsive-images/#sizes
+     * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     **/
+    sizes: {
+        type: StringConstructor;
+    };
+    /**
+     * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
+     * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
+     * Should only be used when the image is visible above the fold.
+     **/
+    priority: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
+     *
+     * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+     **/
+    srcSetCandidates: {
+        type: ArrayConstructor;
+        validator: (values: any[]) => values is number[];
+        default: () => number[];
+    };
 }>>, {
     explicitWidth: boolean;
     lazyLoad: boolean;
@@ -183,6 +253,9 @@ declare const Image: vue_demi.DefineComponent<{
     rootStyle: Record<string, any>;
     pictureStyle: Record<string, any>;
     layout: string;
+    usePlaceholder: boolean;
+    priority: boolean;
+    srcSetCandidates: unknown[];
 }>;
 declare const DatocmsImagePlugin: {
     install: (Vue: any) => void;
@@ -308,26 +381,26 @@ declare const DatocmsStructuredTextPlugin: {
 declare type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<Options<QueryResult, QueryVariables>, 'onStatusChange' | 'onUpdate' | 'onChannelError'>;
 declare type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
     /** Whether the subscription has to be performed or not */
-    enabled?: true;
+    enabled?: true | Ref<boolean>;
     /** The initial data to use while the initial request is being performed */
     initialData?: QueryResult;
 } & SubscribeToQueryOptions<QueryResult, QueryVariables>;
 declare type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
     /** Whether the subscription has to be performed or not */
-    enabled: false;
+    enabled: false | Ref<boolean>;
     /** The initial data to use while the initial request is being performed */
     initialData?: QueryResult;
 } & Partial<SubscribeToQueryOptions<QueryResult, QueryVariables>>;
 declare type QueryListenerOptions<QueryResult, QueryVariables> = EnabledQueryListenerOptions<QueryResult, QueryVariables> | DisabledQueryListenerOptions<QueryResult, QueryVariables>;
-declare function useQuerySubscription<QueryResult = any, QueryVariables = Record<string, any>>(options: QueryListenerOptions<QueryResult, QueryVariables>): {
+declare const useQuerySubscription: <QueryResult = any, QueryVariables = Record<string, any>>({ enabled, initialData, query, token, ...other }: QueryListenerOptions<QueryResult, QueryVariables>) => {
+    data: Ref<vue_demi.UnwrapRef<NonNullable<QueryResult>> | null>;
+    status: Ref<ConnectionStatus>;
     error: Ref<{
         code: string;
         message: string;
         fatal: boolean;
         response?: any;
     } | null>;
-    status: Ref<ConnectionStatus>;
-    data: Ref<QueryResult | null>;
 };
 
 declare type SearchResultInstancesHrefSchema = {

package/dist/index.esm.mjs

@@ -1,5 +1,5 @@
 import hypenateStyleName from 'hyphenate-style-name';
-import { ref, onMounted, onBeforeUnmount, defineComponent, h, isVue2, isVue3, watchEffect, reactive, computed, toRaw } from 'vue-demi';
+import { ref, onMounted, onBeforeUnmount, defineComponent, h, isVue2, isVue3, watchEffect, unref, reactive, computed, toRaw } from 'vue-demi';
 import { render, renderNodeRule, defaultMetaTransformer } from 'datocms-structured-text-generic-html-renderer';
 export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
 import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
@@ -184,6 +184,36 @@ const imageShowStrategy = ({ lazyLoad, loaded }) => {
   }
   return true;
 };
+const buildSrcSet = (src, width, candidateMultipliers) => {
+  if (!src || !width) {
+    return void 0;
+  }
+  return candidateMultipliers.map((multiplier) => {
+    const url = new URL(src);
+    if (multiplier !== 1) {
+      url.searchParams.set("dpr", `${multiplier}`);
+      const maxH = url.searchParams.get("max-h");
+      const maxW = url.searchParams.get("max-w");
+      if (maxH) {
+        url.searchParams.set(
+          "max-h",
+          `${Math.floor(parseInt(maxH) * multiplier)}`
+        );
+      }
+      if (maxW) {
+        url.searchParams.set(
+          "max-w",
+          `${Math.floor(parseInt(maxW) * multiplier)}`
+        );
+      }
+    }
+    const finalWidth = Math.floor(width * multiplier);
+    if (finalWidth < 50) {
+      return null;
+    }
+    return `${url.toString()} ${finalWidth}w`;
+  }).filter(Boolean).join(",");
+};
 const Image = defineComponent({
   name: "DatocmsImage",
   props: {
@@ -233,6 +263,24 @@ const Image = defineComponent({
     },
     objectPosition: {
       type: String
+    },
+    usePlaceholder: {
+      type: Boolean,
+      default: true
+    },
+    sizes: {
+      type: String
+    },
+    priority: {
+      type: Boolean,
+      default: false
+    },
+    srcSetCandidates: {
+      type: Array,
+      validator: (values) => values.every((value) => {
+        return typeof value === "number";
+      }),
+      default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
     }
   },
   setup(props) {
@@ -244,21 +292,33 @@ const Image = defineComponent({
       threshold: props.intersectionThreshold || props.intersectionTreshold || 0,
       rootMargin: props.intersectionMargin || "0px 0px 0px 0px"
     });
+    const computedLazyLoad = ref(props.priority ? false : props.lazyLoad);
+    const imageRef = ref();
+    watchEffect(() => {
+      if (!imageRef.value) {
+        return;
+      }
+      if (imageRef.value.complete && imageRef.value.naturalWidth) {
+        handleLoad();
+      }
+    });
     return {
       inView,
       elRef,
       loaded,
-      handleLoad
+      handleLoad,
+      computedLazyLoad,
+      imageRef
     };
   },
   render() {
     const addImage = imageAddStrategy({
-      lazyLoad: this.lazyLoad,
+      lazyLoad: this.computedLazyLoad,
       inView: this.inView,
       loaded: this.loaded
     });
     const showImage = imageShowStrategy({
-      lazyLoad: this.lazyLoad,
+      lazyLoad: this.computedLazyLoad,
       inView: this.inView,
       loaded: this.loaded
     });
@@ -266,30 +326,30 @@ const Image = defineComponent({
       ...isVue2 && {
         props: {
           srcset: this.data.webpSrcSet,
-          sizes: this.data.sizes,
+          sizes: this.sizes ?? this.data.sizes ?? void 0,
           type: "image/webp"
         }
       },
       ...isVue3 && {
         srcset: this.data.webpSrcSet,
-        sizes: this.data.sizes,
+        sizes: this.sizes ?? this.data.sizes ?? void 0,
         type: "image/webp"
       }
     });
     const regularSource = this.data.srcSet && h(Source, {
       ...isVue2 && {
         props: {
-          srcset: this.data.srcSet,
-          sizes: this.data.sizes
+          srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+          sizes: this.sizes ?? this.data.sizes ?? void 0
         }
       },
       ...isVue3 && {
-        srcset: this.data.srcSet,
-        sizes: this.data.sizes
+        srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+        sizes: this.sizes ?? this.data.sizes ?? void 0
       }
     });
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
-    const placeholder = h("div", {
+    const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? h("div", {
       style: {
         backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
         backgroundColor: this.data.bgColor,
@@ -298,11 +358,15 @@ const Image = defineComponent({
         objectFit: this.objectFit,
         objectPosition: this.objectPosition,
         transition,
-        ...absolutePositioning
+        position: "absolute",
+        left: "-5%",
+        top: "-5%",
+        width: "110%",
+        height: "110%"
       }
-    });
+    }) : null;
     const { width, aspectRatio } = this.data;
-    const height = this.data.height || width / aspectRatio;
+    const height = this.data.height ?? (aspectRatio ? width / aspectRatio : 0);
     const sizer = this.layout !== "fill" ? h(Sizer, {
       ...isVue2 && {
         props: {
@@ -343,7 +407,8 @@ const Image = defineComponent({
               attrs: {
                 src: this.data.src,
                 alt: this.data.alt,
-                title: this.data.title
+                title: this.data.title,
+                fetchpriority: this.priority ? "high" : void 0
               },
               on: {
                 load: this.handleLoad
@@ -353,16 +418,18 @@ const Image = defineComponent({
               src: this.data.src,
               alt: this.data.alt,
               title: this.data.title,
+              fetchpriority: this.priority ? "high" : void 0,
               onLoad: this.handleLoad
             },
+            ref: "imageRef",
             class: this.pictureClass,
             style: {
-              ...absolutePositioning,
-              ...this.pictureStyle,
               opacity: showImage ? 1 : 0,
               transition,
+              ...absolutePositioning,
               objectFit: this.objectFit,
-              objectPosition: this.objectPosition
+              objectPosition: this.objectPosition,
+              ...this.pictureStyle
             }
           })
         ]),
@@ -384,8 +451,14 @@ const Image = defineComponent({
                   alt: this.data.alt,
                   title: this.data.title,
                   class: this.pictureClass,
-                  style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
-                  loading: "lazy"
+                  style: toCss({
+                    ...absolutePositioning,
+                    objectFit: this.objectFit,
+                    objectPosition: this.objectPosition,
+                    ...this.pictureStyle
+                  }),
+                  loading: this.computedLazyLoad ? "lazy" : void 0,
+                  fetchpriority: this.priority ? "high" : void 0
                 })
               ])
             }
@@ -407,7 +480,8 @@ const Image = defineComponent({
                 title: this.data.title,
                 class: this.pictureClass,
                 style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
-                loading: "lazy"
+                loading: this.computedLazyLoad ? "lazy" : void 0,
+                fetchpriority: this.priority ? "high" : void 0
               })
             ])
           }
@@ -583,46 +657,34 @@ const DatocmsStructuredTextPlugin = {
   }
 };
 
-function useQuerySubscription(options) {
-  const { enabled, initialData, ...other } = options;
+const useQuerySubscription = ({ enabled = true, initialData, query, token, ...other }) => {
   const error = ref(null);
-  const data = ref(null);
-  const status = ref(
-    enabled ? "connecting" : "closed"
-  );
+  const data = ref(unref(initialData) || null);
+  const status = ref(unref(enabled) ? "connecting" : "closed");
   const subscribeToQueryOptions = other;
-  watchEffect((onCleanup) => {
-    if (enabled === false) {
-      status.value = "closed";
-      return () => {
-      };
-    }
-    let unsubscribe;
-    async function subscribe() {
-      unsubscribe = await subscribeToQuery({
+  watchEffect(async (onCleanup) => {
+    if (query && token && unref(enabled)) {
+      const unsubscribe = await subscribeToQuery({
         ...subscribeToQueryOptions,
+        query,
+        token,
         onStatusChange: (connectionStatus) => {
           status.value = connectionStatus;
         },
-        onUpdate: (updateData) => {
+        onUpdate: ({ response }) => {
           error.value = null;
-          data.value = updateData.response.data;
+          data.value = response.data;
         },
         onChannelError: (errorData) => {
           data.value = null;
           error.value = errorData;
         }
       });
+      onCleanup(unsubscribe);
     }
-    subscribe();
-    onCleanup(() => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
-    });
   });
-  return { error, status, data: data || initialData };
-}
+  return { data, status, error };
+};
 
 const highlightPieces = (textWithHighlightMarker) => {
   return textWithHighlightMarker.split(/\[h\](.+?)\[\/h\]/g).map((text, index) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "3.0.3",
+  "version": "4.0.1",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",
@@ -11,7 +11,16 @@
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.mjs",
   "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/datocms/vue-datocms.git"
+  },
   "license": "MIT",
+  "author": "Stefano Verna <s.verna@datocms.com>",
+  "contributors": [
+    "Silvano Stralla <silvano@datocms.com>"
+  ],
+  "homepage": "https://github.com/datocms/vue-datocms",
   "exports": {
     ".": {
       "import": "./dist/index.esm.mjs",