Total refactor part 1.

Author: bernaferrari

apps/debug/package.json

@@ -11,21 +11,21 @@
   },
   "dependencies": {
     "backend": "workspace:*",
-    "next": "^14.2.20",
+    "next": "^14.2.24",
     "plugin-ui": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^20.17.10",
-    "@types/react": "^18.3.17",
+    "@types/node": "^20.17.21",
+    "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "autoprefixer": "^10.4.20",
     "eslint-config-custom": "workspace:*",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.3",
     "tailwindcss": "3.4.6",
     "tsconfig": "workspace:*",
     "types": "workspace:*",
-    "typescript": "^5.7.2"
+    "typescript": "^5.8.2"
   }
 }

apps/plugin/package.json

@@ -10,32 +10,32 @@
     "dev": "pnpm build:watch"
   },
   "dependencies": {
-    "@figma/plugin-typings": "^1.105.0",
+    "@figma/plugin-typings": "^1.108.0",
     "backend": "workspace:*",
     "plugin-ui": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^20.17.10",
-    "@types/react": "^18.3.17",
+    "@types/node": "^20.17.21",
+    "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@vitejs/plugin-react-swc": "^3.8.0",
     "autoprefixer": "^10.4.20",
     "concurrently": "^8.2.2",
     "esbuild": "^0.23.1",
     "eslint-config-custom": "workspace:*",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "postcss": "^8.4.49",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "postcss": "^8.5.3",
     "tailwindcss": "3.4.6",
     "tsconfig": "workspace:*",
-    "typescript": "^5.7.2",
     "types": "workspace:*",
-    "vite": "^5.4.11",
+    "typescript": "^5.8.2",
+    "vite": "^5.4.14",
     "vite-plugin-singlefile": "^2.1.0"
   }
 }

apps/plugin/plugin-src/code.ts

@@ -8,6 +8,7 @@ import {
   htmlMain,
   postSettingsChanged,
 } from "backend";
+import { nodesToJSON } from "backend/src/code";
 import { retrieveGenericSolidUIColors } from "backend/src/common/retrieveUI/retrieveColors";
 import { flutterCodeGenTextStyles } from "backend/src/flutter/flutterMain";
 import { htmlCodeGenTextStyles } from "backend/src/html/htmlMain";
@@ -30,6 +31,7 @@ export const defaultPluginSettings: PluginSettings = {
   customTailwindColors: false,
   customTailwindPrefix: "",
   embedImages: false,
+  embedVectors: false,
 };
 
 // A helper type guard to ensure the key belongs to the PluginSettings type
