Migrate to newer version of things

package.json

@@ -10,16 +10,15 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@tsconfig/svelte": "^5.0.2",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.7",
-    "tailwindcss": "^3.4.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tsconfig/svelte": "^5.0.5",
+    "svelte": "^5.39.6",
+    "svelte-check": "^4.3.2",
+    "tailwindcss": "^4.1.13",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.7"
   },
-  "packageManager": "pnpm@9.0.6+sha1.648f6014eb363abb36618f2ba59282a9eeb3e879"
+  "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a"
 }

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+onlyBuiltDependencies:
+  - '@tailwindcss/oxide'
+  - esbuild
+  - svelte-preprocess

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src/App.svelte

@@ -13,28 +13,21 @@
 <main>
 	<details class="m-2">
 		<summary>Shared owner servers</summary>
-    <div class="m-2">
-      <p>This list servers that are shared between two or more owners.</p>
+		<p class="m-2">
+			This list servers that are shared between two or more owners.
+		</p>
 		<ServerList>
 			<ServerItem name="Delta" ip="10.10.11.1:1229" />
 		</ServerList>
-    </div>
 	</details>
 	<details class="m-2">
 		<summary>Diskette</summary>
 		<ServerList>
 			<ServerItem name="Butterfly" ip="10.10.10.1:1228" />
 			<ServerItem name="Thetic" ip="10.10.10.2:58020" />
-      <ServerItem name="NonGNU" ip="10.10.10.7:58040" />
 			<ServerItem name="Proper" ip="10.10.10.15:523" />
 		</ServerList>
 	</details>
-  <details class="m-2">
-    <summary>Techit</summary>
-    <ServerList>
-      <ServerItem name="Copperplate" ip="10.10.10.8:28921" />
-    </ServerList>
-  </details>
 	<details class="m-2">
 		<summary>lines-of-codes (GameCreator)</summary>
 		<ServerList>

src/app.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

src/lib/ServerItem.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
-	export let name: String;
-	export let ip: String;
+	let {
+		name,
+		ip,
+	}: {
+		name: string;
+		ip: string;
+	} = $props();
 </script>
 
 <li class="m-2 p-2 rounded border shadow">

src/lib/ServerList.svelte

@@ -1,3 +1,8 @@
+<script lang="ts">
+    let { children } = $props();
+</script>
+
+
 <ol class="grid grid-flow-row md:grid-cols-2 lg:grid-cols-3">
-	<slot />
+	{@render children()}
 </ol>

src/main.ts

@@ -1,7 +1,8 @@
+import { mount } from 'svelte'
 import './app.css'
 import App from './App.svelte'
 
-const app = new App({
+const app = mount(App, {
     target: document.getElementById('app')!,
 })
 

tailwind.config.js

@@ -1,11 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-    content: [
-        "./src/**/*.{svelte,css}"
-    ],
-    theme: {
-        extend: {},
-    },
-    plugins: [],
-}
-

vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()],
+    plugins: [svelte(), tailwindcss()],
 })