Skip to content
This repository has been archived by the owner. It is now read-only.
A Beginner Friendly Rusty WASM Framework
Rust
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
papito
papito_codegen
papito_dom
.gitignore
.travis.yml
Cargo.lock
Cargo.toml
LICENSE.md
README.md

README.md

Papito (पपितो) = Papaya

Deprecated : No Longer Maintained

Build Status

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?
You can’t perform that action at this time.