Open jaredpalmer opened 4 years ago
Yup! We've prototyped a little and have a project planned to develop. But, would be interesting to hear what ideas the community has. I'm working on tweaking the observability hook to improve support for debug tools.
I'm thinking a sort of tree view for all the state would be cool, if a convention for "namespace" atoms forms! So for instance if people start using Module/Key
as "zones/contexts" as per this comment https://github.com/facebookexperimental/Recoil/issues/181#issuecomment-635003783, we'd be able to visualize state in a tree view where each /
is a branch and as if state were a complex object instead of a flat list of keys internally.
Another idea would be being able to "watch" specific atoms in a watchlist for debugging things related to specific parts of state.
re: entire tree
/
deep-diff
)btw the code in https://recoiljs.org/docs/guides/persistence#saving-state doesn't work. atomValues.get() doesn't return the value just metadata about persistence. it's hard to prototype without this working.
@jaredpalmer - were you looking at atomInfo
instead of atomValues
?
Hrm, here when trying something similar atomValues
seems to always be empty.
NOTE: this is not a desired implementation just what I used for quick feedback.
useTransactionObservation_UNSTABLE((update) => {
const { atomValues, modifiedAtoms } = update;
const tag = `State Change ${new Date().toISOString()}`;
console.group(tag);
console.log(update);
for (const key of modifiedAtoms) {
console.log(key, atomValues.get(key));
}
console.groupEnd();
});
What I'm really looking forward to is a visualization of the data-flow graph of atoms, selectors, and subscribing components, with the ability to see current values and annotations/history on what has changed and how it has propagated through the graph.
@smacpherson64 useTransactionObservation_UNSTABLE
is not a published API yet, the new API is under development and I hope to have it out soon. Some things to keep in mind is that the current implementation was done for persistence, not debugging. So, it only reports atoms values for atoms with special metadata marking them for persistence. (The atom has a persistence_UNSTABLE
property with a non-null type
property. #209) It also doesn't report selectors. Both issues will be addressed in the new API.
useTransactionObservation_UNSTABLE is not a published API yet, the new API is under development and I hope to have it out soon.
@drarmstr For sure! Just wanted to add to the conversation around atomValues
!
So, it only reports atoms values for atoms with special metadata marking them for persistence. (The atom has a persistence_UNSTABLE property with a non-null type property. It also doesn't report selectors. Both issues will be addressed in the new API.
Ahhh, makes sense! Recoil is powerful, excited to watch it evolve!
https://twitter.com/jaredpalmer/status/1266385084367732736?s=20 ๐ This looks rad @jaredpalmer!
My Recoil devtools wishlist would be:
Hi everyone! I'm working on this right now!
Both packages can be found in this Github repository, in which i'm creating devtools for recoil based on existing redux devtools and other projects. In future, more devtools and docs will be available!
I used an empty redux store to mirror the changes the from recoil to redux devtool extension by observing state changes in recoil.
Time traveling and probably most redux features does not work, but the redux devtool extension is integrated nicely into react native debugger so it's good enough for me.
If anyone is interested, here's a snippet:
import { useEffect } from "react";
import { useRecoilSnapshot } from "recoil";
import { createStore } from "redux";
/**
* Usage:
* const App = () => (
* <RecoilRoot>
* <RecoilDebugObserver />
* <AppEntryComponent />
* </RecoilRoot>
* );
*/
let RecoilDebugObserver = () => null;
const reduxDevtoolsExtension =
typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION__;
if (reduxDevtoolsExtension) {
const reducer = (state = {}, { type, payload }) => {
if (String(type).startsWith("[recoil]")) {
return { ...state, [payload.node.key]: payload.loadable };
} else {
return state;
}
};
const store = createStore(
reducer,
reduxDevtoolsExtension({
name: "recoil debug observer",
maxAge: 100,
})
);
RecoilDebugObserver = () => {
const snapshot = useRecoilSnapshot();
useEffect(() => {
for (const node of snapshot.getNodes_UNSTABLE({ isModified: true })) {
const loadable = snapshot.getLoadable(node);
const action = {
type: `[recoil] ${node.key}/${loadable.state}`,
payload: { node, loadable },
};
store.dispatch(action);
}
}, [snapshot]);
return null;
};
}
export { RecoilDebugObserver };
Hi just created this issue https://github.com/facebookexperimental/Recoil/issues/837 pressenting to the community some devtools I created for Recoil. Really similar to the redux devtools, so it should be easy to figure out how to use them for redux users too. A quick demo here: (see the issue for more context)
Using Next.js, what tool is available at this time? I've found https://github.com/open-source-labs/Recoilize, but it doesn't support Next.js yet.
@ulises-jeremias Are those tools mentioned in https://github.com/facebookexperimental/Recoil/issues/837 compatible with Next.js?
@Vadorequest yes, as you can use it as any extra components lib on your project ๐๐ปalso, the development is really active, so any feedback or review is welcome. Also, recoil-devtools ecosystem will have all the tools that Recoilize provides in few weeks
Thanks to @ulises-jeremias we've implemented Recoil Dev Tools with a Next.js project.
See PR at: https://github.com/Vadorequest/poc-nextjs-reaflow/pull/8 Demo: https://poc-nextjs-rea-git-fork-ulises-jeremias-main-ambroise-5619da.vercel.app/
It's the only solution I've found so far that works well with Next.js.
any update for chrome extension?
Hi @csantos42 ,
Any update on this? You mentioned you would be working on this in https://github.com/facebookexperimental/Recoil/issues/1233
I'm trying to decide whether to use this in a production project I'm about to kick off so any timescales etc would be great
Thanks
Hi @csantos42 , would be good if you could provide a roadmap for this? I'm sure a lot of people are interested in knowing
Hi guys, here you can check a package I created: https://recoil-gear.netlify.app/
It's a simple connector to redux devtools
looks interesting, will have a look thanks
disappointing that Facebook engineers can't be bothered to reply
@72gm This is open source, there are no obligations that anyone must do anything.
If you feel that something is missing, you could contribute by submitting a PR or creating a new package, just like what @creotip did with recoil-gear with some modifications on this.
The solution was present and you could already use it if you had searched a little harder. I guess maintainers and contributors would thank you if you could do some research and not vent your disappointment towards them, which just discourages people from contributing.
came to reaffirm the usefulness of a visual dataflow graph between atoms and selectors (as a first version I think this would be useful on its own, even without the subscribed components portion)
I see there is a devtools in the repo itself, what's that about?
Not sure what people have in mind or are working on, but figured it would be good to centralize discussion.