v3.0.0: Modern hooks-based rewrite with TypeScript and accessibility (#850)

v3.0.0 - Modern hooks-based rewrite with TypeScript and accessibility

  BREAKING CHANGES:
  - Children must be wrapped in `<Pane>` components
  - `split` prop renamed to `direction` (meanings swapped to align with CSS flex)
  - Size constraints (`minSize`, `maxSize`, `defaultSize`) moved to `<Pane>`
  - Callbacks renamed: `onDragStarted` → `onResizeStart`, `onChange` → `onResize`, `onDragFinished` → `onResizeEnd`
  - `primary` prop removed (use controlled mode instead)
  - `allowResize` renamed to `resizable`
  - CSS classes changed: `SplitPane` → `split-pane`, `Resizer` → `split-pane-divider`
  - IE11 no longer supported

  Features:
  - Hooks-based architecture (no class components)
  - Full TypeScript support with strict mode
  - Keyboard navigation (arrow keys, Home, End) and ARIA attributes
  - Built-in touch support for mobile/tablet
  - Native support for 2+ panes without nesting
  - Snap points for resize positions
  - `usePersistence` hook for localStorage/sessionStorage
  - Custom divider components via `divider` prop
  - RAF-throttled resize for smooth performance
  - ~3.6KB gzipped bundle

  See MIGRATION.md for upgrade instructions.

Author: tomkp

.babelrc

@@ -7,26 +7,36 @@ on:
   pull_request:
     branches:
       - master
+      - v3
 
 jobs:
   build-test:
+    name: Build and Test
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: 22.x
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: npm ci
 
-      - name: Build
-        run: yarn build
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Format check
+        run: npm run format:check
 
-      - name: Test
-        run: yarn test
-        # run: yarn test:coverage
+      - name: Run tests
+        run: npm test
+
+      - name: Build
+        run: npm run build

.eslintrc

@@ -0,0 +1,34 @@
+name: Deploy Examples to GitHub Pages
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build examples
+        run: npm run examples:build
+
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist-examples

.github/workflows/build-test.yml

@@ -1,39 +1,9 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# Commenting this out is preferred by some people, see
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
 node_modules
-
-# Users Environment Variables
-.lock-wscript
-
-.idea
-*.iml
-/lib
-
-lcov.info
-.DS_Store
-
 dist
-build
-.cache
+dist-examples
+coverage
+.DS_Store
+*.log
+.vscode
+.idea
+*.tsbuildinfo

.github/workflows/deploy-examples.yml

@@ -1 +1,3 @@
-CHANGELOG.md
+dist
+node_modules
+package-lock.json

.gitignore

@@ -1,4 +1,8 @@
 {
+  "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5"
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "arrowParens": "always"
 }