percy-preview

percy-preview 帮助您渲染任何视图组件在任何状态下的交互式预览。

用法

创建一个依赖于您的应用程序crate的预览crate。

name = "my-app-preview"

[lib]
crate-type = ["cdylib"]

[dependencies]
my-app = {path = "/path/to/my-app"}
percy-preview-app = {version = "0.1"}

您的预览crate使用 percy-preview-app 创建一个可以渲染您的应用程序crate公开的 Vec<Preview> 的应用程序。

// TODO... illustrate this.. actually better yet add an example preview application to the crate... and just let this documentation
// focus on explaining the high level details before linking you off to the full example.

以下是一个可以用于预览您的视图之一的函数示例。

use percy_dom::prelude::*;

struct MyView {
    count: u8,
    increment_count: Box<dyn FnMut() -> ()>
}

impl View for MyView {
	fn render(self) -> VirtualNode {
        let MyView { count, mut increment_count } = self;

		html! {
		    <div
		        on_click=move || { increment_count() }
		    >
		        The count is { count }
		    </div>
		}
	}
}

#[cfg(feature = "preview")]
mod previews {
    use super::MyView;
    use std::sync::atomic::{AtomicU32, Ordering};
    use std::sync::Arc;

    use percy_dom::prelude::*;
    use percy_preview::{Preview, Rerender};

    pub fn preview_my_view(rerender: Rerender) -> Preview {
        let count = Arc::new(AtomicU32::new(0));
        let count_clone = count.clone();

        let increment_count = Box::new(|| {
            count_clone.fetch_add(1, Ordering::SeqCst);
            rerender()
        });

        let render = move || {
            let view = MyView {
                count: count.load(Ordering::SeqCst),
                increment_count,
            };

            html! {
                <div> { view } </div>
            }
        };

        Preview {
            name: "My View".to_string(),
            render: Box::new(render),
        }
    }
}