Migrate components to svelte 5 runes syntax, minor css fixups, dependency bump

Author: nobody5050

vscode-wpilib/package.json

@@ -513,7 +513,7 @@
         "run-sequence": "^2.2.1",
         "npm-run-all": "^4.1.5",
         "svelte": "^5.0.0",
-        "svelte-preprocess": "^5.1.4",
+        "svelte-preprocess": "^6.0.0",
         "terser-webpack-plugin": "^5.3.14",
         "ts-loader": "^9.5.4",
         "ts-node": "^9.1.1",

vscode-wpilib/resources/media/main.css

@@ -291,15 +291,25 @@
   text-align: center;
   position: relative;
   transition: all 0.2s;
+  background-color: var(--vscode-editor-background);
 }
 
 .selection-card:hover {
-  background-color: var(--vscode-list-hoverBackground);
+  background-color: var(--vscode-button-background);
+  border-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+
+.selection-card:hover h3,
+.selection-card:hover p,
+.selection-card:hover .card-icon {
+  color: var(--vscode-button-foreground);
 }
 
 .selection-card.selected {
   border-color: var(--vscode-button-background);
-  background-color: var(--vscode-editor-lineHighlightBackground, rgba(255, 255, 255, 0.05));
+  background-color: var(--vscode-editor-background);
+  color: inherit;
 }
 
 .selection-card h3 {
@@ -308,22 +318,22 @@
 }
 
 .selection-card p {
-  color: var(--vscode-descriptionForeground);
+  /* color: var(--vscode-descriptionForeground); */
   font-size: 13px;
   margin-bottom: 16px;
 }
 
-.card-icon {
+/* .card-icon {
   color: var(--vscode-descriptionForeground);
-}
+} */
 
 .card-icon i.codicon {
   font-size: 48px;
 }
 
-.selection-card.selected .card-icon {
+/* .selection-card.selected .card-icon {
   color: var(--vscode-button-background);
-}
+} */
 
 .select-wrapper {
   position: relative;

vscode-wpilib/src/webviews/svelte/components/shared/SummaryBox.svelte

@@ -1,27 +1,32 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   export interface SummaryItem {
     label: string;
     value?: string | number | null;
   }
 </script>
 
 <script lang="ts">
-  export let title: string | undefined = undefined;
-  export let items: SummaryItem[] = [];
+  interface Props {
+    title?: string | undefined;
+    items?: SummaryItem[];
+    children?: import('svelte').Snippet;
+  }
+
+  let { title = undefined, items = [], children }: Props = $props();
 </script>
 
 <div class="summary-box">
   {#if title}
     <h3>{title}</h3>
   {/if}
 
-  <slot>
+  {#if children}{@render children()}{:else}
     {#each items as item (item.label)}
       <div class="summary-row">
         <strong>{item.label}:</strong>
         <span>{item.value ?? ''}</span>
       </div>
     {/each}
-  </slot>
+  {/if}
 </div>
 

vscode-wpilib/src/webviews/svelte/components/shared/ValidationError.svelte

@@ -1,8 +1,19 @@
 <script lang="ts">
-  export let message: string | undefined = undefined;
-  export let visible = false;
-  export let id: string | undefined = undefined;
-  export let className = 'project-error-text';
+  interface Props {
+    message?: string | undefined;
+    visible?: boolean;
+    id?: string | undefined;
+    className?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    message = undefined,
+    visible = false,
+    id = undefined,
+    className = 'project-error-text',
+    children
+  }: Props = $props();
 </script>
 
 <div
@@ -12,10 +23,10 @@
   aria-hidden={!visible}
   style:display={visible ? 'block' : 'none'}
 >
-  <slot>
+  {#if children}{@render children()}{:else}
     {#if message}
       {message}
     {/if}
-  </slot>
+  {/if}
 </div>
 

vscode-wpilib/src/webviews/svelte/components/shared/WizardProgress.svelte

@@ -1,13 +1,17 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   export interface WizardProgressStep {
     step: number;
     label: string;
   }
 </script>
 
 <script lang="ts">
-  export let steps: WizardProgressStep[] = [];
-  export let currentStep = 1;
+  interface Props {
+    steps?: WizardProgressStep[];
+    currentStep?: number;
+  }
+
+  let { steps = [], currentStep = 1 }: Props = $props();
 </script>
 
 <div class="wizard-progress" role="list" aria-label="Wizard progress">

vscode-wpilib/src/webviews/svelte/components/shared/WizardStep.svelte

@@ -1,10 +1,21 @@
 <script lang="ts">
-  export let active = false;
-  export let step: number | string | undefined = undefined;
-  export let element: 'section' | 'div' = 'div';
-  export let ariaLabelledBy: string | undefined = undefined;
+  interface Props {
+    active?: boolean;
+    step?: number | string | undefined;
+    element?: 'section' | 'div';
+    ariaLabelledBy?: string | undefined;
+    children?: import('svelte').Snippet;
+  }
 
-  $: classes = ['wizard-step', active ? 'active' : ''].filter(Boolean).join(' ');
+  let {
+    active = false,
+    step = undefined,
+    element = 'div',
+    ariaLabelledBy = undefined,
+    children
+  }: Props = $props();
+
+  let classes = $derived(['wizard-step', active ? 'active' : ''].filter(Boolean).join(' '));
 </script>
 
 {#if element === 'section'}
@@ -13,7 +24,7 @@
     data-step={step}
     aria-labelledby={ariaLabelledBy}
   >
-    <slot />
+    {@render children?.()}
   </section>
 {:else}
   <div
@@ -22,7 +33,7 @@
     aria-expanded={active}
     aria-labelledby={ariaLabelledBy}
   >
-    <slot />
+    {@render children?.()}
   </div>
 {/if}
 

vscode-wpilib/src/webviews/svelte/dependencyview/AvailableDependencies.svelte

@@ -4,7 +4,11 @@
 
   const dispatch = createEventDispatcher();
 
-  export let dependencies: AvailableDependency[] = [];
+  interface Props {
+    dependencies?: AvailableDependency[];
+  }
+
+  let { dependencies = [] }: Props = $props();
 </script>
 
 {#if dependencies.length === 0}
@@ -14,7 +18,7 @@
     <div class="available-dependency">
       <div class="dependency-header">
         <span class="dependency-name">{dependency.name}</span>
-        <button class="vscode-button" on:click={() => dispatch('install', { index })}>
+        <button class="vscode-button" onclick={() => dispatch('install', { index })}>
           <i class="codicon codicon-add"></i>
           <span> Install</span>
         </button>

vscode-wpilib/src/webviews/svelte/dependencyview/DependencyView.svelte

@@ -12,9 +12,9 @@
     available?: AvailableDependency[];
   }
 
-  let installedDependencies: InstalledDependency[] = [];
-  let availableDependencies: AvailableDependency[] = [];
-  let urlInput = '';
+  let installedDependencies: InstalledDependency[] = $state([]);
+  let availableDependencies: AvailableDependency[] = $state([]);
+  let urlInput = $state('');
 
   const updateAll = () => {
     postMessage({ type: 'updateall' });
@@ -57,7 +57,7 @@
 </script>
 
 <div class="top-line">
-  <button id="updateall-action" class="vscode-button block" disabled={installedDependencies.length === 0} on:click={updateAll}>
+  <button id="updateall-action" class="vscode-button block" disabled={installedDependencies.length === 0} onclick={updateAll}>
     <i class="codicon codicon-sync"></i>
     <span>Update All Dependencies</span>
   </button>

vscode-wpilib/src/webviews/svelte/dependencyview/InstalledDependencies.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { createEventDispatcher } from 'svelte';
   import type { InstalledDependency } from './types';
 
   const dispatch = createEventDispatcher();
 
-  export let dependencies: InstalledDependency[] = [];
+  interface Props {
+    dependencies?: InstalledDependency[];
+  }
+
+  let { dependencies = [] }: Props = $props();
 
-  let selectedVersions: string[] = [];
+  let selectedVersions: string[] = $state([]);
 
-  $: {
+  run(() => {
     const nextSelected = dependencies.map((dep, index) => selectedVersions[index] ?? dep.currentVersion);
     if (
       nextSelected.length !== selectedVersions.length ||
       nextSelected.some((value, idx) => value !== selectedVersions[idx])
     ) {
       selectedVersions = nextSelected;
     }
-  }
+  });
 
   const getButtonText = (dependency: InstalledDependency, selectedVersion: string) => {
     const entry = dependency.versionInfo.find((info) => info.version === selectedVersion);
@@ -56,15 +62,15 @@
         <button
           class="vscode-button"
           disabled={isUpdateDisabled(dependency, selectedVersions[index])}
-          on:click={() => dispatch('update', { index, version: selectedVersions[index] })}
+          onclick={() => dispatch('update', { index, version: selectedVersions[index] })}
         >
           {getButtonText(dependency, selectedVersions[index])}
         </button>
 
         <button
           class="uninstall-button vscode-button"
           title={`Uninstall ${dependency.name}`}
-          on:click={() => dispatch('uninstall', { index })}
+          onclick={() => dispatch('uninstall', { index })}
         >
           <i class="codicon codicon-trash"></i>
         </button>

vscode-wpilib/src/webviews/svelte/dependencyview/UrlInstallSection.svelte

@@ -3,7 +3,11 @@
 
   const dispatch = createEventDispatcher();
 
-  export let url = '';
+  interface Props {
+    url?: string;
+  }
+
+  let { url = $bindable('') }: Props = $props();
 
   const install = () => {
     if (url.trim().length === 0) {
@@ -28,9 +32,9 @@
       type="text"
       placeholder="Enter vendordep URL..."
       bind:value={url}
-      on:keypress={onKeyPress}
+      onkeypress={onKeyPress}
     />
-    <button id="install-url-action" class="vscode-button" on:click={install}>
+    <button id="install-url-action" class="vscode-button" onclick={install}>
       <i class="codicon codicon-cloud-download"></i>
       <span> Install</span>
     </button>