kaffa/anvil-hosting

Fork 0

Files

kaffa 0cde76a44c chore: anvil.it.com → inouter.com

2026-03-27 16:14:45 +00:00

4.1 KiB

Raw Permalink Blame History

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

<!-- 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:

<body x-data="anvilApp()" x-init="init()">
  <!-- Wizard and dashboard UI -->
</body>

<div x-data="pricingTable()" x-init="init()">
  <!-- Pricing table UI -->
</div>

Benefits

Separation of Concerns: Each module has a single responsibility
Maintainability: Easier to find and modify specific functionality
Testability: Individual modules can be tested independently
Code Reuse: Modules can be imported as needed
ES6 Features: Modern JavaScript syntax (import/export)
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

wrangler pages deploy . --project-name anvil-hosting

No build step required - deploy directly.

Testing

Open browser console at https://hosting.inouter.com
Check for [Anvil] Application modules loaded message
Test window.AnvilDevTools object
Verify wizard modal opens correctly
Verify pricing table loads and filters work
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

Add unit tests for each module
Implement TypeScript for type safety
Consider bundling for production (Vite, Rollup)
Add module documentation (JSDoc)
Implement code splitting for lazy loading

4.1 KiB Raw Permalink Blame History