Skip to content

Commit 7e10534

Browse files
owjs3901owjs3901
committed
Initial
0 parents  commit 7e10534

15 files changed

Lines changed: 2916 additions & 0 deletions

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
out/
3+
*.vsix

‎.husky/pre-commit‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bun run lint

‎.oxlintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["node_modules/eslint-plugin-devup/oxlintrc.json"]
3+
}

‎.vscode/launch.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Run React Component Lens",
6+
"type": "extensionHost",
7+
"request": "launch",
8+
"runtimeExecutable": "${execPath}",
9+
"args": [
10+
"--extensionDevelopmentPath=${workspaceFolder}"
11+
],
12+
"outFiles": [
13+
"${workspaceFolder}/out/**/*.js"
14+
],
15+
"preLaunchTask": "npm: build"
16+
}
17+
]
18+
}

‎.vscodeignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.vscode/**
2+
.husky/**
3+
.oxlintrc.json
4+
.gitignore
5+
bun.lock
6+
eslint.config.mjs
7+
out/test/**
8+
src/**
9+
test/**
10+
tsconfig.json
11+
react-component-lens-plan.md

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 owjs3
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# React Component Lens
2+
3+
Visually distinguish Server Components and Client Components in React / Next.js projects directly in your editor.
4+
5+
## Why
6+
7+
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.
8+
9+
React Component Lens solves this by coloring component tags based on whether the imported file contains `"use client"`.
10+
11+
## How It Works
12+
13+
1. Parses the active `.tsx` / `.jsx` file for JSX tags
14+
2. Resolves each import to its source file (supports relative paths, `tsconfig` path aliases, and barrel re-exports)
15+
3. Detects `"use client"` at the top of the resolved file
16+
4. Colors the tag shell (`<Component`, `>`, `/>`, `</Component>`) — props are left untouched
17+
18+
Components without `"use client"` are treated as Server Components.
19+
20+
## Settings
21+
22+
| Setting | Default | Description |
23+
|---|---|---|
24+
| `reactComponentLens.enabled` | `true` | Enable or disable decorations |
25+
| `reactComponentLens.debounceMs` | `200` | Delay before recomputing after changes (0 – 2000 ms) |
26+
| `reactComponentLens.highlightColors.clientComponent` | `#14b8a6` | Text color for Client Component tags |
27+
| `reactComponentLens.highlightColors.serverComponent` | `#f59e0b` | Text color for Server Component tags |
28+
29+
Colors can be any valid CSS color string. The VS Code Settings UI shows a color picker for these fields.
30+
31+
## Commands
32+
33+
| Command | Description |
34+
|---|---|
35+
| `React Component Lens: Refresh Decorations` | Clear caches and reapply decorations |
36+
37+
## Requirements
38+
39+
- VS Code 1.110.0 or later
40+
- A project with `.tsx` or `.jsx` files
41+
42+
No additional runtime, build step, or Next.js installation is required.
43+
44+
## License
45+
46+
MIT

‎bun.lock‎

Lines changed: 1504 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
{
2+
"name": "react-component-lens",
3+
"displayName": "React Component Lens",
4+
"description": "Highlight React Server and Client component usage directly in the editor.",
5+
"version": "0.1.0",
6+
"publisher": "owjs3",
7+
"license": "MIT",
8+
"repository": {
9+
"type": "git",
10+
"url": "./"
11+
},
12+
"categories": [
13+
"Other"
14+
],
15+
"keywords": [
16+
"react",
17+
"nextjs",
18+
"server-components",
19+
"client-components",
20+
"typescript"
21+
],
22+
"engines": {
23+
"vscode": "^1.110.0"
24+
},
25+
"activationEvents": [
26+
"onLanguage:typescriptreact",
27+
"onLanguage:javascriptreact"
28+
],
29+
"main": "./out/src/extension.js",
30+
"contributes": {
31+
"commands": [
32+
{
33+
"command": "reactComponentLens.refresh",
34+
"title": "React Component Lens: Refresh Decorations"
35+
}
36+
],
37+
"configuration": {
38+
"title": "React Component Lens",
39+
"properties": {
40+
"reactComponentLens.enabled": {
41+
"type": "boolean",
42+
"default": true,
43+
"description": "Enable React Component Lens decorations in React editors."
44+
},
45+
"reactComponentLens.debounceMs": {
46+
"type": "number",
47+
"default": 200,
48+
"minimum": 0,
49+
"maximum": 2000,
50+
"description": "Debounce delay, in milliseconds, before recomputing decorations after workspace changes."
51+
},
52+
"reactComponentLens.highlightColors": {
53+
"type": "object",
54+
"default": {
55+
"clientComponent": "#14b8a6",
56+
"serverComponent": "#f59e0b"
57+
},
58+
"additionalProperties": false,
59+
"description": "Text colors for React Component Lens decorations.",
60+
"properties": {
61+
"clientComponent": {
62+
"type": "string",
63+
"format": "color",
64+
"default": "#14b8a6",
65+
"description": "CSS text color used for Client Component usages."
66+
},
67+
"serverComponent": {
68+
"type": "string",
69+
"format": "color",
70+
"default": "#f59e0b",
71+
"description": "CSS text color used for Server Component usages."
72+
}
73+
}
74+
}
75+
}
76+
}
77+
},
78+
"scripts": {
79+
"build": "tsc -p ./tsconfig.json",
80+
"compile": "bun run build",
81+
"watch": "tsc -watch -p ./tsconfig.json",
82+
"lint": "oxlint .",
83+
"lint:fix": "oxlint . --fix",
84+
"test": "bun run build && node --test out/test/analyzer.test.js",
85+
"vscode:prepublish": "bun run build",
86+
"prepare": "husky"
87+
},
88+
"dependencies": {
89+
"typescript": "5.9.3"
90+
},
91+
"devDependencies": {
92+
"eslint-plugin-devup": "^2.0.17",
93+
"husky": "^9.1.7",
94+
"oxlint": "^1.55",
95+
"@types/node": "25.5.0",
96+
"@types/vscode": "1.110.0",
97+
"@vscode/vsce": "3.7.1",
98+
"globals": "17.4.0"
99+
}
100+
}

0 commit comments

Comments
 (0)