Sycamore - A reactive library for creating web apps in Rust and WebAssembly

Sycamore

Last update: Jan 5, 2023

Related tags

GUI html rust gui reactive web dom webassembly wasm web-framework signals sycamore

Overview

Sycamore

What is Sycamore?

Sycamore is a modern VDOM-less web library with fine-grained reactivity.

Lightning Speed: Sycamore harnesses the full power of Rust via WebAssembly, giving you full control over performance.
Ergonomic and Intuitive: Write code that feels natural. Everything is built on reactive primitives without a cumbersome virtual DOM.
No JavaScript: Had enough of JavaScript? So have we. Create apps using Sycamore without touching a single line of JS.

Documentation

Sycamore is extensively documented:

Getting Started: How to write your first Sycamore app.
Reactivity: Find out how to use Sycamore's powerful reactive primitives.
API Documentation: rustdocs for the sycamore crate.

Still have questions? Don't hesitate to stop by our friendly Discord server.

Examples

Sycamore has many examples for your reference in the examples/ directory. Be sure to cheek them out!

Viewing on `sycamore-rs.netlify.app`

All the examples are hosted under sycamore-rs.netlify.app/examples/<example_name> with <example_name> being the name of the example you want to view. For instance, the hello example is hosted on sycamore-rs.netlify.app/examples/hello.

Building Locally

All the examples can also be built locally using Trunk. For instance, the following command builds and serves the hello example:

cd examples/hello
trunk serve

Now open up localhost:8080 in your browser to see "Hello World!".

Perseus

Perseus is a fullstack framework built with Sycamore. Think NextJS or SvelteKit but with no JavaScript. Everything from backend to frontend is built with pure Rust!

Alternatives?

Don't think Sycamore is for you? Thankfully, there are plenty of alternatives!

SolidJS: A declarative, efficient and flexible JavaScript library for building user interfaces
Solid is a JavaScript library which greatly inspired Sycamore. Many concepts such as fine-grained reactivity and components as factory functions were borrowed from Solid. If you don't mind working with JavaScript (or TypeScript), go check it out!
Yew: Rust / Wasm framework for building client web apps
Yew was also a big inspiration for Sycamore. Yew employs a VDOM and has a MVU (Elm) architecture. If you think that's for you, take a look!
MoonZoon: Rust Fullstack Framework
MoonZoon also champions the no VDOM paradigm and uses dominator as its underlying DOM layer. MoonZoon is a fullstack framework making it easier to combine frontend and backend code with minimal boilerplate.

Contributing

Report issues on our issue tracker.
We love Pull Requests! For more information, check out the section on contributing in the docs.

Sycamore would not have been possible without the wonderful contributions from the community. Thank you!

Comments

Some performance tweaks
Optimizations in sycamore-reactive crate.

Some notable changes:

Simplify and reduce allocations in map_keyed and map_indexed.

Make Signal::trigger_subscribers slightly faster.

performance
opened by lukechu10 10
Make `map_indexed` and `map_keyed` more idiomatic

Right now, map_indexed and map_keyed use a lot of index manipulations. This is not very idiomatic in Rust.

Preferably, most of it can be refactored to use iterators instead. This will improve maintainability and perhaps even performance because it will remove the need for bound checks.
good first issue

opened by lukechu10 10
Builder Pattern API
Proposal

I have been contemplating what a builder pattern API, as mentioned in #265, might look like. I personally like the idea of having both API's, and having the interop, as macros have their place which can be much easier to read, but the primary advantages, in my opinion to a builder pattern is that, currently, formatting and type hints don't work with the current tooling (rust-analyzer), and certain more complicated logic is not possible at the moment, without further syntax extensions.

Also, from a discord comment, @lukechu10 mentioned the aim of eventually supporting React Native, and possibly other rendering targets. This to me, presents two different routes that could be taken:

Having a rendering-agnostic API

Having a rendering-specific API

The first option could be something as follows (for HTML):

button(); div(); a(); /* etc */

Whereas the agnostic approach could be something like:

node("button"); node("div"); node("a");

These features could be held behind a feature flag, such as html, react-native, native-script, etc. for the render-specific API, or just builder-api for the agnostic API, and prefixed with experimental: until an API is stabilized.

Main required features

