@datocms/svelte 1.2.1 → 1.2.2

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 (70) hide show
  1. package/README.md +33 -6
  2. package/package.json +169 -24
  3. package/components/Head/Head.svelte +0 -14
  4. package/components/Head/Head.svelte.d.ts +0 -61
  5. package/components/Head/README.md +0 -68
  6. package/components/Head/__tests__/Head.test.d.ts +0 -1
  7. package/components/Head/__tests__/Head.test.js +0 -11
  8. package/components/Head/__tests__/__fixtures__/head.d.ts +0 -2
  9. package/components/Head/__tests__/__fixtures__/head.js +0 -280
  10. package/components/Head/__tests__/__snapshots__/Head.test.ts.snap +0 -221
  11. package/components/Image/Image.svelte +0 -172
  12. package/components/Image/Image.svelte.d.ts +0 -83
  13. package/components/Image/Placeholder.svelte +0 -30
  14. package/components/Image/Placeholder.svelte.d.ts +0 -22
  15. package/components/Image/README.md +0 -167
  16. package/components/Image/Sizer.svelte +0 -17
  17. package/components/Image/Sizer.svelte.d.ts +0 -19
  18. package/components/Image/Source.svelte +0 -6
  19. package/components/Image/Source.svelte.d.ts +0 -18
  20. package/components/Image/__tests__/Image.svelte.test.d.ts +0 -1
  21. package/components/Image/__tests__/Image.svelte.test.js +0 -44
  22. package/components/Image/__tests__/__fixtures__/image.d.ts +0 -40
  23. package/components/Image/__tests__/__fixtures__/image.js +0 -40
  24. package/components/Image/__tests__/__snapshots__/Image.svelte.test.ts.snap +0 -903
  25. package/components/StructuredText/Node.svelte +0 -112
  26. package/components/StructuredText/Node.svelte.d.ts +0 -22
  27. package/components/StructuredText/README.md +0 -201
  28. package/components/StructuredText/StructuredText.svelte +0 -15
  29. package/components/StructuredText/StructuredText.svelte.d.ts +0 -19
  30. package/components/StructuredText/__tests__/StructuredText.svelte.test.d.ts +0 -1
  31. package/components/StructuredText/__tests__/StructuredText.svelte.test.js +0 -171
  32. package/components/StructuredText/__tests__/__fixtures__/Block.svelte +0 -11
  33. package/components/StructuredText/__tests__/__fixtures__/Block.svelte.d.ts +0 -19
  34. package/components/StructuredText/__tests__/__fixtures__/CustomSpan.svelte +0 -49
  35. package/components/StructuredText/__tests__/__fixtures__/CustomSpan.svelte.d.ts +0 -19
  36. package/components/StructuredText/__tests__/__fixtures__/IncreasedLevelHeading.svelte +0 -8
  37. package/components/StructuredText/__tests__/__fixtures__/IncreasedLevelHeading.svelte.d.ts +0 -19
  38. package/components/StructuredText/__tests__/__fixtures__/InlineItem.svelte +0 -8
  39. package/components/StructuredText/__tests__/__fixtures__/InlineItem.svelte.d.ts +0 -19
  40. package/components/StructuredText/__tests__/__fixtures__/ItemLink.svelte +0 -15
  41. package/components/StructuredText/__tests__/__fixtures__/ItemLink.svelte.d.ts +0 -21
  42. package/components/StructuredText/__tests__/__fixtures__/structuredText.d.ts +0 -7
  43. package/components/StructuredText/__tests__/__fixtures__/structuredText.js +0 -575
  44. package/components/StructuredText/__tests__/__fixtures__/types.d.ts +0 -27
  45. package/components/StructuredText/__tests__/__fixtures__/types.js +0 -1
  46. package/components/StructuredText/__tests__/__snapshots__/StructuredText.svelte.test.ts.snap +0 -531
  47. package/components/StructuredText/nodes/Blockquote.svelte +0 -5
  48. package/components/StructuredText/nodes/Blockquote.svelte.d.ts +0 -19
  49. package/components/StructuredText/nodes/Code.svelte +0 -6
  50. package/components/StructuredText/nodes/Code.svelte.d.ts +0 -17
  51. package/components/StructuredText/nodes/Heading.svelte +0 -8
  52. package/components/StructuredText/nodes/Heading.svelte.d.ts +0 -19
  53. package/components/StructuredText/nodes/Link.svelte +0 -20
  54. package/components/StructuredText/nodes/Link.svelte.d.ts +0 -19
  55. package/components/StructuredText/nodes/List.svelte +0 -10
  56. package/components/StructuredText/nodes/List.svelte.d.ts +0 -19
  57. package/components/StructuredText/nodes/ListItem.svelte +0 -5
  58. package/components/StructuredText/nodes/ListItem.svelte.d.ts +0 -19
  59. package/components/StructuredText/nodes/Paragraph.svelte +0 -5
  60. package/components/StructuredText/nodes/Paragraph.svelte.d.ts +0 -19
  61. package/components/StructuredText/nodes/Root.svelte +0 -5
  62. package/components/StructuredText/nodes/Root.svelte.d.ts +0 -19
  63. package/components/StructuredText/nodes/Span.svelte +0 -49
  64. package/components/StructuredText/nodes/Span.svelte.d.ts +0 -19
  65. package/components/StructuredText/nodes/ThematicBreak.svelte +0 -5
  66. package/components/StructuredText/nodes/ThematicBreak.svelte.d.ts +0 -17
  67. package/components/StructuredText/utils/Lines.svelte +0 -11
  68. package/components/StructuredText/utils/Lines.svelte.d.ts +0 -16
  69. package/index.d.ts +0 -9
  70. package/index.js +0 -3
