Use import/export statements rather than <script> tags for dependencies

[appsforartists]

Remixer has very strong opinions about how it's hosted: It must be served from a folder called node_modules, with its dependencies (e.g. ./node_modules/react-dom/dist/react-dom.min.js) as peers. It is also written as a global on window.

This makes it hard for experienced JavaScript developers to use. Even though it's written in TypeScript, I have to declare const remixer: any to use the global name, which loses all type information.

As a JavaScript developer, I expect to be able to all my dependencies to be imported with import statements. <script> tags with hardcoded URLs being injected isn't cool - it circumvents my bundler and potentially duplicates dependencies like React that are already in my bundle.

I suspect you tried to expose everything in a single script tag to make life easy for newcomers, but as a newcomer, it's actually made it a lot harder for me to try Remixer. I've probably spent half an hour trying to get it to work, and I'm giving up. Even after making a package.json in the root of my static site folder and running yarn add material-remixer, I'm getting errors about node_modules/material-overlay being mis-served, and I can't even find that folder.

Remixer seems like a really nice way to be able to quickly add a console to a UI. Unfortunately, its workflow is so foreign that I can't use it.