feat(toy): add userAgent parser

KeJunMao · Feb 28, 2022 · 1843515 · 1843515
1 parent c0509d5
commit 1843515
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 0 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -53,6 +53,9 @@
   "view.devtoys.others.cron.tooltip": "Simulate CRON Expression",
   "view.devtoys.others.label": "Others",
   "view.devtoys.others.tooltip": "All Other Tools",
+  "view.devtoys.others.userAgent.label": "UserAgent",
+  "view.devtoys.others.userAgent.panel.title": "User-Agent Parser",
+  "view.devtoys.others.userAgent.tooltip": "Parser Your User-Agent",
   "view.devtoys.text.label": "Text",
   "view.devtoys.text.regexTester.label": "Regex Tester",
   "view.devtoys.text.regexTester.panel.title": "Regex Tester",

diff --git a/locales/zh-CN.json b/locales/zh-CN.json
@@ -53,6 +53,9 @@
   "view.devtoys.others.cron.tooltip": "模拟 CRON 表达式",
   "view.devtoys.others.label": "其他",
   "view.devtoys.others.tooltip": "全部其他工具",
+  "view.devtoys.others.userAgent.label": "UserAgent",
+  "view.devtoys.others.userAgent.panel.title": "UserAgent解析",
+  "view.devtoys.others.userAgent.tooltip": "解析你的UserAgent",
   "view.devtoys.text.label": "文本",
   "view.devtoys.text.regexTester.label": "正则表达式测试",
   "view.devtoys.text.regexTester.panel.title": "正则表达式测试",

diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
     "@types/qrcode": "^1.4.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@types/ua-parser-js": "^0.7.36",
     "@types/vscode": "^1.64.0",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^5.9.1",
@@ -154,6 +155,7 @@
     "svelte-preprocess": "^4.0.0",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.4",
+    "ua-parser-js": "^1.0.2",
     "uuid": "^8.3.2",
     "vite": "^2.8.4",
     "vue": "^3.2.29",

diff --git a/src/Panel/UserAgent.ts b/src/Panel/UserAgent.ts
@@ -0,0 +1,26 @@
+import { PanelType } from "../shared";
+import { ToolPanel } from "../common/ToolPanel";
+import * as vscode from "vscode";
+import i18n from "../i18n";
+
+export class UserAgent extends ToolPanel<UserAgent> {
+  constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
+    super(panel, extensionUri, PanelType.userAgent, "react");
+  }
+
+  public static createOrShow(extensionUri: vscode.Uri) {
+    super.createOrShow(
+      extensionUri,
+      PanelType.userAgent,
+      i18n.t("view.devtoys.others.userAgent.panel.title"),
+      UserAgent
+    );
+  }
+
+  public dispose(): void {
+    super.dispose();
+    UserAgent.currentPanel = undefined;
+  }
+}
+
+ToolPanel.allPanel.add(UserAgent);
diff --git a/src/commands/showTool.ts b/src/commands/showTool.ts
@@ -12,6 +12,7 @@ import { Qrcode } from "../Panel/Qrcode";
 import { RegexTester } from "../Panel/RegexTester";
 import { Timestamp } from "../Panel/Timestamp";
 import { Url } from "../Panel/Url";
+import { UserAgent } from "../Panel/UserAgent";
 import { UUID } from "../Panel/UUID";
 import { PanelType } from "../shared";
 
@@ -59,5 +60,8 @@ export default (context: vscode.ExtensionContext) => (node?: DevToysNode) => {
     case PanelType.cron:
       Cron.createOrShow(context.extensionUri);
       break;
+    case PanelType.userAgent:
+      UserAgent.createOrShow(context.extensionUri);
+      break;
   }
 };
diff --git a/src/explorer/explorerNodeManager.ts b/src/explorer/explorerNodeManager.ts
@@ -90,6 +90,11 @@ class ExplorerNodeManager implements Disposable {
         tooltip: i18n.t("view.devtoys.others.cron.tooltip"),
         panel: PanelType.cron,
       },
