log: custom logging using loglevel & enum LogLevel

Author: canewsin

apps/plugin/plugin-src/code.ts

@@ -8,6 +8,7 @@ import {
   postSettingsChanged,
 } from "backend";
 import { nodesToJSON } from "backend/src/altNodes/jsonNodeConversion";
+import { log, error } from "backend/src/common/log";
 import { retrieveGenericSolidUIColors } from "backend/src/common/retrieveUI/retrieveColors";
 import { flutterCodeGenTextStyles } from "backend/src/flutter/flutterMain";
 import { htmlCodeGenTextStyles } from "backend/src/html/htmlMain";
@@ -41,10 +42,10 @@ function isKeyOfPluginSettings(key: string): key is keyof PluginSettings {
 }
 
 const getUserSettings = async () => {
-  console.log("[DEBUG] getUserSettings - Starting to fetch user settings");
+  log("[DEBUG] getUserSettings - Starting to fetch user settings");
   const possiblePluginSrcSettings =
     (await figma.clientStorage.getAsync("userPluginSettings")) ?? {};
-  console.log(
+  log(
     "[DEBUG] getUserSettings - Raw settings from storage:",
     possiblePluginSrcSettings,
   );
@@ -65,22 +66,22 @@ const getUserSettings = async () => {
   };
 
   userPluginSettings = updatedPluginSrcSettings as PluginSettings;
-  console.log("[DEBUG] getUserSettings - Final settings:", userPluginSettings);
+  log("[DEBUG] getUserSettings - Final settings:", userPluginSettings);
   return userPluginSettings;
 };
 
 const initSettings = async () => {
-  console.log("[DEBUG] initSettings - Initializing plugin settings");
+  log("[DEBUG] initSettings - Initializing plugin settings");
   await getUserSettings();
   postSettingsChanged(userPluginSettings);
-  console.log("[DEBUG] initSettings - Calling safeRun with settings");
+  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(
+  log(
     "[DEBUG] safeRun - Called with isLoading =",
     isLoading,
     "selection =",
@@ -89,25 +90,25 @@ const safeRun = async (settings: PluginSettings) => {
   if (isLoading === false) {
     try {
       isLoading = true;
-      console.log("[DEBUG] safeRun - Starting run execution");
+      log("[DEBUG] safeRun - Starting run execution");
       await run(settings);
-      console.log("[DEBUG] safeRun - Run execution completed");
+      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");
+        log("[DEBUG] safeRun - Resetting isLoading to false");
         isLoading = false;
       }, 1);
     } catch (e) {
-      console.log("[DEBUG] safeRun - Error caught in execution");
+      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);
+        log("error: ", error.stack);
         figma.ui.postMessage({ type: "error", error: error.message });
       } else {
         // Handle non-standard errors or unknown error types
         const errorMessage = String(e);
-        console.log("Unknown error: ", errorMessage);
+        log("Unknown error: ", errorMessage);
         figma.ui.postMessage({
           type: "error",
           error: errorMessage || "Unknown error occurred",
@@ -118,21 +119,21 @@ const safeRun = async (settings: PluginSettings) => {
       figma.ui.postMessage({ type: "conversion-complete", success: false });
     }
   } else {
-    console.log(
+    log(
       "[DEBUG] safeRun - Skipping execution because isLoading =",
       isLoading,
     );
   }
 };
 
 const standardMode = async () => {
-  console.log("[DEBUG] standardMode - Starting standard mode initialization");
+  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(
+    log(
       "[DEBUG] selectionchange event - New selection:",
       figma.currentPage.selection,
     );
@@ -142,7 +143,7 @@ const standardMode = async () => {
   // Listen for page changes
   figma.loadAllPagesAsync();
   figma.on("documentchange", () => {
-    console.log("[DEBUG] documentchange event triggered");
+    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.
@@ -151,16 +152,16 @@ const standardMode = async () => {
   });
 
   figma.ui.onmessage = async (msg) => {
-    console.log("[DEBUG] figma.ui.onmessage", msg);
+    log("[DEBUG] figma.ui.onmessage", msg);
 
     if (msg.type === "pluginSettingWillChange") {
       const { key, value } = msg as SettingWillChangeMessage<unknown>;
-      console.log(`[DEBUG] Setting changed: ${key} = ${value}`);
+      log(`[DEBUG] Setting changed: ${key} = ${value}`);
       (userPluginSettings as any)[key] = value;
       figma.clientStorage.setAsync("userPluginSettings", userPluginSettings);
       safeRun(userPluginSettings);
     } else if (msg.type === "get-selection-json") {
-      console.log("[DEBUG] get-selection-json message received");
+      log("[DEBUG] get-selection-json message received");
 
       const nodes = figma.currentPage.selection;
       if (nodes.length === 0) {
@@ -187,8 +188,8 @@ const standardMode = async () => {
               ).document,
           ),
         )) as SceneNode[];
-      } catch (error) {
-        console.error("Error exporting JSON:", error);
+      } catch (err) {
+        error("Error exporting JSON:", err);
       }
 
       try {
@@ -203,13 +204,13 @@ const standardMode = async () => {
         };
         newNodes.forEach(removeParent);
         result.newConversion = newNodes;
-      } catch (error) {
-        console.error("Error in new conversion:", error);
+      } catch (err) {
+        error("Error in new conversion:", err);
       }
 
       const nodeJson = result;
 
-      console.log("[DEBUG] Exported node JSON:", nodeJson);
+      log("[DEBUG] Exported node JSON:", nodeJson);
 
       // Send the JSON data back to the UI
       figma.ui.postMessage({
@@ -221,20 +222,20 @@ const standardMode = async () => {
 };
 
 const codegenMode = async () => {
-  console.log("[DEBUG] codegenMode - Starting codegen mode initialization");
+  log("[DEBUG] codegenMode - Starting codegen mode initialization");
   // figma.showUI(__html__, { visible: false });
   await getUserSettings();
 
   figma.codegen.on(
     "generate",
     async ({ language, node }: CodegenEvent): Promise<CodegenResult[]> => {
-      console.log(
+      log(
         `[DEBUG] codegen.generate - Language: ${language}, Node:`,
         node,
       );
 
       const convertedSelection = await nodesToJSON([node], userPluginSettings);
-      console.log(
+      log(
         "[DEBUG] codegen.generate - Converted selection:",
         convertedSelection,
       );
@@ -406,14 +407,14 @@ const codegenMode = async () => {
 switch (figma.mode) {
   case "default":
   case "inspect":
-    console.log("[DEBUG] Starting plugin in", figma.mode, "mode");
+    log("[DEBUG] Starting plugin in", figma.mode, "mode");
     standardMode();
     break;
   case "codegen":
-    console.log("[DEBUG] Starting plugin in codegen mode");
+    log("[DEBUG] Starting plugin in codegen mode");
     codegenMode();
     break;
   default:
-    console.log("[DEBUG] Unknown plugin mode:", figma.mode);
+    log("[DEBUG] Unknown plugin mode:", figma.mode);
     break;
 }

apps/plugin/ui-src/App.tsx

@@ -14,6 +14,7 @@ import {
 } from "types";
 import { postUISettingsChangingMessage } from "./messaging";
 import copy from "copy-to-clipboard";
+import { log } from "backend/src/common/log";
 
 interface AppState {
   code: string;
@@ -48,7 +49,7 @@ export default function App() {
   useEffect(() => {
     window.onmessage = (event: MessageEvent) => {
       const untypedMessage = event.data.pluginMessage as Message;
-      console.log("[ui] message received:", untypedMessage);
+      log("[ui] message received:", untypedMessage);
 
       switch (untypedMessage.type) {
         case "conversionStart":

packages/backend/src/altNodes/altNodeUtils.ts

@@ -2,6 +2,7 @@ import { AltNode } from "types";
 import { curry } from "../common/curry";
 import { exportAsyncProxy } from "../common/exportAsyncProxy";
 import { addWarning } from "../common/commonConversionWarnings";
+import { error } from "../common/log";
 
 export const overrideReadonlyProperty = curry(
   <T, K extends keyof T>(prop: K, value: any, obj: T): T =>
@@ -54,23 +55,23 @@ export const isSVGNode = (node: SceneNode) => {
 
 export const renderAndAttachSVG = async (node: any) => {
   // const nodeName = `${node.type}:${node.id}`;
-  // console.log(altNode);
+  // log(altNode);
   if (node.canBeFlattened) {
     if (node.svg) {
-      // console.log(`SVG already rendered for ${nodeName}`);
+      // log(`SVG already rendered for ${nodeName}`);
       return node;
     }
 
     try {
-      // console.log(`${nodeName} can be flattened!`);
+      // log(`${nodeName} can be flattened!`);
       const svg = (await exportAsyncProxy<string>(node, {
         format: "SVG_STRING",
       })) as string;
       node.svg = svg;
-    } catch (error) {
+    } catch (err) {
       addWarning(`Failed rendering SVG for ${node.name}`);
-      console.error(`Error rendering SVG for ${node.type}:${node.id}`);
-      console.error(error);
+      error(`Error rendering SVG for ${node.type}:${node.id}`);
+      error(err);
     }
   }
   return node;

packages/backend/src/altNodes/jsonNodeConversion.ts

@@ -3,6 +3,7 @@ import { PluginSettings } from "types";
 import { variableToColorName } from "../tailwind/conversionTables";
 import { HasGeometryTrait, Node, Paint } from "../api_types";
 import { calculateRectangleFromBoundingBox } from "../common/commonPosition";
+import { bench, log } from "../common/log";
 
 // Performance tracking counters
 export let getNodeByIdAsyncTime = 0;
@@ -545,9 +546,9 @@ export const nodesToJSON = async (
     }),
   );
 
-  console.log("[debug] initial nodeJson", { ...nodes[0] });
+  log("[debug] initial nodeJson", { ...nodes[0] });
 
-  console.log(
+  bench(
     `[benchmark][inside nodesToJSON] JSON_REST_V1 export: ${Date.now() - exportJsonStart}ms`,
   );
 
@@ -574,7 +575,7 @@ export const nodesToJSON = async (
     }
   }
 
-  console.log(
+  bench(
     `[benchmark][inside nodesToJSON] Process node pairs: ${Date.now() - processNodesStart}ms`,
   );
 

packages/backend/src/altNodes/oldAltConversion.ts

@@ -6,6 +6,7 @@ import {
   assignChildren,
 } from "./altNodeUtils";
 import { curry } from "../common/curry";
+import { log } from "../common/log";
 
 export const isTypeOrGroupOfTypes = curry(
   (matchTypes: NodeType[], node: SceneNode): boolean => {
@@ -143,7 +144,7 @@ export const cloneNode = <T extends BaseNode>(
     altNode.styledTextSegments = globalTextStyleSegments[node.id];
   }
 
-  console.log("altnode:", altNode.parent, cloned.parent);
+  log("altnode:", altNode.parent, cloned.parent);
 
   return altNode;
 };

packages/backend/src/code.ts

@@ -22,6 +22,7 @@ import {
   processColorVariablesTime,
   resetPerformanceCounters,
 } from "./altNodes/jsonNodeConversion";
+import { bench, log } from "./common/log";
 
 export const run = async (settings: PluginSettings) => {
   resetPerformanceCounters();
@@ -41,14 +42,14 @@ export const run = async (settings: PluginSettings) => {
   let convertedSelection: any;
   if (useOldPluginVersion2025) {
     convertedSelection = oldConvertNodesToAltNodes(selection, null);
-    console.log("convertedSelection", convertedSelection);
+    log("convertedSelection", convertedSelection);
   } else {
     convertedSelection = await nodesToJSON(selection, settings);
-    console.log(`[benchmark] nodesToJSON: ${Date.now() - nodeToJSONStart}ms`);
-    console.log("nodeJson", convertedSelection);
+    bench(`[benchmark] nodesToJSON: ${Date.now() - nodeToJSONStart}ms`);
+    log("nodeJson", convertedSelection);
   }
 
-  console.log("[debug] convertedSelection", { ...convertedSelection[0] });
+  log("[debug] convertedSelection", { ...convertedSelection[0] });
 
   // ignore when nothing was selected
   // If the selection was empty, the converted selection will also be empty.
@@ -59,38 +60,39 @@ export const run = async (settings: PluginSettings) => {
 
   const convertToCodeStart = Date.now();
   const code = await convertToCode(convertedSelection, settings);
-  console.log(
+  bench(
     `[benchmark] convertToCode: ${Date.now() - convertToCodeStart}ms`,
   );
 
   const generatePreviewStart = Date.now();
   const htmlPreview = await generateHTMLPreview(convertedSelection, settings);
-  console.log(
+  bench(
     `[benchmark] generateHTMLPreview: ${Date.now() - generatePreviewStart}ms`,
   );
 
   const colorPanelStart = Date.now();
   const colors = retrieveGenericSolidUIColors(framework);
   const gradients = retrieveGenericLinearGradients(framework);
-  console.log(
+  bench(
     `[benchmark] color and gradient panel: ${Date.now() - colorPanelStart}ms`,
   );
-  console.log(
+  bench(
     `[benchmark] total generation time: ${Date.now() - nodeToJSONStart}ms`,
   );
+  console.warn(`${Date.now() - nodeToJSONStart}`)
 
   // Log performance statistics
-  console.log(
+  bench(
     `[benchmark] getNodeByIdAsync: ${getNodeByIdAsyncTime}ms (${getNodeByIdAsyncCalls} calls, avg: ${(getNodeByIdAsyncTime / getNodeByIdAsyncCalls || 1).toFixed(2)}ms)`,
   );
-  console.log(
+  bench(
     `[benchmark] getStyledTextSegments: ${getStyledTextSegmentsTime}ms (${getStyledTextSegmentsCalls} calls, avg: ${
       getStyledTextSegmentsCalls > 0
         ? (getStyledTextSegmentsTime / getStyledTextSegmentsCalls).toFixed(2)
         : 0
     }ms)`,
   );
-  console.log(
+  bench(
     `[benchmark] processColorVariables: ${processColorVariablesTime}ms (${processColorVariablesCalls} calls, avg: ${
       processColorVariablesCalls > 0
         ? (processColorVariablesTime / processColorVariablesCalls).toFixed(2)

packages/backend/src/common/exportAsyncProxy.ts

@@ -1,4 +1,5 @@
 import { postConversionStart } from "../messaging";
+// import { log } from "../common/log";
 
 let isRunning = false;
 
@@ -22,10 +23,10 @@ export const exportAsyncProxy = async <
   }
 
   const figmaNode = (await figma.getNodeByIdAsync(node.id)) as ExportMixin;
-  // console.log("getting figma id for", figmaNode);
+  // log("getting figma id for", figmaNode);
 
   if (figmaNode.exportAsync === undefined) {
-    // console.log(node);
+    // log(node);
     throw new TypeError(
       "Something went wrong. This node doesn't have an exportAsync() function. Maybe check the type before calling this function.",
     );