Papito (पपितो) = 芒果

弃用：不再维护

一个受 Vue 和 React 启发的 Rust 语言前端 Web 框架，为 WASM 平台开发，适合初学者。

目标

• 适合初学者。从 Vue 和 React 中汲取灵感。
• 纯 Rust Web 应用程序。
• 仅 Cargo（不使用 webpack）。应提供可选工具，例如模拟加载器，如 file-loader、style-loader、url-loader。

它仍在积极开发中。所以请谨慎使用。

演示

#![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");
}

支持的特性

• 组件属性
• 组件事件
• DOM 事件
• 响应式状态
• 组件生命周期（仅部分）
• 服务器端渲染
• Hyperscript 宏 h!
• 类似于 Vue 的模板语法
• 上下文 API？