ivanceras / Sauron
Licence: mit
Sauron is an html web framework for building web-apps. It is heavily inspired by elm.
Stars: ✭ 1,217
Projects that are alternatives of or similar to Sauron
Marko
A declarative, HTML-based language that makes building web apps fun
Stars: ✭ 10,796 (+787.1%)
Mutual labels: vdom, dom
Hyperawesome
A curated list of awesome projects built with Hyperapp & more.
Stars: ✭ 446 (-63.35%)
Mutual labels: vdom, dom
Val
VirtualDOM abstraction layer - give yourself better integration and full control over the DOM with any virtual DOM library that uses a Hyperscript-like API such as React and Preact.
Stars: ✭ 181 (-85.13%)
Mutual labels: vdom, dom
Ijk
Transforms arrays into virtual dom trees; a terse alternative to JSX and h
Stars: ✭ 452 (-62.86%)
Mutual labels: vdom, dom
Asm Dom
A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)
Stars: ✭ 2,604 (+113.97%)
Mutual labels: vdom, dom
Preact
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Stars: ✭ 30,527 (+2408.38%)
Mutual labels: vdom, dom
Gomponents
Declarative view components in Go, that can render to HTML5.
Stars: ✭ 49 (-95.97%)
Mutual labels: dom
Sentineljs
Detect new DOM nodes using CSS selectors (650 bytes)
Stars: ✭ 1,100 (-9.61%)
Mutual labels: dom
Curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (-14.63%)
Mutual labels: dom
Query Selector
Query the document tree by selector, filtering by element type.
Stars: ✭ 70 (-94.25%)
Mutual labels: dom
Asm Dom Boilerplate
A simple boilerplate to start using asm-dom without configuration.
Stars: ✭ 49 (-95.97%)
Mutual labels: vdom
Element Resize Detector
Optimized cross-browser resize listener for elements.
Stars: ✭ 1,040 (-14.54%)
Mutual labels: dom
Dom To Svg
Library to convert a given HTML DOM node into an accessible SVG "screenshot".
Stars: ✭ 67 (-94.49%)
Mutual labels: dom
Autosize Input
🎈 Effortless, dynamic-width text boxes in vanilla JavaScript
Stars: ✭ 64 (-94.74%)
Mutual labels: dom
sauron
Sauron is an web framework for creating fast and interactive client side web application, as well as server-side rendering for back-end web applications.
Example
use log::trace;
use sauron::html::attributes::attr;
use sauron::html::text;
use sauron::prelude::*;
use sauron::{Cmd, Component, Node, Program};
#[derive(Debug)]
pub enum Msg {
Click,
}
pub struct App {
click_count: u32,
}
impl App {
pub fn new() -> Self {
App { click_count: 0 }
}
}
impl Component<Msg> for App {
fn view(&self) -> Node<Msg> {
node! {
<main>
<h1>"Minimal example"</h1>
<div class="some-class" id="some-id" {attr("data-id", 1)}>
<input class="client"
type="button"
value="Click me!"
key=1
on_click={|_| {
trace!("Button is clicked");
Msg::Click
}}
/>
<div>{text(format!("Clicked: {}", self.click_count))}</div>
<input type="text" value={self.click_count}/>
</div>
</main>
}
}
fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
trace!("App is updating with msg: {:?}", msg);
match msg {
Msg::Click => self.click_count += 1,
}
Cmd::none()
}
}
#[wasm_bindgen(start)]
pub fn main() {
console_log::init_with_level(log::Level::Trace).unwrap();
console_error_panic_hook::set_once();
Program::mount_to_body(App::new());
}
index.html
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<title>Minimal sauron app</title>
</head>
<body>
<script type=module>
import init from './pkg/minimal.js';
init().catch(console.error);
</script>
</body>
</html>
In Cargo.toml, specify the crate-type to be cdylib
[package]
name = "minimal"
version = "0.1.0"
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
sauron = "0.34"
console_error_panic_hook = "0.1"
log = "0.4"
console_log = "0.2"
Build using
$> wasm-pack build --target web --release
Look at the examples and the build script for the details.
Demo examples
- todomvc The todomvc example
- futuristic-ui - A demo of futuristic-ui showcasing animation, transition and timed Component update.
- data-viewer - A resizable spreadsheet CSV data viewer
- svg-clock - A clock drawn using SVG and window tick event.
- svg-graph - A simple graph using SVG
- ultron code-editor - A web-base text-editor with syntax highlighting
Converting HTML into Sauron's syntax
html2sauron - A tool to easily convert html into sauron node tree for your views.
Prerequisite:
cargo install wasm-pack
cargo install basic-http-server
Performance:
Sauron is one of the fastest.
Run the benchmark yourself:
Please support this project:
License: MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].