Skip to content

Migrate extension webviews to Svelte 5 #815

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nobody5050 wants to merge 23 commits into
base: 2027
Choose a base branch
from
Open

Migrate extension webviews to Svelte 5 #815

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
47be06e
Begin move of webviews to svelte
nobody5050 Nov 9, 2025
8c22aa4
Migrate components to svelte 5 runes syntax, minor css fixups, depend…
nobody5050 Nov 9, 2025
f0235da
The rest of it
nobody5050 Dec 29, 2025
0eae2e6
Merge branch '2027' into feat/convert-to-svelte
nobody5050 Dec 29, 2025
7fefc92
Fixes failed lint
nobody5050 Dec 29, 2025
a5a4901
fixups for prettier webpack
nobody5050 Dec 29, 2025
6d61dbf
address review
nobody5050 Dec 29, 2025
9c2a99d
revert npmmirror change to npmjs in package-lock
nobody5050 Feb 9, 2026
0ab5b89
small size components
nobody5050 Feb 20, 2026
c46ba91
more review addressing
nobody5050 Apr 11, 2026
661e47b
convert functions to arrow functions in riolog
nobody5050 Apr 11, 2026
78c595c
bit more cleanup
nobody5050 Apr 11, 2026
4a4e468
Improve Svelte webview integration, dependency state, and project cre…
nobody5050 Apr 11, 2026
04f086a
more review addressing
nobody5050 Apr 11, 2026
e1b693f
switch imports to use CommonJS syntax so we can yeet allowSyntheticDe…
nobody5050 Apr 14, 2026
dc7b12a
kill localeloader
nobody5050 Apr 14, 2026
c6968b7
remove unnecessary optional
nobody5050 Apr 14, 2026
99f49f8
webpack is dead and we have killed him
nobody5050 Apr 14, 2026
ef6d5c5
tiny fixes in riolog from testing
nobody5050 Apr 14, 2026
9fc284a
fix ci
nobody5050 Apr 14, 2026
f7df760
whoops missing dependency
nobody5050 Apr 14, 2026
6c2b869
prettier
nobody5050 Apr 14, 2026
158f90f
Format tsconfig.rollup.extension.json with prettier
nobody5050 Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceFolder}/vscode-wpilib"],
"outFiles": ["${workspaceFolder}/vscode-wpilib/out/**/*.js"],
"preLaunchTask": "vscode-web-watch"
"preLaunchTask": "npm: build:dev"
},
{
"name": "Extension Tests",
Expand All @@ -24,7 +24,7 @@
"--extensionTestsPath=${workspaceFolder}/vscode-wpilib/out/test"
],
"outFiles": ["${workspaceFolder}/vscode-wpilib/out/test/**/*.js"],
"preLaunchTask": "vscode-web-watch"
"preLaunchTask": "npm: build:dev"
}
]
}
24 changes: 18 additions & 6 deletions .vscode/tasks.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,30 @@
"version": "2.0.0",
"tasks": [
{
"label": "npm: build:dev",
"type": "npm",
"identifier": "vscode-web-watch",
"script": "webpack-watch",
"script": "build:dev",
"path": "vscode-wpilib/",
"isBackground": true,
"presentation": {
"reveal": "never"
},
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"reveal": "never"
}
},
{
"label": "wpilib: watch",
"type": "npm",
"script": "watch",
"path": "vscode-wpilib/",
"isBackground": true,
"runOptions": {
"runOn": "folderOpen"
},
"presentation": {
"reveal": "never"
},
"problemMatcher": []
}
]
Expand Down
4,269 changes: 3,513 additions & 756 deletions vscode-wpilib/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 16 additions & 1 deletion vscode-wpilib/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,11 +429,17 @@
"repository": "https://github.com/wpilibsuite/vscode-wpilib",
"homepage": "https://github.com/wpilibsuite/vscode-wpilib",
"scripts": {
"vscode:prepublish": "gulp build && eslint . && webpack --config-node-env production",
"vscode:prepublish": "gulp build && npm run build && eslint .",
"clean": "gulp clean",
"lint": "eslint .",
"build": "npm-run-all build:webviews webpack",
"build:dev": "npm-run-all build:webviews webpack-dev",
"webpack": "webpack --config-node-env production",
"webpack-dev": "webpack --config-node-env development",
"webpack-watch": "webpack --config-node-env development --watch",
"build:webviews": "rollup -c",
"watch:webviews": "rollup -c -w",
"watch": "npm-run-all --parallel webpack-watch watch:webviews",
"unittest": "mocha -r ts-node/register -u tdd src/unittest/*.ts",
"gulp": "gulp",
"test": "webpack --config-node-env production && node ./node_modules/vscode/bin/test",
Expand All @@ -442,6 +448,10 @@
},
"devDependencies": {
"@eslint/js": "^9.29.0",
"@rollup/plugin-commonjs": "^25.0.8",
"@rollup/plugin-html": "^1.0.3",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-typescript": "^11.1.6",
"@types/micromatch": "^4.0.9",
"@types/mocha": "^10.0.10",
"@types/node": "^22.19.0",
Expand All @@ -453,7 +463,12 @@
"gulp-filter": "^9.0.1",
"gulp-yaml": "^2.0.4",
"mocha": "^11.5.0",
"npm-run-all": "^4.1.5",
"prettier": "3.5.3",
"rollup": "^4.22.4",
"rollup-plugin-svelte": "^7.2.3",
"svelte": "^5.0.0",
"svelte-preprocess": "^6.0.0",
"terser-webpack-plugin": "^5.3.14",
"ts-loader": "^9.5.4",
"ts-node": "^10.9.2",
Expand Down
10 changes: 0 additions & 10 deletions vscode-wpilib/resources/live.html
View file
Open in desktop

This file was deleted.

98 changes: 50 additions & 48 deletions vscode-wpilib/resources/media/main.css
View file
Open in desktop
Copy link
Copy Markdown
Member

@Gold856 Gold856 Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove commented out code.

Original file line number Diff line number Diff line change
@@ -1,28 +1,11 @@
.installed-dependency,
.available-dependency {
margin-bottom: 10px;

&:first-of-type {
margin-top: 10px;
}
}

.uninstall-button button[id*='version-action'],
.uninstall-button button[id*='uninstall-action'],
.uninstall-button button[id*='install-action'] {
width: 72px;
height: 24px;
box-sizing: border-box;
padding: 1px 8px;
display: flex;
align-items: center;
justify-content: center;
}

.uninstall-button {
background-color: var(--vscode-button-secondaryBackground, transparent);
color: var(--vscode-button-secondaryForeground);
border: 1px solid var(--vscode-button-border);
.installed-dependency:first-of-type,
.available-dependency:first-of-type {
margin-top: 10px;
}

.dependency-header {
Expand Down Expand Up @@ -87,29 +70,16 @@
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}

&:has(#updateall-action) {
margin-top: 4px;
}
.top-line:has(#updateall-action) {
margin-top: 4px;
}

#updateall-action {
width: 100%;
}

i {
margin-right: 4px !important;
}

.uninstall-button {
padding: 4px !important;

& > i {
margin-right: 4px !important;
margin-left: 4px !important;
}
}

.vscode-collapsible div {
overflow: visible;
}
Expand All @@ -119,13 +89,35 @@ i {
flex-shrink: 2;
}

button[id*='install-action'] {
flex-shrink: 0;
.dependency-controls .vscode-button,
.available-dependency .vscode-button,
.top-line .vscode-button,
.url-install-section .vscode-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 10px;
min-height: 26px;
box-sizing: border-box;
}

button[id*='version-action'] {
overflow: visible;
padding: 1px 6px;
.dependency-controls .vscode-button span,
.available-dependency .vscode-button span,
.url-install-section .vscode-button span {
line-height: 1.2;
}

.dependency-controls .uninstall-button {
background-color: var(--vscode-button-secondaryBackground, transparent);
color: var(--vscode-button-secondaryForeground);
border: 1px solid var(--vscode-button-border);
min-width: 32px;
padding: 4px;
}

.dependency-controls .uninstall-button i {
margin: 0;
}

/* Project Creator and Import Styles */
Expand Down Expand Up @@ -299,15 +291,25 @@ button[id*='version-action'] {
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 {
Expand All @@ -316,22 +318,22 @@ button[id*='version-action'] {
}

.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;
Expand Down
Loading