Move package to ESM + ESLint 9

package.json

@@ -29,15 +29,13 @@
     "@types/node": "^18.17.5",
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "@typescript-eslint/type-utils": "^5.62.0",
-    "eslint": "^8.47.0",
+    "eslint": "^9.15.0",
     "parcel": "^2.9.3",
     "prettier": "latest",
     "process": "^0.11.10",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "typescript-eslint": "^8.14.0"
   },
   "dependencies": {
     "@parcel/config-default": "^2.9.3",

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

@@ -0,0 +1,45 @@
+import reactPlugin from "eslint-plugin-react";
+import hooksPlugin from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: [".parcel-cache", "dist", "node_modules"] },
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": hooksPlugin,
+    },
+    languageOptions: {
+      parserOptions: {
+        project: "../../tsconfig.json",
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    extends: [
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    rules: {
+      ...reactPlugin.configs["jsx-runtime"].rules,
+      ...hooksPlugin.configs.recommended.rules,
+      "@typescript-eslint/no-non-null-assertion": "error",
+      "@typescript-eslint/prefer-nullish-coalescing": "off",
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
+      "no-restricted-imports": ["error", { paths: ["react"] }],
+      "prefer-const": "off",
+    },
+  }
+);

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

@@ -1,5 +1,5 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
+export default {
   testEnvironment: "jsdom",
   preset: "ts-jest",
   prettierPath: null,

packages/react-resizable-panels/package.json

@@ -8,6 +8,7 @@
     "type": "git",
     "url": "git+https://github.com/bvaughn/react-resizable-panels.git"
   },
+  "type": "module",
   "source": "src/index.ts",
   "main": "dist/react-resizable-panels.cjs.js",
   "module": "dist/react-resizable-panels.esm.js",
@@ -70,21 +71,22 @@
     "clear": "pnpm run clear:builds & pnpm run clear:node_modules",
     "clear:builds": "rm -rf ./packages/*/dist",
     "clear:node_modules": "rm -rf ./node_modules",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint": "eslint",
     "test": "jest --config=jest.config.js",
     "test:watch": "jest --config=jest.config.js --watch",
     "watch": "parcel watch --port=2345"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
-    "eslint": "^8.37.0",
-    "eslint-plugin-no-restricted-imports": "^0.0.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "9.14.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "experimental",
-    "react-dom": "experimental"
+    "react-dom": "experimental",
+    "typescript-eslint": "^8.15.0"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",

packages/react-resizable-panels/src/Panel.test.tsx

@@ -21,7 +21,7 @@ describe("PanelGroup", () => {
   }
 
   beforeEach(() => {
-    // @ts-expect-error
+    // @ts-expect-error global.IS_REACT_ACT_ENVIRONMENT is not typed
     global.IS_REACT_ACT_ENVIRONMENT = true;
 
     uninstallMockOffsetWidthAndHeight = mockPanelGroupOffsetWidthAndHeight();
@@ -447,9 +447,9 @@ describe("PanelGroup", () => {
         );
       });
 
-      let leftElement = getPanelElement("left", container);
-      let middleElement = getPanelElement("middle", container);
-      let rightElement = getPanelElement("right", container);
+      const leftElement = getPanelElement("left", container);
+      const middleElement = getPanelElement("middle", container);
+      const rightElement = getPanelElement("right", container);
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
@@ -499,9 +499,9 @@ describe("PanelGroup", () => {
         );
       });
 
-      let leftElement = getPanelElement("left", container);
-      let middleElement = getPanelElement("middle", container);
-      let rightElement = getPanelElement("right", container);
+      const leftElement = getPanelElement("left", container);
+      const middleElement = getPanelElement("middle", container);
+      const rightElement = getPanelElement("right", container);
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
@@ -539,9 +539,9 @@ describe("PanelGroup", () => {
         );
       });
 
-      let leftElement = getPanelElement("left", container);
-      let middleElement = getPanelElement("middle", container);
-      let rightElement = getPanelElement("right", container);
+      const leftElement = getPanelElement("left", container);
+      const middleElement = getPanelElement("middle", container);
+      const rightElement = getPanelElement("right", container);
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
@@ -579,9 +579,9 @@ describe("PanelGroup", () => {
         );
       });
 
