Fix: dev server & pnpm scripts improved (#342)

* fix-dev-server&pnpm-clean-improved * clean scripts * Make pnpm calls consistent across projects * Fix json syntax * Refactor linter and type check configuration --------- Co-authored-by: Andriy Lysnevych <[email protected]>
Novage · Mar 1, 2024 · 712bcee · 712bcee
1 parent 7275801
commit 712bcee
Show file tree

Hide file tree

Showing 23 changed files with 886 additions and 125 deletions.
diff --git a/.eslintrc.common.cjs b/.eslintrc.common.cjs
@@ -8,12 +8,13 @@ module.exports = {
     "plugin:@typescript-eslint/recommended-type-checked",
   ],
   plugins: ["@typescript-eslint"],
-  ignorePatterns: ["/.eslintrc.cjs", "/lib", "/dist", "/vite.config.ts"],
+  ignorePatterns: ["/.eslintrc.cjs", "/lib", "/dist"],
   rules: {
     "no-console": "warn",
     "@typescript-eslint/prefer-nullish-coalescing": "error",
     curly: ["warn", "multi-line", "consistent"],
     "spaced-comment": ["warn", "always", { markers: ["/"] }],
     "no-debugger": "warn",
+    "@typescript-eslint/no-non-null-assertion": "error",
   },
 };
