@prismicio/svelte 2.2.2 → 2.2.3-pr.64.25522e1

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.
Files changed (50) hide show
  1. package/dist/PrismicEmbed.svelte +6 -8
  2. package/dist/PrismicEmbed.svelte.d.ts +1 -3
  3. package/dist/PrismicImage.svelte +46 -68
  4. package/dist/PrismicImage.svelte.d.ts +11 -17
  5. package/dist/PrismicLink.svelte +23 -34
  6. package/dist/PrismicLink.svelte.d.ts +5 -10
  7. package/dist/PrismicRichText/DefaultComponent.svelte +9 -13
  8. package/dist/PrismicRichText/PrismicRichText.svelte +11 -16
  9. package/dist/PrismicRichText/PrismicRichText.svelte.d.ts +2 -6
  10. package/dist/PrismicRichText/Serialize.svelte +11 -19
  11. package/dist/PrismicTable.svelte +26 -41
  12. package/dist/PrismicTable.svelte.d.ts +4 -8
  13. package/dist/PrismicText.svelte +16 -20
  14. package/dist/PrismicText.svelte.d.ts +4 -8
  15. package/dist/SliceSimulator.svelte +31 -18
  16. package/dist/SliceSimulator.svelte.d.ts +13 -34
  17. package/dist/SliceZone/SliceZone.svelte +21 -26
  18. package/dist/SliceZone/SliceZone.svelte.d.ts +12 -16
  19. package/dist/SliceZone/TodoComponent.svelte +7 -7
  20. package/dist/index.d.ts +1 -3
  21. package/dist/kit/PrismicPreview.svelte +38 -52
  22. package/dist/kit/PrismicPreview.svelte.d.ts +5 -9
  23. package/dist/kit/enableAutoPreviews.d.ts +5 -10
  24. package/dist/kit/enableAutoPreviews.js +1 -2
  25. package/dist/kit/redirectToPreviewURL.d.ts +13 -21
  26. package/dist/kit/redirectToPreviewURL.js +10 -11
  27. package/dist/kit/types.d.ts +3 -6
  28. package/dist/lib/devMsg.d.ts +6 -8
  29. package/dist/lib/devMsg.js +6 -8
  30. package/dist/types.d.ts +23 -39
  31. package/package.json +43 -46
  32. package/src/PrismicEmbed.svelte +6 -8
  33. package/src/PrismicImage.svelte +46 -68
  34. package/src/PrismicLink.svelte +23 -34
  35. package/src/PrismicRichText/DefaultComponent.svelte +9 -13
  36. package/src/PrismicRichText/PrismicRichText.svelte +11 -16
  37. package/src/PrismicRichText/Serialize.svelte +11 -19
  38. package/src/PrismicTable.svelte +26 -41
  39. package/src/PrismicText.svelte +16 -20
  40. package/src/SliceSimulator.svelte +31 -18
  41. package/src/SliceZone/SliceZone.svelte +21 -26
  42. package/src/SliceZone/TodoComponent.svelte +7 -7
  43. package/src/index.ts +13 -15
  44. package/src/kit/PrismicPreview.svelte +38 -52
  45. package/src/kit/enableAutoPreviews.ts +14 -19
  46. package/src/kit/index.ts +6 -6
  47. package/src/kit/redirectToPreviewURL.ts +28 -38
  48. package/src/kit/types.ts +7 -10
  49. package/src/lib/devMsg.ts +9 -11
  50. package/src/types.ts +84 -106
@@ -1,15 +1,13 @@
1
1
  <script lang="ts">
2
- import type { EmbedField } from "@prismicio/client";
3
- import { isFilled } from "@prismicio/client";
2
+ import type { EmbedField } from "@prismicio/client"
3
+ import { isFilled } from "@prismicio/client"
4
4
 
5
5
  type Props = {
6
- /**
7
- * An Embed field from Prismic.
8
- */
9
- field: EmbedField;
10
- };
6
+ /** An Embed field from Prismic. */
7
+ field: EmbedField
8
+ }
11
9
 
12
- const { field }: Props = $props();
10
+ const { field }: Props = $props()
13
11
  </script>
14
12
 
15
13
  <!--
@@ -1,8 +1,6 @@
1
1
  import type { EmbedField } from "@prismicio/client";