In no particular order. Also note that all of the mentioned functions would be implemented for the builder struct and take either &mut self or self and return their respective Self type, but have been omitted for brevity..

(Un)setting Attributes

A further distinction could be made (for memory and performance reasons) between static and dynamic attributes, such as:

fn set_attribute(name: &str, value: impl Into<JsValue>); // The Option type is important here, as it can be used to automatically remove // the attribute when required. fn set_dyn_attribute(name: &str, value: StateHandle<Option<impl Into<JsValue>>>); // Also note that remove_attribute is not needed here, since it's handled in the // dynamic case and in static cases not needed.

(Un)setting properties

Same as above

(Un)setting classes

Once again, I recommend having a distinction between static and dynamic classes.

fn add_class(class: &str); fn add_dyn_class(class: StateHandle<Option<&str>>);

Add/remove children

For setting children, we have some choices to make. We can accept Vec<GenericNode>, or Template, thought the latter is preferable. The question lies on how to handle dynamic children.

fn add_children(children: Template<G>); // Perhaps dynamic children could be handled as follows fn add_dyn_children(children: StateHandle<Template<G>>);

Special shortcuts

fn id(id: &str)

fn style(name: &str, value: &str) or perhaps fn add_styles<K, V>(HashMap<K, V>) where K: Hash + AsRef<str>, V: AsRef<str> or something similar. along with their dynamic Signal accepting counterparts.

And possible others I've missed.

Event listeners

fn add_event_listener(event: &str /* or typed Event */, handler: EventHandler); // When listen is false, the event handler won't be discarded, just not trigger until // listen is true again. fn add_dyn_event_listener(event: &str, handler: EventHandler, listen: StateHandle<bool>);

Refs

fn ref(ref: NodeRef);

Binding

Each respective supported bindable property could be made, such as value, checked, and optional element specific binding can be made, such as group.

fn bind_value(value: Signal<String>); fn bind_group(group: Signal<String>); /* etc */

Another very important note, especially with Web Components, binding to arbitrary attributes and properties is a must have, as a lot of components, it's the only way to get notified on changes witch aren't emitted as custom events.

fn bind_custom_attribute(name: &str, Signal<impl Deserialize>); fn bind_custom_property(name: &str, Signal<impl Deserialize>);

Build

Finally, we need to build the node into a Template.

Important note

The above API would currently require using Template for instantiating components, but it could be mentioned in the docs that if macros would like to be completely omitted, then one could use Component::__create_component(props).

Did I miss anything? Can anything be improved? Please don't be shy. The more the critique, the better we can make Sycamore, together.
C-enhancement
opened by jquesada2016 9
Builder API

I have not fully tested, nor do I think the current iteration has the right aesthetics, but I believe it's in the right direction! This is an implementation attempt for the builder API as mentioned in #268.
C-enhancement A-builder

opened by jquesada2016 8
Need to be able to convert web_sys::Element to Template

This is important for interfacing with many JS libraries which create arbitrary elements or produce template strings. I was unable to implement IntoTemplate<G> due to the blanket implementation, so used instead the From trait. It should also be possible in the future to create the template node without needing a wrapper element, though could not find a way from reading through the source. Any tips would be appreciated.
C-enhancement

opened by jquesada2016 8

Issues When Running

I can't seem to get the Hello World example from the README running. I have updated my main.rs file and added the dependency to Cargo.toml, but when I run using trunk I get a long list of errors (see below).

Environment

Maple: 0.4.x
WSL / Ubuntu 20.04.1 LTS

Additional context I have updated trunk, wasm-pack-cli, Rust, and a few other dependencies I think are related, just in case.

Here is the start of the output. The list goes on for quite a while longer.

❯ trunk serve --open
Apr 01 07:16:47.612  INFO 📦 starting build
Apr 01 07:16:47.616  INFO spawning asset pipelines
Apr 01 07:16:47.775  INFO building maple-test
   Compiling js-sys v0.3.49
   Compiling console_error_panic_hook v0.1.6
error: expected `,`
  --> /home/googlemac/.cargo/registry/src/github.com-1ecc6299db9ec823/console_error_panic_hook-0.1.6/src/lib.rs:80:43
   |
80 |             #[wasm_bindgen(js_namespace = console)]
   |                                           ^^^^^^^

