@datocms/svelte 4.0.0 → 4.0.1

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 (11) hide show
  1. package/package/components/Head/Head.svelte +4 -8
  2. package/package/components/Head/Head.svelte.d.ts +2 -2
  3. package/package/components/Head/serializeTag.d.ts +4 -0
  4. package/package/components/Head/serializeTag.js +30 -0
  5. package/package/components/Image/Image.svelte +1 -1
  6. package/package/components/VideoPlayer/README.md +6 -3
  7. package/package/components/VideoPlayer/VideoPlayer.svelte +3 -1
  8. package/package/components/VideoPlayer/VideoPlayer.svelte.d.ts +1 -0
  9. package/package/components/VideoPlayer/__tests__/VideoPlayer.svelte.test.js +14 -0
  10. package/package/components/VideoPlayer/__tests__/__snapshots__/VideoPlayer.svelte.test.ts.snap +49 -0
  11. package/package.json +2 -2
package/package/components/Head/Head.svelte CHANGED
@@ -1,14 +1,10 @@
1
1
  <script context="module"></script>
2
2
 
3
- <script>export let data = [];
3
+ <script>import { serializeTag } from "./serializeTag";
4
+ export let data = [];
5
+ const renderedTags = Array.isArray(data) ? data.map(serializeTag).join("") : "";
4
6
  </script>
5
7
 
6
8
  <svelte:head>
