espruino / EspruinoTools

JavaScript library of tools for Espruino - used for the Web IDE, CLI, etc.
Apache License 2.0
150 stars 89 forks source link

Webpack support #153

Closed DanTheMan827 closed 2 years ago

DanTheMan827 commented 2 years ago

This should allow the use of the Espruino library within webpack if ProvidePlugin is used with the following config.

new webpack.ProvidePlugin({
  Espruino: ["espruino/espruino.js", "Espruino"],
  // ...
});

I don't believe it will affect current use within the web ide.

gfwilliams commented 2 years ago

Have you tested this with the CLI tools and with the IDE?

Because the CLI does some weird stuff to load all the files and it may well be that this breaks it.

DanTheMan827 commented 2 years ago

I have not, but I will check it just to make sure.

I did not however change the fact that the file is a self executing anonymous function that is evaluated to return the Espruino object.

Running the contents of espruino.js either directly, or with eval results in the same output, and in the case of a browser sets a global variable named Espruino on the window object that other files can access.

The only thing that changed on the browser side is that the variable is explicitly assigned to window.Espruino now instead of just a global, but the end result is still the same, a global variable.

gfwilliams commented 2 years ago

sets a global variable named Espruino on the window object that other files can access.

I think the CLI is expecting Espruino on the global object though (which is what happens if you eval this).

My issue is: this seems like a very niche use case right now, and if it breaks any one of the online IDE, native IDE, command-line tools, espruinotools.js or a bunch of other stuff, it'll be me that has to fix it.

Is it useful for you to just include espruino.js in anything? Or do you need to include every other file in the repo via webpack as well?

Because have you considered just including espruinotools.js from webpack (https://github.com/espruino/EspruinoAppLoaderCore/blob/6857957f5aedfd9d175ecbf8e49d08bb167b8128/lib/espruinotools.js) and then ensuring we modify that to work with it (if it's even needed)? That file can already be run as a module (or from the browser) just fine.

DanTheMan827 commented 2 years ago

I've realized that webpack required a little more work that initially anticipated, so I've instead made espruino-loader.

That concatenates the browser files in a way that allows them to be used like a module within webpack.

gfwilliams commented 2 years ago

What about what I'd mentioned above with espruinotools.js? There is already a script to create it at https://github.com/espruino/EspruinoWebIDE/blob/master/extras/create_espruinotools_js.sh and it feels like that could be modified (if modifications were even needed at all) pretty easily.

DanTheMan827 commented 2 years ago

Simple concatenation won’t work with webpack because if require calls are anywhere in the file it will try to embed them.

This even applies to the code branches that don’t run in the browser.

So whenever I encounter a require call not within a string, that gets replaced with an undefined.

The loader I made concatenates the files and removes require calls… it also adds some require calls for acorn, esprima, and so on.

https://github.com/DanTheMan827/espruino-loader/blob/2f0521201419e54bd9d7477bdddaed413e78c74f/index.js