@slicemachine/adapter-sveltekit 0.3.78-alpha.dependabot-npm-and-yarn-nuxt-3-16-0.1 → 0.3.78-alpha.lh-svelte5.2

package/src/hooks/slice-create.ts

@@ -11,6 +11,7 @@ import {
 import { source } from "common-tags";
 
 import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
+import { checkIsSvelte5 } from "../lib/checkIsSvelte5";
 import { pascalCase } from "../lib/pascalCase";
 import { rejectIfNecessary } from "../lib/rejectIfNecessary";
 import { upsertSliceLibraryIndexFile } from "../lib/upsertSliceLibraryIndexFile";
@@ -35,6 +36,7 @@ const createComponentFile = async ({
 		helpers,
 		options,
 	});
+	const isSvelte5 = await checkIsSvelte5({ helpers });
 
 	const placeholder = `
 		Placeholder component for {slice.slice_type} (variation: {slice.variation}) slices.
@@ -68,29 +70,60 @@ const createComponentFile = async ({
 
 	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 if (isSvelte5) {
+		if (isTypeScriptProject) {
+			contents = source`
+				<script lang="ts">
+					import type { Content } from '@prismicio/client';
+
+					interface Props {
+						slice: Content.${pascalName}Slice;
+					}
+
+					let { slice }: Props = $props();
+				</script>
+
+				<section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+					${placeholder}
+				</section>
+			`;
+		} else {
+			contents = source`
+				<script>
+					/** @type {{ slice: import("@prismicio/client").Content.${pascalName}Slice }} */
+					let { slice } = $props();
+				</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>
-		`;
+		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>
+			`;
+		}
 	}
 
 	await writeSliceFile({

package/src/lib/checkIsSvelte5.ts

@@ -0,0 +1,49 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+import { readProjectFile } from "@slicemachine/plugin-kit/fs";
+import semver from "semver";
+
+import { PluginOptions } from "../types";
+
+export const checkIsSvelte5 = (args: CheckIsSvelteNArgs): Promise<boolean> => {
+	return checkIsSvelteN(5, args);
+};
+
+type CheckIsSvelteNArgs = {
+	helpers: SliceMachineContext<PluginOptions>["helpers"];
+};
+
+const checkIsSvelteN = async (
+	version: number,
+	args: CheckIsSvelteNArgs,
+): Promise<boolean> => {
+	try {
+		const packageJsonContent = await readProjectFile({
+			filename: "package.json",
+			encoding: "utf8",
+			helpers: args.helpers,
+		});
+
+		const packageJson = JSON.parse(packageJsonContent);
+		const allDependencies: Record<string, string> = {
+			...packageJson.dependencies,
+			...packageJson.devDependencies,
+		};
+		const svelteVersion = allDependencies.svelte;
+
+		// Assume version doesn't match when no version is found or on special cases.
+		if (
+			!svelteVersion ||
+			["latest", "next", "beta", "alpha", "dev", "*"].includes(svelteVersion)
+		) {
+			return false;
+		}
+
+		// Try to get the minimum version.
+		const minVersion = semver.minVersion(svelteVersion) ?? svelteVersion;
+
+		// Check if the version is a match.
+		return semver.major(minVersion) === version;
+	} catch (error) {
+		return false;
+	}
+};

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 { checkIsSvelte5 } from "./lib/checkIsSvelte5";
 
 export const plugin = defineSliceMachinePlugin<PluginOptions>({
 	meta: {
@@ -200,14 +201,20 @@ export const plugin = defineSliceMachinePlugin<PluginOptions>({
 		////////////////////////////////////////////////////////////////
 
 		hook("slice-template-library:read", async (data, context) => {
+			const isSvelte5 = await checkIsSvelte5({ helpers: context.helpers });
+
 			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: isSvelte5
+						? "javascript.svelte"
+						: "javascript.with-let-props.svelte",
+					ts: isSvelte5
+						? "typescript.svelte"
+						: "typescript.with-let-props.svelte",
 				},
 			});
 		});