🔧 Improve Babel Configuration in unminified-config.js (ESM Target, loose Mode, Plugin Cleanup)

[eltonbaidoo]

Description

The Babel configuration in build-system/babel-config/unminified-config.js can be optimized for better maintainability, compatibility, and performance.

Identified Issues:
1. ESM Target Configuration (targets)
• Uses browsers: ['Last 2 versions'], which may not provide optimal coverage. Suggest switching to browserslist.
2. Use of loose: true in presetEnv
• This setting can generate non-standard JavaScript, potentially causing issues in strict environments.
3. Potentially Unused Babel Plugins
• Some plugins, like babel-plugin-transform-json-configuration, may be redundant or unnecessary. A dependency audit is recommended.
4. Hardcoded JSX Pragma (Preact Dependency)
• Forces Preact.createElement, limiting compatibility with React-based builds. Making it configurable would improve flexibility.
5. Missing Validation for opt_replacePluginOverrides
• No input validation, which could lead to runtime errors if an invalid value is passed.

Suggested Fixes:
• Replace browsers: ['Last 2 versions'] with browserslist for better browser targeting.
• Remove loose: true unless strictly necessary.
• Audit and remove unused Babel plugins to reduce complexity.
• Make JSX pragma configurable instead of forcing Preact.
• Add validation for opt_replacePluginOverrides to prevent unexpected errors.

Reproduction Steps

Reproduction Steps
1. Check Babel Configuration
• Open build-system/babel-config/unminified-config.js.
• Review the settings for targets, loose, and plugins.
2. Run the Build Process
• Execute:

amp build

•	Observe the build logs for unexpected behavior.

3.	Analyze Transpiled Output
•	Check if loose: true produces non-standard JavaScript.
•	Identify unused or redundant Babel plugins.
•	Verify if JSX pragma (Preact.createElement) is enforced.
4.	Test Compatibility
•	Run the transpiled JavaScript in modern browsers (Chrome, Firefox, Edge).
•	Check if ESM and non-ESM builds behave as expected.
5.	Compare Performance & Bundle Size
•	Measure the output file size.
•	Identify potential performance issues from loose mode or unnecessary plugins.
6.	Expected vs. Actual Behavior
•	Target Browsers: Should use browserslist, but currently uses Last 2 versions.
•	Loose Mode: Should be optional, but it’s enabled by default.
•	Plugins: Some may be redundant or unnecessary.
•	JSX Pragma: Should be configurable, but currently forces Preact.createElement.

Relevant Logs

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response