Skip to content

Commit 05268e1

Browse files
mProjectsCodemProjectsCode
committed
clean up svelte 5 migration
1 parent 233116f commit 05268e1

17 files changed

+106
-112
lines changed

‎website/bun.lockb‎

-582 Bytes
Binary file not shown.

‎website/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,8 @@
2525
"svelte": "^5.1.4",
2626
"typescript": "^5.6.3",
2727
"zod": "^3.23.8"
28+
},
29+
"overrides": {
30+
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6"
2831
}
2932
}

‎website/src/components/plugins/hallOfFame/pluginsMostDownloaded.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ let chartLabels = [...chartLabelSet];
7070
chartLabels.sort();
7171
7272
let chartData = downloadDataTop.map(x => {
73-
let data = new Array(chartLabels.length).fill(undefined);
73+
let data: (number | undefined)[] = new Array(chartLabels.length).fill(undefined);
7474
7575
for (const download of x.downloads) {
7676
const index = chartLabels.indexOf(download.date);

‎website/src/components/svelte/genericCharts/barChart.svelte‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
import Chart from 'chart.js/auto';
33
import { onDestroy, onMount } from 'svelte';
44
import { ThemeObserver } from '../svelteUtils.ts';
5-
import type { ChartDataset } from 'chart.js/dist/types';
6-
5+
import type { ChartDataset } from 'chart.js/auto';
76
87
interface Props {
98
dataPoints: number[];
@@ -35,25 +34,25 @@
3534
percent100 = 1,
3635
stacked = false,
3736
colors = [
38-
'rgba(255, 99, 132, 1)', // Red
39-
'rgba(54, 162, 235, 1)', // Blue
40-
'rgba(255, 205, 86, 1)', // Yellow
41-
'rgba(75, 192, 192, 1)', // Teal
42-
'rgba(255, 159, 64, 1)', // Orange
43-
'rgba(153, 102, 255, 1)', // Purple
44-
'rgba(255, 77, 166, 1)', // Pink
45-
'rgba(102, 204, 255, 1)', // Light Blue
46-
'rgba(255, 128, 0, 1)', // Orange
47-
'rgba(70, 191, 189, 1)', // Turquoise
48-
'rgba(128, 133, 233, 1)', // Lavender
49-
'rgba(177, 238, 147, 1)', // Lime Green
50-
'rgba(255, 184, 77, 1)', // Mustard
51-
'rgba(145, 232, 225, 1)', // Aqua
52-
'rgba(236, 112, 99, 1)', // Salmon
53-
]
37+
'rgba(255, 99, 132, 1)', // Red
38+
'rgba(54, 162, 235, 1)', // Blue
39+
'rgba(255, 205, 86, 1)', // Yellow
40+
'rgba(75, 192, 192, 1)', // Teal
41+
'rgba(255, 159, 64, 1)', // Orange
42+
'rgba(153, 102, 255, 1)', // Purple
43+
'rgba(255, 77, 166, 1)', // Pink
44+
'rgba(102, 204, 255, 1)', // Light Blue
45+
'rgba(255, 128, 0, 1)', // Orange
46+
'rgba(70, 191, 189, 1)', // Turquoise
47+
'rgba(128, 133, 233, 1)', // Lavender
48+
'rgba(177, 238, 147, 1)', // Lime Green
49+
'rgba(255, 184, 77, 1)', // Mustard
50+
'rgba(145, 232, 225, 1)', // Aqua
51+
'rgba(236, 112, 99, 1)', // Salmon
52+
],
5453
}: Props = $props();
5554
56-
let downloadChartEl: HTMLCanvasElement = $state();
55+
let downloadChartEl: HTMLCanvasElement | undefined = $state();
5756
5857
let themeObserver: ThemeObserver;
5958
@@ -114,10 +113,11 @@
114113
},
115114
},
116115
plugins: {
116+
// @ts-ignore
117117
datalabels: {
118118
display: showDatalabels,
119119
color: chartStyle.text,
120-
formatter: (value, context) => {
120+
formatter: (value: number, context: unknown) => {
121121
return value;
122122
},
123123
},

‎website/src/components/svelte/genericCharts/dataPerMonthChart.svelte‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,9 @@
1212
type?: 'bar' | 'line';
1313
}
1414
15-
let {
16-
dataPoints,
17-
title,
18-
min = 0,
19-
max = undefined,
20-
type = 'bar'
21-
}: Props = $props();
15+
let { dataPoints, title, min = 0, max = undefined, type = 'bar' }: Props = $props();
2216
23-
let chartEl: HTMLCanvasElement = $state();
17+
let chartEl: HTMLCanvasElement | undefined = $state();
2418
2519
let themeObserver: ThemeObserver;
2620

‎website/src/components/svelte/genericCharts/multiLineBarChart.svelte‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
<script lang="ts">
22
import Chart from 'chart.js/auto';
33
import { onDestroy, onMount } from 'svelte';
4-
import { type PerMonthDataPoint } from '../../../../../src/types.ts';
54
import { ThemeObserver } from '../svelteUtils.ts';
65
7-
86
interface Props {
9-
dataPoints: PerMonthDataPoint[][];
7+
dataPoints: (number | undefined)[][];
108
setLabels: string[];
119
labels: string[];
1210
min?: number;
@@ -23,25 +21,25 @@
2321
max = undefined,
2422
type = 'bar',
2523
colors = [
26-
'rgba(255, 99, 132, 1)', // Red
27-
'rgba(54, 162, 235, 1)', // Blue
28-
'rgba(255, 205, 86, 1)', // Yellow
29-
'rgba(75, 192, 192, 1)', // Teal
30-
'rgba(255, 159, 64, 1)', // Orange
31-
'rgba(153, 102, 255, 1)', // Purple
32-
'rgba(255, 77, 166, 1)', // Pink
33-
'rgba(102, 204, 255, 1)', // Light Blue
34-
'rgba(255, 128, 0, 1)', // Orange
35-
'rgba(70, 191, 189, 1)', // Turquoise
36-
'rgba(128, 133, 233, 1)', // Lavender
37-
'rgba(177, 238, 147, 1)', // Lime Green
38-
'rgba(255, 184, 77, 1)', // Mustard
39-
'rgba(145, 232, 225, 1)', // Aqua
40-
'rgba(236, 112, 99, 1)', // Salmon
41-
]
24+
'rgba(255, 99, 132, 1)', // Red
25+
'rgba(54, 162, 235, 1)', // Blue
26+
'rgba(255, 205, 86, 1)', // Yellow
27+
'rgba(75, 192, 192, 1)', // Teal
28+
'rgba(255, 159, 64, 1)', // Orange
29+
'rgba(153, 102, 255, 1)', // Purple
30+
'rgba(255, 77, 166, 1)', // Pink
31+
'rgba(102, 204, 255, 1)', // Light Blue
32+
'rgba(255, 128, 0, 1)', // Orange
33+
'rgba(70, 191, 189, 1)', // Turquoise
34+
'rgba(128, 133, 233, 1)', // Lavender
35+
'rgba(177, 238, 147, 1)', // Lime Green
36+
'rgba(255, 184, 77, 1)', // Mustard
37+
'rgba(145, 232, 225, 1)', // Aqua
38+
'rgba(236, 112, 99, 1)', // Salmon
39+
],
4240
}: Props = $props();
4341
44-
let chartEl: HTMLCanvasElement = $state();
42+
let chartEl: HTMLCanvasElement | undefined = $state();
4543
4644
let themeObserver: ThemeObserver;
4745
@@ -52,7 +50,7 @@
5250
5351
const dataSets = dataPoints.map((points, i) => ({
5452
label: setLabels[i],
55-
data: points,
53+
data: points.map(d => d ?? null),
5654
backgroundColor: colors[i % colors.length],
5755
borderColor: colors[i % colors.length],
5856
}));

