Skip to content

Commit 9a403c0

Browse files
krausestkrausest
committed
Merge branch 'master' of github.com:krausest/js-framework-benchmark
2 parents a47f9e8 + 517f90f commit 9a403c0

File tree

60 files changed

+1599
-731
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+1599
-731
lines changed

‎frameworks/keyed/alpine/rollup.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { terser } from "rollup-plugin-terser";
44
const plugins = [resolve()];
55

66
if (process.env.production) {
7-
plugins.push(terser({ output: { comments: false } }));
7+
plugins.push(terser());
88
}
99

1010
export default {

‎frameworks/keyed/anansi/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Because of the heavy amount of Rust dependencies, this example is pre-compiled, so you don't need to compile anything.

‎frameworks/keyed/anansi/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Anansi-keyed</title>
6+
<base href="js-framework-wasm/"></base>
7+
<link href="/css/currentStyle.css" rel="stylesheet"/>
8+
</head>
9+
<body>
10+
<!--av a:id=0-->
11+
<div class="container">
12+
<div class="jumbotron"><div class="row">
13+
<div class="col-md-6"><h1>Anansi</h1></div>
14+
<div class="col-md-6"><div class="row">
15+
<div class="col-sm-6 smallpad">
16+
<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>
17+
</div>
18+
<div class="col-sm-6 smallpad">
19+
<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>
20+
</div>
21+
<div class="col-sm-6 smallpad">
22+
<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>
23+
</div>
24+
<div class="col-sm-6 smallpad">
25+
<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>
26+
</div>
27+
<div class="col-sm-6 smallpad">
28+
<button id="clear" class="btn btn-primary btn-block" type="button" on:click="app_on_click_4[0 1]" a:id="5">Clear</button>
29+
</div>
30+
<div class="col-sm-6 smallpad">
31+
<button id="swaprows" class="btn btn-primary btn-block" type="button" on:click="app_on_click_5[0]" a:id="6">Swap Rows</button>
32+
</div>
33+
</div></div>
34+
</div></div>
35+
<table class="table table-hover table-striped test-data">
36+
<tbody>
37+
38+
</tbody>
39+
</table>
40+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
41+
</div>
42+
<!--/av-->
43+
<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>
44+
</body>
45+
</html>

‎frameworks/keyed/anansi/js-framework-comps/Cargo.toml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
[package]
2+
name = "js-framework-comps"
3+
version = "0.1.0"
4+
edition = "2021"
5+
6+
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7+
8+
[dependencies]
9+
wasm-bindgen = "0.2"
10+
serde = { version = "1.0", features = ["derive"] }
11+
serde_json = "1.0"
12+
wasm-bindgen-futures = "0.4"
13+
anansi-aux = "0.14"
14+
getrandom = { version = "0.2.8", features = ["js"] }
15+
rand = "0.8.5"
16+
web-sys = "0.3.61"
17+
18+
[features]
19+
server = []
20+
client = []

‎frameworks/keyed/anansi/js-framework-comps/src/.parsed/app.rs

Lines changed: 240 additions & 0 deletions
Large diffs are not rendered by default.

‎frameworks/keyed/anansi/js-framework-comps/src/app.rs

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
use std::sync::atomic::{AtomicUsize, Ordering};
2+
use rand::prelude::*;
3+
use anansi_aux::prelude::*;
4+
5+
static ADJECTIVES: &[&str] = &[
6+
"pretty", "large", "big", "small", "tall", "short", "long", "handsome",
7+
"plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful",
8+
"mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
9+
"cheap", "expensive", "fancy",
10+
];
11+
12+
static COLOURS: &[&str] = &[
13+
"red", "yellow", "blue", "green", "pink", "brown", "purple", "brown",
14+
"white", "black", "orange",
15+
];
16+
17+
static NOUNS: &[&str] = &[
18+
"table", "chair", "house", "bbq", "desk", "car", "pony", "cookie",
19+
"sandwich", "burger", "pizza", "mouse", "keyboard",
20+
];
21+
22+
#[refchild]
23+
#[derive(Serialize, Deserialize, Debug)]
24+
struct RowData {
25+
id: usize,
26+
label: String,
27+
}
28+
29+
static ID_COUNTER: AtomicUsize = AtomicUsize::new(1);
30+
31+
fn append_data(data: &mut RefVec<RowData>, count: usize) {
32+
let mut thread_rng = thread_rng();
33+
34+
for _ in 0..count {
35+
let adjective = ADJECTIVES.choose(&mut thread_rng).unwrap();
36+
let colour = COLOURS.choose(&mut thread_rng).unwrap();
37+
let noun = NOUNS.choose(&mut thread_rng).unwrap();
38+
let label = format!("{} {} {}", adjective, colour, noun);
39+
40+
data.push(RowData::child(ID_COUNTER.load(Ordering::Relaxed), label));
41+
42+
ID_COUNTER.store(ID_COUNTER.load(Ordering::Relaxed) + 1, Ordering::Relaxed);
43+
}
44+
}
45+
46+
fn build_data(data: &mut Signal<RefVec<RowData>>, count: usize) {
47+
let mut data = data.value_mut();
48+
data.clear();
49+
append_data(&mut data, count);
50+
}
51+
52+
#[function_component(App)]
53+
fn init() -> Rsx {
54+
let mut data = signal!(RefVec<RowData>, RefVec::new());
55+
let mut selected = signal!(Option<usize>, None);
56+
57+
rsx!(data, selected, {
58+
<div class="container">
59+
<div class="jumbotron"><div class="row">
60+
<div class="col-md-6"><h1>Anansi</h1></div>
61+
<div class="col-md-6"><div class="row">
62+
<div class="col-sm-6 smallpad">
63+
<button id="run" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, selected, {
64+
build_data(data, 1_000);
65+
*selected.value_mut() = None;
66+
}))>Create 1,000 rows</button>
67+
</div>
68+
<div class="col-sm-6 smallpad">
69+
<button id="runlots" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, selected, {
70+
build_data(data, 10_000);
71+
*selected.value_mut() = None;
72+
}))>Create 10,000 rows</button>
73+
</div>
74+
<div class="col-sm-6 smallpad">
75+
<button id="add" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, {
76+
append_data(&mut data.value_mut(), 1_000);
77+
}))>Append 1,000 rows</button>
78+
</div>
79+
<div class="col-sm-6 smallpad">
80+
<button id="update" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, {
81+
for mut row in data.value_mut().iter_mut().step_by(10) {
82+
row.label_mut().push_str(" !!!");
83+
}
84+
}))>Update every 10th row</button>
85+
</div>
86+
<div class="col-sm-6 smallpad">
87+
<button id="clear" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, selected, {
88+
data.value_mut().clear();
89+
*selected.value_mut() = None;
90+
}))>Clear</button>
91+
</div>
92+
<div class="col-sm-6 smallpad">
93+
<button id="swaprows" class="btn btn-primary btn-block" type="button" @onclick(callback!(data, {
94+
let value = data.value_mut();
95+
if value.len() > 998 {
96+
value.swap(1, 998);
97+
}
98+
}))>Swap Rows</button>
99+
</div>
100+
</div></div>
101+
</div></div>
102+
<table class="table table-hover table-striped test-data">
103+
<tbody>
104+
@keyed row in data.value_mut().iter_mut() {
105+
<tr key=@row.id() class=@if *selected.value() == Some(*row.id()) {
106+
@:"danger"
107+
} else {
108+
@:""
109+
}>
110+
<td class="col-md-1">@row.id()</td>
111+
<td class="col-md-4"><a @onclick(callback!(selected, row, {
112+
*selected.value_mut() = Some(*row.id());
113+
}))>@row.label()</a></td>
114+
<td class="col-md-1"><a @onclick(callback!(data, row, {
115+
let value = data.value_mut();
116+
let id = *row.id();
117+
release!(row);
118+
let pos = value.iter().position(|r| {*r.id() == id}).expect("problem finding position");
119+
value.remove(pos);
120+
}))><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
121+
<td class="col-md-6"/>
122+
</tr>
123+
}
124+
</tbody>
125+
</table>
126+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
127+
</div>
128+
});
129+
}

