Modernise build tooling (Node 22, ESLint 9, Vitest, Vite) (#271)

* chore: add Node 22 LTS configuration

* test: replace Karma with Vitest in browser mode

- Add vitest.config.js with Playwright browser mode
- Install vitest, @vitest/browser-playwright, @playwright/test
- Multi-browser support: Chromium (all), Firefox (CI), Safari (Mac)
- Create test/setup.js for test utilities
- Migrate tests from chai assertions to Vitest expect
- Update test script to run vitest
- Fix legacy React API issues in tests

BREAKING CHANGE: Tests now run in real browsers instead of jsdom

Remove .ryan/ from tracking (already in global gitignore)

* build: replace Webpack with Vite for library builds

- Add vite.config.js for library builds (ESM + UMD)
- Add vite example dev server with react plugin
- Update package.json with proper exports (main, module, types)
- Update build script to use Vite instead of Babel
- Remove legacy webpack.config.js
- Update example/app.jsx for React 18 createRoot API

* fix: add Playwright browser installation to CI

- Fix lint errors: unused imports and eslint-disable directives

* fix: install Playwright chromium deps in CI

fix: add Firefox to Playwright CI installation

fix: use --with-deps flag for Playwright browsers

* refactor: split CI into separate lint, test, build jobs

Author: ryanseddon

.babelrc

@@ -1,15 +1,36 @@
 on: [push, pull_request]
+
 jobs:
-  build:
+  lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 22
+          cache: 'npm'
       - run: npm install
+      - run: npm run lint
 
-      - name: Run headless test
-        uses: GabrielBB/xvfb-action@v1
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          run: npm test
+          node-version: 22
+          cache: 'npm'
+      - run: npm install
+      - run: npx playwright install --with-deps chromium firefox
+      - run: CI=true npm test
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+      - run: npm install
+      - run: npm run build

.eslintrc

@@ -0,0 +1 @@
+22

.github/workflows/ci.yml

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "modules": false }],
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.nvmrc

@@ -0,0 +1,70 @@
+import js from '@eslint/js';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{js,jsx}'],
+    ignores: [
+      'node_modules/**',
+      'dist/**',
+      'lib/**',
+      '*.config.js',
+      'karma.conf.js'
+    ],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          impliedStrict: true,
+          jsx: true
+        }
+      }
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true }
+      ],
+      'react/forbid-prop-types': 'off',
+      'react/prop-types': 'off',
+      'no-underscore-dangle': 'off',
+      'no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    }
+  },
+  {
+    files: ['test/**/*.{js,jsx}'],
+    languageOptions: {
+      globals: {
+        ...globals.mocha,
+        ...globals.browser
+      }
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      'react/no-find-dom-node': 'off',
+      'react/no-deprecated': 'off',
+      'react/no-render-return-value': 'off',
+      'react-hooks/exhaustive-deps': 'warn'
+    }
+  }
+];

babel.config.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Frame from '../src';
 
 const styles = {
@@ -21,11 +21,10 @@ const App = () => (
   </div>
 );
 
-ReactDOM.render(
+createRoot(document.querySelector('#example1')).render(
   <Frame style={styles}>
     <App />
-  </Frame>,
-  document.querySelector('#example1')
+  </Frame>
 );
 
 const Foobar = () => {
@@ -43,11 +42,11 @@ const Foobar = () => {
   );
 };
 
-ReactDOM.render(<Foobar />, document.querySelector('#example2'));
+createRoot(document.querySelector('#example2')).render(<Foobar />);
 
 const ExternalResources = () => {
   const initialContent = `<!DOCTYPE html><html><head>
-	<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+	<link href="///releases/v5.15.1/cssuse.fontawesome.com/all.css" rel="stylesheet" />
 	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 	<base target=_blank>
   </head><body style='overflow: hidden'><div></div></body></html>`;
@@ -63,4 +62,4 @@ const ExternalResources = () => {
   );
 };
 
-ReactDOM.render(<ExternalResources />, document.querySelector('#example3'));
+createRoot(document.querySelector('#example3')).render(<ExternalResources />);