@@ -1,280 +0,0 @@
1
- export const metaTags = [
2
- {
3
- content: 'Remix CMS - The easiest way to manage content with Remix',
4
- attributes: null,
5
- tag: 'title'
6
- },
7
- {
8
- content: null,
9
- attributes: {
10
- property: 'og:title',
11
- content: 'Remix CMS - The easiest way to manage content with Remix'
12
- },
13
- tag: 'meta'
14
- },
15
- {
16
- content: null,
17
- attributes: {
18
- name: 'twitter:title',
19
- content: 'Remix CMS - The easiest way to manage content with Remix'
20
- },
21
- tag: 'meta'
22
- },
23
- {
24
- content: null,
25
- attributes: {
26
- name: 'description',
27
- content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
28
- },
29
- tag: 'meta'
30
- },
31
- {
32
- content: null,
33
- attributes: {
34
- property: 'og:description',
35
- content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
36
- },
37
- tag: 'meta'
38
- },
39
- {
40
- content: null,
41
- attributes: {
42
- name: 'twitter:description',
43
- content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
44
- },
45
- tag: 'meta'
46
- },
47
- {
48
- content: null,
49
- attributes: {
50
- property: 'og:image',
51
- content: 'https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000'
52
- },
53
- tag: 'meta'
54
- },
55
- {
56
- content: null,
57
- attributes: {
58
- property: 'og:image:width',
59
- content: '746'
60
- },
61
- tag: 'meta'
62
- },
63
- {
64
- content: null,
65
- attributes: {
66
- property: 'og:image:height',
67
- content: '186'
68
- },
69
- tag: 'meta'
70
- },
71
- {
72
- content: null,
73
- attributes: {
74
- name: 'twitter:image',
75
- content: 'https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000'
76
- },
77
- tag: 'meta'
78
- },
79
- {
80
- content: null,
81
- attributes: {
82
- property: 'og:locale',
83
- content: 'en'
84
- },
85
- tag: 'meta'
86
- },
87
- {
88
- content: null,
89
- attributes: {
90
- property: 'og:type',
91
- content: 'article'
92
- },
93
- tag: 'meta'
94
- },
95
- {
96
- content: null,
97
- attributes: {
98
- property: 'og:site_name',
99
- content: 'DatoCMS'
100
- },
101
- tag: 'meta'
102
- },
103
- {
104
- content: null,
105
- attributes: {
106
- property: 'article:modified_time',
107
- content: '2022-01-18T14:02:47Z'
108
- },
109
- tag: 'meta'
110
- },
111
- {
112
- content: null,
113
- attributes: {
114
- name: 'twitter:card',
115
- content: 'summary_large_image'
116
- },
117
- tag: 'meta'
118
- },
119
- {
120
- content: null,
121
- attributes: {
122
- name: 'twitter:site',
123
- content: '@datocms'
124
- },
125
- tag: 'meta'
126
- },
127
- {
128
- attributes: {
129
- sizes: '16x16',
130
- type: 'image/png',
131
- rel: 'icon',
132
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16'
133
- },
134
- content: null,
135
- tag: 'link'
136
- },
137
- {
138
- attributes: {
139
- sizes: '32x32',
140
- type: 'image/png',
141
- rel: 'icon',
142
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32'
143
- },
144
- content: null,
145
- tag: 'link'
146
- },
147
- {
148
- attributes: {
149
- sizes: '96x96',
150
- type: 'image/png',
151
- rel: 'icon',
152
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96'
153
- },
154
- content: null,
155
- tag: 'link'
156
- },
157
- {
158
- attributes: {
159
- sizes: '192x192',
160
- type: 'image/png',
161
- rel: 'icon',
162
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192'
163
- },
164
- content: null,
165
- tag: 'link'
166
- },
167
- {
168
- attributes: {
169
- sizes: '57x57',
170
- rel: 'apple-touch-icon',
171
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57'
172
- },
173
- content: null,
174
- tag: 'link'
175
- },
176
- {
177
- attributes: {
178
- sizes: '60x60',
179
- rel: 'apple-touch-icon',
180
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60'
181
- },
182
- content: null,
183
- tag: 'link'
184
- },
185
- {
186
- attributes: {
187
- sizes: '72x72',
188
- rel: 'apple-touch-icon',
189
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72'
190
- },
191
- content: null,
192
- tag: 'link'
193
- },
194
- {
195
- attributes: {
196
- sizes: '76x76',
197
- rel: 'apple-touch-icon',
198
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76'
199
- },
200
- content: null,
201
- tag: 'link'
202
- },
203
- {
204
- attributes: {
205
- sizes: '114x114',
206
- rel: 'apple-touch-icon',
207
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114'
208
- },
209
- content: null,
210
- tag: 'link'
211
- },
212
- {
213
- attributes: {
214
- sizes: '120x120',
215
- rel: 'apple-touch-icon',
216
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120'
217
- },
218
- content: null,
219
- tag: 'link'
220
- },
221
- {
222
- attributes: {
223
- sizes: '144x144',
224
- rel: 'apple-touch-icon',
225
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144'
226
- },
227
- content: null,
228
- tag: 'link'
229
- },
230
- {
231
- attributes: {
232
- sizes: '152x152',
233
- rel: 'apple-touch-icon',
234
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152'
235
- },
236
- content: null,
237
- tag: 'link'
238
- },
239
- {
240
- attributes: {
241
- sizes: '180x180',
242
- rel: 'apple-touch-icon',
243
- href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180'
244
- },
245
- content: null,
246
- tag: 'link'
247
- },
248
- {
249
- attributes: {
250
- name: 'msapplication-square70x70logo',
251
- content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70'
252
- },
253
- content: null,
254
- tag: 'meta'
255
- },
256
- {
257
- attributes: {
258
- name: 'msapplication-square150x150logo',
259
- content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150'
260
- },
261
- content: null,
262
- tag: 'meta'
263
- },
264
- {
265
- attributes: {
266
- name: 'msapplication-square310x310logo',
267
- content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310'
268
- },
269
- content: null,
270
- tag: 'meta'
271
- },
272
- {
273
- attributes: {
274
- name: 'msapplication-square310x150logo',
275
- content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310'
276
- },
277
- content: null,
278
- tag: 'meta'
279
- }
280
- ];
@@ -1,221 +0,0 @@
1
- // Vitest Snapshot v1
2
-
3
- exports[`Head > renders meta tags 1`] = `
4
- <head>
5
- <title>
6
- Remix CMS - The easiest way to manage content with Remix
7
- </title>
8
-
9
-
10
- <meta
11
- content="Remix CMS - The easiest way to manage content with Remix"
12
- property="og:title"
13
- />
14
-
15
-
16
- <meta
17
- content="Remix CMS - The easiest way to manage content with Remix"
18
- name="twitter:title"
19
- />
20
-
21
-
22
- <meta
23
- content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
24
- name="description"
25
- />
26
-
27
-
28
- <meta
29
- content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
30
- property="og:description"
31
- />
32
-
33
-
34
- <meta
35
- content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
36
- name="twitter:description"
37
- />
38
-
39
-
40
- <meta
41
- content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
42
- property="og:image"
43
- />
44
-
45
-
46
- <meta
47
- content="746"
48
- property="og:image:width"
49
- />
50
-
51
-
52
- <meta
53
- content="186"
54
- property="og:image:height"
55
- />
56
-
57
-
58
- <meta
59
- content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
60
- name="twitter:image"
61
- />
62
-
63
-
64
- <meta
65
- content="en"
66
- property="og:locale"
67
- />
68
-
69
-
70
- <meta
71
- content="article"
72
- property="og:type"
73
- />
74
-
75
-
76
- <meta
77
- content="DatoCMS"
78
- property="og:site_name"
79
- />
80
-
81
-
82
- <meta
83
- content="2022-01-18T14:02:47Z"
84
- property="article:modified_time"
85
- />
86
-
87
-
88
- <meta
89
- content="summary_large_image"
90
- name="twitter:card"
91
- />
92
-
93
-
94
- <meta
95
- content="@datocms"
96
- name="twitter:site"
97
- />
98
-
99
-
100
- <link
101
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16"
102
- rel="icon"
103
- sizes="16x16"
104
- type="image/png"
105
- />
106
-
107
-
108
- <link
109
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32"
110
- rel="icon"
111
- sizes="32x32"
112
- type="image/png"
113
- />
114
-
115
-
116
- <link
117
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96"
118
- rel="icon"
119
- sizes="96x96"
120
- type="image/png"
121
- />
122
-
123
-
124
- <link
125
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192"
126
- rel="icon"
127
- sizes="192x192"
128
- type="image/png"
129
- />
130
-
131
-
132
- <link
133
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57"
134
- rel="apple-touch-icon"
135
- sizes="57x57"
136
- />
137
-
138
-
139
- <link
140
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60"
141
- rel="apple-touch-icon"
142
- sizes="60x60"
143
- />
144
-
145
-
146
- <link
147
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72"
148
- rel="apple-touch-icon"
149
- sizes="72x72"
150
- />
151
-
152
-
153
- <link
154
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76"
155
- rel="apple-touch-icon"
156
- sizes="76x76"
157
- />
158
-
159
-
160
- <link
161
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114"
162
- rel="apple-touch-icon"
163
- sizes="114x114"
164
- />
165
-
166
-
167
- <link
168
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120"
169
- rel="apple-touch-icon"
170
- sizes="120x120"
171
- />
172
-
173
-
174
- <link
175
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144"
176
- rel="apple-touch-icon"
177
- sizes="144x144"
178
- />
179
-
180
-
181
- <link
182
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152"
183
- rel="apple-touch-icon"
184
- sizes="152x152"
185
- />
186
-
187
-
188
- <link
189
- href="https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180"
190
- rel="apple-touch-icon"
191
- sizes="180x180"
192
- />
193
-
194
-
195
- <meta
196
- content="https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70"
197
- name="msapplication-square70x70logo"
198
- />
199
-
200
-
201
- <meta
202
- content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150"
203
- name="msapplication-square150x150logo"
204
- />
205
-
206
-
207
- <meta
208
- content="https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310"
209
- name="msapplication-square310x310logo"
210
- />
211
-
212
-
213
- <meta
214
- content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310"
215
- name="msapplication-square310x150logo"
216
- />
217
-
218
-
219
-
220
- </head>
221
- `;
@@ -1,172 +0,0 @@
1
- <script context="module">import IntersectionObserver from "svelte-intersection-observer";
2
- const isWindowDefined = typeof window !== "undefined";
3
- const noTypeCheck = (x) => x;
4
- const imageAddStrategy = ({ lazyLoad, intersecting, loaded }) => {
5
- const isIntersectionObserverAvailable = isWindowDefined ? !!window.IntersectionObserver : false;
6
- if (!lazyLoad) {
7
- return true;
8
- }
9
- if (!isWindowDefined) {
10
- return false;
11
- }
12
- if (isIntersectionObserverAvailable) {
13
- return intersecting || loaded;
14
- }
15
- return true;
16
- };
17
- const imageShowStrategy = ({ lazyLoad, loaded }) => {
18
- const isIntersectionObserverAvailable = isWindowDefined ? !!window.IntersectionObserver : false;
19
- if (!lazyLoad) {
20
- return true;
21
- }
22
- if (!isWindowDefined) {
23
- return false;
24
- }
25
- if (isIntersectionObserverAvailable) {
26
- return loaded;
27
- }
28
- return true;
29
- };
30
- const bogusBaseUrl = "https://example.com/";
31
- const buildSrcSet = (src, width, candidateMultipliers) => {
32
- if (!(src && width)) {
33
- return void 0;
34
- }
35
- return candidateMultipliers.map((multiplier) => {
36
- const url = new URL(src, bogusBaseUrl);
37
- if (multiplier !== 1) {
38
- url.searchParams.set("dpr", `${multiplier}`);
39
- const maxH = url.searchParams.get("max-h");
40
- const maxW = url.searchParams.get("max-w");
41
- if (maxH) {
42
- url.searchParams.set("max-h", `${Math.floor(parseInt(maxH) * multiplier)}`);
43
- }
44
- if (maxW) {
45
- url.searchParams.set("max-w", `${Math.floor(parseInt(maxW) * multiplier)}`);
46
- }
47
- }
48
- const finalWidth = Math.floor(width * multiplier);
49
- if (finalWidth < 50) {
50
- return null;
51
- }
52
- return `${url.toString().replace(bogusBaseUrl, "/")} ${finalWidth}w`;
53
- }).filter(Boolean).join(",");
54
- };
55
- </script>
56
-
57
- <script>import { createEventDispatcher } from "svelte";
58
- import Sizer from "./Sizer.svelte";
59
- import Placeholder from "./Placeholder.svelte";
60
- import Source from "./Source.svelte";
61
- const dispatch = createEventDispatcher();
62
- let element;
63
- let intersecting = false;
64
- let loaded = false;
65
- export let alt = null;
66
- export let data;
67
- let klass = null;
68
- export { klass as class };
69
- export let pictureClass = null;
70
- export let fadeInDuration = 500;
71
- export let intersectionThreshold = 0;
72
- export let intersectionMargin = "0px";
73
- let rawLazyLoad = true;
74
- export { rawLazyLoad as lazyLoad };
75
- export let style = {};
76
- export let pictureStyle = null;
77
- export let layout = "intrinsic";
78
- export let objectFit = void 0;
79
- export let objectPosition = void 0;
80
- export let usePlaceholder = true;
81
- export let sizes = null;
82
- export let priority = false;
83
- export let srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4];
84
- $:
85
- ({ width, height, aspectRatio } = data);
86
- $:
87
- lazyLoad = priority ? false : rawLazyLoad;
88
- $:
89
- addImage = imageAddStrategy({
90
- lazyLoad,
91
- intersecting,
92
- loaded
93
- });
94
- $:
95
- showImage = imageShowStrategy({
96
- lazyLoad,
97
- intersecting,
98
- loaded
99
- });
100
- let transition = fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : void 0;
101
- </script>
102
-
103
- <IntersectionObserver
104
- {element}
105
- bind:intersecting
106
- threshold={intersectionThreshold}
107
- rootMargin={intersectionMargin}
108
- >
109
- <div
110
- bind:this={element}
111
- class={klass}
112
- style:overflow="hidden"
113
- style:position={style.position ?? layout === 'fill' ? 'absolute' : 'relative'}
114
- style:width={style.width ?? layout === 'fixed' ? data.width : '100%'}
115
- style:maxWidth={style.maxWidth ?? layout === 'intrinsic' ? data.width : null}
116
- style:height={style.height ?? layout === 'fill' ? '100%' : null}
117
- data-testid="image"
118
- >
119
- {#if layout !== 'fill' && width}
120
- <Sizer {width} {height} {aspectRatio} />
121
- {/if}
122
-
123
- {#if usePlaceholder && (data.bgColor || data.base64)}
124
- <Placeholder
125
- base64={data.base64}
126
- backgroundColor={data.bgColor}
127
- {objectFit}
128
- {objectPosition}
129
- {showImage}
130
- {fadeInDuration}
131
- />
132
- {/if}
133
-
134
- {#if addImage}
135
- <picture style={pictureStyle} data-testid="picture">
136
- {#if data.webpSrcSet}
137
- <Source srcset={data.webpSrcSet} sizes={sizes ?? data.sizes ?? null} type="image/webp" />
138
- {/if}
139
- <Source
140
- srcset={data.srcSet ?? buildSrcSet(data.src, data.width, srcSetCandidates) ?? null}
141
- sizes={sizes ?? data.sizes ?? null}
142
- />
143
- {#if data.src}
144
- <img
145
- {...noTypeCheck({
146
- // See: https://github.com/sveltejs/language-tools/issues/1026#issuecomment-1002839154
147
- fetchpriority: priority ? 'high' : undefined
148
- })}
149
- src={data.src}
150
- alt={alt ?? data.alt ?? ''}
151
- title={data.title ?? null}
152
- on:load={() => {
153
- dispatch('load');
154
- loaded = true;
155
- }}
156
- class={pictureClass}
157
- style:opacity={showImage ? 1 : 0}
158
- style:transition
159
- style:position="absolute"
160
- style:left="0"
161
- style:top="0"
162
- style:width="100%"
163
- style:height="100%"
164
- style:objectFit
165
- style:objectPosition
166
- data-testid="img"
167
- />
168
- {/if}
169
- </picture>
170
- {/if}
171
- </div>
172
- </IntersectionObserver>