Merge branch 'master' of github.com:krausest/js-framework-benchmark

krausest · Mar 29, 2023 · 9a403c0 · 9a403c0
2 parents a47f9e8 + 517f90f
commit 9a403c0
Show file tree

Hide file tree

Showing 60 changed files with 1,599 additions and 731 deletions.
diff --git a/frameworks/keyed/alpine/rollup.config.js b/frameworks/keyed/alpine/rollup.config.js
@@ -4,7 +4,7 @@ import { terser } from "rollup-plugin-terser";
 const plugins = [resolve()];
 
 if (process.env.production) {
-  plugins.push(terser({ output: { comments: false } }));
+  plugins.push(terser());
 }
 
 export default {

diff --git a/frameworks/keyed/anansi/README.md b/frameworks/keyed/anansi/README.md
@@ -0,0 +1 @@
+Because of the heavy amount of Rust dependencies, this example is pre-compiled, so you don't need to compile anything.
diff --git a/frameworks/keyed/anansi/index.html b/frameworks/keyed/anansi/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+        <head>
+            <meta charset="utf-8">
+            <title>Anansi-keyed</title>
+	    <base href="js-framework-wasm/"></base>
+            <link href="/css/currentStyle.css" rel="stylesheet"/>
+        </head>
+        <body>
+        <!--av a:id=0-->
+        <div class="container">
+            <div class="jumbotron"><div class="row">
+            <div class="col-md-6"><h1>Anansi</h1></div>
+            <div class="col-md-6"><div class="row">
+                <div class="col-sm-6 smallpad">
+                    <button id="run" class="btn btn-primary btn-block" type="button" on:click="app_on_click_0[0 1]" a:id="1">Create 1,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="runlots" class="btn btn-primary btn-block" type="button" on:click="app_on_click_1[0 1]" a:id="2">Create 10,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="add" class="btn btn-primary btn-block" type="button" on:click="app_on_click_2[0]" a:id="3">Append 1,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="update" class="btn btn-primary btn-block" type="button" on:click="app_on_click_3[0]" a:id="4">Update every 10th row</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="clear" class="btn btn-primary btn-block" type="button" on:click="app_on_click_4[0 1]" a:id="5">Clear</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="swaprows" class="btn btn-primary btn-block" type="button" on:click="app_on_click_5[0]" a:id="6">Swap Rows</button>
+                </div>
+            </div></div>
+            </div></div>
+            <table class="table table-hover table-striped test-data">
+                <tbody>
+
+                </tbody>
+            </table>
+            <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+        </div>
+    <!--/av-->
+    <script type="module" src="main.js"></script><script type="app/json">{"ctx":{"1":{"R":"0"},"2":{"R":"0"},"3":{"R":"0"},"4":{"R":"0"},"5":{"R":"0"},"6":{"R":"0"}},"objs":[[],null],"subs":[["0 0"],["0 0"]]}</script>
+    </body>
+</html>
diff --git a/frameworks/keyed/anansi/js-framework-comps/Cargo.toml b/frameworks/keyed/anansi/js-framework-comps/Cargo.toml
@@ -0,0 +1,20 @@
+[package]
+name = "js-framework-comps"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+wasm-bindgen = "0.2"
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
+wasm-bindgen-futures = "0.4"
+anansi-aux = "0.14"
+getrandom = { version = "0.2.8", features = ["js"] }
+rand = "0.8.5"
+web-sys = "0.3.61"
+
+[features]
+server = []
+client = []
diff --git a/frameworks/keyed/anansi/js-framework-comps/src/.parsed/app.rs b/frameworks/keyed/anansi/js-framework-comps/src/.parsed/app.rs
diff --git a/frameworks/keyed/anansi/js-framework-comps/src/app.rs b/frameworks/keyed/anansi/js-framework-comps/src/app.rs
@@ -0,0 +1,129 @@
+use std::sync::atomic::{AtomicUsize, Ordering};
+use rand::prelude::*;
+use anansi_aux::prelude::*;
+
+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",
+];
+
+static COLOURS: &[&str] = &[
+    "red", "yellow", "blue", "green", "pink", "brown", "purple", "brown",
+    "white", "black", "orange",
+];
+
+static NOUNS: &[&str] = &[
+    "table", "chair", "house", "bbq", "desk", "car", "pony", "cookie",
+    "sandwich", "burger", "pizza", "mouse", "keyboard",
+];
+
+#[refchild]
+#[derive(Serialize, Deserialize, Debug)]
+struct RowData {
+    id: usize,
+    label: String,
+}
+
+static ID_COUNTER: AtomicUsize = AtomicUsize::new(1);
+
+fn append_data(data: &mut RefVec<RowData>, count: usize) {
+    let mut thread_rng = thread_rng();
+
+    for _ in 0..count {
+        let adjective = ADJECTIVES.choose(&mut thread_rng).unwrap();
+        let colour = COLOURS.choose(&mut thread_rng).unwrap();
+        let noun = NOUNS.choose(&mut thread_rng).unwrap();
+        let label = format!("{} {} {}", adjective, colour, noun);
+
+        data.push(RowData::child(ID_COUNTER.load(Ordering::Relaxed), label));
+
+        ID_COUNTER.store(ID_COUNTER.load(Ordering::Relaxed) + 1, Ordering::Relaxed);
+    }
+}
+
+fn build_data(data: &mut Signal<RefVec<RowData>>, count: usize) {
+    let mut data = data.value_mut();
+    data.clear();
+    append_data(&mut data, count);
+}
+
+#[function_component(App)]
+fn init() -> Rsx {
+    let mut data = signal!(RefVec<RowData>, RefVec::new());
+    let mut selected = signal!(Option<usize>, None);
+
+    rsx!(data, selected, {
+        <div class="container">
+            <div class="jumbotron"><div class="row">
+            <div class="col-md-6"><h1>Anansi</h1></div>
+            <div class="col-md-6"><div class="row">
+                <div class="col-sm-6 smallpad">
+                    <button id="run" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, selected, {
+                        build_data(data, 1_000);
+                        *selected.value_mut() = None;
+                    }))>Create 1,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="runlots" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, selected, {
+                        build_data(data, 10_000);
+                        *selected.value_mut() = None;
+                    }))>Create 10,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="add" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, {
+                        append_data(&mut data.value_mut(), 1_000);
+                    }))>Append 1,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="update" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, {
+                        for mut row in data.value_mut().iter_mut().step_by(10) {
+                            row.label_mut().push_str(" !!!");
+                        }
+                    }))>Update every 10th row</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="clear" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, selected, {
+                        data.value_mut().clear();
+                        *selected.value_mut() = None;
+                    }))>Clear</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button id="swaprows" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, {
+                        let value = data.value_mut();
+                        if value.len() > 998 {
+                            value.swap(1, 998);
+                        }
+                    }))>Swap Rows</button>
+                </div>
+            </div></div>
+            </div></div>
+            <table class="table table-hover table-striped test-data">
+                <tbody>
+                    @keyed row in data.value_mut().iter_mut() {
+                        <tr key=@row.id() class=@if *selected.value() == Some(*row.id()) {
+                            @:"danger"
+                        } else {
+                            @:""
+                        }>
+                            <td class="col-md-1">@row.id()</td>
+                            <td class="col-md-4"><a @onclick(callback!(selected, row, {
+                                *selected.value_mut() = Some(*row.id());
+                            }))>@row.label()</a></td>
+                            <td class="col-md-1"><a @onclick(callback!(data, row, {
+                                let value = data.value_mut();
+                                let id = *row.id();
+                                release!(row);
+                                let pos = value.iter().position(|r| {*r.id() == id}).expect("problem finding position");
+                                value.remove(pos);
+                            }))><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
+                            <td class="col-md-6"/>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+            <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+        </div>
+    });
+}
diff --git a/frameworks/keyed/anansi/js-framework-comps/src/lib.rs b/frameworks/keyed/anansi/js-framework-comps/src/lib.rs
@@ -0,0 +1,5 @@
+pub mod app;
+
+anansi_aux::app_components! {
+    app::App,
+}
diff --git a/frameworks/keyed/anansi/js-framework-wasm/Cargo.toml b/frameworks/keyed/anansi/js-framework-wasm/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "js-framework-wasm"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+wasm-bindgen = "0.2"
+anansi-aux = "0.14"
+js-framework-comps = { path = "../js-framework-comps" , version = "*" }
+
+[lib]
+crate-type = ["cdylib"]
diff --git a/frameworks/keyed/anansi/js-framework-wasm/main.js b/frameworks/keyed/anansi/js-framework-wasm/main.js
@@ -0,0 +1,65 @@
+const registerServiceWorker = async () => {
+  if ('serviceWorker' in navigator) {
+    try {
+      const registration = await navigator.serviceWorker.register(
+        '/frameworks/keyed/anansi/js-framework-wasm/sw.js',
+        {
+          scope: '/frameworks/keyed/anansi/js-framework-wasm/',
+        }
+      );
+    } catch (error) {
+      console.error(`Registration failed with ${error}`);
+    }
+  }
+};
+registerServiceWorker();
+
+let mod;
+const ids = new Map();
+
+document.addEventListener('click', (e) => {
+  let paths = e.composedPath();
+  let callback;
+  let id;
+
+  for (let i = 0; i < paths.length; i++) {
+    let el = paths[i];
+
+    let attributes = el.attributes;
+    if (attributes) {
+      let onclick = attributes.getNamedItem('on:click');
+      if (onclick) {
+        let aid = ids.get(onclick.value);
+        if (!aid) {
+          aid = attributes.getNamedItem('a:id');
+          ids.set(onclick.value, aid);
+        }
+        if (onclick && aid) {
+          callback = onclick.value;
+          id = aid.value;
+          break;
+        }
+      }
+      let rid = attributes.getNamedItem('rid');
+      if (rid) {
+        let called = mod.recall(rid.value);
+        if (called) {
+          return;
+        }
+      }
+    }
+  }
+  if (callback) {
+    if (mod) {
+      mod.call(callback, id);
+    } else {
+      import('/frameworks/keyed/anansi/js-framework-wasm/pkg/js_framework_wasm.js').then((module) => {
+        module.default().then(() => {
+          module.start();
+          mod = module;
+          mod.call(callback, id);
+        });
+      });
+    }
+  }
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Because of the heavy amount of Rust dependencies, this example is pre-compiled, so you don't need to compile anything.