vue-datocms 1.0.4 → 2.0.0-0

package/README.md

@@ -4,7 +4,7 @@
 
 A set of components and utilities to work faster with [DatoCMS](https://www.datocms.com/) in Vue.js environments. Integrates seamlessy with [DatoCMS's GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api).
 
-- Works with both Vue 2 and Vue 3;
+- Works with both Vue 2 (only on JS projects, not TypeScript) and Vue 3;
 - TypeScript ready;
 - Compatible with any data-fetching library (axios, Apollo);
 - Usable both client and server side;
@@ -12,7 +12,7 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
 
 <br /><br />
 <a href="https://www.datocms.com/">
-  <img src="https://www.datocms.com/images/full_logo.svg" height="60">
+<img src="https://www.datocms.com/images/full_logo.svg" height="60">
 </a>
 <br /><br />
 
@@ -53,7 +53,7 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
 npm install vue-datocms
 ```
 
-In Vue 2, also install `@vue/composition-api` as a dependency. Everything else should be similar to the example above for Vue 3.
+In Vue 2, also install `@vue/composition-api` as a dependency. Everything else should be similar to the example above for Vue 3. Please note that with Vue 2 support is limited to JS-only projects. TypeScript + Vue 2 is not supported at the moment, sorry.
 
 ## Live real-time updates
 
@@ -79,19 +79,25 @@ In Vue.js v3, `subscribeToQuery` can be used to implement a custom hook. Please
 
 ### Out-of-the-box features
 
-- Offer WebP version of images for browsers that support the format
-- Generate multiple smaller images so smartphones and tablets don’t download desktop-sized images
-- Efficiently lazy load images to speed initial page load and save bandwidth
-- Use either blur-up or background color techniques to show a preview of the image while it loads
-- Hold the image position so your page doesn’t jump while images load
+- Offers WebP version of images for browsers that support the format
+- Generates multiple smaller images so smartphones and tablets don’t download desktop-sized images
+- Efficiently lazy loads images to speed initial page load and save bandwidth
+- Holds the image position so your page doesn’t jump while images load
+- Uses either blur-up or background color techniques to show a preview of the image while it loads
+
+## Intersection Observer
+
+Intersection Observer is the API used to determine if the image is inside the viewport or not. [Browser support is really good](https://caniuse.com/intersectionobserver) - With Safari adding support in 12.1, all major browsers now support Intersection Observers natively.
+
+If the IntersectionObserver object is not available, the component treats the image as it's always visible in the viewport. Feel free to add a [polyfill](https://www.npmjs.com/package/intersection-observer) so that it will also 100% work on older versions of iOS and IE11.
 
 ### Setup
 
 You can register the component globally so it's available in all your apps:
 
 ```js
-import Vue from "vue";
-import { DatocmsImagePlugin } from "vue-datocms";
+import Vue from 'vue';
+import { DatocmsImagePlugin } from 'vue-datocms';
 
 Vue.use(DatocmsImagePlugin);
 ```
@@ -99,11 +105,11 @@ Vue.use(DatocmsImagePlugin);
 Or use it locally in any of your components:
 
 ```js
-import { Image } from "vue-datocms";
+import { Image } from 'vue-datocms';
 
 export default {
   components: {
-    "datocms-image": Image,
+    'datocms-image': Image,
   },
 };
 ```
@@ -130,8 +136,8 @@ For a fully working example take a look at our [examples directory](https://gith
 </template>
 
 <script>
-import { request } from "./lib/datocms";
-import { Image } from "vue-datocms";
+import { request } from './lib/datocms';
+import { Image } from 'vue-datocms';
 
 const query = gql`
   query {
@@ -169,7 +175,7 @@ const query = gql`
 
 export default {
   components: {
-    "datocms-image": Image,
+    'datocms-image': Image,
   },
   data() {
     return {
@@ -249,8 +255,8 @@ For a working example take a look at our [examples directory](https://github.com
 </template>
 
 <script>
-import { request } from "./lib/datocms";
-import { toHead } from "vue-datocms";
+import { request } from './lib/datocms';
+import { toHead } from 'vue-datocms';
 
 const query = gql`
   query {
@@ -301,8 +307,8 @@ export default {
 You can register the component globally so it's available in all your apps:
 
 ```js
-import Vue from "vue";
-import { DatocmsStructuredTextPlugin } from "vue-datocms";
+import Vue from 'vue';
+import { DatocmsStructuredTextPlugin } from 'vue-datocms';
 
 Vue.use(DatocmsStructuredTextPlugin);
 ```
@@ -310,11 +316,11 @@ Vue.use(DatocmsStructuredTextPlugin);
 Or use it locally in any of your components:
 
 ```js
-import { StructuredText } from "vue-datocms";
+import { StructuredText } from 'vue-datocms';
 
 export default {
   components: {
-    "datocms-structured-text": StructuredText,
+    'datocms-structured-text': StructuredText,
   },
 };
 ```
@@ -336,8 +342,8 @@ export default {
 </template>
 
 <script>
-import { request } from "./lib/datocms";
-import { StructuredText } from "vue-datocms";
+import { request } from './lib/datocms';
+import { StructuredText } from 'vue-datocms';
 
 const query = gql`
   query {
@@ -352,7 +358,7 @@ const query = gql`
 
 export default {
   components: {
-    "datocms-structured-text": StructuredText,
+    'datocms-structured-text': StructuredText,
   },
   data() {
     return {
@@ -425,9 +431,9 @@ You can also pass custom renderers for special nodes (inline records, record lin
 </template>
 
 <script>
-import { request } from "./lib/datocms";
-import { StructuredText, Image } from "vue-datocms";
-import { h } from "vue-demi";
+import { request } from './lib/datocms';
+import { StructuredText, Image } from 'vue-datocms';
+import { h } from 'vue';
 
 const query = gql`
   query {
@@ -448,7 +454,9 @@ const query = gql`
           ... on ImageRecord {
             id
             image {
-              responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
+              responsiveImage(
+                imgixParams: { fit: crop, w: 300, h: 300, auto: format }
+              ) {
                 srcSet
                 webpSrcSet
                 sizes
@@ -470,8 +478,8 @@ const query = gql`
 
 export default {
   components: {
-    "datocms-structured-text": StructuredText,
-    "datocms-image": Image,
+    'datocms-structured-text': StructuredText,
+    'datocms-image': Image,
   },
   data() {
     return {
@@ -481,21 +489,17 @@ export default {
   methods: {
     renderInlineRecord: ({ record }) => {
       switch (record.__typename) {
-        case "TeamMemberRecord":
-          return h(
-            "a",
-            { href: `/team/${record.slug}` },
-            record.firstName,
-          );
+        case 'TeamMemberRecord':
+          return h('a', { href: `/team/${record.slug}` }, record.firstName);
         default:
           return null;
       }
     },
     renderLinkToRecord: ({ record, children, transformedMeta }) => {
       switch (record.__typename) {
-        case "TeamMemberRecord":
+        case 'TeamMemberRecord':
           return h(
-            "a",
+            'a',
             { ...transformedMeta, href: `/team/${record.slug}` },
             children,
           );
@@ -505,8 +509,8 @@ export default {
     },
     renderBlock: ({ record }) => {
       switch (record.__typename) {
-        case "ImageRecord":
-          return h("datocms-image", {
+        case 'ImageRecord':
+          return h('datocms-image', {
             data: record.image.responsiveImage,
           });
         default:
@@ -583,18 +587,19 @@ This component automatically renders all nodes except for `inline_item`, `item_l
 - For `heading` nodes, you might want to add an anchor;
 - For `code` nodes, you might want to use a custom sytax highlighting component;
 
-In this case, you can easily override default rendering rules with the `customRules` prop.
+In this case, you can easily override default rendering rules with the `customNodeRules` and `customMarkRules` props.
 
 ```vue
 <template>
   <datocms-structured-text
     :data="data.blogPost.content"
-    :customRules="customRules"
+    :customNodeRules="customNodeRules"
+    :customMarkRules="customMarkRules"
   />
 </template>
 
 <script>
-import { StructuredText, renderRule } from "vue-datocms";
+import { StructuredText, renderNodeRule, renderMarkRule } from "vue-datocms";
 import { isHeading, isCode } from "datocms-structured-text-utils";
 import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
 import SyntaxHighlight from './components/SyntaxHighlight';
@@ -607,8 +612,8 @@ export default {
   data() {
     return {
       data: /* ... */,
-      customRules: [
-        renderRule(isHeading, ({ adapter: { renderNode: h }, node, children, key }) => {
+      customNodeRules: [
+        renderNodeRule(isHeading, ({ adapter: { renderNode: h }, node, children, key }) => {
           const anchor = toPlainText(node)
             .toLowerCase()
             .replace(/ /g, '-')
@@ -622,7 +627,7 @@ export default {
             ]
           );
         }),
-        renderRule(isCode, ({ adapter: { renderNode: h }, node, key }) => {
+        renderNodeRule(isCode, ({ adapter: { renderNode: h }, node, key }) => {
           return h('syntax-highlight', {
             key,
             code: node.code,
@@ -631,6 +636,12 @@ export default {
           }, []);
         }),
       ],
+      customMarkRules: [
+        // convert "strong" marks into <b> tags
+        renderMarkRule('strong', ({ adapter: { renderNode: h }, mark, children, key }) => {
+          return h('b', {key}, children);
+        }),
+      ],
     };
   },
 };
@@ -641,12 +652,13 @@ Note: if you override the rules for `inline_item`, `item_link` or `block` nodes,
 
 ## Props
 
-| prop               | type                                                     | required                                              | description                                                                                      | default                                                                                                              |
-| ------------------ | -------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
-| data               | `StructuredTextGraphQlResponse \| DastNode`              | :white_check_mark:                                    | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS |                                                                                                                      |
-| renderInlineRecord | `({ record }) => VNode \| null`                          | Only required if document contains `inlineItem` nodes | Convert an `inlineItem` DAST node into a VNode                                                     | `[]`                                                                                                                 |
-| renderLinkToRecord | `({ record, children, transformedMeta }) => VNode \| null`                | Only required if document contains `itemLink` nodes   | Convert an `itemLink` DAST node into a VNode                                                       | `null`                                                                                                               |
-| renderBlock        | `({ record }) => VNode \| null`                          | Only required if document contains `block` nodes      | Convert a `block` DAST node into a VNode                                                           | `null`                                                                                                               |
-| metaTransformer    | `({ node, meta }) => Object \| null`                     | :x:                                                   | Transform `link` and `itemLink` meta property into HTML props                                    | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
-| customRules        | `Array<RenderRule>`                                      | :x:                                                   | Customize how document is converted in JSX (use `renderRule()` to generate)                      | `null`                                                                                                               |
-| renderText         | `(text: string, key: string) => VNode \| string \| null` | :x:                                                   | Convert a simple string text into a VNode                                                          | `(text) => text`                                                                                                     |
+| prop               | type                                                       | required                                              | description                                                                                      | default                                                                                                              |
+| ------------------ | ---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
+| data               | `StructuredTextGraphQlResponse \| DastNode`                | :white_check_mark:                                    | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS |                                                                                                                      |
+| renderInlineRecord | `({ record }) => VNode \| null`                            | Only required if document contains `inlineItem` nodes | Convert an `inlineItem` DAST node into a VNode                                                   | `[]`                                                                                                                 |
+| renderLinkToRecord | `({ record, children, transformedMeta }) => VNode \| null` | Only required if document contains `itemLink` nodes   | Convert an `itemLink` DAST node into a VNode                                                     | `null`                                                                                                               |
+| renderBlock        | `({ record }) => VNode \| null`                            | Only required if document contains `block` nodes      | Convert a `block` DAST node into a VNode                                                         | `null`                                                                                                               |
+| metaTransformer    | `({ node, meta }) => Object \| null`                       | :x:                                                   | Transform `link` and `itemLink` meta property into HTML props                                    | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
+| customNodeRules    | `Array<RenderRule>`                                        | :x:                                                   | Customize how nodes are converted in JSX (use `renderNodeRule()` to generate)                    | `null`                                                                                                               |
+| customMarkRules    | `Array<RenderMarkRule>`                                    | :x:                                                   | Customize how marks are converted in JSX (use `renderMarkRule()` to generate)                    | `null`                                                                                                               |
+| renderText         | `(text: string, key: string) => VNode \| string \| null`   | :x:                                                   | Convert a simple string text into a VNode                                                        | `(text) => text`                                                                                                     |

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import * as vue_demi from 'vue-demi';
-import { PropType, VNodeProps, VNode } from 'vue-demi';
-import { TransformedMeta, TransformMetaFn } from 'datocms-structured-text-generic-html-renderer';
-export { renderRule } from 'datocms-structured-text-generic-html-renderer';
+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';
 export { RenderError, Document as StructuredTextDocument, StructuredText as StructuredTextGraphQlResponse } 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,14 +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> | 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, 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, 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, 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: {
@@ -151,23 +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;
-    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;
 };