ESLint 9 and more strict checks

demo/eslint.config.js

@@ -0,0 +1,6 @@
+// @ts-check
+
+import tsEslint from "typescript-eslint";
+import { CommonReactConfig } from "../eslint.common.react.config.js";
+
+export default tsEslint.config(...CommonReactConfig);

demo/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint src --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prettier": "prettier --write .",
     "type-check": "npx tsc --noEmit",

demo/src/App.tsx

@@ -1,7 +1,7 @@
 import "./app.css";
 import { P2PVideoDemo } from "p2p-media-loader-demo";
 
-function App() {
+export function App() {
   return (
     <P2PVideoDemo
       streamUrl={
@@ -11,5 +11,3 @@ function App() {
     />
   );
 }
-
-export default App;

demo/src/main.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import { App } from "./App";
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

demo/tsconfig.node.json

@@ -4,5 +4,5 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext"
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "eslint.config.js"]
 }

eslint.common.config.js

@@ -0,0 +1,80 @@
+import globals from "globals";
+import eslint from "@eslint/js";
+import tsEslint from "typescript-eslint";
+import { flatConfigs as importPlugin } from "eslint-plugin-import";
+
+export const CommonConfig =
+  /** @type {(typeof tsEslint.configs.eslintRecommended)[]} */ ([
+    eslint.configs.recommended,
+    importPlugin.recommended,
+    tsEslint.configs.eslintRecommended,
+    ...tsEslint.configs.strictTypeChecked,
+    ...tsEslint.configs.stylisticTypeChecked,
+    {
+      languageOptions: {
+        globals: {
+          ...globals.browser,
+        },
+
+        ecmaVersion: 2022,
+        sourceType: "module",
+
+        parserOptions: {
+          project: ["tsconfig.json", "tsconfig.node.json"],
+        },
+      },
+
+      rules: {
+        "@typescript-eslint/consistent-type-definitions": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          { argsIgnorePattern: "^_" },
+        ],
+        "@typescript-eslint/restrict-template-expressions": [
+          "error",
+          { allowNumber: true },
+        ],
+        "@typescript-eslint/no-confusing-void-expression": [
+          "error",
+          { ignoreArrowShorthand: true },
+        ],
+        "@typescript-eslint/no-unnecessary-condition": [
+          "error",
+          { allowConstantLoopConditions: true },
+        ],
+
+        "no-var": "error",
+        "no-alert": "warn",
+        "prefer-const": "error",
+        "prefer-spread": "error",
+        "no-multi-assign": "error",
+        "prefer-template": "error",
+        "object-shorthand": "error",
+        "no-nested-ternary": "error",
+        "no-array-constructor": "error",
+        "prefer-object-spread": "error",
+        "prefer-arrow-callback": "error",
+        "prefer-destructuring": ["error", { object: true, array: false }],
+        "no-console": "warn",
+        curly: ["warn", "multi-line", "consistent"],
+        "no-debugger": "warn",
+        "spaced-comment": ["warn", "always", { markers: ["/"] }],
+
+        "import/no-unresolved": "off",
+        "import/named": "off",
+        "import/no-named-as-default": "off",
+        "import/namespace": "off",
+        "import/no-named-as-default-member": "off",
+        "import/extensions": [
+          "error",
+          "always",
+          {
+            js: "ignorePackages",
+            jsx: "never",
+            ts: "never",
+            tsx: "never",
+          },
+        ],
+      },
+    },
+  ]);

eslint.common.react.config.js

@@ -0,0 +1,30 @@
+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,
+  reactPlugin.configs.flat?.recommended,
+  reactPlugin.configs.flat?.["jsx-runtime"],
+  react.configs.all,
+  {
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...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",
+      },
+    },
+  },
+]);

package.json

@@ -2,6 +2,7 @@
   "name": "p2p-media-loader",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "pnpm --recursive build",
     "build:es": "pnpm --filter './packages/**' build:es",
@@ -17,8 +18,11 @@
     "create-doc": "pnpm typedoc"
   },
   "devDependencies": {
-    "eslint": "^8.57.1",
+    "@eslint-react/eslint-plugin": "^1.16.1",
+    "@types/eslint__js": "^8.42.3",
+    "eslint": "^9.14.0",
     "eslint-plugin-import": "^2.31.0",
+    "globals": "^15.12.0",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
     "typedoc": "^0.26.11",

packages/p2p-media-loader-core/eslint.config.js

@@ -0,0 +1,6 @@
+// @ts-check
+
+import { CommonConfig } from "../../eslint.common.config.js";
+import tsEslint from "typescript-eslint";
+
+export default tsEslint.config(...CommonConfig);

packages/p2p-media-loader-core/package.json

@@ -47,7 +47,7 @@
     "build:esm-min": "vite build --mode esm-min",
     "build:es": "tsc",
     "prettier": "prettier --write .",
-    "lint": "eslint . --ext .ts --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint src --report-unused-disable-directives --max-warnings 0",
     "clean": "rimraf lib dist build p2p-media-loader-core-*.tgz",
     "clean-with-modules": "rimraf node_modules && pnpm clean",
     "type-check": "npx tsc --noEmit",

packages/p2p-media-loader-core/src/core.ts

@@ -112,13 +112,13 @@ export class Core<TStream extends Stream = Stream> {
     this.mainStreamConfig = mergeAndFilterConfig<StreamConfig>({
       defaultConfig: Core.DEFAULT_STREAM_CONFIG,
       baseConfig: filteredConfig,
-      specificStreamConfig: filteredConfig?.mainStream,
+      specificStreamConfig: filteredConfig.mainStream,
     });
 
     this.secondaryStreamConfig = mergeAndFilterConfig<StreamConfig>({
       defaultConfig: Core.DEFAULT_STREAM_CONFIG,
       baseConfig: filteredConfig,
-      specificStreamConfig: filteredConfig?.secondaryStream,
+      specificStreamConfig: filteredConfig.secondaryStream,
     });
   }
 
@@ -381,7 +381,7 @@ export class Core<TStream extends Stream = Stream> {
   private async initializeSegmentStorage() {
     if (this.segmentStorage) return;
 
-    const isLive = this.streamDetails.isLive;
+    const { isLive } = this.streamDetails;
     const createCustomStorage =
       this.commonCoreConfig.customSegmentStorageFactory;
 

packages/p2p-media-loader-core/src/http-loader.ts

@@ -1,9 +1,13 @@
-import { CoreConfig, CoreEventMap } from "./types.js";
+import {
+  CoreConfig,
+  CoreEventMap,
+  RequestError,
+  HttpRequestErrorType,
+} from "./types.js";
 import {
   Request as SegmentRequest,
   RequestControls,
 } from "./requests/request.js";
-import { RequestError, HttpRequestErrorType } from "./types.js";
 import { EventTarget } from "./utils/event-target.js";
 
 type HttpConfig = Pick<
@@ -191,10 +195,10 @@ async function* readStream(
   }
 }
 
+const rangeHeaderRegex = /^bytes (?:(?:(\d+)|)-(?:(\d+)|)|\*)\/(?:(\d+)|\*)$/;
+
 function parseContentRangeHeader(headerValue: string) {
-  const match = headerValue
-    .trim()
-    .match(/^bytes (?:(?:(\d+)|)-(?:(\d+)|)|\*)\/(?:(\d+)|\*)$/);
+  const match = rangeHeaderRegex.exec(headerValue.trim());
   if (!match) return;
 
   const [, from, to, total] = match;