Comments (7)
Widdershin
commented on June 14, 2024
1
I really like this idea @staltz, and it would nicely address issue #14.
It would be quite nice to keep the ability to log out internal application state to the time travel bar, but there are ways that can be done. I might even extract a package just for doing that (the stream visualization aspect), and then include it in this package.
An option I was toying with after reading this issue this morning is making this change by asking users to replace Cycle.run with CycleTimeTravel.run or something along those lines. In combination with the driver support, that would allow us to recycle the app when a user changes data in the past.
from cycle-time-travel.
TylorS
commented on June 14, 2024
I like the idea of the driver holding the responsibility. Not all drivers are the same, so the driver itself would choose how to display their state. The driver would be able to provide further options that could display input and/or output or anything else that could be useful.
Using @staltz example
var timeTraveler = renderTimeTravelingDebuggerAt('#container');
// further configuration
makeDOMDriver('#app', {timeTravel: timeTraveler, input: true, output: false});
// pretend that object isn't anymore for custom elementsI'm very interested in seeing how this plays out.
from cycle-time-travel.
HighOnDrive
commented on June 14, 2024
It would also be useful to use time-travel in an end app for reporting at different verbosity levels and for undo/redo management. Firebase timestamps all edits and this could also be done for edits on changes to models outside the Firebase cache. Then when rolling back to a action it's timestamp can be used to index changes made to any model and roll back the model as well.
from cycle-time-travel.
staltz
commented on June 14, 2024
👍 for CycleTimeTravel.run ! Hadn't thought about that
from cycle-time-travel.
Widdershin
commented on June 14, 2024
Thinking more about how to go from here to there.
My goal for the new API will be that by default, the only thing a user has to change is the run function they call.
By tapping in to run, I should be able to achieve all of the aims of cycle-time-travel without requiring anywhere near as much change to app code.
This is my thinking right now. I'm willing to bet that not all of this is possible as I imagine it, but here's what I'll try.
- Create an instance of the existing timeTravelBar
- Provide time control for each driver's responses, tapping in to the to be written driver time travel interface
- Re-run the application every time driver events are inserted into the past (or when needed)
- Somehow inject a log function into the main method to display streams in development
- Combine the vtree$ of the timeTravelBar with that of the app's DOM
from cycle-time-travel.
staltz
commented on June 14, 2024
Combine the vtree$ of the timeTravelBar with that of the app's DOM
You don't actually need to do this part, you can render the time travel vtree$ in a newly created div e.g. document.createElement().
And since we're talking about this, how about investigating how to render that in a dev tools tab, and not in <body>?
from cycle-time-travel.
Widdershin
commented on June 14, 2024
Progress update: https://gfycat.com/NextThirstyGermanspaniel
https://github.com/cyclejs/cycle-time-travel/pull/24/files #24
cyclejs/dom@master...Widdershin:time-travel-support
So now all you have to do to use cycle-time-travel is replace Cycle.run with TimeTravel.run. I've added a method to the dom driver, enableTimeTravel(time$). I doubt that's the final api we'll use, I'm still just hacking stuff together.
It figures out the streams to display by walking the observable tree. It's currently just using the old record/filter approach for time travel, which totally doesn't work for stubbing out responses.
The time travelling doesn't work right now. As you can see in the above .gif, it will replay old user intent when you rewind, which causes it to act like it's traveling forward in time.
The next step as far as I can see is to restart the Cycle app every time the user rewinds. I can just call Cycle.run again but that clears the user's intent. I think I need to record the user's intent, and then pass it into the driver along with enableTimeTravel (probably using a HistoricalScheduler). If there's an easier way to do that, I would love to hear it.
from cycle-time-travel.
Related Issues (20)
- Suggestion to make API simpler HOT 2
- Allow scoping the time travel vtree$ or something else HOT 2
- Move to cyclejs org? HOT 2
- Add a sidebar to filter displayed streams
- Fix inserting events into the past
- Fix streams only showing up after first event (should be visible from start)
- Remove style that takes margin off body
- If you travel back to before the first state, the last state is shown instead
- Set up Travis CI HOT 1
- Investigate visualizing observable state tree
- Add tests using marble pattern
- Add a show/hide toggle
- Looks like browserify is an implicit dependency HOT 3
- Update cycle dependencies HOT 1
- Consider a browser extension instead of UI timeTravelBar$ HOT 1
- Support Cycle.js Diversity HOT 5
- Get an example online
- Add export to unit test
- Update to Cycle DOM 5.1 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cycle-time-travel.