Skip to content

Commit

Permalink
docs: improve README
Browse files Browse the repository at this point in the history
  • Loading branch information
ghivert committed Apr 26, 2024
1 parent e86ca4b commit 060fbe2
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 13 deletions.
6 changes: 6 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"printWidth": 80,
"proseWrap": "always",
"semi": false,
"singleQuote": true
}
35 changes: 30 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,23 @@
<!-- [![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 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!
> While fully working, and usable right away, Tardis is still in development to
> find the perfect API and to see how to integrate it in Lustre & the Lustre
> devtools. Maybe in few months, you'll be able to enjoy the time-traveller
> debugger without any install needed! Right now, Tardis uses internals access
> from Lustre, otherwise it could not work. Be careful when updating Lustre,
> otherwise Tardis could end up not working! You can expect quick releases
> though at each Lustre release!
>
> If you think to anything, feedbacks are greatly appreciated!
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 Down Expand Up @@ -61,9 +76,16 @@ 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`](https://hexdocs.pm/tardis/tardis.html#setup) and [`application`](https://hexdocs.pm/tardis/tardis.html#application). The first one initialize the debugger, while the second one allows to setup an application on the debugger!
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`](https://hexdocs.pm/tardis/tardis.html#setup) and
[`application`](https://hexdocs.pm/tardis/tardis.html#application). The first
one initialize 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 tardis or the debugger instance directly to your application, and it will nicely integrate in it!
In case you're developping a independant package, you can even send the tardis
or the debugger instance directly to your application, and it will nicely
integrate in it!

```gleam
import gleam/int
Expand Down Expand Up @@ -91,4 +113,7 @@ pub fn main() {

## 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!
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!
24 changes: 16 additions & 8 deletions src/tardis.ffi.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ export function inspect(v) {
if (v instanceof Date) return new DataDate(`//js(Date("${v.toISOString()}"))`)
if (v instanceof Function) {
const args = []
for (const i of Array(v.length).keys()) args.push(String.fromCharCode(i + 97))
for (const i of Array(v.length).keys())
args.push(String.fromCharCode(i + 97))
return new DataFunction(`//fn(${args.join(', ')}) { ... }`)
}
return inspectObject(v)
Expand All @@ -67,9 +68,11 @@ function inspectObject(v) {

function inspectCustomType(record) {
const props = List.fromArray(
Object.keys(record).map(label => {
Object.keys(record).map((label) => {
const value = inspect(record[label])
return isNaN(parseInt(label)) ? [new Some(label + ': '), value] : [new None(), value]
return isNaN(parseInt(label))
? [new Some(label + ': '), value]
: [new None(), value]
})
)
return new DataCustomType(record.constructor.name, props)
Expand All @@ -84,7 +87,9 @@ export function inspectBitArray(bits) {
}

export function inspectUtfCodepoint(codepoint) {
return new DataUtfCodepoint(`//utfcodepoint(${String.fromCodePoint(codepoint.value)})`)
return new DataUtfCodepoint(
`//utfcodepoint(${String.fromCodePoint(codepoint.value)})`
)
}

export function stringify(v) {
Expand All @@ -106,7 +111,8 @@ export function stringify(v) {
if (v instanceof Date) return `//js(Date("${v.toISOString()}"))`
if (v instanceof Function) {
const args = []
for (const i of Array(v.length).keys()) args.push(String.fromCharCode(i + 97))
for (const i of Array(v.length).keys())
args.push(String.fromCharCode(i + 97))
return `//fn(${args.join(', ')}) { ... }`
}
return stringifyObject(v)
Expand Down Expand Up @@ -136,12 +142,14 @@ function stringifyObject(v) {

function stringifyCustomType(record) {
const props = Object.keys(record)
.map(label => {
.map((label) => {
const value = stringify(record[label])
return isNaN(parseInt(label)) ? `${label}: ${value}` : value
})
.join(', ')
return props ? `${record.constructor.name}(${props})` : record.constructor.name
return props
? `${record.constructor.name}(${props})`
: record.constructor.name
}

export function stringifyList(list) {
Expand Down Expand Up @@ -189,6 +197,6 @@ export function addCustomStyles(content) {
export function updateLustre(application, initMapper, updateMapper) {
return application.withFields({
update: updateMapper(application.update),
init: initMapper(application.init)
init: initMapper(application.init),
})
}

0 comments on commit 060fbe2

Please sign in to comment.