feat!: update Svelte templates to Svelte 5 (#28)

package.json

@@ -2,7 +2,7 @@
   "name": "@vite-pwa/create-pwa",
   "type": "module",
   "version": "0.4.3",
-  "packageManager": "[email protected].2",
+  "packageManager": "[email protected].3",
   "description": "PWA Templates",
   "author": "antfu <[email protected]>",
   "license": "MIT",
@@ -42,7 +42,7 @@
     "dev": "unbuild --stub",
     "build": "unbuild",
     "lint": "eslint .",
-    "lint-fix": "nr lint --fix",
+    "lint:fix": "nr lint --fix",
     "prepublishOnly": "npm run build",
     "release": "bumpp && npm publish"
   },
@@ -61,10 +61,10 @@
     "kolorist": "^1.8.0",
     "magicast": "^0.3.4",
     "minimist": "^1.2.8",
-    "package-manager-detector": "^0.2.0",
+    "package-manager-detector": "^0.2.2",
     "prompts": "^2.4.2",
     "tsx": "^4.9.1",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
     "unbuild": "^2.0.0",
     "vitest": "^1.6.0"
   }

src/customize/svelte.ts

@@ -30,12 +30,12 @@ export function customize(prompts: PromptsData) {
         )
         .replace('offlineReady.set(false)', '')
         .replace(
-          '$: toast = $offlineReady || $needRefresh',
-          '$: toast = $needRefresh',
+          'let toast = $derived($offlineReady || $needRefresh)',
+          'let toast = $derived($needRefresh)',
         )
         .replace(
-          '$: message = $offlineReady ? \'App ready to work offline\' : ($needRefresh ? \'New content available, click on reload button to update.\' : \'\')',
-          '$: message = $needRefresh ? \'New content available, click on reload button to update.\' : \'\'',
+          'let message = $derived($offlineReady ? \'App ready to work offline\' : ($needRefresh ? \'New content available, click on reload button to update.\' : \'\'))',
+          'let message = $derived($needRefresh ? \'New content available, click on reload button to update.\' : \'\')',
         )
     }
 

src/customize/sveltekit.ts

@@ -8,14 +8,14 @@ import { addPackageObject, editFile } from '../utils'
 import { includeDependencies } from '../dependencies'
 import { preparePWAOptions } from '../pwa'
 import { MagicastSvelteKitOptions } from '../vite'
+import { detect } from 'package-manager-detector'
 import { PWAAssetsVersion, SvelteKitPWAVersion, VitePluginPWAVersion, WorkboxVersion } from '../versions'
 
