# react-next-click-source-code

**Repository Path**: dcfeawf/react-next-click-source-code

## Basic Information

- **Project Name**: react-next-click-source-code
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-17
- **Last Updated**: 2025-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Next.js 点击跳转源码

在 Next.js 开发环境中，按住 **Shift 键**点击页面组件，自动在编辑器中打开对应的源码文件。

## 功能特性

- ✅ 按住 Shift + 点击组件即可跳转到源码
- ✅ 自动为所有 JSX 元素注入文件路径信息
- ✅ 仅在开发环境生效，不影响生产构建
- ✅ 零配置，开箱即用

## 使用方法

1. **安装依赖**
```bash
npm install
```

2. **启动开发服务器**
```bash
npm run dev
```

3. **使用功能**
   - 在浏览器中打开页面
   - 按住 **Shift 键**
   - 点击任意组件
   - 编辑器会自动打开对应的源码文件

## 实现思路

### 1. 编译时注入路径信息（Babel 插件）

通过自定义 Babel 插件 `babel-plugin-inject-component-path.js`，在编译时为所有 JSX 元素自动注入 `data-component-path` 属性，属性值为当前文件的相对路径。

```javascript
// 编译前
<div>Hello</div>

// 编译后（开发环境）
<div data-component-path="/app/components/Hello.tsx">Hello</div>
```

### 2. 客户端监听点击事件

`ClickToSource` 组件在客户端监听全局点击事件：
- 检测是否按住 Shift 键
- 向上查找 DOM 树，找到最近的带有 `data-component-path` 的元素
- 发送请求到 API Route

### 3. 服务端打开编辑器

API Route (`/api/open-in-editor`) 接收文件路径：
- 解析相对路径为绝对路径
- 使用 `launch-editor` 包在编辑器中打开文件
- 支持 VS Code、WebStorm、Sublime 等主流编辑器

## 技术栈

- **Next.js 16** - React 框架
- **Babel** - 代码转换，注入属性
- **launch-editor** - 打开编辑器

## 项目结构

```
.
├── app/
│   ├── api/
│   │   └── open-in-editor/
│   │       └── route.ts          # API 路由，处理打开编辑器请求
│   ├── components/
│   │   ├── ClickToSource.tsx     # 客户端点击监听组件
│   │   ├── TestButton.tsx        # 测试组件
│   │   └── TestCard.tsx          # 测试组件
│   ├── layout.tsx                # 根布局，注入 ClickToSource
│   └── page.tsx                  # 首页
├── babel-plugin-inject-component-path.js  # Babel 插件
├── babel.config.js               # Babel 配置
└── package.json
```

## 核心文件说明

### `babel-plugin-inject-component-path.js`
Babel 插件，在编译时为 JSX 元素注入 `data-component-path` 属性。

### `app/components/ClickToSource.tsx`
客户端组件，监听 Shift+点击事件，查找组件路径并发送请求。

### `app/api/open-in-editor/route.ts`
Next.js API Route，接收文件路径并在编辑器中打开。

## 注意事项

- 仅在开发环境（`NODE_ENV=development`）生效
- 需要配置编辑器环境变量（VS Code、WebStorm 等会自动检测）
- 确保 Next.js 使用 Babel 而不是 SWC（已通过 `babel.config.js` 配置）

## 开发

```bash
# 开发模式
npm run dev

# 构建
npm run build

# 生产模式
npm start
```

## License

MIT