react-datocms 5.0.3 → 6.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.
- package/README.md +4 -13
- package/dist/cjs/Image/index.js +38 -138
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/cjs/Image/utils.js +52 -0
- package/dist/cjs/Image/utils.js.map +1 -0
- package/dist/cjs/SRCImage/index.js +43 -0
- package/dist/cjs/SRCImage/index.js.map +1 -0
- package/dist/cjs/SRCImage/utils.js +82 -0
- package/dist/cjs/SRCImage/utils.js.map +1 -0
- package/dist/cjs/VideoPlayer/index.js +1 -1
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/useSiteSearch/index.js.map +1 -1
- package/dist/cjs/useVideoPlayer/index.js.map +1 -1
- package/dist/esm/Image/index.js +30 -110
- package/dist/esm/Image/index.js.map +1 -1
- package/dist/esm/Image/utils.js +46 -0
- package/dist/esm/Image/utils.js.map +1 -0
- package/dist/esm/SRCImage/index.js +36 -0
- package/dist/esm/SRCImage/index.js.map +1 -0
- package/dist/esm/SRCImage/utils.js +52 -0
- package/dist/esm/SRCImage/utils.js.map +1 -0
- package/dist/esm/VideoPlayer/index.js +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/useSiteSearch/index.js.map +1 -1
- package/dist/esm/useVideoPlayer/index.js.map +1 -1
- package/dist/types/Image/index.d.ts +3 -4
- package/dist/types/Image/utils.d.ts +7 -0
- package/dist/types/SRCImage/index.d.ts +33 -0
- package/dist/types/SRCImage/utils.d.ts +6 -0
- package/dist/types/index.d.ts +2 -1
- package/package.json +3 -4
- package/src/Image/__tests__/__snapshots__/index.test.tsx.snap +387 -60
- package/src/Image/__tests__/index.test.tsx +55 -8
- package/src/Image/index.tsx +64 -177
- package/src/Image/utils.ts +58 -0
- package/src/SRCImage/__tests__/__snapshots__/index.test.tsx.snap +268 -0
- package/src/SRCImage/__tests__/index.test.tsx +91 -0
- package/src/SRCImage/index.tsx +98 -0
- package/src/SRCImage/utils.tsx +95 -0
- package/src/VideoPlayer/index.tsx +1 -1
- package/src/index.ts +2 -1
- package/src/useSiteSearch/index.tsx +27 -27
- package/src/useVideoPlayer/index.ts +1 -4
package/dist/esm/Image/index.js
CHANGED
|
@@ -1,27 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import React
|
|
3
|
-
import {
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { forwardRef, useRef } from 'react';
|
|
4
|
+
import { buildRegularSource, buildWebpSource, priorityProp, } from '../SRCImage/utils.js';
|
|
4
5
|
import { useInView } from './useInView.js';
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
: !!window.IntersectionObserver;
|
|
9
|
-
function fetchPriorityProp(fetchPriority) {
|
|
10
|
-
const [majorStr, minorStr] = version.split('.');
|
|
11
|
-
const major = parseInt(majorStr, 10);
|
|
12
|
-
const minor = parseInt(minorStr, 10);
|
|
13
|
-
if (major > 18 || (major === 18 && minor >= 3)) {
|
|
14
|
-
// In React 18.3.0 or newer, we must use camelCase
|
|
15
|
-
// prop to avoid "Warning: Invalid DOM property".
|
|
16
|
-
// See https://github.com/facebook/react/pull/25927
|
|
17
|
-
return { fetchPriority };
|
|
18
|
-
}
|
|
19
|
-
// In React 18.2.0 or older, we must use lowercase prop
|
|
20
|
-
// to avoid "Warning: Invalid DOM property".
|
|
21
|
-
return { fetchpriority: fetchPriority };
|
|
22
|
-
}
|
|
23
|
-
const imageAddStrategy = ({ lazyLoad, inView, loaded }) => {
|
|
24
|
-
if (!lazyLoad) {
|
|
6
|
+
import { absolutePositioning, isIntersectionObserverAvailable, isSsr, universalBtoa, useImageLoad, useMergedRef, } from './utils.js';
|
|
7
|
+
const imageAddStrategy = ({ priority, inView, loaded }) => {
|
|
8
|
+
if (priority) {
|
|
25
9
|
return true;
|
|
26
10
|
}
|
|
27
11
|
if (isSsr) {
|
|
@@ -32,8 +16,8 @@ const imageAddStrategy = ({ lazyLoad, inView, loaded }) => {
|
|
|
32
16
|
}
|
|
33
17
|
return true;
|
|
34
18
|
};
|
|
35
|
-
const imageShowStrategy = ({
|
|
36
|
-
if (
|
|
19
|
+
const imageShowStrategy = ({ priority, loaded }) => {
|
|
20
|
+
if (priority) {
|
|
37
21
|
return true;
|
|
38
22
|
}
|
|
39
23
|
if (isSsr) {
|
|
@@ -44,99 +28,35 @@ const imageShowStrategy = ({ lazyLoad, loaded }) => {
|
|
|
44
28
|
}
|
|
45
29
|
return true;
|
|
46
30
|
};
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
if (!(src && width)) {
|
|
50
|
-
return undefined;
|
|
51
|
-
}
|
|
52
|
-
return candidateMultipliers
|
|
53
|
-
.map((multiplier) => {
|
|
54
|
-
const url = new URL(src, bogusBaseUrl);
|
|
55
|
-
if (multiplier !== 1) {
|
|
56
|
-
url.searchParams.set('dpr', `${multiplier}`);
|
|
57
|
-
const maxH = url.searchParams.get('max-h');
|
|
58
|
-
const maxW = url.searchParams.get('max-w');
|
|
59
|
-
if (maxH) {
|
|
60
|
-
url.searchParams.set('max-h', `${Math.floor(parseInt(maxH) * multiplier)}`);
|
|
61
|
-
}
|
|
62
|
-
if (maxW) {
|
|
63
|
-
url.searchParams.set('max-w', `${Math.floor(parseInt(maxW) * multiplier)}`);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
const finalWidth = Math.floor(width * multiplier);
|
|
67
|
-
if (finalWidth < 50) {
|
|
68
|
-
return null;
|
|
69
|
-
}
|
|
70
|
-
return `${url.toString().replace(bogusBaseUrl, '/')} ${finalWidth}w`;
|
|
71
|
-
})
|
|
72
|
-
.filter(Boolean)
|
|
73
|
-
.join(',');
|
|
74
|
-
};
|
|
75
|
-
export const Image = forwardRef(({ className, fadeInDuration = 500, intersectionTreshold, intersectionThreshold, intersectionMargin, pictureClassName, lazyLoad: rawLazyLoad = true, style, pictureStyle, layout = 'intrinsic', objectFit, objectPosition, data, onLoad, usePlaceholder = true, priority = false, sizes, srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], placeholderClassName, placeholderStyle, }, ref) => {
|
|
76
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
77
|
-
const lazyLoad = priority ? false : rawLazyLoad;
|
|
78
|
-
const [loaded, setLoaded] = useState(false);
|
|
31
|
+
export const Image = forwardRef(({ className, fadeInDuration = 500, intersectionTreshold, intersectionThreshold, intersectionMargin, pictureClassName, style, pictureStyle, layout = 'intrinsic', objectFit, objectPosition, data, onLoad, usePlaceholder = true, priority = false, sizes, srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], placeholderClassName, placeholderStyle, }, ref) => {
|
|
32
|
+
var _a, _b, _c, _d, _e;
|
|
79
33
|
const imageRef = useRef(null);
|
|
80
|
-
const handleLoad = ()
|
|
81
|
-
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
82
|
-
setLoaded(true);
|
|
83
|
-
};
|
|
84
|
-
// https://stackoverflow.com/q/39777833/266535
|
|
85
|
-
useEffect(() => {
|
|
86
|
-
if (!imageRef.current) {
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
if (imageRef.current.complete && imageRef.current.naturalWidth) {
|
|
90
|
-
handleLoad();
|
|
91
|
-
}
|
|
92
|
-
}, []);
|
|
34
|
+
const [loaded, handleLoad] = useImageLoad(imageRef, onLoad);
|
|
93
35
|
const [viewRef, inView] = useInView({
|
|
94
36
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
95
37
|
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
96
38
|
triggerOnce: true,
|
|
97
39
|
fallbackInView: true,
|
|
98
40
|
});
|
|
99
|
-
const
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
}, [viewRef]);
|
|
105
|
-
const absolutePositioning = {
|
|
106
|
-
position: 'absolute',
|
|
107
|
-
left: 0,
|
|
108
|
-
top: 0,
|
|
109
|
-
width: '100%',
|
|
110
|
-
height: '100%',
|
|
111
|
-
maxWidth: 'none',
|
|
112
|
-
maxHeight: 'none',
|
|
113
|
-
};
|
|
114
|
-
const addImage = imageAddStrategy({
|
|
115
|
-
lazyLoad,
|
|
116
|
-
inView,
|
|
117
|
-
loaded,
|
|
118
|
-
});
|
|
119
|
-
const showImage = imageShowStrategy({
|
|
120
|
-
lazyLoad,
|
|
121
|
-
inView,
|
|
122
|
-
loaded,
|
|
123
|
-
});
|
|
124
|
-
const webpSource = data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: (_a = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _a !== void 0 ? _a : undefined, type: "image/webp" }));
|
|
125
|
-
const regularSource = (React.createElement("source", { srcSet: (_b = data.srcSet) !== null && _b !== void 0 ? _b : buildSrcSet(data.src, data.width, srcSetCandidates), sizes: (_c = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _c !== void 0 ? _c : undefined }));
|
|
41
|
+
const rootRef = useMergedRef(ref, viewRef);
|
|
42
|
+
const addImage = imageAddStrategy({ priority, inView, loaded });
|
|
43
|
+
const showImage = imageShowStrategy({ priority, inView, loaded });
|
|
44
|
+
const webpSource = buildWebpSource(data, sizes);
|
|
45
|
+
const regularSource = buildRegularSource(data, sizes, srcSetCandidates);
|
|
126
46
|
const transition = fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : undefined;
|
|
127
|
-
const
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
47
|
+
const basePlaceholderStyle = Object.assign({ transition, opacity: showImage ? 0 : 1,
|
|
48
|
+
// During the opacity transition of the placeholder to the definitive version,
|
|
49
|
+
// hardware acceleration is triggered. This results in the browser trying to render the
|
|
50
|
+
// placeholder with your GPU, causing blurred edges. Solution: style the placeholder
|
|
51
|
+
// so the edges overflow the container
|
|
52
|
+
position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: '110%', maxWidth: 'none', maxHeight: 'none' }, placeholderStyle);
|
|
53
|
+
const placeholder = usePlaceholder && data.base64 ? (React.createElement("img", { "aria-hidden": "true", alt: "", src: data.base64, className: placeholderClassName, style: Object.assign({ objectFit,
|
|
54
|
+
objectPosition }, basePlaceholderStyle) })) : usePlaceholder && data.bgColor ? (React.createElement("div", { className: placeholderClassName, style: Object.assign({ backgroundColor: data.bgColor }, basePlaceholderStyle) })) : null;
|
|
135
55
|
const { width, aspectRatio } = data;
|
|
136
|
-
const height = (
|
|
56
|
+
const height = (_a = data.height) !== null && _a !== void 0 ? _a : (aspectRatio ? width / aspectRatio : 0);
|
|
137
57
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
|
|
138
|
-
const sizer = layout !== 'fill' ? (React.createElement("img", { className: pictureClassName, style: Object.assign({ display: 'block', width: '100%' }, pictureStyle), src: `data:image/svg+xml;base64,${
|
|
139
|
-
return (React.createElement("div", { ref:
|
|
58
|
+
const sizer = layout !== 'fill' ? (React.createElement("img", { className: pictureClassName, style: Object.assign({ display: 'block', width: '100%' }, pictureStyle), src: `data:image/svg+xml;base64,${universalBtoa(svg)}`, "aria-hidden": "true", alt: "" })) : null;
|
|
59
|
+
return (React.createElement("div", { ref: rootRef, className: className, style: Object.assign(Object.assign({ overflow: 'hidden' }, (layout === 'fill'
|
|
140
60
|
? absolutePositioning
|
|
141
61
|
: layout === 'intrinsic'
|
|
142
62
|
? { position: 'relative', width: '100%', maxWidth: width }
|
|
@@ -150,7 +70,7 @@ export const Image = forwardRef(({ className, fadeInDuration = 500, intersection
|
|
|
150
70
|
regularSource,
|
|
151
71
|
data.src && (
|
|
152
72
|
// biome-ignore lint/a11y/useAltText: We do support the `alt` attribute
|
|
153
|
-
React.createElement("img", Object.assign({ ref: imageRef, src: data.src, alt: (
|
|
73
|
+
React.createElement("img", Object.assign({ ref: imageRef, src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: (_c = data.title) !== null && _c !== void 0 ? _c : undefined, onLoad: handleLoad }, priorityProp(priority ? 'high' : undefined), { className: pictureClassName, style: Object.assign(Object.assign(Object.assign({ opacity: showImage ? 1 : 0, transition }, absolutePositioning), { objectFit,
|
|
154
74
|
objectPosition }), pictureStyle) }))))),
|
|
155
75
|
React.createElement("noscript", null,
|
|
156
76
|
React.createElement("picture", null,
|
|
@@ -158,7 +78,7 @@ export const Image = forwardRef(({ className, fadeInDuration = 500, intersection
|
|
|
158
78
|
regularSource,
|
|
159
79
|
data.src && (
|
|
160
80
|
// biome-ignore lint/a11y/useAltText: We do support the `alt` attribute
|
|
161
|
-
React.createElement("img", Object.assign({ src: data.src, alt: (
|
|
162
|
-
objectPosition }), pictureStyle), loading:
|
|
81
|
+
React.createElement("img", Object.assign({ src: data.src, alt: (_d = data.alt) !== null && _d !== void 0 ? _d : '', title: (_e = data.title) !== null && _e !== void 0 ? _e : undefined, className: pictureClassName, style: Object.assign(Object.assign(Object.assign({}, absolutePositioning), { objectFit,
|
|
82
|
+
objectPosition }), pictureStyle), loading: priority ? undefined : 'lazy' }, priorityProp(priority ? 'high' : undefined))))))));
|
|
163
83
|
});
|
|
164
84
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
2
|
+
export const isSsr = typeof window === 'undefined';
|
|
3
|
+
export const isIntersectionObserverAvailable = isSsr
|
|
4
|
+
? false
|
|
5
|
+
: !!window.IntersectionObserver;
|
|
6
|
+
export const universalBtoa = (str) => isSsr
|
|
7
|
+
? Buffer.from(str.toString(), 'binary').toString('base64')
|
|
8
|
+
: window.btoa(str);
|
|
9
|
+
export function useImageLoad(ref, callback) {
|
|
10
|
+
const [loaded, setLoaded] = useState(false);
|
|
11
|
+
function handleLoad() {
|
|
12
|
+
setLoaded(true);
|
|
13
|
+
callback === null || callback === void 0 ? void 0 : callback();
|
|
14
|
+
}
|
|
15
|
+
// https://stackoverflow.com/q/39777833/266535
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (!ref.current) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
if (ref.current.complete && ref.current.naturalWidth) {
|
|
21
|
+
handleLoad();
|
|
22
|
+
}
|
|
23
|
+
}, []);
|
|
24
|
+
return [loaded, handleLoad];
|
|
25
|
+
}
|
|
26
|
+
export function useMergedRef(...refs) {
|
|
27
|
+
return useCallback((element) => {
|
|
28
|
+
for (let i = 0; i < refs.length; i++) {
|
|
29
|
+
const ref = refs[i];
|
|
30
|
+
if (typeof ref === 'function')
|
|
31
|
+
ref(element);
|
|
32
|
+
else if (ref && typeof ref === 'object')
|
|
33
|
+
ref.current = element;
|
|
34
|
+
}
|
|
35
|
+
}, refs);
|
|
36
|
+
}
|
|
37
|
+
export const absolutePositioning = {
|
|
38
|
+
position: 'absolute',
|
|
39
|
+
left: 0,
|
|
40
|
+
top: 0,
|
|
41
|
+
width: '100%',
|
|
42
|
+
height: '100%',
|
|
43
|
+
maxWidth: 'none',
|
|
44
|
+
maxHeight: 'none',
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/Image/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAEnD,MAAM,CAAC,MAAM,+BAA+B,GAAG,KAAK;IAClD,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC;AAElC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAW,EAAU,EAAE,CACnD,KAAK;IACH,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAC1D,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEvB,MAAM,UAAU,YAAY,CAC1B,GAAsC,EACtC,QAAkC;IAElC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,UAAU;QACjB,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;IACf,CAAC;IAED,8CAA8C;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,IAAI,GAAG,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;YACrD,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CAAC,MAAM,EAAE,UAAU,CAAU,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,YAAY,CAAI,GAAG,IAAoB;IACrD,OAAO,WAAW,CAAC,CAAC,OAAU,EAAE,EAAE;QAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,OAAO,GAAG,KAAK,UAAU;gBAAE,GAAG,CAAC,OAAO,CAAC,CAAC;iBACvC,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ;gBACpC,GAAiC,CAAC,OAAO,GAAG,OAAO,CAAC;QACzD,CAAC;IACH,CAAC,EAAE,IAAI,CAAC,CAAC;AACX,CAAC;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAwB;IACtD,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;CAClB,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { buildRegularSource, buildWebpSource, priorityProp } from './utils.js';
|
|
3
|
+
export function SRCImage({ className, style, data, usePlaceholder = true, priority = false, sizes, srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], }) {
|
|
4
|
+
var _a, _b, _c, _d;
|
|
5
|
+
const webpSource = buildWebpSource(data, sizes);
|
|
6
|
+
const regularSource = buildRegularSource(data, sizes, srcSetCandidates);
|
|
7
|
+
const placeholderStyle = usePlaceholder && data.base64
|
|
8
|
+
? {
|
|
9
|
+
backgroundImage: `url(${data.base64})`,
|
|
10
|
+
backgroundSize: 'cover',
|
|
11
|
+
backgroundRepeat: 'no-repeat',
|
|
12
|
+
backgroundPosition: '50% 50%',
|
|
13
|
+
color: 'transparent',
|
|
14
|
+
}
|
|
15
|
+
: usePlaceholder && data.bgColor
|
|
16
|
+
? { backgroundColor: (_a = data.bgColor) !== null && _a !== void 0 ? _a : undefined, color: 'transparent' }
|
|
17
|
+
: undefined;
|
|
18
|
+
const { width } = data;
|
|
19
|
+
const height = (_b = data.height) !== null && _b !== void 0 ? _b : Math.round(data.aspectRatio ? width / data.aspectRatio : 0);
|
|
20
|
+
const sizingStyle = {
|
|
21
|
+
aspectRatio: `${width} / ${height}`,
|
|
22
|
+
width: '100%',
|
|
23
|
+
maxWidth: `${width}px`,
|
|
24
|
+
height: 'auto',
|
|
25
|
+
};
|
|
26
|
+
const loadingBehaviourProps = priority
|
|
27
|
+
? priorityProp(priority ? 'high' : undefined)
|
|
28
|
+
: { loading: 'lazy' };
|
|
29
|
+
return (React.createElement("picture", null,
|
|
30
|
+
webpSource,
|
|
31
|
+
regularSource,
|
|
32
|
+
data.src && (
|
|
33
|
+
// biome-ignore lint/a11y/useAltText: We do with alt the best we can
|
|
34
|
+
React.createElement("img", Object.assign({ src: data.src, alt: (_c = data.alt) !== null && _c !== void 0 ? _c : undefined, title: (_d = data.title) !== null && _d !== void 0 ? _d : undefined }, loadingBehaviourProps, { className: className, style: Object.assign(Object.assign(Object.assign({}, placeholderStyle), sizingStyle), style) })))));
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SRCImage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAiC/E,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,cAAc,GAAG,IAAI,EACrB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,gBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GACnC;;IAClB,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,kBAAkB,CAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC;IAExE,MAAM,gBAAgB,GACpB,cAAc,IAAI,IAAI,CAAC,MAAM;QAC3B,CAAC,CAAC;YACE,eAAe,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG;YACtC,cAAc,EAAE,OAAO;YACvB,gBAAgB,EAAE,WAAW;YAC7B,kBAAkB,EAAE,SAAS;YAC7B,KAAK,EAAE,aAAa;SACrB;QACH,CAAC,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO;YAC9B,CAAC,CAAC,EAAE,eAAe,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE;YACtE,CAAC,CAAC,SAAS,CAAC;IAElB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,MAAM,MAAM,GACV,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7E,MAAM,WAAW,GAAG;QAClB,WAAW,EAAE,GAAG,KAAK,MAAM,MAAM,EAAE;QACnC,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG,KAAK,IAAI;QACtB,MAAM,EAAE,MAAM;KACf,CAAC;IAEF,MAAM,qBAAqB,GAAG,QAAQ;QACpC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QAC7C,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IAExB,OAAO,CACL;QACG,UAAU;QACV,aAAa;QACb,IAAI,CAAC,GAAG,IAAI;QACX,oEAAoE;QACpE,2CACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,SAAS,EAC1B,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,IAC1B,qBAAqB,IACzB,SAAS,EAAE,SAAS,EACpB,KAAK,gDACA,gBAAgB,GAChB,WAAW,GACX,KAAK,KAEV,CACH,CACO,CACX,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React, { version } from 'react';
|
|
2
|
+
export function priorityProp(fetchPriority) {
|
|
3
|
+
const [majorStr, minorStr] = version.split('.');
|
|
4
|
+
const major = parseInt(majorStr, 10);
|
|
5
|
+
const minor = parseInt(minorStr, 10);
|
|
6
|
+
if (major > 18 || (major === 18 && minor >= 3)) {
|
|
7
|
+
// In React 18.3.0 or newer, we must use camelCase
|
|
8
|
+
// prop to avoid "Warning: Invalid DOM property".
|
|
9
|
+
// See https://github.com/facebook/react/pull/25927
|
|
10
|
+
return { fetchPriority };
|
|
11
|
+
}
|
|
12
|
+
// In React 18.2.0 or older, we must use lowercase prop
|
|
13
|
+
// to avoid "Warning: Invalid DOM property".
|
|
14
|
+
return { fetchpriority: fetchPriority };
|
|
15
|
+
}
|
|
16
|
+
const bogusBaseUrl = 'https://example.com/';
|
|
17
|
+
export const buildSrcSetFromSrc = (src, width, candidateMultipliers) => {
|
|
18
|
+
if (!(src && width)) {
|
|
19
|
+
return undefined;
|
|
20
|
+
}
|
|
21
|
+
return candidateMultipliers
|
|
22
|
+
.map((multiplier) => {
|
|
23
|
+
const url = new URL(src, bogusBaseUrl);
|
|
24
|
+
if (multiplier !== 1) {
|
|
25
|
+
url.searchParams.set('dpr', `${multiplier}`);
|
|
26
|
+
const maxH = url.searchParams.get('max-h');
|
|
27
|
+
const maxW = url.searchParams.get('max-w');
|
|
28
|
+
if (maxH) {
|
|
29
|
+
url.searchParams.set('max-h', `${Math.floor(parseInt(maxH) * multiplier)}`);
|
|
30
|
+
}
|
|
31
|
+
if (maxW) {
|
|
32
|
+
url.searchParams.set('max-w', `${Math.floor(parseInt(maxW) * multiplier)}`);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
const finalWidth = Math.floor(width * multiplier);
|
|
36
|
+
if (finalWidth < 50) {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
return `${url.toString().replace(bogusBaseUrl, '/')} ${finalWidth}w`;
|
|
40
|
+
})
|
|
41
|
+
.filter(Boolean)
|
|
42
|
+
.join(',');
|
|
43
|
+
};
|
|
44
|
+
export function buildWebpSource(data, sizes) {
|
|
45
|
+
var _a;
|
|
46
|
+
return (data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: (_a = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _a !== void 0 ? _a : undefined, type: "image/webp" })));
|
|
47
|
+
}
|
|
48
|
+
export function buildRegularSource(data, sizes, srcSetCandidates) {
|
|
49
|
+
var _a, _b;
|
|
50
|
+
return (React.createElement("source", { srcSet: (_a = data.srcSet) !== null && _a !== void 0 ? _a : buildSrcSetFromSrc(data.src, data.width, srcSetCandidates), sizes: (_b = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _b !== void 0 ? _b : undefined }));
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/SRCImage/utils.tsx"],"names":[],"mappings":"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"}
|
|
@@ -28,7 +28,7 @@ import MuxPlayer from '@mux/mux-player-react/lazy';
|
|
|
28
28
|
// `<MuxPlayer />` component.
|
|
29
29
|
import { useVideoPlayer } from '../useVideoPlayer/index.js';
|
|
30
30
|
export const VideoPlayer = forwardRef((props, ref) => {
|
|
31
|
-
const { data = {}, disableCookies = true, preload =
|
|
31
|
+
const { data = {}, disableCookies = true, preload = 'metadata', style: styleFromProps } = props, rest = __rest(props, ["data", "disableCookies", "preload", "style"]);
|
|
32
32
|
const { title, playbackId, style: styleFromHook, placeholder, } = useVideoPlayer({
|
|
33
33
|
data,
|
|
34
34
|
});
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export * from './Image/index.js';
|
|
2
|
+
export * from './SRCImage/index.js';
|
|
2
3
|
export * from './Seo/index.js';
|
|
3
|
-
export * from './VideoPlayer/index.js';
|
|
4
4
|
export * from './StructuredText/index.js';
|
|
5
|
+
export * from './VideoPlayer/index.js';
|
|
5
6
|
export * from './useQuerySubscription/index.js';
|
|
6
7
|
export * from './useSiteSearch/index.js';
|
|
7
8
|
export * from './useVideoPlayer/index.js';
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AAEvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useSiteSearch/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;AAEb,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAiGtD,MAAM,kBAAkB,GAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CACrD,8BAAM,GAAG,EAAE,GAAG,IAAG,IAAI,CAAQ,CAC9B,CAAC;AAEF,SAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,WAAW,EACX,OAAO,GAKR;IACC,OAAO,CACL,0CACG,kBAAkB,CAAC,QAAQ,EAAE,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACnE,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,CAAC,CAC9C,CACA,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,MAAmC;;IAEnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAI/B;QACD,KAAK,EAAE,CAAA,MAAA,MAAM,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE;QACvC,IAAI,EAAE,CAAA,MAAA,MAAM,CAAC,YAAY,0CAAE,IAAI,KAAI,CAAC;QACpC,MAAM,EAAE,MAAA,MAAM,CAAC,YAAY,0CAAE,MAAM;KACpC,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACzD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAErC,CAAC;IAEJ,MAAM,cAAc,GAAG,MAAM,CAAC,cAAc,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,GAAG,KAAK,CAAC;QAExB,MAAM,GAAG,GAAG,GAAS,EAAE;YACrB,IAAI,CAAC;gBACH,QAAQ,CAAC,SAAS,CAAC,CAAC;gBAEpB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;oBACjB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;oBACpD,OAAO;gBACT,CAAC;gBAED,WAAW,CAAC,SAAS,CAAC,CAAC;gBAEvB,MAAM,OAAO,GAAoC;oBAC/C,MAAM,EAAE;wBACN,KAAK,EAAE,KAAK,CAAC,KAAK;wBAClB,MAAM,EAAE,KAAK,CAAC,MAAM;wBACpB,gBAAgB,EAAE,MAAM,CAAC,cAAc;qBACxC;oBACD,IAAI,EAAE;wBACJ,KAAK,EAAE,cAAc;wBACrB,MAAM,EAAE,cAAc,GAAG,KAAK,CAAC,IAAI;qBACpC;iBACF,CAAC;gBAEF,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;oBACvB,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC;gBACzB,CAAC;gBAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBAEpE,IAAI,CAAC,WAAW,EAAE,CAAC;oBACjB,WAAW,CAAC,QAAQ,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,IAAI,WAAW,EAAE,CAAC;oBAChB,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,YAAY,KAAK,EAAE,CAAC;oBACvB,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACN,QAAQ,CAAC,gBAAgB,CAAC,CAAC;gBAC7B,CAAC;YACH,CAAC;QACH,CAAC,CAAA,CAAC;QAEF,GAAG,EAAE,CAAC;QAEN,OAAO,GAAG,EAAE;YACV,WAAW,GAAG,IAAI,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE;QACD,cAAc;QACd,KAAK;QACL,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,WAAW;QAClB,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ;KAC9B,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,QAAgB,EAAE,EAAE;QACnB,QAAQ,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,iCAAM,QAAQ,KAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,IAAG,CAAC,CAAC;IACtE,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,OAAe,EAAE,EAAE;QAClB,QAAQ,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,iCAAM,QAAQ,KAAE,IAAI,EAAE,OAAO,IAAG,CAAC,CAAC;IAC3D,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,SAA6B,EAAE,EAAE;QAChC,QAAQ,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,iCAAM,QAAQ,KAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,IAAG,CAAC,CAAC;IACxE,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,MAAM,CAAC,cAAc,IAAI,kBAAkB,CAAC;IAEhE,OAAO;QACL,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,QAAQ,EAAE,cAAc;YACxB,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,OAAO,EAAE,aAAa;YACtB,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,SAAS,EAAE,eAAe;SAC3B;QAED,KAAK;QACL,IAAI,EACF,KAAK,CAAC,KAAK,KAAK,EAAE;YAChB,CAAC,CAAC;gBACE,WAAW,EAAE,EAAE;gBACf,YAAY,EAAE,CAAC;gBACf,UAAU,EAAE,CAAC;aACd;YACH,CAAC,CAAC,QAAQ;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useSiteSearch/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;AAEb,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAiGtD,MAAM,kBAAkB,GAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CACrD,8BAAM,GAAG,EAAE,GAAG,IAAG,IAAI,CAAQ,CAC9B,CAAC;AAEF,SAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,WAAW,EACX,OAAO,GAKR;IACC,OAAO,CACL,0CACG,kBAAkB,CAAC,QAAQ,EAAE,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACnE,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,CAAC,CAC9C,CACA,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,MAAmC;;IAEnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAI/B;QACD,KAAK,EAAE,CAAA,MAAA,MAAM,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE;QACvC,IAAI,EAAE,CAAA,MAAA,MAAM,CAAC,YAAY,0CAAE,IAAI,KAAI,CAAC;QACpC,MAAM,EAAE,MAAA,MAAM,CAAC,YAAY,0CAAE,MAAM;KACpC,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACzD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAErC,CAAC;IAEJ,MAAM,cAAc,GAAG,MAAM,CAAC,cAAc,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,GAAG,KAAK,CAAC;QAExB,MAAM,GAAG,GAAG,GAAS,EAAE;YACrB,IAAI,CAAC;gBACH,QAAQ,CAAC,SAAS,CAAC,CAAC;gBAEpB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;oBACjB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;oBACpD,OAAO;gBACT,CAAC;gBAED,WAAW,CAAC,SAAS,CAAC,CAAC;gBAEvB,MAAM,OAAO,GAAoC;oBAC/C,MAAM,EAAE;wBACN,KAAK,EAAE,KAAK,CAAC,KAAK;wBAClB,MAAM,EAAE,KAAK,CAAC,MAAM;wBACpB,gBAAgB,EAAE,MAAM,CAAC,cAAc;qBACxC;oBACD,IAAI,EAAE;wBACJ,KAAK,EAAE,cAAc;wBACrB,MAAM,EAAE,cAAc,GAAG,KAAK,CAAC,IAAI;qBACpC;iBACF,CAAC;gBAEF,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;oBACvB,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC;gBACzB,CAAC;gBAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBAEpE,IAAI,CAAC,WAAW,EAAE,CAAC;oBACjB,WAAW,CAAC,QAAQ,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,IAAI,WAAW,EAAE,CAAC;oBAChB,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,YAAY,KAAK,EAAE,CAAC;oBACvB,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACN,QAAQ,CAAC,gBAAgB,CAAC,CAAC;gBAC7B,CAAC;YACH,CAAC;QACH,CAAC,CAAA,CAAC;QAEF,GAAG,EAAE,CAAC;QAEN,OAAO,GAAG,EAAE;YACV,WAAW,GAAG,IAAI,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE;QACD,cAAc;QACd,KAAK;QACL,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,WAAW;QAClB,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ;KAC9B,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,QAAgB,EAAE,EAAE;QACnB,QAAQ,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,iCAAM,QAAQ,KAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,IAAG,CAAC,CAAC;IACtE,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,OAAe,EAAE,EAAE;QAClB,QAAQ,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,iCAAM,QAAQ,KAAE,IAAI,EAAE,OAAO,IAAG,CAAC,CAAC;IAC3D,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,SAA6B,EAAE,EAAE;QAChC,QAAQ,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,iCAAM,QAAQ,KAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,IAAG,CAAC,CAAC;IACxE,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,MAAM,CAAC,cAAc,IAAI,kBAAkB,CAAC;IAEhE,OAAO;QACL,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,QAAQ,EAAE,cAAc;YACxB,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,OAAO,EAAE,aAAa;YACtB,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,SAAS,EAAE,eAAe;SAC3B;QAED,KAAK;QACL,IAAI,EACF,KAAK,CAAC,KAAK,KAAK,EAAE;YAChB,CAAC,CAAC;gBACE,WAAW,EAAE,EAAE;gBACf,YAAY,EAAE,CAAC;gBACf,UAAU,EAAE,CAAC;aACd;YACH,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC;oBACE,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACnD,EAAE,EAAE,eAAe,CAAC,EAAE;wBACtB,GAAG,EAAE,eAAe,CAAC,UAAU,CAAC,GAAG;wBACnC,KAAK,EAAE,eAAe,CAAC,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAClD,oBAAC,gBAAgB,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAC,OAAO,IACxD,eAAe,CAAC,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAC7B,CACpB,CAAC,CAAC,CAAC,CACF,eAAe,CAAC,UAAU,CAAC,KAAK,CACjC;wBACD,WAAW,EAAE,eAAe,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CACvD,oBAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,OAAO,EAAC,aAAa,IAEpB,eAAe,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAC5B,CACpB,CAAC,CAAC,CAAC,CACF,eAAe,CAAC,UAAU,CAAC,YAAY,CACxC;wBACD,GAAG,EAAE,eAAe;qBACrB,CAAC,CAAC;oBACH,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW;oBACvC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;iBAClE;gBACH,CAAC,CAAC,SAAS;KAClB,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useVideoPlayer/index.ts"],"names":[],"mappings":"AAOA,MAAM,aAAa,GAAG,CAAC,KAAgC,EAAE,EAAE;IACzD,OAAO,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CACzB,aAA+B,EAC/B,UAA4B,EAC5B,EAAE;IACF,IAAI,CAAC,CAAC,aAAa,IAAI,UAAU,CAAC;QAAE,OAAO,SAAS,CAAC;IAErD,OAAO,EAAE,UAAU,EAAE,GAAG,aAAa,IAAI,UAAU,EAAE,EAAE,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useVideoPlayer/index.ts"],"names":[],"mappings":"AAOA,MAAM,aAAa,GAAG,CAAC,KAAgC,EAAE,EAAE;IACzD,OAAO,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CACzB,aAA+B,EAC/B,UAA4B,EAC5B,EAAE;IACF,IAAI,CAAC,CAAC,aAAa,IAAI,UAAU,CAAC;QAAE,OAAO,SAAS,CAAC;IAErD,OAAO,EAAE,UAAU,EAAE,GAAG,aAAa,IAAI,UAAU,EAAE,EAAE,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,KAAuB,EAAE,MAAwB,EAAE,EAAE;IAC1E,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC;QAAE,OAAO,SAAS,CAAC;IAEzC,OAAO;QACL,KAAK,EAAE;YACL,WAAW,EAAE,GAAG,KAAK,MAAM,MAAM,EAAE;SACpC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,WAA6B,EAAE,EAAE;IAC5D,OAAO,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AAChE,CAAC,CAAC;AAkBF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,IAAI,GACe,EAAqB,EAAE;IAC1C,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,GACpE,IAAI,IAAI,EAAE,CAAC;IAEb,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,EAAE,CAAC;IAElC,mEACK,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,GAC5B,CAAC,kBAAkB,CAAC,aAAa,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC,GACrD,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,GACpC,CAAC,mBAAmB,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,EAC3C;AACJ,CAAC,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type CSSProperties } from 'react';
|
|
2
3
|
type Maybe<T> = T | null;
|
|
3
4
|
export type ResponsiveImageType = {
|
|
4
5
|
/** A base64-encoded thumbnail to offer during image loading */
|
|
@@ -33,7 +34,7 @@ export type ImagePropTypes = {
|
|
|
33
34
|
pictureClassName?: string;
|
|
34
35
|
/** Additional CSS class for the placeholder image */
|
|
35
36
|
placeholderClassName?: string;
|
|
36
|
-
/** Duration (in ms) of the fade-in transition effect
|
|
37
|
+
/** Duration (in ms) of the fade-in transition effect upon image loading */
|
|
37
38
|
fadeInDuration?: number;
|
|
38
39
|
/** @deprecated Use the intersectionThreshold prop */
|
|
39
40
|
intersectionTreshold?: number;
|
|
@@ -41,8 +42,6 @@ export type ImagePropTypes = {
|
|
|
41
42
|
intersectionThreshold?: number;
|
|
42
43
|
/** 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 */
|
|
43
44
|
intersectionMargin?: string;
|
|
44
|
-
/** Whether enable lazy loading or not */
|
|
45
|
-
lazyLoad?: boolean;
|
|
46
45
|
/** Additional CSS rules to add to the root node */
|
|
47
46
|
style?: React.CSSProperties;
|
|
48
47
|
/** Additional CSS rules to add to the image inside the `<picture />` tag */
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const isSsr: boolean;
|
|
3
|
+
export declare const isIntersectionObserverAvailable: boolean;
|
|
4
|
+
export declare const universalBtoa: (str: string) => string;
|
|
5
|
+
export declare function useImageLoad(ref: React.RefObject<HTMLImageElement>, callback: (() => void) | undefined): readonly [boolean, () => void];
|
|
6
|
+
export declare function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T>;
|
|
7
|
+
export declare const absolutePositioning: React.CSSProperties;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ResponsiveImageType } from '../Image';
|
|
3
|
+
export type SRCImagePropTypes = {
|
|
4
|
+
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
|
|
5
|
+
data: ResponsiveImageType;
|
|
6
|
+
/** Additional CSS className for root node */
|
|
7
|
+
className?: string;
|
|
8
|
+
/** Additional CSS rules to add to the root node */
|
|
9
|
+
style?: React.CSSProperties;
|
|
10
|
+
/**
|
|
11
|
+
* When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
|
|
12
|
+
* You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
|
|
13
|
+
* Should only be used when the image is visible above the fold.
|
|
14
|
+
**/
|
|
15
|
+
priority?: boolean;
|
|
16
|
+
/** Whether the component should use a blurred image placeholder */
|
|
17
|
+
usePlaceholder?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* The HTML5 `sizes` attribute for the image
|
|
20
|
+
*
|
|
21
|
+
* Learn more about srcset and sizes:
|
|
22
|
+
* -> https://web.dev/learn/design/responsive-images/#sizes
|
|
23
|
+
* -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
|
|
24
|
+
**/
|
|
25
|
+
sizes?: HTMLImageElement['sizes'];
|
|
26
|
+
/**
|
|
27
|
+
* If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
|
|
28
|
+
*
|
|
29
|
+
* Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
|
|
30
|
+
**/
|
|
31
|
+
srcSetCandidates?: number[];
|
|
32
|
+
};
|
|
33
|
+
export declare function SRCImage({ className, style, data, usePlaceholder, priority, sizes, srcSetCandidates, }: SRCImagePropTypes): JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ResponsiveImageType } from '../Image';
|
|
3
|
+
export declare function priorityProp(fetchPriority?: string): Record<string, string | undefined>;
|
|
4
|
+
export declare const buildSrcSetFromSrc: (src: string | null | undefined, width: number | undefined, candidateMultipliers: number[]) => string | undefined;
|
|
5
|
+
export declare function buildWebpSource(data: ResponsiveImageType, sizes: HTMLImageElement['sizes'] | undefined): "" | JSX.Element | null | undefined;
|
|
6
|
+
export declare function buildRegularSource(data: ResponsiveImageType, sizes: HTMLImageElement['sizes'] | undefined, srcSetCandidates: number[]): JSX.Element;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export * from './Image/index.js';
|
|
2
|
+
export * from './SRCImage/index.js';
|
|
2
3
|
export * from './Seo/index.js';
|
|
3
|
-
export * from './VideoPlayer/index.js';
|
|
4
4
|
export * from './StructuredText/index.js';
|
|
5
|
+
export * from './VideoPlayer/index.js';
|
|
5
6
|
export * from './useQuerySubscription/index.js';
|
|
6
7
|
export * from './useSiteSearch/index.js';
|
|
7
8
|
export * from './useVideoPlayer/index.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-datocms",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"engines": {
|
|
5
5
|
"node": ">=8.0.0"
|
|
6
6
|
},
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
],
|
|
95
95
|
"homepage": "https://github.com/datocms/react-datocms",
|
|
96
96
|
"devDependencies": {
|
|
97
|
-
"@biomejs/biome": "1.
|
|
97
|
+
"@biomejs/biome": "^1.6.3",
|
|
98
98
|
"@mux/mux-player-react": "*",
|
|
99
99
|
"@types/enzyme": "^3.10.8",
|
|
100
100
|
"@types/enzyme-to-json": "^1.5.4",
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
},
|
|
121
121
|
"scripts": {
|
|
122
122
|
"build": "rimraf dist && npm run tsc:types && npm run tsc:cjs && npm run tsc:esm",
|
|
123
|
-
"format": "biome format --write src",
|
|
123
|
+
"format": "npm run toc && biome format --write src examples/src",
|
|
124
124
|
"watch": "rimraf dist && tsc --project ./tsconfig.commonjs.json --watch",
|
|
125
125
|
"prepare": "npm run test && npm run build",
|
|
126
126
|
"test": "jest --coverage",
|
|
@@ -138,7 +138,6 @@
|
|
|
138
138
|
"datocms-structured-text-utils": "^2.0.1",
|
|
139
139
|
"react-intersection-observer": "^9.4.3",
|
|
140
140
|
"react-string-replace": "^1.1.0",
|
|
141
|
-
"universal-base64": "^2.1.0",
|
|
142
141
|
"use-deep-compare-effect": "^1.6.1",
|
|
143
142
|
"@mux/mux-player-react": "*"
|
|
144
143
|
}
|