Reactivity v3! (Part 1) 🎉

.github/workflows/build_website.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Install trunk
         run: >
           wget -qO-
-          https://github.com/thedodd/trunk/releases/download/v0.14.0/trunk-x86_64-unknown-linux-gnu.tar.gz
+          https://github.com/thedodd/trunk/releases/download/v0.16.0/trunk-x86_64-unknown-linux-gnu.tar.gz
           | tar -xzf- && sudo mv trunk /usr/bin/
 
       - name: Cargo generate-lockfile

.github/workflows/test.yml

@@ -48,23 +48,27 @@ jobs:
             target/
           key: ${{ runner.os }}-cargo-${{ matrix.rust }}-${{ hashFiles('**/Cargo.lock') }}
 
-      - name: Run tests with default features
+      - name: Run tests for packages/sycamore with default features
         # Only run tests for sycamore to prevent stray feature flags from other tests.
         run: cd packages/sycamore && cargo test
 
-      - name: Run tests with all features
+      - name: Run tests (with UI tests) on 1.72.0
         if: matrix.rust == '1.72.0'
         env:
           RUN_UI_TESTS: true
-        run: cargo test --all-features
+        run: cargo test
+
+      - name: Run tests on stable
+        if: matrix.rust == 'stable'
+        run: cargo test
 
-      - name: Run tests with all features excluding UI
-        if: matrix.rust != '1.72.0'
+      - name: Run all tests on nightly
+        if: matrix.rust == 'nightly'
         run: cargo test --all-features
 
-      - name: Run headless browser tests
+      - name: Run headless browser tests on nightly
         run: cd packages/sycamore && wasm-pack test --firefox --chrome --headless --all-features
-        if: always()
+        if: matrix.rust == 'nightly'
 
   clippy:
     name: Clippy

Cargo.toml

@@ -1,43 +1,48 @@
 [workspace]
 resolver = "2"
 members = [
-  # Packages
-  "packages/sycamore",
-  "packages/sycamore-core",
-  "packages/sycamore-futures",
-  "packages/sycamore-macro",
-  "packages/sycamore-reactive",
-  "packages/sycamore-router",
-  "packages/sycamore-router-macro",
-  "packages/sycamore-web",
+	# Packages
+	"packages/sycamore",
+	"packages/sycamore-core",
+	"packages/sycamore-futures",
+	"packages/sycamore-macro",
+	"packages/sycamore-reactive",
+	"packages/sycamore-reactive3",
+	"packages/sycamore-reactive-macro",
+	"packages/sycamore-router",
+	"packages/sycamore-router-macro",
+	"packages/sycamore-web",
 
-  # Examples
-  "examples/components",
-  "examples/context",
-  "examples/counter",
-  "examples/http-request",
-  "examples/http-request-builder",
-  "examples/hydrate",
-  "examples/iteration",
-  "examples/js-framework-benchmark",
-  "examples/hello-builder",
-  "examples/hello-world",
-  "examples/higher-order-components",
-  "examples/motion",
-  "examples/number-binding",
-  "examples/ssr",
-  "examples/svg",
-  "examples/timer",
-  "examples/todomvc",
-  "examples/transitions",
-  "examples/attributes-passthrough",
-  "examples/js-snippets",
+	# Examples
+	"examples/components",
+	"examples/context",
+	"examples/counter",
+	"examples/http-request",
+	"examples/http-request-builder",
+	"examples/hydrate",
+	"examples/iteration",
+	"examples/js-framework-benchmark",
+	"examples/hello-builder",
+	"examples/hello-world",
+	"examples/higher-order-components",
+	"examples/motion",
+	"examples/number-binding",
+	"examples/ssr",
+	"examples/svg",
+	"examples/timer",
+	"examples/todomvc",
+	"examples/transitions",
+	"examples/attributes-passthrough",
+	"examples/js-snippets",
 
-  # Website
-  "docs",
-  "website",
+	# Website
+	"docs",
+	"website",
 
-  # Tools
-  "packages/tools/bench",
-  "packages/tools/bench-diff",
+	# Tools
+	"packages/tools/bench",
+	"packages/tools/bench-diff",
 ]
+
+[profile.bench]
+debug = true

docs/next/advanced/advanced_reactivity.md

@@ -9,3 +9,38 @@
 TODO
 
 Help us out by writing the docs and sending us a PR!
