vue-datocms 1.0.5 → 2.0.0

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 { render, renderRule, defaultMetaTransformer } from 'datocms-structured-text-generic-html-renderer';
-export { renderRule } from 'datocms-structured-text-generic-html-renderer';
-import { isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
+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,44 +273,18 @@ 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,
   renderMark: hAdapter,
-  renderFragment: (children, key) => crossH("div", {key}, children),
+  renderFragment: (children, key) => children,
   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;
 }
@@ -372,6 +297,12 @@ const StructuredText = defineComponent({
     customRules: {
       type: Array
     },
+    customNodeRules: {
+      type: Array
+    },
+    customMarkRules: {
+      type: Array
+    },
     renderInlineRecord: {
       type: Function
     },
@@ -381,65 +312,74 @@ 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 () => {
-      return render({
-        renderText: props.renderText || defaultAdapter.renderText,
-        renderNode: props.renderNode || defaultAdapter.renderNode,
-        renderFragment: props.renderFragment || defaultAdapter.renderFragment
-      }, props.data, [
-        renderRule(isInlineItem, ({node, key}) => {
-          if (!props.renderInlineRecord) {
-            throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
-          }
-          if (!isStructuredText(props.data) || !props.data.links) {
-            throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
-          }
-          const item = props.data.links.find((item2) => item2.id === node.item);
-          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);
-        }),
-        renderRule(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);
-          }
-          if (!isStructuredText(props.data) || !props.data.links) {
-            throw new RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
-          }
-          const item = props.data.links.find((item2) => item2.id === node.item);
-          if (!item) {
-            throw new RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
-          }
-          return appendKeyToValidElement(props.renderLinkToRecord({
-            record: item,
-            children,
-            transformedMeta: node.meta ? (props.metaTransformer || defaultMetaTransformer)({
-              node,
-              meta: node.meta
-            }) : null
-          }), key);
-        }),
-        renderRule(isBlock, ({node, key}) => {
-          if (!props.renderBlock) {
-            throw new RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
-          }
-          if (!isStructuredText(props.data) || !props.data.blocks) {
-            throw new RenderError(`The Structured Text document contains a 'block' node, but .blocks is not present!`, node);
-          }
-          const item = props.data.blocks.find((item2) => item2.id === node.item);
-          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);
-        })
-      ].concat(props.customRules || []), props.metaTransformer);
+      return render(props.data, {
+        adapter: {
+          renderText: props.renderText || defaultAdapter.renderText,
+          renderNode: props.renderNode || defaultAdapter.renderNode,
+          renderFragment: props.renderFragment || defaultAdapter.renderFragment
+        },
+        metaTransformer: props.metaTransformer,
+        customMarkRules: props.customMarkRules,
+        customNodeRules: [
+          renderNodeRule(isRoot, ({ adapter: { renderNode }, key, children }) => {
+            return renderNode("div", { key }, children);
+          }),
+          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);
+            }
+            if (!isStructuredText(props.data) || !props.data.links) {
+              throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
+            }
+            const item = props.data.links.find((item2) => item2.id === node.item);
+            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);
+          }),
+          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);
+            }
+            if (!isStructuredText(props.data) || !props.data.links) {
+              throw new RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
+            }
+            const item = props.data.links.find((item2) => item2.id === node.item);
+            if (!item) {
+              throw new RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
+            }
+            return appendKeyToValidElement(props.renderLinkToRecord({
+              record: item,
+              children,
+              transformedMeta: node.meta ? (props.metaTransformer || defaultMetaTransformer)({
+                node,
+                meta: node.meta
+              }) : null
+            }), 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);
+            }
+            if (!isStructuredText(props.data) || !props.data.blocks) {
+              throw new RenderError(`The Structured Text document contains a 'block' node, but .blocks is not present!`, node);
+            }
+            const item = props.data.blocks.find((item2) => item2.id === node.item);
+            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);
+          }),
+          ...props.customNodeRules || props.customRules || []
+        ]
+      });
     };
   }
 });
@@ -450,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]);
@@ -465,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");
@@ -474,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}`
       });