upgrade to svelte 5

seriousme · Oct 27, 2024 · d2294a4 · d2294a4
1 parent 667e364
commit d2294a4
Show file tree

Hide file tree

Showing 7 changed files with 275 additions and 909 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -9,8 +9,8 @@
 		"preview": "vite preview"
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.19",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"svelte": "^5.0.0",
 		"vite": "^5.4.8"
 	}
 }
diff --git a/client/src/App.svelte b/client/src/App.svelte
@@ -1,11 +1,11 @@
 <script>
-export let page;
 let error;
 import Switch from "./Switch.svelte";
 import Blinds from "./Blinds.svelte";
 import Forecast from "./Forecast.svelte";
 import { topics, controls } from "./config.js";
 import MqttClient from "./mqttclient.js";
+let { page = $bindable() } = $props();
 
 function settingsPage() {
 	page = "settings";
@@ -18,14 +18,13 @@ function controlsPage() {
 const listItemClass =
 	"list-group-item d-flex justify-content-between align-items-center";
 
-const state = {};
+const state = $state({});
 const mqttClient = new MqttClient(topics, (topic, value) => {
 	state[topic] = value;
 });
 
-function handleMsg(event) {
-	const m = event.detail;
-	mqttClient.publish(`${m.topic}/set`, m.msg);
+function createSendMessage(topic) {
+	return (message) => mqttClient.publish(`${topic}/set`, message);
 }
 
 // start the show
@@ -41,8 +40,8 @@ controlsPage();
           class="navbar-brand my-2 my-sm-0"
           role="link"
           tabindex="-1"
-          on:click={settingsPage}
-          on:keypress={settingsPage}
+          onclick={settingsPage}
+          onkeypress={settingsPage}
         >
           &vellip;
         </span>
@@ -56,9 +55,8 @@ controlsPage();
             <li class={listItemClass}>
               {item.label}
               <Switch
-                topic={item.topic}
                 value={state[item.topic]}
-                on:message={handleMsg}
+                sendMsg=createSendMessage(item.topic)
               />
             </li>
           {/if}
@@ -67,7 +65,9 @@ controlsPage();
           {#if item.type === "blinds"}
             <li class={listItemClass}>
               {item.label}
-              <Blinds topic={item.topic} on:message={handleMsg} />
+              <Blinds 
+               sendMsg=createSendMessage(item.topic)
+              />
             </li>
           {/if}
         {/each}
@@ -81,8 +81,8 @@ controlsPage();
           class="navbar-brand font-weight-bold"
           role="link"
           tabindex="-1"
-          on:click={controlsPage}
-          on:keypress={controlsPage}
+          onclick={controlsPage}
+          onkeypress={controlsPage}
         >
           &times;
         </span>
@@ -94,18 +94,16 @@ controlsPage();
         <li class={listItemClass}>
           Automatisch schakelen op tijd
           <Switch
-            topic="config/auto"
             value={state["config/auto"]}
-            on:message={handleMsg}
+            sendMsg= { createSendMessage("config/auto") }
           />
         </li>
         {#if state["config/auto"] === "on"}
           <li class={listItemClass}>
             Automatische zonblokkering
             <Switch
-              topic="config/sunblock"
               value={state["config/sunblock"]}
-              on:message={handleMsg}
+              sendMsg= { createSendMessage("config/sunblock")}
             />
           </li>
           {#if state["config/sunblock"] === "on" && state["data/forecast"]}
@@ -115,9 +113,8 @@ controlsPage();
             <li class={listItemClass}>
               Gebruik weerbericht voor zonblokkering
               <Switch
-                topic="config/useweather"
                 value={state["config/useweather"]}
-                on:message={handleMsg}
+                sendMsg={ createSendMessage("config/useweather")}
               />
             </li>
           {/if}

diff --git a/client/src/Blinds.svelte b/client/src/Blinds.svelte
@@ -1,23 +1,16 @@
 <script>
-export let topic;
-import { createEventDispatcher } from "svelte";
-
-const dispatch = createEventDispatcher();
+let { sendMsg } = $props();
 
 const close = () => sendMsg("close");
 const stop = () => sendMsg("stop");
 const open = () => sendMsg("open");
-
-function sendMsg(msg) {
-	dispatch("message", { topic, msg });
-}
 </script>
 
 
 <div class="button-group pull-right">
-  <button class="btn btn-default" on:click={close}>Omlaag</button>
-  <button class="btn btn-default" on:click={stop}>Stop</button>
-  <button class="btn btn-default" on:click={open}>Omhoog</button>
+  <button class="btn btn-default" onclick={close}>Omlaag</button>
+  <button class="btn btn-default" onclick={stop}>Stop</button>
+  <button class="btn btn-default" onclick={open}>Omhoog</button>
 </div>
 
 

diff --git a/client/src/Forecast.svelte b/client/src/Forecast.svelte
@@ -1,8 +1,9 @@
 <script>
-export let data;
-let fdata = {};
+let { data } = $props();
+
+function parseData(data){
 try {
-	fdata = JSON.parse(data);
+	const fdata = JSON.parse(data);
 	const d = new Date(fdata.date);
 	fdata.localeDate = d.toLocaleDateString("nl-NL", {
 		weekday: "long",
@@ -11,41 +12,46 @@ try {
 		hour: "numeric",
 		minute: "numeric",
 	});
+  return fdata;
 } catch (error) {
-	fdata = data;
+	return data;
+}
 }
+ data = parseData(data);
 </script>
 
 <table>
+<tbody>
   <tr>
-    <th colspan="2">Weerbericht van {fdata.localeDate}</th>
+    <th colspan="2">Weerbericht van {data.localeDate}</th>
   </tr>
   <tr>
     <td>Weer:</td>
-    <td>{fdata.weer}</td>
+    <td>{data.weer}</td>
   </tr>
   <tr>
     <td>Max.:</td>
-    <td>{fdata.max_temp} C</td>
+    <td>{data.max_temp} C</td>
   </tr>
   <tr>
     <td>Min.:</td>
-    <td>{fdata.min_tem} C</td>
+    <td>{data.min_tem} C</td>
   </tr>
   <tr>
     <td>Zon:</td>
-    <td>{fdata.zond_perc_dag} %</td>
+    <td>{data.zond_perc_dag} %</td>
   </tr>
   <tr>
     <td>Neerslag:</td>
-    <td>{fdata.neersl_perc_dag} %</td>
+    <td>{data.neersl_perc_dag} %</td>
   </tr>
   <tr>
     <td>Wind:</td>
-    <td>{fdata.windbft} Bft</td>
+    <td>{data.windbft} Bft</td>
   </tr>
   <tr>
     <td>Richting:</td>
-    <td>{fdata.windr}</td>
+    <td>{data.windr}</td>
   </tr>
+  </tbody>
 </table>
diff --git a/client/src/Switch.svelte b/client/src/Switch.svelte
@@ -1,23 +1,22 @@
 <script>
-export let topic;
-export let value;
 const active = "btn btn-primary";
 const normal = "btn btn-default";
 import { createEventDispatcher } from "svelte";
+let { sendMsg, value } = $props();
 
 const dispatch = createEventDispatcher();
 function toggle() {
 	const msg = value === "on" ? "off" : "on";
-	dispatch("message", { topic, msg });
+  sendMsg(msg);
 }
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="btn-group btn-toggle pull-right"
   tabindex="-1"
-  on:click={toggle}
-  on:keydown={toggle}
+  onclick={toggle}
+  onkeydown={toggle}
   aria-pressed="false"
 >
   <button class={value == "on" ? active : normal}>Aan</button>

diff --git a/client/src/main.js b/client/src/main.js
@@ -1,6 +1,7 @@
 import App from "./App.svelte";
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
 	target: document.body,
 });