Modern 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
# Install dependencies
pnpm install
# Build all packages
pnpm build
# Run tests
pnpm test
# Start development servers
pnpm dev
# Type checking
pnpm type-check
# Lint checks
pnpm lintcompose-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
- @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
- @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
- @truenine/ui - Vue3 component library integrating Element Plus, Vuetify, Varlet
- @truenine/design - AI-driven design system components
- @truenine/req - Network request utilities based on ky
- @truenine/psdk-tmap - Tencent Maps SDK wrapper
- @truenine/psdk-wxpa - WeChat Public Account SDK wrapper
- @truenine/ext-chrome - Chrome browser extension development tools
# 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 lint # Lint checks
pnpm type-check # Type checking
pnpm lint:root # Root directory lint check
# Development 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)# Build specific package
turbo run build --filter=@truenine/ui
turbo run build --filter=package-name
# Test specific package
turbo run test --filter=@truenine/shared
cd packages/package-name && npx vitest watch
# Start development server (ui, design packages only)
turbo run dev --filter=@truenine/ui
turbo run dev --filter=@truenine/design- 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
- build: depends on type-check, lint, ^build
- build-c: compilation step, depends on ^build
- build-g: post-processing step, depends on build-c
- test: depends on ^build, type-check, lint
- lint: depends on ^build
- type-check: no dependencies, can run in parallel
- TSDown packages: Generate ESM + CJS dual format with sourcemap and dts files
- Vite packages: Generate ESM format with CSS extraction and Gulp post-processing
# Run all tests
pnpm test
# Test specific package
turbo run test --filter=package-name
# Run specific test file
cd packages/package-name && npx vitest run path/to/test.spec.ts
# Run tests in watch mode
cd packages/package-name && npx vitest watch path/to/test.spec.ts- Testing Framework: Vitest + jsdom environment
- Component Testing: @vue/test-utils
- Configuration Files: Root level vitest.workspace.ts + individual package vitest.config.ts
- Test Directories:
__tests__/directories or.spec.tssuffix files
ui and design packages contain playground directories for development debugging:
# Start UI component playground
turbo run dev --filter=@truenine/ui
# Start design system playground
turbo run dev --filter=@truenine/designPlaygrounds use Vue Router for page management, providing component preview and debugging functionality.
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
workspace:^ - Packages are published to npm under
@truenine/scope with LGPL-2.1-or-later license
- Ensure all commits follow established code standards
- Include appropriate unit tests
- Run
pnpm ci:buildto ensure all checks pass - Follow the project's TypeScript and ESLint configurations
This project is licensed under LGPL-2.1-or-later.