Use EcmaScript modules

[RangerMauve]

Description:

Most modern browsers now support EcmaScript modules with import / export syntax.

This means that people could start importing and using modules on the web without having to use something like Webpack or Browserify to make bundles which IMO makes it a lot easier to experiment with these things.

ESM also gives us an obvious way to import and publish complicated dependencies. If somebody has a cool a-frame plugin that they built, users can make use of it by simply importing it from the URL it's published at without doing the CommonJS compiling dance or requiring authors to pre-compile their plugins.

Ultimately, I think this will make it easier for people to create small bits of reusable aframe code and reduce the barrier to entry for new users and help grow the ecosystem while promoting modern JavaScript practices.

[dmarcos]

A-Frame can be imported with a single script tag <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>. For 3rd party components I don't see a practical way to enforce using EcmaScript modules. A-Frame does not favor any pattern or toolchain. Developers usually distribute the code so it can be imported via a script tag or consumed via npm but nothing is preventing the use of EcmaScript modules as well. It's not clear to me what can be done on the A-Frame side. Suggestions are welcome

[ngokevin]

Yeah, no need to make anything changes (not sure what specific changes are proposed).

ECMAScript modules seem only available on the newest version of browsers too. It will take time for it to be able to be adopted in production.

[rektide]

I would like to see this ticket reopened, & the JavaScript/ECMAScript Language's official modules begin to supplant the legacy CommonJS modules A-Frame is currently authored in.

Points from about that I think support this idea:

• Three.js has made the jump & authoring for Three.js can be done via JavaScript modules now.
• Node.js has unflagged their module support in 13.2.0.
• Browser support is robust.

I expect most users would not notice this change, & would continue to use the all-in-one bundle as they do now. But for users that do not want to use a prepackaged bundle, who want to continue to use their current tools & bundlers, converting the source to ESM is a very important first step.

In my mind, it would be optimal & ideal for A-Frame to adopt similar tools & technologies to Three.js, so on that account, I'd advocate switching from Browserify to Rollup. Browserify hasn't made any progress on ESM support yet, so this change of bundlers would also help there.

Even if no work happens right away, it would be nice to re-open this issue, & leave it as something to track for those interested parties who want the power & flexibility of standard JavaScript modules when building A-Frame experiences.

[RangerMauve]

Running into some trouble now trying to use ESM modules with aframe. Since it relies on synchronous component registration, the moment you use a <script type="module"> tag, stuff stops working. Been having to use await import(url) to get stuff to work, but it also complicates things. 😅

[ELI7VH]

Running into some trouble now trying to use ESM modules with aframe. Since it relies on synchronous component registration, the moment you use a <script type="module"> tag, stuff stops working. Been having to use await import(url) to get stuff to work, but it also complicates things. 😅

Can you explain this in further detail? I think I’m running into this issue right now

[rektide]

see also #4242 for a re-open of this issue, and #5116 to at least allow some interop with esm.