Switch from Webpack to Vite for Storybook

This simplifies the setup and makes it more similar to the "real"
extension setup since it also uses ESBuild (which is also used by Vite).

extensions/ql-vscode/.babelrc.json

@@ -1,16 +0,0 @@
-{
-  "sourceType": "unambiguous",
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "chrome": 100
-        }
-      }
-    ],
-    "@babel/preset-typescript",
-    "@babel/preset-react"
-  ],
-  "plugins": []
-}

extensions/ql-vscode/.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -10,7 +10,7 @@ const config: StorybookConfig = {
     "./vscode-theme-addon/preset.ts",
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {},
   },
   docs: {

extensions/ql-vscode/.storybook/vscode-theme-addon/withTheme.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 import { useEffect } from "react";
 import type {
   PartialStoryFn as StoryFunction,
@@ -6,31 +8,20 @@ import type {
 
 import { VSCodeTheme } from "./theme";
 
+import darkThemeStyle from "../../src/stories/vscode-theme-dark.css?url";
+import lightThemeStyle from "../../src/stories/vscode-theme-light.css?url";
+import lightHighContrastThemeStyle from "../../src/stories/vscode-theme-light-high-contrast.css?url";
+import darkHighContrastThemeStyle from "../../src/stories/vscode-theme-dark-high-contrast.css?url";
+import githubLightDefaultThemeStyle from "../../src/stories/vscode-theme-github-light-default.css?url";
+import githubDarkDefaultThemeStyle from "../../src/stories/vscode-theme-github-dark-default.css?url";
+
 const themeFiles: { [key in VSCodeTheme]: string } = {
-  [VSCodeTheme.Dark]:
+  [VSCodeTheme.Dark]: darkThemeStyle,
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
+  [VSCodeTheme.Light]: lightThemeStyle,
-    require("!file-loader?modules!../../src/stories/vscode-theme-dark.css")
+  [VSCodeTheme.LightHighContrast]: lightHighContrastThemeStyle,
-      .default,
+  [VSCodeTheme.DarkHighContrast]: darkHighContrastThemeStyle,
-  [VSCodeTheme.Light]:
+  [VSCodeTheme.GitHubLightDefault]: githubLightDefaultThemeStyle,
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
+  [VSCodeTheme.GitHubDarkDefault]: githubDarkDefaultThemeStyle,
-    require("!file-loader?modules!../../src/stories/vscode-theme-light.css")
-      .default,
-  [VSCodeTheme.LightHighContrast]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-light-high-contrast.css")
-      .default,
-  [VSCodeTheme.DarkHighContrast]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-dark-high-contrast.css")
-      .default,
-  [VSCodeTheme.GitHubLightDefault]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-github-light-default.css")
-      .default,
-  [VSCodeTheme.GitHubDarkDefault]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-github-dark-default.css")
-      .default,
 };
 
 export const withTheme = (StoryFn: StoryFunction, context: StoryContext) => {

extensions/ql-vscode/package.json

@@ -1996,18 +1996,18 @@
     "@github/markdownlint-github": "^0.6.0",
     "@octokit/plugin-throttling": "^8.0.0",
     "@playwright/test": "^1.40.1",
-    "@storybook/addon-a11y": "^8.0.0",
+    "@storybook/addon-a11y": "^8.0.2",
-    "@storybook/addon-actions": "^8.0.0",
+    "@storybook/addon-actions": "^8.0.2",
-    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-essentials": "^8.0.2",
-    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.2",
-    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-links": "^8.0.2",
     "@storybook/blocks": "^8.0.2",
-    "@storybook/components": "^8.0.0",
+    "@storybook/components": "^8.0.2",
     "@storybook/csf": "^0.1.1",
-    "@storybook/manager-api": "^8.0.0",
+    "@storybook/manager-api": "^8.0.2",
-    "@storybook/react": "^8.0.0",
+    "@storybook/react": "^8.0.2",
-    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/react-vite": "^8.0.2",
-    "@storybook/theming": "^8.0.0",
+    "@storybook/theming": "^8.0.2",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
@@ -2043,7 +2043,6 @@
     "applicationinsights": "^2.9.4",
     "cosmiconfig": "^9.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.10.0",
     "del": "^6.0.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.0.0",
@@ -2057,7 +2056,6 @@
     "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "file-loader": "^6.2.0",
     "glob": "^10.0.0",
     "gulp": "^4.0.2",
     "gulp-esbuild": "^0.12.0",
@@ -2070,19 +2068,18 @@
     "lint-staged": "^15.0.2",
     "markdownlint-cli2": "^0.12.1",
     "markdownlint-cli2-formatter-pretty": "^0.0.5",
-    "mini-css-extract-plugin": "^2.8.1",
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "prettier": "^3.2.5",
-    "storybook": "^8.0.0",
+    "storybook": "^8.0.2",
     "tar-stream": "^3.1.7",
     "through2": "^4.0.2",
     "ts-jest": "^29.0.1",
     "ts-json-schema-generator": "^1.1.2",
-    "ts-loader": "^9.4.2",
     "ts-node": "^10.7.0",
     "ts-unused-exports": "^10.0.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.2",
+    "vite": "^5.2.0"
   },
   "lint-staged": {
     "./**/*.{json,css,scss}": [