fix(examples): Remove conflicting React type definitions (#779)

TanStack · Aug 1, 2024 · 9927904 · 9927904
1 parent 5601357
commit 9927904
Show file tree

Hide file tree

Showing 36 changed files with 379 additions and 177 deletions.
diff --git a/examples/react/dynamic/src/main.tsx b/examples/react/dynamic/src/main.tsx
@@ -172,8 +172,8 @@ function GridVirtualizerDynamic({
   columns,
   data,
 }: {
-  data: string[][]
-  columns: Column[]
+  data: Array<Array<string>>
+  columns: Array<Column>
 }) {
   const parentRef = React.useRef<HTMLDivElement | null>(null)
 
@@ -277,9 +277,9 @@ const generateColumns = (count: number) => {
   })
 }
 
-const generateData = (columns: Column[], count = 300) => {
+const generateData = (columns: Array<Column>, count = 300) => {
   return new Array(count).fill(0).map((_, rowIndex) =>
-    columns.reduce<string[]>((acc, _curr, colIndex) => {
+    columns.reduce<Array<string>>((acc, _curr, colIndex) => {
       // simulate dynamic size cells
       const val = faker.lorem.lines(((rowIndex + colIndex) % 10) + 1)
 
@@ -344,8 +344,9 @@ function App() {
   )
 }
 
-const container = document.getElementById('root')
-const root = createRoot(container!)
+// eslint-disable-next-line
+const container = document.getElementById('root')!
+const root = createRoot(container)
 const { StrictMode } = React
 
 root.render(

diff --git a/examples/react/dynamic/tsconfig.dev.json b/examples/react/dynamic/tsconfig.dev.json
diff --git a/examples/react/dynamic/tsconfig.json b/examples/react/dynamic/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "composite": true,
+  "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"]
+}
diff --git a/examples/react/fixed/src/main.tsx b/examples/react/fixed/src/main.tsx
@@ -212,6 +212,7 @@ function GridVirtualizerFixed() {
   )
 }
 
+// eslint-disable-next-line
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />

diff --git a/examples/react/fixed/tsconfig.dev.json b/examples/react/fixed/tsconfig.dev.json
diff --git a/examples/react/fixed/tsconfig.json b/examples/react/fixed/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "composite": true,
+  "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"]
+}
diff --git a/examples/react/infinite-scroll/package.json b/examples/react/infinite-scroll/package.json
@@ -10,11 +10,13 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.8.4",
+    "@tanstack/react-query": "^5.51.15",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@tanstack/react-query": "^5.51.15"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.5"
   }

diff --git a/examples/react/infinite-scroll/src/main.tsx b/examples/react/infinite-scroll/src/main.tsx
@@ -15,7 +15,7 @@ const queryClient = new QueryClient()
 async function fetchServerPage(
   limit: number,
   offset: number = 0,
-): Promise<{ rows: string[]; nextOffset: number }> {
+): Promise<{ rows: Array<string>; nextOffset: number }> {
   const rows = new Array(limit)
     .fill(0)
     .map((e, i) => `Async loaded row #${i + offset * limit}`)
@@ -43,7 +43,7 @@ function App() {
 
   const allRows = data ? data.pages.flatMap((d) => d.rows) : []
 
-  const parentRef = React.useRef()
+  const parentRef = React.useRef<HTMLDivElement>(null)
 
   const rowVirtualizer = useVirtualizer({
     count: hasNextPage ? allRows.length + 1 : allRows.length,
@@ -89,7 +89,7 @@ function App() {
       {status === 'pending' ? (
         <p>Loading...</p>
       ) : status === 'error' ? (
-        <span>Error: {(error as Error).message}</span>
+        <span>Error: {error.message}</span>
       ) : (
         <div
           ref={parentRef}

diff --git a/examples/react/infinite-scroll/tsconfig.dev.json b/examples/react/infinite-scroll/tsconfig.dev.json
diff --git a/examples/react/infinite-scroll/tsconfig.json b/examples/react/infinite-scroll/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "composite": true,
+  "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"]
+}
diff --git a/examples/react/padding/package.json b/examples/react/padding/package.json
@@ -9,11 +9,13 @@
     "start": "vite"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.8.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@tanstack/react-virtual": "^3.8.4"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.5"
   }

diff --git a/examples/react/padding/src/main.tsx b/examples/react/padding/src/main.tsx
@@ -39,8 +39,8 @@ function App() {
   )
 }
 
-function RowVirtualizerDynamic({ rows }) {
-  const parentRef = React.useRef()
+function RowVirtualizerDynamic({ rows }: { rows: Array<number> }) {
+  const parentRef = React.useRef<HTMLDivElement>(null)
 
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
@@ -91,8 +91,8 @@ function RowVirtualizerDynamic({ rows }) {
   )
 }
 
-function ColumnVirtualizerDynamic({ columns }) {
-  const parentRef = React.useRef()
+function ColumnVirtualizerDynamic({ columns }: { columns: Array<number> }) {
+  const parentRef = React.useRef<HTMLDivElement>(null)
 
   const columnVirtualizer = useVirtualizer({
     horizontal: true,
@@ -146,8 +146,14 @@ function ColumnVirtualizerDynamic({ columns }) {
   )
 }
 
-function GridVirtualizerDynamic({ rows, columns }) {
-  const parentRef = React.useRef()
+function GridVirtualizerDynamic({
+  rows,
+  columns,
+}: {
+  rows: Array<number>
+  columns: Array<number>
+}) {
+  const parentRef = React.useRef<HTMLDivElement>(null)
 
   const rowVirtualizer = useVirtualizer({
     count: rows.length,

diff --git a/examples/react/padding/tsconfig.dev.json b/examples/react/padding/tsconfig.dev.json
diff --git a/examples/react/padding/tsconfig.json b/examples/react/padding/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "composite": true,
+  "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"]
+}
diff --git a/examples/react/scroll-padding/package.json b/examples/react/scroll-padding/package.json
@@ -15,6 +15,8 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.5"
   }

diff --git a/examples/react/scroll-padding/src/main.tsx b/examples/react/scroll-padding/src/main.tsx
@@ -7,7 +7,7 @@ import { useMeasure } from '@react-hookz/web'
 import { useVirtualizer } from '@tanstack/react-virtual'
 
 function App() {
-  const parentRef = React.useRef<HTMLDivElement>()
+  const parentRef = React.useRef<HTMLDivElement>(null)
   const [theadSize, theadRef] = useMeasure<HTMLTableSectionElement>()
 
   const rowVirtualizer = useVirtualizer({

diff --git a/examples/react/scroll-padding/tsconfig.dev.json b/examples/react/scroll-padding/tsconfig.dev.json
diff --git a/examples/react/scroll-padding/tsconfig.json b/examples/react/scroll-padding/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "composite": true,
+  "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"]
+}
diff --git a/examples/react/smooth-scroll/package.json b/examples/react/smooth-scroll/package.json
@@ -9,11 +9,13 @@
     "start": "vite"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.8.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@tanstack/react-virtual": "^3.8.4"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.5"
   }

diff --git a/examples/react/smooth-scroll/src/main.tsx b/examples/react/smooth-scroll/src/main.tsx
@@ -3,24 +3,21 @@ import ReactDOM from 'react-dom'
 
 import './index.css'
 
-import {
-  elementScroll,
-  useVirtualizer,
-  VirtualizerOptions,
-} from '@tanstack/react-virtual'
+import { elementScroll, useVirtualizer } from '@tanstack/react-virtual'
+import type { VirtualizerOptions } from '@tanstack/react-virtual'
 
-function easeInOutQuint(t) {
+function easeInOutQuint(t: number) {
   return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t
 }
 
 function App() {
-  const parentRef = React.useRef<HTMLDivElement>()
+  const parentRef = React.useRef<HTMLDivElement>(null)
   const scrollingRef = React.useRef<number>()
 
   const scrollToFn: VirtualizerOptions<any, any>['scrollToFn'] =
     React.useCallback((offset, canSmooth, instance) => {
       const duration = 1000
-      const start = parentRef.current.scrollTop
+      const start = parentRef.current?.scrollTop || 0
       const startTime = (scrollingRef.current = Date.now())
 
       const run = () => {