update to runes

README.md

@@ -1,8 +1,15 @@
+
 # README
 
-## About
+## Links
 
-This is the official Wails Svelte-TS template.
+ - [gorm](https://gorm.io/docs/)
+ - [Flowbyte UI lib](https://flowbite-svelte.com/docs/pages/introduction)
+ - [Tailwind](https://tailwindcss.com/docs/flex-basis)
+
+## Branches:
+ - main: in memory
+ - gorm-sqlite: gorm with SQLite and one to many association.
 
 ## Live Development
 
@@ -14,3 +21,4 @@ to this in your browser, and you can call your Go code from devtools.
 ## Building
 
 To build a redistributable, production mode package, use `wails build`.
+

frontend/package.json

@@ -10,19 +10,19 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tsconfig/svelte": "^3.0.0",
     "autoprefixer": "^10.4.20",
     "flowbite": "^3.1.1",
     "flowbite-svelte": "^0.47.4",
     "flowbite-svelte-icons": "^2.0.2",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.8.0",
-    "svelte-preprocess": "^4.10.7",
     "svelte-routing": "^2.13.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-preprocess": "^6.0.0",
     "tailwindcss": "^3.4.9",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.4",
-    "vite": "^3.0.7"
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
   }
 }

frontend/package.json.md5

@@ -1 +1 @@
-a5a8c3695f34d6c9bafb2ee7f70bf99a
+ecca169d2f4300be13c05467ed335c56

frontend/src/App.svelte

@@ -1,22 +1,20 @@
 <script lang="ts">
   import "./app.css";
-  import { Navbar, NavBrand, DarkMode } from "flowbite-svelte";
-  import { Router, Route } from "svelte-routing";
+  import { Router, Route, Link } from "svelte-routing";
   import Home from "./routes/Home.svelte";
   import "./app.css";
-  export let url = "";
+  import { Navbar, NavBrand, DarkMode } from "flowbite-svelte";
+  let url: string = $state();
 </script>
 
 <main class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-800">
-  <Navbar>
-    <NavBrand>
-      <span>Wails</span>
-    </NavBrand>
-    <DarkMode />
-  </Navbar>
-  <Router {url}>
-    <div>
-      <Route path="/"><Home /></Route>
-    </div>
+  <Router bind:url>
+    <Navbar>
+      <NavBrand>
+        <Link to="/">HOME</Link>
+      </NavBrand>
+      <DarkMode />
+    </Navbar>
+    <Route path="/"><Home /></Route>
   </Router>
 </main>

frontend/src/main.ts

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

frontend/src/routes/Home.svelte

@@ -18,8 +18,8 @@
     TableBodyCell,
   } from "flowbite-svelte";
 
-  let name: string;
-  let thingsList: things.Thing[] = [];
+  let name: string = $state();
+  let thingsList: things.Thing[] = $state([]);
 
   function update() {
     GetThings().then((ts) => {
@@ -40,7 +40,7 @@
   onMount(update);
 </script>
 
-<form class="max-w-96 m-5 grid-cols-1 gap-10" on:submit={submit}>
+<form class="max-w-96 m-5 grid-cols-1 gap-10" onsubmit={submit}>
   <div class="m-5">
     <Label for="first_name" class="mb-2">First name</Label>
     <Input type="text" placeholder="John" bind:value={name} required />

frontend/svelte.config.js

@@ -1,7 +1,5 @@
-import sveltePreprocess from 'svelte-preprocess'
 
 export default {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
-  preprocess: sveltePreprocess()
 }