@datocms/svelte 4.2.0 → 4.2.2

package/package/components/Head/serializeTag.d.ts

@@ -1,4 +1,4 @@
-import type { GenericTag, SeoOrFaviconTag } from "./Head.svelte";
+import type { GenericTag, SeoOrFaviconTag } from './Head.svelte';
 /** Replaces special chars (&<>"') with HTML entities */
 export declare const escapeHtml: (html: string) => string;
 export declare const serializeTag: (metaTag: GenericTag | SeoOrFaviconTag) => string;

package/package/components/Head/serializeTag.js

@@ -3,27 +3,27 @@ export const escapeHtml = (html) => {
     return (html
         .replace(/[<>"']/g, (match) => {
         switch (match) {
-            case "<":
-                return "&lt;";
-            case ">":
-                return "&gt;";
+            case '<':
+                return '&lt;';
+            case '>':
+                return '&gt;';
             case '"':
-                return "&quot;";
+                return '&quot;';
             case "'":
-                return "&#39;";
+                return '&#39;';
             default:
                 return match;
         }
     })
         // ensure existing HTML entities (like &#xA9; or &copy;) are left untouched
-        .replace(/&(?!#?[a-z0-9]+;)/gi, "&amp;"));
+        .replace(/&(?!#?[a-z0-9]+;)/gi, '&amp;'));
 };
 export const serializeTag = (metaTag) => {
     const { tag, attributes, content } = metaTag;
     const serializedAttributes = attributes
         ? Object.entries(attributes).flatMap(([key, value]) => value ? `${escapeHtml(key)}="${escapeHtml(value)}"` : [])
         : [];
-    const attributesString = serializedAttributes.length > 0 ? ` ${serializedAttributes.join(" ")}` : "";
+    const attributesString = serializedAttributes.length > 0 ? ` ${serializedAttributes.join(' ')}` : '';
     return content
         ? `<${tag}${attributesString}>${content}</${tag}>`
         : `<${tag}${attributesString}/>`;

package/package/components/Image/Image.svelte

@@ -27,6 +27,7 @@ export let usePlaceholder = true;
 export let sizes = null;
 export let priority = false;
 export let srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4];
+export let referrerPolicy = "no-referrer-when-downgrade";
 const dispatch = createEventDispatcher();
 let rootEl;
 let inView = false;
@@ -153,6 +154,7 @@ $:
 							'object-position': objectPosition,
 							...parseStyleAttributes(imgStyle)
 						})}
+						referrerpolicy={referrerPolicy}
 						data-testid="img"
 					/>
 				{/if}

package/package/components/Image/Image.svelte.d.ts

@@ -45,6 +45,12 @@ declare const __propDef: {
              *
              * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
              **/ srcSetCandidates?: number[] | undefined;
+        /**
+             * Defines which referrer is sent when fetching the image
+             * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
+             *
+             * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
+             **/ referrerPolicy?: ReferrerPolicy | undefined;
     };
     events: {
         load: CustomEvent<any>;

package/package/components/Image/README.md

@@ -164,6 +164,7 @@ Here's a complete recap of what `responsiveImage` offers:
 | sizes            | string                   | undefined                          | :x:                | The HTML5 [`sizes`](https://web.dev/learn/design/responsive-images/#sizes) attribute for the image (will be used `data.sizes` as a fallback)         |
 | usePlaceholder   | Boolean                  | true                               | :x:                | Whether the image should use a blurred image placeholder                                                                                             |
 | srcSetCandidates | Array<number>            | [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] | :x:                | If `data` does not contain `srcSet`, the candidates for the `srcset` attribute of the image will be auto-generated based on these width multipliers  |
+| referrerPolicy   | string                   | `no-referrer-when-downgrade`       | :x:                | Defines which referrer is sent when fetching the image. Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages |
 
 ### Events
 
@@ -197,6 +198,7 @@ Here's a complete recap of what `responsiveImage` offers:
 | sizes                 | string                                           | undefined                          | :x:                | The HTML5 [`sizes`](https://web.dev/learn/design/responsive-images/#sizes) attribute for the image (will be used `data.sizes` as a fallback)                                                                                                                                                  |
 | onLoad                | () => void                                       | undefined                          | :x:                | Function triggered when the image has finished loading                                                                                                                                                                                                                                        |
 | usePlaceholder        | Boolean                                          | true                               | :x:                | Whether the component should use a blurred image placeholder                                                                                                                                                                                                                                  |
+| referrerPolicy        | string                                           | `no-referrer-when-downgrade`       | :x:                | Defines which referrer is sent when fetching the image. Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages                                                                                                                                          |
 
 ### Events
 

package/package/components/NakedImage/NakedImage.svelte

@@ -14,6 +14,7 @@ export let usePlaceholder = true;
 export let sizes = null;
 export let priority = false;
 export let srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4];
+export let referrerPolicy = "no-referrer-when-downgrade";
 const dispatch = createEventDispatcher();
 let loaded = false;
 let placeholderStyle;
@@ -66,6 +67,7 @@ $:
 				...sizingStyle,
 				...parseStyleAttributes(imgStyle)
 			})}
+			referrerpolicy={referrerPolicy}
 			data-testid="img"
 		/>
 	{/if}

package/package/components/NakedImage/NakedImage.svelte.d.ts

@@ -25,6 +25,12 @@ declare const __propDef: {
              *
              * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
              **/ srcSetCandidates?: number[] | undefined;
+        /**
+             * Defines which referrer is sent when fetching the image
+             * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
+             *
+             * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
+             **/ referrerPolicy?: ReferrerPolicy | undefined;
     };
     events: {
         load: CustomEvent<any>;

package/package/components/StructuredText/Node.svelte

@@ -38,30 +38,10 @@ export const DEFAULT_COMPONENTS = [
   [isCode, Code]
 ];
 const throwRenderErrorForMissingComponent = (node) => {
-  if (isInlineItem(node)) {
-    throw new RenderError(
-      `The Structured Text document contains an 'inlineItem' node, but no component for rendering is specified!`,
-      node
-    );
-  }
-  if (isItemLink(node)) {
-    throw new RenderError(
-      `The Structured Text document contains an 'itemLink' node, but no component for rendering is specified!`,
-      node
-    );
-  }
-  if (isBlock(node)) {
-    throw new RenderError(
-      `The Structured Text document contains a 'block' node, but no component for rendering is specified!`,
-      node
-    );
-  }
-  if (isInlineBlock(node)) {
-    throw new RenderError(
-      `The Structured Text document contains an 'inlineBlock' node, but no component for rendering is specified!`,
-      node
-    );
-  }
+  throw new RenderError(
+    `The Structured Text document contains an '${node.type}' node, but no component for rendering is specified!`,
+    node
+  );
 };
 const throwRenderErrorForMissingBlock = (node) => {
   throw new RenderError(
@@ -69,6 +49,12 @@ const throwRenderErrorForMissingBlock = (node) => {
     node
   );
 };
+const throwRenderErrorForMissingInlineBlock = (node) => {
+  throw new RenderError(
+    `The Structured Text document contains a '${node.type}' node, but cannot find a record with ID ${node.item} inside data.inlineBlocks!`,
+    node
+  );
+};
 const throwRenderErrorForMissingLink = (node) => {
   throw new RenderError(
     `The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside data.links!`,
@@ -76,20 +62,24 @@ const throwRenderErrorForMissingLink = (node) => {
   );
 };
 const findBlock = (node, blocks) => (blocks || []).find(({ id }) => id === node.item);
+const findInlineBlock = (node, inlineBlocks) => (inlineBlocks || []).find(({ id }) => id === node.item);
 const findLink = (node, links) => (links || []).find(({ id }) => id === node.item);
 </script>
 
 <script>import { hasChildren } from "datocms-structured-text-utils";
 export let node;
 export let blocks;
+export let inlineBlocks;
 export let links;
 export let components = [];
 $:
-  block = (isBlock(node) || isInlineBlock(node)) && (findBlock(node, blocks) || throwRenderErrorForMissingBlock(node));
+  predicateComponentTuple = [...components, ...DEFAULT_COMPONENTS].find(([predicate, component2]) => predicate(node)) || throwRenderErrorForMissingComponent(node);
 $:
-  link = isItemLink(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node)) || isInlineItem(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node));
+  block = isBlock(node) && (findBlock(node, blocks) || throwRenderErrorForMissingBlock(node));
 $:
-  predicateComponentTuple = [...components, ...DEFAULT_COMPONENTS].find(([predicate, component2]) => predicate(node)) || throwRenderErrorForMissingComponent(node);
+  inlineBlock = isInlineBlock(node) && (findInlineBlock(node, inlineBlocks) || throwRenderErrorForMissingInlineBlock(node));
+$:
+  link = isItemLink(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node)) || isInlineItem(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node));
 $:
   component = (predicateComponentTuple ?? [])[1];
 </script>
