migration to svele 5

mProjectsCode · mProjectsCode · commit 233116feea45 · 2024-10-29T21:27:50.000+01:00
diff --git a/website/bun.lockb b/website/bun.lockb
diff --git a/website/package.json b/website/package.json
@@ -22,7 +22,7 @@
 		"ml-regression-simple-linear": "3.0.1",
 		"regression": "^2.0.1",
 		"sharp": "^0.33.5",
-		"svelte": "^4.2.19",
+		"svelte": "^5.1.4",
 		"typescript": "^5.6.3",
 		"zod": "^3.23.8"
 	}
diff --git a/website/src/components/svelte/genericCharts/barChart.svelte b/website/src/components/svelte/genericCharts/barChart.svelte
@@ -4,20 +4,37 @@
 	import { ThemeObserver } from '../svelteUtils.ts';
 	import type { ChartDataset } from 'chart.js/dist/types';
 
-	export let dataPoints: number[];
-	export let dataPoints2: number[] | undefined = undefined;
-	export let labels: string[];
-	export let showDatalabels = false;
-	export let showXLabels = true;
-	export let seriesName = '';
-	export let seriesName2 = '';
-	export let aspectRatio = 1;
-	export let logScale = false;
-	export let calculatePrecentages = false;
-	export let percent100 = 1;
-	export let stacked = false;
-
-	export let colors = [
+
+	interface Props {
+		dataPoints: number[];
+		dataPoints2?: number[] | undefined;
+		labels: string[];
+		showDatalabels?: boolean;
+		showXLabels?: boolean;
+		seriesName?: string;
+		seriesName2?: string;
+		aspectRatio?: number;
+		logScale?: boolean;
+		calculatePrecentages?: boolean;
+		percent100?: number;
+		stacked?: boolean;
+		colors?: any;
+	}
+
+	let {
+		dataPoints,
+		dataPoints2 = undefined,
+		labels,
+		showDatalabels = false,
+		showXLabels = true,
+		seriesName = '',
+		seriesName2 = '',
+		aspectRatio = 1,
+		logScale = false,
+		calculatePrecentages = false,
+		percent100 = 1,
+		stacked = false,
+		colors = [
 		'rgba(255, 99, 132, 1)', // Red
 		'rgba(54, 162, 235, 1)', // Blue
 		'rgba(255, 205, 86, 1)', // Yellow
@@ -33,9 +50,10 @@
 		'rgba(255, 184, 77, 1)', // Mustard
 		'rgba(145, 232, 225, 1)', // Aqua
 		'rgba(236, 112, 99, 1)', // Salmon
-	];
+	]
+	}: Props = $props();
 
-	let downloadChartEl: HTMLCanvasElement;
+	let downloadChartEl: HTMLCanvasElement = $state();
 
 	let themeObserver: ThemeObserver;
 
diff --git a/website/src/components/svelte/genericCharts/dataPerMonthChart.svelte b/website/src/components/svelte/genericCharts/dataPerMonthChart.svelte
@@ -4,13 +4,23 @@
 	import { type PerMonthDataPoint } from '../../../../../src/types.ts';
 	import { ThemeObserver } from '../svelteUtils.ts';
 
-	export let dataPoints: PerMonthDataPoint[];
-	export let title: string;
-	export let min: number = 0;
-	export let max: number | undefined = undefined;
-	export let type: 'bar' | 'line' = 'bar';
+	interface Props {
+		dataPoints: PerMonthDataPoint[];
+		title: string;
+		min?: number;
+		max?: number | undefined;
+		type?: 'bar' | 'line';
+	}
+
+	let {
+		dataPoints,
+		title,
+		min = 0,
+		max = undefined,
+		type = 'bar'
+	}: Props = $props();
 
-	let chartEl: HTMLCanvasElement;
+	let chartEl: HTMLCanvasElement = $state();
 
 	let themeObserver: ThemeObserver;
 
diff --git a/website/src/components/svelte/genericCharts/multiLineBarChart.svelte b/website/src/components/svelte/genericCharts/multiLineBarChart.svelte
@@ -4,14 +4,25 @@
 	import { type PerMonthDataPoint } from '../../../../../src/types.ts';
 	import { ThemeObserver } from '../svelteUtils.ts';
 
