Open smaranjit opened 1 year ago
Currently, values of signals are displayed if the signal has been created inside the inspected owner. So this case if you declare the signal inside the App component - it will be visible there. Just like vue devtools will only show you the state of ref
s created in the component, or React devtools useState used inside that component.
I know that signals in solid don't have a reactive owner that they are bound to. They can be created anywhere and used anywhere. They are just like arrays, maps, or any built-in js data structure.
But it also makes it tricky for me to decide where to display such owner-less signals. Or to even track them at all. Because if I track them, I'm also preventing them from being garbage-collected, I'm holding a reference to something that may be not used any more - but there is no way for me to know that.
So there have to be some heuristics on when and which signals are being tracked by the debugger. Currently, the only one is - the signal has to be created inside an owner, and if it is - I will rely on the owner lifecycle. That means if you want to have global storage of signals shared across your entire app you have two options:
create signals inside createRoot
call and return them, to be exported and shared wherever you want
might look like this:
const { input, setInput } = createRoot(() => {
const [input, setInput] = createSignal(1);
return { input, setInput }
})
If you have ideas for how else signals like this could be tracked and displayed, I'm interested to hear them. Oh and thanks for the issue, even though this is not something that I intend to "fix" now, it is something that is worth experimenting with to give other ways to users to inspect signals like these.
Hi, @thetarnav If I move the signal creation code inside the App
component it still is not showing the signal's value for the App
component. like for the code shown below -
import { createSignal } from 'solid-js';
function App() {
const [input, setInput] = createSignal(1);
return (
<div>
Current Value {input()}
<button onClick={(event)=>setInput(input()+1)}>Increment</button>
</div>
);
}
export default App;
If we declare the signal inside the component then we could show the signal value for that particular component by clicking on that component. also for the global signal, expecting to see the signal value on those components which are using that global signal value, and we can identify those signals by showing some labels (like global
)beside the signal name. also if technically possible components names which are using setter method for the particular global signal. Or in dev tools, we can show a menu for global signals and on that menu, we can show all the signal details about components which are using that signal and information about components which are using the signal setter method.
Coming from React and I am very new to solidjs end exploring it. please correct me if I am wrong anywhere, thanks.
Well if the signal doesn't show up if you create it in the component — that's a possible bug. I will look into it after I finish adding the dependency graph. And thanks for the suggestion, it is... interesting. It's not as easy to know which signals are being used inside the component. You might open the "Owners" tab to see what I mean. But I like the idea, it might lead me to something.
project created with
npx degit solidjs/templates/js my-app
Here is the code for
App.jsx
and configuration for
vite.config.js
installed package details-
screenshot of the dev tool