refactor: migrate from CRA to Vite and improve testing

Replace Create React App with Vite build system
Add ESLint configuration and improve TypeScript types
Create VSCode UI component mocks for better testing
Update test files with proper async handling
Add Tailwind CSS integration
Fix accessibility by adding ARIA roles
This commit is contained in:
sam hoang
2025-01-29 21:15:28 +07:00
parent 4026a87d2c
commit 12dd54671a
20 changed files with 11173 additions and 16230 deletions

View File

@@ -2,14 +2,15 @@
"name": "webview-ui",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"start": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "jest",
"lint": "eslint src --ext ts,tsx"
},
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.101",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vscode/webview-ui-toolkit": "^1.4.0",
"debounce": "^2.1.1",
"fast-deep-equal": "^3.1.3",
@@ -17,50 +18,95 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-remark": "^2.1.0",
"react-scripts": "5.0.1",
"react-textarea-autosize": "^8.5.3",
"react-use": "^17.5.1",
"react-virtuoso": "^4.7.13",
"rehype-highlight": "^7.0.0",
"rewire": "^7.0.0",
"shell-quote": "^1.8.2",
"styled-components": "^6.1.13",
"typescript": "^4.9.5",
"tailwindcss": "^4.0.0",
"vscrui": "^0.2.0",
"web-vitals": "^2.1.4"
"@tailwindcss/vite": "^4.0.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "node ./scripts/build-react-no-split.js",
"test": "react-app-rewired test --watchAll=false",
"eject": "react-scripts eject",
"lint": "eslint src --ext ts,tsx"
"devDependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^18.0.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/shell-quote": "^1.7.5",
"@types/testing-library__jest-dom": "^5.14.5",
"@types/vscode-webview": "^1.57.5",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.5.1",
"jest-environment-jsdom": "^27.5.1",
"jest-simple-dot-reporter": "^1.0.5",
"postcss": "^8.5.1",
"ts-jest": "^27.1.5",
"typescript": "^4.9.5",
"vite": "^5.4.14"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
"jest": {
"testEnvironment": "jsdom",
"setupFilesAfterEnv": [
"@testing-library/jest-dom/extend-expect"
],
"preset": "ts-jest",
"reporters": [
[
"jest-simple-dot-reporter",
{}
]
],
"moduleNameMapper": {
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
"^vscrui$": "<rootDir>/src/__mocks__/vscrui.ts",
"^@vscode/webview-ui-toolkit/react$": "<rootDir>/src/__mocks__/@vscode/webview-ui-toolkit/react.ts"
},
"transformIgnorePatterns": [
"/node_modules/(?!(rehype-highlight|react-remark|unist-util-visit|unist-util-find-after|vfile|unified|bail|is-plain-obj|trough|vfile-message|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|character-entities|markdown-table|zwitch|longest-streak|escape-string-regexp|unist-util-is|hast-util-to-text|@vscode/webview-ui-toolkit|@microsoft/fast-react-wrapper|@microsoft/fast-element|@microsoft/fast-foundation|@microsoft/fast-web-utilities|exenv-es6|vscrui)/)"
],
"transform": {
"^.+\\.(ts|tsx)$": [
"ts-jest",
{
"tsconfig": {
"jsx": "react-jsx"
}
}
]
},
"moduleDirectories": [
"node_modules",
"src"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
"not op_mini all",
"last 2 chrome version",
"last 2 firefox version",
"last 2 safari version"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@types/shell-quote": "^1.7.5",
"@types/vscode-webview": "^1.57.5",
"customize-cra": "^1.0.0",
"eslint": "^8.57.0",
"jest-simple-dot-reporter": "^1.0.5",
"react-app-rewired": "^2.2.1"
}
}