@slicemachine/adapter-sveltekit - v0.0

@slicemachine/adapter-sveltekit adds support for SvelteKit in Slice Machine.

Dependencies and requirements

This package works in a SvelteKit project with slice-machine-ui installed.

Installation

The best way to configure a project with Slice Machine is by running the following command in a SvelteKit project. This command will install @slicemachine/adapter-sveltekit along with other Prismic packages and add Prismic-specific configurations to your project.

Copy

npx @slicemachine/init@latest

For more information on configuring a SvelteKit project with Slice Machine, see our SvelteKit guide.

If you want to install this package on its own, run this command:

Copy

npm install --save-dev @slicemachine/adapter-sveltekit

Usage

To use this adapter, specify it in the adapter property of your slicemachine.config.json file:

slicemachine.config.json

Copy

{
  "repositoryName": "example-prismic-repo",
  "adapter": "@slicemachine/adapter-sveltekit",
  "libraries": ["./src/lib/slices"],
  "localSliceSimulatorURL": "http://localhost:5173/slice-simulator"
}

You can also specify options for the adapter:

slicemachine.config.json

Copy

{
  "repositoryName": "example-prismic-repo",
  "adapter": {
    "resolve": "@slicemachine/adapter-sveltekit",
    "options": {
      "typescript": true
    }
  },
  "libraries": ["./src/lib/slices"]
}

Here are the available options:

format

boolean

Determines if generated files should be formatted using Prettier (default: true).

typescript

boolean

Determines if generated files should use TypeScript rather than JavaScript (default: true only if the project contains a tsconfig.json file, otherwise false).

generatedTypesFilePath

string

A filepath denoting where generated TypeScript types will be saved (default: prismicio-types.d.ts).

In order to simulate slices in Slice Machine, the adapter requires a page that renders the <SliceSimulator> component from @slicemachine/adapter-sveltekit/simulator. The URL for this page should be specified in the localSliceSimulatorURL property of slicemachine.config.json.

src/routes/slice-simulator/+page.svelte

Copy

<script>
	import { SliceSimulator } from '@slicemachine/adapter-sveltekit/simulator';
	import { SliceZone } from '@prismicio/svelte';
	import { components } from '$lib/slices';
</script>

<SliceSimulator let:slices>
	<SliceZone {slices} {components} />
</SliceSimulator>

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.