diff --git a/demo/.eslintrc.cjs b/demo/.eslintrc.cjs
@@ -1,18 +1,26 @@
 module.exports = {
   env: { es2020: true },
-  extends: ["../.eslintrc.common.cjs", "plugin:react-hooks/recommended"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
-    project: "tsconfig.json",
+    ecmaFeatures: {
+      jsx: true,
+    },
+    project: ["tsconfig.json", "tsconfig.node.json"],
     tsconfigRootDir: __dirname,
   },
-  plugins: ["react-refresh"],
-  rules: {
-    "react-refresh/only-export-components": "warn",
-    "@typescript-eslint/ban-ts-comment": 0,
-    "react-hooks/exhaustive-deps": 0,
-    "@typescript-eslint/no-explicit-any": 0,
+  plugins: ["react", "react-hooks", "react-refresh"],
+  extends: [
+    "../.eslintrc.common.cjs",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["public/*"],
+  settings: {
+    react: {
+      version: "detect",
+    },
   },
 };
diff --git a/demo/package.json b/demo/package.json
@@ -6,17 +6,19 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prettier": "prettier --write .",
-    "type-check": "npx tsc --noEmit"
+    "type-check": "npx tsc --noEmit",
+    "clean": "rimraf dist",
+    "clean-with-modules": "rimraf node_modules && pnpm clean"
   },
   "dependencies": {
     "dplayer": "^1.27.1",
     "mux.js": "^6.3.0",
+    "p2p-media-loader-core": "workspace:*",
     "p2p-media-loader-hlsjs": "workspace:*",
     "p2p-media-loader-shaka": "workspace:*",
-    "p2p-media-loader-core": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -25,6 +27,7 @@
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "hls.js": "^1.5.1",

diff --git a/demo/public/modules-demo/demo.js b/demo/public/modules-demo/demo.js
@@ -1,18 +1,18 @@
 import { Engine as ShakaEngine } from "p2p-media-loader-shaka";
-import { Engine as HlsEngine } from "p2p-media-loader-hls";
+import { Engine as HlsEngine } from "p2p-media-loader-hlsjs";
 
 const manifestUri = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
 
-function initApp() {
+async function initApp() {
   if (shaka.Player.isBrowserSupported()) {
     initHlsPlayer();
-    initShakaPlayer();
+    await initShakaPlayer();
   } else {
     console.error("Browser not supported!");
   }
 }
 
-async function initHlsPlayer() {
+function initHlsPlayer() {
   const engine = new HlsEngine();
 
   const player = new Hls({ ...engine.getConfig() });

diff --git a/demo/public/modules-demo/index.html b/demo/public/modules-demo/index.html
@@ -6,7 +6,7 @@
         "imports": {
           "p2p-media-loader-core": "./core/p2p-media-loader-core.es.js",
           "p2p-media-loader-shaka": "./shaka/p2p-media-loader-shaka.es.js",
-          "p2p-media-loader-hls": "./hlsjs/p2p-media-loader-hlsjs.es.js"
+          "p2p-media-loader-hlsjs": "./hlsjs/p2p-media-loader-hlsjs.es.js"
         }
       }
     </script>

diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -73,14 +73,14 @@ function App() {
   const [httpLoadedGlob, setHttpLoadedGlob] = useLocalStorageItem<number>(
     "httpLoaded",
     0,
-    (v) => v.toString(),
-    (v) => (v !== null ? +v : 0),
+    numberToStorageItem,
+    storageItemToNumber,
   );
   const [p2pLoadedGlob, setP2PLoadedGlob] = useLocalStorageItem<number>(
     "p2pLoaded",
     0,
-    (v) => v.toString(),
-    (v) => (v !== null ? +v : 0),
+    numberToStorageItem,
+    storageItemToNumber,
   );
 
   const hlsEngine = useRef<HlsJsEngine>();
@@ -108,6 +108,36 @@ function App() {
     shakaEngine.current.addEventListener("onSegmentLoaded", onSegmentLoaded);
   }
 
+  const createNewPlayer = useCallback(() => {
+    setHttpLoadedGlob(0);
+    setP2PLoadedGlob(0);
+
+    window.videoPlayer?.destroy?.();
+    hlsInstance.current?.destroy();
+    void shakaInstance.current?.destroy();
+
+    switch (playerType) {
+      case "hls-dplayer":
+        initHlsDPlayer(streamUrl);
+        break;
+      case "hlsjs":
+        initHlsJsPlayer(streamUrl);
+        break;
+      case "hls-clappr":
+        initHlsClapprPlayer(streamUrl);
+        break;
+      case "shaka-dplayer":
+        initShakaDPlayer(streamUrl);
+        break;
+      case "shaka-player":
+        initShakaPlayer(streamUrl);
+        break;
+      case "shaka-clappr":
+        initShakaClapprPlayer(streamUrl);
+        break;
+    }
+  }, [playerType, setHttpLoadedGlob, setP2PLoadedGlob, streamUrl]);
+
   useEffect(() => {
     if (!window.Hls.isSupported() || window.videoPlayer) {
       return;
@@ -121,7 +151,7 @@ function App() {
       setStreamUrl(streamUrls.hlsLive2);
     }
     createNewPlayer();
-  }, [playerType]);
+  }, [createNewPlayer]);
 
   const initHlsJsPlayer = (url: string) => {
     if (!videoRef.current || !hlsEngine.current) return;
@@ -200,13 +230,11 @@ function App() {
             const shakaPlayer = new window.shaka.Player();
             shakaPlayer.attach(video);
 
-            const onError = (error: { code: number }) => {
-              console.error("Error code", error.toString(), "object", error);
+            const onError = (error: unknown) => {
+              console.error("Shaka error", error);
             };
 
-            shakaPlayer.addEventListener("error", (event: { code: number }) => {
-              onError(event);
-            });
+            shakaPlayer.addEventListener("error", onError);
 
             engine.configureAndInitShakaPlayer(shakaPlayer);
             shakaPlayer.load(url).catch(onError);
@@ -282,36 +310,6 @@ function App() {
     setStreamUrl(streamUrl);
   };
 
-  const createNewPlayer = () => {
-    setHttpLoadedGlob(0);
-    setP2PLoadedGlob(0);
-
-    window.videoPlayer?.destroy?.();
-    hlsInstance.current?.destroy();
-    void shakaInstance.current?.destroy();
-
-    switch (playerType) {
-      case "hls-dplayer":
-        initHlsDPlayer(streamUrl);
-        break;
-      case "hlsjs":
-        initHlsJsPlayer(streamUrl);
-        break;
-      case "hls-clappr":
-        initHlsClapprPlayer(streamUrl);
-        break;
-      case "shaka-dplayer":
-        initShakaDPlayer(streamUrl);
-        break;
-      case "shaka-player":
-        initShakaPlayer(streamUrl);
-        break;
-      case "shaka-clappr":
-        initShakaClapprPlayer(streamUrl);
-        break;
-    }
-  };
-
   const loadStreamWithExistingInstance = () => {
     switch (playerType) {
       case "hls-dplayer":
@@ -434,16 +432,8 @@ function LoggersSelect() {
   const [activeLoggers, setActiveLoggers] = useLocalStorageItem<string[]>(
     "debug",
     [],
-    (list) => {
-      setTimeout(() => debug.enable(localStorage.debug as string), 0);
-      if (list.length === 0) return null;
-      return list.join(",");
-    },
-    (storageItem) => {
-      setTimeout(() => debug.enable(localStorage.debug as string), 0);
-      if (!storageItem) return [];
-      return storageItem.split(",");
-    },
+    loggersToStorageItem,
+    storageItemToLoggers,
   );
 
   const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -494,20 +484,23 @@ function useLocalStorageItem<T>(
   const [value, setValue] = useState<T>(
     storageItemToValue(localStorage[prop] as string | null) ?? initValue,
   );
-  const setValueExternal = useCallback((value: T | ((prev: T) => T)) => {
-    setValue(value);
-    if (typeof value === "function") {
-      const prev = storageItemToValue(localStorage.getItem(prop));
-      const next = (value as (prev: T) => T)(prev);
-      const result = valueToStorageItem(next);
-      if (result !== null) localStorage.setItem(prop, result);
-      else localStorage.removeItem(prop);
-    } else {
-      const result = valueToStorageItem(value);
-      if (result !== null) localStorage.setItem(prop, result);
-      else localStorage.removeItem(prop);
-    }
-  }, []);
+  const setValueExternal = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      setValue(value);
+      if (typeof value === "function") {
+        const prev = storageItemToValue(localStorage.getItem(prop));
+        const next = (value as (prev: T) => T)(prev);
+        const result = valueToStorageItem(next);
+        if (result !== null) localStorage.setItem(prop, result);
+        else localStorage.removeItem(prop);
+      } else {
+        const result = valueToStorageItem(value);
+        if (result !== null) localStorage.setItem(prop, result);
+        else localStorage.removeItem(prop);
+      }
+    },
+    [prop, storageItemToValue, valueToStorageItem],
+  );
 
   useEffect(() => {
     const eventHandler = (event: StorageEvent) => {
@@ -519,7 +512,7 @@ function useLocalStorageItem<T>(
     return () => {
       window.removeEventListener("storage", eventHandler);
     };
-  }, []);
+  }, [prop, storageItemToValue]);
 
   return [value, setValueExternal];
 }
@@ -534,3 +527,18 @@ const loggers = [
   "core:request-secondary",
   "core:segment-memory-storage",
 ] as const;
+
+const numberToStorageItem = (v: number) => v.toString();
+const storageItemToNumber = (v: string | null) => (v !== null ? +v : 0);
+
+const loggersToStorageItem = (list: string[]) => {
+  setTimeout(() => debug.enable(localStorage.debug as string), 0);
+  if (list.length === 0) return null;
+  return list.join(",");
+};
+
+const storageItemToLoggers = (storageItem: string | null) => {
+  setTimeout(() => debug.enable(localStorage.debug as string), 0);
+  if (!storageItem) return [];
+  return storageItem.split(",");
+};
diff --git a/demo/src/global.d.ts b/demo/src/global.d.ts
@@ -1,11 +1,9 @@
 declare global {
   interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Clappr: any;
-    LevelSelector: any;
-    DashShakaPlayback: any;
-    shaka: any;
-    muxjs: any;
-    Hls: any;
+    LevelSelector: unknown;
+    DashShakaPlayback: unknown;
   }
 }
 

diff --git a/demo/tsconfig.node.json b/demo/tsconfig.node.json
@@ -1,10 +1,7 @@
 {
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "allowSyntheticDefaultImports": true
+    "moduleResolution": "NodeNext"
   },
   "include": ["vite.config.ts"]
 }
diff --git a/package.json b/package.json
@@ -3,16 +3,17 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "pnpm --recursive run build",
-    "build:es": "pnpm --filter './packages/**' run build:es",
-    "build:umd": "pnpm --filter './packages/**' run build:umd",
-    "build:umd-min": "pnpm --filter './packages/**' run build:umd-min",
-    "clean": "pnpm --filter './packages/**' run clean",
+    "build": "pnpm --recursive build",
+    "build:es": "pnpm --filter './packages/**' build:es",
+    "build:esm": "pnpm --filter './packages/**' build:esm",
+    "build:esm-min": "pnpm --filter './packages/**' build:esm-min",
+    "clean": "pnpm --recursive clean",
+    "clean-with-modules": "pnpm --recursive clean-with-modules",
     "pack-packages": "pnpm --filter './packages/**' exec -- pnpm pack",
-    "lint": "pnpm --recursive run lint",
-    "prettier": "pnpm --recursive run prettier",
-    "type-check": "pnpm --recursive run type-check",
-    "dev": "pnpm --filter './demo' run dev"
+    "lint": "pnpm --recursive lint",
+    "prettier": "pnpm --recursive prettier",
+    "type-check": "pnpm --recursive type-check",
+    "dev": "pnpm --filter './demo' dev"
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",

diff --git a/packages/p2p-media-loader-core/.eslintrc.cjs b/packages/p2p-media-loader-core/.eslintrc.cjs
@@ -4,7 +4,7 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: "tsconfig.json",
+    project: ["tsconfig.json", "tsconfig.node.json"],
     ecmaVersion: "latest",
     sourceType: "module",
   },

diff --git a/packages/p2p-media-loader-core/package.json b/packages/p2p-media-loader-core/package.json
@@ -16,14 +16,15 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "pnpm run build:es && pnpm run build:esm && pnpm run build:esm-min",
+    "build": "pnpm build:es && pnpm build:esm && pnpm build:esm-min",
     "build:esm": "vite build --mode esm",
     "build:esm-min": "vite build --mode esm-min",
     "build:es": "tsc",
     "preview": "vite preview",
     "prettier": "prettier --write .",
-    "lint": "eslint . --ext .ts",
-    "clean": "rimraf lib dist build",
+    "lint": "eslint . --ext .ts --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"
   },
   "dependencies": {