vue-datocms 1.0.4 → 2.0.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 -55
  2. package/dist/index.d.ts +111 -37
  3. package/dist/index.esm.js +157 -214
  4. package/dist/index.min.js +165 -219
  5. package/dist/index.umd.js +165 -219
  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}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k];}});}});}n['default']=e;return Object.freeze(n);}var hypenateStyleName__default=/*#__PURE__*/_interopDefaultLegacy(hypenateStyleName);var vueDemi__namespace=/*#__PURE__*/_interopNamespace(vueDemi);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,47 +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
- if (vueDemi__namespace.isVNode(element) && element.key === null) {
346
- return vueDemi__namespace.cloneVNode(element, {key});
347
- }
348
- } else if (element && typeof element === "object" && (element.key === null || element.key === void 0)) {
349
- element.key = key;
350
- return element;
277
+ if (vue.isVNode(element) && element.key === null) {
278
+ return vue.cloneVNode(element, { key });
351
279
  }
352
280
  return element;
353
281
  }
354
- const StructuredText = vueDemi.defineComponent({
282
+ const StructuredText = vue.defineComponent({
355
283
  name: "DatocmsStructuredText",
356
284
  props: {
357
285
  data: {
@@ -360,6 +288,12 @@ const StructuredText = vueDemi.defineComponent({
360
288
  customRules: {
361
289
  type: Array
362
290
  },
291
+ customNodeRules: {
292
+ type: Array
293
+ },
294
+ customMarkRules: {
295
+ type: Array
296
+ },
363
297
  renderInlineRecord: {
364
298
  type: Function
365
299
  },
@@ -369,65 +303,74 @@ const StructuredText = vueDemi.defineComponent({
369
303
  renderBlock: {
370
304
  type: Function
371
305
  },
372
- metaTransformer: {type: Function},
373
- renderText: {type: Function},
374
- renderNode: {type: Function},
375
- renderFragment: {type: Function}
306
+ metaTransformer: { type: Function },
307
+ renderText: { type: Function },
308
+ renderNode: { type: Function },
309
+ renderFragment: { type: Function }
376
310
  },
377
311
  setup(props) {
378
312
  return () => {
379
- return datocmsStructuredTextGenericHtmlRenderer.render({
380
- renderText: props.renderText || defaultAdapter.renderText,
381
- renderNode: props.renderNode || defaultAdapter.renderNode,
382
- renderFragment: props.renderFragment || defaultAdapter.renderFragment
383
- }, props.data, [
384
- datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isInlineItem, ({node, key}) => {
385
- if (!props.renderInlineRecord) {
386
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
387
- }
388
- if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
389
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
390
- }
391
- const item = props.data.links.find((item2) => item2.id === node.item);
392
- if (!item) {
393
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
394
- }
395
- return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
396
- }),
397
- datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isItemLink, ({node, key, children}) => {
398
- if (!props.renderLinkToRecord) {
399
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
400
- }
401
- if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
402
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
403
- }
404
- const item = props.data.links.find((item2) => item2.id === node.item);
405
- if (!item) {
406
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
407
- }
408
- return appendKeyToValidElement(props.renderLinkToRecord({
409
- record: item,
410
- children,
411
- transformedMeta: node.meta ? (props.metaTransformer || datocmsStructuredTextGenericHtmlRenderer.defaultMetaTransformer)({
412
- node,
413
- meta: node.meta
414
- }) : null
415
- }), key);
416
- }),
417
- datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isBlock, ({node, key}) => {
418
- if (!props.renderBlock) {
419
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
420
- }
421
- if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
422
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but .blocks is not present!`, node);
423
- }
424
- const item = props.data.blocks.find((item2) => item2.id === node.item);
425
- if (!item) {
426
- throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`, node);
427
- }
428
- return appendKeyToValidElement(props.renderBlock({record: item}), key);
429
- })
430
- ].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
+ });
431
374
  };
432
375
  }
433
376
  });
@@ -436,11 +379,13 @@ const DatocmsStructuredTextPlugin = {
436
379
  Vue.component("DatocmsStructuredText", StructuredText);
437
380
  }
438
381
  };var __defProp = Object.defineProperty;
439
- var __hasOwnProp = Object.prototype.hasOwnProperty;
382
+ var __defProps = Object.defineProperties;
383
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
440
384
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
385
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
441
386
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
442
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
443
- 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) => {
444
389
  for (var prop in b || (b = {}))
445
390
  if (__hasOwnProp.call(b, prop))
446
391
  __defNormalProp(a, prop, b[prop]);
@@ -451,6 +396,7 @@ var __objSpread = (a, b) => {
451
396
  }
452
397
  return a;
453
398
  };
399
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
454
400
  const toHead = (...args) => {
455
401
  const tags = [].concat(...args);
456
402
  const titleTag = tags && tags.find((t) => t.tag === "title");
@@ -460,17 +406,17 @@ const toHead = (...args) => {
460
406
  title: titleTag && titleTag.content,
461
407
  meta: metaTags.map((tag) => {
462
408
  var _a, _b, _c, _d;
463
- return __objSpread(__objSpread({}, tag.attributes), {
409
+ return __spreadProps(__spreadValues({}, tag.attributes), {
464
410
  hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || ((_b = tag.attributes) == null ? void 0 : _b.property),
465
411
  vmid: ((_c = tag.attributes) == null ? void 0 : _c.name) || ((_d = tag.attributes) == null ? void 0 : _d.property)
466
412
  });
467
413
  }),
468
414
  link: linkTags.map((tag) => {
469
415
  var _a, _b, _c, _d, _e, _f;
470
- return __objSpread(__objSpread({}, tag.attributes), {
416
+ return __spreadProps(__spreadValues({}, tag.attributes), {
471
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}`,
472
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}`
473
419
  });
474
420
  })
475
421
  };
476
- };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.4",
3
+ "version": "2.0.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
  }