feat: complete logic (#2)

Author: Wangggym

manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "FigmaTranslate",
+  "name": "AI Translator",
   "id": "1364799721988996959",
   "api": "1.0.0",
   "main": "dist/main.js",

package.json

@@ -4,16 +4,16 @@
   "description": "Figma contents are able to translate by AI",
   "source": "src/index.ts",
   "module": "dist/main.js",
-  "types": "dist/types.d.ts",
   "targets": {
-    "main": {
+    "module": {
       "includeNodeModules": true
     }
   },
   "scripts": {
     "tsc": "tsc",
     "watch": "parcel watch",
-    "build": "rm -rf .parcel-cache/ && rm -rf dist/ && parcel build"
+    "build": "rm -rf .parcel-cache/ && rm -rf dist/ && cross-env NODE_ENV=production parcel build --no-source-maps",
+    "build:dev": "rm -rf .parcel-cache/ && rm -rf dist/ && parcel build"
   },
   "keywords": [],
   "author": "wangym",
@@ -30,6 +30,7 @@
     "@types/lodash": "^4.17.0",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.54.0",
     "parcel": "^2.12.0",
     "parcel-plugin-typescript": "^1.0.0",

src/FigmaStorage.ts

@@ -1,5 +1,6 @@
 export enum StorageKey {
   APIkey = "APIkey",
+  language = "language",
 }
 
 export class FigmaStorage {

src/Translator.ts

@@ -34,6 +34,6 @@ export class Translator {
       }),
     }).then((result) => {
       return result.json();
-    });
+    })
   }
 }

src/index.ts

@@ -1,63 +1,97 @@
-/**
- * - 发布插件，解决编译报错，watch
- * - 在input中回显 apikey
- * - 存储翻译结果
- * - UI 优化
- * - 接口请求错误提示
- */
 import { FigmaStorage, StorageKey } from "./FigmaStorage";
 import { Translator } from "./Translator";
 import { MessageData, MessageType } from "./typing";
 
 (async function () {
   const figmaStorage = new FigmaStorage();
   const translator = new Translator();
+  const translateCacheMap = new Map<string, string>();
 
-  if (figma.editorType === "figma") {
-    // TODO add logic
-    figma.showUI(__html__);
-  }
-
-  if (figma.editorType === "figjam") {
-    const APIkey = await figmaStorage.get(StorageKey.APIkey);
-   
-    figma.showUI(__html__);
-
-    if (APIkey) {
-      console.log(`Get the open-api key: ${APIkey}`);
-      translator.setAPIkey(APIkey);
+  async function translate() {
+    const selectedNodes = figma.currentPage.selection;
+    const currentNode = selectedNodes[0] as
+      | {
+          text: TextSublayerNode;
+        }
+      | undefined;
 
+    if (currentNode === undefined) {
+      return;
+    }
+    
+    let characters: string | undefined;
+    if (
+      (
+        currentNode as {
+          text: TextSublayerNode;
+        }
+      ).text
+    ) {
+      characters = currentNode.text.characters;
     }
 
+    if ((currentNode as unknown as TextSublayerNode).characters) {
+      characters = (currentNode as unknown as TextSublayerNode).characters;
+    }
 
-    figma.on("selectionchange", async () => {
-      const selectedNodes = figma.currentPage.selection;
-
-      console.log(selectedNodes, "selectedNodes");
-
-      const currentNode = selectedNodes[0] as {
-        text: TextSublayerNode;
-      };
-
-      if (currentNode.text) {
-        const characters = currentNode.text.characters;
-
-        figma.ui.postMessage(
+    if (characters) {
+      if (translateCacheMap.has(characters)) {
+        return figma.ui.postMessage(
           new MessageData(MessageType.translate, {
-            value: "Loading...",
+            value: translateCacheMap.get(characters)!,
             data: { characters },
           })
         );
+      }
 
+      figma.ui.postMessage(
+        new MessageData(MessageType.translate, {
+          value: "Loading...",
+          data: { characters },
+        })
+      );
+
+      try {
         const result = await translator.translate(characters);
 
+        const value = result.choices[0].message.content;
         figma.ui.postMessage(
           new MessageData(MessageType.translate, {
-            value: result.choices[0].message.content,
+            value: value,
             data: { characters },
           })
         );
+        translateCacheMap.set(characters, value);
+      } catch (error) {
+        console.error(error);
+        figma.notify("fetch api error");
       }
+    }
+  }
+
+  if (figma.editorType === "figma") {
+    // TODO add logic
+    figma.showUI(__html__);
+  }
+
+  if (figma.editorType === "figjam") {
+    const APIkey = await figmaStorage.get(StorageKey.APIkey);
+
+    figma.showUI(__html__);
+
+    if (APIkey) {
+      // console.log(`Get the open-api key: ${APIkey}`);
+      translator.setAPIkey(APIkey);
+      figma.ui.postMessage(
+        new MessageData(MessageType.APIkey, {
+          value: APIkey,
+        })
+      );
+      translate();
+    }
+
+    figma.on("selectionchange", async () => {
+      await translate();
     });
 
     figma.ui.onmessage = async (msg: MessageData) => {

ui.html

@@ -1,35 +1,69 @@
-<input type="password" name="APIkey" id="APIkey">
-<p id="origin">
-
-</p>
-<p id="translator">
-
-</p>
-<script>
-
-  window.addEventListener('message', event => {
-    const message = event.data;
-    console.log('Received message:', message);
-    if (message.pluginMessage.type === "translate") {
-      const origin = document.getElementById('origin');
-      const translator = document.getElementById('translator');
-      origin.innerText = message.pluginMessage.payload.data.characters
-      translator.innerText = message.pluginMessage.payload.value
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Figma translate</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      font-size: 12px;
     }
-  });
 
-  const APIkeyInput = document.getElementById('APIkey')
-  APIkeyInput.onchange = function (event) {
-    const value = event.target.value;
-    console.log('Input value changed:', value);
+    p {
+      margin: 0;
+      padding: 5px 0;
 
-    parent.postMessage({
-      pluginMessage: {
-        type: 'APIkey', payload: {
-          value
-        }
+    }
+
+    #origin {
+      color: #b44646;
+    }
+  </style>
+</head>
+
+<body>
+  <div>
+    <label for="APIkey">Open AI key:</label>
+    <input type="password" name="APIkey" id="APIkey">
+  </div>
+  <p id="origin"></p>
+  <hr>
+  <p id="translator"></p>
+  <script>
+    const APIkeyInput = document.getElementById('APIkey')
+
+    window.addEventListener('message', event => {
+      const message = event.data;
+      console.log('Received message:', message);
+      if (message.pluginMessage.type === "translate") {
+        const origin = document.getElementById('origin');
+        const translator = document.getElementById('translator');
+        origin.innerText = message.pluginMessage.payload.data.characters
+        translator.innerText = message.pluginMessage.payload.value
       }
-    }, '*')
-  };
 
-</script>
+      if (message.pluginMessage.type === "APIkey") {
+        APIkeyInput.value = message.pluginMessage.payload.value
+      }
+    });
+
+
+    APIkeyInput.onchange = function (event) {
+      const value = event.target.value;
+      console.log('Input value changed:', value);
+
+      parent.postMessage({
+        pluginMessage: {
+          type: 'APIkey', payload: {
+            value
+          }
+        }
+      }, '*')
+    };
+
+  </script>
+</body>
+
+</html>

yarn.lock

@@ -1716,7 +1716,14 @@ cosmiconfig@^8.0.0:
     parse-json "^5.2.0"
     path-type "^4.0.0"
 
-cross-spawn@^7.0.2:
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.1, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==