Architecture

Architecture Overview

This page explains how the Compose for Desktop Wizard works and how its components interact.

High-Level Overview

The wizard is a static web application built with HTML/CSS/JavaScript that:

1. Takes user input via a web form
2. Generates a customized project structure
3. Creates a ZIP file for download

No server-side processing is required, making it easy to host on GitHub Pages.

Wizard Architecture

docs
├── index.html
├── js
│   ├── gradleFiles.js
│   ├── script.js
│   ├── templateFiles.js
│   ├── themeFiles.js
│   └── utils.js
└── styles.css

Key Components

1. Web Interface index.html, styles.css

• Provides form for project configuration
• Handles user interaction
• Shows loading state during generation

2. JavaScript Modules

Main Controller js/script.js

• Orchestrates the generation process
• Manages form submission
• Assembles the final ZIP file

Utility Functions js/utils.js

• Provides helper functions for file operations
• Handles text and binary file fetching from GitHub
• Manages error handling

Template Files Module js/templateFiles.js

• Contains functions for generating customized source files
• Handles variable replacement in templates
• Creates parameterized files like build.gradle.kts, Main.kt, etc.

Gradle Files Module js/gradleFiles.js

• Manages Gradle wrapper files
• Fetches binary JAR files and configuration

Theme Files Module js/themeFiles.js

• Handles Material Design 3 theme files
• Manages color, typography, and theme configurations

Generation Process

1. User Input: User fills out form with project parameters
2. Form Submission: event handler captures form data
3. Project Structure Creation:
   • Creates folder hierarchy in memory
   • Adds files with parameters replaced
4. Template Customization:
   • Injects user options into templates
   • Adds selected dependencies
5. File Fetching:
   • Fetches static files from GitHub repository
   • Fetches binary files like Gradle wrapper JAR
6. ZIP Generation:
   • Creates ZIP file in memory using JSZip
   • Offers download to user

Technologies Used

• JSZip: For in-browser ZIP file creation
• FileSaver.js: For offering file downloads to users
• GitHub Pages: For hosting the static website
• GitHub Raw Content: For fetching template files

Generated Project Architecture

The generated project follows MVVM architecture with:

1. View Layer: Compose UI components in App.kt
2. ViewModel Layer: State management in MainViewModel.kt
3. Model Layer: Data models in Models.kt
4. Dependency Injection: Koin setup in AppModule.kt
5. Local Storage: Database functionality in Database.kt