vue-datocms 1.0.5 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +67 -57
  2. package/dist/index.d.ts +111 -37
  3. package/dist/index.esm.js +157 -214
  4. package/dist/index.min.js +165 -220
  5. package/dist/index.umd.js +165 -220
  6. package/package.json +16 -20
package/dist/index.umd.js CHANGED
@@ -1,59 +1,22 @@
1
- (function(g,f){typeof exports==='object'&&typeof module!=='undefined'?f(exports,require('hyphenate-style-name'),require('vue-demi'),require('datocms-structured-text-generic-html-renderer'),require('datocms-structured-text-utils')):typeof define==='function'&&define.amd?define(['exports','hyphenate-style-name','vue-demi','datocms-structured-text-generic-html-renderer','datocms-structured-text-utils'],f):(g=typeof globalThis!=='undefined'?globalThis:g||self,f(g.VueDatocms={},g.hypenateStyleName,g.VueDemi,g.datocmsStructuredTextGenericHtmlRenderer,g.datocmsStructuredTextUtils));}(this,(function(exports, hypenateStyleName, vueDemi, datocmsStructuredTextGenericHtmlRenderer, datocmsStructuredTextUtils){'use strict';function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var hypenateStyleName__default=/*#__PURE__*/_interopDefaultLegacy(hypenateStyleName);var __defProp$2 = Object.defineProperty;
2
- var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
3
- var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
4
- var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
5
- var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
6
- var __objSpread$2 = (a, b) => {
7
- for (var prop in b || (b = {}))
8
- if (__hasOwnProp$3.call(b, prop))
9
- __defNormalProp$2(a, prop, b[prop]);
10
- if (__getOwnPropSymbols$3)
11
- for (var prop of __getOwnPropSymbols$3(b)) {
12
- if (__propIsEnum$3.call(b, prop))
13
- __defNormalProp$2(a, prop, b[prop]);
14
- }
15
- return a;
16
- };
17
- var __objRest$1 = (source, exclude) => {
18
- var target = {};
19
- for (var prop in source)
20
- if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
21
- target[prop] = source[prop];
22
- if (source != null && __getOwnPropSymbols$3)
23
- for (var prop of __getOwnPropSymbols$3(source)) {
24
- if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
25
- target[prop] = source[prop];
26
- }
27
- return target;
28
- };
29
- function crossH(tag, data, ...rest) {
30
- if (vueDemi.isVue3) {
31
- let vue3Data = null;
32
- if (data) {
33
- const _a = data, {domProps, attrs, props, on} = _a, other = __objRest$1(_a, ["domProps", "attrs", "props", "on"]);
34
- 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), {
35
- [`on${key.charAt(0).toUpperCase() + key.slice(1)}`]: value
36
- }), {}));
37
- }
38
- return vueDemi.h(tag, vue3Data, ...rest);
39
- }
40
- return vueDemi.h(tag, data, ...rest);
41
- }var __defProp$1 = Object.defineProperty;
42
- var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
43
- var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
44
- var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
45
- var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
46
- var __objSpread$1 = (a, b) => {
1
+ (function(g,f){typeof exports==='object'&&typeof module!=='undefined'?f(exports,require('hyphenate-style-name'),require('vue'),require('datocms-structured-text-generic-html-renderer'),require('datocms-structured-text-utils')):typeof define==='function'&&define.amd?define(['exports','hyphenate-style-name','vue','datocms-structured-text-generic-html-renderer','datocms-structured-text-utils'],f):(g=typeof globalThis!=='undefined'?globalThis:g||self,f(g.VueDatocms={},g.hypenateStyleName,g.vue,g.datocmsStructuredTextGenericHtmlRenderer,g.datocmsStructuredTextUtils));})(this,(function(exports,hypenateStyleName,vue,datocmsStructuredTextGenericHtmlRenderer,datocmsStructuredTextUtils){'use strict';function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var hypenateStyleName__default=/*#__PURE__*/_interopDefaultLegacy(hypenateStyleName);var __defProp$1 = Object.defineProperty;
2
+ var __defProps$1 = Object.defineProperties;
3
+ var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues$1 = (a, b) => {
47
9
  for (var prop in b || (b = {}))
48
- if (__hasOwnProp$2.call(b, prop))
10
+ if (__hasOwnProp$1.call(b, prop))
49
11
  __defNormalProp$1(a, prop, b[prop]);
50
- if (__getOwnPropSymbols$2)
51
- for (var prop of __getOwnPropSymbols$2(b)) {
52
- if (__propIsEnum$2.call(b, prop))
12
+ if (__getOwnPropSymbols$1)
13
+ for (var prop of __getOwnPropSymbols$1(b)) {
14
+ if (__propIsEnum$1.call(b, prop))
53
15
  __defNormalProp$1(a, prop, b[prop]);
54
16
  }
55
17
  return a;
56
18
  };
19
+ var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
57
20
  const escape = (s) => {
58
21
  s = "" + s;
59
22
  s = s.replace(/&/g, "&amp;");
@@ -70,7 +33,7 @@ const toCss = (object) => {
70
33
  let result = "";
71
34
  for (var styleName in object) {
72
35
  if (Object.prototype.hasOwnProperty.call(object, styleName) && object[styleName]) {
73
- result += `${hypenateStyleName__default['default'](styleName)}: ${object[styleName]}; `;
36
+ result += `${hypenateStyleName__default["default"](styleName)}: ${object[styleName]}; `;
74
37
  }
75
38
  }
76
39
  return result.length > 0 ? result : null;
@@ -90,9 +53,11 @@ const tag = (tagName, attrs, content) => {
90
53
  const attrsString = serializedAttrs.length > 0 ? ` ${serializedAttrs.join(" ")}` : "";
91
54
  return content ? `<${tagName}${attrsString}>${content.join("")}</${tagName}>` : `<${tagName}${attrsString} />`;
92
55
  };
93
- const isSsr = typeof window === "undefined";
94
- const isIntersectionObserverAvailable = isSsr ? false : !!window.IntersectionObserver;
95
- const universalBtoa = isSsr ? (str) => Buffer.from(str.toString(), "binary").toString("base64") : window.btoa;
56
+ const isSsr = () => typeof window === "undefined";
57
+ const isIntersectionObserverAvailable = () => {
58
+ return isSsr() ? false : !!window.IntersectionObserver;
59
+ };
60
+ const universalBtoa = (str) => isSsr() ? Buffer.from(str.toString(), "binary").toString("base64") : window.btoa(str);
96
61
  const absolutePositioning = {
97
62
  position: "absolute",
98
63
  left: "0px",
@@ -100,12 +65,12 @@ const absolutePositioning = {
100
65
  width: "100%",
101
66
  height: "100%"
102
67
  };
103
- const useInView = ({threshold, rootMargin}) => {
104
- const observer = vueDemi.ref(null);
105
- const elRef = vueDemi.ref(null);
106
- const inView = vueDemi.ref(false);
107
- vueDemi.onMounted(() => {
108
- if (isIntersectionObserverAvailable) {
68
+ const useInView = ({ threshold, rootMargin }) => {
69
+ const observer = vue.ref(null);
70
+ const elRef = vue.ref(null);
71
+ const inView = vue.ref(false);
72
+ vue.onMounted(() => {
73
+ if (isIntersectionObserverAvailable()) {
109
74
  observer.value = new IntersectionObserver((entries) => {
110
75
  const image = entries[0];
111
76
  if (image.isIntersecting && observer.value) {
@@ -121,38 +86,38 @@ const useInView = ({threshold, rootMargin}) => {
121
86
  }
122
87
  }
123
88
  });
124
- vueDemi.onBeforeUnmount(() => {
125
- if (isIntersectionObserverAvailable && observer.value) {
89
+ vue.onBeforeUnmount(() => {
90
+ if (isIntersectionObserverAvailable() && observer.value) {
126
91
  observer.value.disconnect();
127
92
  }
128
93
  });
129
- return {inView, elRef};
94
+ return { inView, elRef };
130
95
  };
131
- const imageAddStrategy = ({lazyLoad, inView, loaded}) => {
96
+ const imageAddStrategy = ({ lazyLoad, inView, loaded }) => {
132
97
  if (!lazyLoad) {
133
98
  return true;
134
99
  }
135
- if (isSsr) {
100
+ if (isSsr()) {
136
101
  return false;
137
102
  }
138
- if (isIntersectionObserverAvailable) {
103
+ if (isIntersectionObserverAvailable()) {
139
104
  return inView || loaded;
140
105
  }
141
106
  return true;
142
107
  };
143
- const imageShowStrategy = ({lazyLoad, loaded}) => {
108
+ const imageShowStrategy = ({ lazyLoad, loaded }) => {
144
109
  if (!lazyLoad) {
145
110
  return true;
146
111
  }
147
- if (isSsr) {
112
+ if (isSsr()) {
148
113
  return false;
149
114
  }
150
- if (isIntersectionObserverAvailable) {
115
+ if (isIntersectionObserverAvailable()) {
151
116
  return loaded;
152
117
  }
153
118
  return true;
154
119
  };
155
- const Image = vueDemi.defineComponent({
120
+ const Image = vue.defineComponent({
156
121
  name: "DatocmsImage",
157
122
  props: {
158
123
  data: {
@@ -189,11 +154,11 @@ const Image = vueDemi.defineComponent({
189
154
  }
190
155
  },
191
156
  setup(props) {
192
- const loaded = vueDemi.ref(false);
157
+ const loaded = vue.ref(false);
193
158
  function handleLoad() {
194
159
  loaded.value = true;
195
160
  }
196
- const {inView, elRef} = useInView({
161
+ const { inView, elRef } = useInView({
197
162
  threshold: props.intersectionThreshold || props.intersectionTreshold || 0,
198
163
  rootMargin: props.intersectionMargin || "0px 0px 0px 0px"
199
164
  });
@@ -215,22 +180,18 @@ const Image = vueDemi.defineComponent({
215
180
  inView: this.inView,
216
181
  loaded: this.loaded
217
182
  });
218
- const webpSource = this.data.webpSrcSet && crossH("source", {
219
- attrs: {
220
- srcset: this.data.webpSrcSet,
221
- sizes: this.data.sizes,
222
- type: "image/webp"
223
- }
183
+ const webpSource = this.data.webpSrcSet && vue.h("source", {
184
+ srcset: this.data.webpSrcSet,
185
+ sizes: this.data.sizes,
186
+ type: "image/webp"
224
187
  });
225
- const regularSource = this.data.srcSet && crossH("source", {
226
- attrs: {
227
- srcset: this.data.srcSet,
228
- sizes: this.data.sizes
229
- }
188
+ const regularSource = this.data.srcSet && vue.h("source", {
189
+ srcset: this.data.srcSet,
190
+ sizes: this.data.sizes
230
191
  });
231
192
  const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
232
- const placeholder = crossH("div", {
233
- style: __objSpread$1({
193
+ const placeholder = vue.h("div", {
194
+ style: __spreadValues$1({
234
195
  backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
235
196
  backgroundColor: this.data.bgColor,
236
197
  backgroundSize: "cover",
@@ -238,21 +199,19 @@ const Image = vueDemi.defineComponent({
238
199
  transition
239
200
  }, absolutePositioning)
240
201
  });
241
- const {width, aspectRatio} = this.data;
202
+ const { width, aspectRatio } = this.data;
242
203
  const height = this.data.height || width / aspectRatio;
243
204
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
244
- const sizer = crossH("img", {
205
+ const sizer = vue.h("img", {
245
206
  class: this.pictureClass,
246
- style: __objSpread$1({
207
+ style: __spreadValues$1({
247
208
  display: "block",
248
209
  width: this.explicitWidth ? `${width}px` : "100%"
249
210
  }, this.pictureStyle),
250
- attrs: {
251
- src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
252
- role: "presentation"
253
- }
211
+ src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
212
+ role: "presentation"
254
213
  });
255
- return crossH("div", {
214
+ return vue.h("div", {
256
215
  style: {
257
216
  display: this.explicitWidth ? "inline-block" : "block",
258
217
  overflow: "hidden",
@@ -262,47 +221,41 @@ const Image = vueDemi.defineComponent({
262
221
  }, [
263
222
  sizer,
264
223
  placeholder,
265
- addImage && crossH("picture", null, [
224
+ addImage && vue.h("picture", null, [
266
225
  webpSource,
267
226
  regularSource,
268
- this.data.src && crossH("img", {
269
- attrs: {
270
- src: this.data.src,
271
- alt: this.data.alt,
272
- title: this.data.title
273
- },
274
- on: {
275
- load: this.handleLoad
276
- },
227
+ this.data.src && vue.h("img", {
228
+ src: this.data.src,
229
+ alt: this.data.alt,
230
+ title: this.data.title,
231
+ onLoad: this.handleLoad,
277
232
  class: this.pictureClass,
278
- style: __objSpread$1(__objSpread$1(__objSpread$1({}, absolutePositioning), this.pictureStyle), {
233
+ style: __spreadProps$1(__spreadValues$1(__spreadValues$1({}, absolutePositioning), this.pictureStyle), {
279
234
  opacity: showImage ? 1 : 0,
280
235
  transition
281
236
  })
282
237
  })
283
238
  ]),
284
- crossH("noscript", {
285
- domProps: {
286
- innerHTML: tag("picture", {}, [
287
- this.data.webpSrcSet && tag("source", {
288
- srcset: this.data.webpSrcSet,
289
- sizes: this.data.sizes,
290
- type: "image/webp"
291
- }),
292
- this.data.srcSet && tag("source", {
293
- srcset: this.data.srcSet,
294
- sizes: this.data.sizes
295
- }),
296
- tag("img", {
297
- src: this.data.src,
298
- alt: this.data.alt,
299
- title: this.data.title,
300
- class: this.pictureClass,
301
- style: toCss(__objSpread$1(__objSpread$1({}, this.pictureStyle), absolutePositioning)),
302
- loading: "lazy"
303
- })
304
- ])
305
- }
239
+ vue.h("noscript", {
240
+ innerHTML: tag("picture", {}, [
241
+ this.data.webpSrcSet && tag("source", {
242
+ srcset: this.data.webpSrcSet,
243
+ sizes: this.data.sizes,
244
+ type: "image/webp"
245
+ }),
246
+ this.data.srcSet && tag("source", {
247
+ srcset: this.data.srcSet,
248
+ sizes: this.data.sizes
249
+ }),
250
+ tag("img", {
251
+ src: this.data.src,
252
+ alt: this.data.alt,
253
+ title: this.data.title,
254
+ class: this.pictureClass,
255
+ style: toCss(__spreadValues$1(__spreadValues$1({}, this.pictureStyle), absolutePositioning)),
256
+ loading: "lazy"
257
+ })
258
+ ])
306
259
  })
307
260
  ]);
308
261
  }
@@ -311,48 +264,22 @@ const DatocmsImagePlugin = {
311
264
  install: (Vue) => {
312
265
  Vue.component("DatocmsImage", Image);
313
266
  }
314
- };var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
315
- var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
316
- var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
317
- var __objRest = (source, exclude) => {
318
- var target = {};
319
- for (var prop in source)
320
- if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
321
- target[prop] = source[prop];
322
- if (source != null && __getOwnPropSymbols$1)
323
- for (var prop of __getOwnPropSymbols$1(source)) {
324
- if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
325
- target[prop] = source[prop];
326
- }
327
- return target;
328
- };
329
- const hAdapter = (tagName, props, childOrChildren) => {
330
- let data = props;
331
- if (props) {
332
- const _a = props, {key} = _a, attrs = __objRest(_a, ["key"]);
333
- data = {key, attrs};
334
- }
335
- return crossH(tagName, data, Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]);
267
+ };const hAdapter = (tagName, props, childOrChildren) => {
268
+ return vue.h(tagName, props, Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]);
336
269
  };
337
270
  const defaultAdapter = {
338
271
  renderNode: hAdapter,
339
272
  renderMark: hAdapter,
340
- renderFragment: (children, key) => crossH("div", {key}, children),
273
+ renderFragment: (children, key) => children,
341
274
  renderText: (text, key) => text
342
275
  };
343
276
  function appendKeyToValidElement(element, key) {
344
- if (vueDemi.isVue3) {
345
- const {isVNode, cloneVNode} = require("vue");
346
- if (isVNode(element) && element.key === null) {
347
- return cloneVNode(element, {key});
348
- }
349
- } else if (element && typeof element === "object" && (element.key === null || element.key === void 0)) {
350
- element.key = key;
351
- return element;
277
+ if (vue.isVNode(element) && element.key === null) {
278
+ return vue.cloneVNode(element, { key });
352
279
  }
353
280
  return element;
354
281
  }
355
- const StructuredText = vueDemi.defineComponent({
282
+ const StructuredText = vue.defineComponent({
356
283
  name: "DatocmsStructuredText",
357
284
  props: {
358
285
  data: {
@@ -361,6 +288,12 @@ const StructuredText = vueDemi.defineComponent({
361
288
  customRules: {
362
289
  type: Array
363
290
  },
291
+ customNodeRules: {
292
+ type: Array
293
+ },
294
+ customMarkRules: {
295
+ type: Array
296
+ },
364
297
  renderInlineRecord: {
365
298
  type: Function
366
299
  },
@@ -370,65 +303,74 @@ const StructuredText = vueDemi.defineComponent({
370
303
  renderBlock: {
371
304
  type: Function
372
305
  },
373
- metaTransformer: {type: Function},
374
- renderText: {type: Function},
375
- renderNode: {type: Function},
376
- renderFragment: {type: Function}
306
+ metaTransformer: { type: Function },
307
+ renderText: { type: Function },
308
+ renderNode: { type: Function },
309
+ renderFragment: { type: Function }
377
310
  },
378
311
  setup(props) {
379
312
  return () => {
380
- return datocmsStructuredTextGenericHtmlRenderer.render({
381
- renderText: props.renderText || defaultAdapter.renderText,
382
- renderNode: props.renderNode || defaultAdapter.renderNode,
383
- renderFragment: props.renderFragment || defaultAdapter.renderFragment
384
- }, props.data, [
385
- datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isInlineItem, ({node, key}) => {
386
- if (!props.renderInlineRecord) {
387
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
388
- }
389
- if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
390
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
391
- }
392
- const item = props.data.links.find((item2) => item2.id === node.item);
393
- if (!item) {
394
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
395
- }
396
- return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
397
- }),
398
- datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isItemLink, ({node, key, children}) => {
399
- if (!props.renderLinkToRecord) {
400
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
401
- }
402
- if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
403
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
404
- }
405
- const item = props.data.links.find((item2) => item2.id === node.item);
406
- if (!item) {
407
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
408
- }
409
- return appendKeyToValidElement(props.renderLinkToRecord({
410
- record: item,
411
- children,
412
- transformedMeta: node.meta ? (props.metaTransformer || datocmsStructuredTextGenericHtmlRenderer.defaultMetaTransformer)({
413
- node,
414
- meta: node.meta
415
- }) : null
416
- }), key);
417
- }),
418
- datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isBlock, ({node, key}) => {
419
- if (!props.renderBlock) {
420
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
421
- }
422
- if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
423
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but .blocks is not present!`, node);
424
- }
425
- const item = props.data.blocks.find((item2) => item2.id === node.item);
426
- if (!item) {
427
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`, node);
428
- }
429
- return appendKeyToValidElement(props.renderBlock({record: item}), key);
430
- })
431
- ].concat(props.customRules || []), props.metaTransformer);
313
+ return datocmsStructuredTextGenericHtmlRenderer.render(props.data, {
314
+ adapter: {
315
+ renderText: props.renderText || defaultAdapter.renderText,
316
+ renderNode: props.renderNode || defaultAdapter.renderNode,
317
+ renderFragment: props.renderFragment || defaultAdapter.renderFragment
318
+ },
319
+ metaTransformer: props.metaTransformer,
320
+ customMarkRules: props.customMarkRules,
321
+ customNodeRules: [
322
+ datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isRoot, ({ adapter: { renderNode }, key, children }) => {
323
+ return renderNode("div", { key }, children);
324
+ }),
325
+ datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isInlineItem, ({ node, key }) => {
326
+ if (!props.renderInlineRecord) {
327
+ throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
328
+ }
329
+ if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
330
+ throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
331
+ }
332
+ const item = props.data.links.find((item2) => item2.id === node.item);
333
+ if (!item) {
334
+ throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
335
+ }
336
+ return appendKeyToValidElement(props.renderInlineRecord({ record: item }), key);
337
+ }),
338
+ datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isItemLink, ({ node, key, children }) => {
339
+ if (!props.renderLinkToRecord) {
340
+ throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
341
+ }
342
+ if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
343
+ throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
344
+ }
345
+ const item = props.data.links.find((item2) => item2.id === node.item);
346
+ if (!item) {
347
+ throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
348
+ }
349
+ return appendKeyToValidElement(props.renderLinkToRecord({
350
+ record: item,
351
+ children,
352
+ transformedMeta: node.meta ? (props.metaTransformer || datocmsStructuredTextGenericHtmlRenderer.defaultMetaTransformer)({
353
+ node,
354
+ meta: node.meta
355
+ }) : null
356
+ }), key);
357
+ }),
358
+ datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isBlock, ({ node, key }) => {
359
+ if (!props.renderBlock) {
360
+ throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
361
+ }
362
+ if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
363
+ throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but .blocks is not present!`, node);
364
+ }
365
+ const item = props.data.blocks.find((item2) => item2.id === node.item);
366
+ if (!item) {
367
+ throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`, node);
368
+ }
369
+ return appendKeyToValidElement(props.renderBlock({ record: item }), key);
370
+ }),
371
+ ...props.customNodeRules || props.customRules || []
372
+ ]
373
+ });
432
374
  };
433
375
  }
434
376
  });
@@ -437,11 +379,13 @@ const DatocmsStructuredTextPlugin = {
437
379
  Vue.component("DatocmsStructuredText", StructuredText);
438
380
  }
439
381
  };var __defProp = Object.defineProperty;
440
- var __hasOwnProp = Object.prototype.hasOwnProperty;
382
+ var __defProps = Object.defineProperties;
383
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
441
384
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
385
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
442
386
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
443
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
444
- var __objSpread = (a, b) => {
387
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
388
+ var __spreadValues = (a, b) => {
445
389
  for (var prop in b || (b = {}))
446
390
  if (__hasOwnProp.call(b, prop))
447
391
  __defNormalProp(a, prop, b[prop]);
@@ -452,6 +396,7 @@ var __objSpread = (a, b) => {
452
396
  }
453
397
  return a;
454
398
  };
399
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
455
400
  const toHead = (...args) => {
456
401
  const tags = [].concat(...args);
457
402
  const titleTag = tags && tags.find((t) => t.tag === "title");
@@ -461,17 +406,17 @@ const toHead = (...args) => {
461
406
  title: titleTag && titleTag.content,
462
407
  meta: metaTags.map((tag) => {
463
408
  var _a, _b, _c, _d;
464
- return __objSpread(__objSpread({}, tag.attributes), {
409
+ return __spreadProps(__spreadValues({}, tag.attributes), {
465
410
  hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || ((_b = tag.attributes) == null ? void 0 : _b.property),
466
411
  vmid: ((_c = tag.attributes) == null ? void 0 : _c.name) || ((_d = tag.attributes) == null ? void 0 : _d.property)
467
412
  });
468
413
  }),
469
414
  link: linkTags.map((tag) => {
470
415
  var _a, _b, _c, _d, _e, _f;
471
- return __objSpread(__objSpread({}, tag.attributes), {
416
+ return __spreadProps(__spreadValues({}, tag.attributes), {
472
417
  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}`,
473
418
  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}`
474
419
  });
475
420
  })
476
421
  };
477
- };Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderRule;}});Object.defineProperty(exports,'RenderError',{enumerable:true,get:function(){return datocmsStructuredTextUtils.RenderError;}});exports.DatocmsImagePlugin=DatocmsImagePlugin;exports.DatocmsStructuredTextPlugin=DatocmsStructuredTextPlugin;exports.Image=Image;exports.StructuredText=StructuredText;exports.appendKeyToValidElement=appendKeyToValidElement;exports.defaultAdapter=defaultAdapter;exports.toHead=toHead;Object.defineProperty(exports,'__esModule',{value:true});})));
422
+ };Object.defineProperty(exports,'renderMarkRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderMarkRule}});Object.defineProperty(exports,'renderNodeRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule}});Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule}});Object.defineProperty(exports,'RenderError',{enumerable:true,get:function(){return datocmsStructuredTextUtils.RenderError}});exports.DatocmsImagePlugin=DatocmsImagePlugin;exports.DatocmsStructuredTextPlugin=DatocmsStructuredTextPlugin;exports.Image=Image;exports.StructuredText=StructuredText;exports.appendKeyToValidElement=appendKeyToValidElement;exports.defaultAdapter=defaultAdapter;exports.toHead=toHead;Object.defineProperty(exports,'__esModule',{value:true});}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-datocms",
3
- "version": "1.0.5",
3
+ "version": "2.0.0",
4
4
  "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
5
5
  "keywords": [
6
6
  "datocms",
@@ -28,36 +28,32 @@
28
28
  "test": "jest src"
29
29
  },
30
30
  "dependencies": {
31
- "datocms-structured-text-generic-html-renderer": "^1.0.14",
32
- "datocms-structured-text-utils": "^1.0.14",
33
- "hyphenate-style-name": "^1.0.4",
34
- "vue-demi": "^0.7.5"
31
+ "datocms-structured-text-generic-html-renderer": "^2.0.4",
32
+ "datocms-structured-text-utils": "^2.0.4",
33
+ "hyphenate-style-name": "^1.0.4"
35
34
  },
36
35
  "peerDependencies": {
37
- "@vue/composition-api": "^1.0.0-rc.1",
38
- "vue": "^2.0.0 || >=3.0.0-rc.1"
39
- },
40
- "peerDependenciesMeta": {
41
- "@vue/composition-api": {
42
- "optional": true
43
- }
36
+ "vue": "3"
44
37
  },
45
38
  "devDependencies": {
46
39
  "@types/hyphenate-style-name": "^1.0.0",
47
- "@types/jest": "^26.0.22",
40
+ "@types/jest": "^28.1.1",
48
41
  "@types/node": "^14.14.41",
49
- "@vue/compiler-sfc": "^3.0.5",
50
42
  "@vue/test-utils": "^2.0.0-rc.6",
43
+ "@vue/vue3-jest": "^28.0.0",
51
44
  "@vuedx/typescript-plugin-vue": "^0.6.3",
52
- "jest": "^26.6.3",
45
+ "jest": "^28.1.1",
46
+ "jest-environment-jsdom": "^28.1.1",
47
+ "jest-serializer-vue": "^2.0.2",
48
+ "jsdom": "^19.0.0",
49
+ "np": "^7.6.1",
53
50
  "rimraf": "^2.7.1",
54
51
  "rollup": "^2.45.2",
55
52
  "rollup-plugin-dts": "^3.0.1",
56
53
  "rollup-plugin-esbuild": "^4.1.0",
57
- "ts-jest": "^26.5.5",
58
- "typescript": "^4.1.3",
59
- "vue": "^3.0.5",
60
- "vue-jest": "^5.0.0-alpha.7",
61
- "vue-tsc": "^0.0.24"
54
+ "ts-jest": "^28.0.5",
55
+ "typescript": "^4.7.3",
56
+ "vue": "^3.2.25",
57
+ "vue-tsc": "^0.37.9"
62
58
  }
63
59
  }