-export function customize(prompts: PromptsData) {
+export async function customize(prompts: PromptsData) {
   const {
     cdProjectName,
     templateDir,
     rootPath,
-    pkgManager,
     prompt,
     customServiceWorker,
     pwaAssets,
@@ -57,11 +57,23 @@ ${appDts}`,
 
   // copy/override src/routes/+layout.svelte
   const existsLayout = fs.existsSync(path.resolve(rootPath, 'src', 'routes', '+layout.svelte'))
+  const layoutFile = path.resolve(rootPath, 'src', 'routes', '+layout.svelte')
   fs.copyFileSync(
     path.resolve(templateDir, 'src', 'routes', `${existsLayout ? 'app-layout' : 'layout'}.svelte`),
-    path.resolve(rootPath, 'src', 'routes', '+layout.svelte'),
+    layoutFile,
   )
 
+  if (ts) {
+    editFile(layoutFile, (content) => {
+      content = content.replace(/<script>/, '<script lang="ts">')
+      return content.replace('let { children } = $props();', `
+    interface Props {
+      children?: import('svelte').Snippet;
+    }  
+    let { children }: Props = $props();`)
+    })
+  }
+
   // copy/override src/routes/+page.ts for base and lib templates
   fs.copyFileSync(
     path.resolve(templateDir, 'src', 'routes', '+page.ts'),
@@ -121,6 +133,10 @@ ${appDts}`,
     )
   }
   addPackageObject('devDependencies', devDependencies, pkg, true)
+
+  const pkgManager = await detect({
+    cwd: rootPath,
+  }).then(res => res?.name || 'npm')
   // script + resolutions: ignoring dev dependencies
   includeDependencies(prompts, pkgManager === 'npm', pkg, true)
 
@@ -130,9 +146,9 @@ ${appDts}`,
   console.log('\n\nPWA configuration done. Now run:\n')
   if (rootPath !== process.cwd()) {
     console.log(
-            `  cd ${
-                cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName
-            }`,
+        `  cd ${
+            cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName
+        }`,
     )
   }
   switch (pkgManager) {
@@ -177,14 +193,14 @@ function copyPWABadge(ts: boolean, jsTs: boolean, prompts: PromptsData) {
         'const { needRefresh, updateServiceWorker } = useRegisterSW({',
       )
       .replace('offlineReady.set(false)', '')
-      .replace(
-        '$: toast = $offlineReady || $needRefresh',
-        '$: toast = $needRefresh',
-      )
-      .replace(
-        '$: message = $offlineReady ? \'App ready to work offline\' : ($needRefresh ? \'New content available, click on reload button to update.\' : \'\')',
-        '$: message = $needRefresh ? \'New content available, click on reload button to update.\' : \'\'',
-      )
+        .replace(
+            'let toast = $derived($offlineReady || $needRefresh)',
+            'let toast = $derived($needRefresh)',
+        )
+        .replace(
+            'let message = $derived($offlineReady ? \'App ready to work offline\' : ($needRefresh ? \'New content available, click on reload button to update.\' : \'\'))',
+            'let message = $derived($needRefresh ? \'New content available, click on reload button to update.\' : \'\')',
+        )
   }
 
   if (reloadSW) {

src/prompts.ts

@@ -167,7 +167,7 @@ export const FRAMEWORKS = (<Framework[]>[
         name: 'custom-svelte-kit',
         display: 'SvelteKit ↗',
         color: red,
-        customCommand: 'npm create svelte@latest TARGET_DIR',
+        customCommand: 'npm exec sv create TARGET_DIR',
         enabled: true,
       },
     ],

templates/template-custom-svelte-kit/src/lib/PWABadge-js.svelte

@@ -51,8 +51,8 @@
       needRefresh.set(false)
   }
 
-  $: toast = $offlineReady || $needRefresh
-  $: message = $offlineReady ? 'App ready to work offline' : ($needRefresh ? 'New content available, click on reload button to update.' : '')
+  let toast = $derived($offlineReady || $needRefresh)
+  let message = $derived($offlineReady ? 'App ready to work offline' : ($needRefresh ? 'New content available, click on reload button to update.' : ''))
 </script>
 
 {#if toast}
@@ -68,11 +68,11 @@
     </div>
     <div class="buttons">
       {#if $needRefresh}
-        <button type="button" on:click={() => updateServiceWorker(true)}>
+        <button type="button" onclick={() => updateServiceWorker(true)}>
           Reload
         </button>
       {/if}
-      <button type="button" on:click={close}>
+      <button type="button" onclick={close}>
         Close
       </button>
     </div>

templates/template-custom-svelte-kit/src/lib/PWABadge-ts.svelte

@@ -48,8 +48,8 @@
       needRefresh.set(false)
   }
 
-  $: toast = $offlineReady || $needRefresh
-  $: message = $offlineReady ? 'App ready to work offline' : ($needRefresh ? 'New content available, click on reload button to update.' : '')
+  let toast = $derived($offlineReady || $needRefresh)
+  let message = $derived($offlineReady ? 'App ready to work offline' : ($needRefresh ? 'New content available, click on reload button to update.' : ''))
 </script>
 
 {#if toast}
@@ -65,11 +65,11 @@
     </div>
     <div class="buttons">
       {#if $needRefresh}
-        <button type="button" on:click={() => updateServiceWorker(true)}>
+        <button type="button" onclick={() => updateServiceWorker(true)}>
           Reload
         </button>
       {/if}
-      <button type="button" on:click={close}>
+      <button type="button" onclick={close}>
         Close
       </button>
     </div>

templates/template-custom-svelte-kit/src/routes/app-layout.svelte

@@ -4,7 +4,8 @@
 	import { pwaInfo } from 'virtual:pwa-info';
 	import { pwaAssetsHead } from 'virtual:pwa-assets/head';
 
-	$: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : '';
+	let { children } = $props();
+	let webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '')
 </script>
 
 <svelte:head>
@@ -21,7 +22,7 @@
 	<Header />
 
 	<main>
-		<slot />
+		{@render children?.()}
 	</main>
 
 	<footer>

templates/template-custom-svelte-kit/src/routes/layout.svelte

@@ -2,7 +2,8 @@
 	import { pwaInfo } from 'virtual:pwa-info';
 	import { pwaAssetsHead } from 'virtual:pwa-assets/head';
 
-	$: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : '';
+	let { children } = $props();
+	let webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '')
 </script>
 
 <svelte:head>
@@ -17,7 +18,7 @@
 
 <div class="app">
 	<main>
-		<slot />
+		{@render children?.()}
 	</main>
 	{#await import('$lib/PWABadge.svelte') then { default: PWABadge }}
 		<PWABadge />

templates/template-svelte-ts/package.json

@@ -10,14 +10,14 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tsconfig/svelte": "^5.0.4",
     "@vite-pwa/assets-generator": "^0.2.4",
-    "svelte": "^4.2.15",
-    "svelte-check": "^3.7.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.10",
+    "svelte": "^5.0.4",
+    "svelte-check": "^4.0.5",
+    "tslib": "^2.8.0",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
     "vite-plugin-pwa": "^0.20.0",
     "workbox-window": "^7.1.0"
   }

templates/template-svelte-ts/src/lib/Counter.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  let count: number = 0
+  let count: number = $state(0)
   const increment = () => {
     count += 1
   }
 </script>
 
-<button on:click={increment}>
+<button onclick={increment}>
   count is {count}
 </button>

templates/template-svelte-ts/src/lib/PWABadge.svelte

@@ -48,8 +48,8 @@
       needRefresh.set(false)
   }
 
-  $: toast = $offlineReady || $needRefresh
-  $: message = $offlineReady ? 'App ready to work offline' : ($needRefresh ? 'New content available, click on reload button to update.' : '')
+  let toast = $derived($offlineReady || $needRefresh)
+  let message = $derived($offlineReady ? 'App ready to work offline' : ($needRefresh ? 'New content available, click on reload button to update.' : ''))
 </script>
 
 {#if toast}
@@ -65,11 +65,11 @@
     </div>
     <div class="buttons">
       {#if $needRefresh}
-        <button type="button" on:click={() => updateServiceWorker(true)}>
+        <button type="button" onclick={() => updateServiceWorker(true)}>
           Reload
         </button>
       {/if}
-      <button type="button" on:click={close}>
+      <button type="button" onclick={close}>
         Close
       </button>
     </div>

templates/template-svelte-ts/tsconfig.json

@@ -13,7 +13,8 @@
      */
     "allowJs": true,
     "checkJs": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "moduleDetection": "force"
   },
   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
   "references": [{ "path": "./tsconfig.node.json" }]

templates/template-svelte-ts/tsconfig.node.json

@@ -1,10 +1,13 @@
 {
   "compilerOptions": {
     "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "noEmit": true,
+    "noUncheckedSideEffectImports": true
   },
   "include": ["vite.config.ts"]
 }

templates/template-svelte/jsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
     "target": "ESNext",
     "module": "ESNext",
     /**

templates/template-svelte/package.json

@@ -9,10 +9,10 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@vite-pwa/assets-generator": "^0.2.4",
-    "svelte": "^4.2.15",
-    "vite": "^5.2.10",
+    "svelte": "^5.1.3",
+    "vite": "^5.4.10",
     "vite-plugin-pwa": "^0.20.0",
     "workbox-window": "^7.1.0"
   }

templates/template-svelte/src/lib/Counter.svelte

@@ -1,10 +1,10 @@
 <script>
-  let count = 0
+  let count = $state(0)
   const increment = () => {
     count += 1
   }
 </script>
 
-<button on:click={increment}>
+<button onclick={increment}>
   count is {count}
 </button>

templates/template-svelte/src/lib/PWABadge.svelte

@@ -51,8 +51,8 @@
       needRefresh.set(false)
   }
 
-  $: toast = $offlineReady || $needRefresh
-  $: message = $offlineReady ? 'App ready to work offline' : ($needRefresh ? 'New content available, click on reload button to update.' : '')
+  let toast = $derived($offlineReady || $needRefresh)
+  let message = $derived($offlineReady ? 'App ready to work offline' : ($needRefresh ? 'New content available, click on reload button to update.' : ''))
 </script>
 
 {#if toast}
@@ -68,11 +68,11 @@
     </div>
     <div class="buttons">
       {#if $needRefresh}
-        <button type="button" on:click={() => updateServiceWorker(true)}>
+        <button type="button" onclick={() => updateServiceWorker(true)}>
           Reload
         </button>
       {/if}
-      <button type="button" on:click={close}>
+      <button type="button" onclick={close}>
         Close
       </button>
     </div>