‎website/src/components/svelte/genericCharts/pieChart.svelte‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { onDestroy, onMount } from 'svelte';
44
import { ThemeObserver } from '../svelteUtils.ts';
55
6-
let downloadChartEl: HTMLCanvasElement = $state();
6+
let downloadChartEl: HTMLCanvasElement | undefined = $state();
77
88
let themeObserver: ThemeObserver;
99
@@ -18,25 +18,25 @@
1818
let {
1919
dataPoints,
2020
colors = [
21-
'rgba(255, 99, 132, 1)', // Red
22-
'rgba(54, 162, 235, 1)', // Blue
23-
'rgba(255, 205, 86, 1)', // Yellow
24-
'rgba(75, 192, 192, 1)', // Teal
25-
'rgba(255, 159, 64, 1)', // Orange
26-
'rgba(153, 102, 255, 1)', // Purple
27-
'rgba(255, 77, 166, 1)', // Pink
28-
'rgba(102, 204, 255, 1)', // Light Blue
29-
'rgba(255, 128, 0, 1)', // Orange
30-
'rgba(70, 191, 189, 1)', // Turquoise
31-
'rgba(128, 133, 233, 1)', // Lavender
32-
'rgba(177, 238, 147, 1)', // Lime Green
33-
'rgba(255, 184, 77, 1)', // Mustard
34-
'rgba(145, 232, 225, 1)', // Aqua
35-
'rgba(236, 112, 99, 1)', // Salmon
36-
],
21+
'rgba(255, 99, 132, 1)', // Red
22+
'rgba(54, 162, 235, 1)', // Blue
23+
'rgba(255, 205, 86, 1)', // Yellow
24+
'rgba(75, 192, 192, 1)', // Teal
25+
'rgba(255, 159, 64, 1)', // Orange
26+
'rgba(153, 102, 255, 1)', // Purple
27+
'rgba(255, 77, 166, 1)', // Pink
28+
'rgba(102, 204, 255, 1)', // Light Blue
29+
'rgba(255, 128, 0, 1)', // Orange
30+
'rgba(70, 191, 189, 1)', // Turquoise
31+
'rgba(128, 133, 233, 1)', // Lavender
32+
'rgba(177, 238, 147, 1)', // Lime Green
33+
'rgba(255, 184, 77, 1)', // Mustard
34+
'rgba(145, 232, 225, 1)', // Aqua
35+
'rgba(236, 112, 99, 1)', // Salmon
36+
],
3737
isPercentual = false,
3838
showDatalabels = false,
39-
calculatePrecentages = false
39+
calculatePrecentages = false,
4040
}: Props = $props();
4141
4242
onMount(() => {
@@ -48,7 +48,7 @@
4848
4949
// Prevent reuse of colors
5050
51-
return new Chart(downloadChartEl, {
51+
return new Chart(downloadChartEl!, {
5252
type: 'pie',
5353
data: {
5454
labels: dataPoints.map(({ label }) => label),
@@ -70,10 +70,11 @@
7070
color: chartStyle.text,
7171
},
7272
},
73+
// @ts-ignore
7374
datalabels: {
7475
display: showDatalabels,
7576
color: chartStyle.text,
76-
formatter: (value, context) => {
77+
formatter: (value: number, context: unknown) => {
7778
if (isPercentual) {
7879
return `${((100 * value) as number).toFixed(2)}%`;
7980
}
@@ -100,7 +101,7 @@
100101
},
101102
aspectRatio: 1,
102103
},
103-
});
104+
}) as Chart;
104105
});
105106
106107
themeObserver.initObserver();

