@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.

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:

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

{
  "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

{
  "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

<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>