Update `plot-benchmarks` to use Svelte 5.0.
Test: Ran the app locally.
Change-Id: I7f0ed08b67bce54af608919cd621d7eef00e76bd
diff --git a/development/plot-benchmarks/src/lib/Chart.svelte b/development/plot-benchmarks/src/lib/Chart.svelte
index edf6584..c1143bf 100644
--- a/development/plot-benchmarks/src/lib/Chart.svelte
+++ b/development/plot-benchmarks/src/lib/Chart.svelte
@@ -15,13 +15,6 @@
export let isExperimental: boolean = false;
export let showHistogramControls: boolean = false;
- $: {
- if ($chart) {
- $chart.data = data;
- $chart.update();
- }
- }
-
// State
let controlsDispatcher = createEventDispatcher<ControlsEvent>();
let element: HTMLCanvasElement;
@@ -29,13 +22,20 @@
let chart: Writable<Chart | null> = writable(null);
let items: Writable<LegendItem[] | null> = writable(null);
+ $: {
+ if ($chart) {
+ $chart.data = data;
+ $chart.update();
+ }
+ }
+
// Effects
onMount(() => {
- const onUpdate = (chart: Chart) => {
- $chart = chart;
+ const onUpdate = (updated: Chart) => {
+ $chart = updated;
// Bad typings.
- const legend = chart.options.plugins?.legend as any;
- $items = legend.labels.generateLabels(chart);
+ const legend = updated.options.plugins?.legend as any;
+ $items = legend.labels.generateLabels($chart);
};
const plugins = {
tooltip: {
@@ -103,7 +103,7 @@
⎘
</button>
</div>
- <canvas class="chart" bind:this={element} />
+ <canvas class="chart" bind:this={element}> </canvas>
{#if showHistogramControls}
<div class="controls">
<label for="buckets">
diff --git a/development/plot-benchmarks/src/lib/Legend.svelte b/development/plot-benchmarks/src/lib/Legend.svelte
index 2795fb2..05edbf5 100644
--- a/development/plot-benchmarks/src/lib/Legend.svelte
+++ b/development/plot-benchmarks/src/lib/Legend.svelte
@@ -4,7 +4,7 @@
export let items: LegendItem[];
const handlerFactory = (item: LegendItem) => {
- return (event: Event) => {
+ return (_: Event) => {
if (item.datasetIndex !== undefined) {
// https://www.chartjs.org/docs/latest/samples/legend/html.html
chart.setDatasetVisibility(
@@ -29,7 +29,7 @@
<span
class="box"
style="background: {item.fillStyle}; border-color: {item.strokeStyle}; border-width: {item.lineWidth}px;"
- />
+ ></span>
<span
class="label"
style="text-decoration: {item.hidden ? 'line-through' : ''};"
diff --git a/development/plot-benchmarks/src/lib/Session.svelte b/development/plot-benchmarks/src/lib/Session.svelte
index 25576af..58524b5 100644
--- a/development/plot-benchmarks/src/lib/Session.svelte
+++ b/development/plot-benchmarks/src/lib/Session.svelte
@@ -114,7 +114,7 @@
session = new Session(fileEntries);
mapper = buildMapper($buckets);
metrics = Transforms.buildMetrics(session, $suppressed, $suppressedMetrics);
- showControls = metrics.sampled && metrics.sampled.length > 0;
+ showControls = Array.isArray(metrics.sampled) && metrics.sampled.length > 0;
activeSeries = service.pSeries(metrics, $active);
series = ChartDataTransforms.mapToSeries(
metrics,
@@ -145,16 +145,19 @@
}
async function handleFileDragDrop(event: DragEvent) {
- const items = [...event.dataTransfer.items];
+ const items = [...event.dataTransfer?.items || []];
if (items) {
let newFiles = await Promise.all(
items
.filter(
- (item) =>
- item.kind === "file" && item.getAsFile().name.endsWith(".json")
+ (item) => {
+ const file = item.getAsFile()
+ return item.kind === "file" && file && file.name.endsWith(".json")
+ }
)
.map(async (item) => {
- const file = item.getAsFile();
+ // At this point, we know the file had some JSON content.
+ const file = item.getAsFile()!!;
const benchmarks = await readBenchmarks(file);
const entry: FileMetadata = {
enabled: true,
@@ -230,7 +233,7 @@
{/if}
{#await activeSeries}
- <article aria-busy="true" />
+ <article aria-busy="true"></article>
{:then chartData}
{#if chartData.length > 0}
<Chart
diff --git a/development/plot-benchmarks/src/main.ts b/development/plot-benchmarks/src/main.ts
index 93a3c3f..dbada9e 100644
--- a/development/plot-benchmarks/src/main.ts
+++ b/development/plot-benchmarks/src/main.ts
@@ -1,8 +1,7 @@
+import { mount } from 'svelte';
import './assets/overrides.css';
import App from './lib/App.svelte';
-const app = new App({
- target: document.getElementById('app')!!,
-});
+const app = mount(App, { target: document.getElementById("app")!! });
export default app;
