Merge pull request #3 from dev-five-git/support-type-and-declare-and-export-import-expression

Support type and declare and export import expression

Author: owjs3901

.changepacks/changepack_log_uSWu1SaFG_oJCtG2jljdM.json

@@ -0,0 +1 @@
+{"changes":{"package.json":"Minor"},"note":"Support type, declare, import, export expression","date":"2026-03-15T08:33:55.986255800Z"}

README.md

@@ -2,6 +2,10 @@
 
 Visually distinguish Server Components and Client Components in React / Next.js projects directly in your editor.
 
+[![Visual Studio Marketplace](https://img.shields.io/visual-studio-marketplace/v/devfive.react-component-lens)](https://marketplace.visualstudio.com/items?itemName=devfive.react-component-lens)
+
+![React Component Lens demo](medias/demo.png)
+
 ## Why
 
 In Next.js App Router and React Server Components, the boundary between server and client execution is critical for performance and bundle size. But JSX like `<MyComponent />` gives no visual cue about where it runs.

bunfig.toml

@@ -1,5 +1,5 @@
 [test]
 coverage = true
 coverageSkipTestFiles = true
-# coverageThreshold = 1
+coverageThreshold = 1
 coverageReporter  = ["text", "lcov"] 

medias/demo.png

@@ -49,6 +49,31 @@
           "maximum": 2000,
           "description": "Debounce delay, in milliseconds, before recomputing decorations after workspace changes."
         },
+        "reactComponentLens.scope.element": {
+          "type": "boolean",
+          "default": true,
+          "description": "Highlight JSX element tags (<Component />, </Component>)."
+        },
+        "reactComponentLens.scope.declaration": {
+          "type": "boolean",
+          "default": true,
+          "description": "Highlight component declaration names (function, class, variable)."
+        },
+        "reactComponentLens.scope.export": {
+          "type": "boolean",
+          "default": true,
+          "description": "Highlight component names in export declarations (export { Component }, export default Component)."
+        },
+        "reactComponentLens.scope.import": {
+          "type": "boolean",
+          "default": true,
+          "description": "Highlight component names in import declarations (import { Component } from ...)."
+        },
+        "reactComponentLens.scope.type": {
+          "type": "boolean",
+          "default": true,
+          "description": "Highlight TypeScript interface and type alias declaration names."
+        },
         "reactComponentLens.highlightColors": {
           "type": "object",
           "default": {