update to yew master

Author: voidpumpkin

frameworks/keyed/yew-baseline/Cargo.toml

@@ -10,6 +10,7 @@ crate-type = ["cdylib"]
 [dependencies]
 rand = { version = "0.7.3", features = ["wasm-bindgen", "small_rng"] }
 wasm-bindgen = "0.2.62"
+web-sys = { version = "0.3.55", features = ["Window"]}
 
 # DO NOT MODIFY
 yew = { git = "https://github.com/yewstack/yew", branch = "master" }

frameworks/keyed/yew-baseline/bundled-dist/js-framework-benchmark-yew.js

@@ -0,0 +1,124 @@
+use rand::prelude::*;
+use std::cmp::min;
+use yew::prelude::*;
+
+use crate::jumbotron::Jumbotron;
+use crate::row::Row;
+use crate::row_data::RowData;
+
+pub struct App {
+    rows: Vec<RowData>,
+    next_id: usize,
+    selected_id: Option<usize>,
+    rng: SmallRng,
+    on_select: Callback<usize>,
+    on_remove: Callback<usize>,
+}
+
+pub enum Msg {
+    Run(usize),
+    Add(usize),
+    Update(usize),
+    Clear,
+    Swap,
+    Remove(usize),
+    Select(usize),
+}
+
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(ctx: &Context<Self>) -> Self {
+        App {
+            rows: Vec::new(),
+            next_id: 1,
+            selected_id: None,
+            rng: SmallRng::from_entropy(),
+            on_select: ctx.link().callback(Msg::Select),
+            on_remove: ctx.link().callback(Msg::Remove),
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::Run(amount) => {
+                let rng = &mut self.rng;
+                let next_id = self.next_id;
+                let update_amount = min(amount, self.rows.len());
+                for index in 0..update_amount {
+                    self.rows[index] = RowData::new(next_id + index, rng);
+                }
+                self.rows.extend(
+                    (update_amount..amount).map(|index| RowData::new(next_id + index, rng)),
+                );
+                self.next_id += amount;
+            }
+            Msg::Add(amount) => {
+                let rng = &mut self.rng;
+                let next_id = self.next_id;
+                self.rows
+                    .extend((0..amount).map(|index| RowData::new(next_id + index, rng)));
+                self.next_id += amount;
+            }
+            Msg::Update(step) => {
+                for index in (0..self.rows.len()).step_by(step) {
+                    self.rows[index].label += " !!!";
+                }
+            }
+            Msg::Clear => {
+                self.rows.clear();
+            }
+            Msg::Swap => {
+                if self.rows.len() > 998 {
+                    self.rows.swap(1, 998);
+                }
+            }
+            Msg::Remove(id) => {
+                if let Some(index) = self.rows.iter().position(|row| row.id == id) {
+                    self.rows.remove(index);
+                }
+            }
+            Msg::Select(id) => {
+                self.selected_id = Some(id);
+            }
+        }
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let rows: Html = self
+            .rows
+            .iter()
+            .map(|row| {
+                html! {
+                    <Row
+                        key={row.id}
+                        data={row.clone()}
+                        selected={self.selected_id == Some(row.id)}
+                        on_select={self.on_select.clone()}
+                        on_remove={self.on_remove.clone()}
+                    />
+                }
+            })
+            .collect();
+
+        html! {
+            <div class="container">
+                <Jumbotron
+                    on_run={ctx.link().callback(Msg::Run)}
+                    on_add={ctx.link().callback(Msg::Add)}
+                    on_update={ctx.link().callback(Msg::Update)}
+                    on_clear={ctx.link().callback(|_| Msg::Clear)}
+                    on_swap={ctx.link().callback(|_| Msg::Swap)}
+                />
+                <table class="table table-hover table-striped test-data">
+                    <tbody id="tbody">
+                        { rows }
+                    </tbody>
+                </table>
+                <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+            </div>
+        }
+    }
+}

frameworks/keyed/yew-baseline/bundled-dist/js-framework-benchmark-yew_bg.wasm

@@ -0,0 +1,37 @@
+pub static ADJECTIVES: &[&str] = &[
+    "pretty",
+    "large",
+    "big",
+    "small",
+    "tall",
+    "short",
+    "long",
+    "handsome",
+    "plain",
+    "quaint",
+    "clean",
+    "elegant",
+    "easy",
+    "angry",
+    "crazy",
+    "helpful",
+    "mushy",
+    "odd",
+    "unsightly",
+    "adorable",
+    "important",
+    "inexpensive",
+    "cheap",
+    "expensive",
+    "fancy",
+];
+
+pub static COLOURS: &[&str] = &[
+    "red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black",
+    "orange",
+];
+
+pub static NOUNS: &[&str] = &[
+    "table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger",
+    "pizza", "mouse", "keyboard",
+];

frameworks/keyed/yew-baseline/src/app.rs

@@ -0,0 +1,55 @@
+use yew::prelude::*;
+
+#[derive(Properties, Clone, PartialEq)]
+pub struct Props {
+    pub on_run: Callback<usize>,
+    pub on_add: Callback<usize>,
+    pub on_update: Callback<usize>,
+    pub on_clear: Callback<()>,
+    pub on_swap: Callback<()>,
+}
+
+pub struct Jumbotron {}
+
+impl Component for Jumbotron {
+    type Properties = Props;
+    type Message = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {}
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div class="jumbotron">
+                <div class="row">
+                    <div class="col-md-6">
+                        <h1>{ "Yew" }</h1>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="row">
+                            <div class="col-sm-6 smallpad">
+                                <button type="button" id="run" class="btn btn-primary btn-block" onclick={ctx.props().on_run.reform(|_| 1_000)}>{ "Create 1,000 rows" }</button>
+                            </div>
+                            <div class="col-sm-6 smallpad">
+                                <button type="button" class="btn btn-primary btn-block" onclick={ctx.props().on_run.reform(|_| 10_000)} id="runlots">{ "Create 10,000 rows" }</button>
+                            </div>
+                            <div class="col-sm-6 smallpad">
+                                <button type="button" class="btn btn-primary btn-block" onclick={ctx.props().on_add.reform(|_| 1_000)} id="add">{ "Append 1,000 rows" }</button>
+                            </div>
+                            <div class="col-sm-6 smallpad">
+                                <button type="button" class="btn btn-primary btn-block" onclick={ctx.props().on_update.reform(|_| 10)} id="update">{ "Update every 10th row" }</button>
+                            </div>
+                            <div class="col-sm-6 smallpad">
+                                <button type="button" class="btn btn-primary btn-block" onclick={ctx.props().on_clear.reform(|_| ())} id="clear">{ "Clear" }</button>
+                            </div>
+                            <div class="col-sm-6 smallpad">
+                                <button type="button" class="btn btn-primary btn-block" onclick={ctx.props().on_swap.reform(|_| ())} id="swaprows">{ "Swap Rows" }</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        }
+    }
+}