Merge pull request #9 from gotomi/update_svelte5

update

Author: gotomi

package-lock.json

@@ -9,16 +9,16 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/svelte": "^5.7.1",
+    "@astrojs/sitemap": "^3.2.0",
+    "@astrojs/svelte": "^6.0.0-beta.1",
     "apexcharts": "^3.53.0",
-    "astro": "^4.15.8",
+    "astro": "^5.0.0-beta.4",
     "axios": "^1.7.7",
     "kruk": "0.4.2",
     "svelte-apexcharts": "^1.0.2"
   },
   "dependencies": {
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.0-next.265",
     "typescript": "^5.6.2"
   }
 }

package.json

@@ -1,20 +1,20 @@
 <script>
   import Chart from "./Chart.svelte";
-  export let data;
-  export let title;
-  let which = 0;
-  $: options = data[which];
+  /** @type {{data: any, title: any}} */
+  let { data, title } = $props();
+  let which = $state(0);
+  let options = $derived(data[which]);
 </script>
 
 <h2>{title}</h2>
 <p><strong>Choose metric:</strong></p>
 <ul>
   {#each data as item, index}
     <li>
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
       <span
         class={which === index ? "active" : ""}
-        on:click={() => (which = index)}>{item.title.text}</span
+        onclick={() => (which = index)}>{item.title.text}</span
       >
     </li>
   {/each}

postcss.config.js

@@ -1,7 +1,8 @@
 <script>
   import { chart } from "svelte-apexcharts";
 
-  export let options = {
+  /** @type {{options?: any}} */
+  let { options = {
     chart: {
       type: "bar",
     },
@@ -14,7 +15,7 @@
     xaxis: {
       categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
     },
-  };
+  } } = $props();
 </script>
 
-<div use:chart={options} />
+<div use:chart={options}></div>

src/components/AllCharts.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let metric;
+  /** @type {{metric: any}} */
+  let { metric } = $props();
 
   const metricsMap = {
     CLS: { range: [0.1, 0.25], name: "Cumulative Layout Shift" },

src/components/Chart.svelte

@@ -1,6 +1,7 @@
 <script>
-    export let post;
     import UrlWithIcon from "./UrlWithIcon.svelte";
+    /** @type {{post: any}} */
+    let { post } = $props();
 
     const rank = ["good", "average", "poor"];
 

src/components/Legend.svelte

@@ -1,7 +1,8 @@
 <script>
-    export let data;
     import Metric from "../components/Metric.svelte";
     import Legend from "../components/Legend.svelte";
+    /** @type {{data: any}} */
+    let { data } = $props();
     function compareByDistribution(a, b) {
         const x = a.histogram[0];
         const y = b.histogram[0];

src/components/Metric.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let url;
+  /** @type {{url: any}} */
+  let { url } = $props();
   const icon =
     "https://www.google.com/s2/favicons?sz=16&domain_url=" +
     url.replace("https://", "");

src/components/MetricsByUrl.svelte

@@ -1,6 +1,7 @@
 <script>
-  export let data;
   import UrlWithIcon from "./UrlWithIcon.svelte";
+  /** @type {{data: any}} */
+  let { data } = $props();
 
   function imgIcon(url) {
     return (
@@ -59,12 +60,12 @@
 </script>
 
 <table>
+<tbody>
   <tr>
     {#each tableHeading as cell}
       <td>{cell}</td>
     {/each}
   </tr>
-
   {#each table.slice(1, table.length) as row}
     <tr>
       {#each row as cell}
@@ -84,6 +85,7 @@
       <!-- <td class={metric.rank}>{metric.p75}</td>  -->
     </tr>
   {/each}
+  </tbody>
 </table>
 
 <style>

src/components/UrlWithIcon.svelte

@@ -0,0 +1,9 @@
+import { vitePreprocess } from "@astrojs/svelte";
+
+export default {
+	preprocess: vitePreprocess(),
+	compilerOptions: {
+		runes: true,
+	},
+};
+