+
+## Batching Updates
+
+Sycamore's fine grained reactivity system updates immediately when a signal changes. This works great
+in most cases because only things that depend on that change will actually be rerun. But what if
+you need to make changes to two or more related signals?
+
+### The `batch` function
+
+The batch function lets you execute a closure and delay any effects until it completes. This means
+you can update multiple related signals and only have their dependent effects run once.
+
+Not only can this improve performance, but can even improve safety in your code since updating
+related signals synchronously can cause your effects to run with an unintended state. Batching
+the calls means you only ever run your effects when you're done with your mutations. You can think
+of batching a little bit like database transactions.
+
+### Example
+
+In this example, we are assigning both names on a button click and this triggers our rendered update
+twice. Using batch lets us avoid that.
+
+```rust
+let update_names = || {
+    batch(|| {
+        first_name.set_fn(|first_name| first_name + "n");
+        last_name.set_fn(|last_name| last_name + "!");
+    });
+}
+create_effect(cx, || {
+    // This would run twice when `update_names` is called without batching. With batching, it only
+    // runs once.
+    format!("{} {}", first_name.get(), last_name.get());
+});
+```

docs/next/basics/control_flow.md

@@ -7,7 +7,7 @@ let visible = create_signal(cx, true);
 
 view! { cx,
     div {
-        (if *visible.get() {
+        (if visible.get() {
             view! { cx, "Now you see me" }
         } else {
             view! { cx, } // Now you don't
@@ -32,7 +32,7 @@ let is_empty = create_selector(cx, || !name.get().is_empty());
 
 view! { cx,
     h1 {
-        (if *is_empty.get() {
+        (if is_empty.get() {
             view! { cx, span { (name.get()) } }
         } else {
             view! { cx, span { "World" } }

docs/next/basics/reactivity.md

@@ -27,12 +27,7 @@ Reactivity is based on reactive primitives. A `Signal` is one such example of a
 At it's simplest, a `Signal` is simply a wrapper around a type that can be read and written to and
 which can be listened on whenever its wrapped value is mutated.
 
-To create a signal, we use `create_signal(cx, ...)`. Note that the return value of this method is
-not actually `Signal` but `&Signal`. The reason for this is because the created signal is allocated
-on the reactive scope and therefore has its lifetime tied with the scope. Furthermore, this allows
-using Rust's lifetime system to make sure signals are not accessed once its enclosing scope has been
-destroyed.
-
+To create a signal, we use `create_signal(cx, ...)`. 
 Here is an example of creating a signal, accessing it via `.get()`, and modifying it via
 `.set(...)`.
 
@@ -51,7 +46,7 @@ accomplished like so:
 
 ```rust
 let state = create_signal(cx, 0);
-create_effect(cx, || println!("The state changed. New value: {}", state.get()));
+create_effect(cx, move || println!("The state changed. New value: {}", state.get()));
 // Prints "The state changed. New value: 0"
 // (note that the effect is always executed at least 1 regardless of state changes)
 
@@ -75,11 +70,11 @@ In fact, we can easily create a derived state (also know as derive stores) using
 
 ```rust
 let state = create_signal(cx, 0);
-let double = create_memo(cx, || *state.get() * 2);
+let double = create_memo(cx, || state.get() * 2);
 
-assert_eq!(*double.get(), 0);
+assert_eq!(double.get(), 0);
 state.set(1);
-assert_eq!(*double.get(), 2);
+assert_eq!(double.get(), 2);
 ```
 
 `create_memo(...)` automatically recomputes the derived value when any of its dependencies change.
@@ -109,7 +104,7 @@ let state = create_signal(cx, 0);
     let text = G::text(String::new() /* placeholder */);
     create_effect(cx, move || {
         // Update text when `state` changes.
-        text.update_text(Some(&state.get()));
+        text.update_text(Some(&state.get(),to_string()));
     });
     element.append(&text);
     element

examples/http-request-builder/src/main.rs

@@ -51,5 +51,5 @@ fn main() {
     console_error_panic_hook::set_once();
     console_log::init_with_level(log::Level::Debug).unwrap();
 
-    sycamore::render(|cx| App(cx));
+    sycamore::render(App);
 }

packages/sycamore-reactive-macro/Cargo.toml

@@ -0,0 +1,19 @@
+[package]
+name = "sycamore-reactive-macro"
+categories = ["gui", "wasm", "web-programming"]
+description = "Reactive primitives for Sycamore"
+edition = "2021"
+homepage = "https://github.com/sycamore-rs/sycamore"
+keywords = ["wasm", "gui", "reactive"]
+license = "MIT"
+readme = "../../README.md"
+repository = "https://github.com/sycamore-rs/sycamore"
+version = "0.9.0-beta.1"
+
+[lib]
+proc-macro = true
+
+[dependencies]
+proc-macro2 = "1.0.60"
+syn = "2.0.18"
+quote = "1.0.28"