@@ -38,8 +40,13 @@ function isKeyOfPluginSettings(key: string): key is keyof PluginSettings {
 }
 
 const getUserSettings = async () => {
+  console.log("[DEBUG] getUserSettings - Starting to fetch user settings");
   const possiblePluginSrcSettings =
     (await figma.clientStorage.getAsync("userPluginSettings")) ?? {};
+  console.log(
+    "[DEBUG] getUserSettings - Raw settings from storage:",
+    possiblePluginSrcSettings,
+  );
 
   const updatedPluginSrcSettings = {
     ...defaultPluginSettings,
@@ -57,46 +64,72 @@ const getUserSettings = async () => {
   };
 
   userPluginSettings = updatedPluginSrcSettings as PluginSettings;
+  console.log("[DEBUG] getUserSettings - Final settings:", userPluginSettings);
+  return userPluginSettings;
 };
 
 const initSettings = async () => {
+  console.log("[DEBUG] initSettings - Initializing plugin settings");
   await getUserSettings();
   postSettingsChanged(userPluginSettings);
+  console.log("[DEBUG] initSettings - Calling safeRun with settings");
   safeRun(userPluginSettings);
 };
 
 // Used to prevent running from happening again.
 let isLoading = false;
 const safeRun = async (settings: PluginSettings) => {
+  console.log(
+    "[DEBUG] safeRun - Called with isLoading =",
+    isLoading,
+    "selection =",
+    figma.currentPage.selection,
+  );
   if (isLoading === false) {
     try {
       isLoading = true;
+      console.log("[DEBUG] safeRun - Starting run execution");
       await run(settings);
+      console.log("[DEBUG] safeRun - Run execution completed");
       // hack to make it not immediately set to false when complete. (executes on next frame)
       setTimeout(() => {
+        console.log("[DEBUG] safeRun - Resetting isLoading to false");
         isLoading = false;
       }, 1);
     } catch (e) {
+      console.log("[DEBUG] safeRun - Error caught in execution");
+      isLoading = false; // Make sure to reset the flag on error
       if (e && typeof e === "object" && "message" in e) {
         const error = e as Error;
         console.log("error: ", error.stack);
         figma.ui.postMessage({ type: "error", error: error.message });
       }
     }
+  } else {
+    console.log(
+      "[DEBUG] safeRun - Skipping execution because isLoading =",
+      isLoading,
+    );
   }
 };
 
 const standardMode = async () => {
+  console.log("[DEBUG] standardMode - Starting standard mode initialization");
   figma.showUI(__html__, { width: 450, height: 700, themeColors: true });
   await initSettings();
 
   // Listen for selection changes
   figma.on("selectionchange", () => {
+    console.log(
+      "[DEBUG] selectionchange event - New selection:",
+      figma.currentPage.selection,
+    );
     safeRun(userPluginSettings);
   });
 
   // Listen for document changes
   figma.on("documentchange", () => {
+    console.log("[DEBUG] documentchange event triggered");
     // Node: This was causing an infinite load when you try to export a background image from a group that contains children.
     // The reason for this is that the code will temporarily hide the children of the group in order to export a clean image
     // then restores the visibility of the children. This constitutes a document change so it's restarting the whole conversion.
@@ -105,10 +138,11 @@ const standardMode = async () => {
   });
 
   figma.ui.onmessage = (msg) => {
-    console.log("[node] figma.ui.onmessage", msg);
+    console.log("[DEBUG] figma.ui.onmessage", msg);
 
     if (msg.type === "pluginSettingWillChange") {
       const { key, value } = msg as SettingWillChangeMessage<unknown>;
+      console.log(`[DEBUG] Setting changed: ${key} = ${value}`);
       (userPluginSettings as any)[key] = value;
       figma.clientStorage.setAsync("userPluginSettings", userPluginSettings);
       safeRun(userPluginSettings);
@@ -117,13 +151,24 @@ const standardMode = async () => {
 };
 
 const codegenMode = async () => {
+  console.log("[DEBUG] codegenMode - Starting codegen mode initialization");
   // figma.showUI(__html__, { visible: false });
   await getUserSettings();
 
   figma.codegen.on(
     "generate",
     async ({ language, node }: CodegenEvent): Promise<CodegenResult[]> => {
-      const convertedSelection = convertIntoNodes([node], null);
+      console.log(
+        `[DEBUG] codegen.generate - Language: ${language}, Node:`,
+        node,
+      );
+
+      const nodeJson = await nodesToJSON([node]);
+      const convertedSelection = await convertIntoNodes(nodeJson, null);
+      console.log(
+        "[DEBUG] codegen.generate - Converted selection:",
+        convertedSelection,
+      );
 
       switch (language) {
         case "html":
@@ -243,11 +288,14 @@ const codegenMode = async () => {
 switch (figma.mode) {
   case "default":
   case "inspect":
+    console.log("[DEBUG] Starting plugin in", figma.mode, "mode");
     standardMode();
     break;
   case "codegen":
+    console.log("[DEBUG] Starting plugin in codegen mode");
     codegenMode();
     break;
   default:
+    console.log("[DEBUG] Unknown plugin mode:", figma.mode);
     break;
 }

package.json

@@ -10,10 +10,10 @@
     "format": "prettier --write \"**/*.{ts,tsx,css,md}\""
   },
   "devDependencies": {
-    "eslint": "^9.17.0",
+    "eslint": "^9.21.0",
     "eslint-config-custom": "workspace:*",
-    "prettier": "^3.4.2",
-    "turbo": "^2.3.3",
-    "typescript": "^5.7.2"
+    "prettier": "^3.5.2",
+    "turbo": "^2.4.4",
+    "typescript": "^5.8.2"
   }
 }

packages/backend/package.json

@@ -13,19 +13,19 @@
     "lint": "eslint \"src/**/*.ts*\""
   },
   "dependencies": {
-    "@figma/plugin-typings": "^1.105.0",
+    "@figma/plugin-typings": "^1.108.0",
     "js-base64": "^3.7.7",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "types": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.3.17",
+    "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
-    "eslint": "^9.17.0",
+    "eslint": "^9.21.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.2"
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2"
   }
 }