ESM build

[Lukenickerson]

I recently made a game using LittleJS and overall had a great experience. But since I like to use ES modules, it was a little awkward using the little engine because it doesn't expose the variables/methods it uses.

I'm looking to build on the previous project, and I wanted to improve this experience so I did a proof of concept turning the engine.all.js file into a file that can be imported ESM-style. See code here: https://github.com/deathraygames/wisdom-of-the-ages/tree/main/src/little-engine-esm The way it works is that if you run little-builder.js it will just append the three files together: little-header.js, engine.all.js (latest from node modules), and little-footer.js. In the footer I'm exposing all the variables and methods, and had to add a few getter and setter methods. The resulting file is little-engine-esm-build.all.js.

Work on the footer is not complete. To expand on this I would add get/set methods for all variables, and avoid exporting them directly. The downside of all of this is that makes the code somewhat larger: 177+ versus 172 KB. But to someone who loves ESM, that trade-off is worth it. Maybe someone has ideas of ways to make this smaller and/or to make the footer generation more automatic?

Would you like to have this kind of ESM build included in the LittleJS repo? If so I can fork and do a PR.

[KilledByAPixel]

That's great, thanks for doing this. When I created LJS I decided not to use modules in order to keep things as simple as possible. Generally I have not used modules that much, can you tell me more about why you prefer to use them for something like this?

Would it be possible to to make the engine build system automatically spit out engine.all.module.js? Also, is the header actually necessary?

It seems like it just needs a footer with all the missing get/set functions and the export line. I can update engine.bat file to combine all and the footer and spit out engine.all.module.js in addition to the other files. Does that sound good?

[Lukenickerson]

I love modules, and have found them good for a few reasons:

• Avoids polluting the global namespace. Import/export makes it very clear where dependencies are coming from when you open a file.
• Along those lines, since I usually use linting (ESLint extension) on my js files to check syntax, having no globals helps.
• No need to modify HTML <script> tags to bring in new modules; just import them in your js.

I anticipate the developer experience for LittleJS with ESM will be:

1. Make a new project (npm init, add html and js files)
2. Run npm i littlejsengine
3. Use import * as engine from 'littlejsengine'; (or some subset of methods, e.g., import { engineInit } from 'littlejsengine';) in their js.
4. Do some build process

Also, is the header actually necessary?

No. I thought there might be some use for it later on, but I guess not.

Does that sound good?

Yes! I made the changes and made a PR: #42 Let me know what you think.

[LeFede]

+1 to make LittleJS modules-friendly.

I'm using vite to build my stuff, and when it creates the release folder it skips adding the scripts that are not modules and modules not being used.

Of course you can manually add the files to the distribution build but it's something you don't want to do everytime.

I also use an app that makes it possible to use webpages as applications and it comes with a predefined set of commands that makes it impossible (I guess) to build the executable and add files manually right after.

So yeah +1 overall 🦊

[KilledByAPixel]

esm build now included! still needs work but this is a good path forward, thanks for your help and advice.

[KilledByAPixel]

Modules now fully supported and I added a demo that uses them!

https://killedbyapixel.github.io/LittleJS/examples/module/