Migrate extension webviews to Svelte 5 by nobody5050 · Pull Request #815 · wpilibsuite/vscode-wpilib

nobody5050 · 2025-11-09T10:16:23Z

This PR converts the webviews to a frontend framework, namely Svelte 5. All of the webviews are now built with rollup and share a lot more infrastructure, so i18n and similar should be easier to maintain. They also have the benefit of sharing components so the different wizards are easier to keep in sync.

Closes #55

Status:

- Help - Project Creator - Project Importer - Dependency View

…ency bump

Gold856 · 2026-02-19T06:04:21Z

Per https://code.visualstudio.com/api/extension-guides/webview#passing-messages-from-a-webview-to-an-extension:

For security reasons, you must keep the VS Code API object private and make sure it is never leaked into the global scope.

Gold856

I may or may not review this more closely later, but just some broad details I'm noticing (and some of the recommendations may be wrong since I completed the Basic Svelte tutorial like 30 minutes ago):

Almost all props seem to be optional, but that doesn't actually seem to be the case in practice; they're either defaulted in the child component or initialized with a value in the parent. In fact, several type definitions have their optional declaration erased because of that. How many props can we change to not be optional?
Speaking of props, we're passing an insane number of props to several child components. Can some of this be replaced with global state in .svelte.ts files? Global state is kinda icky, but these webviews are small, so globals aren't used in very far away places.
Let's try to completely dump Webpack in this PR. I'm not interested in dealing with multiple build systems.
Can we make the config files use ES modules?
There's a lot of functions without JSDoc. Try to add some API docs to newly added shared functions/components.
Can we reduce the main.ts boilerplate by inlining as much as possible?

Gold856 · 2026-02-19T08:56:07Z

+      {/if}
+    </div>
+  </div>
+{:else}


That is a seriously impressive amount of indentation (8 indents!) There has to be a way to simplify that...

The alternative as best I can tell would need to make use of $derived spam and would be truly unreadable. At least this is readable. Open to suggestions for other ways to solve it.

…ator i18n

…faultImports

Gold856 · 2026-04-16T04:14:11Z

+        '\u001b[1m\u001b[36m=== WPILib RioLog Started ===\u001b[0m\n' +
+        '\u001b[32mWaiting for robot connection...\u001b[0m\n' +
+        '\u001b[33mTIPS:\u001b[0m\n' +
+        '• \u001b[0mUse \u001b[1mSet\u001b[0m button to change team number\n' +
+        '• \u001b[0mClick on errors/warnings to expand details\n' +
+        '• \u001b[0mUse search box to filter messages\n' +
+        '• \u001b[0mToggle auto-scrolling for viewing older logs\n' +
+        '• \u001b[0mSave logs to file for later analysis',


Use a template literal.

Gold856 · 2026-04-16T04:38:35Z

Remove commented out code.

Gold856 · 2026-04-16T04:41:36Z

+        }
+      });
+    });
+  });


Unrelated and I think this is the same as a Promise.any?

Gold856 · 2026-04-16T04:41:45Z

 const constantIps: string[] = [
  '172.22.11.2',
-  //, '127.0.0.1',
+  '127.0.0.1',


Comment it out

Gold856 · 2026-04-16T04:43:11Z

+type DistHtmlOptions = {
+  webview: vscode.Webview;
+  extensionRoot: vscode.Uri;
+  distHtmlFileName: string;
+  extraCss?: vscode.Uri[];
+  appAttributes?: Record<string, string>;
+};
+
+type RewriteHtmlOptions = {
+  webview: vscode.Webview;
+  extensionRoot: vscode.Uri;
+  html: string;
+  extraCss?: vscode.Uri[];
+  appAttributes?: Record<string, string>;
+};


Unify these and make the non-common fields a separate parameter at the call site.

Gold856 · 2026-04-16T04:48:01Z

+function insertBeforeHeadClose(html: string, insert: string): string {
+  if (!insert) {
+    return html;
+  }
+  if (html.includes('</head>')) {
+    return html.replace('</head>', `${insert}\n</head>`);
+  }
+  return `${insert}\n${html}`;
+}
+
+function patchAppAttributes(html: string, attributes: Record<string, string>): string {
+  if (!attributes || Object.keys(attributes).length === 0) {
+    return html;
+  }
+
+  // Prefer the known rollup template shape.
+  const appDivPattern = /<div\s+id="app"([^>]*)>/i;
+  const match = html.match(appDivPattern);
+  if (!match) {
+    return html;
+  }
+
+  const existingAttrs = match[1] ?? '';
+  const toInject = Object.entries(attributes)
+    .map(([key, value]) => ` ${key}="${escapeHtmlAttribute(value)}"`)
+    .join('');
+
+  return html.replace(appDivPattern, `<div id="app"${existingAttrs}${toInject}>`);
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}


The machinery needed for just the vendordep manager to be able to handle separate states feels just a bit too heavy, and I think it might actually be less code to just directly return the HTML for those separate states. It also removes an entire indentation level in the Svelte code (which was bothering me).

Gold856 · 2026-04-16T04:49:15Z

Rollup files should be ignored.

Gold856 · 2026-04-16T04:49:47Z

        "prettier": "3.5.3",
-        "terser-webpack-plugin": "^5.3.14",
-        "ts-loader": "^9.5.4",
+        "@rollup/plugin-terser": "^0.4.4",


Move this to the right location.

Gold856 · 2026-04-16T04:51:00Z

+    entryFileNames: '[name].js',
+    chunkFileNames: 'chunks/[name]-[hash].js',


Does this need to be specified?

Gold856 · 2026-04-16T05:03:15Z

+  } from './types';
+
+  const vscode = acquireVsCodeApi();
+  const t = createTranslator('projectcreator');


