Release v3.0.0: Modernize with hooks, TypeScript, and additional improvements

- Finalize v3.0.0 release by updating version and dependencies.
- Add Prettier for consistent code formatting, along with `.prettierignore` and `.prettierrc` configuration.
- Enable stricter and more predictable test setups with fake timers and updated mocks.
- Refactor and restore disabled tests for better coverage and reliability.
- Update GitHub Actions workflow to support Node.js 22.x and v3 branch.
- Enhance utility function and component formatting for clarity and maintainability.

Author: tomkp

.github/workflows/build-test.yml

@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - master
+      - v3
   pull_request:
     branches:
       - master
+      - v3
 
 jobs:
   build-test-v3:
@@ -20,20 +22,28 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22.x
 
       - name: Install v3 dependencies
         working-directory: ./v3
         run: npm ci
 
-      - name: Build v3
+      - name: Typecheck v3
         working-directory: ./v3
-        run: npm run build
+        run: npm run typecheck
+
+      - name: Lint v3
+        working-directory: ./v3
+        run: npm run lint
 
       - name: Run v3 tests
         working-directory: ./v3
         run: npm test
 
+      - name: Build v3
+        working-directory: ./v3
+        run: npm run build
+
   build-test-legacy:
     name: Build and Test Legacy (v0.1.x)
     runs-on: ubuntu-latest
@@ -46,7 +56,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: 18.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
@@ -56,4 +66,3 @@ jobs:
 
       - name: Test
         run: yarn test
-        # run: yarn test:coverage

v3/.prettierignore

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

v3/.prettierrc

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

v3/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-split-pane",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0",
   "description": "React split-pane component - v3 modernized with hooks and TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -35,6 +35,8 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "lint": "eslint src",
+    "format": "prettier --write src",
+    "format:check": "prettier --check src",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run test && npm run build"
   },
@@ -77,6 +79,7 @@
     "eslint": "^9.39.2",
     "globals": "^16.2.0",
     "jsdom": "^26.1.0",
+    "prettier": "^3.7.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.54.0",

v3/package.json