2
2
  type Props = {
3
- /**
4
- * An Embed field from Prismic.
5
- */
3
+ /** An Embed field from Prismic. */
6
4
  field: EmbedField;
7
5
  };
8
6
  /**
@@ -1,75 +1,61 @@
1
1
  <script lang="ts">
2
- import {
3
- asImagePixelDensitySrcSet,
4
- asImageWidthSrcSet,
5
- isFilled,
6
- } from "@prismicio/client";
7
- import type { ImageFieldImage } from "@prismicio/client";
8
- import type { ImgixURLParams } from "imgix-url-builder";
9
- import type { HTMLImgAttributes } from "svelte/elements";
2
+ import { asImagePixelDensitySrcSet, asImageWidthSrcSet, isFilled } from "@prismicio/client"
3
+ import type { ImageFieldImage } from "@prismicio/client"
4
+ import type { ImgixURLParams } from "imgix-url-builder"
5
+ import type { HTMLImgAttributes } from "svelte/elements"
10
6
 
11
7
  type Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {
12
- /**
13
- * The Prismic image field or thumbnail to render.
14
- */
15
- field: ImageFieldImage | null | undefined;
8
+ /** The Prismic image field or thumbnail to render. */
9
+ field: ImageFieldImage | null | undefined
16
10
 
17
11
  /**
18
12
  * An object of Imgix URL API parameters to transform the image.
19
13
  *
20
14
  * See: https://docs.imgix.com/apis/rendering
21
15
  */
22
- imgixParams?: ImgixURLParams;
16
+ imgixParams?: ImgixURLParams
23
17
 
24
18
  /**
25
19
  * Declare an image as decorative by providing `alt=""`.
26
20
  *
27
- * See:
28
- * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
21
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
29
22
  */
30
- alt?: "";
23
+ alt?: ""
31
24
 
32
25
  /**
33
- * Declare an image as decorative only if the Image field does not have
34
- * alternative text by providing `fallbackAlt=""`.
26
+ * Declare an image as decorative only if the Image field does not have alternative text by
27
+ * providing `fallbackAlt=""`.
35
28
  *
36
- * See:
37
- * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
29
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
38
30
  */
39
- fallbackAlt?: "";
31
+ fallbackAlt?: ""
40
32
  } & (
41
33
  | {
42
34
  /**
43
35
  * Widths used to build a `srcset` value for the Image field.
44
36
  *
45
- * If a `widths` prop is not given or `"defaults"` is passed, the
46
- * following widths will be used: 640, 750, 828, 1080, 1200, 1920,
47
- * 2048, 3840.
37
+ * If a `widths` prop is not given or `"defaults"` is passed, the following widths will be
38
+ * used: 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
48
39
  *
49
- * If the Image field contains responsive views, each responsive view
50
- * can be used as a width in the resulting `srcset` by passing
51
- * `"thumbnails"` as the `widths` prop.
40
+ * If the Image field contains responsive views, each responsive view can be used as a
41
+ * width in the resulting `srcset` by passing `"thumbnails"` as the `widths` prop.
52
42
  */
53
- widths?:
54
- | NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
55
- | "defaults";
56
- pixelDensities?: never;
43
+ widths?: NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"] | "defaults"
44
+ pixelDensities?: never
57
45
  }
58
46
  | {
59
47
  /**
60
48
  * Pixel densities used to build a `srcset` value for the Image field.
61
49
  *
62
- * If a `pixelDensities` prop is passed `"defaults"`, the following
63
- * pixel densities will be used: 1, 2, 3.
50
+ * If a `pixelDensities` prop is passed `"defaults"`, the following pixel densities will
51
+ * be used: 1, 2, 3.
64
52
  */
65
53
  pixelDensities:
66
- | NonNullable<
67
- Parameters<typeof asImagePixelDensitySrcSet>[1]
68
- >["pixelDensities"]
69
- | "defaults";
70
- widths?: never;
54
+ | NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>["pixelDensities"]
55
+ | "defaults"
56
+ widths?: never
71
57
  }
72
- );
58
+ )
73
59
 
74
60
  const {
75
61
  field,
@@ -81,59 +67,51 @@
81
67
  widths,
82
68
  pixelDensities,
83
69
  ...restProps
84
- }: Props = $props();
70
+ }: Props = $props()
85
71
 
