Open loewenheim opened 4 years ago
Totally agree that the docs need to be much clearer. I think this might be more of an examples issue than a docs issue
Edited to remove incorrect statement about tooling
No it's definitely a docs issue, it doesn't say where the main.js
comes from
See here: https://github.com/yewstack/yew-wasm-pack-minimal/blob/master/main.js
Thank you, with that file, I eventually got it working.
main.js
to the project root:
import init, { run_app } from './pkg/todomvc.js';
async function main() {
await init('/pkg/todomvc_bg.wasm');
run_app();
}
main()
wasm-bindgen
dependency to Cargo.toml
and the following function to src/lib.rs
:
use wasm_bindgen::prelude;
pub fn run_app() -> Result<(), JsValue> {
yew::start_app::
Ok(())
}
3. Run `rollup main.js --file pkg/bundle.js --format iife`
4. In `static/index.html`, change the line
to
5. Run `python -m http.server 8000 --directory static`
Is this how the examples are intended to be built and run? In that case, I can try fixing them up and expanding the documentation.
Honestly, it's hard to answer that.
I'm not a big fan of the wasm-pack
experience. It works well enough with webpack.. but on its own, not great. It would be nice if it supported binary crates, for one. Then you wouldn't need to add that lib stuff to the Cargo.toml
and add an extra run_app
method. Furthermore, it should bundle the JS for you without needing rollup
. These shortcomings are part of the reason I think we should have a new CLI tool specifically for web apps. (wasm-pack
was originally created for packaging up wasm into npm modules)
I think for the examples we can get by with a script that calls wasm-bindgen
for you. Check out https://github.com/yewstack/yew/tree/master/examples/multi_thread for an idea of how that would work.
For the docs, we should add your steps that you've laid out since the "Using wasm-pack" section is totally broken. Do you mind fixing that?
No, I can do that. Should I refer to the wasm-pack-minimal
template?
Also, what would you say is the best way to actually produce a frontend app? The wasm-bindgen
method you posted above?
Best is too subjective IMO. My personal app uses webpack
+ wasm-pack
but that's just because I'm really familiar with webpack
.
I don't think Yew needs to give a strong recommendation at this point. I think the ideal solution is basically laid out here: https://github.com/yewstack/yew/issues/1086
I finally got around to trying one of the examples (the todomvc
one, again) with the wasm-bindgen
method from https://github.com/yewstack/yew/tree/master/examples/multi_thread. Dear lord, that was so easy. The docs for wasm-bindgen
are currently nonexistent, would that multi_thread
example be a good starting point for writing some?
I remember an issue I had getting started with wasm-pack/rollup where the problem turned out to be the Node version I was using. I had to tell NVM to use a much more recent version than the system version, but this was not at all clear from the error message I got. Maybe specifying a minimum Node version in the Getting Started section would be nice.
I’ve been trying and failing for a while to apply the instructions to the
web-sys
examples in theyew
repository. I’ll taketodomvc
as an example. Everything up to and includingwasm-pack build
is fine. The problems start at the next line:Ok, there is no
main.js
, so maybe I should putpkg/todomvc.js
? Well,Ok, so I need to install a
wasm
plugin forrollup
withnpm install @rollup/plugin-wasm --save-dev
and add a filerollup.config.js
containingNow I can run
rollup -c rollup.config.js pkg/todomvc.js --file pkg/bundle.js
. Cool. The next step is(or any other server, as the tutorial notes). Running this and visiting
localhost:8000
in my browser shows me the contents of thetodomvc
directory. Ok, not exactly what I wanted, so I runbecause
index.html
is in thestatic
directory. This time I get a page with the titleYew • TodoMVC
, which is good, but the page is entirely blank. The console shows the error messageLoading failed for the <script> with source “http://localhost:8000/todomvc.js”.
, which makes sense to me becausetodomvc.js
resides inpkg
. Also, I am now unsure whether usingrollup
even accomplished anything because I haven’t interacted withbundle.js
in any way.Maybe I’m going about this very stupidly. After all, I am a complete beginner when it comes to any sort of web development.