mrva/vscode-codeql
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Switch from Webpack to Vite for Storybook

Browse Source 
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).
This commit is contained in:
Koen Vlaswinkel
2024-03-20 12:26:57 +01:00
parent c553b1cb1d
commit c110fd3e0b
5 changed files with 1129 additions and 2495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
extensions/ql-vscode/.babelrc.json
View File

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

4
extensions/ql-vscode/.storybook/main.ts
View File

@@ -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: {

39
extensions/ql-vscode/.storybook/vscode-theme-addon/withTheme.ts
View File

@@ -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]:
// 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.css")
.default,
[VSCodeTheme.Light]:
// 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.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,
[VSCodeTheme.Dark]: darkThemeStyle,
[VSCodeTheme.Light]: lightThemeStyle,
[VSCodeTheme.LightHighContrast]: lightHighContrastThemeStyle,
[VSCodeTheme.DarkHighContrast]: darkHighContrastThemeStyle,
[VSCodeTheme.GitHubLightDefault]: githubLightDefaultThemeStyle,
[VSCodeTheme.GitHubDarkDefault]: githubDarkDefaultThemeStyle,
};
export const withTheme = (StoryFn: StoryFunction, context: StoryContext) => {

3536
extensions/ql-vscode/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

29
extensions/ql-vscode/package.json
View File

@@ -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-actions": "^8.0.0",
"@storybook/addon-essentials": "^8.0.0",
"@storybook/addon-interactions": "^8.0.0",
"@storybook/addon-links": "^8.0.0",
"@storybook/addon-a11y": "^8.0.2",
"@storybook/addon-actions": "^8.0.2",
"@storybook/addon-essentials": "^8.0.2",
"@storybook/addon-interactions": "^8.0.2",
"@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/react": "^8.0.0",
"@storybook/react-webpack5": "^8.0.0",
"@storybook/theming": "^8.0.0",
"@storybook/manager-api": "^8.0.2",
"@storybook/react": "^8.0.2",
"@storybook/react-vite": "^8.0.2",
"@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}": [