86
72
  const { resolvedWidth, resolvedHeight } = $derived.by(() => {
87
73
  if (!isFilled.imageThumbnail(field))
88
- return { resolvedWidth: undefined, resolvedHeight: undefined };
74
+ return { resolvedWidth: undefined, resolvedHeight: undefined }
89
75
 
90
- const ar = field.dimensions.width / field.dimensions.height;
76
+ const ar = field.dimensions.width / field.dimensions.height
91
77
 
92
- let resolvedWidth = castInt(width) ?? field.dimensions.width;
93
- let resolvedHeight = castInt(height) ?? field.dimensions.height;
78
+ let resolvedWidth = castInt(width) ?? field.dimensions.width
79
+ let resolvedHeight = castInt(height) ?? field.dimensions.height
94
80
  if (resolvedWidth != null && resolvedHeight == null) {
95
- resolvedHeight = resolvedWidth / ar;
81
+ resolvedHeight = resolvedWidth / ar
96
82
  } else if (resolvedWidth == null && resolvedHeight != null) {
97
- resolvedWidth = resolvedHeight * ar;
83
+ resolvedWidth = resolvedHeight * ar
98
84
  }
99
85
 
100
- return { resolvedWidth, resolvedHeight };
101
- });
86
+ return { resolvedWidth, resolvedHeight }
87
+ })
102
88
 
103
89
  const { src, srcset } = $derived.by(() => {
104
- if (!isFilled.imageThumbnail(field))
105
- return { src: undefined, srcset: undefined };
90
+ if (!isFilled.imageThumbnail(field)) return { src: undefined, srcset: undefined }
106
91
 
107
92
  if (pixelDensities) {
108
93
  return asImagePixelDensitySrcSet(field, {
109
94
  ...imgixParams,
110
- pixelDensities:
111
- pixelDensities === "defaults" ? undefined : pixelDensities,
112
- } as ImgixURLParams);
95
+ pixelDensities: pixelDensities === "defaults" ? undefined : pixelDensities,
96
+ } as ImgixURLParams)
113
97
  }
114
98
 
115
99
  return asImageWidthSrcSet(field, {
116
100
  ...imgixParams,
117
101
  widths: widths === "defaults" ? undefined : widths,
118
- });
119
- });
120
-
121
- function castInt(
122
- input: string | number | null | undefined,
123
- ): number | null | undefined {
124
- if (
125
- typeof input === "number" ||
126
- typeof input === "undefined" ||
127
- input === null
128
- ) {
129
- return input;
102
+ })
103
+ })
104
+
105
+ function castInt(input: string | number | null | undefined): number | null | undefined {
106
+ if (typeof input === "number" || typeof input === "undefined" || input === null) {
107
+ return input
130
108
  } else {
131
- const parsed = Number.parseInt(input);
109
+ const parsed = Number.parseInt(input)
132
110
 
133
111
  if (Number.isNaN(parsed)) {
134
- return undefined;
112
+ return undefined
135
113
  } else {
136
- return parsed;
114
+ return parsed
137
115
  }
138
116
  }
139
117
  }
@@ -3,9 +3,7 @@ import type { ImageFieldImage } from "@prismicio/client";
3
3
  import type { ImgixURLParams } from "imgix-url-builder";
4
4
  import type { HTMLImgAttributes } from "svelte/elements";
