Make module ESM only; replace Jest with Vitest (#478)

Builds on top of #474; special thanks to @Andarist for putting this branch together!

---------

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>

Author: bvaughn

.github/workflows/jest.yml .github/workflows/vitest.yml.github/workflows/jest.yml renamed to .github/workflows/vitest.yml

@@ -1,4 +1,4 @@
-name: "Jest"
+name: "Vitest"
 on: [pull_request]
 jobs:
   tests-e2e:
@@ -13,5 +13,7 @@ jobs:
         run: pnpm install --frozen-lockfile --recursive
       - name: Build NPM packages
         run: pnpm run prerelease
-      - name: Run tests
-        run: cd packages/react-resizable-panels && pnpm run test
+      - name: Run browser tests
+        run: cd packages/react-resizable-panels && pnpm run test:browser
+      - name: Run node tests
+        run: cd packages/react-resizable-panels && pnpm run test:node

package.json

@@ -25,8 +25,7 @@
   "devDependencies": {
     "@babel/preset-typescript": "^7.22.5",
     "@playwright/test": "^1.37.0",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^18.17.5",
+    "@types/node": "^22.15.3",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -36,8 +35,7 @@
     "parcel": "^2.9.3",
     "prettier": "latest",
     "process": "^0.11.10",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.8.3"
   },
   "dependencies": {
     "@parcel/config-default": "^2.9.3",
@@ -46,7 +44,7 @@
     "@parcel/transformer-js": "^2.9.3",
     "@parcel/transformer-react-refresh-wrap": "^2.9.3",
     "@parcel/transformer-typescript-types": "^2.9.3",
-    "@preconstruct/cli": "^2.8.1"
+    "@preconstruct/cli": "^2.8.12"
   },
   "preconstruct": {
     "packages": [
@@ -56,7 +54,9 @@
       "importConditionDefaultExport": "default"
     },
     "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
-      "importsConditions": true
+      "distInRoot": true,
+      "importsConditions": true,
+      "typeModule": true
     }
   },
   "@parcel/resolver-default": {

packages/react-resizable-panels/jest.config.js

@@ -1,6 +1,7 @@
 {
   "name": "react-resizable-panels",
   "version": "2.1.9",
+  "type": "module",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -9,8 +10,6 @@
     "url": "git+https://github.com/bvaughn/react-resizable-panels.git"
   },
   "source": "src/index.ts",
-  "main": "dist/react-resizable-panels.cjs.js",
-  "module": "dist/react-resizable-panels.esm.js",
   "files": [
     "dist",
     "package.json",
@@ -19,38 +18,15 @@
   ],
   "exports": {
     ".": {
-      "types": {
-        "import": "./dist/react-resizable-panels.cjs.mjs",
-        "default": "./dist/react-resizable-panels.cjs.js"
-      },
+      "types": "./dist/react-resizable-panels.js",
       "development": {
-        "browser": {
-          "module": "./dist/react-resizable-panels.browser.development.esm.js",
-          "import": "./dist/react-resizable-panels.browser.development.cjs.mjs",
-          "default": "./dist/react-resizable-panels.browser.development.cjs.js"
-        },
-        "node": {
-          "module": "./dist/react-resizable-panels.development.node.esm.js",
-          "import": "./dist/react-resizable-panels.development.node.cjs.mjs",
-          "default": "./dist/react-resizable-panels.development.node.cjs.js"
-        },
-        "module": "./dist/react-resizable-panels.development.esm.js",
-        "import": "./dist/react-resizable-panels.development.cjs.mjs",
-        "default": "./dist/react-resizable-panels.development.cjs.js"
-      },
-      "browser": {
-        "module": "./dist/react-resizable-panels.browser.esm.js",
-        "import": "./dist/react-resizable-panels.browser.cjs.mjs",
-        "default": "./dist/react-resizable-panels.browser.cjs.js"
-      },
-      "node": {
-        "module": "./dist/react-resizable-panels.node.esm.js",
-        "import": "./dist/react-resizable-panels.node.cjs.mjs",
-        "default": "./dist/react-resizable-panels.node.cjs.js"
+        "browser": "./dist/react-resizable-panels.browser.development.js",
+        "node": "./dist/react-resizable-panels.development.node.js",
+        "default": "./dist/react-resizable-panels.development.js"
       },
-      "module": "./dist/react-resizable-panels.esm.js",
-      "import": "./dist/react-resizable-panels.cjs.mjs",
-      "default": "./dist/react-resizable-panels.cjs.js"
+      "browser": "./dist/react-resizable-panels.browser.js",
+      "node": "./dist/react-resizable-panels.node.js",
+      "default": "./dist/react-resizable-panels.js"
     },
     "./package.json": "./package.json"
   },
@@ -71,19 +47,21 @@
     "clear:builds": "rm -rf ./packages/*/dist",
     "clear:node_modules": "rm -rf ./node_modules",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "test": "jest --config=jest.config.js",
-    "test:watch": "jest --config=jest.config.js --watch",
+    "test:browser": "vitest",
+    "test:node": "vitest -c vitest.node.config.ts",
     "watch": "parcel watch --port=2345"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@vitest/ui": "^3.1.2",
     "eslint": "^8.37.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^26.1.0",
     "react": "experimental",
-    "react-dom": "experimental"
+    "react-dom": "experimental",
+    "save-dev": "0.0.1-security",
+    "vitest": "^3.1.2"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",

packages/react-resizable-panels/package.json

@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { act } from "react-dom/test-utils";
+import { Panel } from "./Panel";
+import { PanelGroup } from "./PanelGroup";
+import { PanelResizeHandle } from "./PanelResizeHandle";
+
+describe("PanelGroup", () => {
+  let expectedWarnings: string[] = [];
+
+  function expectWarning(expectedMessage: string) {
+    expectedWarnings.push(expectedMessage);
+  }
+
+  beforeEach(() => {
+    // @ts-expect-error
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+
+    expectedWarnings = [];
+
+    vi.spyOn(console, "warn").mockImplementation((actualMessage: string) => {
+      const match = expectedWarnings.findIndex((expectedMessage) => {
+        return actualMessage.includes(expectedMessage);
+      });
+
+      if (match >= 0) {
+        expectedWarnings.splice(match, 1);
+        return;
+      }
+
+      throw Error(`Unexpected warning: ${actualMessage}`);
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    expect(expectedWarnings).toHaveLength(0);
+  });
+
+  describe("DEV warnings", () => {
+    test("should warn about server rendered panels with no default size", () => {
+      act(() => {
+        // No warning expected if default sizes provided
+        renderToStaticMarkup(
+          <PanelGroup direction="horizontal">
+            <Panel defaultSize={100} />
+            <PanelResizeHandle />
+            <Panel defaultSize={1_000} />
+          </PanelGroup>
+        );
+      });
+
+      expectWarning(
+        "Panel defaultSize prop recommended to avoid layout shift after server rendering"
+      );
+
+      act(() => {
+        renderToStaticMarkup(
+          <PanelGroup direction="horizontal">
+            <Panel id="one" />
+          </PanelGroup>
+        );
+      });
+    });
+  });
+});