import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/scripts/Classes/DesignWikiStorm - Trình tạo siêu dữ liệu cho IDE'/>

# Lớp DesignWikiStorm

Lớp `DesignWikiStorm` là một tiện ích chuyên dụng được thiết kế để thu hẹp khoảng cách giữa mã nguồn của hệ thống thiết kế và các công cụ hỗ trợ năng suất cho nhà phát triển. Nó tự động hóa việc tạo `web-types.json`, một định dạng siêu dữ liệu chuẩn hóa được sử dụng bởi các IDE của JetBrains (WebStorm, IntelliJ IDEA) để cung cấp IntelliSense nâng cao, tự động hoàn thành và các mô tả tài liệu (tooltips) cho các thành phần Vue.

## Các tính năng chính

- **Tuân thủ tiêu chuẩn Web-Types** — Tạo siêu dữ liệu tuân thủ nghiêm ngặt giản đồ (schema) JSON chính thức của Web-Types.
- **Tối ưu hóa IntelliSense** — Chuyển đổi các thuộc tính, sự kiện và slot của thành phần thành các định nghĩa thân thiện với IDE.
- **Khám phá thư mục tự động** — Quét đệ quy thư viện để xác định tất cả các thành phần và siêu dữ liệu tương ứng của chúng.
- **Tự động cập nhật phiên bản** — Tự động đồng bộ hóa phiên bản siêu dữ liệu được tạo ra với phiên bản hiện tại trong `package.json`.
- **Tích hợp Framework** — Được cấu hình đặc biệt cho Vue.js, đảm bảo rằng các thẻ và thuộc tính thành phần được nhận diện chính xác trong các tệp `.vue`.

## Khởi tạo

Khởi tạo trình tạo bằng cách chỉ định thư mục đích nơi tệp `web-types.json` sẽ được lưu trữ.

**Tham số:**
- `dir: string` — Đường dẫn đến thư mục đầu ra (mặc định là `'dist'`).

```typescript
import { DesignWikiStorm } from '@dxtmisha/scripts'

const generator = new DesignWikiStorm('dist')
await generator.make()
```

## Các phương thức

### Điều khiển

- `make(): Promise<void>` — Kích hoạt quy trình tạo chính.

## Các thao tác (Operations)

### Quy trình tạo Web-Types (Web-Types Generation Workflow)

Khi `make()` được gọi, lớp sẽ điều phối một quy trình tổng hợp dữ liệu đa giai đoạn:
1. **Thu thập ngữ cảnh**: Nó tải `package.json` để lấy tên thư viện và phiên bản hiện tại.
2. **Khởi tạo Giản đồ**: Nó khởi tạo một đối tượng dựa trên giản đồ Web-Types, đặt framework thành Vue và xác định định dạng tài liệu là Markdown.
3. **Duyệt qua các thành phần**: Nó duyệt qua mọi thành phần được đăng ký trong `LibraryItems`.
4. **Phân tích chi tiết**: Đối với mỗi thành phần, nó khởi tạo `DesignWikiStormItem`, thực hiện phân tích sâu các tệp mã nguồn của thành phần để trích xuất:
    - **Tags**: Tên thành phần (ví dụ: `d1-button`).
    - **Attributes**: Tên thuộc tính, kiểu dữ liệu và giá trị mặc định.
    - **Events**: Tên các sự kiện được phát ra và dữ liệu kèm theo (payload).
    - **Slots**: Các điểm tùy chỉnh có sẵn và các biến phạm vi (scoped variables) của chúng.
5. **Lưu trữ**: Đối tượng siêu dữ liệu hợp nhất cuối cùng được ghi vào tệp `web-types.json` trong thư mục đã chỉ định.

### Tác động đến trải nghiệm nhà phát triển

Bằng cách tạo `web-types.json`, hệ thống thiết kế đảm bảo rằng các nhà phát triển sử dụng công cụ của JetBrains nhận được mức độ hỗ trợ tương đương với khi làm việc với các phần tử HTML gốc. Các kiểu thuộc tính được xác thực theo thời gian thực ngay trong IDE và các chú thích tài liệu được hiển thị trực tiếp trong trình soạn thảo mã, giảm đáng kể nhu cầu tham khảo các trang wiki bên ngoài.
