Unduh percy - Unduh Kode Sumber percy

Percy

Bangun Aplikasi Browser Frontend dengan Rust + WebAssembly. Mendukung rendering sisi server.

Buku Percy

Readme ini memberikan pengantar yang ringan untuk Percy. Lihatlah buku Percy untuk berjalan -jalan penuh.

Karat yang stabil

Percy mengkompilasi karat stabil dengan satu peringatan:

Pada karat malam Anda dapat membuat node teks tanpa kutipan.

 // Nightly Rust does not require quotes around text nodes.
html ! { <div> My text nodes here </div> } ;

Pada karat yang stabil, tanda kutip diperlukan.

 // Stable Rust requires quotes around text nodes.
html ! { <div> { "My text nodes here " } </div> } ;

Perbedaan ini akan hilang begitu lokasi rentang distabilkan dalam masalah pelacakan karat - masalah pelacakan karat.

Memulai

Cara terbaik untuk mempercepat adalah dengan memeriksa buku Percy, tetapi di sini adalah contoh yang sangat mendasar untuk membuat kaki Anda basah.

QuickStart - membuat kaki Anda basah

Percy memungkinkan Anda untuk membuat aplikasi yang hanya memiliki rendering sisi server, hanya rendering sisi klien, atau rendering sisi server dan klien.

Berikut adalah contoh kerja yang cepat dan mudah dari rendering sisi klien yang dapat Anda coba sekarang:

Pertama, buat proyek baru menggunakan

cargo new client-side-web-app --lib
cd client-side-web-app

Tambahkan file berikut ke proyek Anda.

touch build.sh
touch index.html
touch app.css

Inilah struktur direktori:

 .
├── Cargo.toml
├── build.sh
├── index.html
├── app.css
└── src
    └── lib.rs

Sekarang edit setiap file dengan konten berikut:

 # contents of build.sh

#! /bin/bash

cd " $( dirname " $0 " ) "

mkdir -p public

cargo build --target wasm32-unknown-unknown
wasm-bindgen target/wasm32-unknown-unknown/debug/client_side_web_app.wasm --no-typescript --target web --out-dir ./public --debug
cp index.html public/
cp app.css public/

 // contents of src/lib.rs

use wasm_bindgen :: prelude :: * ;
use web_sys ;

use percy_dom :: prelude :: * ;

# [ wasm_bindgen ]
struct App {
  pdom : PercyDom
}

# [ wasm_bindgen ]
impl App {
    # [ wasm_bindgen ( constructor ) ]
    pub fn new ( ) -> App {
        let start_view = html ! { <div> Hello </div> } ;

        let window = web_sys :: window ( ) . unwrap ( ) ;
        let document = window . document ( ) . unwrap ( ) ;
        let body = document . body ( ) . unwrap ( ) ;

        let mut pdom = PercyDom :: new_append_to_mount ( start_view , & body ) ;

        let greetings = "Hello, World!" ;

        let end_view = html ! {
           // Use regular Rust comments within your html
           <div class= [ "big" , "blue" ] >
              /* Interpolate values using braces */
              <strong> { greetings } </strong>

              <button
                class= "giant-button"
                onclick=|_event| {
                   web_sys :: console :: log_1 ( & "Button Clicked!" . into ( ) ) ;
                }
              >
                // No need to wrap text in quotation marks (:
                Click me and check your console
              </button>
           </div>
        } ;

        pdom . update ( end_view ) ;

        App { pdom }
    }
}

 # contents of Cargo.toml

[ package ]
name = " client-side-web-app "
version = " 0.1.0 "
authors = [ " Friends of Percy " ]
edition = " 2018 "

[ lib ]
crate-type = [ " cdylib " ] # Don't forget this!

[ dependencies ]
wasm-bindgen = " 0.2 "
js-sys = " 0.3 "
percy-dom = " 0.9 "

[ dependencies . web-sys ]
version = " 0.3 "
features = [
    " Document " ,
    " MouseEvent " ,
    " Window " ,
    " console "
]

 <!-- contents of index.html -->
<!DOCTYPE html >
< html lang =" en " >
    < head >
        < meta charset =" UTF-8 " >
        < meta name =" viewport " content =" width=device-width, initial-scale=1 " >
        < link rel =" stylesheet " type =" text/css " href =" app.css " />
        < title > Client Side Demo </ title >
    </ head >
    < body style =' margin: 0; padding: 0; width: 100%; height: 100%; ' >
        < script type =" module " >
            import init , { App } from '/client_side_web_app.js'
        
            async function run ( )  {
                await init ( '/client_side_web_app_bg.wasm' )
                new App ( )
            }
        
            run ( )
        </ script >
    </ body >
</ html >

 /* contents of app.css */
. big {
  font-size : 30 px ;
}
. blue {
  color : blue;
}
. giant-button {
  font-size : 24 px ;
  font-weight : bold;
}

Sekarang jalankan

 # Used to compile your Rust code to WebAssembly
cargo install wasm-bindgen-cli

# Or any other static file server that supports the application/wasm mime type
cargo install https

chmod +x ./build.sh
./build.sh

# Visit localhost:8080 in your browser
http ./public --port 8080

Dan Anda harus melihat yang berikut:

Contoh sisi klien

Kerja bagus!

Lebih banyak contoh

Aplikasi Web Isomorphic
Komponen tampilan pengujian unit
Buka masalah atau PR jika Anda memiliki ide untuk contoh yang berguna!

Dokumentasi API

Percy-Dom API Docs
Dokumen API HTML-Macro
Percy-Router API Docs

Berkontribusi

Selalu merasa sangat bebas untuk membuka masalah dan PR dengan pertanyaan / pemikiran apa pun yang Anda miliki!

Bahkan jika terasa mendasar atau sederhana - jika ada pertanyaan di pikiran Anda, Anda tidak dapat dengan cepat menjawab diri sendiri maka itu adalah kegagalan dalam dokumentasi.

Lebih banyak informasi tentang cara berkontribusi pada basis kode dapat ditemukan di bagian yang berkontribusi dari buku Percy!