Merge pull request #130 from tmr232/upgrade-svelte

Update Svelte and Vite

Author: tmr232

bun.lock

@@ -28,15 +28,16 @@
     "@eslint/js": "^9.12.0",
     "@panzoom/panzoom": "^4.5.1",
     "@rollup/plugin-wasm": "^6.2.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/bun": "latest",
     "@types/eslint__js": "^8.42.3",
     "@types/svgdom": "^0.1.2",
     "eslint": "^9.12.0",
     "graphology-utils": "^2.5.2",
     "lz-string": "^1.5.0",
     "oxlint": "0.15.13",
-    "svelte": "^4.2.19",
+    "sv": "^0.6.26",
+    "svelte": "^5.0.0",
     "svelte-awesome-color-picker": "^3.1.4",
     "svelte-codemirror-editor": "^1.4.1",
     "tree-sitter-c": "^0.23.1",
@@ -46,9 +47,9 @@
     "tree-sitter-python": "^0.23.2",
     "tree-sitter-typescript": "^0.23.2",
     "typedoc": "^0.27.1",
-    "typescript-eslint": "^8.16.0",
     "typescript": "^5.7.3",
-    "vite": "^5.4.8"
+    "typescript-eslint": "^8.16.0",
+    "vite": "6.2.2"
   },
   "peerDependencies": {
     "typescript": "^5.6.2"

package.json

@@ -17,10 +17,14 @@ import {
 let parsers: Parsers;
 let graphviz: Graphviz;
 let nodeColors: NodeColors;
-export let simplify: boolean = true;
-export let trim: boolean = true;
-export let code: string;
-export let language: Language;
+interface Props {
+  simplify?: boolean;
+  trim?: boolean;
+  code: string;
+  language: Language;
+}
+
+let { simplify = true, trim = true, code, language }: Props = $props();
 
 async function initialize() {
   const utils = await initializeUtils();
@@ -117,7 +121,7 @@ function recolorNodes() {
 
 {#await initialize() then _}
   <pre>{@html renderWrapper(code, language, { simplify, trim })}</pre>
-  <button on:click={recolorNodes}>Recolor Nodes</button>
+  <button onclick={recolorNodes}>Recolor Nodes</button>
 {/await}
 
 <style>

src/components/CodeSegmentation.svelte

@@ -10,7 +10,11 @@ import {
 } from "../control-flow/colors";
 const dispatch = createEventDispatcher();
 
-export let colorList = getLightColorList();
+interface Props {
+  colorList?: ColorList;
+}
+
+let { colorList = $bindable(getLightColorList()) }: Props = $props();
 
 const colorLabels = new Map([
   ["node.default", "Default"],
@@ -62,13 +66,13 @@ function resetList() {
     <fieldset>
       <legend>Controls</legend>
       <div class="controls">
-        <button on:click={copyList} title="Copy color scheme to clipboard"
+        <button onclick={copyList} title="Copy color scheme to clipboard"
           >Copy</button
         >
-        <button on:click={pasteList} title="Paste color scheme from clipboard"
+        <button onclick={pasteList} title="Paste color scheme from clipboard"
           >Paste</button
         >
-        <button on:click={resetList} title="Reset color scheme to defaults"
+        <button onclick={resetList} title="Reset color scheme to defaults"
           >Reset</button
         >
       </div>

src/components/ColorSchemeEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { run } from "svelte/legacy";
+
 import { cpp } from "@codemirror/lang-cpp";
 import { go } from "@codemirror/lang-go";
 import { javascript } from "@codemirror/lang-javascript";
@@ -27,12 +29,16 @@ const defaultCodeSamples: { [language in Language]?: string } = {
     "  return <h1>Hello, Stranger.</h1>;}",
 };
 
-export let code: { [language in Language]?: string } = {};
+interface Props {
+  code?: { [language in Language]?: string };
+}
+
+let { code = {} }: Props = $props();
 
-const languageCode = evolve(defaultCodeSamples, code);
+const languageCode = $state(evolve(defaultCodeSamples, code));
 
-let offsetToHighlight: number | undefined = undefined;
-let colorList = getSystemColorList();
+let offsetToHighlight: number | undefined = $state(undefined);
+let colorList = $state(getSystemColorList());
 // ADD-LANGUAGES-HERE
 let languages: {
   language: Language;
@@ -95,24 +101,25 @@ if (urlParams.has("tsx")) {
   );
 }
 
-let simplify = true;
-let flatSwitch = true;
-let highlight = true;
-let colorPicker = false;
-let verbose = urlParams.has("verbose");
-let showSegmentation = urlParams.has("segmentation");
-let showRegions = urlParams.has("showRegions");
+let simplify = $state(true);
+let flatSwitch = $state(true);
+let highlight = $state(true);
+let colorPicker = $state(false);
+let verbose = $state(urlParams.has("verbose"));
+let showSegmentation = $state(urlParams.has("segmentation"));
+let showRegions = $state(urlParams.has("showRegions"));
 let debugMode = urlParams.has("debug");
-let fontSize = "1em";
+let fontSize = $state("1em");
 const range = (start: number, end: number) =>
   Array.from({ length: end - start }, (_v, k) => k + start);
 const fontSizes: { label: string; value: string }[] = [
   { label: "Default", value: "1em" },
   ...range(8, 31).map((n) => ({ label: `${n}`, value: `${n}px` })),
 ];
 
-let selection =
-  languages[Number.parseInt(urlParams.get("language"))] ?? languages[0];
+let selection = $state(
+  languages[Number.parseInt(urlParams.get("language"))] ?? languages[0],
+);
 
 function share() {
   const compressedCode = LZString.compressToEncodedURIComponent(
@@ -126,7 +133,7 @@ function share() {
   window.open(newUrl, "_blank").focus();
 }
 
-let graph: Graph;
+let graph: Graph = $state();
 
 function downloadString(text: string, fileType: string, fileName: string) {
   const blob = new Blob([text], { type: fileType });
@@ -164,7 +171,7 @@ function cursorMoved(event): void {
   offsetToHighlight = index;
 }
 
-let editor: Editor;
+let editor: Editor = $state();
 
 function onNodeClicked(
   e: CustomEvent<{ node: string; offset: number | null }>,
@@ -174,9 +181,11 @@ function onNodeClicked(
   if (offset !== null && offset !== undefined) editor?.setCursor(offset);
 }
 
-$: if (!colorPicker && graph) {
-  graph.applyColors(colorList);
-}
+run(() => {
+  if (!colorPicker && graph) {
+    graph.applyColors(colorList);
+  }
+});
 
 function onColorPreview(e) {
   colorList = e.detail.colors;
@@ -209,7 +218,7 @@ isDark.subscribe(() => {
     <div class="themeToggleWrapper">
       <button
         class="themeToggle"
-        on:click={onToggleClick}
+        onclick={onToggleClick}
         title="Switch between the light and dark themes."
       ></button>
     </div>
@@ -223,7 +232,7 @@ isDark.subscribe(() => {
       <div class="controls">
         <select
           bind:value={selection}
-          on:change={(e) => console.log(selection)}
+          onchange={(e) => console.log(selection)}
         >
           {#each languages as language}
             <option value={language}>
@@ -238,7 +247,7 @@ isDark.subscribe(() => {
             </option>
           {/each}
         </select>
-        <button on:click={share}>Share (experimental)</button>
+        <button onclick={share}>Share (experimental)</button>
       </div>
       <div class="codemirror">
         <Editor
@@ -292,9 +301,9 @@ isDark.subscribe(() => {
         {/if}
       </div>
       <div class="download">
-        <button on:click={saveSVG}>Save SVG</button>
+        <button onclick={saveSVG}>Save SVG</button>
         {#if debugMode}
-          <button on:click={editDOT}>Edit DOT</button>
+          <button onclick={editDOT}>Edit DOT</button>
         {/if}
       </div>
     </div>

src/components/Demo.svelte

@@ -6,9 +6,13 @@ import { EditorView } from "@codemirror/view";
 import { createEventDispatcher } from "svelte";
 import CodeMirror from "svelte-codemirror-editor";
 import { isDark } from "./lightdark.ts";
-export let code: string;
-export let lang: LanguageSupport;
-export let fontSize: string = "1em";
+interface Props {
+  code: string;
+  lang: LanguageSupport;
+  fontSize?: string;
+}
+
+let { code = $bindable(), lang, fontSize = "1em" }: Props = $props();
 
 let editorView: EditorView;
 let cursorPos: { row: number; column: number; index: number };

src/components/Editor.svelte

@@ -23,16 +23,31 @@ let dot: string;
 let tree: Tree;
 let savedSvg: string;
 let getNodeOffset: (nodeId: string) => number | undefined = () => undefined;
-export let colorList = getLightColorList();
-export let offsetToHighlight: number | undefined = undefined;
-export let code: string;
-export let language: Language;
-export let verbose: boolean = false;
-export let simplify: boolean = true;
-export let trim: boolean = true;
-export let flatSwitch: boolean = true;
-export let highlight: boolean = true;
-export let showRegions: boolean = false;
+interface Props {
+  colorList?: ColorList;
+  offsetToHighlight?: number | undefined;
+  code: string;
+  language: Language;
+  verbose?: boolean;
+  simplify?: boolean;
+  trim?: boolean;
+  flatSwitch?: boolean;
+  highlight?: boolean;
+  showRegions?: boolean;
+}
+
+let {
+  colorList = $bindable(getLightColorList()),
+  offsetToHighlight = undefined,
+  code,
+  language,
+  verbose = false,
+  simplify = true,
+  trim = true,
+  flatSwitch = true,
+  highlight = true,
+  showRegions = false,
+}: Props = $props();
 
 const dispatch = createEventDispatcher();
 
@@ -207,9 +222,9 @@ export function applyColors(colors: ColorList) {
 <div class="results">
   {#await initialize() then}
     <!-- I don't know how to make this part accessible. PRs welcome! -->
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div class="graph" on:click={onClick}>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="graph" onclick={onClick}>
       {@html renderWrapper(
         code,
         language,

src/components/Graph.svelte

@@ -4,14 +4,24 @@ import { type TestFuncRecord } from "../test/commentTestUtils";
 import type { RenderOptions } from "./renderer.ts";
 import { processRecord } from "./utils";
 
-let ast: string = "";
-let dot: string = "";
+let ast: string = $state("");
+let dot: string = $state("");
 let visibleTestResults: string = "";
-export let record: TestFuncRecord;
-export let verbose: boolean = false;
-export let simplify: boolean = true;
-export let trim: boolean = true;
-export let flatSwitch: boolean = true;
+interface Props {
+  record: TestFuncRecord;
+  verbose?: boolean;
+  simplify?: boolean;
+  trim?: boolean;
+  flatSwitch?: boolean;
+}
+
+let {
+  record,
+  verbose = false,
+  simplify = true,
+  trim = true,
+  flatSwitch = true,
+}: Props = $props();
 
 function formatAST(ast: string): string {
   return ast

src/components/TestGraph.svelte

@@ -42,11 +42,11 @@ async function runAllTests() {
   return { testResults, failCount };
 }
 
-let simplify: boolean = true;
-let verbose: boolean = false;
-let trim: boolean = true;
-let flatSwitch: boolean = true;
-let showAll: boolean = false;
+let simplify: boolean = $state(true);
+let verbose: boolean = $state(false);
+let trim: boolean = $state(true);
+let flatSwitch: boolean = $state(true);
+let showAll: boolean = $state(false);
 </script>
 
 <div class="controls">

src/components/TestViewer.svelte

@@ -17,14 +17,27 @@ let dot: string;
 let getNodeOffset: (nodeId: string) => number | undefined = () => undefined;
 let tree: Tree;
 let svg: string;
-export let colorList = getLightColorList();
-export let codeAndOffset: CodeAndOffset | null = null;
-export let verbose: boolean = false;
-export let simplify: boolean = true;
-export let trim: boolean = true;
-export let flatSwitch: boolean = true;
-export let highlight: boolean = true;
-export let showRegions: boolean = false;
+interface Props {
+  colorList?: ColorList;
+  codeAndOffset?: CodeAndOffset | null;
+  verbose?: boolean;
+  simplify?: boolean;
+  trim?: boolean;
+  flatSwitch?: boolean;
+  highlight?: boolean;
+  showRegions?: boolean;
+}
+
+let {
+  colorList = getLightColorList(),
+  codeAndOffset = null,
+  verbose = false,
+  simplify = true,
+  trim = true,
+  flatSwitch = true,
+  highlight = true,
+  showRegions = false,
+}: Props = $props();
 
 const getRenderer = memoizeFunction({
   func: (options: RenderOptions, colorList: ColorList, graphviz: Graphviz) =>
@@ -132,9 +145,9 @@ function onClick(event: MouseEvent) {
 
 {#await initialize() then}
   <!-- I don't know how to make this part accessible. PRs welcome! -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="graph" on:click={onClick}>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="graph" onclick={onClick}>
     {@html renderWrapper(
       codeAndOffset,
       {