vue-datocms 8.0.0-0 → 8.1.0

package/README.md

@@ -1,7 +1,11 @@
 <!--datocms-autoinclude-header start-->
+
 <a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
 
 👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
+
+---
+
 <!--datocms-autoinclude-header end-->
 
 # vue-datocms
@@ -71,27 +75,49 @@ npm run dev
 ```
 
 <!--datocms-autoinclude-footer start-->
------------------
+
+---
+
 # What is DatoCMS?
-<a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
+
+<a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60" alt="DatoCMS - The Headless CMS for the Modern Web"></a>
 
 [DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
 
-Trusted by over 25,000 enterprise businesses, agency partners, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
+Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
+
+**Why DatoCMS?**
+
+- **API-First Architecture**: Built for both REST and GraphQL, enabling flexible content delivery
+- **Just Enough Features**: We believe in keeping things simple, and giving you [the right feature-set tools](https://www.datocms.com/features) to get the job done
+- **Developer Experience**: First-class TypeScript support with powerful developer tools
+
+**Getting Started:**
+
+- ⚡️ [Create Free Account](https://dashboard.datocms.com/signup) - Get started with DatoCMS in minutes
+- 🔖 [Documentation](https://www.datocms.com/docs) - Comprehensive guides and API references
+- ⚙️ [Community Support](https://community.datocms.com/) - Get help from our team and community
+- 🆕 [Changelog](https://www.datocms.com/product-updates) - Latest features and improvements
+
+**Official Libraries:**
+
+- [**Content Delivery Client**](https://github.com/datocms/cda-client) - TypeScript GraphQL client for content fetching
+- [**REST API Clients**](https://github.com/datocms/js-rest-api-clients) - Node.js/Browser clients for content management
+- [**CLI Tools**](https://github.com/datocms/cli) - Command-line utilities for schema migrations (includes [Contentful](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [WordPress](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress) importers)
+
+**Official Framework Integrations**
+
+Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:
 
-**Quick links:**
+- [**React Components**](https://github.com/datocms/react-datocms)
+- [**Vue Components**](https://github.com/datocms/vue-datocms)
+- [**Svelte Components**](https://github.com/datocms/datocms-svelte)
+- [**Astro Components**](https://github.com/datocms/astro-datocms)
 
-- ⚡️ Get started with a [free DatoCMS account](https://dashboard.datocms.com/signup)
-- 🔖 Go through the [docs](https://www.datocms.com/docs)
-- ⚙️ Get [support from us and the community](https://community.datocms.com/)
-- 🆕 Stay up to date on new features and fixes on the [changelog](https://www.datocms.com/product-updates)
+**Additional Resources:**
 
-**Our featured repos:**
-- [datocms/react-datocms](https://github.com/datocms/react-datocms): React helper components for images, Structured Text rendering, and more
-- [datocms/js-rest-api-clients](https://github.com/datocms/js-rest-api-clients): Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our [GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api) instead.
-- [datocms/cli](https://github.com/datocms/cli): Command-line interface that includes our [Contentful importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [Wordpress importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress)
-- [datocms/plugins](https://github.com/datocms/plugins): Example plugins we've made that extend the editor/admin dashboard
-- [DatoCMS Starters](https://www.datocms.com/marketplace/starters) has examples for various Javascript frontend frameworks
+- [**Plugin Examples**](https://github.com/datocms/plugins) - Example plugins we've made that extend the editor/admin dashboard
+- [**Starter Projects**](https://www.datocms.com/marketplace/starters) - Example website implementations for popular frameworks
+- [**All Public Repositories**](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
 
-Or see [all our public repos](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
 <!--datocms-autoinclude-footer end-->

package/dist/index.cjs.js

@@ -186,17 +186,17 @@ function buildRegularSource(data, sizes, srcSetCandidates) {
 }
 
 var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
+    if (__hasOwnProp$6.call(b, prop))
       __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
         __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
@@ -234,17 +234,17 @@ const Sizer = vue.defineComponent({
 var __defProp$5 = Object.defineProperty;
 var __defProps$3 = Object.defineProperties;
 var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
+    if (__hasOwnProp$5.call(b, prop))
       __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
         __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
@@ -507,17 +507,17 @@ const DatocmsImagePlugin = {
 };
 
 var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
+    if (__hasOwnProp$4.call(b, prop))
       __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
         __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
@@ -643,34 +643,11 @@ const DatocmsNakedImagePlugin = {
   }
 };
 
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __objRest$2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const hAdapter = (tagName, props, childOrChildren) => {
-  const _a = props || {}; __objRest$2(_a, ["href", "target", "rel"]);
-  return vue.h(
-    tagName,
-    props,
-    typeof childOrChildren === "undefined" || Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]
-  );
-};
 const defaultAdapter = {
-  renderNode: hAdapter,
-  renderMark: hAdapter,
-  renderFragment: (children, key) => children,
-  renderText: (text, key) => text
+  renderNode: vue.h,
+  renderMark: vue.h,
+  renderFragment: (children, _key) => children,
+  renderText: (text, _key) => text
 };
 function appendKeyToValidElement(element, key) {
   if (element !== null && typeof element !== "string" && element.key === null) {
@@ -678,8 +655,39 @@ function appendKeyToValidElement(element, key) {
   }
   return element;
 }
-const StructuredText = vue.defineComponent(
-  (props) => {
+const StructuredText = vue.defineComponent({
+  name: "DatocmsStructuredText",
+  props: {
+    data: {
+      type: Object
+    },
+    customRules: {
+      type: Array
+    },
+    customNodeRules: {
+      type: Array
+    },
+    customMarkRules: {
+      type: Array
+    },
+    renderInlineRecord: {
+      type: Function
+    },
+    renderLinkToRecord: {
+      type: Function
+    },
+    renderBlock: {
+      type: Function
+    },
+    renderInlineBlock: {
+      type: Function
+    },
+    metaTransformer: { type: Function },
+    renderText: { type: Function },
+    renderNode: { type: Function },
+    renderFragment: { type: Function }
+  },
+  setup(props) {
     return () => {
       return datocmsStructuredTextGenericHtmlRenderer.render(props.data, {
         adapter: {
@@ -780,15 +788,39 @@ const StructuredText = vue.defineComponent(
               key
             );
           }),
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isInlineBlock, ({ node, key }) => {
+            if (!props.renderInlineBlock) {
+              throw new datocmsStructuredTextUtils.RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but no 'renderInlineBlock' prop is specified!`,
+                node
+              );
+            }
+            if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
+              throw new datocmsStructuredTextUtils.RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but .blocks is not present!`,
+                node
+              );
+            }
+            const item = props.data.blocks.find(
+              (item2) => item2.id === node.item
+            );
+            if (!item) {
+              throw new datocmsStructuredTextUtils.RenderError(
+                `The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`,
+                node
+              );
+            }
+            return appendKeyToValidElement(
+              props.renderInlineBlock({ record: item }),
+              key
+            );
+          }),
           ...props.customNodeRules || props.customRules || []
         ]
       });
     };
-  },
-  {
-    name: "DatocmsStructuredText"
   }
-);
+});
 const DatocmsStructuredTextPlugin = {
   install: (Vue) => {
     Vue.component("DatocmsStructuredText", StructuredText);
@@ -989,6 +1021,11 @@ const VideoPlayer = vue.defineComponent({
       required: false,
       default: () => true
     },
+    disableTracking: {
+      type: Boolean,
+      required: false,
+      default: () => true
+    },
     disablePictureInPicture: {
       type: Boolean,
       required: false
@@ -1186,16 +1223,19 @@ const VideoPlayer = vue.defineComponent({
     var _b = _a, {
       data = {},
       disableCookies = true,
+      disableTracking = true,
       preload = "metadata"
     } = _b, otherProps = __objRest$1(_b, [
       "data",
       "disableCookies",
+      "disableTracking",
       "preload"
     ]);
     Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@mux/mux-player')); });
     const muxPlayerRef = vue.ref();
     const computedProps = __spreadProps$2(__spreadValues$2({}, useVideoPlayer({ data })), {
       disableCookies,
+      disableTracking,
       preload
     });
     return {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { PropType, VNodeProps, VNode, Ref, UnwrapRef, CSSProperties } from 'vue';
+import { PropType, h, VNode, Ref, UnwrapRef, CSSProperties } 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';
@@ -406,10 +406,10 @@ declare const DatocmsNakedImagePlugin: {
 
 type AdapterReturn = VNode | string | null;
 declare const defaultAdapter: {
-    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;
+    renderNode: typeof h;
+    renderMark: typeof h;
+    renderFragment: (children: AdapterReturn[], _key: string) => AdapterReturn;
+    renderText: (text: string, _key: string) => AdapterReturn;
 };
 type H = typeof defaultAdapter.renderNode;
 type T = typeof defaultAdapter.renderText;
@@ -426,31 +426,105 @@ type RenderRecordLinkContext<R extends Record$1 = Record$1> = {
 type RenderBlockContext<R extends Record$1 = Record$1> = {
     record: R;
 };
-type StructuredTextPropTypes<R1 extends Record$1, R2 extends Record$1 = R1> = {
+declare const StructuredText: vue.DefineComponent<{
     /** The actual field value you get from DatoCMS **/
-    data: StructuredText$1<R1, R2> | Document | Node | null | undefined;
-    /** A set of additional rules to convert nodes to JSX **/
-    customNodeRules?: RenderRule<H, T, F>[];
-    /** A set of additional rules to convert marks to JSX **/
-    customMarkRules?: RenderMarkRule<H, T, F>[];
-    /** Fuction that converts an 'inlineItem' node into React **/
-    renderInlineRecord?: (context: RenderInlineRecordContext<R2>) => AdapterReturn;
-    /** Fuction that converts an 'itemLink' node into React **/
-    renderLinkToRecord?: (context: RenderRecordLinkContext<R2>) => AdapterReturn;
-    /** Fuction that converts a 'block' node into React **/
-    renderBlock?: (context: RenderBlockContext<R1>) => AdapterReturn;
+    data: {
+        type: PropType<StructuredText$1<Record$1, Record$1> | Document | Node | null | undefined>;
+    };
+    /** @deprecated use customNodeRules **/
+    customRules: {
+        type: PropType<RenderRule<typeof h, (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<typeof h, (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<typeof h, (text: string, _key: string) => AdapterReturn, (children: AdapterReturn[], _key: string) => AdapterReturn>[]>;
+    };
+    /** Fuction that converts an 'inlineItem' node into a Vue component **/
+    renderInlineRecord: {
+        type: PropType<(context: RenderInlineRecordContext<any>) => AdapterReturn>;
+    };
+    /** Fuction that converts an 'itemLink' node into a Vue component **/
+    renderLinkToRecord: {
+        type: PropType<(context: RenderRecordLinkContext<any>) => AdapterReturn>;
+    };
+    /** Fuction that converts a 'block' node into a Vue component **/
+    renderBlock: {
+        type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
+    };
+    /** Fuction that converts an 'inlineBlock' node into a Vue component **/
+    renderInlineBlock: {
+        type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
+    };
     /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
-    metaTransformer?: TransformMetaFn;
-    /** Fuction that converts a simple string text into React **/
-    renderText?: T;
-    /** React.createElement-like function to use to convert a node into React **/
-    renderNode?: H;
-    /** Function to use to generate a React.Fragment **/
-    renderFragment?: F;
+    metaTransformer: {
+        type: PropType<TransformMetaFn>;
+    };
+    /** Fuction that converts a simple string text into a Vue component **/
+    renderText: {
+        type: PropType<(text: string, _key: string) => AdapterReturn>;
+    };
+    /** React.createElement-like function to use to convert a node into a Vue component **/
+    renderNode: {
+        type: PropType<typeof h>;
+    };
+    /** Function to use to generate a Vue.Fragment **/
+    renderFragment: {
+        type: PropType<(children: AdapterReturn[], _key: string) => AdapterReturn>;
+    };
+}, () => RenderResult<typeof h, (text: string, _key: string) => AdapterReturn, (children: AdapterReturn[], _key: string) => AdapterReturn>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /** 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?: RenderRule<H, T, F>[];
-};
-declare const StructuredText: <R1 extends Record$1, R2 extends Record$1 = R1>(props: StructuredTextPropTypes<R1, R2> & {}) => any;
+    customRules: {
+        type: PropType<RenderRule<typeof h, (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<typeof h, (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<typeof h, (text: string, _key: string) => AdapterReturn, (children: AdapterReturn[], _key: string) => AdapterReturn>[]>;
+    };
+    /** Fuction that converts an 'inlineItem' node into a Vue component **/
+    renderInlineRecord: {
+        type: PropType<(context: RenderInlineRecordContext<any>) => AdapterReturn>;
+    };
+    /** Fuction that converts an 'itemLink' node into a Vue component **/
+    renderLinkToRecord: {
+        type: PropType<(context: RenderRecordLinkContext<any>) => AdapterReturn>;
+    };
+    /** Fuction that converts a 'block' node into a Vue component **/
+    renderBlock: {
+        type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
+    };
+    /** Fuction that converts an 'inlineBlock' node into a Vue component **/
+    renderInlineBlock: {
+        type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
+    };
+    /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
+    metaTransformer: {
+        type: PropType<TransformMetaFn>;
+    };
+    /** Fuction that converts a simple string text into a Vue component **/
+    renderText: {
+        type: PropType<(text: string, _key: string) => AdapterReturn>;
+    };
+    /** React.createElement-like function to use to convert a node into a Vue component **/
+    renderNode: {
+        type: PropType<typeof h>;
+    };
+    /** Function to use to generate a Vue.Fragment **/
+    renderFragment: {
+        type: PropType<(children: AdapterReturn[], _key: string) => AdapterReturn>;
+    };
+}>>, {}, {}>;
 declare const DatocmsStructuredTextPlugin: {
     install: (Vue: any) => void;
 };
@@ -545,6 +619,11 @@ declare const VideoPlayer: vue.DefineComponent<{
         required: false;
         default: () => boolean;
     };
+    disableTracking: {
+        type: BooleanConstructor;
+        required: false;
+        default: () => boolean;
+    };
     disablePictureInPicture: {
         type: BooleanConstructor;
         required: false;
@@ -714,6 +793,7 @@ declare const VideoPlayer: vue.DefineComponent<{
     muxPlayerRef: vue.Ref<MuxPlayerElement | undefined>;
     computedProps: {
         disableCookies: boolean;
+        disableTracking: boolean;
         preload: string;
         style?: (vue.CSSProperties | null) | undefined;
         title?: (string | null) | undefined;
@@ -867,6 +947,11 @@ declare const VideoPlayer: vue.DefineComponent<{
         required: false;
         default: () => boolean;
     };
+    disableTracking: {
+        type: BooleanConstructor;
+        required: false;
+        default: () => boolean;
+    };
     disablePictureInPicture: {
         type: BooleanConstructor;
         required: false;
@@ -1070,6 +1155,7 @@ declare const VideoPlayer: vue.DefineComponent<{
     defaultHiddenCaptions: boolean;
     defaultShowRemainingTime: boolean;
     disableCookies: boolean;
+    disableTracking: boolean;
     noVolumePref: boolean;
 }, {}>;
 declare const DatocmsVideoPlayerPlugin: {
@@ -1222,4 +1308,4 @@ declare const toHead: (...args: ToMetaTagsType[]) => {
     }[];
 };
 
-export { DatocmsImagePlugin, DatocmsNakedImagePlugin, DatocmsStructuredTextPlugin, DatocmsVideoPlayerPlugin, DisabledQueryListenerOptions, EnabledQueryListenerOptions, GenericClient, Image, NakedImage, QueryListenerOptions, RawSearchResult, RenderBlockContext, RenderInlineRecordContext, RenderRecordLinkContext, ResponsiveImageType, SeoMetaTagType, StructuredText, StructuredTextPropTypes, SubscribeToQueryOptions, ToMetaTagsType, UseSiteSearchConfig, UseSiteSearchData, UseSiteSearchResult, Video, VideoPlayer, appendKeyToValidElement, defaultAdapter, isKeyOf, isNil, toHead, toNativeAttrName, toNativeAttrValue, useQuerySubscription, useSiteSearch, useVideoPlayer };
+export { DatocmsImagePlugin, DatocmsNakedImagePlugin, DatocmsStructuredTextPlugin, DatocmsVideoPlayerPlugin, DisabledQueryListenerOptions, EnabledQueryListenerOptions, GenericClient, Image, NakedImage, QueryListenerOptions, RawSearchResult, RenderBlockContext, RenderInlineRecordContext, RenderRecordLinkContext, ResponsiveImageType, SeoMetaTagType, StructuredText, SubscribeToQueryOptions, ToMetaTagsType, UseSiteSearchConfig, UseSiteSearchData, UseSiteSearchResult, Video, VideoPlayer, appendKeyToValidElement, defaultAdapter, isKeyOf, isNil, toHead, toNativeAttrName, toNativeAttrValue, useQuerySubscription, useSiteSearch, useVideoPlayer };

package/dist/index.esm.mjs

@@ -2,7 +2,7 @@ import { ref, onMounted, onBeforeUnmount, defineComponent, h, watchEffect, unref
 import hypenateStyleName from 'hyphenate-style-name';
 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';
+import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock, isInlineBlock } from 'datocms-structured-text-utils';
 export { RenderError } from 'datocms-structured-text-utils';
 import { subscribeToQuery } from 'datocms-listen';
 
@@ -162,17 +162,17 @@ function buildRegularSource(data, sizes, srcSetCandidates) {
 }
 
 var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
+    if (__hasOwnProp$6.call(b, prop))
       __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
         __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
@@ -210,17 +210,17 @@ const Sizer = defineComponent({
 var __defProp$5 = Object.defineProperty;
 var __defProps$3 = Object.defineProperties;
 var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
+    if (__hasOwnProp$5.call(b, prop))
       __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
         __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
@@ -483,17 +483,17 @@ const DatocmsImagePlugin = {
 };
 
 var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
+    if (__hasOwnProp$4.call(b, prop))
       __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
         __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
@@ -619,34 +619,11 @@ const DatocmsNakedImagePlugin = {
   }
 };
 
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __objRest$2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const hAdapter = (tagName, props, childOrChildren) => {
-  const _a = props || {}; __objRest$2(_a, ["href", "target", "rel"]);
-  return h(
-    tagName,
-    props,
-    typeof childOrChildren === "undefined" || Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]
-  );
-};
 const defaultAdapter = {
-  renderNode: hAdapter,
-  renderMark: hAdapter,
-  renderFragment: (children, key) => children,
-  renderText: (text, key) => text
+  renderNode: h,
+  renderMark: h,
+  renderFragment: (children, _key) => children,
+  renderText: (text, _key) => text
 };
 function appendKeyToValidElement(element, key) {
   if (element !== null && typeof element !== "string" && element.key === null) {
@@ -654,8 +631,39 @@ function appendKeyToValidElement(element, key) {
   }
   return element;
 }
-const StructuredText = defineComponent(
-  (props) => {
+const StructuredText = defineComponent({
+  name: "DatocmsStructuredText",
+  props: {
+    data: {
+      type: Object
+    },
+    customRules: {
+      type: Array
+    },
+    customNodeRules: {
+      type: Array
+    },
+    customMarkRules: {
+      type: Array
+    },
+    renderInlineRecord: {
+      type: Function
+    },
+    renderLinkToRecord: {
+      type: Function
+    },
+    renderBlock: {
+      type: Function
+    },
+    renderInlineBlock: {
+      type: Function
+    },
+    metaTransformer: { type: Function },
+    renderText: { type: Function },
+    renderNode: { type: Function },
+    renderFragment: { type: Function }
+  },
+  setup(props) {
     return () => {
       return render(props.data, {
         adapter: {
@@ -756,15 +764,39 @@ const StructuredText = defineComponent(
               key
             );
           }),
+          renderNodeRule(isInlineBlock, ({ node, key }) => {
+            if (!props.renderInlineBlock) {
+              throw new RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but no 'renderInlineBlock' prop is specified!`,
+                node
+              );
+            }
+            if (!isStructuredText(props.data) || !props.data.blocks) {
+              throw new RenderError(
+                `The Structured Text document contains an 'inlineBlock' 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.renderInlineBlock({ record: item }),
+              key
+            );
+          }),
           ...props.customNodeRules || props.customRules || []
         ]
       });
     };
-  },
-  {
-    name: "DatocmsStructuredText"
   }
-);
+});
 const DatocmsStructuredTextPlugin = {
   install: (Vue) => {
     Vue.component("DatocmsStructuredText", StructuredText);
@@ -965,6 +997,11 @@ const VideoPlayer = defineComponent({
       required: false,
       default: () => true
     },
+    disableTracking: {
+      type: Boolean,
+      required: false,
+      default: () => true
+    },
     disablePictureInPicture: {
       type: Boolean,
       required: false
@@ -1162,16 +1199,19 @@ const VideoPlayer = defineComponent({
     var _b = _a, {
       data = {},
       disableCookies = true,
+      disableTracking = true,
       preload = "metadata"
     } = _b, otherProps = __objRest$1(_b, [
       "data",
       "disableCookies",
+      "disableTracking",
       "preload"
     ]);
     import('@mux/mux-player');
     const muxPlayerRef = ref();
     const computedProps = __spreadProps$2(__spreadValues$2({}, useVideoPlayer({ data })), {
       disableCookies,
+      disableTracking,
       preload
     });
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "8.0.0-0",
+  "version": "8.1.0",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",
@@ -42,13 +42,14 @@
   },
   "dependencies": {
     "datocms-listen": "^0.1.15",
-    "datocms-structured-text-generic-html-renderer": "^4.0.1",
-    "datocms-structured-text-utils": "^4.0.1",
+    "hls.js": "^1.5.17",
+    "datocms-structured-text-generic-html-renderer": "^4.1.2",
+    "datocms-structured-text-utils": "^4.1.2",
     "hyphenate-style-name": "^1.0.4"
   },
   "peerDependencies": {
     "@mux/mux-player": "*",
-    "vue": "^3.3.0"
+    "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "@mux/mux-player": {
@@ -57,18 +58,20 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.6.3",
-    "@mux/mux-player": "*",
+    "@mux/mux-player": "^2.5.0",
     "@mux/playback-core": "^0.22.1",
     "@types/hyphenate-style-name": "^1.0.2",
     "@types/jest": "^29.5.11",
     "@types/node": "^14.18.63",
     "@vue/test-utils": "^2.4.3",
     "@vuedx/typescript-plugin-vue": "^0.7.6",
+    "doctoc": "^2.0.0",
     "esbuild": "^0.15.18",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-serializer-vue": "^2.0.2",
     "jsdom": "^19.0.0",
+    "matchmedia-polyfill": "^0.3.2",
     "np": "^9.2.0",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^2.79.1",
@@ -77,7 +80,6 @@
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
     "typescript": "^4.9.5",
-    "vue-tsc": "^0.37.9",
-    "doctoc": "^2.0.0"
+    "vue-tsc": "^0.37.9"
   }
 }