# CLI Structure This directory contains the modular CLI implementation for the Magmonium CLI Tool. ## Structure ``` bin/ ├── cli.js # Main CLI entry point ├── commands/ # Command modules │ ├── build.js # Build command implementation │ ├── translate.js # Translate command implementation │ ├── init.js # Init command implementation │ └── init/ # Init command helpers │ ├── project-structure.js # Creates project directory structure │ ├── package-json.js # Creates package.json with PWA dependencies │ ├── config-files.js # Creates configuration files (Angular, TypeScript, Service Worker) │ ├── source-files.js # Creates Angular source files with PWA features │ ├── mag-assets.js # Creates sample mag_assets structure │ ├── mag-cli-config.js # Creates mag-cli configuration │ └── pwa-files.js # Creates PWA-specific files (icons, deployment) └── README.md # This file ``` ## Commands ### `mag-cli init ` Creates a new **Progressive Web App (PWA)** with **Module Federation** capabilities. **Features Created:** #### 🏗️ **Project Structure** - Angular 19 application with TypeScript - Module Federation with Native Federation - Complete project scaffolding with proper directory structure #### 📱 **PWA Features** - **Service Worker** with caching strategies (performance & freshness) - **Web App Manifest** for installation and native app experience - **App Icons** (192x192, 512x512, 180x180, 32x32, favicon) - auto-generated from `mag_assets/logo/` - **Install prompt** with custom install button - **Offline support** with intelligent caching - **Update notifications** when new versions are available - **iOS and Windows meta tags** for better platform support #### 🔧 **Development Tools** - **Logo Compilation**: Automatic icon set generation from `mag_assets/logo/` - **PWA Testing**: Multiple server options for testing PWA features - `npm run serve:pwa` - HTTP server (recommended) - `npm run serve:pwa-python` - Python fallback server - `npm run serve:pwa-live` - Live server with auto-reload - **Deployment**: `npm run build:deploy` - Creates production-ready zip file - **Asset Management**: Integration with @magmonium/cli for asset compilation #### 🎨 **Asset Management** - **mag_assets/** structure for organized asset development - **Automatic compilation** from mag_assets to assets - **Logo compilation** from `mag_assets/logo/` to `assets/logo/` - **Watch mode** for development workflow - **Sample assets** included (buttons, forms, fields, logo) #### 📦 **Module Federation** - **Native Federation** configuration - **Component exposure** setup - **Shared dependencies** optimization - **Micro frontend ready** architecture #### 🚀 **Production Ready** - **Service Worker** configuration for production caching - **Build optimization** with budgets and tree-shaking - **Deployment scripts** for easy server deployment - **HTTPS-ready** configuration for PWA requirements **Usage:** ```bash mag-cli init my-pwa-app cd my-pwa-app npm start # Development server npm run build # Production build npm run serve:pwa # Test PWA features npm run build:deploy # Create deployment zip ``` **Generated Files:** - `src/manifest.webmanifest` - PWA manifest - `ngsw-config.json` - Service worker configuration - `src/app/services/pwa.service.ts` - PWA functionality service - `mag_assets/logo/source.svg` - App logo source (Magmonium logo) - `create-deploy-zip.js` - Deployment packaging script - `PWA-README.md` - Comprehensive PWA documentation ### `mag-cli assets` Compiles assets from `mag_assets/` to `assets/` directory. **Features:** - SVG compilation and optimization - Theme compilation (SCSS/CSS) - Translation file processing - **Logo compilation** - Generates app icon set from `mag_assets/logo/` - Form, button, and component compilation - **Worker compilation** - Compiles TypeScript workers to minified JavaScript - Copy fallback for unsupported file types - Watch mode for development - **Custom path support** - Use `-p` option to specify custom base directory **Options:** - `-c, --config ` - Config file path (default: "./mag-cli.config.js") - `-p, --path ` - Base path for mag_assets and assets directories (default: "src/shared") - `-w, --watch` - Watch for changes - `-v, --verbose` - Verbose output - `--copy-only` - Only copy files, skip compilation **Logo Compilation:** The build command includes automatic app logo/icon generation: - **Source**: First `.svg` (alphabetical) found in `mag_assets/logo/` - **Output**: Generates `icon.svg`, `192x192.png`, `512x512.png`, `180x180.png`, `32x32.png`, `favicon.ico` in `assets/logo/` - **Watch Support**: Automatically regenerates icons when source changes **Usage:** ```bash # Standard usage (looks in src/shared/mag_assets) mag-cli assets # Custom path (looks in my-app/mag_assets, outputs to my-app/assets) mag-cli assets -p my-app # With watch mode for development mag-cli assets --watch # With custom path and watch mode mag-cli assets -p my-app --watch # Edit your app logo echo '...' > mag_assets/logo/source.svg # Generate the app icon set mag-cli assets # Icons are now available in assets/logo/ ls assets/logo/ # icon.svg 192x192.png 512x512.png 180x180.png 32x32.png favicon.ico # Custom path example mag-cli assets -p apps/frontend # This will: # - Look for mag_assets in: apps/frontend/mag_assets/ # - Output compiled assets to: apps/frontend/assets/ ``` ### `mag-cli translate` Interactive translation manager for finding and adding missing translations. **Features:** - Scans source files for translation keys - Interactive prompts for missing translations - Multiple locale support - Integration with i18n workflow ## App Logo Workflow 1. **Create/Edit Logo**: Place your SVG (any filename) in `mag_assets/logo/` 2. **Build**: Run `mag-cli assets` to generate the app icon set 3. **Output**: Icons are generated in `assets/logo/` 4. **Integration**: Icons are referenced by the PWA manifest and app card **Example:** ```bash # Replace the default icon with your custom design cat > mag_assets/logo/source.svg << 'EOF' M EOF # Generate the app icon set mag-cli assets # Verify icons were generated ls assets/logo/ # icon.svg 192x192.png 512x512.png 180x180.png 32x32.png favicon.ico ``` ## Modular Design Benefits 1. **Maintainability**: Each command is in its own module 2. **Testability**: Individual modules can be tested separately 3. **Extensibility**: New commands can be added easily 4. **Reusability**: Helper modules can be shared between commands 5. **Clarity**: Clear separation of concerns ## File Size Comparison The modular approach has significantly reduced file sizes: - **Original cli.js**: ~2000+ lines - **New cli.js**: 24 lines (96% reduction) - **Individual modules**: 50-400 lines each - **Total functionality**: Enhanced with PWA features ## Asset Compilation Pipeline The build system includes a comprehensive asset compilation pipeline: 1. **SVG Icons** (`mag_assets/icons/` → `assets/icons/`) 2. **Logo** (`mag_assets/logo/` → `assets/logo/`) 3. **Themes** (`mag_assets/styles/` → `assets/styles/`) 4. **Translations** (`mag_assets/i18n/` → `assets/i18n/`) 5. **Forms** (`mag_assets/forms/` → `assets/forms/`) 6. **Buttons** (`mag_assets/buttons/` → `assets/buttons/`) 7. **Fields** (`mag_assets/fields/` → `assets/fields/`) 8. **Options** (`mag_assets/options/` → `assets/options/`) 9. **Navigation** (`mag_assets/navs/` → `assets/navs/`) 10. **Copy Fallback** (remaining files) ## PWA Integration The init command now creates a comprehensive PWA that combines: - **Module Federation**: For micro frontend architecture - **PWA Capabilities**: For native app-like experience - **Asset Management**: With @magmonium/cli integration including app logo compilation - **Modern Development**: Angular 19, TypeScript, SCSS - **Production Ready**: Service workers, caching, deployment tools, automatic icon generation This creates a modern, installable web application that can be federated with other micro frontends while providing offline capabilities and native app features. The logo compiler ensures your app has properly sized icons for all devices and platforms.