yewstack / yew Goto Github PK
View Code? Open in Web Editor NEWRust / Wasm framework for creating reliable and efficient web applications
Home Page: https://yew.rs
License: Apache License 2.0
Rust / Wasm framework for creating reliable and efficient web applications
Home Page: https://yew.rs
License: Apache License 2.0
Hey - I am not sure whether this has anything to do with yew, but cargo web start seems to currently fail on the latest emcc and non-high-sierra OSX. Perhaps you know of a workaround?
emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.37.27
clang version 4.0.0 (emscripten 1.37.27 : 1.37.27)
Target: x86_64-apple-darwin16.7.0
Thread model: posix
Mac version 10.12.6.
There error I'm getting is
error: linking with
emcc failed: exit code: 1
along with a bunch of
Error:dyld: lazy symbol binding failed: Symbol not found: _futimens
It appears related to emscripten-core/emscripten#5418
Any idea when mobile support is going to be out? if ever? THIS IS AWESOME!
I'm a big fan of Elm and Rust, so this looks great to me!
I think your first example in the README is wrong.
Surely...
fn update(model: &mut Model, msg: Msg) {
match *model {
...
}
...should be...
fn update(model: &mut Model, msg: Msg) {
match msg {
...
}
Consider to add Component
trait to add JSX-style reusable components:
<UserAvatar src={avatar} />
I've decided to release 0.2.0 faster because Components
have a good progress and could be released soon ๐
Expected features:
steps to reproduce:
I believe this is related to how the edit mode sends a signal for each keypress, but if the only keypress is enter, then something in the model is being incorrectly handled. Haven't had time to investigate.
I did some experimentation tonight, and it seems entirely possible to have the different attributes support nice-looking simple things, in addition to complex expressions.
Currently, there is code like:
<div class="view",>
<input class="toggle", type="checkbox", checked=is_complete, onclick=move|_| Msg::Toggle(idx), />
</div>
My testing shows it is possible to extend the macro in such a way that you can have:
<div class="view">
<input class="toggle" type="checkbox" checked=is_complete onclick=move|_| Msg::Toggle(idx), />
</div>
The key to making this work is, unfortunately, duplication.
Instead of:
($stack:ident (checked = $kind:expr, $($tail:tt)*)) => {
$crate::macros::set_checked(&mut $stack, $kind);
html_impl! { $stack ($($tail)*) }
};
you can do something similar to:
($stack:ident (checked = $kind:expr, $($tail:tt)*)) => {
$crate::macros::set_checked(&mut $stack, $kind);
html_impl! { $stack ($($tail)*) }
};
($stack:ident (checked = $kind:tt $($tail:tt)*)) => {
$crate::macros::set_checked(&mut $stack, $kind);
html_impl! { $stack ($($tail)*) }
};
This way, users are able to either place a single token, like a string literal or a variable name, or they can place a full expression ended with a comma.
If this is something you're interested in, I can try to make the concept happen at full-scale at some point. I put in a couple of hours tonight, but I just reset my changes because I'm too tired. I also wonder if the macro might be generalized better, to reduce code duplication throughout the macro, and to make it more robust... less prone to errors that seem temperamental.
From the readme "Clean MVC approach inspired by Elm" section, shouldn't the closing tag for button
be /button
instead of /div
?
First, I would like to say thank you for this awesome project.
I have a case where an app has empty initial model, and would need to fetch the new state before first render. This could be worked around by fetching the data and create the model manually at first before supplying it to program
/ app.run
, but I think we could do better by adding support for program
/ app.run
to receive initial message along with the empty model. I checked elm, and apparently they have support for this all along ref.
So I tried to implement this by modifying program
to receive Option<MSG>
roughly like this:
-pub fn program<M, MSG, U, V>(mut model: M, update: U, view: V)
+pub fn program<M, MSG, U, V>(mut model: M, update: U, view: V, init: Option<MSG>)
where
M: 'static,
MSG: 'static,
@@ -53,8 +53,8 @@ where
stdweb::initialize();
clear_body();
let body = document().query_selector("body").unwrap();
- // No messages at start
- let messages = Rc::new(RefCell::new(Vec::new()));
+ let init_messages = match init { Some(m) => vec![m], None => Vec::new(), };
+ let messages = Rc::new(RefCell::new(init_messages));
let mut last_frame = VNode::from(view(&model));
last_frame.apply(&body, None, messages.clone());
I wonder if this is favorable and would love to hear if there is more preferred way to do this,
Thank you!
The necessary changes for #91
Hi everyone,
I'm starting in Rust programming language and I discovered this github repository with examples I would like to test, but I have some errors I don't find the solution. First of all, I don't want to use Emscripten because I've read it's complicated and there's another way to compile in Rust without using it.
I tried to install target wasm32-unknown-unknown and asmjs-unknown-unknown in both versions (nightly and stable) but I got this kind of errors:
$ rustup target add wasm32-unknown-unknown --toolchain nightly
error: toolchain 'nightly-x86_64-pc-windows-msvc' does not contain component 'rust-std' for target 'wasm32-unknown-unknown'
$ rustup target add asmjs-unknown-unknown
error: toolchain 'stable-x86_64-pc-windows-msvc' does not contain component 'rust-std' for target 'asmjs-unknown-unknown'
I've searched in different folders and it looks like everything is well installed. For example, in rustup folder for stable version (also nightly) I have the lib folder with this components:
rustc-x86_64-pc-windows-msvc
rust-std-x86_64-pc-windows-msvc
cargo-x86_64-pc-windows-msvc
rust-docs-x86_64-pc-windows-msvc
So I don't really understand what's going on!
Also I have this other error related on crates and libraries when I try to run Counter example from this repository:
$ rustc +nightly --target wasm32-unknown-unknown -O main.rs
error[E0463]: can't find crate for chrono
--> main.rs:1:1
|
1 | extern crate chrono;
| ^^^^^^^^^^^^^^^^^^^^ can't find crate
error: aborting due to previous error
Do you have any idea why I have those errors? Can you please help me? Thank you!
The TodoMVC example isn't using localStorage to persist the todos like a typical implementation would.
I think following the web components specs rather than JSX/React is a better long-term plan, something to look into. Take a look at projects like lit-html and hyperHTML. I'm not sure how well those will transfer over to Rust, since they depend on JS template strings.
Rather than implementing a Rust-specific component model, why not reuse the web component specs as much as possible? The component model has already been standardized in the web apis.
What has to be installed for the framework to work (e.g. "emscripten") to work?
I make the artifact application, which uses Elm as the frontend. I'm currently doing a redesign+rewrite of pretty much the whole library, of which there are 4 stages. I have completed the first stage, and rewriting the web-ui will be the final stage (so a rewrite is a little ways off)
I was wondering if yew could meet my use case. Artifact feels like it would be a good candidate for a "real world implementation" as it is tiny, and almost 100% elm.
Okay, so here are my use cases:
Thanks! This library is super exciting to me -- keep it up!
When I saw the news of the release of yew
, I was of course excited for more Rust->wasm goodness, but also a bit confused as how it differed from domafic. As far as I can tell so far:
Similarities:
Differences:
yew
has the html!
macro which looks more like jsx, domafic
just uses plain Rust+generics and looks more like Elm.So I was wondering if you or @cramertj have much experience with each other's frameworks, and if so do you have any opinions on what they're best at?
It'd be great if you could do something like the Fragment syntax from React in the macro to avoid wrapping things in unnecessary divs.
fn view(model: &Model) -> Html<Msg> {
html! {
<>
<section class="todoapp",>
...
</section>
<footer class="info",>
...
</footer>
</>
}
}
Hey hey!!! Sean from the webpack team wanting to know if you have already a story for this with webpack along side. As you might already know we have a great rust => wasm story in the books and was wondering where we can help facilitate any knowledge with yew.
Looking great btw!
There should be a way to pass headers (e.g. Authrization, KeepAlive, etc) as part of the request using fetch.
IMO the most idiomatic way would be to expose a fetch constructor (instead of having the fetch method already performing the request) and allow to include the javascript fetch API arguments as methods. I can try to sketch a PR if you agree with this pattern.
When user clicks on an input field in TodoMVC example the field have to catch the focus.
Related #100
Apologies if this is already addressed, but I think there should be a way to "dispatch" (what's the correct terminology? I'm coming from Redux) multiple messages from event handlers and similar (callbacks to services, for example). This should help DRY up users' update
method.
My use-case involves wanting to clear an input and modify the model. You can think of it as a to do list for now, where the input needs to be cleared and an entry needs to be added when you click "Submit", but there's also a "Clear" button and a "Create Random" button.
As far as I can tell, the only thing to do is have update
have three different messages: one for clearing, one for submitting, and one for clearing and creating. Obviously, this is suboptimal.
Thoughts?
I noticed that there aren't really any and it'd be good to get the coverage.
Looks like there are some warnings related to mutability where it isn't needed?
Does it support old browsers like IE8/9 via asm.js?
How big is the resulting app js file for TodoMVC with asm.js?
Would you recommend it for commercial apps in production that need to target old browsers like IE8 on WinXP and Safari on iPhone4?
I'd prefer to use this at my job (compared to Elm which is very verbose) :)
Hey - from what I've seen, I'm super excited about this framework. Here's what I'm thinking. Happy to hear whether there's something like this on the roadmap.
IMO, the panic!
s in the CRM example is a sign that there should in fact be four separate models, each implementing a trait (YewTrait
). If the trait was:
trait YewTrait {
type Msg;
fn update(self, self::Msg) -> impl YewTrait;
fn view(&self) -> Html<self::Msg>;
}
Then, when update is called, it could return a model with a different type Msg
, which is associated with only the messages that are handle-able at that point. Thus, the type system means we can avoid all those panic!
statements.
Hey !
I'm wondering if you have any plans for stylesheets, maybe something along the lines of Yoga (basically, a sane subset of the flexbox model, what React Native is using).
Also, @deniskolodin did you get a chance to look at rsx ? I'm not sure any of it is actually applicable to Yew, but the author definitely has similar ideas, so it might be worth looking into.
Anyway, great job, I really like where this is heading !
How to use yew macros for server-side html rendering?
Could you add a method on VTag to change the tag name, e.g. from td
to th
?
I noticed the text saying that you can double click on a todo to edit it but that functionality isn't in the example.
I was trying to play around with yew, crates has version 0.0.1
while the git repo says 0.1.0
(crates won't resolve that version). Crates also doesn't seem to have the html module:
error[E0432]: unresolved import `yew::html`
--> src/main.rs:4:10
|
4 | use yew::html::*;
| ^^^^ Could not find `html` in `yew`
Has this not been published yet?
Doing a simple modification of the dashboard example to add a second field makes the 'fetch data' button break completely, with no error in the compilation or in console:
I changed data.json to:
{
"value": 123,
"foo": "bar"
}
and struct Status to:
struct Status {
value: u32,
foo: String
}
(and also updated the websocket update function to match, but i don't think that matters.)
Is there something else I need to do?
I'm not sure if you want to add this to the docs, but I started from scratch on a new mac, and these were the commands I needed to run. I believe the commands should be the same on linux/bsd.
(you may need to install cmake if you haven't already installed it)
curl https://sh.rustup.rs -sSf | sh
source $HOME/.cargo/env
rustup update
curl -O https://s3.amazonaws.com/mozilla-games/emscripten/releases/emsdk-portable.tar.gz
tar -xvf emsdk-portable.tar.gz
cd emsdk-portable
./emsdk update
./emsdk install sdk-incoming-64bit
./emsdk activate sdk-incoming-64bit
source ./emsdk_env.sh
cd ..
cargo install cargo-web
rustup target add asmjs-unknown-emscripten
git clone https://github.com/DenisKolodin/yew.git
cd yew/examples/counter
cargo web start
I'm not sure this belongs here, maybe this is more related to cargo-web.
Anyway, from the counter example, replace the view
function by this one :
fn view(model: &Model) -> Html<Msg> {
html! {
<div>
<nav class="menu",>
<button onclick=|_| Msg::Increment,>{ "Increment" }</button>
<button onclick=|_| Msg::Decrement,>{ "Decrement" }</button>
<button onclick=|_| Msg::Bulk(vec!(Msg::Increment, Msg::Increment)),>{ "Increment Twice" }</button>
</nav>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> // <- comment this line and it builds ok
<p>{ Local::now() }</p>
</div>
}
}
Build output :
cargo web build -v
Fresh libc v0.2.35
Fresh serde v1.0.27
Fresh itoa v0.3.4
Fresh num-traits v0.1.41
Fresh dtoa v0.4.2
Fresh time v0.1.39
Fresh num-integer v0.1.35
Fresh serde_json v1.0.9
Fresh num-iter v0.1.34
Fresh stdweb v0.3.0
Fresh num v0.1.41
Fresh yew v0.2.0
Fresh chrono v0.4.0
Compiling rust-web-client v0.1.0 (file:///home/kamek/tmp/rust-web-client)
Running `rustc --crate-name rust_web_client src/main.rs --color always --error-format json --crate-type bin --emit=dep-info,link -C debuginfo=2 -C metadata=179bbfd8c7d55638 -C extra-filename=-179bbfd8c7d55638 --out-dir /home/kamek/tmp/rust-web-client/target/asmjs-unknown-emscripten/debug/deps --target asmjs-unknown-emscripten -L dependency=/home/kamek/tmp/rust-web-client/target/asmjs-unknown-emscripten/debug/deps -L dependency=/home/kamek/tmp/rust-web-client/target/debug/deps --extern chrono=/home/kamek/tmp/rust-web-client/target/asmjs-unknown-emscripten/debug/deps/libchrono-60995f1b8c65a39b.rlib --extern yew=/home/kamek/tmp/rust-web-client/target/asmjs-unknown-emscripten/debug/deps/libyew-794e1612306427e0.rlib -C link-arg=-s -C link-arg=NO_EXIT_RUNTIME=1`
error: Could not compile `rust-web-client`.
Caused by:
process didn't exit successfully: `rustc --crate-name rust_web_client src/main.rs --color always --error-format json --crate-type bin --emit=dep-info,link -C debuginfo=2 -C metadata=179bbfd8c7d55638 -C extra-filename=-179bbfd8c7d55638 --out-dir /home/kamek/tmp/rust-web-client/target/asmjs-unknown-emscripten/debug/deps --target asmjs-unknown-emscripten -L dependency=/home/kamek/tmp/rust-web-client/target/asmjs-unknown-emscripten/debug/deps -L dependency=/home/kamek/tmp/rust-web-client/target/debug/deps --extern chrono=/home/kamek/tmp/rust-web-client/target/asmjs-unknown-emscripten/debug/deps/libchrono-60995f1b8c65a39b.rlib --extern yew=/home/kamek/tmp/rust-web-client/target/asmjs-unknown-emscripten/debug/deps/libyew-794e1612306427e0.rlib -C link-arg=-s -C link-arg=NO_EXIT_RUNTIME=1` (exit code: 101)
error: build failed
This is with rustc 1.23.
I'll try to reproduce this on my desktop.
This is obviously still really early in its development but documenting now will be easier than doing it later.
I've tried the counter example:
cd counter
cargo web start --target-webasm
It failed to build because many functions are missing in sys.
Other examples works with --target-webasm.
Maybe this is a stdweb problem?
Similar to #78, I'd like to use <canvas/>
, but in my situation I'm already rendering one via SDL. I'd like to have HTML controls and a Start button that kicks off my game when clicked.
Initially my thinking was to render the canvas hidden in the body, then change the style when the game starts. It looks like Yew clears the <body/>
element on launch, though.
Not sure to what extent this and #78 are connected, but I'm not necessarily looking for canvas support in Yew itself. I just want to use HTML controls to unhide an SDL canvas, and given Emscripten seems to expect that I've created the canvas and placed it in the body already, I'm not sure how that works with Emscripten's clearing of all contents.
Thanks.
I've got a small module that uses Yew with pulldown-cmark to render a Markdown String to a VNode; would this be something you'd want to have bundled with yew (perhaps as an optional feature), or should it be a separate crate?
I'm missing something important here, others may run into the same issue; might be good to have an example to cover this component use case. Component example only demonstrates iterating over a range: for (1..1001).map(counter)
How do I iterate over a vec
of a custom type on the model, so I can add and remove from the vec
to have the component update the number of rendered components?
Example commit with code changes: machineloop@85da6c6
When I try something like this, I get the error message below. Do I need to implement an iterator trait for the struct
in the vec
on the model?
impl Renderable<Context, Model> for Model {
fn view(&self) -> Html<Context, Self> {
let counter = |model: &CountButton| html! {
<Counter: color=model.color, onclick=Msg::ChildClicked,/>
};
html! {
<div>
<Barrier: limit=10, onsignal=|_| Msg::Repaint, />
{ for &self.count_buttons.iter().map(counter) }
</div>
}
}
}
I've released the first version at crates (#63) and this is a tracking issue for the next release. It will include:
App
type for constructing application contextThese moved to 0.3.0:
This was taken from a comment on #39 (and assumes the work in that PR is already implemented)
These can just be copied and pasted from console_log
as it is now and replace log
with something else
console_warn
console_error
console_info
console_debug
console_count
(with argument)console_time
(with argument)console_time_end
(with argument)console_profile
(with argument)console_profile_end
(with argument)These just have no arguments
console_clear
console_count
console_group
console_group_collapsed
console_group_end
console_profile
console_profile_end
console_timestamp
console_trace
console_assert
(takes a bool and a string)console_dir
console_dir_xml
console_table
It seems that this only builds on asmjs-unkown-emscripten in debug mode
I was thinking of rewriting this: http://debug.elm-lang.org/edit/Mario.elm and realized there's no way to update a canvas, afaik. This is probably a far-off feature request, but I think it would be a fun one to add, and something that elm supports, so not outside the scope of the project, I would think?
This is a very impressive framework. I would offer it would be useful to know about the performance of it's use. If there are best strategies or bad practices to be avoided. Also it would be useful as evidence for people considering it in production projects vs other frameworks.
Would be great
I mentioned this briefly in the rustlang thread but maybe that conversation would be better continued here.
I'm playing around with this library and I'm a huge fan so far. I'm interested in contributing and so I started making a simple example site to see where the unimplemented parts are of this library so that I could help out. I noticed that there was no paradigm set up for side-effects or asynchronous code, such as network requests. I was able to perform async code and mutate the model using Rc<RefCell<>> but it would not call the view again until another update triggered a re-render.
Elm handles this scenario using Commands. Is this the same way that you want to solve this problem in yew? Or is there another solution that seems more "rusty"?
We have to do it to prevent memory leaks.
Source: https://docs.rs/stdweb/*/stdweb/macro.js.html
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.