|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +MetingJS is a JavaScript library that creates a custom HTML element `<meting-js>` for embedding music players using the APlayer HTML5 music player. It integrates with various music platforms (Netease, Tencent QQ Music, Xiami, etc.) through the Meting API to fetch music metadata and create beautiful music players in web pages. |
| 8 | + |
| 9 | +## Architecture |
| 10 | + |
| 11 | +### Core Architecture |
| 12 | +- **Custom Web Component**: Built as a Web Components custom element (`MetingJSElement` extending `HTMLElement`) |
| 13 | +- **Single Source File**: All functionality is contained in `src/Meting.js` |
| 14 | +- **External Dependencies**: Relies on APlayer for the actual music player UI and functionality |
| 15 | +- **API Integration**: Connects to Meting API endpoints to fetch music metadata from various platforms |
| 16 | + |
| 17 | +### Key Components |
| 18 | +- **MetingJSElement Class**: The main custom element that handles: |
| 19 | + - Attribute parsing and configuration |
| 20 | + - URL pattern matching for auto-detection of music links |
| 21 | + - API communication with Meting servers |
| 22 | + - APlayer instance creation and management |
| 23 | + - Lifecycle management (connect/disconnect callbacks) |
| 24 | + |
| 25 | +### Data Flow |
| 26 | +1. HTML `<meting-js>` element with attributes (server, type, id, etc.) |
| 27 | +2. Element initialization parses attributes into config and metadata |
| 28 | +3. For external music: API call to Meting service to fetch track data |
| 29 | +4. For self-hosted: Direct use of provided URL, name, artist, cover |
| 30 | +5. APlayer instance created with the processed audio data |
| 31 | +6. Music player rendered in the DOM |
| 32 | + |
| 33 | +## Development Commands |
| 34 | + |
| 35 | +### Build System |
| 36 | +```bash |
| 37 | +# Build the minified distribution file |
| 38 | +npm run build |
| 39 | + |
| 40 | +# Clean and rebuild (used by build) |
| 41 | +del dist && mkdir dist && rollup -c |
| 42 | +``` |
| 43 | + |
| 44 | +### Code Quality |
| 45 | +```bash |
| 46 | +# Lint JavaScript code |
| 47 | +npm run lint |
| 48 | + |
| 49 | +# Run ESLint on src directory |
| 50 | +eslint src |
| 51 | +``` |
| 52 | + |
| 53 | +### Testing |
| 54 | +```bash |
| 55 | +# Run tests (currently just builds the project) |
| 56 | +npm test |
| 57 | +``` |
| 58 | + |
| 59 | +### Release Process |
| 60 | +```bash |
| 61 | +# Build before publishing to npm |
| 62 | +npm run prepublishOnly |
| 63 | +``` |
| 64 | + |
| 65 | +## Build Configuration |
| 66 | + |
| 67 | +### Rollup Configuration (`rollup.config.js`) |
| 68 | +- **Input**: `src/Meting.js` |
| 69 | +- **Output**: Single minified IIFE file `dist/Meting.min.js` |
| 70 | +- **Plugins**: Version replacement and Terser minification |
| 71 | +- **Format**: Immediately Invoked Function Expression (IIFE) for browser compatibility |
| 72 | + |
| 73 | +### ESLint Rules (`.eslintrc.js`) |
| 74 | +- **Environment**: Browser, CommonJS, ES6 |
| 75 | +- **Style**: 2-space indentation, single quotes, no semicolons, Unix line breaks |
| 76 | +- **Configuration**: `eslint:recommended` extended |
| 77 | + |
| 78 | +## File Structure |
| 79 | +``` |
| 80 | +/ |
| 81 | +├── src/ |
| 82 | +│ └── Meting.js # Main source file with MetingJSElement class |
| 83 | +├── dist/ # Built distribution files (generated) |
| 84 | +├── package.json # NPM configuration and build scripts |
| 85 | +├── rollup.config.js # Rollup build configuration |
| 86 | +├── .eslintrc.js # ESLint code style configuration |
| 87 | +└── README.md # Project documentation and usage examples |
| 88 | +``` |
| 89 | + |
| 90 | +## Code Style Guidelines |
| 91 | +- Use 2-space indentation |
| 92 | +- Single quotes for strings |
| 93 | +- No semicolons |
| 94 | +- Unix line breaks |
| 95 | +- ES6+ features with Rollup/Terser minification for browser distribution |
| 96 | +- Console logging allowed (ESLint rule: `"no-console": "off"`) |
| 97 | + |
| 98 | +## Integration Notes |
| 99 | +- Requires APlayer library to be loaded before MetingJS |
| 100 | +- Uses `window.customElements.define()` to register the custom element |
| 101 | +- Supports custom API endpoints via `window.meting_api` global variable |
| 102 | +- Implements Web Components lifecycle callbacks for proper cleanup |
0 commit comments