yan100 dev kit
npm install compose-clientModern Frontend Development Toolkit - Vue3-based comprehensive frontend solutions
Compose-Client is a comprehensive frontend development toolkit built on Monorepo architecture, providing full-stack frontend solutions from UI components to platform SDKs.
- 🎨 Vue3 Component Library - Rich UI components based on Element Plus, Vuetify, Varlet
- 🛠️ Development Toolkit - Unified build configurations, type definitions and utility functions
- 🌐 Platform SDK Integration - Mainstream platform SDKs including Tencent Maps, WeChat Public Account
- 🔧 Modern Build System - TypeScript + ESM with dual format output support
- 🧩 Browser Extensions - Chrome extension development tools
- 📦 Monorepo Architecture - PNPM Workspace + Turbo build system
- Node.js: 24.5.0+
- PNPM: 10.15.0+
- Turbo: 2.5.6+
- TypeScript: 5.9.2+
- Build Tools: TSDown + Vite + Vitest
- CSS Framework: UnoCSS + SCSS
- Package Management: PNPM Catalog unified version management
``bashInstall dependencies
pnpm install
📁 Project Structure
compose-client/
├── configs/ # Build and development tool configurations
│ ├── eslint9/ # ESLint 9 configuration package
│ ├── tsconfig/ # TypeScript configuration package
│ ├── uno/ # UnoCSS configuration package
│ └── vite/ # Vite build configuration package
├── types/ # Global type definitions and TypeScript utilities
├── shared/ # Common utility functions and constants
├── vue/ # Vue3 base tools and installers
├── external/ # Third-party library wrappers (dayjs, lodash-es, vue-router, etc.)
├── ui/ # Vue3 component library (with playground)
├── design/ # Design system components (with playground)
├── req/ # Network request utilities (based on ky)
├── psdk/ # Platform SDK integrations
│ ├── tmap/ # Tencent Maps SDK
│ └── wxpa/ # WeChat Public Account SDK
├── ext/ # Browser extensions
│ └── chrome/ # Chrome extension tools
├── package.json
├── pnpm-workspace.yaml
├── turbo.json
└── vitest.workspace.ts
📦 Core Packages
$3
- @truenine/eslint9-config - Unified ESLint 9 configuration
- @truenine/tsconfig - TypeScript configuration presets
- @truenine/config-uno - UnoCSS configuration and themes
- @truenine/config-vite - Vite build configuration$3
- @truenine/types - Global TypeScript type definitions
- @truenine/shared - Common utility functions and constants
- @truenine/vue - Vue3 base tools and installers
- @truenine/external - Unified third-party library wrappers$3
- @truenine/ui - Vue3 component library integrating Element Plus, Vuetify, Varlet
- @truenine/design - AI-driven design system components$3
- @truenine/req - Network request utilities based on ky
- @truenine/psdk-tmap - Tencent Maps SDK wrapper
- @truenine/psdk-wxpa - WeChat Public Account SDK wrapper$3
- @truenine/ext-chrome - Chrome browser extension development tools🔨 Development Commands
$3
bash
Build related
pnpm build # Build all packages
pnpm build:fast # Force fast build
pnpm build:legacy # Concurrent build (12 tasks)Test related
pnpm test # Run all tests
pnpm test:legacy # Concurrent testing (10 tasks)Code quality
pnpm lintfix # Lint checks
pnpm typecheck # Type checking
pnpm lintfix:root # Root directory lint checkDevelopment servers
pnpm dev # Start all development servers
pnpm dev:single # Single task startup
pnpm dev:legacy # Concurrent startup (6 tasks)CI related
pnpm ci:build # CI build (includes all checks)
pnpm ci:quick # CI quick check (excludes tests)
`$3
bash
Build specific package
turbo run build --filter=@truenine/ui
turbo run build --filter=package-nameTest specific package
turbo run test --filter=@truenine/shared
cd packages/package-name && npx vitest watchStart development server (ui, design packages only)
turbo run dev --filter=@truenine/ui
turbo run dev --filter=@truenine/design
`🏗️ Build System
$3
- TSDown: TypeScript compilation (configs, shared, types, req, vue, external, psdk, ext)
- Vite: Modern build tool (ui, design packages with playground)
- Gulp: CSS post-processing (style optimization for ui, design packages)
- Turbo: Task orchestration and caching$3
- build: depends on typecheck, lintfix, ^build
- build-c: compilation step, depends on ^build
- build-g: post-processing step, depends on build-c
- test: depends on ^build, typecheck, lintfix
- lintfix: depends on ^build
- typecheck: no dependencies, can run in parallel$3
- TSDown packages: Generate ESM + CJS dual format with sourcemap and dts files
- Vite packages: Generate ESM format with CSS extraction and Gulp post-processing🧪 Testing
bash
Run all tests
pnpm testTest specific package
turbo run test --filter=package-nameRun specific test file
cd packages/package-name && npx vitest run path/to/test.spec.tsRun tests in watch mode
cd packages/package-name && npx vitest watch path/to/test.spec.ts
`$3
- Testing Framework: Vitest + jsdom environment
- Component Testing: @vue/test-utils
- Configuration Files: Root level vitest.workspace.ts + individual package vitest.config.ts
- Test Directories: directories or .spec.ts suffix files🎮 Playground
ui and design packages contain playground directories for development debugging:
`bash
Start UI component playground
turbo run dev --filter=@truenine/uiStart design system playground
turbo run dev --filter=@truenine/design
`Playgrounds use Vue Router for page management, providing component preview and debugging functionality.
📄 Version Management
The project uses PNPM Catalog for unified version management:
- All external dependency versions are centrally managed in pnpm-workspace.yaml
- Workspace packages reference each other via
- Packages are published to npm under scope with LGPL-2.1-or-later license🤝 Contributing Guidelines
1. Ensure all commits follow established code standards
2. Include appropriate unit tests
3. Run
pnpm ci:build` to ensure all checks passThis project is licensed under LGPL-2.1-or-later.