All Projects → pepsighan → papito

pepsighan / papito

Licence: MIT License
A Beginner Friendly Rusty WASM Framework

Programming Languages

rust
11053 projects

Projects that are alternatives of or similar to papito

learn-wasm
🎲 Learning WebAssembly
Stars: ✭ 57 (+11.76%)
Mutual labels:  wasm
pywasm3
Python bindings for Wasm3, the fastest WebAssembly interpreter
Stars: ✭ 34 (-33.33%)
Mutual labels:  wasm
ux-charts
Simple, responsive, modern Charts with zero dependencies
Stars: ✭ 22 (-56.86%)
Mutual labels:  wasm
wasm-fizzbuzz
WebAssembly from Scratch: From FizzBuzz to DooM.
Stars: ✭ 1,364 (+2574.51%)
Mutual labels:  wasm
swam
WebAssembly engine in Scala
Stars: ✭ 38 (-25.49%)
Mutual labels:  wasm
ocaml-offchain
Fork of WebAssembly reference interpreter with support for generating proofs needed for blockchain verification
Stars: ✭ 42 (-17.65%)
Mutual labels:  wasm
holyc
An easy to use C++ to WASM compiler (Highly-experimental)
Stars: ✭ 33 (-35.29%)
Mutual labels:  wasm
x-img-diff-js
🎨 JavaScript library which compares 2 images and detect structural difference information using OpenCV(WebAssembly)
Stars: ✭ 43 (-15.69%)
Mutual labels:  wasm
golang-wasm
Golang-WASM provides a simple idiomatic, and comprehensive API and bindings for working with WebAssembly for Go and JavaScript developers
Stars: ✭ 57 (+11.76%)
Mutual labels:  wasm
elementary-nightly-rpms
nightly Pantheon DE + elementary applications packages for fedora (unofficial)
Stars: ✭ 34 (-33.33%)
Mutual labels:  nightly
monolith-of-web
A chrome extension to make a single static HTML file of the web page using a WebAssembly port of monolith CLI
Stars: ✭ 92 (+80.39%)
Mutual labels:  wasm
wasm-jpeg-ijg
Demo from Chrome Dev Summit of using Web Assembly to optimize images in a browser
Stars: ✭ 54 (+5.88%)
Mutual labels:  wasm
mutator
mutator is an experimental suite of tools aimed at analysis and automation of C/C++ code development
Stars: ✭ 62 (+21.57%)
Mutual labels:  wasm
wecty
Frontend ToolKit for Go and TinyGo.
Stars: ✭ 34 (-33.33%)
Mutual labels:  wasm
rust-webview-todomvc-yew
lightweight desktop todomvc implementation using rust,wasm and web-view
Stars: ✭ 92 (+80.39%)
Mutual labels:  wasm
idris-codegen-wasm
WebAssembly Code Generation Backend for Idris Compiler
Stars: ✭ 79 (+54.9%)
Mutual labels:  wasm
xcc
Toy C compiler for x86-64
Stars: ✭ 19 (-62.75%)
Mutual labels:  wasm
p2p-git-portal-poc
p2p git portal proof-of-concept using Svelte Golang/WASM (experimental)
Stars: ✭ 29 (-43.14%)
Mutual labels:  wasm
wasmer-zig
Zig bindings for the Wasmer WebAssembly runtime
Stars: ✭ 24 (-52.94%)
Mutual labels:  wasm
oasis-rs
A humane blockchain programming framework.
Stars: ✭ 71 (+39.22%)
Mutual labels:  wasm

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?
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].