@datocms/svelte 1.2.1 → 1.2.2

package/components/StructuredText/Node.svelte

@@ -1,112 +0,0 @@
-<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/components/StructuredText/Node.svelte.d.ts

@@ -1,22 +0,0 @@
-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/components/StructuredText/README.md

@@ -1,201 +0,0 @@
-# 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/components/StructuredText/StructuredText.svelte

@@ -1,15 +0,0 @@
-<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/components/StructuredText/StructuredText.svelte.d.ts

@@ -1,19 +0,0 @@
-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<import("datocms-structured-text-utils").Record, import("datocms-structured-text-utils").Record> | 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/components/StructuredText/__tests__/StructuredText.svelte.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/components/StructuredText/__tests__/StructuredText.svelte.test.js

@@ -1,171 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/svelte';
-import { isBlock, isHeading, isInlineItem, isItemLink, isSpan } from 'datocms-structured-text-utils';
-import { StructuredText } from '../../..';
-import { heading, paragraphWithLink, structuredTextWithBlocksAndLinks } from './__fixtures__/structuredText';
-import CustomSpan from './__fixtures__/CustomSpan.svelte';
-import IncreasedLevelHeading from './__fixtures__/IncreasedLevelHeading.svelte';
-import ItemLink from './__fixtures__/ItemLink.svelte';
-import Block from './__fixtures__/Block.svelte';
-import InlineItem from './__fixtures__/InlineItem.svelte';
-describe('StructuredText', () => {
-    describe('with no value', () => {
-        it('renders null', () => {
-            const { container } = render(StructuredText, { props: { data: null } });
-            expect(container).toMatchSnapshot();
-        });
-    });
-    describe('with a very simple pure dast (only the `value` of a structured text)', () => {
-        describe('with default rules', () => {
-            it('renders the document', () => {
-                const { container } = render(StructuredText, { props: { data: heading.value } });
-                expect(container).toMatchSnapshot();
-            });
-        });
-        describe('with custom mark rules', () => {
-            it('renders the document', () => {
-                const { container } = render(StructuredText, {
-                    props: { data: heading, components: [[isSpan, CustomSpan]] }
-                });
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-    describe('with a very simple dast', () => {
-        describe('with default rules', () => {
-            it('renders the document', () => {
-                const { container } = render(StructuredText, { props: { data: heading } });
-                expect(container).toMatchSnapshot();
-            });
-        });
-        describe('with custom mark rules', () => {
-            it('renders the document', () => {
-                const { container } = render(StructuredText, {
-                    props: { data: heading, components: [[isSpan, CustomSpan]] }
-                });
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-    describe('with a dast which has a link inside', () => {
-        describe('with default rules', () => {
-            it('renders the document', () => {
-                const { container } = render(StructuredText, { props: { data: paragraphWithLink } });
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-    describe('with a dast with no links nor blocks', () => {
-        describe('with default rules', () => {
-            it('renders the document', () => {
-                const { container } = render(StructuredText, {
-                    props: { data: heading }
-                });
-                expect(container).toMatchSnapshot();
-            });
-        });
-        describe('with custom rules', () => {
-            it('renders the document', () => {
-                const { container } = render(StructuredText, {
-                    props: { data: heading, components: [[isHeading, IncreasedLevelHeading]] }
-                });
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-    describe('with a dast including links and blocks', () => {
-        describe('with default rules', () => {
-            it('renders the document', () => {
-                const { container } = render(StructuredText, {
-                    props: {
-                        data: structuredTextWithBlocksAndLinks,
-                        components: [
-                            [isInlineItem, InlineItem],
-                            [isItemLink, ItemLink],
-                            [isBlock, Block]
-                        ]
-                    }
-                });
-                expect(container).toMatchSnapshot();
-            });
-        });
-        describe('with missing component for item links', () => {
-            it('raises an error', () => {
-                expect(() => {
-                    render(StructuredText, {
-                        props: {
-                            data: structuredTextWithBlocksAndLinks,
-                            components: [
-                                [isBlock, Block],
-                                [isInlineItem, InlineItem]
-                            ]
-                        }
-                    });
-                }).toThrowErrorMatchingSnapshot();
-            });
-        });
-        describe('with missing component for inline items', () => {
-            it('raises an error', () => {
-                expect(() => {
-                    render(StructuredText, {
-                        props: {
-                            data: structuredTextWithBlocksAndLinks,
-                            components: [
-                                [isBlock, Block],
-                                [isItemLink, ItemLink]
-                            ]
-                        }
-                    });
-                }).toThrowErrorMatchingSnapshot();
-            });
-        });
-        describe('with missing links', () => {
-            it('raises an error', () => {
-                expect(() => {
-                    render(StructuredText, {
-                        props: {
-                            data: { ...structuredTextWithBlocksAndLinks, links: [] },
-                            components: [
-                                [isBlock, Block],
-                                [isInlineItem, InlineItem],
-                                [isItemLink, ItemLink]
-                            ]
-                        }
-                    });
-                }).toThrowErrorMatchingSnapshot();
-            });
-        });
-        describe('with missing component for blocks', () => {
-            it('raises an error', () => {
-                expect(() => {
-                    render(StructuredText, {
-                        props: {
-                            data: structuredTextWithBlocksAndLinks,
-                            components: [
-                                [isInlineItem, InlineItem],
-                                [isItemLink, ItemLink]
-                            ]
-                        }
-                    });
-                }).toThrowErrorMatchingSnapshot();
-            });
-        });
-        describe('with missing blocks', () => {
-            it('raises an error', () => {
-                expect(() => {
-                    render(StructuredText, {
-                        props: {
-                            data: { ...structuredTextWithBlocksAndLinks, blocks: [] },
-                            components: [
-                                [isBlock, Block],
-                                [isInlineItem, InlineItem],
-                                [isItemLink, ItemLink]
-                            ]
-                        }
-                    });
-                }).toThrowErrorMatchingSnapshot();
-            });
-        });
-    });
-});

package/components/StructuredText/__tests__/__fixtures__/Block.svelte

@@ -1,11 +0,0 @@
-<script>import { isBlock } from "datocms-structured-text-utils";
-export let node;
-export let block;
-</script>
-
-{#if block.__typename == 'QuoteRecord' && isBlock(node)}
-	<figure>
-		<blockquote>{block.quote}</blockquote>
-		<figcaption>{block.author}</figcaption>
-	</figure>
-{/if}

package/components/StructuredText/__tests__/__fixtures__/Block.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type Block } from 'datocms-structured-text-utils';
-import type { QuoteRecord } from './types';
-declare const __propDef: {
-    props: {
-        node: Block;
-        block: QuoteRecord;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BlockProps = typeof __propDef.props;
-export type BlockEvents = typeof __propDef.events;
-export type BlockSlots = typeof __propDef.slots;
-export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
-}
-export {};

package/components/StructuredText/__tests__/__fixtures__/CustomSpan.svelte

@@ -1,49 +0,0 @@
-<script>import Lines from "../../utils/Lines.svelte";
-export let node;
-$:
-  ({ type, value, marks } = node);
-$:
-  [mark, ...otherMarks] = marks ?? [];
-</script>
-
-{#if mark}
-	{#if mark === 'emphasis'}
-		<em>
-			<svelte:self node={{ type, value, marks: otherMarks }}>
-				<slot />
-			</svelte:self>
-		</em>
-	{:else if mark === 'highlight'}
-		<mark>
-			<svelte:self node={{ type, value, marks: otherMarks }}>
-				<slot />
-			</svelte:self>
-		</mark>
-	{:else if mark === 'strikethrough'}
-		<del>
-			<svelte:self node={{ type, value, marks: otherMarks }}>
-				<slot />
-			</svelte:self>
-		</del>
-	{:else if mark === 'strong'}
-		<b>
-			<svelte:self node={{ type, value, marks: otherMarks }}>
-				<slot />
-			</svelte:self>
-		</b>
-	{:else if mark === 'underline'}
-		<u>
-			<svelte:self node={{ type, value, marks: otherMarks }}>
-				<slot />
-			</svelte:self>
-		</u>
-	{:else if mark === 'code'}
-		<pre>
-			<svelte:self node={{ type, value, marks: otherMarks }}>
-				<slot />
-			</svelte:self> 
-		</pre>
-	{/if}
-{:else}
-	<Lines lines={node.value.split(/\n/)} />
-{/if}

package/components/StructuredText/__tests__/__fixtures__/CustomSpan.svelte.d.ts

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

package/components/StructuredText/__tests__/__fixtures__/IncreasedLevelHeading.svelte

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

package/components/StructuredText/__tests__/__fixtures__/IncreasedLevelHeading.svelte.d.ts

@@ -1,19 +0,0 @@
-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 IncreasedLevelHeadingProps = typeof __propDef.props;
-export type IncreasedLevelHeadingEvents = typeof __propDef.events;
-export type IncreasedLevelHeadingSlots = typeof __propDef.slots;
-export default class IncreasedLevelHeading extends SvelteComponentTyped<IncreasedLevelHeadingProps, IncreasedLevelHeadingEvents, IncreasedLevelHeadingSlots> {
-}
-export {};

package/components/StructuredText/__tests__/__fixtures__/InlineItem.svelte

@@ -1,8 +0,0 @@
-<script>import { isInlineItem } from "datocms-structured-text-utils";
-export let node;
-export let link;
-</script>
-
-{#if link.__typename == 'DocPageRecord' && isInlineItem(node)}
-	<a href={`/docs/${link.slug}`}>{link.title}</a>;
-{/if}