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

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