Silkenweb - A library for writing reactive single page web apps

Overview

Silkenweb

tests crates.io Documentation MIT/Apache-2 licensed

A library for building reactive single page web apps.

Features

  • Fine grained reactivity using signals to minimize DOM API calls
  • No VDOM. Calls to the DOM API and your rendering code are minimized using signals.
  • Uses plain Rust syntax rather than a macro DSL
  • Downcasts Js objects for you where the type is known at compile time. For example:
    • input().dom_element() returns a web_sys::HtmlInputElement
    • button().on_click(...) passes your event handler a web_sys::HtmlInputElement and a web_sys::MouseEvent.

Example: A Simple Counter

use silkenweb::{
    elements::{button, div, p},
    mount,
    signal::Signal,
};

fn main() {
    let count = Signal::new(0);
    let set_count = count.write();
    let inc = move |_, _| set_count.replace(|&i| i + 1);
    let count_text = count.read().map(|i| format!("{}", i));

    let app = div()
        .child(button().on_click(inc).text("+"))
        .child(p().text(count_text));

    mount("app", app);
}

Quick Start

rustup target add wasm32-unknown-unknown
cargo install trunk wasm-pack
cargo install wasm-bindgen-cli --version 0.2.73
cd examples/counter
trunk serve --open

Learning

