Example: Update ESLint configuration for React

master-co · Dec 10, 2024 · 0508ec3 · 0508ec3
1 parent 9645f44
commit 0508ec3
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 57 deletions.
diff --git a/examples/react-with-static-extraction/.eslintrc.cjs b/examples/react-with-static-extraction/.eslintrc.cjs
diff --git a/examples/react-with-static-extraction/eslint.config.js b/examples/react-with-static-extraction/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import { includeIgnoreFile } from '@eslint/compat'
+import { fileURLToPath } from 'node:url'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import css from '@master/eslint-config-css'
+
+const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url))
+
+export default tseslint.config(
+    includeIgnoreFile(gitignorePath),
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react': react,
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...react.configs['jsx-runtime'].rules,
+            ...reactHooks.configs.recommended.rules,
+        },
+    },
+    css
+)
diff --git a/examples/react-with-static-extraction/package.json b/examples/react-with-static-extraction/package.json
@@ -6,7 +6,8 @@
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",
-        "preview": "pnpm run build && vite preview"
+        "preview": "pnpm run build && vite preview",
+        "lint": "eslint"
     },
     "dependencies": {
         "react": "^18.3.1",
@@ -15,15 +16,19 @@
     "devDependencies": {
         "@master/css-extractor.vite": "workspace:^",
         "@master/css-runtime": "workspace:^",
-        "@types/react": "^18.3.1",
-        "@types/react-dom": "^18.3.1",
-        "@typescript-eslint/eslint-plugin": "^5.62.0",
-        "@typescript-eslint/parser": "^5.62.0",
-        "@vitejs/plugin-react": "^4.2.1",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.3.5",
-        "typescript": "^5.3.3",
-        "vite": "^5.1.4"
+        "@eslint/compat": "^1.2.3",
+        "@types/react": "^19.0.1",
+        "@types/react-dom": "^19.0.2",
+        "@typescript-eslint/eslint-plugin": "^8.18.0",
+        "@typescript-eslint/parser": "^8.18.0",
+        "@vitejs/plugin-react": "^4.3.4",
+        "eslint": "^9.16.0",
+        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-hooks": "^5.1.0",
+        "eslint-plugin-react-refresh": "^0.4.16",
+        "globals": "^15.12.0",
+        "typescript": "^5.7.2",
+        "typescript-eslint": "^8.15.0",
+        "vite": "^6.0.3"
     }
 }
diff --git a/examples/react-with-static-extraction/src/App.tsx b/examples/react-with-static-extraction/src/App.tsx
@@ -6,15 +6,15 @@ function App() {
     const [count, setCount] = useState(0)
     return (
         <>
-            <div className='grid-cols:2 w:fit mx:auto'>
+            <div className='grid-cols:2 mx:auto w:fit'>
                 <a href="https://rc.css.master.co" target="_blank">
                     <img src={masterLogo} className="logo master scale(2)" alt="Master logo" />
                 </a>
                 <a href="https://reactjs.org" target="_blank">
                     <img src={reactLogo} className="logo react" alt="React logo" />
                 </a>
             </div>
-            <h1 className="font:sans tracking:-.25 font:heavy">
+            <h1 className="font:heavy font:sans tracking:-.25">
                 <span>Master CSS</span> <span className="fg:#00D8FF">React</span>
             </h1>
             <div className="card">

diff --git a/examples/react/.eslintrc.cjs b/examples/react/.eslintrc.cjs
diff --git a/examples/react/eslint.config.js b/examples/react/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import { includeIgnoreFile } from '@eslint/compat'
+import { fileURLToPath } from 'node:url';
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import css from '@master/eslint-config-css'
+
+const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url))
+
+export default tseslint.config(
+    includeIgnoreFile(gitignorePath),
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react': react,
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...react.configs['jsx-runtime'].rules,
+            ...reactHooks.configs.recommended.rules,
+        },
+    },
+    css
+)
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -6,24 +6,29 @@
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",
-        "preview": "pnpm run build && vite preview"
+        "preview": "pnpm run build && vite preview",
+        "lint": "eslint"
     },
     "dependencies": {
         "@master/css-runtime": "workspace:^",
         "@master/css.react": "workspace:^",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "devDependencies": {
-        "@types/react": "^18.3.1",
-        "@types/react-dom": "^18.3.1",
-        "@typescript-eslint/eslint-plugin": "^5.62.0",
-        "@typescript-eslint/parser": "^5.62.0",
-        "@vitejs/plugin-react": "^4.2.1",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.3.5",
-        "typescript": "^5.3.3",
-        "vite": "^5.1.4"
+        "@eslint/compat": "^1.2.3",
+        "@types/react": "^19.0.1",
+        "@types/react-dom": "^19.0.2",
+        "@typescript-eslint/eslint-plugin": "^8.18.0",
+        "@typescript-eslint/parser": "^8.18.0",
+        "@vitejs/plugin-react": "^4.3.4",
+        "eslint": "^9.16.0",
+        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-hooks": "^5.1.0",
+        "eslint-plugin-react-refresh": "^0.4.16",
+        "globals": "^15.12.0",
+        "typescript": "^5.7.2",
+        "typescript-eslint": "^8.15.0",
+        "vite": "^6.0.3"
     }
 }
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -6,19 +6,19 @@ function App() {
     const [count, setCount] = useState(0)
     return (
         <>
-            <div className='grid-cols:2 w:fit mx:auto'>
+            <div className='grid-cols:2 mx:auto w:fit'>
                 <a href="https://rc.css.master.co" target="_blank">
                     <img src={masterLogo} className="logo master scale(2)" alt="Master logo" />
                 </a>
                 <a href="https://reactjs.org" target="_blank">
                     <img src={reactLogo} className="logo react" alt="React logo" />
                 </a>
             </div>
-            <h1 className="font:sans tracking:-.25 fg:white@dark font:heavy">
+            <h1 className="fg:white@dark font:heavy font:sans tracking:-.25">
                 <span>Master CSS</span> <span className="fg:#00D8FF">React</span>
             </h1>
             <div className="card">
-                <button className="h:40 bg:gray-80" onClick={() => setCount((count) => count + 1)}>
+                <button className="bg:gray-80 h:40" onClick={() => setCount((count) => count + 1)}>
                     count is {count}
                 </button>
             </div>