vue-datocms 1.1.0 → 2.0.0-0

package/README.md

@@ -433,7 +433,7 @@ You can also pass custom renderers for special nodes (inline records, record lin
 <script>
 import { request } from './lib/datocms';
 import { StructuredText, Image } from 'vue-datocms';
-import { h } from 'vue-demi';
+import { h } from 'vue';
 
 const query = gql`
   query {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as vue_demi from 'vue-demi';
-import { PropType, VNodeProps, VNode } from 'vue-demi';
+import * as vue from 'vue';
+import { PropType, VNodeProps, VNode } from 'vue';
 import { TransformedMeta, RenderMarkRule, TransformMetaFn } from 'datocms-structured-text-generic-html-renderer';
 export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
 import { Record as Record$1, RenderResult, StructuredText as StructuredText$1, Document, Node, RenderRule } from 'datocms-structured-text-utils';
@@ -29,7 +29,7 @@ declare type ResponsiveImageType = {
     /** Title attribute (`title`) for the image */
     title?: string;
 };
-declare const Image: vue_demi.DefineComponent<{
+declare const Image: vue.DefineComponent<{
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
         type: PropType<ResponsiveImageType>;
@@ -72,22 +72,53 @@ declare const Image: vue_demi.DefineComponent<{
         type: BooleanConstructor;
     };
 }, {
-    inView: vue_demi.Ref<boolean>;
-    elRef: vue_demi.Ref<HTMLElement | null>;
-    loaded: vue_demi.Ref<boolean>;
+    inView: vue.Ref<boolean>;
+    elRef: vue.Ref<HTMLElement | null>;
+    loaded: vue.Ref<boolean>;
     handleLoad: () => void;
-}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
-    lazyLoad: boolean;
-    data: ResponsiveImageType;
-    intersectionTreshold: number;
-    intersectionMargin: string;
-    pictureStyle: Record<string, any>;
-    explicitWidth: boolean;
-} & {
-    pictureClass?: string | undefined;
-    fadeInDuration?: number | undefined;
-    intersectionThreshold?: number | undefined;
-}>, {
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
+    data: {
+        type: PropType<ResponsiveImageType>;
+        required: true;
+    };
+    /** Additional CSS class for the image inside the `<picture />` tag */
+    pictureClass: {
+        type: StringConstructor;
+    };
+    /** Duration (in ms) of the fade-in transition effect upoad image loading */
+    fadeInDuration: {
+        type: NumberConstructor;
+    };
+    /** @deprecated Use the intersectionThreshold prop */
+    intersectionTreshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible */
+    intersectionThreshold: {
+        type: NumberConstructor;
+    };
+    /** Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections */
+    intersectionMargin: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Wheter enable lazy loading or not */
+    lazyLoad: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Additional CSS rules to add to the image inside the `<picture />` tag */
+    pictureStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    /** Wheter the image wrapper should explicitely declare the width of the image or keep it fluid */
+    explicitWidth: {
+        type: BooleanConstructor;
+    };
+}>>, {
     lazyLoad: boolean;
     intersectionTreshold: number;
     intersectionMargin: string;
@@ -100,8 +131,8 @@ declare const DatocmsImagePlugin: {
 
 declare type AdapterReturn = VNode | string | null;
 declare const defaultAdapter: {
-    renderNode: (tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn;
-    renderMark: (tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn;
+    renderNode: (tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn;
+    renderMark: (tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn;
     renderFragment: (children: AdapterReturn[], key: string) => AdapterReturn;
     renderText: (text: string, key: string) => AdapterReturn;
 };
@@ -120,22 +151,67 @@ declare type RenderRecordLinkContext = {
 declare type RenderBlockContext = {
     record: Record$1;
 };
-declare const StructuredText: vue_demi.DefineComponent<{
+declare const StructuredText: vue.DefineComponent<{
+    /** The actual field value you get from DatoCMS **/
+    data: {
+        type: PropType<StructuredText$1<Record$1, Record$1> | Document | Node | null | undefined>;
+    };
+    /** @deprecated use customNodeRules **/
+    customRules: {
+        type: PropType<RenderRule<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
+    };
+    /** A set of additional rules to convert the document to JSX **/
+    customNodeRules: {
+        type: PropType<RenderRule<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
+    };
+    /** A set of additional rules to convert the document to JSX **/
+    customMarkRules: {
+        type: PropType<RenderMarkRule<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
+    };
+    /** Fuction that converts an 'inlineItem' node into React **/
+    renderInlineRecord: {
+        type: PropType<(context: RenderInlineRecordContext) => AdapterReturn>;
+    };
+    /** Fuction that converts an 'itemLink' node into React **/
+    renderLinkToRecord: {
+        type: PropType<(context: RenderRecordLinkContext) => AdapterReturn>;
+    };
+    /** Fuction that converts a 'block' node into React **/
+    renderBlock: {
+        type: PropType<(context: RenderBlockContext) => AdapterReturn>;
+    };
+    /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
+    metaTransformer: {
+        type: PropType<TransformMetaFn>;
+    };
+    /** Fuction that converts a simple string text into React **/
+    renderText: {
+        type: PropType<(text: string, key: string) => AdapterReturn>;
+    };
+    /** React.createElement-like function to use to convert a node into React **/
+    renderNode: {
+        type: PropType<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn>;
+    };
+    /** Function to use to generate a React.Fragment **/
+    renderFragment: {
+        type: PropType<(children: AdapterReturn[], key: string) => AdapterReturn>;
+    };
+}, () => RenderResult<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /** The actual field value you get from DatoCMS **/
     data: {
-        type: PropType<StructuredText$1<Record$1> | Document | Node | null | undefined>;
+        type: PropType<StructuredText$1<Record$1, Record$1> | Document | Node | null | undefined>;
     };
     /** @deprecated use customNodeRules **/
     customRules: {
-        type: PropType<RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
+        type: PropType<RenderRule<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
     };
     /** A set of additional rules to convert the document to JSX **/
     customNodeRules: {
-        type: PropType<RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
+        type: PropType<RenderRule<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
     };
     /** A set of additional rules to convert the document to JSX **/
     customMarkRules: {
-        type: PropType<RenderMarkRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
+        type: PropType<RenderMarkRule<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
     };
     /** Fuction that converts an 'inlineItem' node into React **/
     renderInlineRecord: {
@@ -159,25 +235,13 @@ declare const StructuredText: vue_demi.DefineComponent<{
     };
     /** React.createElement-like function to use to convert a node into React **/
     renderNode: {
-        type: PropType<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn>;
+        type: PropType<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn>;
     };
     /** Function to use to generate a React.Fragment **/
     renderFragment: {
         type: PropType<(children: AdapterReturn[], key: string) => AdapterReturn>;
     };
-}, () => RenderResult<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {
-    data?: StructuredText$1<Record$1> | Document | Node | null | undefined;
-    customRules?: RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[] | undefined;
-    customNodeRules?: RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[] | undefined;
-    customMarkRules?: RenderMarkRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[] | undefined;
-    renderInlineRecord?: ((context: RenderInlineRecordContext) => AdapterReturn) | undefined;
-    renderLinkToRecord?: ((context: RenderRecordLinkContext) => AdapterReturn) | undefined;
-    renderBlock?: ((context: RenderBlockContext) => AdapterReturn) | undefined;
-    metaTransformer?: TransformMetaFn | undefined;
-    renderText?: ((text: string, key: string) => AdapterReturn) | undefined;
-    renderNode?: ((tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn) | undefined;
-    renderFragment?: ((children: AdapterReturn[], key: string) => AdapterReturn) | undefined;
-}>, {}>;
+}>>, {}>;
 declare const DatocmsStructuredTextPlugin: {
     install: (Vue: any) => void;
 };

package/dist/index.esm.js

@@ -1,68 +1,29 @@
 import hypenateStyleName from 'hyphenate-style-name';
-import { isVue3, h, defineComponent, ref, onMounted, onBeforeUnmount } from 'vue-demi';
+import { defineComponent, ref, h, onMounted, onBeforeUnmount, isVNode, cloneVNode } from 'vue';
 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';
 export { RenderError } from 'datocms-structured-text-utils';
 
-var __defProp$2 = Object.defineProperty;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
-var __objSpread$2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function crossH(tag, data, ...rest) {
-  if (isVue3) {
-    let vue3Data = null;
-    if (data) {
-      const _a = data, {domProps, attrs, props, on} = _a, other = __objRest$1(_a, ["domProps", "attrs", "props", "on"]);
-      vue3Data = __objSpread$2(__objSpread$2(__objSpread$2(__objSpread$2(__objSpread$2({}, other), attrs), props), domProps), Object.entries(on || {}).reduce((acc, [key, value]) => __objSpread$2(__objSpread$2({}, acc), {
-        [`on${key.charAt(0).toUpperCase() + key.slice(1)}`]: value
-      }), {}));
-    }
-    return h(tag, vue3Data, ...rest);
-  }
-  return h(tag, data, ...rest);
-}
-
 var __defProp$1 = Object.defineProperty;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
-var __objSpread$1 = (a, b) => {
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
+    if (__hasOwnProp$1.call(b, prop))
       __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
         __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const escape = (s) => {
   s = "" + s;
   s = s.replace(/&/g, "&amp;");
@@ -99,9 +60,11 @@ const tag = (tagName, attrs, content) => {
   const attrsString = serializedAttrs.length > 0 ? ` ${serializedAttrs.join(" ")}` : "";
   return content ? `<${tagName}${attrsString}>${content.join("")}</${tagName}>` : `<${tagName}${attrsString} />`;
 };
-const isSsr = typeof window === "undefined";
-const isIntersectionObserverAvailable = isSsr ? false : !!window.IntersectionObserver;
-const universalBtoa = isSsr ? (str) => Buffer.from(str.toString(), "binary").toString("base64") : window.btoa;
+const isSsr = () => typeof window === "undefined";
+const isIntersectionObserverAvailable = () => {
+  return isSsr() ? false : !!window.IntersectionObserver;
+};
+const universalBtoa = (str) => isSsr() ? Buffer.from(str.toString(), "binary").toString("base64") : window.btoa(str);
 const absolutePositioning = {
   position: "absolute",
   left: "0px",
@@ -109,12 +72,12 @@ const absolutePositioning = {
   width: "100%",
   height: "100%"
 };
-const useInView = ({threshold, rootMargin}) => {
+const useInView = ({ threshold, rootMargin }) => {
   const observer = ref(null);
   const elRef = ref(null);
   const inView = ref(false);
   onMounted(() => {
-    if (isIntersectionObserverAvailable) {
+    if (isIntersectionObserverAvailable()) {
       observer.value = new IntersectionObserver((entries) => {
         const image = entries[0];
         if (image.isIntersecting && observer.value) {
@@ -131,32 +94,32 @@ const useInView = ({threshold, rootMargin}) => {
     }
   });
   onBeforeUnmount(() => {
-    if (isIntersectionObserverAvailable && observer.value) {
+    if (isIntersectionObserverAvailable() && observer.value) {
       observer.value.disconnect();
     }
   });
-  return {inView, elRef};
+  return { inView, elRef };
 };
-const imageAddStrategy = ({lazyLoad, inView, loaded}) => {
+const imageAddStrategy = ({ lazyLoad, inView, loaded }) => {
   if (!lazyLoad) {
     return true;
   }
-  if (isSsr) {
+  if (isSsr()) {
     return false;
   }
-  if (isIntersectionObserverAvailable) {
+  if (isIntersectionObserverAvailable()) {
     return inView || loaded;
   }
   return true;
 };
-const imageShowStrategy = ({lazyLoad, loaded}) => {
+const imageShowStrategy = ({ lazyLoad, loaded }) => {
   if (!lazyLoad) {
     return true;
   }
-  if (isSsr) {
+  if (isSsr()) {
     return false;
   }
-  if (isIntersectionObserverAvailable) {
+  if (isIntersectionObserverAvailable()) {
     return loaded;
   }
   return true;
@@ -202,7 +165,7 @@ const Image = defineComponent({
     function handleLoad() {
       loaded.value = true;
     }
-    const {inView, elRef} = useInView({
+    const { inView, elRef } = useInView({
       threshold: props.intersectionThreshold || props.intersectionTreshold || 0,
       rootMargin: props.intersectionMargin || "0px 0px 0px 0px"
     });
@@ -224,22 +187,18 @@ const Image = defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = this.data.webpSrcSet && crossH("source", {
-      attrs: {
-        srcset: this.data.webpSrcSet,
-        sizes: this.data.sizes,
-        type: "image/webp"
-      }
+    const webpSource = this.data.webpSrcSet && h("source", {
+      srcset: this.data.webpSrcSet,
+      sizes: this.data.sizes,
+      type: "image/webp"
     });
-    const regularSource = this.data.srcSet && crossH("source", {
-      attrs: {
-        srcset: this.data.srcSet,
-        sizes: this.data.sizes
-      }
+    const regularSource = this.data.srcSet && h("source", {
+      srcset: this.data.srcSet,
+      sizes: this.data.sizes
     });
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
-    const placeholder = crossH("div", {
-      style: __objSpread$1({
+    const placeholder = h("div", {
+      style: __spreadValues$1({
         backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
         backgroundColor: this.data.bgColor,
         backgroundSize: "cover",
@@ -247,21 +206,19 @@ const Image = defineComponent({
         transition
       }, absolutePositioning)
     });
-    const {width, aspectRatio} = this.data;
+    const { width, aspectRatio } = this.data;
     const height = this.data.height || width / aspectRatio;
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
-    const sizer = crossH("img", {
+    const sizer = h("img", {
       class: this.pictureClass,
-      style: __objSpread$1({
+      style: __spreadValues$1({
         display: "block",
         width: this.explicitWidth ? `${width}px` : "100%"
       }, this.pictureStyle),
-      attrs: {
-        src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
-        role: "presentation"
-      }
+      src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
+      role: "presentation"
     });
-    return crossH("div", {
+    return h("div", {
       style: {
         display: this.explicitWidth ? "inline-block" : "block",
         overflow: "hidden",
@@ -271,47 +228,41 @@ const Image = defineComponent({
     }, [
       sizer,
       placeholder,
-      addImage && crossH("picture", null, [
+      addImage && h("picture", null, [
         webpSource,
         regularSource,
-        this.data.src && crossH("img", {
-          attrs: {
-            src: this.data.src,
-            alt: this.data.alt,
-            title: this.data.title
-          },
-          on: {
-            load: this.handleLoad
-          },
+        this.data.src && h("img", {
+          src: this.data.src,
+          alt: this.data.alt,
+          title: this.data.title,
+          onLoad: this.handleLoad,
           class: this.pictureClass,
-          style: __objSpread$1(__objSpread$1(__objSpread$1({}, absolutePositioning), this.pictureStyle), {
+          style: __spreadProps$1(__spreadValues$1(__spreadValues$1({}, absolutePositioning), this.pictureStyle), {
             opacity: showImage ? 1 : 0,
             transition
           })
         })
       ]),
-      crossH("noscript", {
-        domProps: {
-          innerHTML: tag("picture", {}, [
-            this.data.webpSrcSet && tag("source", {
-              srcset: this.data.webpSrcSet,
-              sizes: this.data.sizes,
-              type: "image/webp"
-            }),
-            this.data.srcSet && tag("source", {
-              srcset: this.data.srcSet,
-              sizes: this.data.sizes
-            }),
-            tag("img", {
-              src: this.data.src,
-              alt: this.data.alt,
-              title: this.data.title,
-              class: this.pictureClass,
-              style: toCss(__objSpread$1(__objSpread$1({}, this.pictureStyle), absolutePositioning)),
-              loading: "lazy"
-            })
-          ])
-        }
+      h("noscript", {
+        innerHTML: tag("picture", {}, [
+          this.data.webpSrcSet && tag("source", {
+            srcset: this.data.webpSrcSet,
+            sizes: this.data.sizes,
+            type: "image/webp"
+          }),
+          this.data.srcSet && tag("source", {
+            srcset: this.data.srcSet,
+            sizes: this.data.sizes
+          }),
+          tag("img", {
+            src: this.data.src,
+            alt: this.data.alt,
+            title: this.data.title,
+            class: this.pictureClass,
+            style: toCss(__spreadValues$1(__spreadValues$1({}, this.pictureStyle), absolutePositioning)),
+            loading: "lazy"
+          })
+        ])
       })
     ]);
   }
@@ -322,28 +273,8 @@ const DatocmsImagePlugin = {
   }
 };
 
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const hAdapter = (tagName, props, childOrChildren) => {
-  let data = props;
-  if (props) {
-    const _a = props, {key} = _a, attrs = __objRest(_a, ["key"]);
-    data = {key, attrs};
-  }
-  return crossH(tagName, data, Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]);
+  return h(tagName, props, Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]);
 };
 const defaultAdapter = {
   renderNode: hAdapter,
@@ -352,14 +283,8 @@ const defaultAdapter = {
   renderText: (text, key) => text
 };
 function appendKeyToValidElement(element, key) {
-  if (isVue3) {
-    const {isVNode, cloneVNode} = require("vue");
-    if (isVNode(element) && element.key === null) {
-      return cloneVNode(element, {key});
-    }
-  } else if (element && typeof element === "object" && (element.key === null || element.key === void 0)) {
-    element.key = key;
-    return element;
+  if (isVNode(element) && element.key === null) {
+    return cloneVNode(element, { key });
   }
   return element;
 }
@@ -387,10 +312,10 @@ const StructuredText = defineComponent({
     renderBlock: {
       type: Function
     },
-    metaTransformer: {type: Function},
-    renderText: {type: Function},
-    renderNode: {type: Function},
-    renderFragment: {type: Function}
+    metaTransformer: { type: Function },
+    renderText: { type: Function },
+    renderNode: { type: Function },
+    renderFragment: { type: Function }
   },
   setup(props) {
     return () => {
@@ -403,10 +328,10 @@ const StructuredText = defineComponent({
         metaTransformer: props.metaTransformer,
         customMarkRules: props.customMarkRules,
         customNodeRules: [
-          renderNodeRule(isRoot, ({adapter: {renderNode}, key, children}) => {
-            return renderNode("div", {key}, children);
+          renderNodeRule(isRoot, ({ adapter: { renderNode }, key, children }) => {
+            return renderNode("div", { key }, children);
           }),
-          renderNodeRule(isInlineItem, ({node, key}) => {
+          renderNodeRule(isInlineItem, ({ node, key }) => {
             if (!props.renderInlineRecord) {
               throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
             }
@@ -417,9 +342,9 @@ const StructuredText = defineComponent({
             if (!item) {
               throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
             }
-            return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
+            return appendKeyToValidElement(props.renderInlineRecord({ record: item }), key);
           }),
-          renderNodeRule(isItemLink, ({node, key, children}) => {
+          renderNodeRule(isItemLink, ({ node, key, children }) => {
             if (!props.renderLinkToRecord) {
               throw new RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
             }
@@ -439,7 +364,7 @@ const StructuredText = defineComponent({
               }) : null
             }), key);
           }),
-          renderNodeRule(isBlock, ({node, key}) => {
+          renderNodeRule(isBlock, ({ node, key }) => {
             if (!props.renderBlock) {
               throw new RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
             }
@@ -450,7 +375,7 @@ const StructuredText = defineComponent({
             if (!item) {
               throw new RenderError(`The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`, node);
             }
-            return appendKeyToValidElement(props.renderBlock({record: item}), key);
+            return appendKeyToValidElement(props.renderBlock({ record: item }), key);
           }),
           ...props.customNodeRules || props.customRules || []
         ]
@@ -465,11 +390,13 @@ const DatocmsStructuredTextPlugin = {
 };
 
 var __defProp = Object.defineProperty;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
-var __objSpread = (a, b) => {
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp.call(b, prop))
       __defNormalProp(a, prop, b[prop]);
@@ -480,6 +407,7 @@ var __objSpread = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const toHead = (...args) => {
   const tags = [].concat(...args);
   const titleTag = tags && tags.find((t) => t.tag === "title");
@@ -489,14 +417,14 @@ const toHead = (...args) => {
     title: titleTag && titleTag.content,
     meta: metaTags.map((tag) => {
       var _a, _b, _c, _d;
-      return __objSpread(__objSpread({}, tag.attributes), {
+      return __spreadProps(__spreadValues({}, tag.attributes), {
         hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || ((_b = tag.attributes) == null ? void 0 : _b.property),
         vmid: ((_c = tag.attributes) == null ? void 0 : _c.name) || ((_d = tag.attributes) == null ? void 0 : _d.property)
       });
     }),
     link: linkTags.map((tag) => {
       var _a, _b, _c, _d, _e, _f;
-      return __objSpread(__objSpread({}, tag.attributes), {
+      return __spreadProps(__spreadValues({}, tag.attributes), {
         hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || `${(_b = tag.attributes) == null ? void 0 : _b.rel}-${(_c = tag.attributes) == null ? void 0 : _c.sizes}`,
         vmid: ((_d = tag.attributes) == null ? void 0 : _d.name) || `${(_e = tag.attributes) == null ? void 0 : _e.rel}-${(_f = tag.attributes) == null ? void 0 : _f.sizes}`
       });