use solid-refresh and solid-devtools babel plugins together?

[tmm1]

i'm using @solid-devtools/overlay in a project along with solid-refresh

i noticed in the overlay the props/signals/memos are missing names, which can be solved by injecting solid-devtools/babel's namePlugin into the build pipeline. using this plugin also adds graphs of the reactive relationships between components.

https://github.com/thetarnav/solid-devtools/blob/a9c23a428d5639bf138ac2f5793fc57b8eef9136/packages/main/src/babel/babel.ts#L115-L116

however when I use both the devtools and refresh plugin together, the auto names disappear. are these plugins expected to be able to work together?

i tried putting the devtools namePlugin before and after the solid-refresh one.

[tmm1]

with solid-devtools only:

with solid-refresh:

[tmm1]

Looking at the generated code, this is probably a bug on the devtools side.

I see some components are annotated:

const SidebarMenuItem = _$$component(_REGISTRY, "SidebarMenuItem", function SidebarMenuItem(props: {
}) {
  const iconClass = createMemo(() => {
...
  }, undefined, {
    name: "iconClass"
  });

whereas others are not:

const SidebarMenu = _$$component(_REGISTRY, "SidebarMenu", function SidebarMenu(props: {
}) {
  const showedPinned = createMemo(() => {
...
  });

[tmm1]

Okay confirmed this is a solid-devtools bug. The workaround is:

-export function SidebarMenu(
+export { SidebarMenu };
+function SidebarMenu(

[tmm1]

actually, solid-devtools works as-is with both types of components.. the issue is some kind of interaction with solid-refresh

if i put the devtools babel plugin first, nothing in the output is annotated.

if i put the devtools plugin after solid-refresh, then i get partial annotation which makes sense since devtools isn't setup for the refresh AST?

the correct configuration would seem to be devtools first so everything is annotated, then solid-refresh should be able to understand and maintain those annotations? currently it seems to remove them all?

[tmm1]

well i tried a clean build with devtools plugin first and solid-refresh second and everything seems to be working fine.

EDIT: scratch that, still had my workaround in place

[tmm1]

as far as I can tell, somehow when bubbleFunctionDeclaration moves a export function Component, somehow the non-exported node it adds back in is a copy from earlier in the babel pipeline.

[tmm1]

theory from o1:

halluciation

Root cause explanation

From the code and transcript, here is what is actually going on:

1. You have an exported function component, for example:

   export function SidebarMenu() {
     const [sidebarWidth, setSidebarWidth] = createSignal<number>(0, {
       name: "sidebarWidth"
     });
     …
   }

2. The “solid-devtools” plugin injects or preserves the second argument object (the metadata) in the call to createSignal (e.g. “{ name: "sidebarWidth" }”).

3. However, when “solid-refresh” wraps the function (inside transformFunctionDeclaration + wrapComponent), Babel re-creates or re-serializes the function’s AST. The key detail is that the “<number>” type parameter (a TSCallType parameter) often ends up ignored or stripped at some point (for example, if a piece of the plugin logic tries to reinterpret the call node without preserving its type parameters). As a result:

   • The AST’s call arguments effectively shift.
   • Babel ends up treating the object literal (“{ name: "sidebarWidth" }”) as if it was never there, or fabricates a single argument call (just “(0)”).

Hence the second argument with your metadata object goes missing in the final output. The simplest way to think about it is: the plugin does not fully preserve TS type parameters on function calls like createSignal, and in dropping or ignoring type information, the second argument array element winds up lost.

In other words, the bug is not in moving or re‑defining the function as a variable. It’s that the type parameter () is confusing (or being stripped by) the refresh code’s AST transforms, which causes the entire extra argument—your annotation object—to get lost when the final output is generated.

[lxsmnsyc]

btw how are you setting up the plugins