Change "react" imports to use * syntax (#119)

.github/workflows/eslint.yml

@@ -0,0 +1,12 @@
+name: "ESLint"
+on: [pull_request]
+jobs:
+  tests-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - name: Initialize Yarn and install package dependencies
+        run: yarn
+      - name: Run ESLint
+        run: yarn lint

.github/workflows/prettier.yml

@@ -0,0 +1,12 @@
+name: "Prettier"
+on: [pull_request]
+jobs:
+  tests-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - name: Initialize Yarn and install package dependencies
+        run: yarn
+      - name: Run Prettier
+        run: yarn run prettier:ci

.github/workflows/typescript.yml

@@ -0,0 +1,14 @@
+name: "TypeScript"
+on: [pull_request]
+jobs:
+  tests-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - name: Initialize Yarn and install package dependencies
+        run: yarn
+      - name: Build NPM package
+        run: yarn prerelease
+      - name: Run TypeScript
+        run: yarn typescript

package.json

@@ -5,22 +5,24 @@
   ],
   "scripts": {
     "docs": "cd packages/react-resizable-panels-website && yarn build",
+    "lint": "cd packages/react-resizable-panels && yarn lint",
     "prerelease": "rm -rf ./.parcel-cache && cd packages/react-resizable-panels && rm -rf ./dist && yarn build",
     "prettier": "prettier --write \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
+    "prettier:ci": "prettier --check \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
     "typescript": "tsc --noEmit",
     "typescript:watch": "tsc --noEmit --watch"
   },
-  "dependencies": {
+  "devDependencies": {
     "@parcel/packager-ts": "2.8.2",
     "@parcel/transformer-typescript-types": "2.8.2",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
     "parcel": "latest",
     "prettier": "latest",
     "process": "^0.11.10",
     "typescript": ">=3.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/react-virtualized-auto-sizer": "^1.0.1"
   }
 }

packages/react-resizable-panels/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "ignorePatterns": [".parcel-cache", "dist", "node_modules"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": { "project": ["../../tsconfig.json"] },
+  "plugins": ["@typescript-eslint", "no-restricted-imports", "react-hooks"],
+  "root": true,
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": ["react"]
+      }
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "(useIsomorphicLayoutEffect)"
+      }
+    ]
+  }
+}

packages/react-resizable-panels/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.0.39
+* [#118](https://github.com/bvaughn/react-resizable-panels/issues/118): Fix import regression from 0.0.38.
+
 ## 0.0.38
 * [#117](https://github.com/bvaughn/react-resizable-panels/issues/117): `Panel` collapse behavior works better near viewport edges.
 * [#115](https://github.com/bvaughn/react-resizable-panels/pull/115): `PanelResizeHandle` logic calls `event.preventDefault` for events it handles.

packages/react-resizable-panels/package.json

@@ -14,9 +14,13 @@
   "types": "dist/react-resizable-panels.d.ts",
   "scripts": {
     "build": "parcel build",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "watch": "parcel watch"
   },
   "devDependencies": {
+    "eslint": "^8.37.0",
+    "eslint-plugin-no-restricted-imports": "^0.0.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "react": "latest",
     "react-dom": "latest"
   },

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

@@ -9,7 +9,7 @@ import {
   useEffect,
   useImperativeHandle,
   useRef,
-} from "react";
+} from "./vendor/react";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 

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

@@ -1,4 +1,4 @@
-import { CSSProperties, createContext } from "react";
+import { CSSProperties, createContext } from "./vendor/react";
 
 import { PanelData, ResizeEvent, ResizeHandler } from "./types";
 

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

@@ -8,7 +8,7 @@ import {
   useMemo,
   useRef,
   useState,
-} from "react";
+} from "./vendor/react";
 
 import { PanelGroupContext } from "./PanelContexts";
 import {
@@ -250,7 +250,7 @@ export function PanelGroup({
         })
       );
     }
