chore: experiment with React 19

.eslintrc.cjs

@@ -5,7 +5,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.eslint.json'],
   },
-  plugins: ['@typescript-eslint', 'json', 'html'],
+  plugins: ['@typescript-eslint', 'json', 'html', 'react-compiler'],
   extends: [
     'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',
@@ -14,6 +14,7 @@ module.exports = {
     'plugin:prettier/recommended',
   ],
   rules: {
+    'react-compiler/react-compiler': 'error',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',

.gitignore

@@ -10,3 +10,4 @@ examples/__examples.html
 .docusaurus
 /docs/api
 react-virtuoso-0.0.0-development.tgz
+test-results

e2e/collapsible-long-item.test.ts

@@ -1,6 +1,5 @@
 import { test, expect } from '@playwright/test'
-//@ts-expect-error - type module and playwright
-import { navigateToExample } from './utils.ts'
+import { navigateToExample } from './utils.js'
 
 test.describe('list with collapsible long items', () => {
   test.beforeEach(async ({ page, baseURL }) => {

e2e/grouped-topmost-item.test.ts

@@ -5,7 +5,7 @@ import { navigateToExample } from './utils.ts'
 test.describe('jagged grouped list', () => {
   test.beforeEach(async ({ page, baseURL }) => {
     await navigateToExample(page, baseURL, 'grouped-topmost-item')
-    await page.waitForTimeout(100)
+    await page.waitForTimeout(300)
   })
 
   test('puts the specified item below the group', async ({ page }) => {

e2e/initial-topmost-item.test.ts

@@ -1,11 +1,10 @@
 import { test, expect } from '@playwright/test'
-//@ts-expect-error - type module and playwright
-import { navigateToExample } from './utils.ts'
+import { navigateToExample } from './utils.js'
 
 test.describe('jagged list with initial topmost item', () => {
   test.beforeEach(async ({ page, baseURL }) => {
     await navigateToExample(page, baseURL, 'initial-topmost-item')
-    await page.waitForTimeout(100)
+    await page.waitForTimeout(200)
   })
 
   // the real position here would be 1500, but the calc is based on the

e2e/reverse-taller-than-viewport.test.ts

@@ -11,13 +11,13 @@ const SCROLL_DELTA = -50
 test.describe('reverse taller than viewport', () => {
   test.beforeEach(async ({ page, baseURL }) => {
     await navigateToExample(page, baseURL, 'reverse-taller-than-viewport')
-    await page.waitForTimeout(200)
+    await page.waitForTimeout(300)
   })
 
   test('compensates for the tall 90th item', async ({ page }) => {
     const scroller = page.locator('[data-testid=virtuoso-scroller]')
     await scroller.evaluate((el) => el.scrollBy(0, -50))
-    await page.waitForTimeout(300)
+    await page.waitForTimeout(400)
     const scrollTop = await scroller.evaluate((el) => el.scrollTop)
 
     expect(scrollTop).toBe(INITIAL_SCROLL_TOP + SCROLL_DELTA + OUTLIER - DEFAULT_ITEM_HEIGHT)

e2e/scroll-to-index.test.ts

@@ -1,6 +1,5 @@
 import { test, expect } from '@playwright/test'
-//@ts-expect-error - type module and playwright
-import { navigateToExample } from './utils.ts'
+import { navigateToExample } from './utils.js'
 
 test.describe('scroll to index', () => {
   test.beforeEach(async ({ page, baseURL }) => {
@@ -27,7 +26,7 @@ test.describe('scroll to index', () => {
   test('scrolls to the 30 item with 5 offset', async ({ page }) => {
     await page.click('#offset-30')
 
-    await page.waitForTimeout(100)
+    await page.waitForTimeout(300)
 
     const scrollTop = await page.evaluate(() => {
       return document.querySelector('[data-testid=virtuoso-scroller]')!.scrollTop

examples/collapsible-long-item.tsx

@@ -25,7 +25,7 @@ const Item = ({ index }: { index: number }) => {
   )
 }
 
-const ExpandedProvider: React.FC = ({ children }) => {
+const ExpandedProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [expanded, setExpanded] = React.useState(false)
   return <Expanded.Provider value={[expanded as any, setExpanded]}>{children}</Expanded.Provider>
 }

package.json

@@ -27,7 +27,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "VITE_CJS_TRACE=true vite build",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "e2e": "playwright test",
@@ -47,8 +47,8 @@
     "@emotion/core": "^11.0.0",
     "@emotion/styled": "^11.10.8",
     "@faker-js/faker": "^7.6.0",
-    "@ladle/react": "^2.12.3",
-    "@playwright/test": "^1.33.0",
+    "@ladle/react": "^4.0.3",
+    "@playwright/test": "^1.44.0",
     "@tanstack/react-table": "^8.9.11",
     "@testing-library/react": "^14.0.0",
     "@types/jsdom": "^21.1.1",
@@ -57,38 +57,40 @@
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^18.2.21",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-react": "^4.0.0",
+    "babel-plugin-react-compiler": "0.0.0-experimental-c23de8d-20240515",
     "clsx": "^1.2.1",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-html": "^8.1.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-53bb89e-20240515",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^8.0.3",
     "immer": "^10.0.1",
     "jsdom": "^22.0.0",
     "lodash": "^4.17.21",
-    "playwright": "^1.33.0",
-    "prettier": "^2.2.1",
+    "playwright": "^1.44.0",
+    "prettier": "^3.2.5",
     "prism-react-renderer": "^1.3.5",
-    "react": "^18.2.0",
+    "react": "19.0.0-rc-915b914b3a-20240515",
     "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "19.0.0-rc-915b914b3a-20240515",
     "react-router-dom": "^6.14.0",
     "semantic-release": "^19.0.5",
     "terser": "^5.17.1",
     "tslib": "^2.5.0",
     "typedoc": "^0.24.6",
     "typedoc-plugin-markdown": "^3.15.3",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5",
-    "vite-plugin-dts": "^2.3.0",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.1",
     "vitest": "^0.31.0"
   },
   "packageManager": "[email protected]+sha256.2d0363bb6c314daa67087ef07743eea1ba2e2d360c835e8fec6b5575e4ed9484",