percy-preview

percy-preview helps you render an interactive preview of any view component in any state.

Usage

Create a preview crate that depends on your application crate.

``` name = "my-app-preview"

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

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

Your preview crate uses percy-preview-app to create an application that can render the Vec<Preview> that your app crate exposes.

// 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.

Here's an example of a function that can be used to preview one of your views.

```rust use percy_dom::prelude::*;

struct MyView { count: u8, increment_count: Box ()> }

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),
    }
}

} ```