mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 13:48:14 +00:00
Christian PillsburyandClaude
6fcb18f1d2
Replace manually-coded React icon components with SVGR-generated ones from shared SVG assets. This establishes a maintainable, single-source-of-truth system for icons across the monorepo. ## Key Changes ### ✨ SVGR Integration - Add @svgr/cli with custom configuration for React component generation - Generate components from packages/core/icons/assets/ SVG files - Implement custom templates with generation warnings and JSDoc @generated tags - Replace manual src/icons/ with auto-generated src/generated-icons/ ### 🎨 Complete Styling Support - Add fill="currentColor" to all SVG source files in core package - Configure replaceAttrValues to transform currentColor → {color} in React components - Restore full color prop functionality (fill={color} on path elements) - Maintain backwards compatibility with existing IconProps interface ### 📚 Developer Experience - Add comprehensive README.md with usage examples and development workflow - Include clear "DO NOT EDIT" warnings in all generated files - Add .gitignore to exclude generated files from version control - Provide detailed generation instructions and architecture explanation ### 🏗️ Build System Integration - Update package.json scripts: npm run generate creates React components - Integrate generation into build pipeline (npm run build runs generate first) - Add SVGR dependencies: @svgr/cli, plugins, and babel-plugin-add-jsx-attribute - Maintain existing rollup + TypeScript build chain ## Technical Implementation - **Source**: SVG files in packages/core/icons/assets/ (single source of truth) - **Generator**: SVGR v8 with custom TypeScript React templates - **Output**: Auto-generated components in src/generated-icons/ with full JSDoc - **Styling**: fill={color} props + currentColor inheritance for dynamic theming - **Types**: Preserved IconProps interface with SVGAttributes<SVGElement> + color prop ## Verification ✅ Playwright testing confirms icons render correctly with proper colors ✅ All 5 icons (Play, Pause, VolumeHigh, VolumeLow, VolumeOff) generate successfully ✅ Color prop functionality verified (fill attribute updates dynamically) ✅ Build system integration working across full monorepo ✅ Backwards compatibility maintained with existing components This implementation provides automatic React component generation while maintaining full feature parity with the original manually-coded icons. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
VJS-10 Monorepo
A monorepo for Video.js 10 related library packages, organized by platform and runtime environment.
Structure
vjs-10-monorepo/
├── packages/
│ ├── core/ # Runtime-agnostic packages
│ │ ├── media-store/ # State abstraction for media
│ │ ├── playback-engine/# Abstraction for media source management
│ │ ├── media/ # HTMLMediaElement contracts and utilities
│ │ └── icons/ # Environment-agnostic SVG icons
│ ├── html/ # DOM/Browser packages
│ │ ├── html-icons/ # HTML/DOM icon components
│ │ ├── html-media-elements/ # HTML media element components
│ │ ├── html-media-store/ # HTML media store integration
│ │ └── html/ # Complete HTML UI library
│ ├── react/ # React packages
│ │ ├── react-icons/ # React icon components
│ │ ├── react-media-elements/ # React media element components
│ │ ├── react-media-store/ # React media store hooks and context
│ │ └── react/ # Complete React UI library
│ └── react-native/ # React Native packages
│ ├── react-native-icons/ # React Native icon components
│ ├── react-native-media-elements/ # React Native media components
│ └── react-native/ # Complete React Native UI library
└── apps/ # Example applications (coming soon)
Packages
Core Packages (Runtime Agnostic)
- @vjs-10/media-store - State management for media players
- @vjs-10/playback-engine - Abstraction layer for media engines (HLS.js, Dash.js, etc.)
- @vjs-10/media - HTMLMediaElement contracts and utilities
- @vjs-10/icons - SVG icon definitions and utilities
HTML/DOM Packages
- @vjs-10/html-icons - Web component icon elements
- @vjs-10/html-media-elements - Web component media elements
- @vjs-10/html-media-store - DOM integration for media store
- @vjs-10/html - Complete HTML media player UI library
React Packages
- @vjs-10/react-icons - React icon components
- @vjs-10/react-media-elements - React media element components
- @vjs-10/react-media-store - React hooks and context for media state
- @vjs-10/react - Complete React media player UI library
React Native Packages
- @vjs-10/react-native-icons - React Native icon components (requires react-native-svg)
- @vjs-10/react-native-media-elements - React Native media components (requires react-native-video)
- @vjs-10/react-native - Complete React Native media player UI library
Getting Started
Installation
npm install
Building
Build all packages:
npm run build
Build specific package:
npm run build --workspace=@vjs-10/core
Development
# Install dependencies
npm install
# Build all packages
npm run build
# Run type checking
npm run typecheck
# Run linting
npm run lint
Package Dependencies
The packages are designed with clear dependency relationships:
- Core packages have no dependencies on other vjs-10 packages
- HTML packages depend only on core packages
- React packages depend only on core packages (peer dependency on React)
- React Native packages depend only on core packages (peer dependencies on React Native, react-native-video, react-native-svg)
This ensures maximum reusability and prevents circular dependencies.
TypeScript
All packages are written in TypeScript and use project references for efficient compilation. The monorepo uses a shared tsconfig.base.json for consistent compiler options across all packages.
License
Apache-2.0