♻️ JSDocで型を付けた

takker99 · Feb 22, 2022 · 96004a1 · 96004a1
1 parent 7c07e60
commit 96004a1
Show file tree

Hide file tree

Showing 15 changed files with 553 additions and 442 deletions.
diff --git a/client/background.js b/client/background.js
@@ -1,108 +1,101 @@
-// background
+import browser from "webextension-polyfill";
 
-const isChrome = () => {
-  return /Chrome/.test(navigator.userAgent)
-}
+browser.runtime.onMessage.addListener(
+    (
+        /** @type {{ command: "enable-daiiz-script" | "get-project-name"|"get-clipboard-page"|"fetch-page-title"; func_project_pairs: Record<string,string>; func_names: any; rawText: any; }} */ request,
+        /** @type {any} */ _sender,
+        /** @type {{ (arg0: {}): void; (arg0: any): void; (arg0: any): void; }} */ sendResponse,
+    ) => {
+        const cmd = request.command;
 
-window.app = isChrome() ? chrome : browser
+        // 外部サイトで発動する機能を有効にする
+        if (cmd === "enable-daiiz-script") {
+            const funcProjectPairs = request.func_project_pairs;
 
-window.app.runtime.onMessage.addListener(function (request, sender, sendResponse) {
-  var cmd = request.command;
+            const funcNames = Object.keys(funcProjectPairs);
+            for (const funcName of funcNames) {
+                const projectName = funcProjectPairs[funcName];
 
-  // 外部サイトで発動する機能を有効にする
-  if (cmd === 'enable-daiiz-script') {
-    var funcProjectPairs = request.func_project_pairs;
+                if (!funcName || funcName.length === 0) {
+                    return;
+                }
+                if (!projectName || projectName.length === 0) {
+                    localStorage.removeItem(funcName);
+                } else if (projectName.length > 0) {
+                    localStorage[funcName] = projectName;
+                }
+            }
+            return;
+        }
 
-    var funcNames = Object.keys(funcProjectPairs);
-    for (var i = 0; i < funcNames.length; i++) {
-      var funcName = funcNames[i];
-      var projectName = funcProjectPairs[funcName];
+        // 設定された値を返す
+        if (cmd === "get-project-name") {
+            const funcNames = request.func_names;
+            /** @type {Record<string, string>} */
+            const projectNames = {};
+            for (const funcName of funcNames) {
+                if (localStorage[funcName]) {
+                    projectNames[funcName] = localStorage[funcName];
+                }
+            }
+            sendResponse(projectNames);
+            return;
+        }
 
-      if (!funcName || funcName.length === 0) return;
-      if (!projectName || projectName.length === 0) {
-        localStorage.removeItem(funcName);
-      }else if (projectName.length > 0) {
-        localStorage[funcName] = projectName;
-      }
-    }
-    return;
-  }
-
-  // 設定された値を返す
-  if (cmd === 'get-project-name') {
-    var funcNames = request.func_names;
-    var projectNames = {};
-    for (var i = 0; i < funcNames.length; i++) {
-      var funcName = funcNames[i];
-      if (localStorage[funcName]) {
-        projectNames[funcName] = localStorage[funcName];
-      }
-    }
-    sendResponse(projectNames);
-    return;
-  }
+        // Clipboardに保持されたURLのページタイトルを返却する
+        if (cmd === "get-clipboard-page") {
+            const bg = browser.extension.getBackgroundPage();
+            /** @type {HTMLTextAreaElement | null} */
+            const textarea = document.querySelector("#daiiz-ctrlv");
+            if (!textarea) return;
+            textarea.value = "";
+            textarea.focus();
+            bg.document.execCommand("paste");
+            resopondWebpageTitleOrRawText(textarea.value, sendResponse);
+        }
 
-  // Clipboardに保持されたURLのページタイトルを返却する
-  if (cmd === 'get-clipboard-page') {
-    const bg = window.app.extension.getBackgroundPage()
-    const textarea = document.querySelector('#daiiz-ctrlv')
-    textarea.value = ''
-    textarea.focus()
-    bg.document.execCommand('paste')
-    resopondWebpageTitleOrRawText(textarea.value, sendResponse)
-  }
+        // URLのページタイトルを返却する
+        if (cmd === "fetch-page-title") {
+            const text = request.rawText;
+            resopondWebpageTitleOrRawText(text, sendResponse);
+        }
+    },
+);
 
-  // URLのページタイトルを返却する
-  if (cmd === 'fetch-page-title') {
-    const text = request.rawText
-    resopondWebpageTitleOrRawText(text, sendResponse)
-  }
-})
-
-const resopondWebpageTitleOrRawText = (text, sendResponse) => {
-  if (text.match(/\n/)) return sendResponse(text)
-  if (text.match(/^https?:\/\/scrapbox\.io\//)) return sendResponse(text)
-  if (text.match(/gyazo\.com\//)) return sendResponse(text)
-  if (text.match(/www\.youtube\.com\//)) return sendResponse(text)
-  if (text.match(/www\.google/) && text.match(/\/maps\//)) return sendResponse(text)
-  if (text.match(/^https?:\/\//)) {
-    fetchPage(text)
-    return
-  }
-  sendResponse(text)
-}
+const resopondWebpageTitleOrRawText = (/** @type {string} */ text, /** @type {(arg0: any) => void} */ sendResponse) => {
+    if (text.match(/\n/)) return sendResponse(text);
+    if (text.match(/^https?:\/\/scrapbox\.io\//)) return sendResponse(text);
+    if (text.match(/gyazo\.com\//)) return sendResponse(text);
+    if (text.match(/www\.youtube\.com\//)) return sendResponse(text);
+    if (text.match(/www\.google/) && text.match(/\/maps\//)) return sendResponse(text);
+    if (text.match(/^https?:\/\//)) {
+        fetchPage(text);
+        return;
+    }
+    sendResponse(text);
+};
 
-const fetchPage = async (url) => {
-  const res = await fetch(url, {
-    credentials: 'include'
-  })
-  const body = await res.text()
-  const parser = new DOMParser()
-  const doc = parser.parseFromString(body, 'text/html')
-  console.log(doc.title)
+const fetchPage = async (/** @type {RequestInfo} */ url) => {
+    const res = await fetch(url, {
+        credentials: "include",
+    });
+    const body = await res.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(body, "text/html");
+    console.log(doc.title);
 
-  let externalLink = url
-  const title = doc.title || null
-  if (title) externalLink = `[${url} ${title}]`
+    let externalLink = url;
+    const title = doc.title || null;
+    if (title) externalLink = `[${url} ${title}]`;
 
-  console.log(externalLink)
+    console.log(externalLink);
 
-  if (isChrome()) {
-    window.app.tabs.getSelected(null, tab => {
-      window.app.tabs.sendMessage(tab.id, {
-        command: 're:get-clipboard-page',
-        externalLink
-      })
-    })
-  } else {
-    // Firefox extension
-    const tab = await window.app.tabs.query({
-      currentWindow: true,
-      active: true
-    })
-    window.app.tabs.sendMessage(tab[0].id, {
-      command: 're:get-clipboard-page',
-      externalLink
-    })
-  }
-}
+    const tab = await browser.tabs.query({
+        currentWindow: true,
+        active: true,
+    });
+    browser.tabs.sendMessage(tab[0].id ?? 0, {
+        command: "re:get-clipboard-page",
+        externalLink,
+    });
+};
diff --git a/client/gyazo-com.js b/client/gyazo-com.js
@@ -1,8 +1,7 @@
-window.app = (/Chrome/.test(navigator.userAgent)) ? chrome : browser
-
-$(function () {
-  window.daiizGyazo.manage.install()
+// @ts-ignore TSに移したときに型定義書く
+window.daiizGyazo.manage.install()
+    // @ts-ignore TSに移したときに型定義書く
     .then(projectName => {
-      window.daiizGyazo.textBubble.enable(projectName)
-    })
-})
+        // @ts-ignore TSに移したときに型定義書く
+        window.daiizGyazo.textBubble.enable(projectName);
+    });
diff --git a/client/option.js b/client/option.js
@@ -1,4 +1,5 @@
-document.querySelector('#btn-main-project').addEventListener('click', function () {
-  var p = document.querySelector('#main-project').value;
-  if (p && p.length > 0) localStorage['main-project'] = p;
+document.querySelector("#btn-main-project")?.addEventListener?.("click", () => {
+    // @ts-ignore TSに移したときに型定義書く
+    const p = document.querySelector("#main-project").value;
+    if (p && p.length > 0) localStorage["main-project"] = p;
 }, false);
diff --git a/client/scrapbox-io.js b/client/scrapbox-io.js
@@ -1,9 +1,6 @@
-window.app = (/Chrome/.test(navigator.userAgent)) ? chrome : browser
-
-$(function () {
-  window.daiizScrapbox.manage.install()
-  window.daiizScrapbox.iconButton.enable()
-  window.daiizScrapbox.relCardsBubble.enable()
-  window.daiizScrapbox.textBubble.enable()
-  window.daiizScrapbox.pasteWebpageUrl.enable()
-})
+// @ts-nocheck TSに移したときに型定義を書く
+window.daiizScrapbox.manage.install();
+window.daiizScrapbox.iconButton.enable();
+window.daiizScrapbox.relCardsBubble.enable();
+window.daiizScrapbox.textBubble.enable();
+window.daiizScrapbox.pasteWebpageUrl.enable();
diff --git a/package.json b/package.json
@@ -6,14 +6,10 @@
   "author": "daiiz <da.iz.mg@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "build": "run-s build:**",
+    "build": "esbuild --bundle --minify --format=iife ./src/index.js --outfile=./browser/build/bundle.js",
     "fmt": "dprint fmt",
     "lint": "denolint",
-    "build:babel": "babel client/ --out-dir browser/build/ --minified --source-maps false",
-    "build:browserify": "browserify -t [ babelify ] src/index.js -o browser/build/bundle.js -v",
-    "watch": "run-p watch:**",
-    "watch:babel": "npm run build:babel -- --watch",
-    "watch:browserify": "watchify -t [ babelify ] src/index.js -o browser/build/bundle.js -v",
+    "watch": "esbuild --bundle --minify --format=iife ./src/index.js --watch --outfile=./browser/build/bundle.js",
     "zip": "run-s zip:**",
     "zip:chrome": "zip -r -FS ./zip/chrome.zip browser/",
     "zip:firefox": "sh zip-firefox.sh",
@@ -22,7 +18,13 @@
   },
   "devDependencies": {
     "@node-rs/deno-lint": "^1.13.0",
+    "@types/jquery": "^3.5.13",
+    "@types/webextension-polyfill": "^0.8.2",
     "dprint": "^0.22.2",
     "esbuild": "^0.14.23"
+  },
+  "dependencies": {
+    "jquery": "^3.6.0",
+    "webextension-polyfill": "^0.8.0"
   }
 }
diff --git a/src/browser.js b/src/browser.js
@@ -1,7 +1,7 @@
-exports.isChrome = () => {
+export function isChrome() {
     return /Chrome/.test(navigator.userAgent);
-};
+}
 
-exports.isFirefox = () => {
+export function isFirefox() {
     return /Firefox/.test(navigator.userAgent);
-};
+}
diff --git a/src/gyazo-com/manage.js b/src/gyazo-com/manage.js
@@ -2,11 +2,11 @@
 let ROOT_PROJECT_NAME = null;
 const DAIIZ_GYAZO_TEXT_BUBBLE = "daiiz-gyazo-text-bubble";
 
-exports.detectProject = function() {
+export function detectProject() {
     return ROOT_PROJECT_NAME;
-};
+}
 
-exports.install = () => {
+export function install() {
     return new Promise(resolve => {
         window.app.runtime.sendMessage({
             command: "get-project-name",
@@ -20,4 +20,4 @@ exports.install = () => {
             }
         });
     });
-};
+}