Architecture docs #9
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cjpillsbury
force-pushed
the
architecture-docs
branch
from
3645db4 to
d8deefa
Compare
Add comprehensive migration documentation covering: - State management transformation patterns - Component refactoring from Media Chrome to VJS-10 - Styling and theming approach changes - Icons and asset migration - React architecture adoption - Subcomponent pattern evolution 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Update CLAUDE.md with: - Reference to MEDIA_CHROME_MIGRATION.md for architectural evolution context - Enhanced package structure documentation - Current monorepo workspace patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Document architectural influences and design philosophy including: - Media Elements: Platform-agnostic HTMLMediaElement contract evolution - Media Chrome: Foundational state management and media architecture - VidStack: Multi-framework common core architecture patterns - Base UI: Component primitives and compound component philosophy - Adobe React Spectrum: Three-layer hook architecture separation Covers planned evolution including compound components, CLI tooling, and cross-platform state management patterns. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Add detailed development guidance for the 4 foundational core packages: - @vjs-10/media-store: Framework-agnostic state management with Media Chrome-inspired patterns - @vjs-10/icons: Environment-agnostic SVG assets and utilities with build-time optimization - @vjs-10/media: Platform-agnostic HTMLMediaElement contracts following media-elements evolution - @vjs-10/playback-engine: Media engine abstraction layer supporting HLS.js and future engines Each CLAUDE.md includes: - Architecture position and dependency hierarchy - Key architectural influences (Media Chrome, Media Elements, VidStack) - Development guidelines and code patterns - TypeScript configuration and build processes - Testing guidelines and common pitfalls - Integration examples and related documentation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Add detailed development guidance for the 4 HTML platform packages: - @vjs-10/html-icons: Web component icon elements using Custom Elements API - @vjs-10/html-media-store: DOM-specific media store integration with event-driven patterns - @vjs-10/html-media-elements: Web component media UI elements with context protocol - @vjs-10/html: Complete HTML media player UI library with skin system Each CLAUDE.md includes: - Custom Element implementation patterns and Shadow DOM usage - Context protocol integration for component communication - Progressive enhancement and accessibility guidelines - Performance considerations and browser compatibility - Integration examples with VJS-10 state management - Media Chrome and Base UI architectural influence patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Add detailed development guidance for @vjs-10/react-icons: - Auto-generated React components from core SVG assets using SVGR - Build-time SVG-to-React transformation with TypeScript support - Component generation pipeline and workflow documentation - Icon usage patterns following React best practices - Accessibility implementation and theme integration guidelines - Tree-shaking optimization and bundle size considerations Key features documented: - SVGR configuration for optimal React component generation - TypeScript interface definitions for consistent icon props - Integration with VJS-10 React component ecosystem - VidStack and Base UI architectural influence patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
… guide - Fix formatting inconsistencies and improve readability - Add detailed architecture comparison between Media Chrome and VJS-10 - Expand on state management evolution with concrete examples - Include migration rationale and design decisions - Enhance code examples with better syntax highlighting 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
cjpillsbury
force-pushed
the
architecture-docs
branch
from
d8deefa to
879dbff
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.