@datocms/svelte 3.0.4 → 3.0.5
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 +7 -2
- package/package/components/Image/Image.svelte +1 -1
- package/package/components/StructuredText/README.md +12 -34
- package/package/components/StructuredText/StructuredText.svelte +4 -2
- package/package/components/StructuredText/StructuredText.svelte.d.ts +2 -2
- package/package/components/VideoPlayer/VideoPlayer.svelte +1 -1
- package/package/stores/querySubscription/README.md +17 -13
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
|
|
6
6
|
|
|
7
|
+
---
|
|
8
|
+
|
|
7
9
|
<!--datocms-autoinclude-header end-->
|
|
8
10
|
|
|
9
11
|
# @datocms/svelte
|
|
@@ -35,7 +37,7 @@ A set of components to work faster with [DatoCMS](https://www.datocms.com/) in S
|
|
|
35
37
|
|
|
36
38
|
Components:
|
|
37
39
|
|
|
38
|
-
- [`<Image />`](src/lib/components/Image)
|
|
40
|
+
- [`<Image />` and `<NakedImage />`](src/lib/components/Image)
|
|
39
41
|
- [`<VideoPlayer />`](src/lib/components/VideoPlayer)
|
|
40
42
|
- [`<StructuredText />`](src/lib/components/StructuredText)
|
|
41
43
|
- [`<Head />`](src/lib/components/Head)
|
|
@@ -67,7 +69,9 @@ npm run build
|
|
|
67
69
|
```
|
|
68
70
|
|
|
69
71
|
<!--datocms-autoinclude-footer start-->
|
|
70
|
-
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
71
75
|
# What is DatoCMS?
|
|
72
76
|
<a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
|
|
73
77
|
|
|
@@ -90,4 +94,5 @@ Trusted by over 25,000 enterprise businesses, agency partners, and individuals a
|
|
|
90
94
|
- [DatoCMS Starters](https://www.datocms.com/marketplace/starters) has examples for various Javascript frontend frameworks
|
|
91
95
|
|
|
92
96
|
Or see [all our public repos](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
|
|
97
|
+
|
|
93
98
|
<!--datocms-autoinclude-footer end-->
|
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
8
8
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
9
9
|
|
|
10
|
-
- [Setup](#setup)
|
|
11
10
|
- [Basic usage](#basic-usage)
|
|
12
11
|
- [Customization](#customization)
|
|
13
12
|
- [Custom components for blocks](#custom-components-for-blocks)
|
|
@@ -86,8 +85,8 @@ Here is an example using custom components for blocks, inline and item links. Ta
|
|
|
86
85
|
|
|
87
86
|
```svelte
|
|
88
87
|
<script>
|
|
89
|
-
|
|
90
88
|
import { onMount } from 'svelte';
|
|
89
|
+
import { executeQuery } from '@datocms/cda-client';
|
|
91
90
|
|
|
92
91
|
import { isBlock, isInlineItem, isItemLink } from 'datocms-structured-text-utils';
|
|
93
92
|
|
|
@@ -104,33 +103,23 @@ const query = `
|
|
|
104
103
|
content {
|
|
105
104
|
value
|
|
106
105
|
links {
|
|
107
|
-
|
|
108
|
-
... on TeamMemberRecord {
|
|
106
|
+
... on RecordInterface {
|
|
109
107
|
id
|
|
108
|
+
__typename
|
|
109
|
+
}
|
|
110
|
+
... on TeamMemberRecord {
|
|
110
111
|
firstName
|
|
111
112
|
slug
|
|
112
113
|
}
|
|
113
114
|
}
|
|
114
115
|
blocks {
|
|
115
|
-
|
|
116
|
-
... on ImageRecord {
|
|
116
|
+
... on RecordInterface {
|
|
117
117
|
id
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
webpSrcSet
|
|
124
|
-
sizes
|
|
125
|
-
src
|
|
126
|
-
width
|
|
127
|
-
height
|
|
128
|
-
aspectRatio
|
|
129
|
-
alt
|
|
130
|
-
title
|
|
131
|
-
base64
|
|
132
|
-
}
|
|
133
|
-
}
|
|
118
|
+
__typename
|
|
119
|
+
}
|
|
120
|
+
... on CtaRecord {
|
|
121
|
+
title
|
|
122
|
+
url
|
|
134
123
|
}
|
|
135
124
|
}
|
|
136
125
|
}
|
|
@@ -141,18 +130,7 @@ const query = `
|
|
|
141
130
|
export let data = null;
|
|
142
131
|
|
|
143
132
|
onMount(async () => {
|
|
144
|
-
|
|
145
|
-
method: 'POST',
|
|
146
|
-
headers: {
|
|
147
|
-
'Content-Type': 'application/json',
|
|
148
|
-
Authorization: "Bearer AN_API_TOKEN",
|
|
149
|
-
},
|
|
150
|
-
body: JSON.stringify({ query })
|
|
151
|
-
})
|
|
152
|
-
|
|
153
|
-
const json = await response.json()
|
|
154
|
-
|
|
155
|
-
data = json.data;
|
|
133
|
+
data = await executeQuery(query, { token: '<YOUR-API-TOKEN>' });
|
|
156
134
|
});
|
|
157
135
|
|
|
158
136
|
</script>
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
<script>import {
|
|
2
|
-
isStructuredText
|
|
2
|
+
isStructuredText,
|
|
3
|
+
isDocument,
|
|
4
|
+
isNode
|
|
3
5
|
} from "datocms-structured-text-utils";
|
|
4
6
|
import Node from "./Node.svelte";
|
|
5
7
|
export let data = null;
|
|
6
8
|
export let components = [];
|
|
7
9
|
$:
|
|
8
|
-
node = data
|
|
10
|
+
node = !data ? null : isStructuredText(data) && isDocument(data.value) ? data.value.document : isDocument(data) ? data.document : isNode(data) ? data : void 0;
|
|
9
11
|
$:
|
|
10
12
|
blocks = isStructuredText(data) ? data?.blocks : void 0;
|
|
11
13
|
$:
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import { type StructuredText, type Document } from 'datocms-structured-text-utils';
|
|
2
|
+
import { type StructuredText, type Document, type Node as DastNode } from 'datocms-structured-text-utils';
|
|
3
3
|
import type { PredicateComponentTuple } from '../..';
|
|
4
4
|
declare const __propDef: {
|
|
5
5
|
props: {
|
|
6
|
-
/** The actual field value you get from DatoCMS **/ data?: StructuredText | Document | null | undefined;
|
|
6
|
+
/** The actual field value you get from DatoCMS **/ data?: StructuredText | Document | DastNode | null | undefined;
|
|
7
7
|
components?: PredicateComponentTuple[] | undefined;
|
|
8
8
|
};
|
|
9
9
|
events: {
|
|
@@ -29,19 +29,23 @@ const subscription = querySubscription(options: Options);
|
|
|
29
29
|
|
|
30
30
|
## Initialization options
|
|
31
31
|
|
|
32
|
-
| prop | type | required | description
|
|
33
|
-
| ------------------ | ------------------------------------------------------------------------------------------ | ------------------ |
|
|
34
|
-
| enabled | boolean | :x: | Whether the subscription has to be performed or not
|
|
35
|
-
| query | string \| [`TypedDocumentNode`](https://github.com/dotansimha/graphql-typed-document-node) | :white_check_mark: | The GraphQL query to subscribe
|
|
36
|
-
| token | string | :white_check_mark: | DatoCMS API token to use
|
|
37
|
-
| variables | Object | :x: | GraphQL variables for the query
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
32
|
+
| prop | type | required | description | default |
|
|
33
|
+
| ------------------ | ------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------------ |
|
|
34
|
+
| enabled | boolean | :x: | Whether the subscription has to be performed or not | true |
|
|
35
|
+
| query | string \| [`TypedDocumentNode`](https://github.com/dotansimha/graphql-typed-document-node) | :white_check_mark: | The GraphQL query to subscribe | |
|
|
36
|
+
| token | string | :white_check_mark: | DatoCMS API token to use | |
|
|
37
|
+
| variables | Object | :x: | GraphQL variables for the query | |
|
|
38
|
+
| includeDrafts | boolean | :x: | If true, draft records will be returned | |
|
|
39
|
+
| excludeInvalid | boolean | :x: | If true, invalid records will be filtered out | |
|
|
40
|
+
| environment | string | :x: | The name of the DatoCMS environment where to perform the query (defaults to primary environment) | |
|
|
41
|
+
| contentLink | `'vercel-1'` or `undefined` | :x: | If true, embed metadata that enable Content Link | |
|
|
42
|
+
| baseEditingUrl | string | :x: | The base URL of the DatoCMS project | |
|
|
43
|
+
| cacheTags | boolean | :x: | If true, receive the Cache Tags associated with the query | |
|
|
44
|
+
| initialData | Object | :x: | The initial data to use on the first render | |
|
|
45
|
+
| reconnectionPeriod | number | :x: | In case of network errors, the period (in ms) to wait to reconnect | 1000 |
|
|
46
|
+
| fetcher | a [fetch-like function](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) | :x: | The fetch function to use to perform the registration query | window.fetch |
|
|
47
|
+
| eventSourceClass | an [EventSource-like](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) class | :x: | The EventSource class to use to open up the SSE connection | window.EventSource |
|
|
48
|
+
| baseUrl | string | :x: | The base URL to use to perform the query | `https://graphql-listen.datocms.com` |
|
|
45
49
|
|
|
46
50
|
## Connection status
|
|
47
51
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@datocms/svelte",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.5",
|
|
4
4
|
"description": "A set of components and utilities to work faster with DatoCMS in Svelte",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@mux/mux-player": "*",
|
|
30
|
-
"svelte": "^3.59.2 || ^4.0.0"
|
|
30
|
+
"svelte": "^3.59.2 || ^4.0.0 || ^5.0.0"
|
|
31
31
|
},
|
|
32
32
|
"peerDependenciesMeta": {
|
|
33
33
|
"@mux/mux-player": {
|