Migrate to newer version of things

src/App.svelte

@@ -1,44 +1,37 @@
 <script lang="ts">
-  import ServerList from "./lib/ServerList.svelte";
-  import ServerItem from "./lib/ServerItem.svelte";
+	import ServerList from "./lib/ServerList.svelte";
+	import ServerItem from "./lib/ServerItem.svelte";
 </script>
 
 <header>
-  <img
-    src="/dailitation_logo.svg"
-    alt="The dailitation logo"
-    class="w-3/4 sm:w-1/3"
-  />
+	<img
+		src="/dailitation_logo.svg"
+		alt="The dailitation logo"
+		class="w-3/4 sm:w-1/3"
+	/>
 </header>
 <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>
-      <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>
-      <ServerItem name="asusarch" ip="10.10.10.9:345" />
-    </ServerList>
-  </details>
+	<details class="m-2">
+		<summary>Shared owner servers</summary>
+		<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>
+	</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="Proper" ip="10.10.10.15:523" />
+		</ServerList>
+	</details>
+	<details class="m-2">
+		<summary>lines-of-codes (GameCreator)</summary>
+		<ServerList>
+			<ServerItem name="asusarch" ip="10.10.10.9:345" />
+		</ServerList>
+	</details>
 </main>

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,8 +1,9 @@
+import { mount } from 'svelte'
 import './app.css'
 import App from './App.svelte'
 
-const app = new App({
-  target: document.getElementById('app')!,
+const app = mount(App, {
+    target: document.getElementById('app')!,
 })
 
 export default app