3. main.js

js/main.js

This file serves as the main entry point for the application's JavaScript code. It's responsible for orchestrating the various components of the application, including UI rendering, event handling, and the generation of the final Prettier configuration.

Key responsibilities of js/main.js include:

• Importing Dependencies: It imports the prettierOptions array from js/configData.js, providing access to the configuration options. It also imports UI manipulation functions (e.g., renderConfigurator, toggleDarkMode, applySavedTheme) from js/ui.js.
• DOM Element References: It retrieves references to key DOM elements, such as the download button, the textarea where the generated configuration is displayed, and the theme switch.
• buildPrettierConfig() Function: This function is the core of the configuration generation process. It iterates over the prettierOptions array, reads the current values from the corresponding input elements in the UI, and constructs a Prettier configuration object. It only includes options that have been explicitly changed by the user (i.e., those that differ from their default values).
• displayGeneratedConfig() Function: This function takes the Prettier configuration object generated by buildPrettierConfig() and displays it in the generatedConfigTextarea in a human-readable JSON format (with indentation). It also enables or disables the download button based on whether the configuration is empty.
• downloadConfigFile() Function: This function handles the download of the generated Prettier configuration as a .prettierrc.json file. It creates a Blob containing the JSON data, generates a temporary URL for the Blob, creates a temporary anchor element, triggers the download, and then cleans up the temporary resources.
• init() Function: This function initialises the application when the DOM is fully loaded. It performs the following tasks:
  • Applies any previously saved theme (light or dark mode).
  • Renders the configuration cards into the UI using the renderConfigurator() function from js/ui.js.
  • Displays the initial Prettier configuration (which may be empty or based on default values).
  • Attaches event listeners to the download button (to trigger the download), the theme switch (to toggle dark mode), and the document (to listen for the custom configChange event).
• Event Handling: It sets up event listeners to respond to user interactions, such as clicking the download button, toggling the theme switch, and changing the values of configuration options.
• Application Entry Point: It uses document.addEventListener('DOMContentLoaded', init) to ensure that the init() function is executed only after the entire HTML document has been fully loaded and parsed.

In summary, js/main.js acts as the application's central controller, coordinating the UI, handling user input, and generating the final Prettier configuration file.