2 releases
Uses old Rust 2015
0.1.1 | Aug 29, 2018 |
---|---|
0.1.0 | Mar 28, 2018 |
#21 in #wasm-framework
Used in 2 crates
62KB
1.5K
SLoC
Papito (पपितो) = Papaya
Deprecated : No Longer Maintained
A Vue & React inspired Frontend Web Framework in Rust for the WASM platform. Developed by a beginner for beginners.
Goals
- Beginner Friendly. Draws cues from Vue and React.
- Pure Rust web apps.
- Cargo only (without webpack). Should provide optional tools that mimic loaders such as
file-loader
,style-loader
,url-loader
.
It is still under active development. So tread carefully.
Demo
#![feature(proc_macro, conservative_impl_trait)]
#[macro_use]
extern crate papito_codegen;
#[macro_use]
extern crate papito_dom;
extern crate papito;
#[macro_use]
extern crate stdweb;
use papito_codegen::{component, render, events, event};
use papito::prelude::{Render, Lifecycle};
use papito_dom::prelude::VNode;
use papito::App;
use stdweb::web::event::ClickEvent;
#[derive(Lifecycle)]
#[component]
struct Div;
#[render]
impl Render for Div {
fn render(&self) -> VNode {
h!("div", { "style" => "background-color: #fafafa; color: #666;" },
h!([
h!("This is the front page of web."),
h!(comp Button, { style => "background-color: black; color: white;".to_string() })
]))
}
}
#[component]
struct Button {
#[prop]
style: String,
click: bool
}
#[events]
impl Button {
#[event]
fn on_click(&mut self, _: ClickEvent) {
let inv = !self.click;
self.set_click(inv);
}
}
impl Lifecycle for Button {
fn created(&mut self) {
console!(log, &format!("Initial click value: {}", self.click));
}
fn updated(&mut self) {
console!(log, &format!("You clicked the button: {}", self.click));
}
}
#[render]
impl Render for Button {
fn render(&self) -> VNode {
let click = self.inner.borrow().click;
let style = self.inner.borrow().style.clone();
h!([
h!("h1", h!("Hello World!")),
h!("button", { "style" => style }, [ self.on_click() ], h!("Click")),
h!("h3", h!(if click { "You clicked" } else { "You unclicked" }))
])
}
}
fn main() {
App::new::<Div>().render("app");
}
Features Supported
- Component props
- Component Events
- DOM Events
- Reactive states
- Component Lifecycle (only some)
- Server Renderer
- Hyperscript macro h!
- Vue-like template syntax
- Context API?
Dependencies
~2.5–3.5MB
~69K SLoC