Comments
  • set_attribute: Taking `ToString` instead of `AsRef<str>`

    set_attribute: Taking `ToString` instead of `AsRef`

    Hi,

    Thanks for creating SilkenWeb – so far I really enjoy the nice macro-less API!

    (It's smooth as silk... 😅)

    While looking at the source code, I noticed the following function:

    fn set_attribute(dom_element: &dom::Element, name: impl AsRef<str>, value: impl AsRef<str>) {
        clone!(dom_element);
        let name = name.as_ref().to_string();
        let value = value.as_ref().to_string();
    
        queue_update(move || dom_element.set_attribute(&name, &value).unwrap());
    }
    

    Basically, you:

    1. request something that can be turned into &str
    2. convert it (potentially a String) into a &str
    3. and then you turn that &str into a String.

    That doesn't seem to make sense to me – is there a reason for that?

    I believe, ToString would be the right trait to request:

    fn foo<T: ToString>(s: T) {
        println!("{}", s.to_string())
    }
    
    fn main() {
        foo("bar");
        foo("bar".to_string())
    }
    
    opened by d4h0 3
  • Input value stops updating from signal

    Input value stops updating from signal

    Once a text input field has been edited by hand (i.e. type something into the field), the displayed input value will no longer be updated from a read signal. The input value is update just fine before the edit, it is only after the edit that it stops.

    Example reproduction:

    fn main() {
        let message = Signal::new("".to_owned());
        let message_read = message.read();
        let message_write = message.write();
    
        let app = div()
            .child(input().value(message_read))
            .child(button().text("Overwrite Message").on_click(move |_,_| {
                message_write.replace(|_| "Overwrite worked!".to_owned())
            }));
    
        mount("app", app);
    }
    

    In the example above, the overwrite button only appears to work if you haven't already typed something into the input.

    P.S. I'm a big fan. Of all the rust web frameworks I've tried, this is definitely my favorite. I hope you keep up the great work!

    opened by dwarn-axiallon 3
  • Routing

    Routing

    Routing is a bit basic at the moment. Currently it just provides a URL string signal. We should provide a more structured URL with methods to access different components. The url library from servo looks like a great parser for server side apps, but would bloat client side apps too much. We need a lightweight wrapper around the browser's URL parser on the client side and a wrapper around the url library on the server side.

    opened by simon-bourne 1
  • Any benchmark comparison

    Any benchmark comparison

    I am new to silkenweb, excited with the non-vdom idea.

    Are there any simple and quick performance benchmark compared to other rust-wasm frameworks, such as yew, seed, sycamore?

    thank you

    opened by vebodev 1
  • Bump regex from 1.5.4 to 1.5.5

    Bump regex from 1.5.4 to 1.5.5

    Bumps regex from 1.5.4 to 1.5.5.

    Changelog

    Sourced from regex's changelog.

    1.5.5 (2022-03-08)

    This releases fixes a security bug in the regex compiler. This bug permits a vector for a denial-of-service attack in cases where the regex being compiled is untrusted. There are no known problems where the regex is itself trusted, including in cases of untrusted haystacks.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies rust 
    opened by dependabot[bot] 1
  • Server Side Routing

    Server Side Routing

    There should be an implementation of routing on the server. Url should be wrapped in our own struct with a client and server side implementation provided via a trait. The implementation should be selected at compile time with cfg attrs.

    opened by simon-bourne 1
  • Provide a way to only respond to signal changes

    Provide a way to only respond to signal changes

    Currently we don't distinguish between signal initialization and signal changes when mapping over them. TodoMVC storage needs a way to distinguish the 2 conditions. One option is to have a map alternative that's passed an initializing flag.

    opened by simon-bourne 1
  • Cached Elements

    Cached Elements

    Elements should have a .cache() method that globally caches the node by call site (and key?) and uses clone_node to generate the elements. Will this work for reactive elements?

    opened by simon-bourne 1
  • Optimizing DOM Tree Representation

    Optimizing DOM Tree Representation

    Currently Element mirrors the real DOM tree. It only really needs to store a tree of reactive nodes and their reactive children. Is this even worth implementing?

    opened by simon-bourne 1
  • Flattening Signals

    Flattening Signals

    Can we implement a flatten method on nested ReadSignals?

        impl<T> ReadSignal<ReadSignal<T>> {
            fn flatten(&self) -> ReadSignal<T>;
        }
    
    opened by simon-bourne 1
  • Generalize Accumulators

    Generalize Accumulators

    Accumulators should be generalized in terms of actions and inverses. This enables And and Or accumulators which keep a running count of how many items are true.

    opened by simon-bourne 1
Owner
null
Sauron is an html web framework for building web-apps. It is heavily inspired by elm.

sauron Guide Sauron is an web framework for creating fast and interactive client side web application, as well as server-side rendering for back-end w

Jovansonlee Cesar 1.7k Dec 26, 2022
Turn any web page into a desktop app (but, lightweight <1MB)

Intro Turn any web page into a desktop app (but, lightweight <1MB) The bundle will be less than 2MB Demo: https://i.imgur.com/BLr03oF.mp4 Install carg

null 9 Dec 27, 2022
📝 Web-based, reactive Datalog notebooks for data analysis and visualization

Percival is a declarative data query and visualization language. It provides a reactive, web-based notebook environment for exploring complex datasets, producing interactive graphics, and sharing results.

Eric Zhang 486 Dec 28, 2022
Rust / Wasm framework for building client web apps

Yew Rust / Wasm client web app framework Documentation (stable) | Documentation (latest) | Examples | Changelog | Roadmap | 简体中文文档 | 繁體中文文檔 | ドキュメント A

Yew Stack 25.8k Jan 2, 2023
Seed is a Rust front-end framework for creating fast and reliable web apps with an Elm-like architecture.

Seed is a Rust front-end framework for creating fast and reliable web apps with an Elm-like architecture.

null 3.6k Jan 6, 2023
Actix Web is a powerful, pragmatic, and extremely fast web framework for Rust.

Actix Web is a powerful, pragmatic, and extremely fast web framework for Rust.

Actix 16.2k Jan 2, 2023
Hot reload static web server for deploying mutiple static web site with version control.

SPA-SERVER It is to provide a static web http server with cache and hot reload. 中文 README Feature Built with Hyper and Warp, fast and small! SSL with

null 7 Dec 18, 2022
Code template for a production Web Application using Axum: The AwesomeApp Blueprint for Professional Web Development.

AwesomeApp rust-web-app More info at: https://awesomeapp.dev/rust-web-app/ rust-web-app YouTube episodes: Episode 01 - Rust Web App - Course to Produc

null 45 Sep 6, 2023
A highly customizable, full scale web backend for web-rwkv, built on axum with websocket protocol.

web-rwkv-axum A axum web backend for web-rwkv, built on websocket. Supports BNF-constrained grammar, CFG sampling, etc., all streamed over network. St

Li Junyu 12 Sep 25, 2023
Proof of concept writing a monolith BBS using Rust, GraphQL, WASM, and SQL. WILL BE ARCHIVED ONCE PROVEN

GraphQL Forum Important DO NOT even think about using this in production, lest your sanity be destroyed and credentials lost! Loosely following the aw

Rongcui Dong 25 Apr 25, 2023
A simple, modular, and fast framework for writing MEV bots in Rust.

What is Artemis? Artemis is a framework for writing MEV bots in Rust. It's designed to be simple, modular, and fast. At its core, Artemis is architect

Paradigm 1.4k Jun 26, 2023
A fast static site generator in a single binary with everything built-in. https://www.getzola.org

zola (né Gutenberg) A fast static site generator in a single binary with everything built-in. Documentation is available on its site or in the docs/co

Zola 10.1k Jan 10, 2023
Merge multiple Juniper object definitions into a single object type.

juniper-compose Merge multiple Juniper object definitions into a single object type. crates.io | docs | github Motivation You are building a GraphQL s

Kit Isaev 3 Aug 5, 2022
A Rust library to extract useful data from HTML documents, suitable for web scraping.

select.rs A library to extract useful data from HTML documents, suitable for web scraping. NOTE: The following example only works in the upcoming rele

Utkarsh Kukreti 829 Dec 28, 2022
living library; snapgene for the web

Viviteca The living library; SnapGene for the web. Setup To contribute to this project you will require: rust pre-commit Git workflow You should insta

Maximilien Rothier Bautzer 1 Feb 5, 2022
axum-serde is a library that provides multiple serde-based extractors and responders for the Axum web framework.

axum-serde ?? Overview axum-serde is a library that provides multiple serde-based extractors / responses for the Axum web framework. It also offers a

GengTeng 3 Dec 12, 2023
A Rust web framework

cargonauts - a Rust web framework Documentation cargonauts is a Rust web framework intended for building maintainable, well-factored web apps. This pr

null 179 Dec 25, 2022
A Google-like web search engine that provides the user with the most relevant websites in accordance to his/her query, using crawled and indexed textual data and PageRank.

Mini Google Course project for the Architecture of Computer Systems course. Overview: Architecture: We are working on multiple components of the web c

Max 11 Aug 10, 2022
A rust web framework with safety and speed in mind.

darpi A web api framework with speed and safety in mind. One of the big goals is to catch all errors at compile time, if possible. The framework uses

null 32 Apr 11, 2022