5
5
  type Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {
6
- /**
7
- * The Prismic image field or thumbnail to render.
8
- */
6
+ /** The Prismic image field or thumbnail to render. */
9
7
  field: ImageFieldImage | null | undefined;
10
8
  /**
11
9
  * An object of Imgix URL API parameters to transform the image.
@@ -16,29 +14,25 @@ type Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {
16
14
  /**
17
15
  * Declare an image as decorative by providing `alt=""`.
18
16
  *
19
- * See:
20
- * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
17
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
21
18
  */
22
19
  alt?: "";
23
20
  /**
24
- * Declare an image as decorative only if the Image field does not have
25
- * alternative text by providing `fallbackAlt=""`.
21
+ * Declare an image as decorative only if the Image field does not have alternative text by
22
+ * providing `fallbackAlt=""`.
26
23
  *
27
- * See:
28
- * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
24
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
29
25
  */
30
26
  fallbackAlt?: "";
31
27
  } & ({
32
28
  /**
33
29
  * Widths used to build a `srcset` value for the Image field.
34
30
  *
35
- * If a `widths` prop is not given or `"defaults"` is passed, the
36
- * following widths will be used: 640, 750, 828, 1080, 1200, 1920,
37
- * 2048, 3840.
31
+ * If a `widths` prop is not given or `"defaults"` is passed, the following widths will be
32
+ * used: 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
38
33
  *
39
- * If the Image field contains responsive views, each responsive view
40
- * can be used as a width in the resulting `srcset` by passing
41
- * `"thumbnails"` as the `widths` prop.
34
+ * If the Image field contains responsive views, each responsive view can be used as a
35
+ * width in the resulting `srcset` by passing `"thumbnails"` as the `widths` prop.
42
36
  */
43
37
  widths?: NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"] | "defaults";
44
38
  pixelDensities?: never;
@@ -46,8 +40,8 @@ type Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {
46
40
  /**
47
41
  * Pixel densities used to build a `srcset` value for the Image field.
48
42
  *
49
- * If a `pixelDensities` prop is passed `"defaults"`, the following
50
- * pixel densities will be used: 1, 2, 3.
43
+ * If a `pixelDensities` prop is passed `"defaults"`, the following pixel densities will
44
+ * be used: 1, 2, 3.
51
45
  */
52
46
  pixelDensities: NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>["pixelDensities"] | "defaults";
53
47
  widths?: never;
@@ -1,56 +1,45 @@
1
1
  <script lang="ts">
2
- import { asLinkAttrs } from "@prismicio/client";
3
- import type {
4
- AsLinkAttrsConfig,
5
- LinkField,
6
- PrismicDocument,
7
- } from "@prismicio/client";
8
- import type { HTMLAnchorAttributes } from "svelte/elements";
2
+ import { asLinkAttrs } from "@prismicio/client"
3
+ import type { AsLinkAttrsConfig, LinkField, PrismicDocument } from "@prismicio/client"
4
+ import type { HTMLAnchorAttributes } from "svelte/elements"
9
5
 
10
6
  type Props = Omit<HTMLAnchorAttributes, "rel" | "href"> & {
11
7
  /**
12
- * The `rel` attribute for the link. By default, `"noreferrer"` is provided
13
- * if the link's URL is external. This prop can be provided a function to
14
- * use the link's metadata to determine the `rel` value.
8
+ * The `rel` attribute for the link. By default, `"noreferrer"` is provided if the link's URL is
9
+ * external. This prop can be provided a function to use the link's metadata to determine the
10
+ * `rel` value.
15
11
  */
16
- rel?: string | AsLinkAttrsConfig["rel"];
12
+ rel?: string | AsLinkAttrsConfig["rel"]
17
13
  } & (
18
14
  | {
19
- /**
20
- * A Prismic link field, content relationship field, or link to media
21
- * field.
22
- */
23
- field: LinkField | null | undefined;
24
- document?: never;
25
- href?: never;
15
+ /** A Prismic link field, content relationship field, or link to media field. */
16
+ field: LinkField | null | undefined
17
+ document?: never
18
+ href?: never
26
19
  }
27
20
  | {
28
- /**
29
- * A Prismic document.
30
- */
31
- document: PrismicDocument | null | undefined;
32
- field?: never;
33
- href?: never;
21
+ /** A Prismic document. */
22
+ document: PrismicDocument | null | undefined
23
+ field?: never
24
+ href?: never
34
25
  }
35
26
  | {
36
- href: HTMLAnchorAttributes["href"];
37
- document: never;
38
- field?: never;
27
+ href: HTMLAnchorAttributes["href"]
28
+ document: never
29
+ field?: never
39
30
  }
40
- );
31
+ )
41
32
 
42
- const { field, document, rel, children, ...restProps }: Props = $props();
33
+ const { field, document, rel, children, ...restProps }: Props = $props()
43
34
 
44
35
  const linkAttrs = $derived(
45
36
  asLinkAttrs(field ?? document, {
46
37
  rel: typeof rel === "function" ? rel : undefined,
47
38
  }),
48
- );
49
- const href = $derived(
50
- ("href" in restProps ? restProps.href : linkAttrs.href) || "",
51
- );
39
+ )
40
+ const href = $derived(("href" in restProps ? restProps.href : linkAttrs.href) || "")
52
41
 
53
- const resolvedRel = $derived(typeof rel === "string" ? rel : linkAttrs.rel);
42
+ const resolvedRel = $derived(typeof rel === "string" ? rel : linkAttrs.rel)
54
43
  </script>
55
44
 
56
45
  <!--
@@ -2,23 +2,18 @@ import type { AsLinkAttrsConfig, LinkField, PrismicDocument } from "@prismicio/c
2
2
  import type { HTMLAnchorAttributes } from "svelte/elements";
3
3
  type Props = Omit<HTMLAnchorAttributes, "rel" | "href"> & {
4
4
  /**
5
- * The `rel` attribute for the link. By default, `"noreferrer"` is provided
6
- * if the link's URL is external. This prop can be provided a function to
7
- * use the link's metadata to determine the `rel` value.
5
+ * The `rel` attribute for the link. By default, `"noreferrer"` is provided if the link's URL is
6
+ * external. This prop can be provided a function to use the link's metadata to determine the
7
+ * `rel` value.
8
8
  */
9
9
  rel?: string | AsLinkAttrsConfig["rel"];
10
10
  } & ({
11
- /**
12
- * A Prismic link field, content relationship field, or link to media
13
- * field.
14
- */
11
+ /** A Prismic link field, content relationship field, or link to media field. */
15
12
  field: LinkField | null | undefined;
16
13
  document?: never;
17
14
  href?: never;
18
15
  } | {
19
- /**
20
- * A Prismic document.
21
- */
16
+ /** A Prismic document. */
22
17
  document: PrismicDocument | null | undefined;
23
18
  field?: never;
24
19
  href?: never;
@@ -1,26 +1,22 @@
1
1
  <script lang="ts">
2
- import type { HTMLAttributes } from "svelte/elements";
2
+ import type { HTMLAttributes } from "svelte/elements"
3
3
 
4
- import type { RichTextComponentProps } from "../types";
4
+ import PrismicEmbed from "../PrismicEmbed.svelte"
5
+ import PrismicImage from "../PrismicImage.svelte"
6
+ import PrismicLink from "../PrismicLink.svelte"
7
+ import type { RichTextComponentProps } from "../types"
5
8
 
6
- import PrismicEmbed from "../PrismicEmbed.svelte";
7
- import PrismicImage from "../PrismicImage.svelte";
8
- import PrismicLink from "../PrismicLink.svelte";
9
+ type Props = RichTextComponentProps & HTMLAttributes<HTMLElement> & { as?: string }
9
10
 
10
- type Props = RichTextComponentProps &
11
- HTMLAttributes<HTMLElement> & { as?: string };
12
-
13
- const { node, children, as, ...attrs }: Props = $props();
11
+ const { node, children, as, ...attrs }: Props = $props()
14
12
 
15
13
  const dirProp = $derived(
16
14
  "direction" in node && node.direction === "rtl" ? { direction: "rtl" } : {},
17
- );
15
+ )
18
16
  </script>
19
17
 
20
18
  {#if as}
21
- <svelte:element this={as} {...dirProp} {...attrs} {...attrs}
22
- >{@render children()}</svelte:element
23
- >
19
+ <svelte:element this={as} {...dirProp} {...attrs} {...attrs}>{@render children()}</svelte:element>
24
20
  {:else if node.type === "heading1"}
25
21
  <h1 {...dirProp} {...attrs}>{@render children()}</h1>
26
22
  {:else if node.type === "heading2"}
@@ -1,26 +1,21 @@
1
1
  <script lang="ts">
2
- import type { RichTextField } from "@prismicio/client";
3
- import { asTree } from "@prismicio/client/richtext";
2
+ import type { RichTextField } from "@prismicio/client"
3
+ import { asTree } from "@prismicio/client/richtext"
4
4
 
5
- import type { RichTextComponents } from "../types";
6
-
7
- import Serialize from "./Serialize.svelte";
5
+ import type { RichTextComponents } from "../types"
6
+ import Serialize from "./Serialize.svelte"
8
7
 
9
8
  type Props = {
10
- /**
11
- * The Prismic rich text field to render.
12
- */
13
- field: RichTextField;
9
+ /** The Prismic rich text field to render. */
10
+ field: RichTextField
14
11
 
15
- /**
16
- * An object that maps a rich text block type to a Svelte component.
17
- */
18
- components?: RichTextComponents;
19
- };
12
+ /** An object that maps a rich text block type to a Svelte component. */
13
+ components?: RichTextComponents
14
+ }
20
15
 
21
- const { field, components = {} }: Props = $props();
16
+ const { field, components = {} }: Props = $props()
22
17
 
23
- const children = $derived(asTree(field).children);
18
+ const children = $derived(asTree(field).children)
24
19
  </script>
25
20
 
26
21
  <!--
@@ -1,13 +1,9 @@
1
1
  import type { RichTextField } from "@prismicio/client";
2
2
  import type { RichTextComponents } from "../types";
3
3
  type Props = {
4
- /**
5
- * The Prismic rich text field to render.
6
- */
4
+ /** The Prismic rich text field to render. */
7
5
  field: RichTextField;
8
- /**
9
- * An object that maps a rich text block type to a Svelte component.
10
- */
6
+ /** An object that maps a rich text block type to a Svelte component. */
11
7
  components?: RichTextComponents;
12
8
  };
13
9
  /**
@@ -1,34 +1,29 @@
1
1
  <script lang="ts">
2
- import type { asTree } from "@prismicio/client/richtext";
2
+ import type { asTree } from "@prismicio/client/richtext"
3
3
 
4
- import type {
5
- ComponentShorthand,
6
- RichTextComponent,
7
- RichTextComponents,
8
- } from "../types";
9
-
10
- import DefaultComponent from "./DefaultComponent.svelte";
11
- import Serialize from "./Serialize.svelte";
4
+ import type { ComponentShorthand, RichTextComponent, RichTextComponents } from "../types"
5
+ import DefaultComponent from "./DefaultComponent.svelte"
6
+ import Serialize from "./Serialize.svelte"
12
7
 
13
8
  type Props = {
14
- components: RichTextComponents;
15
- children: ReturnType<typeof asTree>["children"];
16
- };
9
+ components: RichTextComponents
10
+ children: ReturnType<typeof asTree>["children"]
11
+ }
17
12
 
18
- const { components, children }: Props = $props();
13
+ const { components, children }: Props = $props()
19
14
 
20
15
  const CHILD_TYPE_RENAMES = {
21
16
  "list-item": "listItem",
22
17
  "o-list-item": "oListItem",
23
18
  "group-list-item": "list",
24
19
  "group-o-list-item": "oList",
25
- } as const;
20
+ } as const
26
21
 
27
22
  function getComponent(child: ReturnType<typeof asTree>["children"][number]) {
28
23
  return components[
29
24
  CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
30
25
  (child.type as keyof typeof components)
31
- ] as RichTextComponent | ComponentShorthand;
26
+ ] as RichTextComponent | ComponentShorthand
32
27
  }
33
28
  </script>
34
29
 
@@ -36,10 +31,7 @@
36
31
  {@const Component = getComponent(child)}
37
32
  {#snippet serializedChildren()}
38
33
  <!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
39
- {#if child.children.length > 0}<Serialize
40
- children={child.children}
41
- {components}
42
- />{/if}
34
+ {#if child.children.length > 0}<Serialize children={child.children} {components} />{/if}
43
35
  {/snippet}
44
36
  {#if typeof Component === "function"}
45
37
  <Component node={child.node}>{@render serializedChildren()}</Component>
@@ -7,40 +7,35 @@
7
7
  TableFieldHead,
8
8
  TableFieldHeadRow,
9
9
  TableFieldHeaderCell,
10
- } from "@prismicio/client";
11
- import { isFilled } from "@prismicio/client";
12
- import type { Component } from "svelte";
10
+ } from "@prismicio/client"
11
+ import { isFilled } from "@prismicio/client"
12
+ import type { Component } from "svelte"
13
13
 
14
- import type { RichTextComponents, TableComponents } from "./types";
15
-
16
- import PrismicRichText from "./PrismicRichText/PrismicRichText.svelte";
14
+ import PrismicRichText from "./PrismicRichText/PrismicRichText.svelte"
15
+ import type { RichTextComponents, TableComponents } from "./types"
17
16
 
18
17
  type Props = {
19
- /**
20
- * The Prismic table field to render.
21
- */
22
- field: TableField;
18
+ /** The Prismic table field to render. */
19
+ field: TableField
23
20
 
24
- /**
25
- * An object that maps a rich text block type to a Svelte component.
26
- */
27
- components?: TableComponents & RichTextComponents;
21
+ /** An object that maps a rich text block type to a Svelte component. */
22
+ components?: TableComponents & RichTextComponents
28
23
 
29
24
  /**
30
- * The component rendered when the field is empty. If a fallback is not
31
- * given, `null` will be rendered.
25
+ * The component rendered when the field is empty. If a fallback is not given, `null` will be
26
+ * rendered.
32
27
  */
33
- fallback?: Component;
34
- };
28
+ fallback?: Component
29
+ }
35
30
 