@@ -1,47 +1,43 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { render, screen, act } from '@testing-library/react';
-import type { RenderResult } from '@testing-library/react';
 import { SplitPane } from './SplitPane';
 import { Pane } from './Pane';
 
 describe('SplitPane', () => {
-  // TODO: Fix ResizeObserver mock timing for these tests
-  // These tests work in real browsers but have timing issues in test environment
-  // Core functionality is verified by utility tests
-  it.skip('renders children panes', async () => {
+  it('renders children panes', async () => {
+    render(
+      <SplitPane>
+        <Pane>
+          <div>Pane 1</div>
+        </Pane>
+        <Pane>
+          <div>Pane 2</div>
+        </Pane>
+      </SplitPane>
+    );
+
+    // Flush state updates from ResizeObserver callback
     await act(async () => {
-      render(
-        <SplitPane>
-          <Pane>
-            <div>Pane 1</div>
-          </Pane>
-          <Pane>
-            <div>Pane 2</div>
-          </Pane>
-        </SplitPane>
-      );
-      // Give ResizeObserver time to fire
-      await new Promise((resolve) => setTimeout(resolve, 10));
+      await vi.runAllTimersAsync();
     });
 
     expect(screen.getByText('Pane 1')).toBeInTheDocument();
     expect(screen.getByText('Pane 2')).toBeInTheDocument();
   });
 
-  it.skip('renders divider between panes', async () => {
-    let component: RenderResult | undefined;
+  it('renders divider between panes', async () => {
+    const { container } = render(
+      <SplitPane>
+        <Pane>Pane 1</Pane>
+        <Pane>Pane 2</Pane>
+      </SplitPane>
+    );
 
     await act(async () => {
-      component = render(
-        <SplitPane>
-          <Pane>Pane 1</Pane>
-          <Pane>Pane 2</Pane>
-        </SplitPane>
-      );
-      await new Promise((resolve) => setTimeout(resolve, 10));
+      await vi.runAllTimersAsync();
     });
 
-    const divider = component?.container.querySelector('[role="separator"]');
+    const divider = container.querySelector('[role="separator"]');
     expect(divider).toBeInTheDocument();
   });
 
@@ -81,23 +77,20 @@ describe('SplitPane', () => {
     expect(splitPane).toHaveClass('custom-class');
   });
 
-  it.skip('renders correct number of dividers for multiple panes', async () => {
-    let component: RenderResult | undefined;
+  it('renders correct number of dividers for multiple panes', async () => {
+    const { container } = render(
+      <SplitPane>
+        <Pane>Pane 1</Pane>
+        <Pane>Pane 2</Pane>
+        <Pane>Pane 3</Pane>
+      </SplitPane>
+    );
 
     await act(async () => {
-      component = render(
-        <SplitPane>
-          <Pane>Pane 1</Pane>
-          <Pane>Pane 2</Pane>
-          <Pane>Pane 3</Pane>
-        </SplitPane>
-      );
-      await new Promise((resolve) => setTimeout(resolve, 10));
+      await vi.runAllTimersAsync();
     });
 
-    const dividers = component?.container.querySelectorAll(
-      '[role="separator"]'
-    );
+    const dividers = container.querySelectorAll('[role="separator"]');
     expect(dividers).toHaveLength(2); // n-1 dividers for n panes
   });
 });

v3/src/components/SplitPane.test.tsx

@@ -1,4 +1,21 @@
 import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// Use fake timers globally
+vi.useFakeTimers();
+
+// Mock getBoundingClientRect to return proper dimensions
+Element.prototype.getBoundingClientRect = vi.fn(() => ({
+  width: 1024,
+  height: 768,
+  top: 0,
+  left: 0,
+  bottom: 768,
+  right: 1024,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
+}));
 
 // Mock ResizeObserver with callback support
 ((globalThis as unknown) as {
@@ -11,29 +28,27 @@ import '@testing-library/jest-dom';
   }
 
   observe(target: Element) {
-    // Call callback async to simulate real ResizeObserver behavior
-    setTimeout(() => {
-      const mockEntry = ({
-        target,
-        contentRect: {
-          width: 1024,
-          height: 768,
-          top: 0,
-          left: 0,
-          bottom: 768,
-          right: 1024,
-          x: 0,
-          y: 0,
-          toJSON: () => ({}),
-        },
-        borderBoxSize: [],
-        contentBoxSize: [],
-        devicePixelContentBoxSize: [],
-      } as unknown) as ResizeObserverEntry;
-
-      // Call callback with mock data
-      this.callback([mockEntry], this);
-    }, 0);
+    // Call callback synchronously for predictable testing
+    const mockEntry = ({
+      target,
+      contentRect: {
+        width: 1024,
+        height: 768,
+        top: 0,
+        left: 0,
+        bottom: 768,
+        right: 1024,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      },
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: [],
+    } as unknown) as ResizeObserverEntry;
+
+    // Call callback synchronously
+    this.callback([mockEntry], this);
   }
 
   unobserve() {
@@ -44,16 +59,3 @@ import '@testing-library/jest-dom';
     // Mock implementation
   }
 };
-
-// Mock requestAnimationFrame
-((globalThis as unknown) as {
-  requestAnimationFrame: typeof requestAnimationFrame;
-}).requestAnimationFrame = (callback: FrameRequestCallback) => {
-  return (setTimeout(callback, 0) as unknown) as number;
-};
-
-((globalThis as unknown) as {
-  cancelAnimationFrame: typeof cancelAnimationFrame;
-}).cancelAnimationFrame = (id: number) => {
-  clearTimeout(id);
-};

v3/src/test/setup.ts

@@ -1,7 +1,10 @@
 /**
  * Announce a message to screen readers
  */
-export function announce(message: string, priority: 'polite' | 'assertive' = 'polite'): void {
+export function announce(
+  message: string,
+  priority: 'polite' | 'assertive' = 'polite'
+): void {
   const announcement = document.createElement('div');
   announcement.setAttribute('role', 'status');
   announcement.setAttribute('aria-live', priority);
@@ -45,10 +48,13 @@ export function getDividerLabel(
 /**
  * Get keyboard instructions for divider
  */
-export function getKeyboardInstructions(direction: 'horizontal' | 'vertical'): string {
-  const keys = direction === 'horizontal'
-    ? 'left and right arrow keys'
-    : 'up and down arrow keys';
+export function getKeyboardInstructions(
+  direction: 'horizontal' | 'vertical'
+): string {
+  const keys =
+    direction === 'horizontal'
+      ? 'left and right arrow keys'
+      : 'up and down arrow keys';
 
   return `Use ${keys} to resize. Hold Shift for larger steps. Press Home or End to minimize or maximize.`;
 }

v3/src/utils/accessibility.ts

@@ -78,7 +78,13 @@ describe('calculateDraggedSizes', () => {
 
   it('respects minimum constraints', () => {
     const sizes = [300, 700];
-    const result = calculateDraggedSizes(sizes, 0, -250, [100, 100], [500, 900]);
+    const result = calculateDraggedSizes(
+      sizes,
+      0,
+      -250,
+      [100, 100],
+      [500, 900]
+    );
 
     expect(result[0]).toBe(100); // Cannot go below min
     expect(result[1]).toBe(900);