Support ESM import

[chriscarrollsmith]

Description

Currently, when I import js-beautifier to an ES module using an import statement and then log the object to the console, here's what I see:

import * as beautify from 'js-beautify';
console.log(beautify)

[Module: null prototype] { default: [Function: beautify] { js: [Function: js_beautify] { defaultOptions: [Function (anonymous)] }, css: [Function: css_beautify] { defaultOptions: [Function (anonymous)] }, html: [Function: style_html] { defaultOptions: [Function (anonymous)] }, js_beautify: [Function: js_beautify] { defaultOptions: [Function (anonymous)] }, css_beautify: [Function: css_beautify] { defaultOptions: [Function (anonymous)] }, html_beautify: [Function: style_html] { defaultOptions: [Function (anonymous)] } } }

Honestly not great, because it means I have to access the different beautifers through the default property, like this:

beautify.default.html()

At minimum, this needs to be added to the README so folks know the correct syntax. Preferably, the code should also be updated to better support ESM import.

[bitwiseman]

@chriscarrollsmith If you know how to update for better ESM support without breaking existing code, PR welcome.

[maxpatiiuk]

Encountered an issue with ESM support in js-beautify My ESM browser app had a single AMD dependency (@arcgis/core), and that dependency creates the global define() function. Even though I am importing js-beautify as ESM, the presence of define() function confuses it into thinking AMD import is desired: https://github.com/beautifier/js-beautify/blob/0863e19a3cd2bcbaf2483ec1836c015a643ba68d/js/index.js#L67-L69

Ideally, js-beautify would be built with separate output targets - one for CDN users (for the the script tag), and a separate one for ESM users

[bitwiseman]

@maxpatiiuk PR welcome.