36
- const { field, components = {}, fallback: Fallback }: Props = $props();
31
+ const { field, components = {}, fallback: Fallback }: Props = $props()
37
32
 
38
- const Table = components.table;
39
- const Thead = components.thead;
40
- const Tbody = components.tbody;
41
- const Tr = components.tr;
42
- const Th = components.th;
43
- const Td = components.td;
33
+ const Table = $derived(components.table)
34
+ const Thead = $derived(components.thead)
35
+ const Tbody = $derived(components.tbody)
36
+ const Tr = $derived(components.tr)
37
+ const Th = $derived(components.th)
38
+ const Td = $derived(components.td)
44
39
  </script>
45
40
 
46
41
  {#snippet thead(head: TableFieldHead)}
@@ -72,31 +67,21 @@
72
67
  {/snippet}
73
68
 
74
69
  {#snippet th(cell: TableFieldHeaderCell)}
75
- {#if typeof Th === "function"}<Th {cell}
76
- ><PrismicRichText field={cell.content} {components} /></Th
77
- >{:else}<th {...Th}
78
- ><PrismicRichText field={cell.content} {components} /></th
79
- >{/if}
70
+ {#if typeof Th === "function"}<Th {cell}><PrismicRichText field={cell.content} {components} /></Th
71
+ >{:else}<th {...Th}><PrismicRichText field={cell.content} {components} /></th>{/if}
80
72
  {/snippet}
81
73
 
82
74
  {#snippet td(cell: TableFieldDataCell)}
83
- {#if typeof Td === "function"}<Td {cell}
84
- ><PrismicRichText field={cell.content} {components} /></Td
85
- >{:else}<td {...Td}
86
- ><PrismicRichText field={cell.content} {components} /></td
87
- >{/if}
75
+ {#if typeof Td === "function"}<Td {cell}><PrismicRichText field={cell.content} {components} /></Td
76
+ >{:else}<td {...Td}><PrismicRichText field={cell.content} {components} /></td>{/if}
88
77
  {/snippet}
89
78
 
90
79
  <!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
91
80
  {#if isFilled.table(field)}
92
81
  {#if typeof Table === "function"}<Table table={field}
93
- >{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(
94
- field.body,
95
- )}</Table
82
+ >{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(field.body)}</Table
96
83
  >{:else}<table {...Table}>
97
- {#if field?.head}{@render thead(field.head)}{/if}{@render tbody(
98
- field.body,
99
- )}
84
+ {#if field?.head}{@render thead(field.head)}{/if}{@render tbody(field.body)}
100
85
  </table>{/if}
101
86
  {:else if Fallback}
102
87
  <Fallback />
@@ -2,17 +2,13 @@ import type { TableField } from "@prismicio/client";
2
2
  import type { Component } from "svelte";
3
3
  import type { RichTextComponents, TableComponents } from "./types";
4
4
  type Props = {
5
- /**
6
- * The Prismic table field to render.
7
- */
5
+ /** The Prismic table field to render. */
8
6
  field: TableField;
9
- /**
10
- * An object that maps a rich text block type to a Svelte component.
11
- */
7
+ /** An object that maps a rich text block type to a Svelte component. */
12
8
  components?: TableComponents & RichTextComponents;
13
9
  /**
14
- * The component rendered when the field is empty. If a fallback is not
15
- * given, `null` will be rendered.
10
+ * The component rendered when the field is empty. If a fallback is not given, `null` will be
11
+ * rendered.
16
12
  */
17
13
  fallback?: Component;
18
14
  };