@datocms/svelte 4.1.0 → 4.2.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 +33 -14
- package/package/components/Head/Head.svelte +4 -8
- package/package/components/Head/Head.svelte.d.ts +2 -2
- package/package/components/Head/serializeTag.d.ts +4 -0
- package/package/components/Head/serializeTag.js +30 -0
- package/package/components/StructuredText/Node.svelte +11 -2
- package/package/components/StructuredText/README.md +4 -4
- package/package/components/VideoPlayer/README.md +4 -3
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -73,26 +73,45 @@ npm run build
|
|
|
73
73
|
---
|
|
74
74
|
|
|
75
75
|
# What is DatoCMS?
|
|
76
|
-
|
|
76
|
+
|
|
77
|
+
<a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60" alt="DatoCMS - The Headless CMS for the Modern Web"></a>
|
|
77
78
|
|
|
78
79
|
[DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
|
|
79
80
|
|
|
80
|
-
Trusted by over 25,000 enterprise businesses,
|
|
81
|
+
Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
|
|
82
|
+
|
|
83
|
+
**Why DatoCMS?**
|
|
84
|
+
|
|
85
|
+
- **API-First Architecture**: Built for both REST and GraphQL, enabling flexible content delivery
|
|
86
|
+
- **Just Enough Features**: We believe in keeping things simple, and giving you [the right feature-set tools](https://www.datocms.com/features) to get the job done
|
|
87
|
+
- **Developer Experience**: First-class TypeScript support with powerful developer tools
|
|
88
|
+
|
|
89
|
+
**Getting Started:**
|
|
90
|
+
|
|
91
|
+
- ⚡️ [Create Free Account](https://dashboard.datocms.com/signup) - Get started with DatoCMS in minutes
|
|
92
|
+
- 🔖 [Documentation](https://www.datocms.com/docs) - Comprehensive guides and API references
|
|
93
|
+
- ⚙️ [Community Support](https://community.datocms.com/) - Get help from our team and community
|
|
94
|
+
- 🆕 [Changelog](https://www.datocms.com/product-updates) - Latest features and improvements
|
|
95
|
+
|
|
96
|
+
**Official Libraries:**
|
|
97
|
+
|
|
98
|
+
- [**Content Delivery Client**](https://github.com/datocms/cda-client) - TypeScript GraphQL client for content fetching
|
|
99
|
+
- [**REST API Clients**](https://github.com/datocms/js-rest-api-clients) - Node.js/Browser clients for content management
|
|
100
|
+
- [**CLI Tools**](https://github.com/datocms/cli) - Command-line utilities for schema migrations (includes [Contentful](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [WordPress](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress) importers)
|
|
101
|
+
|
|
102
|
+
**Official Framework Integrations**
|
|
81
103
|
|
|
82
|
-
|
|
104
|
+
Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:
|
|
83
105
|
|
|
84
|
-
-
|
|
85
|
-
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
106
|
+
- [**React Components**](https://github.com/datocms/react-datocms)
|
|
107
|
+
- [**Vue Components**](https://github.com/datocms/vue-datocms)
|
|
108
|
+
- [**Svelte Components**](https://github.com/datocms/datocms-svelte)
|
|
109
|
+
- [**Astro Components**](https://github.com/datocms/astro-datocms)
|
|
88
110
|
|
|
89
|
-
**
|
|
90
|
-
- [datocms/react-datocms](https://github.com/datocms/react-datocms): React helper components for images, Structured Text rendering, and more
|
|
91
|
-
- [datocms/js-rest-api-clients](https://github.com/datocms/js-rest-api-clients): Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our [GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api) instead.
|
|
92
|
-
- [datocms/cli](https://github.com/datocms/cli): Command-line interface that includes our [Contentful importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [Wordpress importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress)
|
|
93
|
-
- [datocms/plugins](https://github.com/datocms/plugins): Example plugins we've made that extend the editor/admin dashboard
|
|
94
|
-
- [DatoCMS Starters](https://www.datocms.com/marketplace/starters) has examples for various Javascript frontend frameworks
|
|
111
|
+
**Additional Resources:**
|
|
95
112
|
|
|
96
|
-
|
|
113
|
+
- [**Plugin Examples**](https://github.com/datocms/plugins) - Example plugins we've made that extend the editor/admin dashboard
|
|
114
|
+
- [**Starter Projects**](https://www.datocms.com/marketplace/starters) - Example website implementations for popular frameworks
|
|
115
|
+
- [**All Public Repositories**](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
|
|
97
116
|
|
|
98
117
|
<!--datocms-autoinclude-footer end-->
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
<script context="module"></script>
|
|
2
2
|
|
|
3
|
-
<script>
|
|
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
|
-
{
|
|
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>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
export interface
|
|
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?: (
|
|
49
|
+
data?: (GenericTag | SeoOrFaviconTag)[] | undefined;
|
|
50
50
|
};
|
|
51
51
|
events: {
|
|
52
52
|
[evt: string]: CustomEvent<any>;
|
|
@@ -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 "<";
|
|
8
|
+
case ">":
|
|
9
|
+
return ">";
|
|
10
|
+
case '"':
|
|
11
|
+
return """;
|
|
12
|
+
case "'":
|
|
13
|
+
return "'";
|
|
14
|
+
default:
|
|
15
|
+
return match;
|
|
16
|
+
}
|
|
17
|
+
})
|
|
18
|
+
// ensure existing HTML entities (like © or ©) are left untouched
|
|
19
|
+
.replace(/&(?!#?[a-z0-9]+;)/gi, "&"));
|
|
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
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script context="module">import {
|
|
2
2
|
isBlock,
|
|
3
|
+
isInlineBlock,
|
|
3
4
|
isBlockquote,
|
|
4
5
|
isCode,
|
|
5
6
|
isHeading,
|
|
@@ -55,10 +56,16 @@ const throwRenderErrorForMissingComponent = (node) => {
|
|
|
55
56
|
node
|
|
56
57
|
);
|
|
57
58
|
}
|
|
59
|
+
if (isInlineBlock(node)) {
|
|
60
|
+
throw new RenderError(
|
|
61
|
+
`The Structured Text document contains an 'inlineBlock' node, but no component for rendering is specified!`,
|
|
62
|
+
node
|
|
63
|
+
);
|
|
64
|
+
}
|
|
58
65
|
};
|
|
59
66
|
const throwRenderErrorForMissingBlock = (node) => {
|
|
60
67
|
throw new RenderError(
|
|
61
|
-
`The Structured Text document contains a '
|
|
68
|
+
`The Structured Text document contains a '${node.type}' node, but cannot find a record with ID ${node.item} inside data.blocks!`,
|
|
62
69
|
node
|
|
63
70
|
);
|
|
64
71
|
};
|
|
@@ -78,7 +85,7 @@ export let blocks;
|
|
|
78
85
|
export let links;
|
|
79
86
|
export let components = [];
|
|
80
87
|
$:
|
|
81
|
-
block = isBlock(node) && (findBlock(node, blocks) || throwRenderErrorForMissingBlock(node));
|
|
88
|
+
block = (isBlock(node) || isInlineBlock(node)) && (findBlock(node, blocks) || throwRenderErrorForMissingBlock(node));
|
|
82
89
|
$:
|
|
83
90
|
link = isItemLink(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node)) || isInlineItem(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node));
|
|
84
91
|
$:
|
|
@@ -90,6 +97,8 @@ $:
|
|
|
90
97
|
{#if component}
|
|
91
98
|
{#if isBlock(node)}
|
|
92
99
|
<svelte:component this={component} {node} {block} />
|
|
100
|
+
{:else if isInlineBlock(node)}
|
|
101
|
+
<svelte:component this={component} {node} {block} />
|
|
93
102
|
{:else if isInlineItem(node)}
|
|
94
103
|
<svelte:component this={component} {node} {link} />
|
|
95
104
|
{:else if isItemLink(node)}
|
|
@@ -181,7 +181,7 @@ In this case, you can easily override default rendering rules with the `componen
|
|
|
181
181
|
|
|
182
182
|
## Props
|
|
183
183
|
|
|
184
|
-
| prop | type | required
|
|
185
|
-
| ---------- | ----------------------------------------------------------------------------------------------------------- |
|
|
186
|
-
| data | `StructuredText \| DastNode` | :white_check_mark:
|
|
187
|
-
| components | [`PredicateComponentTuple[] \| null`](https://github.com/datocms/datocms-svelte/blob/main/src/lib/index.ts) | Only required if data contain `block`, `inline_item` or `item_link` nodes | Array of tuples formed by a predicate function and custom component | `[]` |
|
|
184
|
+
| prop | type | required | description | default |
|
|
185
|
+
| ---------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------- |
|
|
186
|
+
| data | `StructuredText \| DastNode` | :white_check_mark: | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS | |
|
|
187
|
+
| components | [`PredicateComponentTuple[] \| null`](https://github.com/datocms/datocms-svelte/blob/main/src/lib/index.ts) | Only required if data contain `block`, `inlineBlock`, `inline_item` or `item_link` nodes | Array of tuples formed by a predicate function and custom component | `[]` |
|
|
@@ -123,9 +123,10 @@ 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
|
|
127
|
-
|
|
|
128
|
-
| data
|
|
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
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@datocms/svelte",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "A set of components and utilities to work faster with DatoCMS in Svelte",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
47
47
|
"@typescript-eslint/parser": "^5.62.0",
|
|
48
48
|
"csstype": "^3.1.3",
|
|
49
|
-
"datocms-structured-text-generic-html-renderer": "^
|
|
49
|
+
"datocms-structured-text-generic-html-renderer": "^4.1.2",
|
|
50
50
|
"doctoc": "^2.0.0",
|
|
51
51
|
"eslint": "^8.56.0",
|
|
52
52
|
"eslint-config-prettier": "^8.10.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"type": "module",
|
|
67
67
|
"dependencies": {
|
|
68
68
|
"datocms-listen": "^0.1.15",
|
|
69
|
-
"datocms-structured-text-utils": "^4.
|
|
69
|
+
"datocms-structured-text-utils": "^4.1.2",
|
|
70
70
|
"svelte-intersection-observer": "^1.0.0"
|
|
71
71
|
},
|
|
72
72
|
"exports": {
|