Merge pull request #12 from KeJunMao/dev

KeJunMao · web-flow · commit 1340a309a89a · 2022-03-05T13:27:43.000+08:00
Added curl to code tool
diff --git a/README.md b/README.md
@@ -16,6 +16,8 @@
   </a>
 </p>
 
+[简体中文](./README_zh-CN.md) ｜ [English](./README.md)
+
 ## Demo
 
 - Base64
@@ -24,14 +26,16 @@
 - JWT
 - JSON < > YAML
 - Number Base
+- Timestamp
+- CURL To Code
 - UUID
 - Hash
 - Regex Tester
 - Color Blindness Simulator
 - Qrcode
-- Timestamp
 - CRON
-- and more!
+- UserAgent
+- and more coming!
 
 ![all tools](./docs/img/all_tool.png)
 
diff --git a/README_zh-CN.md b/README_zh-CN.md
@@ -0,0 +1,34 @@
+[简体中文](./README_zh-CN.md) ｜ [English](./README.md)
+
+## 示例
+
+- Base64
+- HTML
+- URL
+- JWT
+- JSON < > YAML
+- Number Base
+- Timestamp
+- CURL To Code
+- UUID
+- Hash
+- Regex Tester
+- Color Blindness Simulator
+- Qrcode
+- CRON
+- UserAgent
+- 更多工具即将到来
+
+![all tools](./docs/img/all_tool.png)
+
+## 功能特性
+
+### 搜索工具
+
+![search tool](./docs/img/search_tool.png)
+
+### 魔棒
+
+你可以点击魔棒工具，扩展会自动识别剪贴板内容并打开合适的工具
+
+![automatically](./docs/img/automatically.png)
diff --git a/locales/en.json b/locales/en.json
@@ -23,6 +23,9 @@
   "view.devtoys.coders.tooltip": "All Encoder/Decoder Tools",
   "view.devtoys.coders.url.label": "URL",
   "view.devtoys.coders.url.tooltip": "Encode URL or decode URL",
+  "view.devtoys.convertors.curlToCode.label": "CURL",
+  "view.devtoys.convertors.curlToCode.panel.title": "Covert Curl Commands To Code",
+  "view.devtoys.convertors.curlToCode.tooltip": "Convert curl commands to Python, JavaScript, PHP, R, Go, Rust, Elixir, Java, MATLAB, Ansible URI, Strest, Dart or JSON",
   "view.devtoys.convertors.jsonToYaml.label": "JSON < > YAML",
   "view.devtoys.convertors.jsonToYaml.panel.title": "JSON < > YAML",
   "view.devtoys.convertors.jsonToYaml.tooltip": "Convert JSON to YAML",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
@@ -23,6 +23,9 @@
   "view.devtoys.coders.tooltip": "所有编码器/解码器",
   "view.devtoys.coders.url.label": "URL",
   "view.devtoys.coders.url.tooltip": "编码 URL 或解码 URL",
+  "view.devtoys.convertors.curlToCode.label": "CURL",
+  "view.devtoys.convertors.curlToCode.panel.title": "CURL 转代码",
+  "view.devtoys.convertors.curlToCode.tooltip": "把 CURL 命令转为 Python, JavaScript, PHP, R, Go, Rust, Elixir, Java, MATLAB, Ansible URI, Strest, Dart 或者 JSON",
   "view.devtoys.convertors.jsonToYaml.label": "JSON < > YAML",
   "view.devtoys.convertors.jsonToYaml.panel.title": "JSON YAML 互转",
   "view.devtoys.convertors.jsonToYaml.tooltip": "JSON 和 YAML 互转",
diff --git a/package.json b/package.json
@@ -121,6 +121,7 @@
     "concurrently": "^7.0.0",
     "cron-parser": "^4.2.1",
     "crypto-js": "^4.1.1",
+    "curlconverter": "^3.21.0",
     "esbuild": "^0.14.22",
     "eslint": "^8.6.0",
     "esno": "^0.14.1",
