chore: modernize toolchain to Vite, Vitest, and Biome

.github/workflows/main.yml

@@ -1,42 +1,45 @@
 name: CI
-on: [push]
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
 jobs:
   build:
     runs-on: ubuntu-latest
 
-    steps:
-      - name: Begin CI...
-        uses: actions/checkout@v2
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
 
-      - name: Use Node 12
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-      - name: Use cached node_modules
-        uses: actions/cache@v1
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
         with:
-          path: node_modules
-          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            nodeModules-
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
-        env:
-          CI: true
+        run: npm ci
 
       - name: Lint
-        run: yarn lint
-        env:
-          CI: true
+        run: npm run lint
+
+      - name: Build
+        run: npm run build
 
       - name: Test
-        run: yarn test --ci --coverage --maxWorkers=2
-        env:
-          CI: true
+        run: npm test
 
-      - name: Build
-        run: yarn build
-        env:
-          CI: true
+      - name: Upload coverage
+        if: matrix.node-version == '20.x'
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage
+          path: coverage
+          retention-days: 30

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 .cache
 dist
+coverage

.husky/pre-commit

@@ -0,0 +1 @@
+npm run lint

README.md

@@ -78,38 +78,46 @@ const App = () => {
 };
 ```
 
-## Commands
+## Development
 
-TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
+This project uses modern tooling:
 
-The recommended workflow is to run TSDX in one terminal:
+- **Vite** - Fast build tool and dev server
+- **Vitest** - Lightning-fast unit testing
+- **Biome** - Fast linter and formatter
+- **TypeScript 5** - Type safety
+- **React 18** - Latest React features
+
+### Available Scripts
 
 ```bash
-npm start # or yarn start
-```
+# Development mode (watch mode)
+npm run dev
 
-This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+# Build the library
+npm run build
 
-Then run the example inside another:
+# Run tests
+npm test
 
-```bash
-cd example
-npm i # or yarn to install dependencies
-npm start # or yarn start
-```
+# Run tests in watch mode
+npm run test:watch
 
-The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, [we use Parcel's aliasing](https://github.com/palmerhq/tsdx/pull/88/files).
+# Lint code
+npm run lint
 
-To do a one-off build, use `npm run build` or `yarn build`.
+# Lint and auto-fix
+npm run lint:fix
 
-To run tests, use `npm test` or `yarn test`.
+# Format code
+npm run format
+```
 
-## Using the Playground
+### Development Workflow
 
-```bash
-cd example
-npm i # or yarn to install dependencies
-npm start # or yarn start
-```
+1. Make changes in `/src`
+2. Run `npm run dev` to build in watch mode
+3. Run `npm test` to verify tests pass
+4. Run `npm run lint` to check code quality
 
-The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**!
+The library will be built to `/dist` with both ESM and CommonJS formats.

biome.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "always",
+      "trailingCommas": "es5"
+    }
+  }
+}

example/index.tsx

@@ -1,17 +1,17 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import GitHubRibbon, { GitHubRibbonProps } from '../.';
+import GitHubRibbon, { type GitHubRibbonProps } from '../.';
 
 const App = () => {
   const props: GitHubRibbonProps = {
-    target: "_blank",
-    rel: "noopener noreferrer",
-    className: "a-tag-link",
-    href: "example.com",
-    color: "orange",
-    position: "left",
-  }
+    target: '_blank',
+    rel: 'noopener noreferrer',
+    className: 'a-tag-link',
+    href: 'example.com',
+    color: 'orange',
+    position: 'left',
+  };
   return (
     <div>
       <GitHubRibbon {...props} />