@slicemachine/adapter-sveltekit 0.3.78-beta.9 → 0.3.79-alpha.coderabbitai-chat-dniAA6r9GseKm4ouqNyJ8dl.1

package/src/hooks/documentation-read.ts

@@ -3,8 +3,14 @@ import { source } from "common-tags";
 import type { DocumentationReadHook } from "@slicemachine/plugin-kit";
 
 import { getJSFileExtension } from "../lib/getJSFileExtension";
+import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
 
 import type { PluginOptions } from "../types";
+import {
+	componentFileTemplate,
+	dataFileTemplate,
+} from "./documentation-read.templates";
+import { getSvelteMajor } from "../lib/getSvelteMajor";
 
 const nestRouteFilePath = (filePath: string, nesting: string): string => {
 	return [
@@ -22,68 +28,17 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
 		const { model } = data.data;
 
 		const pageDataExtension = await getJSFileExtension({ helpers, options });
+		const pageDataLanguage =
+			pageDataExtension === "ts" ? "typescript" : "javascript";
+		const typescript = await checkIsTypeScriptProject({ options, helpers });
 
-		const routePath = `src/routes/${model.repeatable ? "[uid]" : model.id}`;
+		const routePath = `src/routes/[[preview=preview]]/${
+			model.repeatable ? "[uid]" : model.id
+		}`;
 		const dataFilePath = `${routePath}/+page.server.${pageDataExtension}`;
 		const componentFilePath = `${routePath}/+page.svelte`;
 
-		let dataFileContent: string;
-		if (model.repeatable) {
-			dataFileContent = source`
-				import { createClient } from "$lib/prismicio";
-
-				export async function load({ params, fetch, cookies }) {
-					const client = createClient({ fetch, cookies });
-
-					const page = await client.getByUID("${model.id}", params.uid);
-
-					return {
-						page,
-					};
-				}
-
-				export async function entries() {
-					const client = createClient();
-
-					const pages = await client.getAllByType("${model.id}");
-
-					return pages.map((page) => {
-						return { uid: page.uid };
-					});
-				}
-			`;
-		} else {
-			dataFileContent = source`
-				import { createClient } from "$lib/prismicio";
-
-				export async function load({ params, fetch, cookies }) {
-					const client = createClient({ fetch, cookies });
-
-					const page = await client.getSingle("${model.id}");
-
-					return {
-						page,
-					};
-				}
-
-				export async function entries() {
-					return [{}]
-				}
-			`;
-		}
-
-		let componentFileContent = source`
-			<script>
-				import { SliceZone } from "@prismicio/svelte";
-
-				import { components } from "$lib/slices";
-
-				export let data;
-			</script>
-
-			<SliceZone slices={data.page.data.slices} {components} />
-		`;
-
+		let dataFileContent = dataFileTemplate({ model, typescript });
 		if (options.format) {
 			dataFileContent = await helpers.format(
 				dataFileContent,
@@ -92,6 +47,13 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
 					includeNewlineAtEnd: false,
 				},
 			);
+		}
+
+		let componentFileContent = componentFileTemplate({
+			typescript,
+			version: await getSvelteMajor(),
+		});
+		if (options.format) {
 			componentFileContent = await helpers.format(
 				componentFileContent,
 				helpers.joinPathFromRoot(componentFilePath),
@@ -121,7 +83,7 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
 
 					Paste in this code:
 
-					${`~~~${pageDataExtension} [${dataFilePath}]\n${dataFileContent}\n~~~`}
+					${`~~~${pageDataLanguage} [${dataFilePath}]\n${dataFileContent}\n~~~`}
 
 					## Create your ${model.label}'s page component
 

package/src/hooks/project-init.templates.ts

@@ -0,0 +1,208 @@
+import { source as svelte, source as ts, source as js } from "common-tags";
+
+import { PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME } from "../constants";
+
+export function prismicIOFileTemplate(args: { typescript: boolean }): string {
+	const { typescript } = args;
+
+	const TS = ts`
+		import { createClient as baseCreateClient, type Route } from "@prismicio/client";
+		import { type CreateClientConfig, enableAutoPreviews } from '@prismicio/svelte/kit';
+		import sm from "../../slicemachine.config.json";
+
+		/**
+		 * The project's Prismic repository name.
+		 */
+		export const repositoryName =
+			import${"."}meta${"."}env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || sm.repositoryName;
+
+		/**
+		 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
+		 *
+		 * {@link https://prismic.io/docs/route-resolver}
+		 */
+		// TODO: Update the routes array to match your project's route structure.
+		const routes: Route[] = [
+			// Examples:
+			// { type: "homepage", path: "/" },
+			// { type: "page", path: "/:uid" },
+		];
+
+		/**
+		 * Creates a Prismic client for the project's repository. The client is used to
+		 * query content from the Prismic API.
+		 *
+		 * @param config - Configuration for the Prismic client.
+		 */
+		export const createClient = ({ cookies, ...config }: CreateClientConfig = {}) => {
+			const client = baseCreateClient(repositoryName, {
+				routes,
+				...config,
+			});
+
+			enableAutoPreviews({ client, cookies });
+
+			return client;
+		};
+	`;
+
+	const JS = js`
+		import { createClient as baseCreateClient } from "@prismicio/client";
+		import { enableAutoPreviews } from '@prismicio/svelte/kit';
+		import sm from "../../slicemachine.config.json";
+
+		/**
+		 * The project's Prismic repository name.
+		 */
+		export const repositoryName =
+			import${"."}meta${"."}env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || sm.repositoryName;
+
+		/**
+		 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
+		 *
+		 * {@link https://prismic.io/docs/route-resolver#route-resolver}
+		 *
+		 * @type {import("@prismicio/client").Route[]}
+		 */
+		// TODO: Update the routes array to match your project's route structure.
+		const routes = [
+			// Examples:
+			// { type: "homepage", path: "/" },
+			// { type: "page", path: "/:uid" },
+		];
+
+		/**
+		 * Creates a Prismic client for the project's repository. The client is used to
+		 * query content from the Prismic API.
+		 *
+		 * @param {import('@prismicio/svelte/kit').CreateClientConfig} config - Configuration for the Prismic client.
+		 */
+		export const createClient = ({ cookies, ...config } = {}) => {
+			const client = prismic.createClient(repositoryName, {
+				routes,
+				...config,
+			});
+
+			enableAutoPreviews({ client, cookies });
+
+			return client;
+		};
+	`;
+
+	return typescript ? TS : JS;
+}
+
+export function sliceSimulatorPageTemplate(args: { version: number }): string {
+	const { version } = args;
+
+	const v5 = svelte`
+		<script>
+			import { SliceSimulator } from '@slicemachine/adapter-sveltekit/simulator';
+			import { SliceZone } from '@prismicio/svelte';
+			import { components } from '$lib/slices';
+		</script>
+
+		<!-- Slot syntax is used for backward compatibility with Svelte <=4. -->
+		<SliceSimulator let:slices>
+			<SliceZone {slices} {components} />
+		</SliceSimulator>
+	`;
+
+	const v4 = 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>
+	`;
+
+	return version <= 4 ? v4 : v5;
+}
+
+export function previewAPIRouteTemplate(args: { typescript: boolean }): string {
+	const { typescript } = args;
+
+	const TS = ts`
+		import { redirectToPreviewURL } from '@prismicio/svelte/kit';
+		import { createClient } from '$lib/prismicio';
+		import type { RequestHandler } from "./$types";
+
+		export const GET: RequestHandler = async ({ fetch, request, cookies }) => {
+			const client = createClient({ fetch });
+
+			return await redirectToPreviewURL({ client, request, cookies });
+		}
+	`;
+
+	const JS = js`
+		import { redirectToPreviewURL } from '@prismicio/svelte/kit';
+		import { createClient } from '$lib/prismicio';
+
+		/* @type {import("./$types").RequestHandler} */
+		export async function GET({ fetch, request, cookies }) {
+			const client = createClient({ fetch });
+
+			return await redirectToPreviewURL({ client, request, cookies });
+		}
+	`;
+
+	return typescript ? TS : JS;
+}
+
+export function rootLayoutTemplate(args: { version: number }): string {
+	const { version } = args;
+
+	const v5 = svelte`
+		<script>
+			import { isFilled, asImageSrc } from '@prismicio/client';
+			import { PrismicPreview } from '@prismicio/svelte/kit';
+			import { page } from '$app/state';
+			import { repositoryName } from '$lib/prismicio';
+
+			const { children } = $props();
+		</script>
+
+		<svelte:head>
+			<title>{page.data.page?.data.meta_title}</title>
+			<meta property="og:title" content={page.data.page?.data.meta_title} />
+			{#if isFilled.keyText(page.data.page?.data.meta_description)}
+				<meta name="description" content={page.data.page.data.meta_description} />
+				<meta property="og:description" content={page.data.page.data.meta_description} />
+			{/if}
+			{#if isFilled.image(page.data.page?.data.meta_image)}
+				<meta property="og:image" content={asImageSrc(page.data.page.data.meta_image)} />
+			{/if}
+		</svelte:head>
+		{@render children()}
+		<PrismicPreview {repositoryName} />
+	`;
+
+	const v4 = svelte`
+		<script>
+			import { isFilled, asImageSrc } from '@prismicio/client';
+			import { PrismicPreview } from '@prismicio/svelte/kit';
+			import { page } from '$app/state';
+			import { repositoryName } from '$lib/prismicio';
+		</script>
+
+		<svelte:head>
+			<title>{page.data.page?.data.meta_title}</title>
+			<meta property="og:title" content={page.data.page?.data.meta_title} />
+			{#if isFilled.keyText(page.data.page?.data.meta_description)}
+				<meta name="description" content={page.data.page.data.meta_description} />
+				<meta property="og:description" content={page.data.page.data.meta_description} />
+			{/if}
+			{#if isFilled.image(page.data.page?.data.meta_image)}
+				<meta property="og:image" content={asImageSrc(page.data.page.data.meta_image)} />
+			{/if}
+		</svelte:head>
+		<slot />
+		<PrismicPreview {repositoryName} />
+	`;
+
+	return version <= 4 ? v4 : v5;
+}

package/src/hooks/project-init.ts

@@ -9,14 +9,21 @@ import {
 	writeProjectFile,
 } from "@slicemachine/plugin-kit/fs";
 import { source } from "common-tags";
+import { loadFile } from "magicast";
 
 import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
 import { getJSFileExtension } from "../lib/getJSFileExtension";
+import { getSvelteMajor } from "../lib/getSvelteMajor";
 import { rejectIfNecessary } from "../lib/rejectIfNecessary";
 import { upsertSliceLibraryIndexFile } from "../lib/upsertSliceLibraryIndexFile";
 
 import type { PluginOptions } from "../types";
-import { PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME } from "../constants";
+import {
+	previewAPIRouteTemplate,
+	prismicIOFileTemplate,
+	rootLayoutTemplate,
+	sliceSimulatorPageTemplate,
+} from "./project-init.templates";
 
 type InstallDependenciesArgs = {
 	installDependencies: ProjectInitHookData["installDependencies"];
@@ -39,10 +46,6 @@ const createPrismicIOFile = async ({
 	helpers,
 	options,
 }: CreatePrismicIOFileArgs) => {
-	const isTypeScriptProject = await checkIsTypeScriptProject({
-		helpers,
-		options,
-	});
 	const extension = await getJSFileExtension({ helpers, options });
 	const filename = path.join(`src/lib/prismicio.${extension}`);
 
@@ -50,105 +53,8 @@ const createPrismicIOFile = async ({
 		return;
 	}
 
-	let contents: string;
-
-	if (isTypeScriptProject) {
-		contents = source`
-			import * as prismic from "@prismicio/client";
-			import { type CreateClientConfig, enableAutoPreviews } from '@prismicio/svelte/kit';
-			import config from "../../slicemachine.config.json";
-
-			/**
-			 * The project's Prismic repository name.
-			 */
-			export const repositoryName =
-				import${"."}meta${"."}env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || config.repositoryName;
-
-			/**
-			 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
-			 *
-			 * {@link https://prismic.io/docs/route-resolver#route-resolver}
-			 */
-			// TODO: Update the routes array to match your project's route structure.
-			const routes: prismic.ClientConfig["routes"] = [
-				// Examples:
-				// {
-				// 	type: "homepage",
-				// 	path: "/",
-				// },
-				// {
-				// 	type: "page",
-				// 	path: "/:uid",
-				// },
-			];
-
-			/**
-			 * Creates a Prismic client for the project's repository. The client is used to
-			 * query content from the Prismic API.
-			 *
-			 * @param config - Configuration for the Prismic client.
-			 */
-			export const createClient = ({ cookies, ...config }: CreateClientConfig = {}) => {
-				const client = prismic.createClient(repositoryName, {
-					routes,
-					...config,
-				});
-
-				enableAutoPreviews({ client, cookies });
-
-				return client;
-			};
-		`;
-	} else {
-		contents = source`
-			import * as prismic from "@prismicio/client";
-			import { enableAutoPreviews } from '@prismicio/svelte/kit';
-			import config from "../../slicemachine.config.json";
-
-			/**
-			 * The project's Prismic repository name.
-			 */
-			export const repositoryName =
-				import${"."}meta${"."}env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || config.repositoryName;
-
-			/**
-			 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
-			 *
-			 * {@link https://prismic.io/docs/route-resolver#route-resolver}
-			 *
-			 * @type {prismic.ClientConfig["routes"]}
-			 */
-			// TODO: Update the routes array to match your project's route structure.
-			const routes = [
-				// Examples:
-				// {
-				// 	type: "homepage",
-				// 	path: "/",
-				// },
-				// {
-				// 	type: "page",
-				// 	path: "/:uid",
-				// },
-			];
-
-			/**
-			 * Creates a Prismic client for the project's repository. The client is used to
-			 * query content from the Prismic API.
-			 *
-			 * @param {import('@prismicio/svelte/kit').CreateClientConfig} config - Configuration for the Prismic client.
-			 */
-			export const createClient = ({ cookies, ...config } = {}) => {
-				const client = prismic.createClient(repositoryName, {
-					routes,
-					...config,
-				});
-
-				enableAutoPreviews({ client, cookies });
-
-				return client;
-			};
-		`;
-	}
+	const typescript = await checkIsTypeScriptProject({ helpers, options });
+	const contents = prismicIOFileTemplate({ typescript });
 
 	await writeProjectFile({
 		filename,
@@ -173,17 +79,9 @@ const createSliceSimulatorPage = async ({
 		return;
 	}
 
-	const contents = source`
-		<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>
-	`;
+	const contents = sliceSimulatorPageTemplate({
+		version: await getSvelteMajor(),
+	});
 
 	await writeProjectFile({
 		filename,
@@ -241,16 +139,8 @@ const createPreviewAPIRoute = async ({
 		return;
 	}
 
-	const contents = source`
-		import { redirectToPreviewURL } from '@prismicio/svelte/kit';
-		import { createClient } from '$lib/prismicio';
-
-		export async function GET({ fetch, request, cookies }) {
-			const client = createClient({ fetch });
-
-			return await redirectToPreviewURL({ client, request, cookies });
-		}
-	`;
+	const typescript = await checkIsTypeScriptProject({ helpers, options });
+	const contents = previewAPIRouteTemplate({ typescript });
 
 	await writeProjectFile({
 		filename,
@@ -327,28 +217,7 @@ const createRootLayoutFile = async ({
 		return;
 	}
 
-	const contents = source`
-		<script>
-			import { isFilled, asImageSrc } from '@prismicio/client';
-			import { PrismicPreview } from '@prismicio/svelte/kit';
-			import { page } from '$app/state';
-			import { repositoryName } from '$lib/prismicio';
-		</script>
-
-		<svelte:head>
-			<title>{page.data.page?.data.meta_title}</title>
-			<meta property="og:title" content={page.data.page?.data.meta_title} />
-			{#if isFilled.keyText(page.data.page?.data.meta_description)}
-				<meta name="description" content={page.data.page.data.meta_description} />
-				<meta property="og:description" content={page.data.page.data.meta_description} />
-			{/if}
-			{#if isFilled.image(page.data.page?.data.meta_image)}
-				<meta property="og:image" content={asImageSrc(page.data.page.data.meta_image)} />
-			{/if}
-		</svelte:head>
-		<slot />
-		<PrismicPreview {repositoryName} />
-	`;
+	const contents = rootLayoutTemplate({ version: await getSvelteMajor() });
 
 	await writeProjectFile({
 		filename,
@@ -421,6 +290,46 @@ const upsertSliceLibraryIndexFiles = async (
 	);
 };
 
+const modifyViteConfig = async ({
+	helpers,
+	options,
+}: SliceMachineContext<PluginOptions>) => {
+	let filename = "vite.config.js";
+	if (!(await checkHasProjectFile({ filename, helpers }))) {
+		filename = "vite.config.ts";
+	}
+	if (!(await checkHasProjectFile({ filename, helpers }))) {
+		// Couldn't find the config file.
+		return;
+	}
+	const filepath = helpers.joinPathFromRoot(filename);
+
+	const mod = await loadFile(filepath);
+	if (mod.exports.default.$type !== "function-call") {
+		// Invalid config file.
+		return;
+	}
+
+	// Add `./slicemachine.config.json` to allowed files.
+	const config = mod.exports.default.$args[0];
+	config.server ??= {};
+	config.server.fs ??= {};
+	config.server.fs.allow ??= [];
+	if (!config.server.fs.allow.includes("./slicemachine.config.json")) {
+		config.server.fs.allow.push("./slicemachine.config.json");
+	}
+
+	// Remove an empty line above the `server` property.
+	const contents = mod.generate().code.replace(/\n\s*\n(?=\s*server:)/, "\n");
+
+	await writeProjectFile({
+		filename,
+		contents,
+		format: options.format,
+		helpers,
+	});
+};
+
 export const projectInit: ProjectInitHook<PluginOptions> = async (
 	{ installDependencies: _installDependencies },
 	context,
@@ -436,6 +345,7 @@ export const projectInit: ProjectInitHook<PluginOptions> = async (
 			createPreviewRouteMatcherFile(context),
 			createRootLayoutServerFile(context),
 			createRootLayoutFile(context),
+			modifyViteConfig(context),
 		]),
 	);
 

package/src/hooks/slice-create.templates.ts

@@ -0,0 +1,103 @@
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { source as svelte } from "common-tags";
+
+import { pascalCase } from "../lib/pascalCase";
+
+const PLACEHOLDER = `
+Placeholder component for {slice.slice_type} (variation: {slice.variation}) slices.
+<br />
+<strong>You can edit this slice directly in your code editor.</strong>
+<!--
+💡 Use Prismic MCP with your code editor
+
+Get AI-powered help to build your slice components — based on your actual model.
+
+▶️ Setup:
+1. Add a new MCP Server in your code editor:
+
+{
+  "mcpServers": {
+    "Prismic MCP": {
+      "command": "npx",
+      "args": ["-y", "@prismicio/mcp-server"]
+    }
+  }
+}
+
+2. Select a model optimized for coding (e.g. Claude 3.7 Sonnet or similar)
+
+✅ Then open your slice file and ask your code editor:
+	"Code this slice"
+
+Your code editor reads your slice model and helps you code faster ⚡
+📚 Give your feedback: https://community.prismic.io/t/help-us-shape-the-future-of-slice-creation/19505
+-->
+`;
+
+export function sliceTemplate(args: {
+	model: SharedSlice;
+	typescript: boolean;
+	version: number;
+}): string {
+	const { model, typescript, version } = args;
+
+	const pascalName = pascalCase(model.name);
+
+	const v5TS = svelte`
+		<script lang="ts">
+			import type { Content } from '@prismicio/client';
+			import type { SliceComponentProps } from '@prismicio/svelte';
+
+			type Props = SliceComponentProps<Content.${pascalName}Slice>;
+
+			const { slice }: Props = $props();
+		</script>
+
+		<section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+			${PLACEHOLDER}
+		</section>
+	`;
+
+	const v5JS = svelte`
+		<script>
+			/* @typedef {import("@prismicio/client").Content} Content */
+			/* @typedef {import("@prismicio/svelte").SliceComponentProps} SliceComponentProps */
+
+			/* @type {SliceComponentProps<Content.${pascalName}Slice>} */
+			const { slice } = $props();
+		</script>
+
+		<section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+			${PLACEHOLDER}
+		</section>
+	`;
+
+	const v4TS = svelte`
+		<script lang="ts">
+			import type { Content } from '@prismicio/client';
+
+			export let slice: Content.${pascalName}Slice;
+		</script>
+
+		<section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+			${PLACEHOLDER}
+		</section>
+	`;
+
+	const v4JS = svelte`
+		<script>
+			/** @type {import("@prismicio/client").Content.${pascalName}Slice} */
+			export let slice;
+		</script>
+
+		<section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+			${PLACEHOLDER}
+		</section>
+	`;
+
+	if (typescript) {
+		return version <= 4 ? v4TS : v5TS;
+	}
+
+	return version <= 4 ? v4JS : v5JS;
+}