Skip to content
This repository was archived by the owner on Dec 3, 2025. It is now read-only.

Commit ea392e5

Browse files
shibukawashibukawa
committed
fix readme
1 parent 1635805 commit ea392e5

3 files changed

Lines changed: 194 additions & 147 deletions

File tree

‎CONTRIBUTING.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
## Monorepo Structure
2+
3+
This project uses pnpm workspaces to manage multiple packages:
4+
5+
```
6+
packages/
7+
├── analyzer/ # Core parsing and analysis logic (platform-independent)
8+
├── extension/ # VS Code extension
9+
└── web/ # Web application (GitHub Pages)
10+
```
11+
12+
## Getting Started
13+
14+
### Prerequisites
15+
16+
- Node.js 22.x
17+
- pnpm 9.x
18+
19+
### Installation
20+
21+
```bash
22+
pnpm install
23+
```
24+
25+
### Development
26+
27+
```bash
28+
# Build all packages
29+
pnpm build
30+
31+
# Watch mode for all packages
32+
pnpm dev
33+
34+
# Run linter
35+
pnpm lint
36+
37+
# Run tests
38+
pnpm test
39+
```
40+
41+
### Package-specific Commands
42+
43+
```bash
44+
# Build analyzer only
45+
pnpm --filter @web-component-analyzer/analyzer run build
46+
47+
# Build extension only
48+
pnpm --filter web-component-analyzer run build
49+
50+
# Build web app only
51+
pnpm --filter @web-component-analyzer/web run build
52+
53+
# Start web dev server
54+
pnpm --filter @web-component-analyzer/web run dev
55+
```
56+
57+
## Packages
58+
59+
### @web-component-analyzer/analyzer
60+
61+
Core parsing and analysis logic for React and Vue 3 components. Platform-independent TypeScript library.
62+
63+
- AST parsing using SWC
64+
- Component analysis (props, state, hooks, composables, etc.)
65+
- DFD data generation
66+
- Support for React hooks and Vue 3 Composition API
67+
- Third-party library adapters (Vue Router, Pinia, React Router, SWR, TanStack Query, etc.)
68+
69+
### web-component-analyzer (extension)
70+
71+
VS Code extension that provides:
72+
73+
- Command palette integration
74+
- Webview-based DFD visualization
75+
- Real-time component analysis
76+
- Mermaid diagram rendering
77+
78+
### @web-component-analyzer/web
79+
80+
Browser-based web application for analyzing React and Vue 3 components:
81+
82+
- **Interactive Code Editor**: Monaco Editor with syntax highlighting
83+
- **Real-Time Visualization**: See DFD updates as you type
84+
- **Sample Components**: 10+ examples demonstrating different patterns (React hooks, Vue composables, etc.)
85+
- **Framework Support**: React (JSX/TSX) and Vue 3 (SFC with `<script setup>`)
86+
- **URL Sharing**: Share component code via compressed URLs
87+
- **Themed Interface**: Light (Easter) and dark (Halloween) modes with decorations
88+
- **No Installation**: Runs entirely in the browser
89+
90+
**🚀 [Try the Live Demo](https://[your-username].github.io/web-component-analyzer/)**
91+
92+
Deployed to GitHub Pages with automatic deployment via GitHub Actions.
93+
94+
## Development Workflow
95+
96+
1. Make changes to `packages/analyzer` for core logic
97+
2. Test in `packages/extension` for VS Code integration
98+
3. Test in `packages/web` for web UI
99+
100+
Changes to the analyzer package are automatically reflected in both extension and web packages through workspace references.
101+
102+
## Publishing
103+
104+
### VS Code Extension
105+
106+
```bash
107+
cd packages/extension
108+
pnpm run vscode:prepublish
109+
vsce package
110+
```

‎README.md‎

Lines changed: 84 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,92 @@
11
# Web Component Analyzer
22

3-
Visualize the internal structure of frontend components through Data Flow Diagrams (DFD).
4-
5-
**Supported Frameworks:** React, Vue 3 (Composition API with `<script setup>`)
6-
7-
## Monorepo Structure
8-
9-
This project uses pnpm workspaces to manage multiple packages:
10-
3+
Visualize the internal structure of frontend components through Data Flow Diagrams (DFD) like the following mermaid.js style.
4+
5+
```mermaid
6+
%%{init: {'theme': 'base', 'themeVariables': {'fontFamily': 'Comic Sans MS, cursive'}, 'flowchart': {'curve': 'basis', 'padding': 20}}}%%
7+
flowchart LR
8+
subgraph InputProps["Input Props"]
9+
direction TB
10+
prop_0("name")
11+
prop_1("greeting")
12+
end
13+
state_2[("count")]
14+
process_3[["handleClick"]]
15+
jsx_element_0["h1"]
16+
jsx_element_1["p"]
17+
jsx_element_2["button"]
18+
subgraph subgraph_0["JSX Output"]
19+
direction TB
20+
jsx_element_0@{ shape: hex, label: "&lt;h1&gt;" }
21+
jsx_element_1@{ shape: hex, label: "&lt;p&gt;" }
22+
jsx_element_2@{ shape: hex, label: "&lt;button&gt;" }
23+
end
24+
prop_1 eprop_1_jsx_element_0@-->|"display"| jsx_element_0
25+
eprop_1_jsx_element_0@{ animate: true }
26+
prop_0 eprop_0_jsx_element_0@-->|"display"| jsx_element_0
27+
eprop_0_jsx_element_0@{ animate: true }
28+
state_2 estate_2_jsx_element_1@-->|"display"| jsx_element_1
29+
estate_2_jsx_element_1@{ animate: true }
30+
jsx_element_2 ejsx_element_2_process_3@-->|"onClick"| process_3
31+
ejsx_element_2_process_3@{ animate: true }
32+
state_2 estate_2_process_3@-->|"reads"| process_3
33+
estate_2_process_3@{ animate: true }
34+
process_3 eprocess_3_state_2@-->|"writes"| state_2
35+
eprocess_3_state_2@{ animate: true }
36+
37+
%% Styling
38+
classDef inputProp fill:#E3F2FD,stroke:#2196F3,stroke-width:2px
39+
classDef outputProp fill:#FFF3E0,stroke:#FF9800,stroke-width:2px
40+
classDef process fill:#F3E5F5,stroke:#9C27B0,stroke-width:3px
41+
classDef dataStore fill:#E8F5E9,stroke:#4CAF50,stroke-width:2px
42+
classDef libraryHook fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
43+
classDef jsxElement fill:#FFF3E0,stroke:#FF9800,stroke-width:2px
44+
classDef contextData fill:#E1F5FE,stroke:#0288D1,stroke-width:2px
45+
classDef contextFunction fill:#FFF9C4,stroke:#F57C00,stroke-width:2px
46+
classDef exportedHandler fill:#E8F5E9,stroke:#4CAF50,stroke-width:2px
47+
class prop_0 inputProp
48+
class prop_1 inputProp
49+
class state_2 dataStore
50+
class process_3 process
51+
class jsx_element_0 jsxElement
52+
class jsx_element_1 jsxElement
53+
class jsx_element_2 jsxElement
1154
```
12-
packages/
13-
├── analyzer/ # Core parsing and analysis logic (platform-independent)
14-
├── extension/ # VS Code extension
15-
└── web/ # Web application (GitHub Pages)
16-
```
17-
18-
## Getting Started
19-
20-
### Prerequisites
21-
22-
- Node.js 22.x
23-
- pnpm 9.x
24-
25-
### Installation
26-
27-
```bash
28-
pnpm install
29-
```
30-
31-
### Development
32-
33-
```bash
34-
# Build all packages
35-
pnpm build
36-
37-
# Watch mode for all packages
38-
pnpm dev
39-
40-
# Run linter
41-
pnpm lint
42-
43-
# Run tests
44-
pnpm test
45-
```
46-
47-
### Package-specific Commands
48-
49-
```bash
50-
# Build analyzer only
51-
pnpm --filter @web-component-analyzer/analyzer run build
52-
53-
# Build extension only
54-
pnpm --filter web-component-analyzer run build
55-
56-
# Build web app only
57-
pnpm --filter @web-component-analyzer/web run build
58-
59-
# Start web dev server
60-
pnpm --filter @web-component-analyzer/web run dev
61-
```
62-
63-
## Packages
64-
65-
### @web-component-analyzer/analyzer
6655

67-
Core parsing and analysis logic for React and Vue 3 components. Platform-independent TypeScript library.
56+
## How To Use
57+
58+
Install extension
59+
60+
Launch command `Show Component DFD` from command palette.
61+
62+
## Supported Frameworks
63+
64+
* React
65+
* Router
66+
* Next.js
67+
* TanStack Router
68+
* React Router
69+
* Query
70+
* SWR
71+
* TanStack Query
72+
* Apollo
73+
* tRPC
74+
* Data Store
75+
* Zustand
76+
* Jotai
77+
* MobX
78+
* From
79+
* React Hook Form
80+
* Vue 3 (Composition API with `<script setup>`)
81+
* Vue Router
82+
* Pinia
83+
* Svelte5
84+
* SvelteKit router
6885

69-
- AST parsing using SWC
70-
- Component analysis (props, state, hooks, composables, etc.)
71-
- DFD data generation
72-
- Support for React hooks and Vue 3 Composition API
73-
- Third-party library adapters (Vue Router, Pinia, React Router, SWR, TanStack Query, etc.)
74-
75-
### web-component-analyzer (extension)
76-
77-
VS Code extension that provides:
78-
79-
- Command palette integration
80-
- Webview-based DFD visualization
81-
- Real-time component analysis
82-
- Mermaid diagram rendering
83-
84-
### @web-component-analyzer/web
85-
86-
Browser-based web application for analyzing React and Vue 3 components:
87-
88-
- **Interactive Code Editor**: Monaco Editor with syntax highlighting
89-
- **Real-Time Visualization**: See DFD updates as you type
90-
- **Sample Components**: 10+ examples demonstrating different patterns (React hooks, Vue composables, etc.)
91-
- **Framework Support**: React (JSX/TSX) and Vue 3 (SFC with `<script setup>`)
92-
- **URL Sharing**: Share component code via compressed URLs
93-
- **Themed Interface**: Light (Easter) and dark (Halloween) modes with decorations
94-
- **No Installation**: Runs entirely in the browser
95-
96-
**🚀 [Try the Live Demo](https://[your-username].github.io/web-component-analyzer/)**
97-
98-
Deployed to GitHub Pages with automatic deployment via GitHub Actions.
99-
100-
## Development Workflow
101-
102-
1. Make changes to `packages/analyzer` for core logic
103-
2. Test in `packages/extension` for VS Code integration
104-
3. Test in `packages/web` for web UI
105-
106-
Changes to the analyzer package are automatically reflected in both extension and web packages through workspace references.
107-
108-
## Publishing
109-
110-
### VS Code Extension
111-
112-
```bash
113-
cd packages/extension
114-
pnpm run vscode:prepublish
115-
vsce package
116-
```
117-
118-
### Web Application
119-
120-
GitHub Actions automatically deploys to GitHub Pages on push to main branch.
121-
122-
## Documentation
123-
124-
- **[Vue 3 Support Guide](docs/vue-support.md)** - Comprehensive guide for Vue 3 Composition API support
125-
- **[React Support](packages/extension/README.md)** - React hooks and patterns
126-
127-
## Framework Support
128-
129-
### React
130-
- ✅ Functional components with hooks
131-
- ✅ Props and state management
132-
- ✅ Context API
133-
- ✅ Third-party libraries (React Router, SWR, TanStack Query, Zustand, Jotai, MobX, etc.)
134-
135-
### Vue 3
136-
- ✅ Composition API with `<script setup>`
137-
- ✅ Props (`defineProps`)
138-
- ✅ Reactive state (`ref`, `reactive`, `computed`)
139-
- ✅ Composables and lifecycle hooks
140-
- ✅ Event emits (`defineEmits`)
141-
- ✅ Template directives (v-bind, v-on, v-model, v-if, v-for, etc.)
142-
- ✅ Vue Router integration
143-
- ✅ Pinia state management
144-
- ❌ Options API (not supported)
86+
## License
14587

146-
See the [Vue 3 Support Guide](docs/vue-support.md) for detailed documentation.
88+
Apache2
14789

148-
## License
90+
## Known Issues
14991

150-
MIT
92+
* DFD nodes are clickable and navigate to source code positions. But locations are sometimes wrong.

‎packages/extension/package.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,6 @@
3131
"main": "./out/extension.js",
3232
"contributes": {
3333
"commands": [
34-
{
35-
"command": "web-component-analyzer.showStructure",
36-
"title": "Web Component Analyzer: Show Component Structure",
37-
"category": "Web Component Analyzer"
38-
},
3934
{
4035
"command": "web-component-analyzer.showDFD",
4136
"title": "Show Component DFD",

0 commit comments

Comments
 (0)