Merge branch 'kobold-09' of https://github.com/maciejhirsz/js-framework-benchmark into maciejhirsz-kobold-09

Author: krausest

frameworks/non-keyed/kobold/Cargo.toml

@@ -7,7 +7,7 @@ edition = "2021"
 crate-type = ["cdylib"]
 
 [dependencies]
-kobold = "0.7.1"
+kobold = "0.9.1"
 wasm-bindgen = "0.2.84"
 js-sys = "0.3.61"
 
@@ -18,4 +18,4 @@ codegen-units = 1
 panic = "abort"
 
 [package.metadata.wasm-pack.profile.release]
-wasm-opt = ['-O4']
+wasm-opt = ['-O4']

frameworks/non-keyed/kobold/bundled-dist/index.html

@@ -12,8 +12,9 @@
     <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
     <div id='main'></div>
     <script type="module">
-      import init from './js-framework-benchmark-kobold.js';
+      import init, { koboldCallback } from './js-framework-benchmark-kobold.js';
       init('./js-framework-benchmark-kobold_bg.wasm');
+      window.koboldCallback = koboldCallback;
     </script>
   </body>
 </html>

frameworks/non-keyed/kobold/bundled-dist/js-framework-benchmark-kobold.js

@@ -0,0 +1,54 @@
+const fragmentDecorators = new WeakMap();
+
+export function appendChild(n,c) { n.appendChild(c); }
+export function appendBefore(n,i) { n.before(i); }
+export function removeNode(n) { n.remove(); }
+export function replaceNode(o,n) { o.replaceWith(n); }
+export function emptyNode() { return document.createTextNode(""); }
+export function fragment()
+{
+	let f = document.createDocumentFragment();
+	f.append("", "");
+	return f;
+};
+export function fragmentDecorate(f) {
+	fragmentDecorators.set(f, [f.firstChild, f.lastChild]);
+	return f.lastChild;
+}
+export function fragmentUnmount(f)
+{
+	let [b, e] = fragmentDecorators.get(f);
+	while (b.nextSibling !== e) f.appendChild(b.nextSibling);
+	f.appendChild(e);
+	f.insertBefore(b, f.firstChild);
+}
+export function fragmentReplace(f,n)
+{
+	let [b, e] = fragmentDecorators.get(f);
+	while (b.nextSibling !== e) f.appendChild(b.nextSibling);
+	b.replaceWith(n);
+	f.appendChild(e);
+	f.insertBefore(b, f.firstChild);
+}
+export function setTextContent(n,t) { n.textContent = t; }
+export function setAttribute(n,a,v) { n.setAttribute(a, v); }
+
+export function setChecked(n,v) { if (n.checked !== v) n.checked = v; }
+export function setClassName(n,v) { n.className = v; }
+export function setHref(n,v) { n.href = v; }
+export function setStyle(n,v) { n.style = v; }
+export function setValue(n,v) { n.value = v; }
+
+export function addClass(n,v) { n.classList.add(v); }
+export function removeClass(n,v) { n.classList.remove(v); }
+export function replaceClass(n,o,v) { n.classList.replace(o,v); }
+export function toggleClass(n,c,v) { n.classList.toggle(c,v); }
+
+export function makeEventHandler(c,f) { return (e) => koboldCallback(e,c,f); }
+export function checkEventHandler() { if (typeof koboldCallback !== "function") console.error(
+`Missing \`koboldCallback\` in global scope.
+Add the following to your Trunk.toml:
+
+[build]
+pattern_script = "<script type=\\"module\\">import init, { koboldCallback } from '{base}{js}';init('{base}{wasm}');window.koboldCallback = koboldCallback;</script>"
+`) }

frameworks/non-keyed/kobold/bundled-dist/js-framework-benchmark-kobold_bg.wasm

@@ -12,8 +12,9 @@
     <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
     <div id='main'></div>
     <script type="module">
-      import init from './js-framework-benchmark-kobold.js';
+      import init, { koboldCallback } from './js-framework-benchmark-kobold.js';
       init('./js-framework-benchmark-kobold_bg.wasm');
+      window.koboldCallback = koboldCallback;
     </script>
   </body>
 </html>

frameworks/non-keyed/kobold/bundled-dist/snippets/kobold-1aefc3738a915e71/js/util.js

@@ -4,7 +4,7 @@
   "description": "Benchmark for Kobold",
   "license": "MPL-2.0",
   "js-framework-benchmark": {
-    "frameworkVersion": "0.7.1",
+    "frameworkVersion": "0.9.1",
     "frameworkHomeURL": "https://github.com/maciejhirsz/kobold",
     "issues": [
       1139
@@ -30,4 +30,4 @@
     "esbuild": "^0.14.47",
     "npm-run-all": "4.1.5"
   }
-}
+}

frameworks/non-keyed/kobold/bundled-dist/snippets/kobold-2c3d9098ff884593/js/util.js

@@ -1,4 +1,5 @@
 use js_sys::Math;
+use kobold::diff::VString;
 use kobold::prelude::*;
 use wasm_bindgen::prelude::*;
 
@@ -47,10 +48,10 @@ fn random(max: usize) -> usize {
     (Math::random() * 1000.0) as usize % max
 }
 
-#[derive(Debug, Clone, PartialEq, Eq, Hash)]
+#[derive(Debug)]
 struct RowData {
     id: usize,
-    label: String,
+    label: VString,
 }
 
 struct State {
@@ -83,7 +84,7 @@ impl State {
             label.push_str(noun);
             self.rows.push(RowData {
                 id: i + d,
-                label,
+                label: label.into(),
             });
         }
         self.last += count;
@@ -137,7 +138,7 @@ fn Row<'a>(num: usize, row: &'a RowData, state: &'a Hook<State>) -> impl View +
     view! {
         <tr.{is_in_danger}>
             <td class="col-md-1">{id}</td>
-            <td class="col-md-4"><a onclick={select}>{row.label.to_owned()}</a></td>
+            <td class="col-md-4"><a onclick={select}>{&row.label}</a></td>
             <td class="col-md-1"><a onclick={remove}><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
             <td class="col-md-6"/>
         </tr>
@@ -211,7 +212,7 @@ fn App() -> impl View {
             </div>
             <table class="table table-hover table-striped test-data">
                 <tbody>
-                { for state.rows.iter().enumerate().map(|(num,row)| view! { <Row {state}  {num} {row} /> }) }            
+                { for state.rows.iter().enumerate().map(|(num,row)| view! { <Row {state}  {num} {row} /> }) }
                 </tbody>
             </table>
             <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
@@ -225,4 +226,4 @@ pub fn start() {
     kobold::start(view! {
         <App />
     });
-}
+}