Technical Specification: Babel Configuration and Polyfill Visualization Tool

Overview

This single-file web application serves as a generator and visualizer for @babel/preset-env and core-js configurations. It allows developers to define target browsers, choose polyfill injection strategies, and generate valid configuration objects for their build systems.

Core Features

• Target Browsers Input: A text area to input standard browserslist strings (e.g., '> 0.25%, not dead').
• Strategy Selector: Interactive toggles for useBuiltIns settings (false, 'usage', 'entry') and corejs version selection (2, 3).
• Configuration Generator: A dynamic, syntax-highlighted code block that updates in real-time as settings are modified.
• Polyfill Previewer: A simulated list display showing typical polyfills required for the chosen environment targets.
• One-Click Copy: A "Copy to Clipboard" button with visual feedback for quick integration into babel.config.js.

UI Layout

• Header: Clean, centered title with a brief description.
• Main Tool Area: A two-column responsive layout.
  • Left Panel (Settings): Vertical stack of input fields, dropdowns, and toggle switches for configuration parameters.
  • Right Panel (Output): A high-contrast display area showing the generated JavaScript object, formatted for readability.
• Responsive Design: Stacks panels vertically on mobile devices; switches to side-by-side view on desktop.

Aesthetic & Styling

• Color Palette:
  • Background: #f8fafc (Slate 50)
  • Cards/Panels: #ffffff (White)
  • Primary Action (Buttons): #2563eb (Blue 600)
  • Text: #1e293b (Slate 800)
  • Border/Accents: #e2e8f0 (Slate 200)
• Typography: Inter (system-ui) for labels, Fira Code or equivalent monospace for output.
• Animations: Subtle fade-in for output updates, smooth hover states on buttons (transition: all 0.2s ease).

Technical Constraints & Sandbox Compatibility

• Architecture: Single HTML file containing HTML5, Vanilla CSS, and JavaScript. No build steps.
• No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. Maintain all configuration data within an object literal in the JS runtime.
• Sandbox Safety: All generated code is plain text; no eval() or dynamic script execution.
• External Assets: Use CDN-hosted resources (Tailwind CSS via CDN, Lucide Icons via CDN) to maintain the single-file structure.
• No Popups: Use custom DOM-based modal elements for notifications (e.g., "Copied to clipboard!") rather than alert().

Implementation Steps

1. Setup: Create an index.html file with a base structure using Tailwind CSS.
2. State Management: Create a configState object to store current browser targets, useBuiltIns, and corejs values.
3. Event Handling: Add event listeners to input fields that trigger a render() function.
4. Renderer: The render() function updates the DOM and formats the code block to reflect the configState.
5. Interaction: Implement the "Copy" functionality using navigator.clipboard.writeText.