Refactor shadow-dom example

Author: lachlancollins

examples/react/basic/package.json

@@ -21,7 +21,6 @@
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.57.0",
     "typescript": "5.3.3",
     "vite": "^5.3.5"
   }

examples/react/shadow-dom/.eslintrc.cjs

@@ -0,0 +1,19 @@
+import { tanstackConfig } from '@tanstack/config/eslint'
+import pluginQuery from '@tanstack/eslint-plugin-query'
+import pluginReact from '@eslint-react/eslint-plugin'
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+
+export default [
+  ...tanstackConfig,
+  ...pluginQuery.configs['flat/recommended'],
+  pluginReact.configs.recommended,
+  {
+    plugins: {
+      'react-hooks': pluginReactHooks,
+    },
+    rules: {
+      'react-hooks/exhaustive-deps': 'error',
+      'react-hooks/rules-of-hooks': 'error',
+    },
+  },
+]

examples/react/shadow-dom/eslint.config.js

@@ -4,9 +4,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "tsc"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.52.3",
@@ -17,12 +17,7 @@
   "devDependencies": {
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc-a19a8ab4-20240829",
-    "eslint-plugin-react-refresh": "^0.4.9",
     "typescript": "5.3.3",
     "vite": "^5.3.5"
   }

examples/react/shadow-dom/package.json

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 
 type DogsResp = {
   message: {
-    [dog: string]: string[]
+    [dog: string]: Array<string>
   }
 }
 
@@ -22,7 +22,7 @@ export const DogList = () => {
 
   if (status === 'error') return 'Error!'
 
-  const dogs = Object.keys(data?.message)
+  const dogs = Object.keys(data.message)
 
   return (
     <div>

examples/react/shadow-dom/src/DogList.tsx

@@ -20,6 +20,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src", "eslint.config.js"]
 }

examples/react/shadow-dom/tsconfig.json

@@ -15,6 +15,11 @@
     "checkJs": true,
     "isolatedModules": true
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.svelte",
+    "vite.config.ts"
+  ]
 }

examples/react/shadow-dom/tsconfig.node.json

@@ -1,15 +1,24 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
-    "types": ["vite/client"]
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
 }