-	export let dataPoints: PerMonthDataPoint[][];
-	export let setLabels: string[];
-	export let labels: string[];
-	export let min: number = 0;
-	export let max: number | undefined = undefined;
-	export let type: 'bar' | 'line' = 'bar';
 
-	export let colors = [
+	interface Props {
+		dataPoints: PerMonthDataPoint[][];
+		setLabels: string[];
+		labels: string[];
+		min?: number;
+		max?: number | undefined;
+		type?: 'bar' | 'line';
+		colors?: any;
+	}
+
+	let {
+		dataPoints,
+		setLabels,
+		labels,
+		min = 0,
+		max = undefined,
+		type = 'bar',
+		colors = [
 		'rgba(255, 99, 132, 1)', // Red
 		'rgba(54, 162, 235, 1)', // Blue
 		'rgba(255, 205, 86, 1)', // Yellow
@@ -27,9 +38,10 @@
 		'rgba(255, 184, 77, 1)', // Mustard
 		'rgba(145, 232, 225, 1)', // Aqua
 		'rgba(236, 112, 99, 1)', // Salmon
-	];
+	]
+	}: Props = $props();
 
-	let chartEl: HTMLCanvasElement;
+	let chartEl: HTMLCanvasElement = $state();
 
 	let themeObserver: ThemeObserver;
 
diff --git a/website/src/components/svelte/genericCharts/pieChart.svelte b/website/src/components/svelte/genericCharts/pieChart.svelte
@@ -3,12 +3,21 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { ThemeObserver } from '../svelteUtils.ts';
 
-	let downloadChartEl: HTMLCanvasElement;
+	let downloadChartEl: HTMLCanvasElement = $state();
 
 	let themeObserver: ThemeObserver;
 
