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？