percy Download - percy Source Code Download

Percy

Bauen Sie Frontend -Browser -Apps mit Rost + WebAssembly. Unterstützt das Rendering der Serverseite.

Das Percy -Buch

Diese Readme gibt eine leichte Einführung in Percy. Schauen Sie sich das Percy -Buch für einen vollständigen Spaziergang an.

Stabiler Rost

Percy kompiliert stabilen Rost mit einer Einschränkung:

Bei nächtlichem Rost können Sie Textknoten ohne Zitate erstellen.

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

Bei stabilem Rost sind Anführungszeichen erforderlich.

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

Dieser Unterschied wird verschwinden, sobald die Span -Standorte im Rost -Compiler -Rost -Tracking -Problem stabilisiert sind.

Erste Schritte

Der beste Weg, um auf dem neuesten Stand zu kommen, besteht darin, das Percy -Buch zu überprüfen, aber hier ist ein sehr einfaches Beispiel, mit dem Sie Ihre Füße nass machen können.

QuickStart - Sie haben Ihre Füße nass

Mit Percy können Sie Anwendungen erstellen, die nur Server -Side -Rendering, nur clientseitiges Rendering oder sowohl Server- als auch Client -Seitenrendern haben.

Hier ist ein schnelles und einfaches Beispiel für das Rendering von Client Side, das Sie jetzt ausprobieren können:

Erstellen Sie zunächst ein neues Projekt mit Verwendung

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

Fügen Sie Ihrem Projekt die folgenden Dateien hinzu.

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

Hier ist die Verzeichnisstruktur:

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

Bearbeiten Sie nun jede Datei mit dem folgenden Inhalt:

 # 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;
}

Jetzt rennen

 # 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

Und Sie sollten Folgendes sehen:

Client -Seite Beispiel

Gute Arbeit!

Weitere Beispiele

Isomorphe Web -App
Einheitstestansichtskomponenten
Öffnen Sie ein Problem oder eine PR, wenn Sie eine Idee für ein nützliches Beispiel haben!

API -Dokumentation

Percy-Dom-API-Dokumente
HTML-Macro-API-Dokumente
Percy-Router-API-Dokumente

Beitragen

Fühlen Sie sich immer sehr frei, um Probleme und PRs mit Fragen / Gedanken zu öffnen, die Sie haben!

Auch wenn es sich einfach oder einfach anfühlt - wenn Sie eine Frage haben, die Sie nicht schnell beantworten können, ist dies ein Fehler in der Dokumentation.

Weitere Informationen zum Beitrag zur Codebasis finden Sie im beitragenden Abschnitt des Percy -Buches!