Scratch-gui: Path to static resources is baked in, cannot be set when using as a module

[paulkaplan]

When using the GUI as a node module in another project, you should be able to specify where to find static assets like images. Right now they are baked with /static/assets/... which works for www but makes it hard to use in other projects where those files might have a different path.

/cc @rschamp part of using GUI as a component of other projects

[rschamp]

I'm not sure what the best way to solve this is for the distributable module, but for our purposes in the short term the plan should be to inline loaders and point main (or just browser) to src/ so that the gui can be built by an external webpack config. Then the containing project can configure publicPath itself.

[thisandagain]

/cc @picklesrus @kchadha

[thisandagain]

/cc @cwillisf

[thisandagain]

/cc @chrisgarrity

[chrisgarrity]

Note, a similar issue just came up with dynamic imports of tutorial image data. Remember to check tutorial images when we solve this one.

[paulkaplan]

@rschamp there are several hundred image file references throughout the repo, are we sure we want to expand every one from import asset from './asset.svg' to import asset from 'file-loader!./asset.svg? are there other options you need to pass in to inline loaders like that?

[paulkaplan]

Looks like you can also specify loaders from the CLI, maybe we should do that so that consumers who build from source can specify loader options there?

[rschamp]

Discussed offline — we probably don't want to inline the loaders for images/sounds, and let the parent project configure those (as long as we document what types of binary files like these get imported). The imports for CSS files will be tricky though, since we have a really specific config for that, so that would get really verbose... We might want to resort to documenting or exporting that config as well.

[paulkaplan]

@rschamp maybe for CSS we could have GUI extract and build the CSS using its autoprefixer/css-variables/etc plugins to build vanilla css as an asset file, then the consumer could decide how to include that built css? One example we could look at might be a repo like react-tabs which seems to do that (although I'm not 100% sure) https://github.com/reactjs/react-tabs/blob/master/webpack.config.js

[rschamp]

That would work well if we were using the dist build, but I'm not sure how well it would work for the GUI being built from src/index by the consumer to allow for updating the publicPath. We would still need to specify to use CSS modules in the WWW webpack config.

[rschamp]

I don't know how I've missed this for so long, but apparently you can dynamically update it by using __webpack_public_path__... so we should try using that since this is what it's for.

https://webpack.js.org/guides/public-path/#on-the-fly

🤦‍♂️

[chrisgarrity]

Setting __webpack_public_path__ would work if we were building different versions of gui. Unfortunately, we're building a consumer of gui (i.e. www and desktop), and the version of gui they use is already built (dist) and the static path for assets is already set. So the real solution is to use src/index.js as a browser entry point and let the consumer projects configure the static path and build gui as mentioned by @rschamp above. However, that would be a pretty big change for scratch-www, so for now the workaround is https://github.com/LLK/scratch-gui/pull/4646