@@ -98,14 +88,14 @@ $:
 	{#if isBlock(node)}
 		<svelte:component this={component} {node} {block} />
 	{:else if isInlineBlock(node)}
-		<svelte:component this={component} {node} {block} />
+		<svelte:component this={component} {node} block={inlineBlock} />
 	{:else if isInlineItem(node)}
 		<svelte:component this={component} {node} {link} />
 	{:else if isItemLink(node)}
 		<svelte:component this={component} {node} {link}>
 			{#if hasChildren(node)}
 				{#each node.children as child}
-					<svelte:self node={child} {blocks} {links} {components} />
+					<svelte:self node={child} {blocks} {inlineBlocks} {links} {components} />
 				{/each}
 			{/if}
 		</svelte:component>
@@ -113,7 +103,7 @@ $:
 		<svelte:component this={component} {node}>
 			{#if hasChildren(node)}
 				{#each node.children as child}
-					<svelte:self node={child} {blocks} {links} {components} />
+					<svelte:self node={child} {blocks} {inlineBlocks} {links} {components} />
 				{/each}
 			{/if}
 		</svelte:component>

package/package/components/StructuredText/Node.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
     props: {
         node: Node;
         blocks: StructuredText['blocks'];
+        inlineBlocks: StructuredText['inlineBlocks'];
         links: StructuredText['links'];
         components?: PredicateComponentTuple[] | undefined;
     };

package/package/components/StructuredText/README.md

@@ -82,7 +82,7 @@ You need to use custom components in the following cases:
 
 ### Custom components for blocks
 
-Here is an example using custom components for blocks, inline and item links. Take a look at the [test fixtures](https://github.com/datocms/datocms-svelte/tree/main/src/lib/components/StructuredText/__tests__/__fixtures__) to see examples on how to implement these components.
+Here is an example using custom components for blocks, inline blocks, inline records and links to records. Take a look at the [test fixtures](https://github.com/datocms/datocms-svelte/tree/main/src/lib/components/StructuredText/__tests__/__fixtures__) to see examples on how to implement these components.
 
 ```svelte
 <script>
@@ -123,6 +123,15 @@ const query = `
             url
           }
         }
+        inlineBlocks {
+          ... on RecordInterface {
+            id
+            __typename
+          }
+          ... on MentionRecord {
+            username
+          }
+        }
       }
     }
   }
@@ -145,6 +154,7 @@ onMount(async () => {
         [isInlineItem, InlineItem],
         [isItemLink, ItemLink],
         [isBlock, Block]
+        [isInlineBlock, InlineBlock]
       ]}
     />
   {/if}
@@ -153,7 +163,7 @@ onMount(async () => {
 
 ### Override default rendering of nodes
 
-`<StructuredText />` automatically renders all nodes (except for `inline_item`, `item_link` and `block`) using a set of default components, that you might want to customize. For example:
+`<StructuredText />` automatically renders all nodes (except for `inlineItem`, `itemLink`, `block` and `inlineBlock`) using a set of default components, that you might want to customize. For example:
 
 - For `heading` nodes, you might want to add an anchor;
 - For `code` nodes, you might want to use a custom syntax highlighting component;
@@ -181,7 +191,7 @@ In this case, you can easily override default rendering rules with the `componen
 
 ## Props
 
-| prop       | type                                                                                                        | required                                                                                 | description                                                                                      | default |
-| ---------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------- |
-| data       | `StructuredText \| DastNode`                                                                                | :white_check_mark:                                                                       | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS |         |
-| 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                              | `[]`    |
+| prop       | type                                                                                                        | required                                                                                | description                                                                                      | default |
+| ---------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------- |
+| data       | `StructuredText \| DastNode`                                                                                | :white_check_mark:                                                                      | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS |         |
+| components | [`PredicateComponentTuple[] \| null`](https://github.com/datocms/datocms-svelte/blob/main/src/lib/index.ts) | Only required if data contains `block`, `inlineBlock`, `inlineItem` or `itemLink` nodes | Array of tuples formed by a predicate function and custom component                              | `[]`    |

package/package/components/StructuredText/StructuredText.svelte

@@ -10,10 +10,12 @@ $:
   node = !data ? null : isStructuredText(data) && isDocument(data.value) ? data.value.document : isDocument(data) ? data.document : isNode(data) ? data : void 0;
 $:
   blocks = isStructuredText(data) ? data?.blocks : void 0;
+$:
+  inlineBlocks = isStructuredText(data) ? data?.inlineBlocks : void 0;
 $:
   links = isStructuredText(data) ? data?.links : void 0;
 </script>
 
 {#if node}
-	<Node {node} {blocks} {links} {components} />
+	<Node {node} {blocks} {inlineBlocks} {links} {components} />
 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@datocms/svelte",
-	"version": "4.2.0",
+	"version": "4.2.2",
 	"description": "A set of components and utilities to work faster with DatoCMS in Svelte",
 	"license": "MIT",
 	"repository": {
@@ -19,7 +19,7 @@
 		"prepublishOnly": "npm run build",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test:unit": "vitest",
+		"test:unit": "vitest --run",
 		"test": "npm run test:unit",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "npm run toc && prettier --plugin-search-dir . --write .",
@@ -46,7 +46,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
 		"@typescript-eslint/parser": "^5.62.0",
 		"csstype": "^3.1.3",
-		"datocms-structured-text-generic-html-renderer": "^4.1.2",
+		"datocms-structured-text-generic-html-renderer": "^5.0.0",
 		"doctoc": "^2.0.0",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^8.10.0",
@@ -66,7 +66,7 @@
 	"type": "module",
 	"dependencies": {
 		"datocms-listen": "^0.1.15",
-		"datocms-structured-text-utils": "^4.1.2",
+		"datocms-structured-text-utils": "^5.0.0",
 		"svelte-intersection-observer": "^1.0.0"
 	},
 	"exports": {