Ugh. The current translation infrastructure is riddled with tech debt. Keeping compat with a future l10n transition would mean all calls look like l10n.t.

nobody5050 added 2 commits November 9, 2025 02:51

Begin move of webviews to svelte

47be06e

- Help - Project Creator - Project Importer - Dependency View

Migrate components to svelte 5 runes syntax, minor css fixups, depend…

8c22aa4

…ency bump

github-actions bot added the 2027 label Nov 9, 2025

nobody5050 added 3 commits December 29, 2025 00:36

The rest of it

f0235da

Merge branch '2027' into feat/convert-to-svelte

0eae2e6

Fixes failed lint

7fefc92

qwertychouskie reviewed Dec 29, 2025

View reviewed changes

Comment thread .vscode/launch.json Outdated

nobody5050 added 2 commits December 29, 2025 01:22

fixups for prettier webpack

a5a4901

address review

6d61dbf

nobody5050 requested a review from qwertychouskie December 29, 2025 07:26

nobody5050 changed the title ~~Convert webviews to Svelte~~ Migrate extension webviews to Svelte 5 Dec 29, 2025

sciencewhiz reviewed Feb 9, 2026

View reviewed changes

Comment thread vscode-wpilib/package-lock.json Outdated

revert npmmirror change to npmjs in package-lock

9c2a99d

nobody5050 requested a review from sciencewhiz February 9, 2026 18:37

Gold856 suggested changes Feb 19, 2026

View reviewed changes

Comment thread vscode-wpilib/rollup.config.js Outdated

Comment thread vscode-wpilib/resources/webviews/help.html Outdated

nobody5050 added 8 commits February 19, 2026 19:09

small size components

0ab5b89

more review addressing

c46ba91

convert functions to arrow functions in riolog

661e47b

bit more cleanup

78c595c

Improve Svelte webview integration, dependency state, and project cre…

4a4e468

…ator i18n

more review addressing

04f086a

switch imports to use CommonJS syntax so we can yeet allowSyntheticDe…

e1b693f

…faultImports

kill localeloader

dc7b12a

nobody5050 requested a review from Gold856 April 14, 2026 05:26

nobody5050 added 3 commits April 14, 2026 01:47

remove unnecessary optional

c6968b7

webpack is dead and we have killed him

99f49f8

tiny fixes in riolog from testing

ef6d5c5

nobody5050 added 4 commits April 14, 2026 10:05

fix ci

9fc284a

whoops missing dependency

f7df760

prettier

6c2b869

Format tsconfig.rollup.extension.json with prettier

158f90f

Gold856 suggested changes Apr 16, 2026

View reviewed changes

		entryFileNames: '[name].js',
		chunkFileNames: 'chunks/[name]-[hash].js',

Conversation

nobody5050 commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Gold856 commented Feb 19, 2026

Uh oh!

Gold856 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Gold856 Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nobody5050 commented Nov 9, 2025 •

edited

Loading

Gold856 left a comment •

edited

Loading

Gold856 Feb 19, 2026 •

edited

Loading