Best practices: "Writing Yew component libraries which include assets"

[kinnison]

This is about:

• [ ] A typo
• [ ] Innaccurate/misleading documentation (e.g. technically incorrect advice)
• [ ] Undocumented code
• [ ] Outdated documentation
• [x] Other

Problem

While there are lots of examples, including from the Yew project itself, for writing components in a library crate; there are few, or no, examples which show how to bundle additional assets in with the component library.

I appreciate that Yew is meant to be non-"partisan" when it comes to bundling technologies; but it would seem that trunk has won most of the argument. However, when looking through trunk's documentation, I could not find anything about assets from dependencies either.

I am looking to wrapper a number of JS libraries as part of my next project, and while I could wrapper them all in my application crate, thereby bypassing the problem because all the JS and CSS will end up referenced in my top level index.html, I would prefer to write some component library crates and have them easily consumed by other application authors as well.

Details about the solution you'd like

It would be great if, alongside the tutorial which currently exists, there were out-links to exemplary crates doing this kind of thing, or even better, a tutorial about doing it at the level of the tutorial which exists already.

Questionaire (Optional)

• [ ] I'd like to write this documentation
• [x] I'd like to write this documentation but I'm not sure what's needed
• [ ] I don't have time to add this right now, but maybe later

[WorldSEnder]

trunk has solved the building problem insofar that it offers solid reloading and multiple modules with web workers. It still does not support a bundling mode, e.g. as you'd expect from tools like webpack. The reasons for this are:

• bundling á la webpack requires talking with the bundler and then rewriting code
• you might think it's possible to do it in a proc macro, but that's too early in the compilation pipeline
• There are a ton of variations on the theme of "declare a dependency on another resource" to support. If you use powerful but insane options available in webpack, you end up with a largely stringly typed resource loading mechanism that's help together with bandaids and ad-hoc choices of dozen different plugin developers.

The easiest for now, is to have most your resources in a separately bundled part of the project, if trunk doesn't support the file type and then use pre_build hooks to bundle them before copying them over, Trunk hooks. That should end up in static files that you can refer to from your code.

[kinnison]

I guess a build.rs for my library could construct the various assets, and the library could offer a function to acquire and transfer the content to a dist type tree which could be called by the application's build.rs - if that's likely to be the best bet without strongly depending on trunk per-se, then I can do that; but it doesn't feel satisfying for a tutorial. I know that some of the JS can be included automatically by #[wasm_bindgen(module=...)] but there's no equivalent for CSS etc.

I think I'll give this some more thought once I've tried writing one such library crate so I can give a better rundown of the shape of a tutorial which might have helped.

[ranile]

wasm_bindgen handles including all the assets that it uses. So if you build a library that has JS modules imported via JS Snippets, you don't have to manually import them. Only the assets used in the final binary will be loaded at page load by wasm-bindgen

[alexkazik]

I've used the trunk hooks for assets, here is an example: https://github.com/alexkazik/yew-bootstrap/tree/icons/examples/icons1

But if there is a better/easier way, I'd be happy.