4个版本

0.1.5	2021年8月1日
0.1.3	2021年7月22日
0.1.2	2021年7月22日
0.1.1	2021年7月11日

#53 在 #服务器端渲染

在 2 个crate中使用 (通过 percy-router)

MIT/Apache

22KB
389 行

Percy

使用Rust + WebAssembly构建前端浏览器应用。支持服务器端渲染。

Percy图书

此README提供了对Percy的简要介绍。查看Percy图书以获取完整教程。

稳定Rust

Percy在稳定Rust上编译，但有需要注意的一点

在nightly Rust上，你可以不使用引号创建文本节点。

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

在稳定Rust上，需要使用引号。

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

这种差异将在Rust编译器中span位置稳定后消失 - Rust跟踪问题。

入门

最佳方法是查看Percy图书，但这里有一个非常基本的示例，可以帮助你入门。

快速入门 - 入门示例

Percy允许你创建只具有服务器端渲染、只具有客户端渲染或两者兼有的应用程序。

这是一个快速且简单的客户端渲染工作示例，你现在就可以尝试

首先，使用以下命令创建一个新项目

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

将以下文件添加到您的项目中。

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

这是目录结构

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

现在使用以下内容编辑每个文件

# 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: 30px;
}
.blue {
  color: blue;
}
.giant-button {
  font-size: 24px;
  font-weight: bold;
}

现在运行

# 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

你应该看到以下内容

Client side example

做得不错！

API文档

贡献

请随时自由地提出问题/想法的ISSUE和PR！

即使它看起来很基础或简单 - 如果你有任何无法迅速回答自己的问题，那么这是文档的一个失败。

有关如何贡献代码库的更多信息，可以在《Percy 书籍》的贡献部分找到！

测试

要运行所有单元、集成和浏览器测试，请先获取依赖项。

./test.sh

许可证

MIT

依赖项

约2MB
约46K SLoC

宏 percy-router-macro