Mapped Slice Zone not passing to Component

Developing with Prismic
1

In the server load function, I've mapped the slices like this to syntax highlight using Shiki.

// +page.server.ts
     const page = await client.getByUID('blog', params.uid);
	const slices = await mapSliceZone(page.data.slices, {
		code: async ({ slice }) => {
			return {
				...slice,
				code: await highlight(slice)
			};
		}
	});

This appends the code property to the slice object.

I then return slices. They're available in +page.svelte.

Then to pass onto slices, I use:

<SliceZone {slices} {components} context={{ date: data.page.last_publication_date }} />

But now in the actual Code slice that I've created in slicemachine...
when I access the slice prop...
it's undefined.

So long story short:
Load function :white_check_mark:: code slice is available here.
+page.svelte :white_check_mark:: code slice is available here.
slices/Code.index.svelte :x:: slice is undefined.

How to fix this issue?

4

Hey @aadtyaraj01,

Can you share your entire project? You can send the zipped file to me in a DM if you like.

Sam

5

Hey thanks. I figured it out.

I got the code as

const slices = await mapSliceZone(page.data.slices, {
		code: async ({ slice }) => {
			const rawText = asText(slice.primary.code);
			return {
				slice,
				code: await highlight(rawText, slice.primary.lang)
			};
		}
	});

Then in the component.

<script lang="ts">
	import type { Content } from '@prismicio/client';
	let { text }: { text: Content.CodeSlice } = $props();
</script>

{@html text.primary.code[0].text}

Is this optimal. If yes, then I'll create a tutorial on syntax highlight with Shiki, Prismic and Sveltekit on my youtube channel.

Let me know if there's any other optimal solution.

Also, how do I DM you?

6

Hey @aadtyaraj01,

If this is working for you, then it might be fine. To be honest, though, this code doesn't quite look correct to me. As far as I understand, the slice property should be spread, ...slice, in the mapper. And, I don't understand where your text property is coming from.

Like I say, if this is working for you, then go for it :sweat_smile:

If you want to send me a DM, click on my profile and there should be a Message button.

Sam