-  }, [autoSaveId, panels]);
+  }, [autoSaveId, panels, storage]);
 
   useEffect(() => {
     // If this panel has been configured to persist sizing information, save sizes to local storage.
@@ -263,7 +263,7 @@ export function PanelGroup({
 
       savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
     }
-  }, [autoSaveId, panels, sizes]);
+  }, [autoSaveId, panels, sizes, storage]);
 
   const getPanelStyle = useCallback(
     (id: string): CSSProperties => {
@@ -301,7 +301,7 @@ export function PanelGroup({
             : undefined,
       };
     },
-    [activeHandleId, direction, sizes]
+    [activeHandleId, disablePointerEventsDuringResize, sizes]
   );
 
   const registerPanel = useCallback((id: string, panel: PanelData) => {

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

@@ -10,7 +10,7 @@ import {
   useEffect,
   useRef,
   useState,
-} from "react";
+} from "./vendor/react";
 import useUniqueId from "./hooks/useUniqueId";
 
 import { useWindowSplitterResizeHandlerBehavior } from "./hooks/useWindowSplitterBehavior";

packages/react-resizable-panels/src/hooks/useIsomorphicEffect.ts

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect } from "react";
+import { useLayoutEffect } from "../vendor/react";
 
 const canUseEffectHooks = !!(
   typeof window !== "undefined" &&

packages/react-resizable-panels/src/hooks/useUniqueId.ts

@@ -1,11 +1,14 @@
-import { useId, useRef } from "react";
+import { useId, useRef } from "../vendor/react";
+
+const wrappedUseId: () => string | null =
+  typeof useId === "function" ? useId : (): null => null;
 
 let counter = 0;
 
 export default function useUniqueId(
   idFromParams: string | null = null
 ): string {
-  const idFromUseId = typeof useId === "function" ? useId() : null;
+  const idFromUseId = wrappedUseId();
 
   const idRef = useRef<string | null>(idFromParams || idFromUseId || null);
   if (idRef.current === null) {

packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts

@@ -1,4 +1,4 @@
-import { RefObject, useEffect } from "react";
+import { RefObject, useEffect } from "../vendor/react";
 import { PRECISION } from "../constants";
 
 import { CommittedValues, PanelDataMap } from "../PanelGroup";
@@ -150,7 +150,14 @@ export function useWindowSplitterPanelGroupBehavior({
     return () => {
       cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
     };
-  }, [groupId, panels, sizes]);
+  }, [
+    committedValuesRef,
+    groupId,
+    panels,
+    panelSizeBeforeCollapse,
+    setSizes,
+    sizes,
+  ]);
 }
 
 export function useWindowSplitterResizeHandlerBehavior({

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

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { RefObject } from "./vendor/react";
 
 export type Direction = "horizontal" | "vertical";
 

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

@@ -0,0 +1,61 @@
+// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
+// and limitations with ParcelJS parsing of the useId workaround (used below).
+// For the time being, all react-resizable-panels must import "react" with the "* as React" syntax.
+// To avoid mistakes, we use the ESLint "no-restricted-imports" to prevent "react" imports except in this file.
+// See https://github.com/bvaughn/react-resizable-panels/issues/118
+
+// eslint-disable-next-line no-restricted-imports
+import * as React from "react";
+
+// eslint-disable-next-line no-restricted-imports
+import type {
+  CSSProperties,
+  ElementType,
+  ForwardedRef,
+  MouseEvent,
+  ReactNode,
+  RefObject,
+  TouchEvent,
+} from "react";
+
+const {
+  createElement,
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} = React;
+
+// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = (React as any)["useId".toString()] as () => string;
+
+export {
+  createElement,
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+};
+
+export type {
+  CSSProperties,
+  ElementType,
+  ForwardedRef,
+  MouseEvent,
+  ReactNode,
+  RefObject,
+  TouchEvent,
+};