error[E0433]: failed to resolve: use of undeclared type `Error`
   --> /home/googlemac/.cargo/registry/src/github.com-1ecc6299db9ec823/console_error_panic_hook-0.1.6/src/lib.rs:106:21
    |
106 |             let e = Error::new();
    |                     ^^^^^ not found in this scope
    |
help: consider importing one of these items
    |
71  | use std::error::Error;
    |
71  | use std::io::Error;
    |
71  | use wasm_bindgen::__rt::core::fmt::Error;
    |

error[E0425]: cannot find function `error` in this scope
   --> /home/googlemac/.cargo/registry/src/github.com-1ecc6299db9ec823/console_error_panic_hook-0.1.6/src/lib.rs:117:13
    |
117 |             error(msg);
    |             ^^^^^ not found in this scope

error: aborting due to 3 previous errors

Some errors have detailed explanations: E0425, E0433.
For more information about an error, try `rustc --explain E0425`.
error: could not compile `console_error_panic_hook`

To learn more, run the command again with --verbose.
warning: build failed, waiting for other jobs to finish...
error: expected `,`
   --> /home/googlemac/.cargo/registry/src/github.com-1ecc6299db9ec823/js-sys-0.3.49/src/lib.rs:639:39
    |
639 |         #[wasm_bindgen(js_namespace = Atomics, catch)]
    |                                       ^^^^^^^

error: expected `,`
   --> /home/googlemac/.cargo/registry/src/github.com-1ecc6299db9ec823/js-sys-0.3.49/src/lib.rs:649:39

C-bug

opened by parker-codes 8

Backend Abstraction
Fixes #66. I'm leaving for a week in 2 days, but I just spent an hour or two working on this today, and I'll probably do a little more tomorrow. Feel free to build on this or just do something else completely.

This introduces a new trait, GenericNode. Right now, it only has one implementation, which is a real DOM node. I'm writing this in a way so that users will have to make their components generic, but will hopefully never have to specify what that generic type is because it'll be inferred from calling render().

Right now, I have the following questions I'll need to answer to go further:

Handling next_sibling and parent_node functions. When those just call JS functions, it's no problem because it has a full GC that can handle cyclic references. Although that's possible in Rust with some work, it would be more efficient if we could remove calls to those functions. I could also make those return an error server-side (they're only used for modifying the state), but it would make modifying the data impossible server-side—meaning you can't have some async computation render stuff later, or if you did, it'd have to be implemented differently.

NodeRef: How to do this in a user-friendly way: do we force the user to downcast to a concrete type? It would be nice to not hardcode it being a web_sys::Node, for use cases like React Native. However, there is probably no need for it to work on the server.

C-enhancement A-SSR
opened by lights0123 8
(Runtime) Templates

Closes #19

Adds a template system where Template represents the structure of the view! with holes inside. These holes can then be binded to and filled in with the dynamic values.

This should give a big performance boost on the client side because we are cloning templates now instead of creating each and every element individually. This could also give a performance boost on server-side by allowing us to cache the SSR-ed strings.

This also unlocks other exciting features such as some form of hot view-reloading.
C-enhancement performance

opened by lukechu10 7
Fix removing old nodes from parent

Fixes #427

The #427 bug was introduced in #416 inside the reconcile_fragments function.

The quick fix was to add the negation that got dropped during that change - this seems to have caused the bug.

~I instead extracted the removal of nodes from the parent node part of the reconcile_fragments function to a new function and added tests for this new function to avoid any future regressions.~

~The tests use a pretty rough/bare bones mock of a GenericNode in order to satisfy the trait bounds required by the extracted function. I think the tests are worth the added file noise of the mock but let me know if you'd prefer I remove it (and probably the extracted function at that point).~

opened by mc1098 7
An HTTP request example and a tailwindcss styling example

I created this example (since I could not find an existing one) to get a feel for the developer experience of using a crate like reqwasm and styling with TailwindCSS when using sycamore.

This example makes a GET request to CountAPI that simply increments everytime you visit the page or refresh the page i.e. counting page visits. I picked this example since I just wanted to create a really simple HTTP request to fetch some json data and then be able to display that data which then further updates a Signal and resulting into updating the relevant component.

This also includes a little styling with TailwindCSS since the docs here suggested that the styling part is still under works.

To test, you can run trunk serve --open which should build everything and the serve the page.
A-examples

opened by attriaayush 7
use_context inside a Router can't find context when used after route change
Describe the bug When use_context is called from inside a Router after a route change it can't find the context value anymore and panics.

To Reproduce Use code in reproduction repo and click on link with built site.

Expected behavior use_context should return the context.

Environment

Sycamore: master (the repo uses 0.6.3)

Browser: Edge/Firefox

OS: Ubuntu 21.04

Additional context As far as I can tell, the context itself isn't being dropped, it's just not being found after the route changes.

When it panics, there's an extra scope being searched in use_context which is not created in the sycamore_reactive::context::create_context_scope function.
C-bug
opened by Zyllian 7

Releases(0.8.2)

0.8.2(Sep 24, 2022)
⚡️ Features

Inline props.

Html::to_web_sys method.

🛠 Fixes

Implement Default for Children.

Implement From<View> for Children.

Fix hydration of nodes created using GenericNode::element_with_tag.

Source code(tar.gz)
Source code(zip)
0.8.1(Sep 3, 2022)
🛠 Fixes

Forward compatibility fix for breakage due to a soundness fix in rustc.

Avoid possible shadowing of existing bindings in macro expansion.

Reuse some allocations in map_keyed and map_indexed.

Add workaround for SVG element tags that clash with HTML elements.

Source code(tar.gz)
Source code(zip)
0.8.0(Aug 28, 2022)
Release post: https://sycamore-rs.netlify.app/news/announcing-v0.8.0

⚡️ Features

Add .map() utility to Signal.

Reactive Primitives v2 🎉! Read the blog post for more information.

Suspense and async components.

Async transitions.

Type-checked HTML element tags.

Builder API v2!

SVG support.

Implement AddAssign and friends for Signal.

Add Signal::modify to mutate signal.

Add NoHydrate and NoSsr utility components.

Add from_web_sys function.

Add prop: directive to view!

Add dangerously_set_inner_html to the builder API.

Print hydration key for hydration mismatch.

New view syntax for components. Unifies the syntax used for setting attributes/props in elements and components.

🛠 Fixes

Make SsrNode attribute order stable.

Call cleanup callbacks in map_keyed and map_indexed

Create a nested reactive scope if cx is used inside dyn expression.

Fix and simplify SsrNode and HydrateNode codegen in view!.

Fix hydration for top-level dynamic views.

Fix setting class on SVG elements.

Fix parsing of legacy components in child views.

Fix destructuring in async component props.

Add the <body> tag to the HTML elements list.

Fix scope_depth to return 0 for root scope.

Fix removing old nodes from parent.

Remove Unit () implementation of Prop.

Add Debug implementations to all public items.

Fix boolean attribute list.

Allow fragments and dynamic views in Router.

Fix hydration error for Router.

🎁 Examples and Documentation

Add HTTP request example.

Add HTTP request builder example.

Add more docs in book about router and components.

🚅 Performance

Remove some allocations in sycamore-reactive.

Internal

Update license to 2022.

Make website responsive and mobile-friendly.

Use in-tree js-framework-benchmark implementation for benchmarking.

Split the sycamore crate into sycamore-core and sycamore-web.

Simplify reconcile_fragments implementation.

Update MSRV to 1.63 and remove some unsafes from sycamore-reactive.

Source code(tar.gz)
Source code(zip)
0.7.1(Dec 16, 2021)
🛠 Fixes

Support Rust 2021 edition in macro codegen when using hydration.

Fix typo in iteration docs.

Fix duplicated text when hydrating a dynamic text node.

Make builder API play well with hydration support.

Source code(tar.gz)
Source code(zip)
0.7.0(Dec 9, 2021)
Release post: https://sycamore-rs.netlify.app/news/announcing-v0.7.0

⚡️ Features

Implement TryFromSegments for T: Route. This allows the creation of nested routers. See the docs for more information about usage.

Make parenthesis optional in cloned! macro. The following syntax is now accepted, in addition to the old syntax:
// Before cloned!((my, variables, to, clone) => move || { ... }) // After cloned!(my, variables, to, clone => move || { ... })

Builder API. Check out the hello-builder example for more usage details.

Make wasm-bindgen-interning a feature. This feature is enabled by default but can be opted-out which would disable wasm-bindgen/enable-interning. Opting-out can lead to a slight decrease in binary size at the cost of performance.

Introduce render_get_scope function. This allows accessing (and disposing of) the ReactiveScope created by the render function.

Hydration support. To enable hydration, replace calls to render and render_to with hydrate and hydrate_to.

Add #[track_caller] to use_context. This makes it much easier to debug the "context not found for type" error.

Better debugging utilities for inspecting the ReactiveScope hierarchy.

🛠 Fixes

Prevent data binding from panicking when not in browser.

Extend ReactiveScope into scopes that are siblings.

Fix Lerp implementation for integers.

Fix context API not working through Indexed and Keyed.

Update TodoMVC example to use context API.

Remove autocomplete from the list of boolean attributes for codegen.

Fix parenthesizing of expressions in view! macro interpolation syntax.

Fix context API when effects are re-executed.

Allow constant generics to be used with #[component] macro.

📃 Documentation

Add a note in the docs about Trunk CSS support.

Fix typo in README.md.

Internal

Collect code coverage in CI.

Deprecate create_root in favor of create_scope.

Fix website npm build script.

🚨 BREAKING CHANGES

Refactor GenericNode and introduce Html trait. Add IS_BROWSER constant to Html.. For projects that target HTML, it is recommended to use the Html trait instead of GenericNode. This will ensure that it cannot be used on rendering backends that are not for HTML. To check if code is executing on the browser, access the Html::IS_BROWSER constant on the generic rendering backend. This also slightly changes the GenericNode interface which is why it is a breaking change but would most likely not influence you.

Make GenericNode generic over the event type. The event type is now an associated type to allow rendering backends to use another type from web_sys::Event.

Rename Template to View and template! to view!. For most cases, a simple search-and-replace will suffice, replacing all instances of Template to View and all instances of template! to view!.

Rename StateHandle to ReadSignal. The old name was somewhat confusing and did not reflect that StateHandle was just a read-only signal.

Source code(tar.gz)
Source code(zip)
0.6.3(Oct 10, 2021)
🛠 Fixes

Respect basename when navigating using router.

Source code(tar.gz)
Source code(zip)
0.6.2(Oct 9, 2021)
⚡️ Features

Add GenericNode::remove_property method.

Add node! macro for creating a single node.

🛠 Fixes

Do not strip leading / from pathname. This fixes an issue with the router on Firefox when navigating to the index page.

Internal

Remove ToTokens impl for TagName.

Source code(tar.gz)
Source code(zip)
0.6.1(Sep 25, 2021)
🛠 Fixes

Disable full feature on syn to reduce compile times.

Use a global HashSet for void elements lookup in SSR.

Remove part of formatting machinery from sycamore and sycamore-reactive to reduce binary size.

Fix panic on updating dynamic node inside a template fragment.

Implement Default for Signal.

Implement Default for StateHandle.

📃 Documentation

Update docs to use boolean for disabled attribute on button.

Add documentation on topological dependency tracking.

Source code(tar.gz)
Source code(zip)
0.6.0(Sep 12, 2021)
Release post: https://sycamore-rs.netlify.app/news/announcing-v0.6.0

⚡️ Features

Add integrations for sycamore-router.

Added dangerously_set_inner_html special attribute to html elements. This allows directly setting an element's inner html without going through a NodeRef and manually calling .set_inner_html().

Implement Portals. Portals allow adding nodes to elements that are in another tree.

Allow instantiating components with the Component trait. You can now also create components that are generic over another component. This pattern can be seen in the higher-order-components example.

Respect base html tag in router.

Dark mode on website!

create_reducer hook. The create_reducer hook is an alternative to Signal::new. It allows you to use a reducer function to get the next state from the previous state.
enum Msg { Increment, Decrement, } let (state, dispatch) = create_reducer(0, |state, msg: Msg| match msg { Msg::Increment => *state + 1, Msg::Decrement => *state - 1, });

Opt out of router by using rel="external" on an anchor tag. Adding rel="external" to an anchor tag will use the browser's default navigation behavior.
template! { a(href="path", rel="external") { "Link" } }

🛠 Fixes

Fix logic error in reconcile_fragments.

Fix grammar on website index page.

Scroll to top when navigating to a page.

Use ahash instead of default SipHash for better performance.

Explicitly define MSRV to 1.53 and run CI in a matrix.

Remove inline JS snippet. This removes the need to load an extra JS file before Sycamore can start.

Add some UI tests for #[component] attribute macro.

Generate a sitemap.xml for the website.

Fix broken link to the reactivity page on the website index page.

Explain that Trunk needs a index.html file in Hello World docs.

Remove internal Rc from DomNode. This significantly improves performance and memory usage. See the PR for benchmarks.

Optimize the website with wasm-opt to reduce binary size.

Optimize create_effect.

Fix SsrNode's implementation of remove_child removing two children instead of just one.

Hold a backlink for each ReactiveScope to its parent scope. This fixes a bug where use_context could only access the context on the first render and would panic on subsequent accesses.

Remove dependency on chrono. This was replaced with direct access to browser APIs to reduce the number of dependencies and thus to improve build times.

Replace internal usage of .unwrap() with .unwrap_throw(). Slightly improves binary sizes.

Derive Clone for sycamore_router path types.

Update todomvc example with latest features.

Fix router not actually parsing identifiers. Fixes a bug where a dynamic parameter followed by a dynamic segment would parse as a single segment.

Build rustdocs in CI. The API documentation for the master branch is available at sycamore-rs.netlify.app/api.

Reorganize documentation a bit.

🚨 BREAKING CHANGES

Extract reactive primitives into separate crate sycamore-reactive. Reactive primitives are now re-exported in the sycamore crate to avoid adding new dependencies to your project. It is also now possible to use reactive primitives without using sycamore by directly depending on sycamore-reactive.

Rename sub-module sycamore::rx to sycamore::reactive. rx might be ambiguous with Rx family of libraries. Renaming to reactive makes it clear that it works differently from Rx libraries.

Refactored router with new API. See the new documentation for more details.

Support boolean attributes. Some attributes now expect a bool instead of impl ToString. This also fixes an issue where previously, attributes couldn't be removed directly from the template! macro.
// Before template! { input(type="checkbox", checked="") { "Checkbox" } } // After template! { input(type="checkbox", checked=true) { "Checkbox" } }

Source code(tar.gz)
Source code(zip)
0.5.2(Jul 18, 2021)
Changelog

⚡️ Features

Context API: introducing ContextProvider and use_context [[@lukechu10], #169]

🛠 Fixes

Router should not prevent default if meta keys are held down [[@baile320], #165]

Remove some optional tags on dependencies [[@lukechu10], #167]

Explicitly enable std feature in indexmap to prevent compile error [[@Gearme], #170]

Do not panic when map_keyed is updated with same data in debug mode [[@lukechu10], #173]

🛠 Internal Fixes and Improvements

Add some integration tests for StaticRouter [[@lukechu10], #168]

Fix intra-doc link [[@tshepang], #162]

Refactor sycamore-macro static text and splices [[@lukechu10], #175]

📃 Documentation

Simplify cargo command in documentation [[@tshepang], #163]

Fix link to book in website version selector [[@lukechu10], #166]

🚅 Performance Improvements

Performance tweaks [[@lukechu10], #171]

Source code(tar.gz)
Source code(zip)
0.5.1(Jul 9, 2021)
Changelog

🛠 Fixes

Remove Hash trait bound from T in Keyed [[@lukechu10], #148]

🛠 Internal Fixes and Improvements

Add news section to website with v0.5.0 release post [[@lukechu10], #149, #149]

Fix typo in v0.5.0 release post [[@tshepang], #156]

Add versioned docs to website [[@lukechu10], #160]

🚅 Performance Improvements

Reduce allocations when creating Templates [[@lukechu10], #143]

Do not create effects when splice is static (using simple heuristic) [[@lukechu10], #155]

Set className directly instead of calling setAttribute [[@lukechu10], #157]

Optimize create_effect [[@lukechu10], #159]

Source code(tar.gz)
Source code(zip)
0.5.0(Jul 7, 2021)
Release post: https://sycamore-rs.netlify.app/news/announcing-v0.5.0

Changelog

⚡️ Features

Tweened signals [[@lukechu10], #86]

Add more easing functions [[@tmpr], #90]

Document fragments in the template! macro. template! can now accept the following input:
template! { p { "First" } p { "Second" } }

template! {} // empty template

[[@lukechu10], #89]

2-way data binding for certain supported props [[@lukechu10], #93]

Allow generic component's type parameters to be inferred from context [[@lukechu10], #100]

Refactored Template (renamed from TemplateResult) to allow make the template system more flexible. It is now possible to imperatively construct Templates from raw dom nodes, Vecs, and closures [[@lukechu10], #104]

Sycamore router [[@lukechu10], #118]

Temporary "fake" hydration [[@lukechu10], #101]

Router use anchor tags (<a>) instead of Link components [[@lukechu10], #128]

Reactive scope dependency count utility function [[@lukechu10], #144]

🛠 Fixes

Implement missing operations on SsrNode [[@lukechu10], #82, #138]

Remove warning when effects are created outside of a reactive scope [[@JuanMarchetto], #95]

Do not assume Signal is valid for entire duration of the effect and make effect triggers deterministic (outer effects rerun first) [[@lukechu10], #145]

Eagerly evaluate dynamic Templates with create_memo [[@lukechu10], #146]

📃 Documentation

Host documentation on website [[@lukechu10], #83]

Write documentation [[@lukechu10], #87, #111, #133]

Fix CHANGELOG.md typo [[@Riey], #102]

Style documentation website with TailwindCSS [[@lukechu10], #117]

Use router for documentation website header [[@lukechu10], #132]

Extract outline from markdown and new index page [[@lukechu10], #134]

Move documentation under /docs/* path [[@lukechu10], #139]

🛠 Internal Fixes and Improvements

Build website in GitHub Actions [[@lukechu10], #84]

Run unit tests in Miri to catch memory errors [[@lukechu10], #91]

Update Trunk to v0.11.0 [[@lukechu10], #96]

Improve documentation website lighthouse score [[@lukechu10], #97]

Setup gitpod.io configuration to make it easier to contribute [[@lukechu10], #98]

Update wasm-bindgen to v0.2.74 in .gitpod.Dockerfile [[@lukechu10], #108]

Update links to git repository to point to sycamore-rs/sycamore [[@lukechu10], #110]

Add micro-benchmarks for map_indexed and map_keyed [[@lukechu10], #115]

Run js-framework-benchmark in GitHub Actions. Pull requests with the performance tag will automatically trigger a benchmark run [[@lukechu10], #114]

Fix branch naming to work with continuous benchmark [[@lukechu10], #116]

Various performance improvements [[@lukechu10], #126]

Google search console verification file [[@lukechu10], #135]

Get NodeId for DomNode lazily to improve performance when Hash is not used [[@lukechu10], #136]

Do not insert unnecessary marker nodes [[@lukechu10], #137]

Remove unnecessary Rc<RefCell<_>>s [[@lukechu10], #141]

Cache window.document since it is frequently used to prevent going through JS interop [[@lukechu10], #142]

⚠ BREAKING CHANGES

Abstraction over rendering backend! This introduces the concept of GenericNode which is a trait to access the underlying rendering backend. Currently, Sycamore ships with DomNode and SsrNode out-of-the-box for rendering the the browser DOM and to a static string respectively. Components should now be generic over G: GenericNode to be able to render to multiple backends [[@lights0123], #67]

Require using the #[component(_)] attribute macro for defining components. This changes the component syntax to:
#[component(MyComponent<G>)] fn my_component() -> Template<G> { todo!() }

The #[component(_)] macro generates a struct under the hood that implements the Component trait for improved type safety. This also means that you no longer need #[allow(non_snake_case)] in your code! [[@lukechu10], #70, #92]

Rename Owner to ReactiveScope [[@lukechu10], #99]

Renamed crate from maple-core to sycamore and maple-core-macro to sycamore-macro. Also renamed all instances of "Maple" to "Sycamore" [[@lukechu10], #109]

Rename TemplateResult to Template [[@lukechu10], #112]

Rename reactive sub-module to rx [[@lukechu10], #113]

Remove render functions (render, render_to, render_to_string, etc...) from prelude. These functions are generally only called once in a Sycamore app so they do not belong in the prelude [[@lukechu10], #140]

Source code(tar.gz)
Source code(zip)
0.4.3(Apr 1, 2021)
Changelog

⚡️ Features

Support '-' in attribute names. This makes the following syntax valid:
template! { button(aria-hidden="true") }

[[@lukechu10], #79]

🛠 Fixes

Delete removed nodes in Keyed first before adding new nodes and moving existing nodes [[@lukechu10], #77]

Source code(tar.gz)
Source code(zip)
0.4.2(Apr 1, 2021)
Changelog

🛠 Fixes

Fix Keyed iteration (hopefully for the last time) when moving nodes already inserted [[@lukechu10], #75]

Source code(tar.gz)
Source code(zip)
0.4.1(Mar 31, 2021)
Changelog

🛠 Fixes

Fix Keyed iteration (swapping and inserting not at the end) [[@lukechu10], #73]

📃 Documentation Fixes

Fix typo in README.md [[@iwburns], #64]]

Add discord server link to issue template [[@lukechu10], #68]

🎁 Example Fixes

Fix filter links in TodoMVC example [[@lukechu10], #65]

Source code(tar.gz)
Source code(zip)
0.4.0(Mar 26, 2021)
Changelog

⚡️ Features

Iteration using SignalVec. This is more of an experiment and there are some bugs. This will most likely be removed in a future version [[@lukechu10], #49]

Keyed iteration using Keyed and non-keyed iteration using Indexed which can iterate over a Signal<Vec>. This is the recommended way to iterate over a list of values [[@lukechu10], #51, #53 and #54]

Node references. Use the ref attribute to bind an HTML element to a NodeRef [[@lukechu10], #57]

🛠 Fixes

Fix debug assertions in Keyed [[@lukechu10], #53]

🛠 Internal Fixes and Improvements

Setup integration tests [[@lukechu10], #51]

🎁 Examples

Complete spec conforming TodoMVC implementation [[@lukechu10], #60]

Source code(tar.gz)
Source code(zip)
0.3.1(Mar 16, 2021)
Changelog

⚡️ Features

More types in template! macro. template! can now be nested [[@lukechu10], #45]

Component lifecycle using on_cleanup [[@lukechu10], #24]

🛠 Fixes

Add some badges to README.md [[@lukechu10], #44 and #48]

Source code(tar.gz)
Source code(zip)
0.3.0(Mar 13, 2021)
Changelog

⚡️ Features

Nested effects. Inner effects are destroyed and recreated when outer effects re-run [[@lukechu10], #29]

cloned! macro for making it easier to clone items into a new scope [[@lukechu10], #34]

Effects are created inside a reactivity root (using create_root). When the root Owner is dropped, all effects are also destroyed [[@lukechu10], 37]

Nested templates. Using this, it is also possible to build simple if/else control flow although there will be a more polished version [[@lukechu10], #41]

🛠 Fixes

Parse html root as an HtmlTree [[@lukechu10], #25]

Recreate effect dependencies on each re-run [[@lukechu10], #29]

🛠 Internal Fixes and Improvements

Remove double boxing of Computation [[@Kestrer], #31]

Create CODE_OF_CONDUCT.md [[@lukechu10], #33]

Add some preliminary benchmarks for signals and effects [[@lukechu10], #35]

Add clippy to CI workflow [[@Kestrer], #42]

⚠ BREAKING CHANGES

Replaced create_signal with Signal::new(...) and return Signal instead of getter/setter functions for increased type safety [[@Kestrer], #20]

📢 Announcements

New documentation website: https://maple-rs.netlify.app/ [[@lukechu10], #26 and #40]

Source code(tar.gz)
Source code(zip)
0.2.0(Mar 8, 2021)
Changelog

⚡️ Features

Components! In maple they are simply plain old functions that take their props via their parameters [#9]

Event listeners now have access to the Event object [#16]

🛠 Changes

The template! macro now returns a TemplateResult instead of raw DOM nodes for increased type safety [#10]

Source code(tar.gz)
Source code(zip)
0.1.1(Mar 7, 2021)
Changelog

⚡️ Features

New untracked utility for explicitly opting out of automatic dependency detection in reactive contexts [#8]

🛠 Fixes

Only subscribe to a dependency once in an effect, even if it is called multiple times [#7]

Source code(tar.gz)
Source code(zip)
0.1.0(Mar 7, 2021)
Changelog

⚡️ Features

Initial release!

Added template! macro.

Added reactivity primitives.

Source code(tar.gz)
Source code(zip)