Support React 19 (#9)

.github/workflows/npm-publish.yml

@@ -11,14 +11,14 @@ jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - uses: pnpm/action-setup@v2
         with:
-          version: 7.29.1
+          version: 9.6.0
           run_install: true
       - name: Test
         run: pnpm test

.github/workflows/pr.yml

@@ -1,3 +1,5 @@
+name: PR
+
 on:
   pull_request:
     branches:
@@ -8,15 +10,22 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 7.29.1
+          version: 9.6.0
           run_install: true
 
-      - run: pnpm test
+      - name: Test with React 18
+        run: pnpm test
+
+      - name: Install React 19
+        run: cd packages/react-rough-fiber && pnpm add [email protected] [email protected] [email protected]
+
+      - name: Test with React 19
+        run: pnpm test

apps/docs/components/sandboxes/sandbox.tsx

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import {
   SandpackFiles,
   SandpackSetup,
-  Classes,
   SandpackProvider,
   SandpackLayout,
   SandpackCodeEditor,
@@ -55,7 +54,7 @@ export const Sandbox = ({
   }, [code, font, cssCode]);
 
   const options = useMemo(() => {
-    const classes: Classes =
+    const classes: Record<string, string> =
       direction === 'vertical'
         ? {
             'sp-layout': '!block divide-y mt-6',

apps/docs/globals.css

@@ -93,8 +93,7 @@
 }
 
 .cm-editor {
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius);
+  border-radius: var(--radius) var(--radius) 0 0;
   overflow: hidden;
 }
 

apps/docs/package.json

@@ -24,19 +24,19 @@
     "@vercel/analytics": "^1.0.0",
     "clsx": "^1.2.1",
     "lucide-react": "^0.171.0",
-    "next": "^13.0.6",
-    "nextra": "latest",
-    "nextra-theme-docs": "latest",
-    "react": "^18.2.0",
+    "next": "13.3.0",
+    "nextra": "2.4.0",
+    "nextra-theme-docs": "2.4.0",
+    "react": "^18.3.1",
     "react-cool-dimensions": "^3.0.1",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-feather": "^2.0.10",
     "react-inlinesvg": "^3.0.2",
     "react-jsx-parser": "^1.29.0",
     "react-reconciler": "^0.29.0",
     "react-rough-fiber": "workspace:*",
-    "recharts": "^2.4.3",
+    "recharts": "^2.13.0",
     "stable-hash": "^0.0.3",
     "xml-formatter": "^3.3.2"
   },

package.json

@@ -21,7 +21,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "packageManager": "pnpm@7.29.1",
+  "packageManager": "pnpm@9.6.0",
   "pnpm": {
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",

packages/react-rough-fiber/.npmignore

@@ -4,7 +4,7 @@
 node_modules
 src
 test
-jest.config.js
+vitest.config.mts
 tsconfig.json
 tsup.config.ts
-scripts
+scripts

packages/react-rough-fiber/package.json

@@ -30,44 +30,39 @@
   "license": "MIT",
   "scripts": {
     "lint": "eslint *.ts*",
-    "test": "jest --config jest.config.js --no-cache",
+    "test": "vitest",
     "build": "rm -rf dist && tsup",
     "pre-publish": "node scripts/pre-publish.js && npm run build",
     "publish-next": "node scripts/pre-next-publish.js && npm run build && npm publish --tag next --access public && node scripts/post-next-publish.js"
   },
+  "dependencies": {
+    "its-fine": "^1.2.5"
+  },
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@napi-rs/simple-git": "^0.1.8",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/react-12": "npm:@testing-library/react@^12.1.5",
-    "@types/jest": "^29.5.0",
+    "@testing-library/react": "^16.1.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@types/react-reconciler": "^0.28.2",
+    "@types/react-reconciler": "^0.28.9",
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
-    "its-fine": "^1.1.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jsdom": "latest",
+    "jsdom": "^25.0.1",
     "path-data-parser": "^0.1.0",
     "points-on-curve": "^1.0.0",
     "points-on-path": "^0.2.1",
-    "react": "^18.2.0",
-    "react-17": "npm:react@^17.0.2",
-    "react-dom": "^18.2.0",
-    "react-dom-17": "npm:react-dom@^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-reconciler": "^0.29.0",
-    "react-reconciler-26": "npm:react-reconciler@^0.26.2",
     "regenerator-runtime": "^0.13.11",
     "roughjs": "4.5.2",
     "tsconfig": "workspace:*",
     "tsup": "^6.7.0",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "react": ">=17.0.0",

packages/react-rough-fiber/src/__tests__/react-18.test.tsx → packages/react-rough-fiber/src/__tests__/context.test.tsx

@@ -1,20 +1,11 @@
-import {
-  version as reactVersion,
-  useState,
-  createContext,
-  useContext,
-} from 'react';
+import { useState, createContext, useContext } from 'react';
 import { cleanup, render, screen } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
+import { vi, afterEach, it, expect } from 'vitest';
 import { WCRoughSVG } from '../index';
 
 afterEach(() => {
   cleanup();
-  jest.clearAllMocks();
-});
-
-test('react version should be 18', () => {
-  expect(reactVersion.slice(0, 2)).toBe('18');
 });
 
 it('work with context', () => {
@@ -52,10 +43,10 @@ it('work with context', () => {
   render(<ContextDemo />);
 
   expect(screen.getByTestId('path').children[0].getAttribute('fill')).toBe(
-    'none'
+    'none',
   );
   expect(screen.getByTestId('path').children[0].getAttribute('stroke')).toBe(
-    '#000'
+    '#000',
   );
 
   act(() => {
@@ -64,9 +55,9 @@ it('work with context', () => {
   });
 
   expect(screen.getByTestId('path').children[0].getAttribute('fill')).toBe(
-    'none'
+    'none',
   );
   expect(screen.getByTestId('path').children[0].getAttribute('stroke')).toBe(
-    '#fff'
+    '#fff',
   );
 });

packages/react-rough-fiber/src/__tests__/event.test.tsx

@@ -1,19 +1,19 @@
 import { cleanup, render, screen } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
+import { vi, afterEach, it, expect } from 'vitest';
 import { RoughSVG } from '../index';
 
 afterEach(() => {
   cleanup();
-  jest.clearAllMocks();
 });
 
 it('handle event', () => {
-  const props = { onClick: jest.fn() };
-  const spy = jest.spyOn(props, 'onClick');
+  const props = { onClick: vi.fn() };
+  const spy = vi.spyOn(props, 'onClick');
   render(
     <RoughSVG>
       <button onClick={props.onClick}>click</button>
-    </RoughSVG>
+    </RoughSVG>,
   );
   act(() => {
     const button = screen.getByText('click');