7
- {#each data as { tag, attributes, content }}
8
- {#if content}
9
- <svelte:element this={tag} {...attributes}>{content}</svelte:element>
10
- {:else}
11
- <svelte:element this={tag} {...attributes} />
12
- {/if}
13
- {/each}
9
+ {@html renderedTags}
14
10
  </svelte:head>
package/package/components/Head/Head.svelte.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SvelteComponent } from "svelte";
2
- export interface TitleMetaLinkTag {
2
+ export interface GenericTag {
3
3
  /** the tag for the meta information */
4
4
  tag: string;
5
5
  /** the inner content of the meta tag */
@@ -46,7 +46,7 @@ export type FaviconTag = SeoMetaTag | SeoLinkTag;
46
46
  export type SeoOrFaviconTag = SeoTag | FaviconTag;
47
47
  declare const __propDef: {
48
48
  props: {
49
- data?: (TitleMetaLinkTag | SeoOrFaviconTag)[] | undefined;
49
+ data?: (GenericTag | SeoOrFaviconTag)[] | undefined;
50
50
  };
51
51
  events: {
52
52
  [evt: string]: CustomEvent<any>;
package/package/components/Head/serializeTag.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { GenericTag, SeoOrFaviconTag } from "./Head.svelte";
2
+ /** Replaces special chars (&<>"') with HTML entities */
3
+ export declare const escapeHtml: (html: string) => string;
4
+ export declare const serializeTag: (metaTag: GenericTag | SeoOrFaviconTag) => string;
package/package/components/Head/serializeTag.js ADDED
@@ -0,0 +1,30 @@
1
+ /** Replaces special chars (&<>"') with HTML entities */
2
+ export const escapeHtml = (html) => {
3
+ return (html
4
+ .replace(/[<>"']/g, (match) => {
5
+ switch (match) {
6
+ case "<":
7
+ return "&lt;";
8
+ case ">":
9
+ return "&gt;";
10
+ case '"':
11
+ return "&quot;";
12
+ case "'":
13
+ return "&#39;";
14
+ default:
15
+ return match;
16
+ }
17
+ })
18
+ // ensure existing HTML entities (like &#xA9; or &copy;) are left untouched
19
+ .replace(/&(?!#?[a-z0-9]+;)/gi, "&amp;"));
20
+ };
21
+ export const serializeTag = (metaTag) => {
22
+ const { tag, attributes, content } = metaTag;
23
+ const serializedAttributes = attributes
24
+ ? Object.entries(attributes).flatMap(([key, value]) => value ? `${escapeHtml(key)}="${escapeHtml(value)}"` : [])
25
+ : [];
26
+ const attributesString = serializedAttributes.length > 0 ? ` ${serializedAttributes.join(" ")}` : "";
27
+ return content
28
+ ? `<${tag}${attributesString}>${content}</${tag}>`
29
+ : `<${tag}${attributesString}/>`;
30
+ };
package/package/components/Image/Image.svelte CHANGED
@@ -119,7 +119,7 @@ $:
119
119
  'background-color': data.bgColor,
120
120
  ...basePlaceholderStyle
121
121
  })}
122
- ></div>
122
+ />
123
123
  {/if}
124
124
  {/if}
125
125
 
package/package/components/VideoPlayer/README.md CHANGED
@@ -123,14 +123,17 @@ by DatoCMS GraphQL API.
123
123
  `<VideoPlayer />` uses the `data` prop to generate a set of attributes for the
124
124
  inner `<mux-player />`.
125
125
 
126
- | prop | type | required | description | default |
127
- | ---- | -------------- | ------------------ | ---------------------------------------------------------------- | ------- |
128
- | data | `Video` object | :white_check_mark: | The actual response you get from a DatoCMS `video` GraphQL query | |
126
+ | prop | type | required | description | default |
127
+ | ------ | -------------- | ------------------ | ---------------------------------------------------------------- | ------- |
128
+ | data | `Video` object | :white_check_mark: | The actual response you get from a DatoCMS `video` GraphQL query | |
129
+ | paused | `boolean` | | Control to play or pause the video | |
129
130
 
130
131
  `<VideoPlayer />` generate some default attributes:
131
132
 
132
133
  - when not declared, the `disableCookies` prop is true, unless you explicitly
133
134
  set the prop to `false` (therefore it generates a `disable-cookies` attribute)
135
+ - when not declared, the `disableTracking` prop is true, unelss you explicitly
136
+ set it to `false` (so, it normally generates a `disable-tracking` attribute)
134
137
  - `preload` defaults to `metadata`, for an optimal UX experience together with saved bandwidth
135
138
  - the video height and width, when available in the `data` props, are used to
136
139
  set a default `aspect-ratio: [width] / [height];` for the `<mux-player />`'s
package/package/components/VideoPlayer/VideoPlayer.svelte CHANGED
@@ -74,6 +74,7 @@ export let data = {};
74
74
  export let style = void 0;
75
75
  export let preload = "metadata";
76
76
  export let disableCookies = true;
77
+ export let disableTracking = true;
77
78
  let muxPlayerElementImported = false;
78
79
  let muxPlayerElement;
79
80
  let computedProps;
@@ -85,6 +86,7 @@ $: {
85
86
  ...computedStyle(style, width, height) || {},
86
87
  ...computedPlaceholder(blurUpThumb) || {},
87
88
  disableCookies,
89
+ disableTracking,
88
90
  preload
89
91
  };
90
92
  }
@@ -134,4 +136,4 @@ onMount(async () => {
134
136
  on:error
135
137
  on:cuepointchange
136
138
  on:cuepointschange
137
- ></mux-player>
139
+ />
package/package/components/VideoPlayer/VideoPlayer.svelte.d.ts CHANGED
@@ -23,6 +23,7 @@ type MuxMediaPropTypes = {
23
23
  envKey: string;
24
24
  debug: boolean;
25
25
  disableCookies: boolean;
26
+ disableTracking: boolean;
26
27
  disablePictureInPicture?: boolean;
27
28
  metadata: {
28
29
  [k: string]: any;
package/package/components/VideoPlayer/__tests__/VideoPlayer.svelte.test.js CHANGED
@@ -52,6 +52,20 @@ describe('VideoPlayer', () => {
52
52
  });
53
53
  });
54
54
  });
55
+ describe('and `disableTracking` is passed', () => {
56
+ it('uses it for the <mux-player /> element', () => {
57
+ const props = { data, disableTracking: true };
58
+ const { container } = render(VideoPlayer, { props });
59
+ expect(container).toMatchSnapshot();
60
+ });
61
+ describe('with value `false`', () => {
62
+ it("doesn't use it for the <mux-player /> element", () => {
63
+ const props = { data, disableTracking: false };
64
+ const { container } = render(VideoPlayer, { props });
65
+ expect(container).toMatchSnapshot();
66
+ });
67
+ });
68
+ });
55
69
  describe('and `preload` is passed', () => {
56
70
  it('uses it for the <mux-player /> element', () => {
57
71
  const props = { data, preload: 'auto' };
package/package/components/VideoPlayer/__tests__/__snapshots__/VideoPlayer.svelte.test.ts.snap CHANGED
@@ -5,6 +5,7 @@ exports[`VideoPlayer > when data object > contains \`muxPlaybackId\` > uses it f
5
5
  <div>
6
6
  <mux-player
7
7
  disable-cookies="true"
8
+ disable-tracking="true"
8
9
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
9
10
  preload="metadata"
10
11
  stream-type="on-demand"
@@ -19,6 +20,7 @@ exports[`VideoPlayer > when data object > contains \`playbackId\` > uses it for
19
20
  <div>
20
21
  <mux-player
21
22
  disable-cookies="true"
23
+ disable-tracking="true"
22
24
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
23
25
  preload="metadata"
24
26
  stream-type="on-demand"
@@ -34,6 +36,7 @@ exports[`VideoPlayer > when data object > is complete > and \`autoplay\` is pass
34
36
  <mux-player
35
37
  autoplay="true"
36
38
  disable-cookies="true"
39
+ disable-tracking="true"
37
40
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
38
41
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
39
42
  preload="metadata"
@@ -51,6 +54,7 @@ exports[`VideoPlayer > when data object > is complete > and \`autoplay\` is pass
51
54
  <div>
52
55
  <mux-player
53
56
  disable-cookies="true"
57
+ disable-tracking="true"
54
58
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
55
59
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
56
60
  preload="metadata"
@@ -69,6 +73,7 @@ exports[`VideoPlayer > when data object > is complete > and \`class\` is passed
69
73
  <mux-player
70
74
  class="main-player"
71
75
  disable-cookies="true"
76
+ disable-tracking="true"
72
77
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
73
78
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
74
79
  preload="metadata"
@@ -86,6 +91,7 @@ exports[`VideoPlayer > when data object > is complete > and \`disableCookies\` i
86
91
  <div>
87
92
  <mux-player
88
93
  disable-cookies="true"
94
+ disable-tracking="true"
89
95
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
90
96
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
91
97
  preload="metadata"
@@ -102,6 +108,42 @@ exports[`VideoPlayer > when data object > is complete > and \`disableCookies\` i
102
108
  <body>
103
109
  <div>
104
110
  <mux-player
111
+ disable-tracking="true"
112
+ placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
113
+ playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
114
+ preload="metadata"
115
+ stream-type="on-demand"
116
+ style="aspect-ratio: 1080 / 1920;"
117
+ title="Title"
118
+ />
119
+ <!--&lt;VideoPlayer&gt;-->
120
+ </div>
121
+ </body>
122
+ `;
123
+
124
+ exports[`VideoPlayer > when data object > is complete > and \`disableTracking\` is passed > uses it for the <mux-player /> element 1`] = `
125
+ <body>
126
+ <div>
127
+ <mux-player
128
+ disable-cookies="true"
129
+ disable-tracking="true"
130
+ placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
131
+ playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
132
+ preload="metadata"
133
+ stream-type="on-demand"
134
+ style="aspect-ratio: 1080 / 1920;"
135
+ title="Title"
136
+ />
137
+ <!--&lt;VideoPlayer&gt;-->
138
+ </div>
139
+ </body>
140
+ `;
141
+
142
+ exports[`VideoPlayer > when data object > is complete > and \`disableTracking\` is passed > with value \`false\` > doesn't use it for the <mux-player /> element 1`] = `
143
+ <body>
144
+ <div>
145
+ <mux-player
146
+ disable-cookies="true"
105
147
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
106
148
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
107
149
  preload="metadata"
@@ -119,6 +161,7 @@ exports[`VideoPlayer > when data object > is complete > and \`preload\` is passe
119
161
  <div>
120
162
  <mux-player
121
163
  disable-cookies="true"
164
+ disable-tracking="true"
122
165
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
123
166
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
124
167
  preload="auto"
@@ -136,6 +179,7 @@ exports[`VideoPlayer > when data object > is complete > and \`preload\` is passe
136
179
  <div>
137
180
  <mux-player
138
181
  disable-cookies="true"
182
+ disable-tracking="true"
139
183
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
140
184
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
141
185
  preload="none"
@@ -153,6 +197,7 @@ exports[`VideoPlayer > when data object > is complete > and a style string is pa
153
197
  <div>
154
198
  <mux-player
155
199
  disable-cookies="true"
200
+ disable-tracking="true"
156
201
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
157
202
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
158
203
  preload="metadata"
@@ -170,6 +215,7 @@ exports[`VideoPlayer > when data object > is complete > and a style string is pa
170
215
  <div>
171
216
  <mux-player
172
217
  disable-cookies="true"
218
+ disable-tracking="true"
173
219
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
174
220
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
175
221
  preload="metadata"
@@ -187,6 +233,7 @@ exports[`VideoPlayer > when data object > is complete > unwraps data into props
187
233
  <div>
188
234
  <mux-player
189
235
  disable-cookies="true"
236
+ disable-tracking="true"
190
237
  placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A"
191
238
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
192
239
  preload="metadata"
@@ -204,6 +251,7 @@ exports[`VideoPlayer > when data object > lacks of \`title\` value > avoids addi
204
251
  <div>
205
252
  <mux-player
206
253
  disable-cookies="true"
254
+ disable-tracking="true"
207
255
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
208
256
  preload="metadata"
209
257
  stream-type="on-demand"
@@ -219,6 +267,7 @@ exports[`VideoPlayer > when data object > lacks of \`width\` and \`height\` valu
219
267
  <div>
220
268
  <mux-player
221
269
  disable-cookies="true"
270
+ disable-tracking="true"
222
271
  playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY"
223
272
  preload="metadata"
224
273
  stream-type="on-demand"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datocms/svelte",
3
- "version": "4.0.0",
3
+ "version": "4.0.1",
4
4
  "description": "A set of components and utilities to work faster with DatoCMS in Svelte",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -35,7 +35,7 @@
35
35
  }
36
36
  },
37
37
  "devDependencies": {
38
- "@mux/mux-player": "*",
38
+ "@mux/mux-player": "^2.5.0",
39
39
  "@mux/playback-core": "^0.22.1",
40
40
  "@sveltejs/adapter-auto": "^3.0.0",
41
41
  "@sveltejs/kit": "^2.0.0",