Skip to content

Commit

Permalink
docs: update README
Browse files Browse the repository at this point in the history
Signed-off-by: Guillaume Hivert <[email protected]>
  • Loading branch information
ghivert committed Apr 17, 2024
1 parent 01d7d50 commit ac0309d
Showing 1 changed file with 36 additions and 2 deletions.
38 changes: 36 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<!-- [![Package Version](https://img.shields.io/hexpm/v/tardis)](https://hex.pm/packages/tardis)
[![Hex Docs](https://img.shields.io/badge/hex-docs-ffaff3)](https://hexdocs.pm/tardis/) -->

Every good frontend framework should have a good debugger. Tardis tries to fill
Every good frontend framework deserve to have a good debugger. Tardis tries to fill
this gap with [Lustre](https://hexdocs.pm/lustre). Because of the immutable nature and the management of side-effects of lustre, it's possible to implement a debugger able to register everything that happened in the app and that can rewind the time in order to display the state of your app, at any point in time! Tardis is a time-traveller debugger, made to interact with multiple lustre applications and components on one page, with the simplest setup possible yet!

## Demo
Expand All @@ -28,7 +28,7 @@ import lustre/event
import tardis
pub fn main() {
let main = tardis.single("main")
let assert Ok(main) = tardis.single("main")
lustre.application(init, update, view)
|> tardis.wrap(main)
Expand Down Expand Up @@ -58,3 +58,37 @@ fn view(model) {
```

You're good to go!

## Multiple apps setup

While it's easy to setup a single application with tardis, it can also be used to debug multiple applications in the same page. Tardis exposes two additional functions: `setup` and `application`. The first one initialize the instance of the debugger, while the second one allows to setup an application on the debugger!

In case you're developping a independant package, you can even send the debugger instance directly to your application, and it will nicely integrate in it!

```gleam
import gleam/int
import lustre
import lustre/element/html
import lustre/event
import tardis
pub fn main() {
let assert Ok(instance) = tardis.setup()
let main = tardis.application(instance, "main")
let mod = tardis.application(instance, "module")
lustre.application(init_1, update_1, view_1)
|> tardis.wrap(main)
|> lustre.start("#app", Nil)
|> tardis.activate(main)
lustre.application(init_2, update_2, view_2)
|> tardis.wrap(mod)
|> lustre.start("#mod", Nil)
|> tardis.activate(mod)
}
```

## Style collision

No worry about the debugger going into your application! Tardis uses the Shadow DOM, meaning no style nor behavior will leak out of the debugger and ending in your application. Tardis will just come on top, watch the application, and can rollback in time. Nothing more!

0 comments on commit ac0309d

Please sign in to comment.