Skip to content

Commit d5a75b9

Browse files
stefanovernastefanoverna
committed
Add referrerPolicy prop to Image and SRCImage. Defaults to no-referrer-when-downgrade to give more useful stats in DatoCMS Project Usages.
1 parent 52fb06e commit d5a75b9

9 files changed

Lines changed: 190 additions & 127 deletions

File tree

‎biome.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,19 @@
66
"linter": {
77
"enabled": true,
88
"rules": {
9-
"recommended": true
9+
"recommended": true,
10+
"suspicious": {
11+
"noExplicitAny": "warn"
12+
},
13+
"correctness": {
14+
"useExhaustiveDependencies": "warn"
15+
},
16+
"performance": {
17+
"noAccumulatingSpread": "off"
18+
},
19+
"complexity": {
20+
"noForEach": "off"
21+
}
1022
}
1123
},
1224
"formatter": {

‎docs/image.md‎

Lines changed: 33 additions & 31 deletions
Large diffs are not rendered by default.

‎examples/src/QuerySubscriptionExample/index.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import {
33
StructuredText,
44
renderMetaTags,
55
useQuerySubscription,
6-
} from "react-datocms";
7-
import { Helmet } from "react-helmet";
8-
import "./style.css";
6+
} from 'react-datocms';
7+
import { Helmet } from 'react-helmet';
8+
import './style.css';
99

