@prismicio/svelte 2.2.4 → 3.0.0-canary.6a071a2
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/dist/PrismicImage.svelte +3 -11
- package/dist/PrismicLink.svelte +1 -1
- package/dist/PrismicRichText/DefaultComponent.svelte +1 -1
- package/dist/PrismicTable.svelte +3 -8
- package/dist/SliceSimulator.svelte +7 -5
- package/dist/SliceSimulator.svelte.d.ts +9 -31
- package/dist/SliceZone/SliceBoundary.svelte +9 -0
- package/dist/SliceZone/SliceBoundary.svelte.d.ts +8 -0
- package/dist/SliceZone/SliceZone.svelte +22 -14
- package/dist/index.d.ts +1 -5
- package/dist/kit/PrismicPreview.svelte +3 -6
- package/dist/kit/redirectToPreviewURL.d.ts +5 -5
- package/dist/kit/redirectToPreviewURL.js +3 -3
- package/dist/types.d.ts +2 -4
- package/package.json +10 -10
- package/src/PrismicImage.svelte +3 -11
- package/src/PrismicLink.svelte +1 -1
- package/src/PrismicRichText/DefaultComponent.svelte +1 -1
- package/src/PrismicTable.svelte +3 -8
- package/src/SliceSimulator.svelte +7 -5
- package/src/SliceZone/SliceBoundary.svelte +9 -0
- package/src/SliceZone/SliceZone.svelte +22 -14
- package/src/index.ts +1 -8
- package/src/kit/PrismicPreview.svelte +3 -6
- package/src/kit/redirectToPreviewURL.ts +5 -5
- package/src/types.ts +5 -4
package/dist/PrismicImage.svelte
CHANGED
|
@@ -106,17 +106,9 @@
|
|
|
106
106
|
})
|
|
107
107
|
|
|
108
108
|
function castInt(input: string | number | null | undefined): number | null | undefined {
|
|
109
|
-
if (typeof input
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const parsed = Number.parseInt(input)
|
|
113
|
-
|
|
114
|
-
if (Number.isNaN(parsed)) {
|
|
115
|
-
return undefined
|
|
116
|
-
} else {
|
|
117
|
-
return parsed
|
|
118
|
-
}
|
|
119
|
-
}
|
|
109
|
+
if (typeof input !== "string") return input
|
|
110
|
+
const parsed = Number.parseInt(input)
|
|
111
|
+
return Number.isNaN(parsed) ? undefined : parsed
|
|
120
112
|
}
|
|
121
113
|
</script>
|
|
122
114
|
|
package/dist/PrismicLink.svelte
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
18
|
{#if as}
|
|
19
|
-
<svelte:element this={as} {...dirProp} {...attrs}
|
|
19
|
+
<svelte:element this={as} {...dirProp} {...attrs}>{@render children()}</svelte:element>
|
|
20
20
|
{:else if node.type === "heading1"}
|
|
21
21
|
<h1 {...dirProp} {...attrs}>{@render children()}</h1>
|
|
22
22
|
{:else if node.type === "heading2"}
|
package/dist/PrismicTable.svelte
CHANGED
|
@@ -30,12 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
const { field, components = {}, fallback: Fallback }: Props = $props()
|
|
32
32
|
|
|
33
|
-
const Table = components
|
|
34
|
-
const Thead = components.thead
|
|
35
|
-
const Tbody = components.tbody
|
|
36
|
-
const Tr = components.tr
|
|
37
|
-
const Th = components.th
|
|
38
|
-
const Td = components.td
|
|
33
|
+
const { table: Table, thead: Thead, tbody: Tbody, tr: Tr, th: Th, td: Td } = $derived(components)
|
|
39
34
|
</script>
|
|
40
35
|
|
|
41
36
|
{#snippet thead(head: TableFieldHead)}
|
|
@@ -79,9 +74,9 @@
|
|
|
79
74
|
<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
|
|
80
75
|
{#if isFilled.table(field)}
|
|
81
76
|
{#if typeof Table === "function"}<Table table={field}
|
|
82
|
-
>{#if field
|
|
77
|
+
>{#if field.head}{@render thead(field.head)}{/if}{@render tbody(field.body)}</Table
|
|
83
78
|
>{:else}<table {...Table}>
|
|
84
|
-
{#if field
|
|
79
|
+
{#if field.head}{@render thead(field.head)}{/if}{@render tbody(field.body)}
|
|
85
80
|
</table>{/if}
|
|
86
81
|
{:else if Fallback}
|
|
87
82
|
<Fallback />
|
|
@@ -10,19 +10,23 @@
|
|
|
10
10
|
simulatorClass,
|
|
11
11
|
simulatorRootClass,
|
|
12
12
|
} from "@prismicio/simulator/kit"
|
|
13
|
+
import type { Snippet } from "svelte"
|
|
14
|
+
import type { ClassValue } from "svelte/elements"
|
|
13
15
|
|
|
14
16
|
const defaultProps = getDefaultProps()
|
|
15
17
|
|
|
16
18
|
type Props = {
|
|
17
19
|
zIndex?: number
|
|
18
20
|
background?: string
|
|
19
|
-
class?:
|
|
21
|
+
class?: ClassValue
|
|
22
|
+
children?: Snippet<[{ slices: ReturnType<typeof getDefaultSlices> }]>
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
const {
|
|
23
26
|
zIndex = defaultProps.zIndex,
|
|
24
27
|
background = defaultProps.background,
|
|
25
28
|
class: className,
|
|
29
|
+
children,
|
|
26
30
|
}: Props = $props()
|
|
27
31
|
|
|
28
32
|
let slices = $state.raw(getDefaultSlices())
|
|
@@ -51,7 +55,7 @@
|
|
|
51
55
|
</script>
|
|
52
56
|
|
|
53
57
|
<div
|
|
54
|
-
class=
|
|
58
|
+
class={[simulatorClass, className]}
|
|
55
59
|
style="z-index: {zIndex}; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: auto; background: {background}"
|
|
56
60
|
>
|
|
57
61
|
{#if message}
|
|
@@ -68,9 +72,7 @@
|
|
|
68
72
|
onsubmit={disableEventHandler}
|
|
69
73
|
onkeypress={disableEventHandler}
|
|
70
74
|
>
|
|
71
|
-
|
|
72
|
-
<!-- svelte-ignore slot_element_deprecated -->
|
|
73
|
-
<slot {slices} />
|
|
75
|
+
{@render children?.({ slices })}
|
|
74
76
|
</div>
|
|
75
77
|
{/if}
|
|
76
78
|
</div>
|
|
@@ -1,36 +1,14 @@
|
|
|
1
|
+
import { getDefaultSlices } from "@prismicio/simulator/kit";
|
|
2
|
+
import type { Snippet } from "svelte";
|
|
3
|
+
import type { ClassValue } from "svelte/elements";
|
|
1
4
|
type Props = {
|
|
2
5
|
zIndex?: number;
|
|
3
6
|
background?: string;
|
|
4
|
-
class?:
|
|
7
|
+
class?: ClassValue;
|
|
8
|
+
children?: Snippet<[{
|
|
9
|
+
slices: ReturnType<typeof getDefaultSlices>;
|
|
10
|
+
}]>;
|
|
5
11
|
};
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
$$bindings?: Bindings;
|
|
9
|
-
} & Exports;
|
|
10
|
-
(internal: unknown, props: Props & {
|
|
11
|
-
$$events?: Events;
|
|
12
|
-
$$slots?: Slots;
|
|
13
|
-
}): Exports & {
|
|
14
|
-
$set?: any;
|
|
15
|
-
$on?: any;
|
|
16
|
-
};
|
|
17
|
-
z_$$bindings?: Bindings;
|
|
18
|
-
}
|
|
19
|
-
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
20
|
-
default: any;
|
|
21
|
-
} ? Props extends Record<string, never> ? any : {
|
|
22
|
-
children?: any;
|
|
23
|
-
} : {});
|
|
24
|
-
declare const SliceSimulator: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
|
|
25
|
-
default: {
|
|
26
|
-
slices: import("@prismicio/client").SliceZone;
|
|
27
|
-
};
|
|
28
|
-
}>, {
|
|
29
|
-
[evt: string]: CustomEvent<any>;
|
|
30
|
-
}, {
|
|
31
|
-
default: {
|
|
32
|
-
slices: import("@prismicio/client").SliceZone;
|
|
33
|
-
};
|
|
34
|
-
}, {}, "">;
|
|
35
|
-
type SliceSimulator = InstanceType<typeof SliceSimulator>;
|
|
12
|
+
declare const SliceSimulator: import("svelte").Component<Props, {}, "">;
|
|
13
|
+
type SliceSimulator = ReturnType<typeof SliceSimulator>;
|
|
36
14
|
export default SliceSimulator;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from "svelte"
|
|
3
|
+
|
|
4
|
+
const { sliceId, children }: { sliceId: string; children: Snippet } = $props()
|
|
5
|
+
|
|
6
|
+
const id = $derived(sliceId.replaceAll(">", ">"))
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
{@html `<!--prismic-slice-start:${id}-->`}{@render children()}{@html `<!--prismic-slice-end:${id}-->`}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
sliceId: string;
|
|
4
|
+
children: Snippet;
|
|
5
|
+
};
|
|
6
|
+
declare const SliceBoundary: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
7
|
+
type SliceBoundary = ReturnType<typeof SliceBoundary>;
|
|
8
|
+
export default SliceBoundary;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { Component } from "svelte"
|
|
3
3
|
|
|
4
|
-
import type { SliceComponentProps, SliceZoneLike } from "../types"
|
|
4
|
+
import type { SliceComponentProps, SliceLike, SliceZoneLike } from "../types"
|
|
5
|
+
import SliceBoundary from "./SliceBoundary.svelte"
|
|
5
6
|
import TodoComponent from "./TodoComponent.svelte"
|
|
6
7
|
|
|
7
8
|
type Props = {
|
|
@@ -38,12 +39,11 @@
|
|
|
38
39
|
defaultComponent?: Component<SliceComponentProps> | undefined
|
|
39
40
|
}
|
|
40
41
|
|
|
41
|
-
const {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}: Props = $props()
|
|
42
|
+
const { slices = [], components = {}, context = {}, defaultComponent }: Props = $props()
|
|
43
|
+
|
|
44
|
+
function getSliceId(slice: SliceLike): string | undefined {
|
|
45
|
+
return "id" in slice ? slice.id : undefined
|
|
46
|
+
}
|
|
47
47
|
</script>
|
|
48
48
|
|
|
49
49
|
<!--
|
|
@@ -62,17 +62,25 @@
|
|
|
62
62
|
```
|
|
63
63
|
-->
|
|
64
64
|
|
|
65
|
-
{#each slices as slice, index (
|
|
65
|
+
{#each slices as slice, index (getSliceId(slice) || `${index}-${JSON.stringify(slice)}`)}
|
|
66
|
+
{@const sliceId = getSliceId(slice)}
|
|
66
67
|
{@const type = "slice_type" in slice ? slice.slice_type : slice.type}
|
|
67
68
|
{@const Component = components[type] || defaultComponent}
|
|
68
|
-
{#
|
|
69
|
-
{#if
|
|
70
|
-
{
|
|
71
|
-
|
|
69
|
+
{#snippet content()}
|
|
70
|
+
{#if Component}
|
|
71
|
+
{#if slice.__mapped}
|
|
72
|
+
{@const { __mapped, ...mappedProps } = slice}
|
|
73
|
+
<Component {...mappedProps} />
|
|
74
|
+
{:else}
|
|
75
|
+
<Component {slice} {slices} {context} {index} />
|
|
76
|
+
{/if}
|
|
72
77
|
{:else}
|
|
73
|
-
<
|
|
78
|
+
<TodoComponent {slice} />
|
|
74
79
|
{/if}
|
|
80
|
+
{/snippet}
|
|
81
|
+
{#if sliceId}
|
|
82
|
+
<SliceBoundary {sliceId}>{@render content()}</SliceBoundary>
|
|
75
83
|
{:else}
|
|
76
|
-
|
|
84
|
+
{@render content()}
|
|
77
85
|
{/if}
|
|
78
86
|
{/each}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { RichTextComponents } from "./types";
|
|
2
1
|
export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
|
|
3
2
|
export { default as PrismicImage } from "./PrismicImage.svelte";
|
|
4
3
|
export { default as PrismicLink } from "./PrismicLink.svelte";
|
|
@@ -7,7 +6,4 @@ export { default as PrismicTable } from "./PrismicTable.svelte";
|
|
|
7
6
|
export { default as PrismicText } from "./PrismicText.svelte";
|
|
8
7
|
export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
|
|
9
8
|
export { default as SliceSimulator } from "./SliceSimulator.svelte";
|
|
10
|
-
|
|
11
|
-
export type SvelteRichTextSerializer = RichTextComponents;
|
|
12
|
-
export type { RichTextComponents };
|
|
13
|
-
export type { RichTextComponentProps, SliceComponentProps } from "./types";
|
|
9
|
+
export type { RichTextComponentProps, RichTextComponents, SliceComponentProps } from "./types";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { beforeNavigate, goto,
|
|
2
|
+
import { beforeNavigate, goto, refreshAll } from "$app/navigation"
|
|
3
3
|
import { getToolbarSrc } from "@prismicio/client"
|
|
4
4
|
import { onMount } from "svelte"
|
|
5
5
|
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"prismicPreviewUpdate",
|
|
37
37
|
(event) => {
|
|
38
38
|
event.preventDefault()
|
|
39
|
-
|
|
39
|
+
refreshAll()
|
|
40
40
|
},
|
|
41
41
|
{ signal: controller.signal },
|
|
42
42
|
)
|
|
@@ -55,10 +55,7 @@
|
|
|
55
55
|
),
|
|
56
56
|
window.location.origin,
|
|
57
57
|
),
|
|
58
|
-
{
|
|
59
|
-
invalidateAll: true,
|
|
60
|
-
noScroll: true,
|
|
61
|
-
},
|
|
58
|
+
{ refreshAll: true, reset: false },
|
|
62
59
|
)
|
|
63
60
|
},
|
|
64
61
|
{ signal: controller.signal },
|
|
@@ -6,13 +6,13 @@ export type RedirectToPreviewURLConfig = {
|
|
|
6
6
|
/**
|
|
7
7
|
* The `request` object from a `+server` file.
|
|
8
8
|
*
|
|
9
|
-
* @see SvelteKit `+server` docs: \<https://
|
|
9
|
+
* @see SvelteKit `+server` docs: \<https://svelte.dev/docs/kit/routing#server\>
|
|
10
10
|
*/
|
|
11
11
|
request: Request;
|
|
12
12
|
/**
|
|
13
13
|
* The `cookies` object from a `+server` file.
|
|
14
14
|
*
|
|
15
|
-
* @see SvelteKit `+server` docs: \<https://
|
|
15
|
+
* @see SvelteKit `+server` docs: \<https://svelte.dev/docs/kit/routing#server\>
|
|
16
16
|
*/
|
|
17
17
|
cookies: Cookies;
|
|
18
18
|
/** The default redirect URL if a URL cannot be determined for the previewed document. */
|
|
@@ -28,13 +28,13 @@ export type RedirectToPreviewURLConfig = {
|
|
|
28
28
|
*
|
|
29
29
|
* @example
|
|
30
30
|
* ```typescript
|
|
31
|
-
* import { createClient } from "
|
|
31
|
+
* import { createClient } from "#lib/prismicio.ts"
|
|
32
32
|
* import { redirectToPreviewURL } from "@prismicio/svelte/kit"
|
|
33
33
|
*
|
|
34
|
-
* export async function GET({ fetch, request }) {
|
|
34
|
+
* export async function GET({ fetch, request, cookies }) {
|
|
35
35
|
* const client = createClient({ fetch })
|
|
36
36
|
*
|
|
37
|
-
* return await redirectToPreviewURL({ client, request })
|
|
37
|
+
* return await redirectToPreviewURL({ client, request, cookies })
|
|
38
38
|
* }
|
|
39
39
|
* ```
|
|
40
40
|
*/
|
|
@@ -7,13 +7,13 @@ import * as prismic from "@prismicio/client";
|
|
|
7
7
|
*
|
|
8
8
|
* @example
|
|
9
9
|
* ```typescript
|
|
10
|
-
* import { createClient } from "
|
|
10
|
+
* import { createClient } from "#lib/prismicio.ts"
|
|
11
11
|
* import { redirectToPreviewURL } from "@prismicio/svelte/kit"
|
|
12
12
|
*
|
|
13
|
-
* export async function GET({ fetch, request }) {
|
|
13
|
+
* export async function GET({ fetch, request, cookies }) {
|
|
14
14
|
* const client = createClient({ fetch })
|
|
15
15
|
*
|
|
16
|
-
* return await redirectToPreviewURL({ client, request })
|
|
16
|
+
* return await redirectToPreviewURL({ client, request, cookies })
|
|
17
17
|
* }
|
|
18
18
|
* ```
|
|
19
19
|
*/
|
package/dist/types.d.ts
CHANGED
|
@@ -84,9 +84,7 @@ export type SliceComponentProps<TSlice extends SliceLike = SliceLike, TContext =
|
|
|
84
84
|
*
|
|
85
85
|
* @typeParam SliceType - Type name of the Slice.
|
|
86
86
|
*/
|
|
87
|
-
type SliceLikeRestV2<SliceType extends string = string> =
|
|
88
|
-
slice_type: Slice<SliceType>["slice_type"];
|
|
89
|
-
};
|
|
87
|
+
type SliceLikeRestV2<SliceType extends string = string> = Pick<Slice<SliceType>, "id" | "slice_type">;
|
|
90
88
|
/**
|
|
91
89
|
* The minimum required properties to represent a Prismic Slice from the Prismic GraphQL API for the
|
|
92
90
|
* `<SliceZone>` component.
|
|
@@ -104,7 +102,7 @@ type SliceLikeGraphQL<SliceType extends string = string> = {
|
|
|
104
102
|
*
|
|
105
103
|
* @typeParam SliceType - Type name of the Slice.
|
|
106
104
|
*/
|
|
107
|
-
type SliceLike<SliceType extends string = string> = (SliceLikeRestV2<SliceType> | SliceLikeGraphQL<SliceType>) & {
|
|
105
|
+
export type SliceLike<SliceType extends string = string> = (SliceLikeRestV2<SliceType> | SliceLikeGraphQL<SliceType>) & {
|
|
108
106
|
/**
|
|
109
107
|
* If `true`, this Slice has been modified from its original value using a mapper and
|
|
110
108
|
* `@prismicio/client`'s `mapSliceZone()`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prismicio/svelte",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-canary.6a071a2",
|
|
4
4
|
"description": "Svelte components to present Prismic content.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"prismic",
|
|
@@ -64,25 +64,25 @@
|
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@prismicio/client": "^7.22.3",
|
|
66
66
|
"@prismicio/mock": "^0.7.2",
|
|
67
|
-
"@sveltejs/kit": "^
|
|
68
|
-
"@sveltejs/package": "^3.0.
|
|
67
|
+
"@sveltejs/kit": "^3.0.1",
|
|
68
|
+
"@sveltejs/package": "^3.0.1",
|
|
69
69
|
"@sveltejs/vite-plugin-svelte": "^7.3.1",
|
|
70
70
|
"@testing-library/svelte": "^5.4.2",
|
|
71
71
|
"@types/node": "^26.6.5",
|
|
72
|
-
"@vitest/coverage-v8": "^5.0.
|
|
72
|
+
"@vitest/coverage-v8": "^5.0.5",
|
|
73
73
|
"globals": "^17.13.0",
|
|
74
|
-
"happy-dom": "^
|
|
75
|
-
"oxfmt": "^0.
|
|
76
|
-
"oxlint": "^1.
|
|
74
|
+
"happy-dom": "^21.0.4",
|
|
75
|
+
"oxfmt": "^0.74.0",
|
|
76
|
+
"oxlint": "^1.89.0",
|
|
77
77
|
"standard-version": "^9.5.0",
|
|
78
78
|
"svelte": "^5.57.2",
|
|
79
79
|
"typescript": "^6.0.3",
|
|
80
|
-
"vitest": "^5.0.
|
|
80
|
+
"vitest": "^5.0.5"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"@prismicio/client": ">=7",
|
|
84
|
-
"@sveltejs/kit": "^
|
|
85
|
-
"svelte": "^5"
|
|
84
|
+
"@sveltejs/kit": "^3.0.0",
|
|
85
|
+
"svelte": "^5.16.0"
|
|
86
86
|
},
|
|
87
87
|
"peerDependenciesMeta": {
|
|
88
88
|
"@sveltejs/kit": {
|
package/src/PrismicImage.svelte
CHANGED
|
@@ -106,17 +106,9 @@
|
|
|
106
106
|
})
|
|
107
107
|
|
|
108
108
|
function castInt(input: string | number | null | undefined): number | null | undefined {
|
|
109
|
-
if (typeof input
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const parsed = Number.parseInt(input)
|
|
113
|
-
|
|
114
|
-
if (Number.isNaN(parsed)) {
|
|
115
|
-
return undefined
|
|
116
|
-
} else {
|
|
117
|
-
return parsed
|
|
118
|
-
}
|
|
119
|
-
}
|
|
109
|
+
if (typeof input !== "string") return input
|
|
110
|
+
const parsed = Number.parseInt(input)
|
|
111
|
+
return Number.isNaN(parsed) ? undefined : parsed
|
|
120
112
|
}
|
|
121
113
|
</script>
|
|
122
114
|
|
package/src/PrismicLink.svelte
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
18
|
{#if as}
|
|
19
|
-
<svelte:element this={as} {...dirProp} {...attrs}
|
|
19
|
+
<svelte:element this={as} {...dirProp} {...attrs}>{@render children()}</svelte:element>
|
|
20
20
|
{:else if node.type === "heading1"}
|
|
21
21
|
<h1 {...dirProp} {...attrs}>{@render children()}</h1>
|
|
22
22
|
{:else if node.type === "heading2"}
|
package/src/PrismicTable.svelte
CHANGED
|
@@ -30,12 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
const { field, components = {}, fallback: Fallback }: Props = $props()
|
|
32
32
|
|
|
33
|
-
const Table = components
|
|
34
|
-
const Thead = components.thead
|
|
35
|
-
const Tbody = components.tbody
|
|
36
|
-
const Tr = components.tr
|
|
37
|
-
const Th = components.th
|
|
38
|
-
const Td = components.td
|
|
33
|
+
const { table: Table, thead: Thead, tbody: Tbody, tr: Tr, th: Th, td: Td } = $derived(components)
|
|
39
34
|
</script>
|
|
40
35
|
|
|
41
36
|
{#snippet thead(head: TableFieldHead)}
|
|
@@ -79,9 +74,9 @@
|
|
|
79
74
|
<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
|
|
80
75
|
{#if isFilled.table(field)}
|
|
81
76
|
{#if typeof Table === "function"}<Table table={field}
|
|
82
|
-
>{#if field
|
|
77
|
+
>{#if field.head}{@render thead(field.head)}{/if}{@render tbody(field.body)}</Table
|
|
83
78
|
>{:else}<table {...Table}>
|
|
84
|
-
{#if field
|
|
79
|
+
{#if field.head}{@render thead(field.head)}{/if}{@render tbody(field.body)}
|
|
85
80
|
</table>{/if}
|
|
86
81
|
{:else if Fallback}
|
|
87
82
|
<Fallback />
|
|
@@ -10,19 +10,23 @@
|
|
|
10
10
|
simulatorClass,
|
|
11
11
|
simulatorRootClass,
|
|
12
12
|
} from "@prismicio/simulator/kit"
|
|
13
|
+
import type { Snippet } from "svelte"
|
|
14
|
+
import type { ClassValue } from "svelte/elements"
|
|
13
15
|
|
|
14
16
|
const defaultProps = getDefaultProps()
|
|
15
17
|
|
|
16
18
|
type Props = {
|
|
17
19
|
zIndex?: number
|
|
18
20
|
background?: string
|
|
19
|
-
class?:
|
|
21
|
+
class?: ClassValue
|
|
22
|
+
children?: Snippet<[{ slices: ReturnType<typeof getDefaultSlices> }]>
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
const {
|
|
23
26
|
zIndex = defaultProps.zIndex,
|
|
24
27
|
background = defaultProps.background,
|
|
25
28
|
class: className,
|
|
29
|
+
children,
|
|
26
30
|
}: Props = $props()
|
|
27
31
|
|
|
28
32
|
let slices = $state.raw(getDefaultSlices())
|
|
@@ -51,7 +55,7 @@
|
|
|
51
55
|
</script>
|
|
52
56
|
|
|
53
57
|
<div
|
|
54
|
-
class=
|
|
58
|
+
class={[simulatorClass, className]}
|
|
55
59
|
style="z-index: {zIndex}; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: auto; background: {background}"
|
|
56
60
|
>
|
|
57
61
|
{#if message}
|
|
@@ -68,9 +72,7 @@
|
|
|
68
72
|
onsubmit={disableEventHandler}
|
|
69
73
|
onkeypress={disableEventHandler}
|
|
70
74
|
>
|
|
71
|
-
|
|
72
|
-
<!-- svelte-ignore slot_element_deprecated -->
|
|
73
|
-
<slot {slices} />
|
|
75
|
+
{@render children?.({ slices })}
|
|
74
76
|
</div>
|
|
75
77
|
{/if}
|
|
76
78
|
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from "svelte"
|
|
3
|
+
|
|
4
|
+
const { sliceId, children }: { sliceId: string; children: Snippet } = $props()
|
|
5
|
+
|
|
6
|
+
const id = $derived(sliceId.replaceAll(">", ">"))
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
{@html `<!--prismic-slice-start:${id}-->`}{@render children()}{@html `<!--prismic-slice-end:${id}-->`}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { Component } from "svelte"
|
|
3
3
|
|
|
4
|
-
import type { SliceComponentProps, SliceZoneLike } from "../types"
|
|
4
|
+
import type { SliceComponentProps, SliceLike, SliceZoneLike } from "../types"
|
|
5
|
+
import SliceBoundary from "./SliceBoundary.svelte"
|
|
5
6
|
import TodoComponent from "./TodoComponent.svelte"
|
|
6
7
|
|
|
7
8
|
type Props = {
|
|
@@ -38,12 +39,11 @@
|
|
|
38
39
|
defaultComponent?: Component<SliceComponentProps> | undefined
|
|
39
40
|
}
|
|
40
41
|
|
|
41
|
-
const {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}: Props = $props()
|
|
42
|
+
const { slices = [], components = {}, context = {}, defaultComponent }: Props = $props()
|
|
43
|
+
|
|
44
|
+
function getSliceId(slice: SliceLike): string | undefined {
|
|
45
|
+
return "id" in slice ? slice.id : undefined
|
|
46
|
+
}
|
|
47
47
|
</script>
|
|
48
48
|
|
|
49
49
|
<!--
|
|
@@ -62,17 +62,25 @@
|
|
|
62
62
|
```
|
|
63
63
|
-->
|
|
64
64
|
|
|
65
|
-
{#each slices as slice, index (
|
|
65
|
+
{#each slices as slice, index (getSliceId(slice) || `${index}-${JSON.stringify(slice)}`)}
|
|
66
|
+
{@const sliceId = getSliceId(slice)}
|
|
66
67
|
{@const type = "slice_type" in slice ? slice.slice_type : slice.type}
|
|
67
68
|
{@const Component = components[type] || defaultComponent}
|
|
68
|
-
{#
|
|
69
|
-
{#if
|
|
70
|
-
{
|
|
71
|
-
|
|
69
|
+
{#snippet content()}
|
|
70
|
+
{#if Component}
|
|
71
|
+
{#if slice.__mapped}
|
|
72
|
+
{@const { __mapped, ...mappedProps } = slice}
|
|
73
|
+
<Component {...mappedProps} />
|
|
74
|
+
{:else}
|
|
75
|
+
<Component {slice} {slices} {context} {index} />
|
|
76
|
+
{/if}
|
|
72
77
|
{:else}
|
|
73
|
-
<
|
|
78
|
+
<TodoComponent {slice} />
|
|
74
79
|
{/if}
|
|
80
|
+
{/snippet}
|
|
81
|
+
{#if sliceId}
|
|
82
|
+
<SliceBoundary {sliceId}>{@render content()}</SliceBoundary>
|
|
75
83
|
{:else}
|
|
76
|
-
|
|
84
|
+
{@render content()}
|
|
77
85
|
{/if}
|
|
78
86
|
{/each}
|
package/src/index.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import type { RichTextComponents } from "./types"
|
|
2
|
-
|
|
3
1
|
export { default as PrismicEmbed } from "./PrismicEmbed.svelte"
|
|
4
2
|
export { default as PrismicImage } from "./PrismicImage.svelte"
|
|
5
3
|
export { default as PrismicLink } from "./PrismicLink.svelte"
|
|
@@ -9,9 +7,4 @@ export { default as PrismicText } from "./PrismicText.svelte"
|
|
|
9
7
|
export { default as SliceZone } from "./SliceZone/SliceZone.svelte"
|
|
10
8
|
export { default as SliceSimulator } from "./SliceSimulator.svelte"
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
// TODO: Remove in v3.
|
|
14
|
-
export type SvelteRichTextSerializer = RichTextComponents
|
|
15
|
-
export type { RichTextComponents }
|
|
16
|
-
|
|
17
|
-
export type { RichTextComponentProps, SliceComponentProps } from "./types"
|
|
10
|
+
export type { RichTextComponentProps, RichTextComponents, SliceComponentProps } from "./types"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { beforeNavigate, goto,
|
|
2
|
+
import { beforeNavigate, goto, refreshAll } from "$app/navigation"
|
|
3
3
|
import { getToolbarSrc } from "@prismicio/client"
|
|
4
4
|
import { onMount } from "svelte"
|
|
5
5
|
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"prismicPreviewUpdate",
|
|
37
37
|
(event) => {
|
|
38
38
|
event.preventDefault()
|
|
39
|
-
|
|
39
|
+
refreshAll()
|
|
40
40
|
},
|
|
41
41
|
{ signal: controller.signal },
|
|
42
42
|
)
|
|
@@ -55,10 +55,7 @@
|
|
|
55
55
|
),
|
|
56
56
|
window.location.origin,
|
|
57
57
|
),
|
|
58
|
-
{
|
|
59
|
-
invalidateAll: true,
|
|
60
|
-
noScroll: true,
|
|
61
|
-
},
|
|
58
|
+
{ refreshAll: true, reset: false },
|
|
62
59
|
)
|
|
63
60
|
},
|
|
64
61
|
{ signal: controller.signal },
|
|
@@ -11,14 +11,14 @@ export type RedirectToPreviewURLConfig = {
|
|
|
11
11
|
/**
|
|
12
12
|
* The `request` object from a `+server` file.
|
|
13
13
|
*
|
|
14
|
-
* @see SvelteKit `+server` docs: \<https://
|
|
14
|
+
* @see SvelteKit `+server` docs: \<https://svelte.dev/docs/kit/routing#server\>
|
|
15
15
|
*/
|
|
16
16
|
request: Request
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
19
|
* The `cookies` object from a `+server` file.
|
|
20
20
|
*
|
|
21
|
-
* @see SvelteKit `+server` docs: \<https://
|
|
21
|
+
* @see SvelteKit `+server` docs: \<https://svelte.dev/docs/kit/routing#server\>
|
|
22
22
|
*/
|
|
23
23
|
cookies: Cookies
|
|
24
24
|
|
|
@@ -37,13 +37,13 @@ export type RedirectToPreviewURLConfig = {
|
|
|
37
37
|
*
|
|
38
38
|
* @example
|
|
39
39
|
* ```typescript
|
|
40
|
-
* import { createClient } from "
|
|
40
|
+
* import { createClient } from "#lib/prismicio.ts"
|
|
41
41
|
* import { redirectToPreviewURL } from "@prismicio/svelte/kit"
|
|
42
42
|
*
|
|
43
|
-
* export async function GET({ fetch, request }) {
|
|
43
|
+
* export async function GET({ fetch, request, cookies }) {
|
|
44
44
|
* const client = createClient({ fetch })
|
|
45
45
|
*
|
|
46
|
-
* return await redirectToPreviewURL({ client, request })
|
|
46
|
+
* return await redirectToPreviewURL({ client, request, cookies })
|
|
47
47
|
* }
|
|
48
48
|
* ```
|
|
49
49
|
*/
|
package/src/types.ts
CHANGED
|
@@ -142,9 +142,10 @@ export type SliceComponentProps<TSlice extends SliceLike = SliceLike, TContext =
|
|
|
142
142
|
*
|
|
143
143
|
* @typeParam SliceType - Type name of the Slice.
|
|
144
144
|
*/
|
|
145
|
-
type SliceLikeRestV2<SliceType extends string = string> =
|
|
146
|
-
|
|
147
|
-
|
|
145
|
+
type SliceLikeRestV2<SliceType extends string = string> = Pick<
|
|
146
|
+
Slice<SliceType>,
|
|
147
|
+
"id" | "slice_type"
|
|
148
|
+
>
|
|
148
149
|
|
|
149
150
|
/**
|
|
150
151
|
* The minimum required properties to represent a Prismic Slice from the Prismic GraphQL API for the
|
|
@@ -164,7 +165,7 @@ type SliceLikeGraphQL<SliceType extends string = string> = {
|
|
|
164
165
|
*
|
|
165
166
|
* @typeParam SliceType - Type name of the Slice.
|
|
166
167
|
*/
|
|
167
|
-
type SliceLike<SliceType extends string = string> = (
|
|
168
|
+
export type SliceLike<SliceType extends string = string> = (
|
|
168
169
|
| SliceLikeRestV2<SliceType>
|
|
169
170
|
| SliceLikeGraphQL<SliceType>
|
|
170
171
|
) & {
|