Skip to content

Commit 65f2227

Browse files
fabioh8010fabioh8010
authored
chore: upgrade web-vite example (#95)
1 parent 1d005be commit 65f2227

File tree

14 files changed

+1845
-1680
lines changed

14 files changed

+1845
-1680
lines changed

‎examples/web-vite/.eslintrc.cjs‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎examples/web-vite/README-orig.md‎

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,51 @@ This template provides a minimal setup to get React working in Vite with HMR and
44

55
Currently, two official plugins are available:
66

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
99

1010
## Expanding the ESLint configuration
1111

12-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13-
14-
- Configure the top-level `parserOptions` property like this:
12+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
1513

1614
```js
17-
export default {
18-
// other rules...
19-
parserOptions: {
20-
ecmaVersion: 'latest',
21-
sourceType: 'module',
22-
project: ['./tsconfig.json', './tsconfig.node.json'],
23-
tsconfigRootDir: __dirname,
15+
export default tseslint.config({
16+
extends: [
17+
// Remove ...tseslint.configs.recommended and replace with this
18+
...tseslint.configs.recommendedTypeChecked,
19+
// Alternatively, use this for stricter rules
20+
...tseslint.configs.strictTypeChecked,
21+
// Optionally, add this for stylistic rules
22+
...tseslint.configs.stylisticTypeChecked,
23+
],
24+
languageOptions: {
25+
// other options...
26+
parserOptions: {
27+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
28+
tsconfigRootDir: import.meta.dirname,
29+
},
2430
},
25-
}
31+
})
2632
```
2733

28-
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29-
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
34+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35+
36+
```js
37+
// eslint.config.js
38+
import reactX from 'eslint-plugin-react-x'
39+
import reactDom from 'eslint-plugin-react-dom'
40+
41+
export default tseslint.config({
42+
plugins: {
43+
// Add the react-x and react-dom plugins
44+
'react-x': reactX,
45+
'react-dom': reactDom,
46+
},
47+
rules: {
48+
// other rules...
49+
// Enable its recommended typescript rules
50+
...reactX.configs['recommended-typescript'].rules,
51+
...reactDom.configs.recommended.rules,
52+
},
53+
})
54+
```

‎examples/web-vite/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@ This example showcases Reassure setup for Vite React.js web app.
1818
* generate `reassure-tests.sh` CI script
1919
* generate `dangerfile.js` config for `danger`
2020
* add `.reasure` entry to `.gitignore`
21-
5. (optional) Add `configure({ testingLibrary: 'react' });` to your `jest-setup.js` file
21+
5. (optional) Add `configure({ testingLibrary: 'react' });` to your `jest-setup.js` file

‎examples/web-vite/dangerfile.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable import/no-extraneous-dependencies */
21
import path from 'path';
32
import { dangerReassure } from 'reassure';
43

‎examples/web-vite/eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎examples/web-vite/package.json‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,44 @@
11
{
2-
"name": "reassure-web-vite",
3-
"describe": "Reassure example for Vite web app",
2+
"name": "web-vite",
43
"private": true,
54
"version": "1.0.0",
65
"type": "module",
76
"scripts": {
87
"dev": "vite",
9-
"build": "tsc && vite build",
10-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
1110
"preview": "vite preview",
1211
"test": "jest",
1312
"perf-test": "reassure",
1413
"typecheck": "tsc --noEmit"
1514
},
1615
"dependencies": {
17-
"react": "^18.2.0",
18-
"react-dom": "^18.2.0"
16+
"react": "^19.1.0",
17+
"react-dom": "^19.1.0"
1918
},
2019
"devDependencies": {
21-
"@babel/preset-env": "^7.24.5",
22-
"@babel/preset-react": "^7.24.1",
23-
"@babel/preset-typescript": "^7.24.1",
20+
"@babel/preset-env": "^7.27.2",
21+
"@babel/preset-react": "^7.27.1",
22+
"@babel/preset-typescript": "^7.27.1",
23+
"@eslint/js": "^9.25.0",
2424
"@testing-library/dom": "^10.4.0",
25-
"@testing-library/react": "^16.2.0",
25+
"@testing-library/react": "^16.3.0",
2626
"@types/babel__preset-env": "^7",
27-
"@types/jest": "^29.5.12",
28-
"@types/react": "^18.2.66",
29-
"@types/react-dom": "^18.2.22",
30-
"@typescript-eslint/eslint-plugin": "^7.2.0",
31-
"@typescript-eslint/parser": "^7.2.0",
32-
"@vitejs/plugin-react": "^4.2.1",
33-
"danger": "^12.2.0",
34-
"eslint": "^8.57.0",
35-
"eslint-plugin-react-hooks": "^4.6.0",
36-
"eslint-plugin-react-refresh": "^0.4.6",
27+
"@types/jest": "^29.5.14",
28+
"@types/react": "^19.1.2",
29+
"@types/react-dom": "^19.1.2",
30+
"@vitejs/plugin-react": "^4.4.1",
31+
"danger": "^13.0.4",
32+
"eslint": "^9.25.0",
33+
"eslint-plugin-react-hooks": "^5.2.0",
34+
"eslint-plugin-react-refresh": "^0.4.19",
35+
"globals": "^16.0.0",
3736
"jest": "^29.7.0",
3837
"jest-environment-jsdom": "^29.7.0",
39-
"reassure": "^1.3.2",
40-
"typescript": "^5.2.2",
41-
"vite": "^5.2.0"
38+
"reassure": "^1.4.0",
39+
"typescript": "~5.8.3",
40+
"typescript-eslint": "^8.30.1",
41+
"vite": "^6.3.5"
4242
},
4343
"packageManager": "[email protected]"
4444
}

‎examples/web-vite/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ function App() {
99
return (
1010
<>
1111
<div>
12-
<a href="https://vitejs.dev" target="_blank">
12+
<a href="https://vite.dev" target="_blank">
1313
<img src={viteLogo} className="logo" alt="Vite logo" />
1414
</a>
1515
<a href="https://react.dev" target="_blank">

‎examples/web-vite/src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:root {
2-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
2+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
33
line-height: 1.5;
44
font-weight: 400;
55

‎examples/web-vite/src/main.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom/client'
3-
import App from './App.tsx'
1+
import { StrictMode } from 'react'
2+
import { createRoot } from 'react-dom/client'
43
import './index.css'
4+
import App from './App.tsx'
55

6-
ReactDOM.createRoot(document.getElementById('root')!).render(
7-
<React.StrictMode>
6+
createRoot(document.getElementById('root')!).render(
7+
<StrictMode>
88
<App />
9-
</React.StrictMode>,
9+
</StrictMode>,
1010
)

‎examples/web-vite/tsconfig.app.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"compilerOptions": {
3+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4+
"target": "ES2020",
5+
"useDefineForClassFields": true,
6+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
7+
"module": "ESNext",
8+
"skipLibCheck": true,
9+
10+
/* Bundler mode */
11+
"moduleResolution": "bundler",
12+
"allowImportingTsExtensions": true,
13+
"verbatimModuleSyntax": true,
14+
"moduleDetection": "force",
15+
"noEmit": true,
16+
"jsx": "react-jsx",
17+
18+
/* Linting */
19+
"strict": true,
20+
"noUnusedLocals": true,
21+
"noUnusedParameters": true,
22+
"erasableSyntaxOnly": true,
23+
"noFallthroughCasesInSwitch": true,
24+
"noUncheckedSideEffectImports": true
25+
},
26+
"include": ["src"]
27+
}

0 commit comments

Comments
 (0)