feat: custom emoji user config

CHANGELOG.md

@@ -5,7 +5,7 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 ### Added
-- 
+- User customizable emoji markers
 
 ### Fixed
 -

README.md

@@ -1,13 +1,11 @@
 # React Compiler Marker ✨
 
 `react-compiler-marker` is a VSCode/Cursor extension that shows which React components are optimized by the React Compiler
-- ✨ = optimized
-- 🚫 = failed (with tooltip explaining why)
 
 ## Features 🌟
 
-- Markers for optimized and failed components ✨/🚫
-- Hover tooltips with details 
+- Customizable emoji markers for optimized and failed components
+- Hover tooltips with details
 - Commands to enable/disable markers or check a single file
 - Preview Compiled Output: Preview the compiled output of the current file
 
@@ -44,6 +42,26 @@ Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type:
 
 You can configure the extension via VSCode/Cursor settings:
 
+### `reactCompilerMarker.successEmoji`
+
+Emoji marker to display next to components that were successfully memoized (Default: ✨, can be null)
+
+```json
+{
+  "reactCompilerMarker.successEmoji": "✨"
+}
+```
+
+### `reactCompilerMarker.errorEmoji`
+
+Emoji marker to display next to components that failed to be memoized (Default 🚫, can be null)
+
+```json
+{
+  "reactCompilerMarker.errorEmoji": "🚫"
+}
+```
+
 ### `reactCompilerMarker.babelPluginPath`
 
 Path to the babel-plugin-react-compiler in your project. By default it's `node_modules/babel-plugin-react-compiler`.

package.json

@@ -63,6 +63,18 @@
           "type": "string",
           "default": "node_modules/babel-plugin-react-compiler",
           "description": "Path to the babel-plugin-react-compiler in your project. By default it's 'node_modules/babel-plugin-react-compiler'"
+        },
+        "reactCompilerMarker.errorEmoji": {
+          "type": "string",
+          "nullable": true,
+          "default": "🚫",
+          "description": "Emoji marker to display next to components that failed to be memoized"
+        },
+        "reactCompilerMarker.successEmoji": {
+          "type": "string",
+          "nullable": true,
+          "default": "✨",
+          "description": "Emoji marker to display next to components that were successfully memoized"
         }
       }
     }

src/decorations.ts

@@ -1,6 +1,11 @@
 import * as vscode from "vscode";
 import { checkReactCompiler, LoggerEvent } from "./checkReactCompiler";
 
+let successDecoration: vscode.TextEditorDecorationType;
+let errorDecoration: vscode.TextEditorDecorationType;
+let currentSuccessEmoji: string | null | undefined;
+let currentErrorEmoji: string | null | undefined;
+
 function createDecorationType(
   contentText: string
 ): vscode.TextEditorDecorationType {
@@ -91,14 +96,14 @@ async function updateDecorations(
     if (log.kind === "CompileSuccess") {
       // Use hoverMessage for displaying Markdown tooltips
       hoverMessage.appendMarkdown(
-        "✨ This component has been auto-memoized by React Compiler.\n\n"
+        `${currentSuccessEmoji} This component has been auto-memoized by React Compiler.\n\n`
       );
       hoverMessage.appendMarkdown(
         `**[Preview compiled output 📄](command:react-compiler-marker.previewCompiled)**`
       );
     } else {
       hoverMessage.appendMarkdown(
-        "**🚫 This component hasn't been memoized by React Compiler.**\n\n"
+        `**${currentErrorEmoji} This component hasn't been memoized by React Compiler.**\n\n`
       );
 
       const { startLine, endLine, startChar, endChar, reason, description } =
@@ -148,9 +153,28 @@ async function updateDecorations(
   editor.setDecorations(decorationType, decorations);
 }
 
-// Decorations for successful and failed compilations
-const magicSparksDecoration = createDecorationType(" ✨");
-const blockIndicatorDecoration = createDecorationType(" 🚫");
+// Function to load initial decorations
+export function loadDecorations() {
+  const config = vscode.workspace.getConfiguration("reactCompilerMarker");
+  currentSuccessEmoji = config.get<string | null>("successEmoji");
+  currentErrorEmoji = config.get<string | null>("errorEmoji");
+
+  if (successDecoration) {
+    successDecoration.dispose();
+  }
+  if (errorDecoration) {
+    errorDecoration.dispose();
+  }
+
+  successDecoration = createDecorationType(
+    currentSuccessEmoji ? " " + currentSuccessEmoji : ""
+  );
+  errorDecoration = createDecorationType(
+    currentErrorEmoji ? " " + currentErrorEmoji : ""
+  );
+}
+
+loadDecorations();
 
 // Function to update decorations dynamically
 async function updateDecorationsForEditor(editor: vscode.TextEditor) {
@@ -165,12 +189,8 @@ async function updateDecorationsForEditor(editor: vscode.TextEditor) {
   );
 
   // Update decorations for successful and failed compilations
-  await updateDecorations(
-    editor,
-    magicSparksDecoration,
-    successfulCompilations
-  );
-  await updateDecorations(editor, blockIndicatorDecoration, failedCompilations);
+  await updateDecorations(editor, successDecoration, successfulCompilations);
+  await updateDecorations(editor, errorDecoration, failedCompilations);
 }
 
 export { createDecorationType, updateDecorations, updateDecorationsForEditor };

src/extension.ts

@@ -1,5 +1,5 @@
 import * as vscode from "vscode";
-import { updateDecorationsForEditor } from "./decorations";
+import { updateDecorationsForEditor, loadDecorations } from "./decorations";
 import { getThrottledFunction, isVSCode } from "./utils";
 import { logError, logMessage } from "./logger";
 import { getCompiledOutput } from "./checkReactCompiler";
@@ -304,5 +304,16 @@ function registerListeners(
     }
   });
 
+  // Listener for emoji config changes
+  vscode.workspace.onDidChangeConfiguration((event) => {
+    if (event.affectsConfiguration("reactCompilerMarker")) {
+      loadDecorations();
+      const editor = vscode.window.activeTextEditor;
+      if (getIsActivated() && editor) {
+        throttledUpdateDecorations(editor);
+      }
+    }
+  });
+
   logMessage("React Compiler Marker ✨: Event listeners registered.");
 }