-      let leftElement = getPanelElement("left", container);
-      let middleElement = getPanelElement("middle", container);
-      let rightElement = getPanelElement("right", container);
+      const leftElement = getPanelElement("left", container);
+      const middleElement = getPanelElement("middle", container);
+      const rightElement = getPanelElement("right", container);
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
@@ -610,8 +610,8 @@ describe("PanelGroup", () => {
   describe("callbacks", () => {
     describe("onCollapse", () => {
       it("should be called on mount if a panels initial size is 0", () => {
-        let onCollapseLeft = jest.fn();
-        let onCollapseRight = jest.fn();
+        const onCollapseLeft = jest.fn();
+        const onCollapseRight = jest.fn();
 
         act(() => {
           root.render(
@@ -628,9 +628,8 @@ describe("PanelGroup", () => {
       });
 
       it("should be called when a panel is collapsed", () => {
-        let onCollapse = jest.fn();
-
-        let panelRef = createRef<ImperativePanelHandle>();
+        const onCollapse = jest.fn();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(
@@ -652,9 +651,8 @@ describe("PanelGroup", () => {
       });
 
       it("should be called with collapsedSizes that have many decimal places", () => {
-        let onCollapse = jest.fn();
-
-        let panelRef = createRef<ImperativePanelHandle>();
+        const onCollapse = jest.fn();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(
@@ -692,8 +690,8 @@ describe("PanelGroup", () => {
 
     describe("onExpand", () => {
       it("should be called on mount if a collapsible panels initial size is not 0", () => {
-        let onExpandLeft = jest.fn();
-        let onExpandRight = jest.fn();
+        const onExpandLeft = jest.fn();
+        const onExpandRight = jest.fn();
 
         act(() => {
           root.render(
@@ -710,9 +708,8 @@ describe("PanelGroup", () => {
       });
 
       it("should be called when a collapsible panel is expanded", () => {
-        let onExpand = jest.fn();
-
-        let panelRef = createRef<ImperativePanelHandle>();
+        const onExpand = jest.fn();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(
@@ -739,9 +736,8 @@ describe("PanelGroup", () => {
       });
 
       it("should be called with collapsedSizes that have many decimal places", () => {
-        let onExpand = jest.fn();
-
-        let panelRef = createRef<ImperativePanelHandle>();
+        const onExpand = jest.fn();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(
@@ -780,9 +776,9 @@ describe("PanelGroup", () => {
 
     describe("onResize", () => {
       it("should be called on mount", () => {
-        let onResizeLeft = jest.fn();
-        let onResizeMiddle = jest.fn();
-        let onResizeRight = jest.fn();
+        const onResizeLeft = jest.fn();
+        const onResizeMiddle = jest.fn();
+        const onResizeRight = jest.fn();
 
         act(() => {
           root.render(
@@ -810,9 +806,9 @@ describe("PanelGroup", () => {
       });
 
       it("should be called when a panel is added or removed from the group", () => {
-        let onResizeLeft = jest.fn();
-        let onResizeMiddle = jest.fn();
-        let onResizeRight = jest.fn();
+        const onResizeLeft = jest.fn();
+        const onResizeMiddle = jest.fn();
+        const onResizeRight = jest.fn();
 
         act(() => {
           root.render(
@@ -907,8 +903,8 @@ describe("PanelGroup", () => {
     });
 
     it("should support sizes with many decimal places", () => {
-      let panelRef = createRef<ImperativePanelHandle>();
-      let onResize = jest.fn();
+      const onResize = jest.fn();
+      const panelRef = createRef<ImperativePanelHandle>();
 
       act(() => {
         root.render(
@@ -1029,19 +1025,18 @@ describe("PanelGroup", () => {
   });
 
   describe("DEV warnings", () => {
-    it("should warn about server rendered panels with no default size", () => {
+    it("should warn about server rendered panels with no default size", async () => {
       jest.resetModules();
       jest.mock("#is-browser", () => ({ isBrowser: false }));
 
-      const { TextEncoder } = require("util");
+      const { TextEncoder } = await import("util");
       global.TextEncoder = TextEncoder;
 
-      const { renderToStaticMarkup } = require("react-dom/server.browser");
-      const { act } = require("react-dom/test-utils");
-      const Panel = require("./Panel").Panel;
-      const PanelGroup = require("./PanelGroup").PanelGroup;
-      const PanelResizeHandle =
-        require("./PanelResizeHandle").PanelResizeHandle;
+      const { renderToStaticMarkup } = await import("react-dom/server");
+      const { act } = await import("react-dom/test-utils");
+      const { Panel } = await import("./Panel");
+      const { PanelGroup } = await import("./PanelGroup");
+      const { PanelResizeHandle } = await import("./PanelResizeHandle");
 
       act(() => {
         // No warning expected if default sizes provided

packages/react-resizable-panels/src/PanelGroup.test.tsx

@@ -1,6 +1,6 @@
 // @ts-expect-error This is an experimental API
 // eslint-disable-next-line no-restricted-imports
-import { unstable_Activity as Activity, Fragment } from "react";
+import { unstable_Activity as Activity } from "react";
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import {
@@ -30,7 +30,7 @@ describe("PanelGroup", () => {
   }
 
   beforeEach(() => {
-    // @ts-expect-error
+    // @ts-expect-error global.IS_REACT_ACT_ENVIRONMENT is not typed
     global.IS_REACT_ACT_ENVIRONMENT = true;
 
     // JSDom doesn't support element sizes
@@ -232,7 +232,7 @@ describe("PanelGroup", () => {
   describe("callbacks", () => {
     describe("onLayout", () => {
       it("should be called with the initial group layout on mount", () => {
-        let onLayout = jest.fn();
+        const onLayout = jest.fn();
 
         act(() => {
           root.render(
@@ -249,9 +249,9 @@ describe("PanelGroup", () => {
       });
 
       it("should be called any time the group layout changes", () => {
-        let onLayout = jest.fn();
-        let panelGroupRef = createRef<ImperativePanelGroupHandle>();
-        let panelRef = createRef<ImperativePanelHandle>();
+        const onLayout = jest.fn();
+        const panelGroupRef = createRef<ImperativePanelGroupHandle>();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(

packages/react-resizable-panels/src/PanelGroup.ts

@@ -103,9 +103,7 @@ export type PanelGroupProps = Omit<
     dir?: "auto" | "ltr" | "rtl" | undefined;
   }>;
 
-const debounceMap: {
-  [key: string]: typeof savePanelGroupState;
-} = {};
+const debounceMap: Record<string, typeof savePanelGroupState> = {};
 
 function PanelGroupWithForwardedRef({
   autoSaveId = null,
@@ -553,7 +551,6 @@ function PanelGroupWithForwardedRef({
   );
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   useIsomorphicLayoutEffect(() => {
     if (eagerValuesRef.current.panelDataArrayChanged) {
       eagerValuesRef.current.panelDataArrayChanged = false;

packages/react-resizable-panels/src/PanelResizeHandle.test.tsx

@@ -27,7 +27,7 @@ describe("PanelResizeHandle", () => {
   let container: HTMLElement;
 
   beforeEach(() => {
-    // @ts-expect-error
+    // @ts-expect-error global.IS_REACT_ACT_ENVIRONMENT is not typed
     global.IS_REACT_ACT_ENVIRONMENT = true;
     container = document.createElement("div");
     document.body.appendChild(container);