2

Is there a way to access the instance / get a reference of the Component that it is currently rendered/active in SolidJS, an thus its current props, signals, internal state, effects etc.?

I am looking for something like React's __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner (but consumable also in production) or Svelte's runtime internal get_current_component(). To give a bit of context, the reason why I need it is because I am building a library that provides a function that should be able to access the props of the Component currently consuming this function.

I have tried to play around with SolidJS getOwner(), but I am not sure I understood it. I cannot find any reference to the Component's current props or signals or effects.

Is there any way to achieve it in Solid, or is there any 'hack' to achieve something similar?

Thx in advance

Aÿlo
  • 271
  • 3
  • 7

1 Answers1

3

Because of how Solid works and handles "components", those sorts of things are limited, unavailable, or available only in development. In production Solid throws out what it doesn't need to work.

The problem is that "component instances" don't exist in solid per se, unlike Svelte or React. It's just a graph of signals and reactions. What is a component? Just a function that returns some DOM elements, creates some signals and computations by adding them to the graph, and then well... it gets garbage collected and that's it. A component in production is no different than any other function (hook).

Of course, that graph is still analyzable to some extent. (a bit less in production) You can see all the computations (createEffect, createMemo, etc.) and signals they currently observe. Not much more than that. Maybe context too. Props as we understand it — a reactive object passed by the parent to child — is just an object with some getters passed to a function — it doesn't exist in the reactive graph as a separate entity. You can still get access to the signals within — but only if they are used in some effects — some node of the creative graph has a reference to it.

Kinda like this: https://playground.solidjs.com/?hash=597826062&version=1.4.1

So, if you are creating a library that is meant to be used in production — I would rather advise you to have the data you want to be provided explicitly with arguments/props rather than by walking the internals.

But if you are looking to make some visualizations of the reactive graph during development, you can see the source code of this debugger: https://github.com/thetarnav/solid-devtools/tree/main/packages/debugger

thetarnav
  • 788
  • 2
  • 8
  • Ok I see, thx! I was reading something about the debugger and the graph just before asking the question on StackOverflow, and I thought I understood that props were not really 'registered' anywhere, but I was hoping I got it wrong and I wanted to be sure. – Aÿlo Jun 19 '22 at 16:29
  • What would your library do? I believe props could be easily passed to a function and tracked this way, but this would require 1 component == 1 function call. – thetarnav Jun 19 '22 at 16:39
  • It would work with event callbacks passed to a component. Yes I will opt for passing the props directly to the function, that was an option I was considering. It's just annoying that it wouldn't be possible to destructure the props directly in the arguments (e.g. you cannot do `function Counter = ({ count }) => ....`) if you need them as a whole to pass them to the function. – Aÿlo Jun 19 '22 at 16:50