update js-framework-benchmark example

examples/js-framework-benchmark/Cargo.toml

@@ -8,9 +8,7 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-leptos = { path = "../../leptos", features = ["csr","template_macro"] }
-console_log = "1"
-log = "0.4"
+leptos = { path = "../../leptos", features = ["csr", "nightly"] }
 # used in rand, but we need to enable js feature
 getrandom = { version = "0.2.7", features = ["js"] }
 rand = { version = "0.8.5", features = ["small_rng"] }

examples/js-framework-benchmark/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "stable" # test change
+channel = "nightly"

examples/js-framework-benchmark/src/lib.rs

@@ -39,10 +39,10 @@ static NOUNS: &[&str] = &[
     "sandwich", "burger", "pizza", "mouse", "keyboard",
 ];
 
-#[derive(Copy, Debug, Clone, PartialEq, Eq, Hash)]
+#[derive(Debug, Clone, PartialEq, Eq, Hash)]
 struct RowData {
     id: usize,
-    label: (ReadSignal<String>, WriteSignal<String>),
+    label: ArcRwSignal<String>,
 }
 
 static ID_COUNTER: AtomicUsize = AtomicUsize::new(1);
@@ -67,7 +67,7 @@ fn build_data(count: usize) -> Vec<RowData> {
 
         data.push(RowData {
             id: ID_COUNTER.load(Ordering::Relaxed),
-            label: create_signal(label),
+            label: ArcRwSignal::new(label),
         });
 
         ID_COUNTER
@@ -96,8 +96,8 @@ fn Button(
 
 #[component]
 pub fn App() -> impl IntoView {
-    let (data, set_data) = create_signal(Vec::<RowData>::new());
-    let (selected, set_selected) = create_signal(None::<usize>);
+    let (data, set_data) = signal(Vec::<RowData>::new());
+    let (selected, set_selected) = signal(None::<usize>);
 
     let remove = move |id: usize| {
         set_data.update(move |data| data.retain(|row| row.id != id));
@@ -120,7 +120,7 @@ pub fn App() -> impl IntoView {
     let update = move |_| {
         data.with(|data| {
             for row in data.iter().step_by(10) {
-                row.label.1.update(|n| n.push_str(" !!!"));
+                row.label.update(|n| n.push_str(" !!!"));
             }
         });
     };
@@ -138,7 +138,7 @@ pub fn App() -> impl IntoView {
         });
     };
 
-    let is_selected = create_selector(move || selected.get());
+    let is_selected = Selector::new(move || selected.get());
 
     view! {
         <div class="container">
@@ -162,30 +162,22 @@ pub fn App() -> impl IntoView {
             <table class="table table-hover table-striped test-data">
                 <tbody>
                     <For
-                        each=move || data.get()
-                        key=|row| row.id
+                        each={move || data.get()}
+                        key={|row| row.id}
                         children=move |row: RowData| {
                             let row_id = row.id;
-                            let (label, _) = row.label;
-                            on_cleanup({
-                                let is_selected = is_selected.clone();
-                                move || {
-                                    label.dispose();
-                                    is_selected.remove(&Some(row_id));
-                                }
-                            });
+                            let label = row.label;
                             let is_selected = is_selected.clone();
-                            template! {
+                            ViewTemplate::new(view! {
                                 <tr class:danger={move || is_selected.selected(Some(row_id))}>
                                     <td class="col-md-1">{row_id.to_string()}</td>
                                     <td class="col-md-4"><a on:click=move |_| set_selected.set(Some(row_id))>{label}</a></td>
                                     <td class="col-md-1"><a on:click=move |_| remove(row_id)><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>

examples/js-framework-benchmark/src/main.rs

@@ -1,10 +1,11 @@
 use js_framework_benchmark_leptos::App;
-use leptos::{wasm_bindgen::JsCast, *};
+use leptos::{
+    leptos_dom::helpers::document, mount::mount_to, wasm_bindgen::JsCast,
+};
 
 pub fn main() {
-    _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
-
     let root = document().query_selector("#main").unwrap().unwrap();
-    mount_to(root.unchecked_into(), || view! { <App/> });
+    let handle = mount_to(root.unchecked_into(), App);
+    handle.forget();
 }