diff --git a/src/Panel/CurlToCode.ts b/src/Panel/CurlToCode.ts
@@ -0,0 +1,56 @@
+import { PanelType } from "../shared";
+import { ToolPanel } from "../common/ToolPanel";
+import * as vscode from "vscode";
+import i18n from "../i18n";
+//@ts-ignore
+import * as curlconverter from "curlconverter";
+
+export class CurlToCode extends ToolPanel<CurlToCode> {
+  constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
+    super(panel, extensionUri, PanelType.curlToCode, "react");
+  }
+
+  public static createOrShow(extensionUri: vscode.Uri) {
+    super.createOrShow(
+      extensionUri,
+      PanelType.curlToCode,
+      i18n.t("view.devtoys.convertors.curlToCode.panel.title"),
+      CurlToCode
+    );
+  }
+
+  protected async _update() {
+    super._update();
+    const webview = this.panel.webview;
+    webview.onDidReceiveMessage(async (data) => {
+      switch (data.type) {
+        case "onConvert": {
+          const { language, command } = data.value;
+          let result;
+          try {
+            // @ts-ignore
+            result = curlconverter[language](command);
+          } catch (error) {
+            result = String(error);
+          }
+          webview.postMessage(result);
+          break;
+        }
+      }
+    });
+  }
+
+  public static canBeTreatedByTool(data: string): boolean | PanelType {
+    if (data.startsWith("curl ")) {
+      return PanelType.curlToCode;
+    }
+    return false;
+  }
+
+  public dispose(): void {
+    super.dispose();
+    CurlToCode.currentPanel = undefined;
+  }
+}
+
+ToolPanel.allPanel.add(CurlToCode);
diff --git a/src/commands/showTool.ts b/src/commands/showTool.ts
@@ -3,6 +3,7 @@ import { DevToysNode } from "../explorer/DevToysNode";
 import { Base64 } from "../Panel/Base64";
 import { ColorBlindnessSimulator } from "../Panel/ColorBlindnessSimulator";
 import { Cron } from "../Panel/Cron";
+import { CurlToCode } from "../Panel/CurlToCode";
 import { Hash } from "../Panel/Hash";
 import { Html } from "../Panel/Html";
 import { JsonToYaml } from "../Panel/JsonToYaml";