‎frameworks/keyed/anansi/js-framework-comps/src/lib.rs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
pub mod app;
2+
3+
anansi_aux::app_components! {
4+
app::App,
5+
}

‎frameworks/keyed/anansi/js-framework-wasm/Cargo.toml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
[package]
2+
name = "js-framework-wasm"
3+
version = "0.1.0"
4+
edition = "2021"
5+
6+
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
7+
8+
[dependencies]
9+
wasm-bindgen = "0.2"
10+
anansi-aux = "0.14"
11+
js-framework-comps = { path = "../js-framework-comps" , version = "*" }
12+
13+
[lib]
14+
crate-type = ["cdylib"]

‎frameworks/keyed/anansi/js-framework-wasm/main.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
const registerServiceWorker = async () => {
2+
if ('serviceWorker' in navigator) {
3+
try {
4+
const registration = await navigator.serviceWorker.register(
5+
'/frameworks/keyed/anansi/js-framework-wasm/sw.js',
6+
{
7+
scope: '/frameworks/keyed/anansi/js-framework-wasm/',
8+
}
9+
);
10+
} catch (error) {
11+
console.error(`Registration failed with ${error}`);
12+
}
13+
}
14+
};
15+
registerServiceWorker();
16+
17+
let mod;
18+
const ids = new Map();
19+
20+
document.addEventListener('click', (e) => {
21+
let paths = e.composedPath();
22+
let callback;
23+
let id;
24+
25+
for (let i = 0; i < paths.length; i++) {
26+
let el = paths[i];
27+
28+
let attributes = el.attributes;
29+
if (attributes) {
30+
let onclick = attributes.getNamedItem('on:click');
31+
if (onclick) {
32+
let aid = ids.get(onclick.value);
33+
if (!aid) {
34+
aid = attributes.getNamedItem('a:id');
35+
ids.set(onclick.value, aid);
36+
}
37+
if (onclick && aid) {
38+
callback = onclick.value;
39+
id = aid.value;
40+
break;
41+
}
42+
}
43+
let rid = attributes.getNamedItem('rid');
44+
if (rid) {
45+
let called = mod.recall(rid.value);
46+
if (called) {
47+
return;
48+
}
49+
}
50+
}
51+
}
52+
if (callback) {
53+
if (mod) {
54+
mod.call(callback, id);
55+
} else {
56+
import('/frameworks/keyed/anansi/js-framework-wasm/pkg/js_framework_wasm.js').then((module) => {
57+
module.default().then(() => {
58+
module.start();
59+
mod = module;
60+
mod.call(callback, id);
61+
});
62+
});
63+
}
64+
}
65+
});

0 commit comments

Comments
 (0)