Merge pull request #104 from eruptionjs/chore/upgrade-packages

chore(project): upgrade packages (React 19 🎉)

Author: raisiqueira

.eslintignore

@@ -0,0 +1,4 @@
+import { default as eruptionPrettierConfig } from "@eruptionjs/config/prettier"
+export default {
+  ...eruptionPrettierConfig,
+}

.eslintrc.cjs

@@ -54,7 +54,7 @@ Then, Husky will start the pre-commit hook and run lint-staged, who will run `pr
 
 After that, if everything is validated correctly, Husky will proceed with the commit-msg hook, where it will evaluate if your commit message is following the Conventional Commit's best practice and later run the tests of your project. If any of the tests are broken, the commit will be aborted. You must fix the tests before proceed.
 
-You can also commit your files with the help of the CLI. To do so, just run `npm run commit`. From there, the CLI will assist you in the proccess. As before: if your changes fails the validation, you must fix it before proceed.
+You can also commit your files with the help of the CLI. To do so, just run `npm run commit`. From there, the CLI will assist you in the process. As before: if your changes fails the validation, you must fix it before proceed.
 
 As a best practice, it is strongly recommended that you do not skip the validations. If you need to change the way your commit messages are written, just go to file `commitlint.config.ts` and you will find there the config needed.
 

.prettierrc

@@ -0,0 +1,3 @@
+import { default as eruptionESLintConfig } from '@eruptionjs/config/eslint'
+
+export default [...eruptionESLintConfig]

.prettierrc.js

@@ -2,7 +2,7 @@
   "name": "eruption",
   "description": "Next Generation Boilerplate for React/Typescript, built on top of Vite ⚡️",
   "private": false,
-  "version": "1.11",
+  "version": "1.12",
   "type": "module",
   "main": "src/main.tsx",
   "license": "MIT",
@@ -45,36 +45,27 @@
     "bun": "^1.1.x"
   },
   "dependencies": {
-    "react": "^18.x",
-    "react-dom": "^18.x"
+    "react": "^19.x",
+    "react-dom": "^19.x"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.x",
     "@commitlint/config-conventional": "^19.x",
     "@commitlint/prompt-cli": "^19.x",
     "@commitlint/types": "^19.x",
+    "@eruptionjs/config": "^0.5.0",
     "@testing-library/jest-dom": "^6.x",
-    "@testing-library/react": "^15.x",
+    "@testing-library/react": "^16.x",
     "@testing-library/user-event": "^14.x",
-    "@trivago/prettier-plugin-sort-imports": "^4.x",
     "@types/bun": "^1.x",
-    "@types/react": "^18.x",
-    "@types/react-dom": "^18.x",
-    "@typescript-eslint/eslint-plugin": "^7.x",
-    "@typescript-eslint/parser": "^7.x",
+    "@types/react": "^19.x",
+    "@types/react-dom": "^19.x",
     "@vitejs/plugin-react-swc": "^3.x",
-    "@vitest/coverage-v8": "^1.x",
-    "@vitest/ui": "^1.x",
-    "c8": "^9.x",
-    "eslint": "^8.x",
-    "eslint-config-prettier": "^9.x",
-    "eslint-plugin-import": "^2.x",
-    "eslint-plugin-jsx-a11y": "^6.x",
-    "eslint-plugin-prettier": "^5.x",
-    "eslint-plugin-react": "^7.x",
-    "eslint-plugin-react-hooks": "^4.x",
-    "eslint-plugin-react-refresh": "^0.x",
-    "happy-dom": "^14.x",
+    "@vitest/coverage-v8": "^2.x",
+    "@vitest/ui": "^2.x",
+    "c8": "^10.x",
+    "eslint": "^9.x",
+    "happy-dom": "^15.x",
     "husky": "^9.x",
     "lint-staged": "^15.x",
     "msw": "^2.x",
@@ -87,7 +78,7 @@
     "vite-bundle-visualizer": "^1.x",
     "vite-plugin-compression2": "^1.x",
     "vite-plugin-qrcode": "^0.x",
-    "vitest": "^1.x",
+    "vitest": "^2.x",
     "web-vitals": "^3.x"
   },
   "msw": {

README.md

@@ -10,14 +10,14 @@ describe('App', () => {
     expect(screen.getByText('Vite + React/TS = EruptionJS')).toBeInTheDocument()
   })
 
-  test('should return 1 when the user click one time at button', () => {
+  test('should return 1 when the user click one time at button', async () => {
     render(<App />)
 
     const buttonElement = screen.getByRole('button')
     expect(screen.queryByText('count is 0')).toBeInTheDocument()
 
-    userEvent.click(buttonElement)
+    await userEvent.click(buttonElement)
 
-    waitFor(() => expect(screen.queryByText('count is 1')).toBeInTheDocument())
+    await waitFor(() => expect(screen.queryByText('count is 1')).toBeInTheDocument())
   })
 })

bun.lockb

@@ -1,11 +1,15 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import './App.css'
 import reactLogo from './react.svg'
 
 const App = () => {
   const [count, setCount] = useState(0)
 
+  useEffect(() => {
+    console.log('count', count)
+  }, [count])
+
   return (
     <div className="App">
       <div className="flex">

eslint.config.js

@@ -8,9 +8,9 @@ import './index.css'
 const root = createRoot(document.getElementById('root') as HTMLElement)
 
 if (import.meta.env.MODE === 'test') {
-  import('@/__mocks__/browser')
+  void import('@/__mocks__/browser')
     .then(({ worker }) => {
-      worker.start()
+      void worker.start()
     })
     .then(() => {
       root.render(

package.json

@@ -1,8 +1,8 @@
-import { ReportCallback } from 'web-vitals'
+import { type ReportCallback } from 'web-vitals'
 
 const reportWebVitals = (onPerfEntry?: ReportCallback) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ onCLS, onFID, onFCP, onLCP, onTTFB }) => {
+    void import('web-vitals').then(({ onCLS, onFID, onFCP, onLCP, onTTFB }) => {
       onCLS(onPerfEntry)
       onFID(onPerfEntry)
       onFCP(onPerfEntry)

src/App/App.spec.tsx

@@ -6,5 +6,5 @@
     "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "vitest.config.ts"]
 }

src/App/App.tsx

@@ -1,11 +1,9 @@
-/// <reference types="vitest" />
 import react from '@vitejs/plugin-react-swc'
 import { resolve } from 'path'
-import { defineConfig } from 'vite'
+import { type UserConfig, defineConfig } from 'vite'
 import { compression } from 'vite-plugin-compression2'
 import { qrcode } from 'vite-plugin-qrcode'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
     alias: {
@@ -25,12 +23,6 @@ export default defineConfig({
       exclude: [/\.(br)$/, /\.(gz)$/],
     }),
   ],
-  test: {
-    globals: true,
-    watch: false,
-    environment: 'happy-dom',
-    setupFiles: './src/setup-test.ts',
-  },
   build: {
     sourcemap: true,
     target: 'esnext',
@@ -47,4 +39,4 @@ export default defineConfig({
       },
     },
   },
-})
+}) satisfies UserConfig

src/main.tsx

@@ -0,0 +1,15 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      globals: true,
+      watch: false,
+      environment: 'happy-dom',
+      setupFiles: './src/setup-test.ts',
+    },
+  }),
+)