Implement a WASM-friendly build/distribution system

[Ivshti]

Is your feature request related to a problem? Please describe. Shipping WASM-based applications (specifically wasm-bindgen) has a few issues:

• because of caching, the JS that goes with the WASM might get out of sync (different version might be loaded) from the WASM blob, which will lead to random errors/panics
• wasm-opt and other optimizations that we do is currently not part of the cargo make workflow

Describe the solution you'd like Implement a system that builds the app to a HTML/JS/CSS/WASM bundle with a single command, using the documentation at https://github.com/Stremio/stremio-web/issues/60, but also runs the wasm-opt step from the README at https://github.com/adexnetwork/adex-explorer

Describe alternatives you've considered Not sure if Webpack can help but because of it's complexity it should be avoided (it often takes us more time to figure out how to configure webpack than to write a script)

Additional context The stremio-web description of the build system should be used, except the "we should show a user friendly message prompting to refresh/restart/reinstall and contact support if it persist" and the ServiceWorker

[MartinKavik]

Simple build pipeline is implemented, see README.md for basic usage.

---

The most interesting command is cargo make bundle. How it works:

• It has 3 dependencies (i.e. commands which are executed before it) in Makefile.toml:
  • less_compile - it invokes npm run less:compile (we'll get to that later).
  • build_release - this command hasn't been changed - it builds Rust code in release mode with enabled flags lto = true and opt-level = 's' and then the app is compiled into WASM and saved to pkg directory.
  • wasm_opt - it just invokes wasm-opt -Os pkg/package_bg.wasm -o pkg/package_bg.wasm.
• Once dependencies are resolved, the main code in scripts/bundle.rs is executed. There are 4 parts:
  • prepare_dist_directory() - it just creates or removes & creates dist directory.
  • bundle_assets() - it just copies fonts directory into dist. There will be more source dirs like e.g. images.
  • bundle_index_html() - it inlines JS scipts and CSS files into index.html. It's super simple - it just replaces external links with the code. With the one exception - there is extra code: init('/stremio.wasm'); at the end of package.js. Note: It should be replaced with something more robust in the future.
  • bundle_stremio_wasm() - it just copies optimized pkg/package_bg.wasm to dist and renames it to stremio.wasm.
  • Now you can deploy the app from dist. There is an incomplete GitHub Actions script in .github/workflows_example/main.yml.

---

Let's get back to npm run less:compile. How it works:

• There is less directory in the root. It contains some folders with *.less or *.css files.
• less:compile is alias for lessc --glob less/App/styles.less styles.css - LESS compiler compiles root file less/App/styles.less and outputs styles.css. It uses plugin less-plugin-glob so we can write LESS imports like @import "../common/**";
• The most of :imports have been replaced with LESS mixins.
  • :import example (they should be all replaced with mixins)
  • a mixin example
• :global selectors have been removed from the original code.
  • Some classes have been renamed to resolve name conflicts.
  • So when the command less:compile is executed, it recursively compiles all files under the imported directories in less/App/styles.less and it should inline files like stremio-colors.css. The output is styles.css in the root of the project.

Possible future work / ideas:

• Do we want a preprocessor like PostCSS? (Autoprefixer, minifications, etc.)
• Do we want to migrate to Rust only solution in the future? (There is no Rust LESS compiler, probably because it's less popular than other technologies like SASS.)
• We should restructure / refactor LESS files because Seed/Elm architecture doesn't play well with components and CSS Modules. We should at least resolve class name conflicts. (BEM, OOCSS, inspiration from CSS frameworks like Bulma, etc.)
• It looks like the Elm community inclines to typed styles - see e.g. Design systems for Elm or elm-ui or elm-css. I also contributed to some Elm atomic css libraries like tachyons-elm and my PostCSS plugin is used in Seed's webpack quickstart to generate Rust code from CSS classes.
  • I want to write a Rust library for Seed that abstracts out CSS (once I refactor Seed's virtual dom), because TailwindCSS isn't for everyone and writing CSS feels to me like writing jQuery (no types, hard to debug, inheritance, unpredictable results, hard to refactor, selectors everywhere..). Ideas very welcome.

[MartinKavik]

Done.

FYI another interesting library for (not only) React which we can use as the inspiration for Rust CSS system - http://fela.js.org/

[Ivshti]

Great job on the pipeline!

A few comments:

• the WASM file is not version-scoped (version should be included in the filename/filepath so that we can be sure that caching is busted); I'd imagine that a very easy fix
• Re CSS: feels like jQuery to me too :) But other than that, the CSS methodologies you're suggesting seem interesting, but I"m not familiar with them so I can't help with suggestions; TailwindCSS looks like it plays well with seed though

[MartinKavik]

I: "Great job on the pipeline!"

Thanks!

I: "the WASM file is not version-scoped"

I'll fix it.

M: "I want to write a Rust library for Seed that abstracts out CSS" I: "TailwindCSS looks like it plays well with seed though"

I've done some research in the last days and I want to take inspiration from elm-ui, TailwindCSS, HSLuv, iced (and some more probably) for the library. I recommend to watch video about elm-ui (32min, you don't need to know Elm). The library will be a standalone crate and I want to rewrite kavik.cz, RealWorld example and maybe seed-rs.org into it to prove it works. I want to start working on it during next weeks. So I suggest to wait a little bit with the final CSS decision for this PoC because there will be more options in the near future.

[Ivshti]

I already did make it versioned, forgot to write here: https://github.com/Stremio/stremio-seed-poc/commit/c5916e84f0963480a757c7b6130b8dce96fa05f1

Thanks for the materials!

Re waiting: sure

[MartinKavik]

I already did

Nice!

waiting: sure

Closing the issue for now, I'll reopen it or create a new one for better CSS integration.