diff --git a/template-react-ts/.eslintrc.cjs b/template-react-ts/.eslintrc.cjs deleted file mode 100644 index d6c9537..0000000 --- a/template-react-ts/.eslintrc.cjs +++ /dev/null @@ -1,18 +0,0 @@ -module.exports = { - root: true, - env: { browser: true, es2020: true }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', - ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parser: '@typescript-eslint/parser', - plugins: ['react-refresh'], - rules: { - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], - }, -} diff --git a/template-react-ts/.npmrc b/template-react-ts/.npmrc index 45c8cd7..1a98c90 100644 --- a/template-react-ts/.npmrc +++ b/template-react-ts/.npmrc @@ -3,4 +3,4 @@ shamefully-hoist=true # For China 🇨🇳 developers -# electron_mirror=https://npmmirror.com/mirrors/electron/ +# electron_mirror=https://npmmirror.com/mirrors/electron/ \ No newline at end of file diff --git a/template-react-ts/README.md b/template-react-ts/README.md index 0d6babe..da98444 100644 --- a/template-react-ts/README.md +++ b/template-react-ts/README.md @@ -4,27 +4,51 @@ This template provides a minimal setup to get React working in Vite with HMR and Currently, two official plugins are available: -- [@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 -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@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 ## Expanding the ESLint configuration -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: - -- Configure the top-level `parserOptions` property like this: +If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: ```js -export default { - // other rules... - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, +export default tseslint.config({ + extends: [ + // Remove ...tseslint.configs.recommended and replace with this + ...tseslint.configs.recommendedTypeChecked, + // Alternatively, use this for stricter rules + ...tseslint.configs.strictTypeChecked, + // Optionally, add this for stylistic rules + ...tseslint.configs.stylisticTypeChecked, + ], + languageOptions: { + // other options... + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, }, -} +}) ``` -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- 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 +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: + +```js +// eslint.config.js +import reactX from 'eslint-plugin-react-x' +import reactDom from 'eslint-plugin-react-dom' + +export default tseslint.config({ + plugins: { + // Add the react-x and react-dom plugins + 'react-x': reactX, + 'react-dom': reactDom, + }, + rules: { + // other rules... + // Enable its recommended typescript rules + ...reactX.configs['recommended-typescript'].rules, + ...reactDom.configs.recommended.rules, + }, +}) +``` diff --git a/template-react-ts/eslint.config.js b/template-react-ts/eslint.config.js new file mode 100644 index 0000000..092408a --- /dev/null +++ b/template-react-ts/eslint.config.js @@ -0,0 +1,28 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' + +export default tseslint.config( + { ignores: ['dist'] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['**/*.{ts,tsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + plugins: { + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, + }, +) diff --git a/template-react-ts/package.json b/template-react-ts/package.json index 9ed0c5c..ab5eb91 100644 --- a/template-react-ts/package.json +++ b/template-react-ts/package.json @@ -5,24 +5,25 @@ "type": "module", "scripts": { "dev": "vite", - "build": "tsc && vite build", - "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "build": "tsc -b && vite build", + "lint": "eslint .", "preview": "vite preview" }, "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^19.1.0", + "react-dom": "^19.1.0" }, "devDependencies": { - "@types/react": "^18.2.64", - "@types/react-dom": "^18.2.21", - "@typescript-eslint/eslint-plugin": "^7.1.1", - "@typescript-eslint/parser": "^7.1.1", - "@vitejs/plugin-react": "^4.2.1", - "eslint": "^8.57.0", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.5", - "typescript": "^5.2.2", - "vite": "^5.1.6" + "@eslint/js": "^9.25.0", + "@types/react": "^19.1.2", + "@types/react-dom": "^19.1.2", + "@vitejs/plugin-react": "^4.4.1", + "eslint": "^9.25.0", + "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-refresh": "^0.4.19", + "globals": "^16.0.0", + "typescript": "~5.8.3", + "typescript-eslint": "^8.30.1", + "vite": "^6.3.2" } } diff --git a/template-react-ts/src/App.tsx b/template-react-ts/src/App.tsx index afe48ac..3d7ded3 100644 --- a/template-react-ts/src/App.tsx +++ b/template-react-ts/src/App.tsx @@ -9,7 +9,7 @@ function App() { return ( <>
- + Vite logo diff --git a/template-react-ts/src/index.css b/template-react-ts/src/index.css index 6119ad9..08a3ac9 100644 --- a/template-react-ts/src/index.css +++ b/template-react-ts/src/index.css @@ -1,5 +1,5 @@ :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; diff --git a/template-react-ts/src/main.tsx b/template-react-ts/src/main.tsx index 3d7150d..bef5202 100644 --- a/template-react-ts/src/main.tsx +++ b/template-react-ts/src/main.tsx @@ -1,10 +1,10 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.tsx' +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' import './index.css' +import App from './App.tsx' -ReactDOM.createRoot(document.getElementById('root')!).render( - +createRoot(document.getElementById('root')!).render( + - , + , ) diff --git a/template-react-ts/tsconfig.app.json b/template-react-ts/tsconfig.app.json new file mode 100644 index 0000000..c9ccbd4 --- /dev/null +++ b/template-react-ts/tsconfig.app.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/template-react-ts/tsconfig.json b/template-react-ts/tsconfig.json index a7fc6fb..1ffef60 100644 --- a/template-react-ts/tsconfig.json +++ b/template-react-ts/tsconfig.json @@ -1,25 +1,7 @@ { - "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx", - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true - }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] } diff --git a/template-react-ts/tsconfig.node.json b/template-react-ts/tsconfig.node.json index 97ede7e..9728af2 100644 --- a/template-react-ts/tsconfig.node.json +++ b/template-react-ts/tsconfig.node.json @@ -1,11 +1,25 @@ { "compilerOptions": { - "composite": true, - "skipLibCheck": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2022", + "lib": ["ES2023"], "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true, - "strict": true + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true }, "include": ["vite.config.ts"] } diff --git a/template-react-ts/vite.config.ts b/template-react-ts/vite.config.ts index 5a33944..8b0f57b 100644 --- a/template-react-ts/vite.config.ts +++ b/template-react-ts/vite.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' -// https://vitejs.dev/config/ +// https://vite.dev/config/ export default defineConfig({ plugins: [react()], }) diff --git a/template-vanilla-ts/.npmrc b/template-vanilla-ts/.npmrc index 45c8cd7..1a98c90 100644 --- a/template-vanilla-ts/.npmrc +++ b/template-vanilla-ts/.npmrc @@ -3,4 +3,4 @@ shamefully-hoist=true # For China 🇨🇳 developers -# electron_mirror=https://npmmirror.com/mirrors/electron/ +# electron_mirror=https://npmmirror.com/mirrors/electron/ \ No newline at end of file diff --git a/template-vanilla-ts/package.json b/template-vanilla-ts/package.json index 640eb6b..61e440d 100644 --- a/template-vanilla-ts/package.json +++ b/template-vanilla-ts/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "devDependencies": { - "typescript": "^5.2.2", - "vite": "^5.1.6" + "typescript": "~5.8.3", + "vite": "^6.3.2" } } diff --git a/template-vanilla-ts/src/main.ts b/template-vanilla-ts/src/main.ts index 791547b..6396b50 100644 --- a/template-vanilla-ts/src/main.ts +++ b/template-vanilla-ts/src/main.ts @@ -5,7 +5,7 @@ import { setupCounter } from './counter.ts' document.querySelector('#app')!.innerHTML = `
- + diff --git a/template-vanilla-ts/src/style.css b/template-vanilla-ts/src/style.css index f9c7350..3bcdbd0 100644 --- a/template-vanilla-ts/src/style.css +++ b/template-vanilla-ts/src/style.css @@ -1,5 +1,5 @@ :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; diff --git a/template-vanilla-ts/tsconfig.json b/template-vanilla-ts/tsconfig.json index 75abdef..a22caba 100644 --- a/template-vanilla-ts/tsconfig.json +++ b/template-vanilla-ts/tsconfig.json @@ -9,15 +9,17 @@ /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", "noEmit": true, /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true }, "include": ["src"] } diff --git a/template-vue-ts/.npmrc b/template-vue-ts/.npmrc index 45c8cd7..1a98c90 100644 --- a/template-vue-ts/.npmrc +++ b/template-vue-ts/.npmrc @@ -3,4 +3,4 @@ shamefully-hoist=true # For China 🇨🇳 developers -# electron_mirror=https://npmmirror.com/mirrors/electron/ +# electron_mirror=https://npmmirror.com/mirrors/electron/ \ No newline at end of file diff --git a/template-vue-ts/README.md b/template-vue-ts/README.md index ef72fd5..33895ab 100644 --- a/template-vue-ts/README.md +++ b/template-vue-ts/README.md @@ -2,17 +2,4 @@ This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `