Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

Time traveller debugger, tailor-made for Lustre! Rewind your history, and see what you've done!

License

NotificationsYou must be signed in to change notification settings

ghivert/tardis

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

While fully working, and usable right away, Tardis is still in development tofind the perfect API and to see how to integrate it in Lustre & the Lustredevtools. Maybe in few months, you'll be able to enjoy the time-travellerdebugger without any install needed! Right now, Tardis uses internals accessfrom Lustre, otherwise it could not work. Be careful when updating Lustre,otherwise Tardis could end up not working! You can expect quick releasesthough 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 tofill this gap withLustre. Because of the immutablenature and the management of side-effects of lustre, it's possible to implementa debugger able to register everything that happened in the app and that canrewind 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 lustreapplications and components on one page, with the simplest setup possible yet!

Demo

Demo.mp4

Quickstart Guide

First, add tardis to your gleam project.

gleam add tardis

Then, setup the package.

importgleam/intimportlustreimportlustre/element/htmlimportlustre/eventimporttardispubfnmain(){letassertOk(main)=tardis.single("main")lustre.application(init,update,view)|>tardis.wrap(with:main)|>lustre.start("#app",Nil)|>tardis.activate(with:main)}fninit(_){0}fnupdate(model,msg){casemsg{Incr->model+1Decr->model-1}}fnview(model){letcount=int.to_string(model)html.div([],[html.button([event.on_click(Incr)],[html.text(" + ")]),html.p([],[html.text(count)]),html.button([event.on_click(Decr)],[html.text(" - ")])])}

You're good to go!

Multiple apps setup

While it's easy to setup a single application with tardis, it can also be usedto debug multiple applications in the same page. Tardis exposes two additionalfunctions:setup andapplication. The firstone initialize the debugger, while the second one allows to setup an applicationon the debugger!

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

importgleam/intimportlustreimportlustre/element/htmlimportlustre/eventimporttardispubfnmain(){letassertOk(instance)=tardis.setup()letmain=tardis.application(instance,"main")letmod=tardis.application(instance,"module")lustre.application(init_1,update_1,view_1)|>tardis.wrap(with:main)|>lustre.start("#app",Nil)|>tardis.activate(with:main)lustre.application(init_2,update_2,view_2)|>tardis.wrap(with:mod)|>lustre.start("#mod",Nil)|>tardis.activate(with:mod)}

Style collision

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

About

Time traveller debugger, tailor-made for Lustre! Rewind your history, and see what you've done!

Topics

Resources

License

Stars

Watchers

Forks


[8]ページ先頭

©2009-2025 Movatter.jp