Merge pull request #36 from rutan/upgrade-modules

Upgrade modules

.babelrc

@@ -9,6 +9,5 @@
       }
     ],
     "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  ]
 }

.deployment-zip.ts

@@ -0,0 +1,10 @@
+import { resolve } from 'node:path';
+import { defineConfig } from '@rutan/deployment-zip';
+import { name, version } from './app/manifest.json';
+
+export default defineConfig({
+  ignores: ['.DS_Store', 'thumb.db'],
+  zip: {
+    output: resolve(__dirname, '_dist', `${name}_${version}.zip`),
+  },
+});

.github/workflows/lint.yml

@@ -5,12 +5,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version-file: ./.node-version
       - name: Install packages
         run: yarn install
       - name: Run eslint
         run: yarn lint
+      - name: Run build
+        run: yarn build

.husky/pre-commit

@@ -0,0 +1 @@
+yarn run pre-commit

.node-version

@@ -0,0 +1 @@
+20.16.0

app/manifest.json

@@ -26,7 +26,11 @@
   "web_accessible_resources": [
     {
       "resources": ["js/inject.js"],
-      "matches": ["https://www.nicovideo.jp/*", "https://live.nicovideo.jp/*", "https://live2.nicovideo.jp/*"]
+      "matches": [
+        "https://www.nicovideo.jp/*",
+        "https://live.nicovideo.jp/*",
+        "https://live2.nicovideo.jp/*"
+      ]
     }
   ]
 }

biome.jsonc

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "files": {
+    "ignore": ["_dist/**/*", "app/js/**/*"]
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": {
+        "noForEach": "off"
+      }
+    }
+  }
+}

package.json

@@ -1,4 +1,5 @@
 {
+  "type": "module",
   "name": "nicopinp",
   "version": "1.6.0",
   "main": "index.js",
@@ -12,53 +13,33 @@
     "clean": "rimraf './app/js/*'",
     "lint": "run-s lint:*",
     "lint:tsc": "tsc --noEmit",
-    "lint:eslint": "eslint ./src",
-    "lint-fix": "eslint --fix ./src",
-    "format": "prettier --write src/**/*.js src/**/*.ts",
+    "lint:biome": "yarn biome check .",
+    "format": "yarn biome check --write .",
     "zip": "run-s format build zip:*",
     "zip:mkdir": "mkdirp _dist",
-    "zip:zipping": "deployment-zip ./app"
+    "zip:zipping": "deployment-zip -c .deployment-zip.ts ./app",
+    "prepare": "husky",
+    "pre-commit": "run-s lint"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,ts}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "app/manifest.json": [
-      "prettier --write"
-    ]
-  },
-  "browserslist": [
-    "last 2 Chrome versions"
-  ],
+  "browserslist": ["last 2 Chrome versions"],
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-typescript": "^7.12.7",
-    "@rutan/deployment-zip": "^0.1.0",
-    "@types/chrome": "^0.0.188",
-    "@typescript-eslint/eslint-plugin": "^4.11.1",
-    "@typescript-eslint/parser": "^4.11.1",
-    "babel-loader": "^8.2.2",
-    "eslint": "^7.16.0",
-    "eslint-config-prettier": "^7.1.0",
-    "husky": "^4.3.6",
-    "lint-staged": "^10.5.3",
-    "mkdirp": "^1.0.4",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-typescript": "^7.24.7",
+    "@biomejs/biome": "1.8.3",
+    "@rutan/deployment-zip": "^0.5.0",
+    "@types/chrome": "^0.0.269",
+    "babel-loader": "^9.1.3",
+    "husky": "^9.1.4",
+    "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.1.3",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.3.0"
+    "rimraf": "^6.0.1",
+    "typescript": "^5.5.4",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "core-js": "^3.8.1"
-  }
+    "core-js": "^3.38.0"
+  },
+  "packageManager": "[email protected]"
 }

src/constants.ts