1010
const RESPONSIVE_IMAGE_FRAGMENT = `
1111
aspectRatio
@@ -66,22 +66,22 @@ export default function QuerySubscriptionExample() {
6666
const { status, error, data } = useQuerySubscription({
6767
query,
6868
variables: { first: 4 },
69-
token: "faeb9172e232a75339242faafb9e56de8c8f13b735f7090964",
69+
token: 'faeb9172e232a75339242faafb9e56de8c8f13b735f7090964',
7070
});
7171

7272
const metaTags = data ? [...data.page.seo, ...data.site.favicon] : [];
7373

7474
const statusMessage = {
75-
connecting: "Connecting to DatoCMS...",
76-
connected: "Connected to DatoCMS, receiving live updates!",
77-
closed: "Connection closed",
75+
connecting: 'Connecting to DatoCMS...',
76+
connected: 'Connected to DatoCMS, receiving live updates!',
77+
closed: 'Connection closed',
7878
};
7979

8080
return (
8181
<div className="example" data-title="Full-blown example">
8282
<Helmet>{renderMetaTags(metaTags)}</Helmet>
8383
<div className="status">
84-
{status === "connected" && <div className="connected-badge" />}
84+
{status === 'connected' && <div className="connected-badge" />}
8585
{statusMessage[status]}
8686
</div>
8787
{error && (

‎src/Image/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ exports[`Image explicit sizes renders correctly 1`] = `
6161
<img
6262
alt=""
6363
onLoad={[Function]}
64+
referrerPolicy="no-referrer-when-downgrade"
6465
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
6566
style={
6667
{
@@ -205,6 +206,7 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
205206
<img
206207
alt="DatoCMS swag"
207208
onLoad={[Function]}
209+
referrerPolicy="no-referrer-when-downgrade"
208210
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
209211
style={
210212
{
@@ -285,6 +287,7 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
285287
<img
286288
alt=""
287289
onLoad={[Function]}
290+
referrerPolicy="no-referrer-when-downgrade"
288291
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
289292
style={
290293
{
@@ -364,6 +367,7 @@ exports[`Image layout=fill visible renders the image (relative URL) 1`] = `
364367
<img
365368
alt=""
366369
onLoad={[Function]}
370+
referrerPolicy="no-referrer-when-downgrade"
367371
src="/205/image.png?ar=16%3A9&fit=crop&w=750"
368372
style={
369373
{
@@ -449,6 +453,7 @@ exports[`Image layout=fill visible renders the image 1`] = `
449453
<img
450454
alt="DatoCMS swag"
451455
onLoad={[Function]}
456+
referrerPolicy="no-referrer-when-downgrade"
452457
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
453458
style={
454459
{
@@ -606,6 +611,7 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
606611
<img
607612
alt="DatoCMS swag"
608613
onLoad={[Function]}
614+
referrerPolicy="no-referrer-when-downgrade"
609615
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
610616
style={
611617
{
@@ -692,6 +698,7 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
692698
<img
693699
alt=""
694700
onLoad={[Function]}
701+
referrerPolicy="no-referrer-when-downgrade"
695702
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
696703
style={
697704
{
@@ -777,6 +784,7 @@ exports[`Image layout=fixed visible renders the image (relative URL) 1`] = `
777784
<img
778785
alt=""
779786
onLoad={[Function]}
787+
referrerPolicy="no-referrer-when-downgrade"
780788
src="/205/image.png?ar=16%3A9&fit=crop&w=750"
781789
style={
782790
{
@@ -868,6 +876,7 @@ exports[`Image layout=fixed visible renders the image 1`] = `
868876
<img
869877
alt="DatoCMS swag"
870878
onLoad={[Function]}
879+
referrerPolicy="no-referrer-when-downgrade"
871880
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
872881
style={
873882
{
@@ -1027,6 +1036,7 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
10271036
<img
10281037
alt="DatoCMS swag"
10291038
onLoad={[Function]}
1039+
referrerPolicy="no-referrer-when-downgrade"
10301040
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
10311041
style={
10321042
{
@@ -1114,6 +1124,7 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
11141124
<img
11151125
alt=""
11161126
onLoad={[Function]}
1127+
referrerPolicy="no-referrer-when-downgrade"
11171128
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
11181129
style={
11191130
{
@@ -1200,6 +1211,7 @@ exports[`Image layout=intrinsic visible renders the image (relative URL) 1`] = `
12001211
<img
12011212
alt=""
12021213
onLoad={[Function]}
1214+
referrerPolicy="no-referrer-when-downgrade"
12031215
src="/205/image.png?ar=16%3A9&fit=crop&w=750"
12041216
style={
12051217
{
@@ -1292,6 +1304,7 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
12921304
<img
12931305
alt="DatoCMS swag"
12941306
onLoad={[Function]}
1307+
referrerPolicy="no-referrer-when-downgrade"
12951308
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
12961309
style={
12971310
{
@@ -1449,6 +1462,7 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
14491462
<img
14501463
alt="DatoCMS swag"
14511464
onLoad={[Function]}
1465+
referrerPolicy="no-referrer-when-downgrade"
14521466
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
14531467
style={
14541468
{
@@ -1535,6 +1549,7 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
15351549
<img
15361550
alt=""
15371551
onLoad={[Function]}
1552+
referrerPolicy="no-referrer-when-downgrade"
15381553
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
15391554
style={
15401555
{
@@ -1620,6 +1635,7 @@ exports[`Image layout=responsive visible renders the image (relative URL) 1`] =
16201635
<img
16211636
alt=""
16221637
onLoad={[Function]}
1638+
referrerPolicy="no-referrer-when-downgrade"
16231639
src="/205/image.png?ar=16%3A9&fit=crop&w=750"
16241640
style={
16251641
{
@@ -1711,6 +1727,7 @@ exports[`Image layout=responsive visible renders the image 1`] = `
17111727
<img
17121728
alt="DatoCMS swag"
17131729
onLoad={[Function]}
1730+
referrerPolicy="no-referrer-when-downgrade"
17141731
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
17151732
style={
17161733
{
@@ -1834,6 +1851,7 @@ exports[`Image passing className and/or style renders correctly 1`] = `
18341851
alt=""
18351852
className="img-class-name"
18361853
onLoad={[Function]}
1854+
referrerPolicy="no-referrer-when-downgrade"
18371855
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
18381856
style={
18391857
{
@@ -1928,6 +1946,7 @@ exports[`Image priority=true renders correctly 1`] = `
19281946
alt=""
19291947
fetchpriority="high"
19301948
onLoad={[Function]}
1949+
referrerPolicy="no-referrer-when-downgrade"
19311950
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
19321951
style={
19331952
{
@@ -1993,6 +2012,7 @@ exports[`Image usePlaceholder=false renders correctly 1`] = `
19932012
<img
19942013
alt=""
19952014
onLoad={[Function]}
2015+
referrerPolicy="no-referrer-when-downgrade"
19962016
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
19972017
style={
19982018
{

‎src/Image/index.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
// biome-ignore lint/style/useImportType: wrong warning
4-
import React from 'react';
4+
import React, { HTMLAttributeReferrerPolicy } from 'react';
55
import { type CSSProperties, forwardRef, useRef } from 'react';
66
import {
77
buildRegularSource,
@@ -111,6 +111,13 @@ export type ImagePropTypes = {
111111
* Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
112112
**/
113113
srcSetCandidates?: number[];
114+
/**
115+
* Defines which referrer is sent when fetching the image
116+
* Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
117+
*
118+
* Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
119+
**/
120+
referrerPolicy?: HTMLAttributeReferrerPolicy;
114121
};
115122

116123
type State = {
@@ -175,6 +182,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
175182
srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
176183
placeholderClassName,
177184
placeholderStyle,
185+
referrerPolicy = 'no-referrer-when-downgrade',
178186
},
179187
ref,
180188
) => {
@@ -300,6 +308,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
300308
objectPosition,
301309
...imgStyle,
302310
}}
311+
referrerPolicy={referrerPolicy}
303312
/>
304313
)}
305314
</picture>
@@ -323,6 +332,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
323332
}}
324333
loading={priority ? undefined : 'lazy'}
325334
{...priorityProp(priority ? 'high' : undefined)}
335+
referrerPolicy={referrerPolicy}
326336
/>
327337
)}
328338
</picture>

‎src/SRCImage/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ exports[`Image explicit sizes renders correctly 1`] = `
2020
<img
2121
alt=""
2222
loading="lazy"
23+
referrerPolicy="no-referrer-when-downgrade"
2324
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
2425
style={
2526
{
@@ -63,6 +64,7 @@ exports[`Image full data renders correctly 1`] = `
6364
<img
6465
alt="DatoCMS swag"
6566
loading="lazy"
67+
referrerPolicy="no-referrer-when-downgrade"
6668
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
6769
style={
6870
{
@@ -101,6 +103,7 @@ exports[`Image minimal data renders correctly 1`] = `
101103
<img
102104
alt=""
103105
loading="lazy"
106+
referrerPolicy="no-referrer-when-downgrade"
104107
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
105108
style={
106109
{
@@ -138,6 +141,7 @@ exports[`Image minimalDataWithRelativeUrl renders correctly 1`] = `
138141
<img
139142
alt=""
140143
loading="lazy"
144+
referrerPolicy="no-referrer-when-downgrade"
141145
src="/205/image.png?ar=16%3A9&fit=crop&w=750"
142146
style={
143147
{
@@ -195,6 +199,7 @@ exports[`Image passing className and/or style renders correctly 1`] = `
195199
alt=""
196200
className="class-name"
197201
loading="lazy"
202+
referrerPolicy="no-referrer-when-downgrade"
198203
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
199204
style={
200205
{
@@ -234,6 +239,7 @@ exports[`Image priority=true renders correctly 1`] = `
234239
<img
235240
alt=""
236241
fetchpriority="high"
242+
referrerPolicy="no-referrer-when-downgrade"
237243
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
238244
style={
239245
{
@@ -272,6 +278,7 @@ exports[`Image usePlaceholder=false renders correctly 1`] = `
272278
<img
273279
alt=""
274280
loading="lazy"
281+
referrerPolicy="no-referrer-when-downgrade"
275282
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
276283
style={
277284
{

‎src/SRCImage/index.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// biome-ignore lint/style/useImportType: wrong warning
2-
import React from 'react';
2+
import React, { HTMLAttributeReferrerPolicy } from 'react';
33
import type { ResponsiveImageType } from '../Image';
44
import { buildRegularSource, buildWebpSource, priorityProp } from './utils.js';
55

@@ -36,6 +36,13 @@ export type SRCImagePropTypes = {
3636
* Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
3737
**/
3838
srcSetCandidates?: number[];
39+
/**
40+
* Defines which referrer is sent when fetching the image
41+
* Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
42+
*
43+
* Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
44+
**/
45+
referrerPolicy?: HTMLAttributeReferrerPolicy;
3946
};
4047

4148
export function SRCImage({
@@ -48,6 +55,7 @@ export function SRCImage({
4855
priority = false,
4956
sizes,
5057
srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
58+
referrerPolicy = 'no-referrer-when-downgrade',
5159
}: SRCImagePropTypes) {
5260
const webpSource = buildWebpSource(data, sizes);
5361
const regularSource = buildRegularSource(data, sizes, srcSetCandidates);
@@ -98,6 +106,7 @@ export function SRCImage({
98106
...sizingStyle,
99107
...imgStyle,
100108
}}
109+
referrerPolicy={referrerPolicy}
101110
/>
102111
)}
103112
</picture>

0 commit comments

Comments
 (0)