@datocms/svelte 1.2.2 → 1.3.0

package/package/components/Image/Source.svelte

@@ -0,0 +1,6 @@
+<script>export let srcset;
+export let sizes;
+export let type = null;
+</script>
+
+<source {srcset} {sizes} {type} />

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        srcset: string | null;
+        sizes: string | null;
+        type?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SourceProps = typeof __propDef.props;
+export type SourceEvents = typeof __propDef.events;
+export type SourceSlots = typeof __propDef.slots;
+export default class Source extends SvelteComponentTyped<SourceProps, SourceEvents, SourceSlots> {
+}
+export {};

package/package/components/StructuredText/Node.svelte

@@ -0,0 +1,112 @@
+<script context="module">import {
+  isBlock,
+  isBlockquote,
+  isCode,
+  isHeading,
+  isInlineItem,
+  isItemLink,
+  isLink,
+  isList,
+  isListItem,
+  isParagraph,
+  isRoot,
+  isSpan,
+  isThematicBreak,
+  RenderError
+} from "datocms-structured-text-utils";
+import Paragraph from "./nodes/Paragraph.svelte";
+import Root from "./nodes/Root.svelte";
+import Span from "./nodes/Span.svelte";
+import Link from "./nodes/Link.svelte";
+import List from "./nodes/List.svelte";
+import Heading from "./nodes/Heading.svelte";
+import Blockquote from "./nodes/Blockquote.svelte";
+import ListItem from "./nodes/ListItem.svelte";
+import ThematicBreak from "./nodes/ThematicBreak.svelte";
+import Code from "./nodes/Code.svelte";
+export const DEFAULT_COMPONENTS = [
+  [isParagraph, Paragraph],
+  [isRoot, Root],
+  [isSpan, Span],
+  [isLink, Link],
+  [isList, List],
+  [isHeading, Heading],
+  [isBlockquote, Blockquote],
+  [isListItem, ListItem],
+  [isThematicBreak, ThematicBreak],
+  [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
+    );
+  }
+};
+const throwRenderErrorForMissingBlock = (node) => {
+  throw new RenderError(
+    `The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside data.blocks!`,
+    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!`,
+    node
+  );
+};
+const findBlock = (node, blocks) => (blocks || []).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 links;
+export let components = [];
+$:
+  block = isBlock(node) && (findBlock(node, blocks) || throwRenderErrorForMissingBlock(node));
+$:
+  link = isItemLink(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node)) || isInlineItem(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node));
+$:
+  predicateComponentTuple = [...components, ...DEFAULT_COMPONENTS].find(([predicate, component2]) => predicate(node)) || throwRenderErrorForMissingComponent(node);
+$:
+  component = (predicateComponentTuple ?? [])[1];
+</script>
+
+{#if component}
+	{#if isBlock(node)}
+		<svelte:component this={component} {node} {block} />
+	{: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} />
+				{/each}
+			{/if}
+		</svelte:component>
+	{:else}
+		<svelte:component this={component} {node}>
+			{#if hasChildren(node)}
+				{#each node.children as child}
+					<svelte:self node={child} {blocks} {links} {components} />
+				{/each}
+			{/if}
+		</svelte:component>
+	{/if}
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+export declare const DEFAULT_COMPONENTS: PredicateComponentTuple[];
+import { type Node, type StructuredText } from 'datocms-structured-text-utils';
+import type { PredicateComponentTuple } from '../..';
+declare const __propDef: {
+    props: {
+        node: Node;
+        blocks: StructuredText['blocks'];
+        links: StructuredText['links'];
+        components?: PredicateComponentTuple[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NodeProps = typeof __propDef.props;
+export type NodeEvents = typeof __propDef.events;
+export type NodeSlots = typeof __propDef.slots;
+export default class Node extends SvelteComponentTyped<NodeProps, NodeEvents, NodeSlots> {
+}
+export {};

package/package/components/StructuredText/README.md

@@ -0,0 +1,201 @@
+# Structured text
+
+`StructuredText />` is a Svelte component that you can use to render the value contained inside a DatoCMS [Structured Text field type](https://www.datocms.com/docs/structured-text/dast).
+
+### Table of contents
+
+- [Setup](#setup)
+- [Basic usage](#basic-usage)
+- [Custom renderers](#custom-renderers)
+- [Props](#props)
+
+### Setup
+
+Import the component like this:
+
+```js
+import { StructuredText } from '@datocms/svelte';
+```
+
+## Basic usage
+
+```svelte
+<script>
+
+import { onMount } from 'svelte';
+
+import { StructuredText } from '@datocms/svelte';
+
+const query = `
+  query {
+    blogPost {
+      title
+      content {
+        value
+      }
+    }
+  }
+`;
+
+export let data = null;
+
+onMount(async () => {
+  const response = await fetch('https://graphql.datocms.com/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: "Bearer faeb9172e232a75339242faafb9e56de8c8f13b735f7090964",
+    },
+    body: JSON.stringify({ query })
+  })
+
+  const json = await response.json()
+
+  data = json.data;
+});
+
+</script>
+
+<article>
+  {#if data}
+    <h1>{{ data.blogPost.title }}</h1>
+    <StructuredText data={data.blogPost.content} />
+  {/if}
+</article>
+```
+
+## Customization
+
+The `<StructuredText />` component comes with a set of default components that are use to render all the nodes present in [DatoCMS Dast trees](https://www.datocms.com/docs/structured-text/dast). These default components are enough to cover most of the simple cases.
+
+You need to use custom components in the following cases:
+
+- you have to render blocks, inline items or item links: there's no conventional way of rendering theses nodes, so you must create and pass custom components;
+- you need to render a conventional node differently (e.g. you may want a custom render for blockquotes)
+
+### 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.
+
+```svelte
+<script>
+
+import { onMount } from 'svelte';
+
+import { isBlock, isInlineItem, isItemLink } from 'datocms-structured-text-utils';
+
+import { StructuredText } from '@datocms/svelte';
+
+import Block from './Block.svelte';
+import InlineItem from './InlineItem.svelte';
+import ItemLink from './ItemLink.svelte';
+
+const query = `
+  query {
+    blogPost {
+      title
+      content {
+        value
+        links {
+          __typename
+          ... on TeamMemberRecord {
+            id
+            firstName
+            slug
+          }
+        }
+        blocks {
+          __typename
+          ... on ImageRecord {
+            id
+            image {
+              responsiveImage(
+                imgixParams: { fit: crop, w: 300, h: 300, auto: format }
+              ) {
+                srcSet
+                webpSrcSet
+                sizes
+                src
+                width
+                height
+                aspectRatio
+                alt
+                title
+                base64
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export let data = null;
+
+onMount(async () => {
+  const response = await fetch('https://graphql.datocms.com/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: "Bearer faeb9172e232a75339242faafb9e56de8c8f13b735f7090964",
+    },
+    body: JSON.stringify({ query })
+  })
+
+  const json = await response.json()
+
+  data = json.data;
+});
+
+</script>
+
+<article>
+  {#if data}
+    <h1>{{ data.blogPost.title }}</h1>
+    <datocms-structured-text
+      data={data.blogPost.content}
+      components={[
+        [isInlineItem, InlineItem],
+        [isItemLink, ItemLink],
+        [isBlock, Block]
+      ]}
+    />
+  {/if}
+</article>
+```
+
+### 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:
+
+- For `heading` nodes, you might want to add an anchor;
+- For `code` nodes, you might want to use a custom syntax highlighting component;
+
+In this case, you can easily override default rendering rules with the `components` props. See test fixtures for example implementations of custom components (e.g. [this special heading component](https://github.com/datocms/datocms-svelte/blob/main/src/lib/components/StructuredText/__tests__/__fixtures__/IncreasedLevelHeading.svelte)).
+
+```svelte
+<script>
+	import { isHeading, isCode } from 'datocms-structured-text-utils';
+
+	import Heading from './Heading.svelte';
+	import Code from './Code.svelte';
+
+	export let data;
+</script>
+
+<StructuredText
+	data={data.blogPost.content}
+	components={[
+		[isHeading, Heading],
+		[isCode, Code]
+	]}
+/>
+```
+
+## 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`, `inline_item` or `item_link` nodes | Array of tuples formed by a predicate function and custom component                              | `[]`    |

package/package/components/StructuredText/StructuredText.svelte

@@ -0,0 +1,15 @@
+<script>import { isStructuredText } from "datocms-structured-text-utils";
+import Node from "./Node.svelte";
+export let data = null;
+export let components = [];
+$:
+  node = data != null && (isStructuredText(data) ? data.value : data).document;
+$:
+  blocks = isStructuredText(data) ? data?.blocks : void 0;
+$:
+  links = isStructuredText(data) ? data?.links : void 0;
+</script>
+
+{#if node}
+	<Node {node} {blocks} {links} {components} />
+{/if}

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import { type StructuredText, type Document } from 'datocms-structured-text-utils';
+import type { PredicateComponentTuple } from '../..';
+declare const __propDef: {
+    props: {
+        /** The actual field value you get from DatoCMS **/ data?: StructuredText | Document | null | undefined;
+        components?: PredicateComponentTuple[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StructuredTextProps = typeof __propDef.props;
+export type StructuredTextEvents = typeof __propDef.events;
+export type StructuredTextSlots = typeof __propDef.slots;
+export default class StructuredText extends SvelteComponentTyped<StructuredTextProps, StructuredTextEvents, StructuredTextSlots> {
+}
+export {};

package/package/components/StructuredText/nodes/Blockquote.svelte

@@ -0,0 +1,5 @@
+<script>export let node;
+node;
+</script>
+
+<blockquote><slot /></blockquote>

package/package/components/StructuredText/nodes/Blockquote.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Blockquote } from 'datocms-structured-text-utils';
+declare const __propDef: {
+    props: {
+        node: Blockquote;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BlockquoteProps = typeof __propDef.props;
+export type BlockquoteEvents = typeof __propDef.events;
+export type BlockquoteSlots = typeof __propDef.slots;
+export default class Blockquote extends SvelteComponentTyped<BlockquoteProps, BlockquoteEvents, BlockquoteSlots> {
+}
+export {};

package/package/components/StructuredText/nodes/Code.svelte

@@ -0,0 +1,6 @@
+<script>export let node;
+$:
+  ({ code, language } = node);
+</script>
+
+<pre class={language}>{code}</pre>

package/package/components/StructuredText/nodes/Code.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Code } from 'datocms-structured-text-utils';
+declare const __propDef: {
+    props: {
+        node: Code;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CodeProps = typeof __propDef.props;
+export type CodeEvents = typeof __propDef.events;
+export type CodeSlots = typeof __propDef.slots;
+export default class Code extends SvelteComponentTyped<CodeProps, CodeEvents, CodeSlots> {
+}
+export {};

package/package/components/StructuredText/nodes/Heading.svelte

@@ -0,0 +1,8 @@
+<script>export let node;
+$:
+  ({ level = 1 } = node);
+$:
+  element = `h${level}`;
+</script>
+
+<svelte:element this={element}><slot /></svelte:element>

package/package/components/StructuredText/nodes/Heading.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Heading } from 'datocms-structured-text-utils';
+declare const __propDef: {
+    props: {
+        node: Heading;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HeadingProps = typeof __propDef.props;
+export type HeadingEvents = typeof __propDef.events;
+export type HeadingSlots = typeof __propDef.slots;
+export default class Heading extends SvelteComponentTyped<HeadingProps, HeadingEvents, HeadingSlots> {
+}
+export {};

package/package/components/StructuredText/nodes/Link.svelte

@@ -0,0 +1,20 @@
+<script>export let node;
+$:
+  ({ url, meta } = node);
+let target = void 0;
+$: {
+  const targetMetaEntry = meta?.find((metaEntry) => metaEntry.id === "target");
+  if (targetMetaEntry?.value) {
+    target = targetMetaEntry.value;
+  }
+}
+let rel = void 0;
+$: {
+  const relMetaEntry = meta?.find((metaEntry) => metaEntry.id === "rel");
+  if (relMetaEntry?.value) {
+    rel = relMetaEntry.value;
+  }
+}
+</script>
+
+<a href={url} {target} {rel}><slot /></a>

package/package/components/StructuredText/nodes/Link.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Link } from 'datocms-structured-text-utils';
+declare const __propDef: {
+    props: {
+        node: Link;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
+}
+export {};

package/package/components/StructuredText/nodes/List.svelte

@@ -0,0 +1,10 @@
+<script>export let node;
+$:
+  ({ style } = node);
+</script>
+
+{#if style === 'numbered'}
+	<ol><slot /></ol>
+{:else}
+	<ul><slot /></ul>
+{/if}

package/package/components/StructuredText/nodes/List.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { List } from 'datocms-structured-text-utils';
+declare const __propDef: {
+    props: {
+        node: List;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/package/components/StructuredText/nodes/ListItem.svelte

@@ -0,0 +1,5 @@
+<script>export let node;
+node;
+</script>
+
+<li><slot /></li>

package/package/components/StructuredText/nodes/ListItem.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ListItem } from 'datocms-structured-text-utils';
+declare const __propDef: {
+    props: {
+        node: ListItem;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ListItemProps = typeof __propDef.props;
+export type ListItemEvents = typeof __propDef.events;
+export type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

package/package/components/StructuredText/nodes/Paragraph.svelte

@@ -0,0 +1,5 @@
+<script>export let node;
+node;
+</script>
+
+<p><slot /></p>

package/package/components/StructuredText/nodes/Paragraph.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Paragraph } from 'datocms-structured-text-utils';
+declare const __propDef: {
+    props: {
+        node: Paragraph;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ParagraphProps = typeof __propDef.props;
+export type ParagraphEvents = typeof __propDef.events;
+export type ParagraphSlots = typeof __propDef.slots;
+export default class Paragraph extends SvelteComponentTyped<ParagraphProps, ParagraphEvents, ParagraphSlots> {
+}
+export {};

package/package/components/StructuredText/nodes/Root.svelte

@@ -0,0 +1,5 @@
+<script>export let node;
+node;
+</script>
+
+<slot />

package/package/components/StructuredText/nodes/Root.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Root } from 'datocms-structured-text-utils';
+declare const __propDef: {
+    props: {
+        node: Root;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RootProps = typeof __propDef.props;
+export type RootEvents = typeof __propDef.events;
+export type RootSlots = typeof __propDef.slots;
+export default class Root extends SvelteComponentTyped<RootProps, RootEvents, RootSlots> {
+}
+export {};