@slicemachine/adapter-sveltekit 0.3.78-beta.8 → 0.3.78

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;
+}

package/src/hooks/slice-create.ts

@@ -8,14 +8,14 @@ import {
 	writeSliceFile,
 	writeSliceModel,
 } from "@slicemachine/plugin-kit/fs";
-import { source } from "common-tags";
 
 import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
-import { pascalCase } from "../lib/pascalCase";
+import { getSvelteMajor } from "../lib/getSvelteMajor";
 import { rejectIfNecessary } from "../lib/rejectIfNecessary";
 import { upsertSliceLibraryIndexFile } from "../lib/upsertSliceLibraryIndexFile";
 
 import type { PluginOptions } from "../types";
+import { sliceTemplate } from "./slice-create.templates";
 
 type Args = {
 	data: SliceCreateHookData;
@@ -27,71 +27,12 @@ const createComponentFile = async ({
 	actions,
 	options,
 }: Args) => {
-	const pascalName = pascalCase(data.model.name);
+	const { model, componentContents } = data;
 
-	let contents: string;
-
-	const isTypeScriptProject = await checkIsTypeScriptProject({
-		helpers,
-		options,
-	});
-
-	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
--->`;
-
-	if (data.componentContents) {
-		contents = data.componentContents;
-	} else if (isTypeScriptProject) {
-		contents = source`
-			<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>
-		`;
-	} else {
-		contents = source`
-			<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>
-		`;
-	}
+	const typescript = await checkIsTypeScriptProject({ helpers, options });
+	const contents =
+		componentContents ??
+		sliceTemplate({ model, typescript, version: await getSvelteMajor() });
 
 	await writeSliceFile({
 		libraryID: data.libraryID,

package/src/lib/getSvelteMajor.ts

@@ -0,0 +1,23 @@
+import { join } from "node:path";
+
+import { requireResolve } from "./requireResolve";
+
+export const getSvelteMajor = async (): Promise<number> => {
+	// A dynamic import lets us easily mock the module.
+	const { readFile } = await import("node:fs/promises");
+
+	const packageJSONPath = requireResolve(
+		"svelte/package.json",
+		join(process.cwd(), "package.json"),
+	);
+	const { version } = JSON.parse(await readFile(packageJSONPath, "utf8"));
+
+	const major = Number.parseInt(version.split(".")[0]);
+	if (major === Number.NaN) {
+		throw new Error(
+			`Unable to parse svelte's installed version number: "${version}"`,
+		);
+	}
+
+	return major;
+};

package/src/lib/requireResolve.ts

@@ -0,0 +1,30 @@
+import _module, { createRequire } from "node:module";
+
+/**
+ * Resolves a module path with `createRequire().resolve()` with Yarn PnP
+ * support.
+ *
+ * @param id - Module to resolve.
+ * @param from - Location to resolve the module from.
+ *
+ * @returns - Resolved module path.
+ */
+export const requireResolve = (id: string, from: string): string => {
+	let resolvedID = id;
+
+	// Support Yarn PnP
+	if (
+		process.versions.pnp &&
+		"findPnpApi" in _module &&
+		typeof _module.findPnpApi === "function"
+	) {
+		const pnpApi = _module.findPnpApi(from);
+		if (pnpApi) {
+			resolvedID = pnpApi.resolveRequest(id, from);
+		}
+	}
+
+	const require = createRequire(from);
+
+	return require.resolve(resolvedID);
+};

package/src/plugin.ts

@@ -44,6 +44,7 @@ import * as Hero from "./sliceTemplates/Hero";
 import * as CallToAction from "./sliceTemplates/CallToAction";
 import * as AlternateGrid from "./sliceTemplates/AlternateGrid";
 import * as CustomerLogos from "./sliceTemplates/CustomerLogos";
+import { getSvelteMajor } from "./lib/getSvelteMajor";
 
 export const plugin = defineSliceMachinePlugin<PluginOptions>({
 	meta: {
@@ -200,14 +201,16 @@ export const plugin = defineSliceMachinePlugin<PluginOptions>({
 		////////////////////////////////////////////////////////////////
 
 		hook("slice-template-library:read", async (data, context) => {
+			const version = await getSvelteMajor();
+
 			return await readSliceTemplateLibrary({
 				...data,
 				...context,
 				dirName: path.dirname(fileURLToPath(new URL(import.meta.url))),
 				templates: [Hero, CustomerLogos, AlternateGrid, CallToAction],
 				componentFileNames: {
-					js: "javascript.svelte",
-					ts: "typescript.svelte",
+					js: version <= 4 ? "javascript.4.svelte" : "javascript.svelte",
+					ts: version <= 4 ? "typescript.4.svelte" : "typescript.svelte",
 				},
 			});
 		});

package/src/simulator/SliceSimulator.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import {
 		SimulatorManager,
 		StateEventType,
@@ -10,13 +10,14 @@
 		simulatorClass,
 		simulatorRootClass,
 	} from "@prismicio/simulator/kit";
+	import { type SliceZone } from "@prismicio/client";
 
 	const defaultProps = getDefaultProps();
 
 	export let zIndex = defaultProps.zIndex;
 	export let background = defaultProps.background;
 
-	let slices = getDefaultSlices();
+	let slices: SliceZone = getDefaultSlices();
 	let message = getDefaultMessage();
 
 	if (typeof window !== "undefined") {