Show signals created outside of reactive context

[smaranjit]

project created with npx degit solidjs/templates/js my-app

Here is the code for App.jsx

import { createSignal } from 'solid-js';

const [input, setInput] = createSignal(1);

function App() {
  return (
    <div>
      Current Value {input()}
      <button onClick={(event)=>setInput(input()+1)}>Increment</button>
    </div>
  );
}

export default App;

and configuration for vite.config.js

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite'

export default defineConfig({
  plugins: [
    devtools({
      autoname: true,
    }),
    solidPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
});

installed package details-

  "devDependencies": {
    "solid-devtools": "^0.24.7",
    "vite": "^4.1.1",
    "vite-plugin-solid": "^2.5.0"
  },
  "dependencies": {
    "solid-js": "^1.6.10"
  }

screenshot of the dev tool

[thetarnav]

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 refs 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:

1. create them inside the component tree and share them with the Context API
2. 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.

[smaranjit]

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.

[thetarnav]

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.