chore(lucia): update demo to use svelte 5 syntax (#141)

sveltejs · Oct 15, 2024 · 6872dd8 · 6872dd8
1 parent 98b882e
commit 6872dd8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/young-pianos-arrive.md b/.changeset/young-pianos-arrive.md
@@ -0,0 +1,5 @@
+---
+"@sveltejs/adders": patch
+---
+
+chore(lucia): update demo to use svelte 5 syntax
diff --git a/packages/adders/lucia/index.ts b/packages/adders/lucia/index.ts
@@ -485,19 +485,20 @@ export default defineAdder({
 		{
 			name: ({ kit }) => `${kit!.routesDirectory}/demo/login/+page.svelte`,
 			condition: ({ options }) => options.demo,
-			content({ content, typescript, kit }) {
+			content({ content, dependencyVersion, typescript, kit }) {
 				if (content) {
 					const filePath = `${kit!.routesDirectory}/demo/login/+page.svelte`;
 					log.warn(`Existing ${colors.yellow(filePath)} file. Could not update.`);
 					return content;
 				}
 
-				const [ts] = utils.createPrinter(typescript);
+				const svelte5 = !!dependencyVersion('svelte')?.startsWith('5');
+				const [ts, s5] = utils.createPrinter(typescript, svelte5);
 				return dedent`
 					<script ${ts(`lang='ts'`)}>
 						import { enhance } from '$app/forms';
 						${ts(`import type { ActionData } from './$types';\n`)}
-						export let form${ts(': ActionData')};
+						${s5(`let { form }${ts(': { form: ActionData }')} = $props();`, `export let form${ts(': ActionData')};`)}
 					</script>
 
 					<h1>Login/Register</h1>
@@ -558,19 +559,20 @@ export default defineAdder({
 		{
 			name: ({ kit }) => `${kit!.routesDirectory}/demo/+page.svelte`,
 			condition: ({ options }) => options.demo,
-			content({ content, typescript, kit }) {
+			content({ content, dependencyVersion, typescript, kit }) {
 				if (content) {
 					const filePath = `${kit!.routesDirectory}/demo/+page.svelte`;
 					log.warn(`Existing ${colors.yellow(filePath)} file. Could not update.`);
 					return content;
 				}
 
-				const [ts] = utils.createPrinter(typescript);
+				const svelte5 = !!dependencyVersion('svelte')?.startsWith('5');
+				const [ts, s5] = utils.createPrinter(typescript, svelte5);
 				return dedent`
 					<script ${ts(`lang='ts'`)}>
 						import { enhance } from '$app/forms';
 						${ts(`import type { PageServerData } from './$types';\n`)}
-						export let data${ts(': PageServerData')};
+						${s5(`let { data }${ts(': { data: PageServerData }')} = $props();`, `export let data${ts(': PageServerData')};`)}
 					</script>
 
 					<h1>Hi, {data.user.username}!</h1>