@@ -6,7 +6,8 @@ export const EXTENSION_LABEL = '[非公式] PinP';
 // ニコニコ動画（eR）
 export const NICO_VIDEO_VIDEO_TAG_SELECTOR = '#MainVideoPlayer video';
 // 帰ってきたニコニコ動画
-export const NICO_VIDEO_KAETTEKITA_VIDEO_TAG_SELECTOR = '[data-name="content"] video';
+export const NICO_VIDEO_KAETTEKITA_VIDEO_TAG_SELECTOR =
+  '[data-name="content"] video';
 // ニコニコ生放送
 export const NICO_LIVE_VIDEO_TAG_SELECTOR = '[class^=___video-layer___] video';
 
@@ -22,9 +23,11 @@ export const VIDEO_TAG_SELECTOR = [
 // ニコニコ動画（eR）
 export const NICO_VIDEO_COMMENT_CANVAS_TAG_SELECTOR = '.CommentRenderer canvas';
 // 帰ってきたニコニコ動画
-export const NICO_VIDEO_KAETTEKITA_COMMENT_CANVAS_TAG_SELECTOR = '[data-name="comment"] canvas';
+export const NICO_VIDEO_KAETTEKITA_COMMENT_CANVAS_TAG_SELECTOR =
+  '[data-name="comment"] canvas';
 // ニコニコ生放送
-export const NICO_LIVE_COMMENT_CANVAS_TAG_SELECTOR = '[class^=___comment-layer___] canvas';
+export const NICO_LIVE_COMMENT_CANVAS_TAG_SELECTOR =
+  '[class^=___comment-layer___] canvas';
 
 export const COMMENT_CANVAS_TAG_SELECTOR = [
   NICO_VIDEO_COMMENT_CANVAS_TAG_SELECTOR,
@@ -36,12 +39,14 @@ export const COMMENT_CANVAS_TAG_SELECTOR = [
  * コピー元とするボタンのセレクタ
  */
 // ニコニコ動画（eR）
-export const NICO_VIDEO_TARGET_BUTTON_SELECTOR = '.ControllerContainer .EnableFullScreenButton';
+export const NICO_VIDEO_TARGET_BUTTON_SELECTOR =
+  '.ControllerContainer .EnableFullScreenButton';
 // 帰ってきたニコニコ動画
 export const NICO_VIDEO_KAETTEKITA_TARGET_BUTTON_SELECTOR =
   'button[aria-label="フルスクリーン表示"][class="cursor_pointer"]';
 // ニコニコ生放送
-export const NICO_LIVE_TARGET_BUTTON_SELECTOR = '[class^=___addon-controller___] [class^=___fullscreen-button___]';
+export const NICO_LIVE_TARGET_BUTTON_SELECTOR =
+  '[class^=___addon-controller___] [class^=___fullscreen-button___]';
 
 export const TARGET_BUTTON_SELECTOR = [
   NICO_VIDEO_TARGET_BUTTON_SELECTOR,
@@ -66,7 +71,8 @@ export const SUPPORTER_VIEW_SELECTOR = [
  * 提供画面の Canvas のセレクタ（ニコニコ動画のみ）
  */
 // ニコニコ動画（eR）
-export const NICO_VIDEO_SUPPORTER_VIEW_CANVAS_SELECTOR = '#SupporterView-canvas';
+export const NICO_VIDEO_SUPPORTER_VIEW_CANVAS_SELECTOR =
+  '#SupporterView-canvas';
 // 帰ってきたニコニコ動画（2024/08/05時点では存在しない？）
 // export const NICO_VIDEO_KAETTEKITA_SUPPORTER_VIEW_CANVAS_SELECTOR = 'TODO: change me';
 
@@ -80,4 +86,6 @@ export const SUPPORTER_VIEW_CANVAS_SELECTOR = [
  */
 export const NICO_LIVE_AKASHIC_CANVAS_SELECTOR = '#akashic-gameview canvas';
 
-export const AKASHIC_CANVAS_SELECTOR = [NICO_LIVE_AKASHIC_CANVAS_SELECTOR].join(',');
+export const AKASHIC_CANVAS_SELECTOR = [NICO_LIVE_AKASHIC_CANVAS_SELECTOR].join(
+  ',',
+);

src/contentScript.ts

@@ -1,4 +1,8 @@
-import { EXTENSION_LABEL, TARGET_BUTTON_SELECTOR, VIDEO_TAG_SELECTOR } from './constants';
+import {
+  EXTENSION_LABEL,
+  TARGET_BUTTON_SELECTOR,
+  VIDEO_TAG_SELECTOR,
+} from './constants';
 import { copyButton } from './functions/copyButton';
 import { initPinP, startPinP } from './functions/pinp';
 import PictureInPictureIcon from './svg/pinpIcon';
@@ -16,7 +20,9 @@ import PictureInPictureIcon from './svg/pinpIcon';
     let isSetupVideo = false;
 
     const func = () => {
-      const targetButtons = document.querySelectorAll<HTMLElement>(TARGET_BUTTON_SELECTOR);
+      const targetButtons = document.querySelectorAll<HTMLElement>(
+        TARGET_BUTTON_SELECTOR,
+      );
       if (targetButtons.length === 0) {
         ++count;
 
@@ -27,7 +33,9 @@ import PictureInPictureIcon from './svg/pinpIcon';
         }
 
         // それ以上だったらページ構造が変わったと判断して終了
-        console.log('[nicopip] ページ内からボタンを検知できなかったため終了します');
+        console.log(
+          '[nicopip] ページ内からボタンを検知できなかったため終了します',
+        );
         return;
       }
 
@@ -50,9 +58,12 @@ import PictureInPictureIcon from './svg/pinpIcon';
       const observer = new MutationObserver((mutationsList) => {
         for (const mutation of mutationsList) {
           if (mutation.type !== 'childList') return;
+
           mutation.removedNodes.forEach((node) => {
             if (!node.contains(newButton)) return;
-            console.log('[nicopip] ボタンが削除されたため、再度ボタンを作成します');
+            console.log(
+              '[nicopip] ボタンが削除されたため、再度ボタンを作成します',
+            );
             observer.disconnect();
             window.setTimeout(func, 100);
             return;
@@ -63,7 +74,8 @@ import PictureInPictureIcon from './svg/pinpIcon';
 
       // videoのPinP操作からstartPinPを呼び出すようにする
       if (!isSetupVideo) {
-        const video = document.querySelector<HTMLVideoElement>(VIDEO_TAG_SELECTOR);
+        const video =
+          document.querySelector<HTMLVideoElement>(VIDEO_TAG_SELECTOR);
         if (video) {
           isSetupVideo = true;
           video.disablePictureInPicture = false;

src/functions/copyButton.ts

@@ -5,7 +5,12 @@ interface CopyButtonParameter {
   onClick: () => void;
 }
 
-export function copyButton({ srcButton, title, icon, onClick }: CopyButtonParameter): HTMLElement {
+export function copyButton({
+  srcButton,
+  title,
+  icon,
+  onClick,
+}: CopyButtonParameter): HTMLElement {
   const cloneButton = srcButton.cloneNode(true) as HTMLElement;
 
   cloneButton.setAttribute('title', title);
@@ -22,12 +27,13 @@ export function copyButton({ srcButton, title, icon, onClick }: CopyButtonParame
 
   const iconImage = cloneButton.querySelector('svg, img');
 
-  if (iconImage && iconImage.parentNode) {
+  if (iconImage?.parentNode) {
     const parentNode = iconImage.parentNode as HTMLElement;
     parentNode.innerHTML = icon;
 
     const oldClassName = iconImage.getAttribute('class');
-    if (oldClassName) parentNode.children[0].setAttribute('class', oldClassName);
+    if (oldClassName)
+      parentNode.children[0].setAttribute('class', oldClassName);
   }
 
   cloneButton.addEventListener('click', () => {