@@ -18,6 +19,7 @@ import { PanelType } from "../shared";
 
 export default (context: vscode.ExtensionContext) => (node?: DevToysNode) => {
   if (!node) {
+    vscode.commands.executeCommand("devtoys.searchTool");
     return;
   }
   switch (node.panel) {
@@ -63,5 +65,8 @@ export default (context: vscode.ExtensionContext) => (node?: DevToysNode) => {
     case PanelType.userAgent:
       UserAgent.createOrShow(context.extensionUri);
       break;
+    case PanelType.curlToCode:
+      CurlToCode.createOrShow(context.extensionUri);
+      break;
   }
 };
diff --git a/src/common/ToolPanel.ts b/src/common/ToolPanel.ts
@@ -7,6 +7,11 @@ export class ToolPanel<V> {
   static allPanel: Set<any> = new Set();
 
   private readonly _panel: vscode.WebviewPanel;
+
+  public get panel(): vscode.WebviewPanel {
+    return this._panel;
+  }
+
   private readonly _extensionUri: vscode.Uri;
   private _disposables: vscode.Disposable[] = [];
   private _type: PanelType;
@@ -76,7 +81,7 @@ export class ToolPanel<V> {
     return false;
   }
 
-  private async _update() {
+  protected async _update() {
     const webview = this._panel.webview;
 
     this._panel.webview.html = this._getHtmlForWebview(webview);
diff --git a/src/explorer/explorerNodeManager.ts b/src/explorer/explorerNodeManager.ts
@@ -48,6 +48,11 @@ class ExplorerNodeManager implements Disposable {
         tooltip: i18n.t("view.devtoys.convertors.timestamp.tooltip"),
         panel: PanelType.timestamp,
       },
+      {
+        label: i18n.t("view.devtoys.convertors.curlToCode.label"),
+        tooltip: i18n.t("view.devtoys.convertors.curlToCode.tooltip"),
+        panel: PanelType.curlToCode,
+      },
     ];
 
     const generators: IToolData[] = [
diff --git a/src/shared.ts b/src/shared.ts
@@ -16,6 +16,7 @@ export enum PanelType {
   timestamp = "timestamp",
   cron = "cron",
   userAgent = "userAgent",
+  curlToCode = "curlToCode",
 }
 
 export enum Category {
diff --git a/webview/components/react/CurlToCode/i18n.ts b/webview/components/react/CurlToCode/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/CurlToCode/index.tsx b/webview/components/react/CurlToCode/index.tsx
@@ -0,0 +1,133 @@
+import { useTranslation } from "react-i18next";
+import {
+  VSCodeTextArea,
+  VSCodeDropdown,
+  VSCodeOption,
+} from "@vscode/webview-ui-toolkit/react/index";
+import { useEffect, useState } from "react";
+export default () => {
+  const { t } = useTranslation();
+  const languageOptions = [
+    {
+      label: "Ansible",
+      value: "toAnsible",
+    },
+    {
+      label: "Browser",
+      value: "toBrowser",
+    },
+    {
+      label: "Dart",
+      value: "toDart",
+    },
+    {
+      label: "Elixir",
+      value: "toElixir",
+    },
+    {
+      label: "Go",
+      value: "toGo",
+    },
+    {
+      label: "Java",
+      value: "toJava",
+    },
+    {
+      label: "Json",
+      value: "toJsonString",
+    },
+    {
+      label: "MATLAB",
+      value: "toMATLAB",
+    },
+    {
+      label: "NodeFetch",
+      value: "toNodeFetch",
+    },
+    {
+      label: "NodeRequest",
+      value: "toNodeRequest",
+    },
+    {
+      label: "Php",
+      value: "toPhp",
+    },
+    {
+      label: "Python",
+      value: "toPython",
+    },
+    {
+      label: "R",
+      value: "toR",
+    },
+    {
+      label: "Rust",
+      value: "toRust",
+    },
+    {
+      label: "Strest",
+      value: "toStrest",
+    },
+  ];
+  const [language, setLanguage] = useState("toPython");
+  const [command, setCommand] = useState("curl example.com");
+  const [output, setOutput] = useState("");
+  useEffect(() => {
+    window.addEventListener(
+      "message",
+      (event) => {
+        setOutput(event.data);
+      },
+      {
+        once: true,
+      }
+    );
+    tsvscode.postMessage({
+      type: "onConvert",
+      value: {
+        language,
+        command,
+      },
+    });
+  }, [language, command]);
+
+  return (
+    <div>
+      <h1>{t("tool.curlToCode.title")}</h1>
+      <VSCodeTextArea
+        style={{
+          width: "100%",
+        }}
+        cols={20}
+        rows={10}
+        value={command}
+        onInput={({ target }) => setCommand((target as HTMLInputElement).value)}
+      >
+        {t("tool.curlToCode.commandTextArea.label")}
+      </VSCodeTextArea>
+      <VSCodeDropdown
+        value={language}
+        onChange={({ target }) => {
+          setLanguage((target as HTMLInputElement).value);
+        }}
+      >
+        {languageOptions.map((option) => {
+          return (
+            <VSCodeOption value={option.value} key={option.value}>
+              {option.label}
+            </VSCodeOption>
+          );
+        })}
+      </VSCodeDropdown>
+      <VSCodeTextArea
+        style={{
+          width: "100%",
+        }}
+        cols={20}
+        rows={10}
+        value={output}
+        readOnly
+      ></VSCodeTextArea>
+    </div>
+  );
+};
diff --git a/webview/components/react/CurlToCode/locales/en.json b/webview/components/react/CurlToCode/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "tool.curlToCode.commandTextArea.label": "Curl Command",
+  "tool.curlToCode.title": "Convert Curl Commands To Code"
+}
diff --git a/webview/components/react/CurlToCode/locales/zh-CN.json b/webview/components/react/CurlToCode/locales/zh-CN.json
@@ -0,0 +1,4 @@
+{
+  "tool.curlToCode.commandTextArea.label": "CURL 命令",
+  "tool.curlToCode.title": "CURL 转代码"
+}
diff --git a/webview/pages/curlToCode.tsx b/webview/pages/curlToCode.tsx
@@ -0,0 +1,11 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import "../components/react/CurlToCode/i18n";
+import App from "../components/react/CurlToCode/index";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App></App>
+  </React.StrictMode>,
+  document.getElementById("root")
+);
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ export enum PanelType {`
`16`	`16`	`timestamp = "timestamp",`
`17`	`17`	`cron = "cron",`
`18`	`18`	`userAgent = "userAgent",`
	`19`	`+ curlToCode = "curlToCode",`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`export enum Category {`