chore(deps-dev): upgrade Svelte and related packages; refactor Notifi…

…cationList and page components for better structure

package.json

@@ -30,18 +30,18 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/package": "^2.2.1",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@testing-library/svelte": "^4.0.3",
     "rome": "12.1.3",
     "jsdom": "^22.1.0",
     "publint": "^0.2.3",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.5.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "tslib": "^2.6.1",
-    "typescript": "^5.1.6",
-    "vite": "^5.0.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4",
     "vitest": "^1.0.0"
   },
   "svelte": "./dist/index.js",

src/lib/components/NotificationList.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   export enum Position {
     TopRight = 'top_right',
     TopLeft = 'top_left',
@@ -29,14 +29,24 @@
 
   import type { Notification as INotification } from '$lib/stores/notifications';
 
-  let notificationsList: INotification[] = [];
+  let notificationsList: INotification[] = $state([]);
 
-  let className = '';
-  export { className as class };
+  
 
-  export let style: string = '';
 
-  export let position: Position = Position.TopRight;
+  interface Props {
+    class?: string;
+    style?: string;
+    position?: Position;
+    children?: import('svelte').Snippet<[any]>;
+  }
+
+  let {
+    class: className = '',
+    style = '',
+    position = Position.TopRight,
+    children
+  }: Props = $props();
 
   // Use auto-subscriptions to avoid leaking memory on re-renders
   // Refer: https://svelte.dev/tutorial/auto-subscriptions
@@ -57,7 +67,7 @@
   {style}
 >
   {#each notificationsList as notification}
-    <slot {notification} />
+    {@render children?.({ notification, })}
   {/each}
 </ul>
 

src/routes/+page.svelte

@@ -6,11 +6,13 @@
   };
 </script>
 
-<button on:click={success}> Append Success </button>
+<button onclick={success}> Append Success </button>
 
-<NotificationList let:notification>
-  <li>
-    <strong>{notification.title}</strong>
-    <p>{notification.message}</p>
-  </li>
+<NotificationList >
+  {#snippet children({ notification })}
+    <li>
+      <strong>{notification.title}</strong>
+      <p>{notification.message}</p>
+    </li>
+  {/snippet}
 </NotificationList>

svelte.config.js

@@ -5,7 +5,9 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
-  preprocess: vitePreprocess(),
+  preprocess: vitePreprocess({
+    script: true,
+  }),
 
   kit: {
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.