+      {
+        label: i18n.t("view.devtoys.others.userAgent.label"),
+        tooltip: i18n.t("view.devtoys.others.userAgent.tooltip"),
+        panel: PanelType.userAgent,
+      },
     ];
 
     this.explorerNodeMap.set(

diff --git a/src/shared.ts b/src/shared.ts
@@ -15,6 +15,7 @@ export enum PanelType {
   qrcode = "qrcode",
   timestamp = "timestamp",
   cron = "cron",
+  userAgent = "userAgent",
 }
 
 export enum Category {

diff --git a/webview/components/react/UserAgent/i18n.ts b/webview/components/react/UserAgent/i18n.ts
@@ -0,0 +1,18 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import en from "./locales/en.json";
+import zh_CN from "./locales/zh-CN.json";
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: en,
+    },
+    "zh-cn": {
+      translation: zh_CN,
+    },
+  },
+  lng: window.displayLanguage,
+  lowerCaseLng: true,
+  fallbackLng: "en",
+});
diff --git a/webview/components/react/UserAgent/index.tsx b/webview/components/react/UserAgent/index.tsx
@@ -0,0 +1,73 @@
+import { useTranslation } from "react-i18next";
+import {
+  VSCodeTextField,
+  VSCodeTextArea,
+} from "@vscode/webview-ui-toolkit/react";
+import UAParser from "ua-parser-js";
+import { useEffect, useState } from "react";
+const uaParser = new UAParser();
+export default () => {
+  const { t } = useTranslation();
+  const [ua, setUa] = useState(window.navigator.userAgent);
+  const [uaResult, setUaResult] = useState<UAParser.IResult>();
+  const formatUA = (result: UAParser.IResult | undefined) => {
+    if (!result) {
+      return "";
+    }
+    let text = result.ua + "\n";
+    if (result.browser.name) {
+      text += `\n- ${t("tool.userAgent.result.browser")}: ${
+        result.browser.name
+      } ${result.browser.version}`;
+    }
+    if (result.device.type) {
+      text += `\n- ${t("tool.userAgent.result.device")}: ${
+        result.device.type
+      } / ${result.device.vendor} / ${result.device.model}`;
+    }
+    if (result.os.name) {
+      text += `\n- ${t("tool.userAgent.result.os")}: ${result.os.name} / ${
+        result.os.version
+      }`;
+    }
+    if (result.engine.name) {
+      text += `\n- ${t("tool.userAgent.result.engine")}: ${
+        result.engine.name
+      } / ${result.engine.version}`;
+    }
+    if (result.cpu.architecture) {
+      text += `\n- ${t("tool.userAgent.result.cpu")}: ${
+        result.cpu.architecture
+      }`;
+    }
+    return text;
+  };
+  useEffect(() => {
+    uaParser.setUA(ua);
+    setUaResult(uaParser.getResult());
+  }, [ua]);
+  // const [uaParser, setUaParser] = useState<UAParser>();
+  return (
+    <div>
+      <h1>{t("tool.userAgent.title")}</h1>
+      <VSCodeTextField
+        value={ua}
+        onInput={({ target }) => {
+          setUa((target as HTMLInputElement).value);
+        }}
+        style={{ width: "100%" }}
+      >
+        {t("tool.userAgent.uaTextField.label")}
+      </VSCodeTextField>
+      <VSCodeTextArea
+        style={{ width: "100%" }}
+        value={formatUA(uaResult)}
+        cols={20}
+        rows={8}
+        readOnly
+      >
+        {t("tool.userAgent.resultTextArea.label")}
+      </VSCodeTextArea>
+    </div>
+  );
+};
diff --git a/webview/components/react/UserAgent/locales/en.json b/webview/components/react/UserAgent/locales/en.json
@@ -0,0 +1,10 @@
+{
+  "tool.userAgent.result.browser": "Browser",
+  "tool.userAgent.result.cpu": "CPU",
+  "tool.userAgent.result.device": "Device",
+  "tool.userAgent.result.engine": "Engine",
+  "tool.userAgent.result.os": "OS",
+  "tool.userAgent.resultTextArea.label": "Result",
+  "tool.userAgent.title": "UserAgent Parser",
+  "tool.userAgent.uaTextField.label": "UA"
+}
diff --git a/webview/components/react/UserAgent/locales/zh-CN.json b/webview/components/react/UserAgent/locales/zh-CN.json
@@ -0,0 +1,10 @@
+{
+  "tool.userAgent.result.browser": "浏览器",
+  "tool.userAgent.result.cpu": "架构",
+  "tool.userAgent.result.device": "设备",
+  "tool.userAgent.result.engine": "内核",
+  "tool.userAgent.result.os": "操作系统",
+  "tool.userAgent.resultTextArea.label": "解析结果",
+  "tool.userAgent.title": "UserAgent 解析",
+  "tool.userAgent.uaTextField.label": "UA"
+}
diff --git a/webview/pages/userAgent.tsx b/webview/pages/userAgent.tsx
@@ -0,0 +1,11 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import "../components/react/UserAgent/i18n";
+import App from "../components/react/UserAgent/index";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App></App>
+  </React.StrictMode>,
+  document.getElementById("root")
+);
diff --git a/yarn.lock b/yarn.lock
@@ -1026,6 +1026,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/ua-parser-js@^0.7.36":
+  version "0.7.36"
+  resolved "https://registry.npmmirror.com/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz#9bd0b47f26b5a3151be21ba4ce9f5fa457c5f190"
+  integrity sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==
+
 "@types/vscode@^1.64.0":
   version "1.64.0"
   resolved "https://registry.npmmirror.com/@types/vscode/-/vscode-1.64.0.tgz#bfd82c8d92dc7824c1be084be1ab46ce20d7fb55"
@@ -8148,6 +8153,11 @@ typescript@*, typescript@^4.4.3, typescript@^4.5.4:
   resolved "https://registry.npmmirror.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
   integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
 
+ua-parser-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/ua-parser-js/-/ua-parser-js-1.0.2.tgz#e2976c34dbfb30b15d2c300b2a53eac87c57a775"
+  integrity sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==
+
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"