feat: remove Docker, enhance DX

Author: Prorupak

docker-compose.yaml

@@ -5,6 +5,11 @@
   "scripts": {
     "start-plugin": "cd plugin && pnpm watch",
     "start-server": "cd server && pnpm dev",
+    "start-server-prod": "cd server && pnpm prod",
+    "build-plugin": "cd plugin && pnpm build",
+    "build-server": "cd server && pnpm build",
+    "lint-plugin": "cd plugin && pnpm lint",
+    "lint-server": "cd server && pnpm lint",
     "start": "concurrently \"pnpm start-server\" \"pnpm start-plugin\"",
     "lint": "concurrently \"pnpm lint-server\" \"pnpm lint-plugin\"",
     "build": "concurrently \"pnpm build-server\" \"pnpm build-plugin\"",

package.json

@@ -29,6 +29,7 @@
     "lint:format": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
+    "@figma/plugin-typings": "^1.99.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "ts-loader": "^6.0.4",

plugin/package.json

@@ -1,5 +1,3 @@
-import "figma-plugin-types";
-
 const width = 400;
 const height = 500;
 let timer: number | ReturnType<typeof setTimeout>;
@@ -68,7 +66,7 @@ figma.ui.onmessage = async (msg: MessageData) => {
 
     case "show":
       if (isShowMessage(msg)) {
-        const node = figma.getNodeById(msg.show);
+        const node = await figma.getNodeByIdAsync(msg.show);
         if (node?.type !== "DOCUMENT" && node?.type !== "PAGE") {
           figma.currentPage.selection = [node as SceneNode];
           figma.viewport.scrollAndZoomIntoView([node as SceneNode]);
@@ -86,7 +84,7 @@ function* walkTree(node: BaseNode): Generator<BaseNode, void, unknown> {
   yield node;
   if ("children" in node) {
     for (const child of node.children) {
-      yield * walkTree(child);
+      yield* walkTree(child);
     }
   }
 }

plugin/pnpm-lock.yaml

@@ -23,7 +23,7 @@ export function useDebounceCallback<T extends (...args: any[]) => void>(
   callback: T,
   delay: number
 ) {
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const debouncedCallback = useCallback(
     (...args: Parameters<T>) => {

plugin/src/code.ts

@@ -7,6 +7,9 @@ interface LoginPageProps {
 }
 
 const LoginPage: React.FC<LoginPageProps> = ({ loading, startOAuthFlow }) => {
+  const cancelLogin = () => {
+    parent.postMessage({ pluginMessage: { type: "quit" } }, "*");
+  };
   return (
     <div
       className="login-container"
@@ -21,13 +24,32 @@ const LoginPage: React.FC<LoginPageProps> = ({ loading, startOAuthFlow }) => {
         <p className="login-subtitle">
           Please login to start using plugin again.
         </p>
-        <button
-          className={`login-button ${loading ? "loading" : ""}`}
-          onClick={startOAuthFlow}
-          disabled={loading}
+        <div
+          style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}
         >
-          {loading ? <span className="spinner"></span> : "Log in with Figma"}
-        </button>
+          <button
+            className={`login-button ${loading ? "loading" : ""}`}
+            onClick={startOAuthFlow}
+            disabled={loading}
+          >
+            {loading ? <span className="spinner"></span> : "Log in with Figma"}
+          </button>
+          {loading && (
+            <button
+              type="button"
+              style={{
+                cursor: "pointer",
+                backgroundColor: "transparent",
+                border: "none",
+                fontSize: "1rem",
+                color: "var(--purple-color)",
+              }}
+              onClick={cancelLogin}
+            >
+              Cancel
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );

plugin/src/hooks/useDebounce.ts

@@ -10,8 +10,8 @@
     "lib": ["dom", "es2017"],
     "module": "commonjs",
     "target": "ES2015",
-    "jsx": "react"
+    "jsx": "react",
+    "typeRoots": ["./node_modules/@types", "./node_modules/@figma"]
   },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": ["src/**/*.ts"]
 }