From f65d3004564903e670bb4701aa542d2008cf794b Mon Sep 17 00:00:00 2001 From: Cameron Chisholm Date: Thu, 4 Dec 2025 14:20:17 +0000 Subject: [PATCH 1/2] feat: emoji user config --- package.json | 12 ++++++++++++ src/decorations.ts | 42 +++++++++++++++++++++++++++++++----------- src/extension.ts | 13 ++++++++++++- 3 files changed, 55 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 97e200c..db9593b 100644 --- a/package.json +++ b/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 to display next to components that failed to be memoized" + }, + "reactCompilerMarker.successEmoji": { + "type": "string", + "nullable": true, + "default": "✨", + "description": "Emoji to display next to components that were successfully memoized" } } } diff --git a/src/decorations.ts b/src/decorations.ts index ac2d3d7..9f2a847 100644 --- a/src/decorations.ts +++ b/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("successEmoji"); + currentErrorEmoji = config.get("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 }; diff --git a/src/extension.ts b/src/extension.ts index b081e58..546787b 100644 --- a/src/extension.ts +++ b/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."); } From 23106e2155e674ad58a25454f7e9ccc687d18c4f Mon Sep 17 00:00:00 2001 From: Cameron Chisholm Date: Mon, 8 Dec 2025 09:15:43 +0000 Subject: [PATCH 2/2] chore: readme and changelog --- CHANGELOG.md | 2 +- README.md | 26 ++++++++++++++++++++++---- package.json | 4 ++-- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 288e37e..f6ecb4a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ This project follows [Semantic Versioning](https://semver.org). ## [Unreleased] ### Added -- +- User customizable emoji markers ### Fixed - diff --git a/README.md b/README.md index 93b46ac..ad7f451 100644 --- a/README.md +++ b/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`. diff --git a/package.json b/package.json index db9593b..406366b 100644 --- a/package.json +++ b/package.json @@ -68,13 +68,13 @@ "type": "string", "nullable": true, "default": "🚫", - "description": "Emoji to display next to components that failed to be memoized" + "description": "Emoji marker to display next to components that failed to be memoized" }, "reactCompilerMarker.successEmoji": { "type": "string", "nullable": true, "default": "✨", - "description": "Emoji to display next to components that were successfully memoized" + "description": "Emoji marker to display next to components that were successfully memoized" } } }