Use npm & bundle js for browser

[TheDiscordian]

Right now we just use vanilla JS, but in order to be more friendly to new developers an npm & webpack system would likely simplify things.

[TheDiscordian]

I've given up on this issue. JS tooling simply doesn't make this easy. It's like writing code in the 90s, no compass, no map.

If someone wants to attempt it we need the following libraries bundled:

• ipfs-http-client
• bootstrap v4.6
• jquery v3.6
• localforage

We'll also need the emoji library bundled.

For scaffolding, we only need ipfs-http-client. If I attempt this again, it will be focused only on that. For DiscoChat itself, it's unlikely we'll ever use webpack (unless someone wants to put in the non-trivial effort into making that happen).

This would be a great start, but unfortunately I'm either wrestling with the tools or I'm getting useless errors (Maximum call stack size exceeded.).

Alternatively building our own tooling seems fine, it would likely take less time...

[TheDiscordian]

I ran into the exact same bug after removing every single module except ipfs-http-client, I also tried Browserify and documented the experience here.

Custom tool sounds like the easiest option, just crawl the dependencies, download the desired version from jsdelivr (let's just grab what we need from node_modules). This way we can still use NPM for versioning, warnings, etc, and we don't need to rely on the janky JS ecosystem tools to bundle the JS.

[TheDiscordian]

Custom tool minimal example:

import json, shutil

package = json.load(open("package.json"))
for i in package["dependencies"]:
	shutil.copyfile("node_modules/%s/dist/index.min.js" % i, "ui/%s.min.js" % i)

[TheDiscordian]

Updating this issue to note: If a package manager other than npm is better, totally not "locked-in" to npm.