@lijinmei-810/dev-inspector 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# @lijinmei-810/dev-inspector
|
|
2
|
+
|
|
3
|
+
> Dev Inspector React panel. Use it with `@lijinmei-810/dev-inspector-vite` in Vite projects.
|
|
4
|
+
|
|
5
|
+
Dev Inspector is a local development inspector panel for selecting page elements, reading styles, adjusting visual properties, and sending structured style-change intent to AI.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm i @lijinmei-810/dev-inspector
|
|
11
|
+
npm i -D @lijinmei-810/dev-inspector-vite
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Vite + React Setup
|
|
15
|
+
|
|
16
|
+
Add the Vite plugin:
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
// vite.config.ts
|
|
20
|
+
import { defineConfig } from 'vite';
|
|
21
|
+
import react from '@vitejs/plugin-react';
|
|
22
|
+
import { createDevInspectorServerPlugin } from '@lijinmei-810/dev-inspector-vite';
|
|
23
|
+
|
|
24
|
+
export default defineConfig({
|
|
25
|
+
plugins: [
|
|
26
|
+
react(),
|
|
27
|
+
createDevInspectorServerPlugin({
|
|
28
|
+
projectRoot: process.cwd(),
|
|
29
|
+
}),
|
|
30
|
+
],
|
|
31
|
+
});
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Mount the panel in the app entry:
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
// src/main.tsx
|
|
38
|
+
import { mountDevInspector } from '@lijinmei-810/dev-inspector';
|
|
39
|
+
import '@lijinmei-810/dev-inspector/style.css';
|
|
40
|
+
|
|
41
|
+
if (import.meta.env.DEV) {
|
|
42
|
+
mountDevInspector();
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## AI Install Prompt
|
|
47
|
+
|
|
48
|
+
Paste this into an AI coding assistant:
|
|
49
|
+
|
|
50
|
+
```txt
|
|
51
|
+
Please integrate Dev Inspector into this Vite + React project.
|
|
52
|
+
|
|
53
|
+
Use these exact packages:
|
|
54
|
+
- Runtime panel: @lijinmei-810/dev-inspector
|
|
55
|
+
- Vite server plugin: @lijinmei-810/dev-inspector-vite
|
|
56
|
+
|
|
57
|
+
Do not search for or install vite-plugin-dev-inspector or @lijinmei-810/dev-inspector-vite-plugin.
|
|
58
|
+
Only enable Dev Inspector in development mode.
|
|
59
|
+
Do not change business logic.
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Package Roles
|
|
63
|
+
|
|
64
|
+
- `@lijinmei-810/dev-inspector`: React runtime panel, CSS, config, and `mountDevInspector`.
|
|
65
|
+
- `@lijinmei-810/dev-inspector-vite`: Vite development server endpoints for style apply, style intents, and handoff.
|
|
66
|
+
|
|
67
|
+
Both packages are needed for full local editing and AI handoff behavior in Vite projects.
|
|
68
|
+
|
|
69
|
+
## API
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
mountDevInspector(options?)
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
The panel uses default endpoints:
|
|
76
|
+
|
|
77
|
+
- `/__dev/apply-css`
|
|
78
|
+
- `/__dev/submit-style-intent`
|
|
79
|
+
- `/__dev/style-intents`
|
|
80
|
+
- `/__dev/style-intents/delete`
|
|
81
|
+
- `/__dev/handoff`
|
|
82
|
+
- `/__dev/reveal`
|
|
83
|
+
|
|
84
|
+
These endpoints are provided by `@lijinmei-810/dev-inspector-vite`.
|