‎website/src/components/svelte/genericCharts/stackedBarChart.svelte‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,27 @@
1616
dataPoints,
1717
labels,
1818
colors = [
19-
'rgba(255, 99, 132, 1)', // Red
20-
'rgba(54, 162, 235, 1)', // Blue
21-
'rgba(255, 205, 86, 1)', // Yellow
22-
'rgba(75, 192, 192, 1)', // Teal
23-
'rgba(255, 159, 64, 1)', // Orange
24-
'rgba(153, 102, 255, 1)', // Purple
25-
'rgba(255, 77, 166, 1)', // Pink
26-
'rgba(102, 204, 255, 1)', // Light Blue
27-
'rgba(255, 128, 0, 1)', // Orange
28-
'rgba(70, 191, 189, 1)', // Turquoise
29-
'rgba(128, 133, 233, 1)', // Lavender
30-
'rgba(177, 238, 147, 1)', // Lime Green
31-
'rgba(255, 184, 77, 1)', // Mustard
32-
'rgba(145, 232, 225, 1)', // Aqua
33-
'rgba(236, 112, 99, 1)', // Salmon
34-
],
19+
'rgba(255, 99, 132, 1)', // Red
20+
'rgba(54, 162, 235, 1)', // Blue
21+
'rgba(255, 205, 86, 1)', // Yellow
22+
'rgba(75, 192, 192, 1)', // Teal
23+
'rgba(255, 159, 64, 1)', // Orange
24+
'rgba(153, 102, 255, 1)', // Purple
25+
'rgba(255, 77, 166, 1)', // Pink
26+
'rgba(102, 204, 255, 1)', // Light Blue
27+
'rgba(255, 128, 0, 1)', // Orange
28+
'rgba(70, 191, 189, 1)', // Turquoise
29+
'rgba(128, 133, 233, 1)', // Lavender
30+
'rgba(177, 238, 147, 1)', // Lime Green
31+
'rgba(255, 184, 77, 1)', // Mustard
32+
'rgba(145, 232, 225, 1)', // Aqua
33+
'rgba(236, 112, 99, 1)', // Salmon
34+
],
3535
isPercentual = false,
36-
showDatalabels = false
36+
showDatalabels = false,
3737
}: Props = $props();
3838
39-
let downloadChartEl: HTMLCanvasElement = $state();
39+
let downloadChartEl: HTMLCanvasElement | undefined = $state();
4040
4141
let themeObserver: ThemeObserver;
4242
@@ -61,10 +61,11 @@
6161
},
6262
options: {
6363
plugins: {
64+
// @ts-ignore
6465
datalabels: {
6566
display: showDatalabels,
6667
color: chartStyle.text,
67-
formatter: (value, context) => {
68+
formatter: (value: number, context: unknown) => {
6869
return value;
6970
},
7071
},

‎website/src/components/svelte/indexPages/pluginsIndex.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,7 @@
7272
<td><GithubLink repo={plugin.currentEntry.repo}></GithubLink></td>
7373
<td><Commit commit={plugin.addedCommit}></Commit></td>
7474
<td
75-
>{#if plugin.removedCommit}
76-
<Commit commit={plugin.removedCommit}></Commit>{/if}</td
75+
>{#if plugin.removedCommit}<Commit commit={plugin.removedCommit}></Commit>{/if}</td
7776
>
7877
</tr>
7978
{/each}

‎website/src/components/svelte/indexPages/themesIndex.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,7 @@
6969
<td><GithubLink repo={theme.currentEntry.repo}></GithubLink></td>
7070
<td><Commit commit={theme.addedCommit}></Commit></td>
7171
<td
72-
>{#if theme.removedCommit}
73-
<Commit commit={theme.removedCommit}></Commit>{/if}</td
72+
>{#if theme.removedCommit}<Commit commit={theme.removedCommit}></Commit>{/if}</td
7473
>
7574
</tr>
7675
{/each}

0 commit comments

Comments
 (0)