Add eslint-react plugin

Novage · Nov 17, 2024 · 882f210 · 882f210
1 parent 451bd1b
commit 882f210
Show file tree

Hide file tree

Showing 21 changed files with 500 additions and 186 deletions.
diff --git a/demo/eslint.config.js b/demo/eslint.config.js
@@ -1,35 +1,6 @@
 // @ts-check
 
-import { CommonConfig } from "../eslint.common.config.js";
 import tsEslint from "typescript-eslint";
-import reactRefresh from "eslint-plugin-react-refresh";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactPlugin from "eslint-plugin-react";
+import { CommonReactConfig } from "../eslint.common.react.config.js";
 
-export default tsEslint.config(
-  ...CommonConfig,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  reactPlugin.configs.flat?.recommended, // This is not a plugin object, but a shareable config object
-  reactPlugin.configs.flat?.["jsx-runtime"], // Add this if you are using React 17+
-  {
-    plugins: {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      "react-hooks": reactHooks,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      "react-refresh": reactRefresh,
-    },
-    rules: {
-      .../** @type {Record<string, string>}  */ (
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        reactHooks.configs.recommended.rules
-      ),
-      "import/extensions": "off",
-    },
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-  },
-);
+export default tsEslint.config(...CommonReactConfig);
diff --git a/eslint.common.react.config.js b/eslint.common.react.config.js
@@ -0,0 +1,38 @@
+// @ts-check
+
+import { CommonConfig } from "./eslint.common.config.js";
+import reactRefresh from "eslint-plugin-react-refresh";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactPlugin from "eslint-plugin-react";
+import react from "@eslint-react/eslint-plugin";
+
+export const CommonReactConfig = /** @type {typeof CommonConfig} */ ([
+  ...CommonConfig,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  reactPlugin.configs.flat?.recommended, // This is not a plugin object, but a shareable config object
+  reactPlugin.configs.flat?.["jsx-runtime"], // Add this if you are using React 17+
+  react.configs.all,
+  {
+    plugins: {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      "react-hooks": reactHooks,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      .../** @type {Record<string, string>}  */ (
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        reactHooks.configs.recommended.rules
+      ),
+      "import/extensions": "off",
+      "@eslint-react/avoid-shorthand-fragment": "off",
+      "@eslint-react/avoid-shorthand-boolean": "off",
+      "@eslint-react/naming-convention/filename": "off",
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+]);
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "create-doc": "pnpm typedoc"
   },
   "devDependencies": {
+    "@eslint-react/eslint-plugin": "^1.16.1",
     "@types/eslint__js": "^8.42.3",
     "eslint": "^9.14.0",
     "eslint-plugin-import": "^2.31.0",

diff --git a/packages/p2p-media-loader-demo/dummy.ts b/packages/p2p-media-loader-demo/dummy.ts
diff --git a/packages/p2p-media-loader-demo/eslint.config.js b/packages/p2p-media-loader-demo/eslint.config.js
@@ -1,35 +1,6 @@
 // @ts-check
 
-import { CommonConfig } from "../../eslint.common.config.js";
 import tsEslint from "typescript-eslint";
-import reactRefresh from "eslint-plugin-react-refresh";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactPlugin from "eslint-plugin-react";
+import { CommonReactConfig } from "../../eslint.common.react.config.js";
 
-export default tsEslint.config(
-  ...CommonConfig,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  reactPlugin.configs.flat?.recommended, // This is not a plugin object, but a shareable config object
-  reactPlugin.configs.flat?.["jsx-runtime"], // Add this if you are using React 17+
-  {
-    plugins: {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      "react-hooks": reactHooks,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      "react-refresh": reactRefresh,
-    },
-    rules: {
-      .../** @type {Record<string, string>}  */ (
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        reactHooks.configs.recommended.rules
-      ),
-      "import/extensions": "off",
-    },
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-  },
-);
+export default tsEslint.config(...CommonReactConfig);
diff --git a/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx b/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx
@@ -134,6 +134,9 @@ export const P2PVideoDemo = ({
     ) : null;
   };
 
+  const isDebugToolsEnabled =
+    debugToolsEnabled || queryParams.debug === DEBUG_COMPONENT_ENABLED;
+
   return (
     <>
       <div className="demo-container">
@@ -165,9 +168,7 @@ export const P2PVideoDemo = ({
           )}
         </div>
       </div>
-      {(debugToolsEnabled || queryParams.debug === DEBUG_COMPONENT_ENABLED) && (
-        <DebugTools />
-      )}
+      {isDebugToolsEnabled && <DebugTools />}
     </>
   );
 };
diff --git a/packages/p2p-media-loader-demo/src/components/PlaybackOptions.tsx b/packages/p2p-media-loader-demo/src/components/PlaybackOptions.tsx
@@ -39,60 +39,61 @@ export const PlaybackOptions = ({
   };
 
   return (
-    <>
-      <div className="playback-options">
-        <div className="option-group">
-          <label htmlFor="streamUrl">
-            Video URL{isHttps ? " (HTTPS only)" : ""}:
-          </label>
-          <input
-            key={streamUrl}
-            className="item"
-            defaultValue={streamUrl}
-            id="streamUrl"
-            ref={streamUrlInputRef}
-          ></input>
-        </div>
+    <div className="playback-options">
+      <div className="option-group">
+        <label htmlFor="streamUrl">
+          Video URL{isHttps ? " (HTTPS only)" : ""}:
+        </label>
+        <input
+          key={streamUrl}
+          className="item"
+          defaultValue={streamUrl}
+          id="streamUrl"
+          ref={streamUrlInputRef}
+        ></input>
+      </div>
 
-        <div className="option-group">
-          <label htmlFor="player">Player:</label>
-          <select
-            className="item"
-            key={String(currentPlayer)}
-            ref={playerSelectRef}
-            id="player"
-            defaultValue={String(currentPlayer)}
-          >
-            <optgroup label="Hls.js P2P Engine (HLS Only)">
-              {Object.entries(hlsPlayers).map(([key, name]) => (
+      <div className="option-group">
+        <label htmlFor="player">Player:</label>
+        <select
+          className="item"
+          key={String(currentPlayer)}
+          ref={playerSelectRef}
+          id="player"
+          defaultValue={String(currentPlayer)}
+        >
+          <optgroup label="Hls.js P2P Engine (HLS Only)">
+            {Object.entries(hlsPlayers).map(([key, name]) => (
+              <option key={key} value={key}>
+                {name}
+              </option>
+            ))}
+          </optgroup>
+          {Object.keys(shakaPlayers).length > 0 && (
+            <optgroup label="Shaka Players">
+              {Object.entries(shakaPlayers).map(([key, name]) => (
                 <option key={key} value={key}>
                   {name}
                 </option>
               ))}
             </optgroup>
-            {Object.keys(shakaPlayers).length > 0 && (
-              <optgroup label="Shaka Players">
-                {Object.entries(shakaPlayers).map(([key, name]) => (
-                  <option key={key} value={key}>
-                    {name}
-                  </option>
-                ))}
-              </optgroup>
-            )}
-          </select>
-        </div>
+          )}
+        </select>
+      </div>
 
-        <div className="button-group">
-          <button onClick={handleApply}>Apply</button>
-          <button
-            onClick={() => {
-              window.open(window.location.href, "_blank");
-            }}
-          >
-            Create new peer
-          </button>
-        </div>
+      <div className="button-group">
+        <button type="button" onClick={handleApply}>
+          Apply
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            window.open(window.location.href, "_blank");
+          }}
+        >
+          Create new peer
+        </button>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/packages/p2p-media-loader-demo/src/components/chart/ChartLegend.tsx b/packages/p2p-media-loader-demo/src/components/chart/ChartLegend.tsx
@@ -13,6 +13,7 @@ export const ChartLegend = ({ legendItems }: ChartLegendProps) => {
   return (
     <div className="chart-legend">
       {legendItems.map((item, index) => (
+        // eslint-disable-next-line @eslint-react/no-array-index-key
         <div key={index} className="line">
           <div className="swatch" style={{ backgroundColor: item.color }} />
           <p>{item.content}</p>

diff --git a/packages/p2p-media-loader-demo/src/components/chart/DownloadStatsChart.tsx b/packages/p2p-media-loader-demo/src/components/chart/DownloadStatsChart.tsx
@@ -34,7 +34,9 @@ type StoredData = {
 } & DownloadStats;
 
 export const DownloadStatsChart = ({ downloadStatsRef }: StatsChartProps) => {
-  const [data, setData] = useState<ChartsData[]>(generateInitialStackedData());
+  const [data, setData] = useState<ChartsData[]>(() =>
+    generateInitialStackedData(),
+  );
 
   const [storedData, setStoredData] = useState<StoredData>({
     totalDownloaded: 0,

diff --git a/packages/p2p-media-loader-demo/src/components/debugTools/DebugSelector.tsx b/packages/p2p-media-loader-demo/src/components/debugTools/DebugSelector.tsx
@@ -41,7 +41,7 @@ function useLocalStorageItem<T>(
   storageItemToValue: (storageItem: string | null) => T,
 ): [T, React.Dispatch<React.SetStateAction<T>>] {
   const [value, setValue] = useState<T>(
-    storageItemToValue(localStorage[prop] as string | null) ?? initValue,
+    () => storageItemToValue(localStorage[prop] as string | null) ?? initValue,
   );
   const setValueExternal = useCallback(
     (value: T | ((prev: T) => T)) => {

diff --git a/packages/p2p-media-loader-demo/src/components/players/hlsjs/Hlsjs.tsx b/packages/p2p-media-loader-demo/src/components/players/hlsjs/Hlsjs.tsx
@@ -1,5 +1,5 @@
 import "./hlsjs.css";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { PlayerProps } from "../../../types";
 import { subscribeToUiEvents } from "../utils";
 import { HlsJsP2PEngine } from "p2p-media-loader-hlsjs";
@@ -14,17 +14,11 @@ export const HlsjsPlayer = ({
   onChunkDownloaded,
   onChunkUploaded,
 }: PlayerProps) => {
-  const [isHlsSupported, setIsHlsSupported] = useState(true);
-
   const videoRef = useRef<HTMLVideoElement>(null);
   const qualityRef = useRef<HTMLSelectElement>(null);
 
   useEffect(() => {
-    if (!videoRef.current) return;
-    if (!Hls.isSupported()) {
-      setIsHlsSupported(false);
-      return;
-    }
+    if (!videoRef.current || !Hls.isSupported()) return;
 
     const HlsWithP2P = HlsJsP2PEngine.injectMixin(Hls);
     const hls = new HlsWithP2P({
@@ -82,7 +76,7 @@ export const HlsjsPlayer = ({
     }
   };
 
-  return isHlsSupported ? (
+  return Hls.isSupported() ? (
     <div className="video-container">
       <video
         ref={videoRef}

diff --git a/packages/p2p-media-loader-demo/src/components/players/hlsjs/HlsjsClapprPlayer.tsx b/packages/p2p-media-loader-demo/src/components/players/hlsjs/HlsjsClapprPlayer.tsx
@@ -1,5 +1,5 @@
 import "../clappr.css";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { PlayerProps } from "../../../types";
 import { HlsJsP2PEngine } from "p2p-media-loader-hlsjs";
 import { subscribeToUiEvents } from "../utils";
@@ -22,14 +22,10 @@ export const HlsjsClapprPlayer = ({
 }: PlayerProps) => {
   const areScriptsLoaded = useScripts(SCRIPTS);
 
-  const [isHlsSupported, setIsHlsSupported] = useState(true);
-
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!containerRef.current || !areScriptsLoaded) return;
-    if (!Hls.isSupported()) {
-      setIsHlsSupported(false);
+    if (!containerRef.current || !areScriptsLoaded || !Hls.isSupported()) {
       return;
     }
 
@@ -84,7 +80,7 @@ export const HlsjsClapprPlayer = ({
     swarmId,
   ]);
 
-  return isHlsSupported ? (
+  return Hls.isSupported() ? (
     <div ref={containerRef} id="clappr-player" />
   ) : (
     <div className="error-message">

diff --git a/packages/p2p-media-loader-demo/src/components/players/hlsjs/HlsjsDPLayer.tsx b/packages/p2p-media-loader-demo/src/components/players/hlsjs/HlsjsDPLayer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { PlayerProps } from "../../../types";
 import DPlayer from "dplayer";
 import { subscribeToUiEvents } from "../utils";
@@ -14,15 +14,10 @@ export const HlsjsDPlayer = ({
   onChunkDownloaded,
   onChunkUploaded,
 }: PlayerProps) => {
-  const [isHlsSupported, setIsHlsSupported] = useState(true);
-
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!Hls.isSupported()) {
-      setIsHlsSupported(false);
-      return;
-    }
+    if (!Hls.isSupported()) return;
 
     const HlsWithP2P = HlsJsP2PEngine.injectMixin(Hls);
 
@@ -75,7 +70,7 @@ export const HlsjsDPlayer = ({
     swarmId,
   ]);
 
-  return isHlsSupported ? (
+  return Hls.isSupported() ? (
     <div ref={containerRef} className="video-container">
       <video playsInline autoPlay muted />
     </div>