-	export let dataPoints: { label: string; value: number }[];
-	export let colors = [
+	interface Props {
+		dataPoints: { label: string; value: number }[];
+		colors?: any;
+		isPercentual?: boolean;
+		showDatalabels?: boolean;
+		calculatePrecentages?: boolean;
+	}
+
+	let {
+		dataPoints,
+		colors = [
 		'rgba(255, 99, 132, 1)', // Red
 		'rgba(54, 162, 235, 1)', // Blue
 		'rgba(255, 205, 86, 1)', // Yellow
@@ -24,10 +33,11 @@
 		'rgba(255, 184, 77, 1)', // Mustard
 		'rgba(145, 232, 225, 1)', // Aqua
 		'rgba(236, 112, 99, 1)', // Salmon
-	];
-	export let isPercentual = false;
-	export let showDatalabels = false;
-	export let calculatePrecentages = false;
+	],
+		isPercentual = false,
+		showDatalabels = false,
+		calculatePrecentages = false
+	}: Props = $props();
 
 	onMount(() => {
 		themeObserver = new ThemeObserver();
diff --git a/website/src/components/svelte/genericCharts/stackedBarChart.svelte b/website/src/components/svelte/genericCharts/stackedBarChart.svelte
@@ -4,9 +4,18 @@
 	import { ThemeObserver } from '../svelteUtils.ts';
 	import { ALL_OS } from '../../../../../src/release/release.ts';
 
-	export let dataPoints: { label: string; data: number[] }[];
-	export let labels: string[];
-	export let colors = [
+	interface Props {
+		dataPoints: { label: string; data: number[] }[];
+		labels: string[];
+		colors?: any;
+		isPercentual?: boolean;
+		showDatalabels?: boolean;
+	}
+
+	let {
+		dataPoints,
+		labels,
+		colors = [
 		'rgba(255, 99, 132, 1)', // Red
 		'rgba(54, 162, 235, 1)', // Blue
 		'rgba(255, 205, 86, 1)', // Yellow
@@ -22,11 +31,12 @@
 		'rgba(255, 184, 77, 1)', // Mustard
 		'rgba(145, 232, 225, 1)', // Aqua
 		'rgba(236, 112, 99, 1)', // Salmon
-	];
-	export let isPercentual = false;
-	export let showDatalabels = false;
+	],
+		isPercentual = false,
+		showDatalabels = false
+	}: Props = $props();
 
-	let downloadChartEl: HTMLCanvasElement;
+	let downloadChartEl: HTMLCanvasElement = $state();
 
 	let themeObserver: ThemeObserver;
 
diff --git a/website/src/components/svelte/helpers/commit.svelte b/website/src/components/svelte/helpers/commit.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { Commit } from '../../../../../src/types.ts';
 
-	export let commit: Commit;
+	interface Props {
+		commit: Commit;
+	}
+
+	let { commit }: Props = $props();
 	let url = 'https://github.com/obsidianmd/obsidian-releases/commit/' + commit.hash;
 </script>
 
diff --git a/website/src/components/svelte/helpers/githubLink.svelte b/website/src/components/svelte/helpers/githubLink.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let repo: string;
+	interface Props {
+		repo: string;
+	}
+
+	let { repo }: Props = $props();
 </script>
 
 <a href={'https://github.com/' + repo} target="_blank">{repo}</a>
diff --git a/website/src/components/svelte/helpers/pluginLink.svelte b/website/src/components/svelte/helpers/pluginLink.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import slug from 'slug';
 
-	export let id: string;
+	interface Props {
+		id: string;
+	}
+
+	let { id }: Props = $props();
 </script>
 
 <a href={'/obsidian-stats/plugins/' + slug(id)}>{id}</a>
diff --git a/website/src/components/svelte/helpers/themeLink.svelte b/website/src/components/svelte/helpers/themeLink.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import slug from 'slug';
 
-	export let id: string;
-	export let name: string;
+	interface Props {
+		id: string;
+		name: string;
+	}
+
+	let { id, name }: Props = $props();
 </script>
 
 <a href={'/obsidian-stats/themes/' + slug(id)}>{name}</a>
diff --git a/website/src/components/svelte/indexPages/pluginsIndex.svelte b/website/src/components/svelte/indexPages/pluginsIndex.svelte
@@ -5,7 +5,11 @@
 	import Commit from '../helpers/commit.svelte';
 	import { onMount } from 'svelte';
 
-	export let data: PluginDataInterface[] = [];
+	interface Props {
+		data?: PluginDataInterface[];
+	}
+
+	let { data = [] }: Props = $props();
 
 	const idSort = (x: PluginDataInterface) => x.id.toLowerCase();
 	const nameSort = (x: PluginDataInterface) => x.currentEntry.name.toLowerCase();
@@ -18,7 +22,7 @@
 
 	let ascending = false;
 
-	let sorted: PluginDataInterface[] = [...data];
+	let sorted: PluginDataInterface[] = $state([...data]);
 
 	function sort(criteria: (x: PluginDataInterface) => string): void {
 		if (criteria === sortCriteria) {
@@ -51,12 +55,12 @@
 <table>
 	<thead>
 		<tr>
-			<th on:click={() => sort(idSort)}>Id</th>
-			<th on:click={() => sort(nameSort)}>Name</th>
-			<th on:click={() => sort(authorSort)}>Author</th>
-			<th on:click={() => sort(repoSort)}>Repo</th>
-			<th on:click={() => sort(addedSort)}>Added Date</th>
-			<th on:click={() => sort(removedSort)}>Removed Date</th>
+			<th onclick={() => sort(idSort)}>Id</th>
+			<th onclick={() => sort(nameSort)}>Name</th>
+			<th onclick={() => sort(authorSort)}>Author</th>
+			<th onclick={() => sort(repoSort)}>Repo</th>
+			<th onclick={() => sort(addedSort)}>Added Date</th>
+			<th onclick={() => sort(removedSort)}>Removed Date</th>
 		</tr>
 	</thead>
 	<tbody>
diff --git a/website/src/components/svelte/indexPages/themesIndex.svelte b/website/src/components/svelte/indexPages/themesIndex.svelte
@@ -5,7 +5,11 @@
 	import { onMount } from 'svelte';
 	import type { ThemeDataInterface } from '../../../../../src/theme/theme.ts';
 
-	export let data: ThemeDataInterface[] = [];
+	interface Props {
+		data?: ThemeDataInterface[];
+	}
+
+	let { data = [] }: Props = $props();
 
 	const nameSort = (x: ThemeDataInterface) => x.name.toLowerCase();
 	const authorSort = (x: ThemeDataInterface) => x.currentEntry.author.toLowerCase();
@@ -17,7 +21,7 @@
 
 	let ascending = false;
 
-	let sorted: ThemeDataInterface[] = [...data];
+	let sorted: ThemeDataInterface[] = $state([...data]);
 
 	function sort(criteria: (x: ThemeDataInterface) => string): void {
 		if (criteria === sortCriteria) {
@@ -50,11 +54,11 @@
 <table>
 	<thead>
 		<tr>
-			<th on:click={() => sort(nameSort)}>Name</th>
-			<th on:click={() => sort(authorSort)}>Author</th>
-			<th on:click={() => sort(repoSort)}>Repo</th>
-			<th on:click={() => sort(addedSort)}>Added Date</th>
-			<th on:click={() => sort(removedSort)}>Removed Date</th>
+			<th onclick={() => sort(nameSort)}>Name</th>
+			<th onclick={() => sort(authorSort)}>Author</th>
+			<th onclick={() => sort(repoSort)}>Repo</th>
+			<th onclick={() => sort(addedSort)}>Added Date</th>
+			<th onclick={() => sort(removedSort)}>Removed Date</th>
 		</tr>
 	</thead>
 	<tbody>
diff --git a/website/src/components/svelte/pluginDownloadChart.svelte b/website/src/components/svelte/pluginDownloadChart.svelte
@@ -4,10 +4,14 @@
 	import { type DownloadDataPoint } from '../../../../src/types.ts';
 	import { ThemeObserver } from './svelteUtils.ts';
 
-	export let dataPoints: DownloadDataPoint[];
+	interface Props {
+		dataPoints: DownloadDataPoint[];
+	}
+
+	let { dataPoints }: Props = $props();
 
-	let downloadChartEl: HTMLCanvasElement;
-	let downloadGrowthChartEl: HTMLCanvasElement;
+	let downloadChartEl: HTMLCanvasElement = $state();
+	let downloadGrowthChartEl: HTMLCanvasElement = $state();
 
 	let themeObserver: ThemeObserver;
 
diff --git a/website/src/components/svelte/pluginDownloadsNameCorrelationChart.svelte b/website/src/components/svelte/pluginDownloadsNameCorrelationChart.svelte
@@ -6,9 +6,13 @@
 	import { CDate } from '../../../../src/date.ts';
 	import { SimpleLinearRegression } from 'ml-regression-simple-linear';
 
-	export let dataPoints: DownloadReleaseCorrelationDataPoint[];
+	interface Props {
+		dataPoints: DownloadReleaseCorrelationDataPoint[];
+	}
+
+	let { dataPoints }: Props = $props();
 
-	let downloadNameChartEl: HTMLCanvasElement;
+	let downloadNameChartEl: HTMLCanvasElement = $state();
 
 	let themeObserver: ThemeObserver;
 
diff --git a/website/src/components/svelte/pluginReleaseCountDownloadsCorrelationChart.svelte b/website/src/components/svelte/pluginReleaseCountDownloadsCorrelationChart.svelte
diff --git a/website/src/components/svelte/pluginReleaseTimeDownloadsCorrelationChart.svelte b/website/src/components/svelte/pluginReleaseTimeDownloadsCorrelationChart.svelte
diff --git a/website/src/components/svelte/releaseDownloadGrowthChart.svelte b/website/src/components/svelte/releaseDownloadGrowthChart.svelte
diff --git a/website/src/components/svelte/releaseTimeBetween.svelte b/website/src/components/svelte/releaseTimeBetween.svelte

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`"ml-regression-simple-linear": "3.0.1",`
`23`	`23`	`"regression": "^2.0.1",`
`24`	`24`	`"sharp": "^0.33.5",`
`25`		`- "svelte": "^4.2.19",`
	`25`	`+ "svelte": "^5.1.4",`
`26`	`26`	`"typescript": "^5.6.3",`
`27`	`27`	`"zod": "^3.23.8"`
`28`	`28`	`}`