134 lines
4.1 KiB
Markdown
134 lines
4.1 KiB
Markdown
# App.js Modularization
|
|
|
|
## Overview
|
|
|
|
Original `app.js` (1370 lines) has been split into 7 ES6 modules totaling 1427 lines.
|
|
|
|
## Module Structure
|
|
|
|
```
|
|
js/
|
|
├── config.js (136 lines) - Constants and configuration
|
|
├── api.js (56 lines) - API service layer
|
|
├── utils.js (132 lines) - Utility functions
|
|
├── wizard.js (199 lines) - Server recommendation wizard
|
|
├── pricing.js (502 lines) - Pricing table component
|
|
├── dashboard.js (350 lines) - Dashboard and Telegram integration
|
|
└── app.js (52 lines) - Main entry point
|
|
```
|
|
|
|
## Module Responsibilities
|
|
|
|
### config.js
|
|
- `TELEGRAM_BOT_URL` - Telegram bot URL constant
|
|
- `PRICING_DATA` - Legacy pricing data (VAT included, monthly basis)
|
|
- `MOCK_SERVERS`, `MOCK_STATS`, `MOCK_NOTIFICATIONS` - Mock data for UI testing
|
|
- `WIZARD_CONFIG` - Server recommendation wizard configuration
|
|
|
|
### api.js
|
|
- `API_CONFIG` - API configuration (base URL, timeout, etc.)
|
|
- `ApiService` - API request helper with error handling
|
|
|
|
### utils.js
|
|
- `formatPrice()` - KRW price formatting
|
|
- `switchTab()` - Tab switching (n8n/Terraform)
|
|
- `updatePing()`, `startPingUpdates()`, `stopPingUpdates()` - Ping simulation
|
|
- DOM event listeners for visibility change and keyboard navigation
|
|
|
|
### wizard.js
|
|
- `calculateRecommendation()` - Rule-based server recommendation logic
|
|
- `createWizardMethods()` - Wizard state and methods for Alpine.js
|
|
|
|
### pricing.js
|
|
- `pricingTable()` - Pricing table component with API integration
|
|
- Caching, filtering, sorting, and modal interactions
|
|
- Supports Global (Tokyo/Osaka/Singapore) and Seoul regions
|
|
- Subtabs for instance types (Standard/Dedicated/Premium/High Memory)
|
|
|
|
### dashboard.js
|
|
- `createDashboardMethods()` - Dashboard state and methods
|
|
- Telegram Mini App integration
|
|
- Web login widget support (Telegram Login Widget)
|
|
- Server management (start/stop/delete)
|
|
- Stats and notifications
|
|
|
|
### app.js
|
|
- Module imports and integration
|
|
- `anvilApp()` - Main Alpine.js data function (merges wizard + dashboard)
|
|
- Global function exposure (`window.anvilApp`, `window.pricingTable`)
|
|
- `window.onTelegramAuth()` - Telegram web login callback
|
|
- `window.AnvilDevTools` - Development tools
|
|
|
|
## Usage in HTML
|
|
|
|
```html
|
|
<!-- ES6 Module -->
|
|
<script type="module" src="js/app.js"></script>
|
|
|
|
<!-- Alpine.js (loaded after modules) -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"></script>
|
|
```
|
|
|
|
## Alpine.js Integration
|
|
|
|
All modules expose functions to `window` for Alpine.js `x-data`:
|
|
|
|
```html
|
|
<body x-data="anvilApp()" x-init="init()">
|
|
<!-- Wizard and dashboard UI -->
|
|
</body>
|
|
|
|
<div x-data="pricingTable()" x-init="init()">
|
|
<!-- Pricing table UI -->
|
|
</div>
|
|
```
|
|
|
|
## Benefits
|
|
|
|
1. **Separation of Concerns**: Each module has a single responsibility
|
|
2. **Maintainability**: Easier to find and modify specific functionality
|
|
3. **Testability**: Individual modules can be tested independently
|
|
4. **Code Reuse**: Modules can be imported as needed
|
|
5. **ES6 Features**: Modern JavaScript syntax (import/export)
|
|
6. **Alpine.js Compatible**: All functions exposed to `window` for x-data usage
|
|
|
|
## Cloudflare Pages Compatibility
|
|
|
|
ES6 modules work natively in modern browsers. Cloudflare Pages serves them with correct MIME types:
|
|
|
|
- `.js` files → `application/javascript`
|
|
- No build step required
|
|
- Works with CSP (Content Security Policy)
|
|
|
|
## Deployment
|
|
|
|
```bash
|
|
wrangler pages deploy . --project-name anvil-hosting
|
|
```
|
|
|
|
No build step required - deploy directly.
|
|
|
|
## Testing
|
|
|
|
1. Open browser console at https://hosting.inouter.com
|
|
2. Check for `[Anvil] Application modules loaded` message
|
|
3. Test `window.AnvilDevTools` object
|
|
4. Verify wizard modal opens correctly
|
|
5. Verify pricing table loads and filters work
|
|
6. Test Telegram Mini App integration (if in Telegram environment)
|
|
|
|
## Migration Notes
|
|
|
|
- Original `app.js` backed up as `app.js.backup`
|
|
- All functionality preserved
|
|
- No breaking changes to HTML templates
|
|
- Alpine.js integration unchanged
|
|
|
|
## Future Improvements
|
|
|
|
1. Add unit tests for each module
|
|
2. Implement TypeScript for type safety
|
|
3. Consider bundling for production (Vite, Rollup)
|
|
4. Add module documentation (JSDoc)
|
|
5. Implement code splitting for lazy loading
|