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