web component support via solid-element

[stevenalanstark]

Hello,

I am excited to try this out with solidjs web components using:

https://www.npmjs.com/package/solid-element

I was able to see that solidJS is being detected ( and development mode as well ), however I quickly discovered a couple blockers from the solidjs devtools from being detected:

1) web components do hot have a central app. This is one of the fundamental differences when using solid-element.

2) web components promote multiple entry points, not just one. I have setup the imports in each individual entry point, so I do expect this to work, but if the debugger expects a single entry point, it will not work.

Are there plans for this debugger to support solid-element?

[thetarnav]

I don't plan on adding any additional support for solid-element myself, but it should work to some degree out of the box with any solid application, no matter if it has many or a single entry point. i guess that components created with solid element won't be visible as components, but all the reactivity should still be visible. What exactly is the issue?

[stevenalanstark]

thank you for such a quick response.

Ideally, the issue is caused by a misconfiguration on my end, but part of my investigation here is questioning if web components are supported, so this is still at the early "theory crafting" stages. Specifically, the plugin is alerting me that the 3rd step, Solid Devtools setup not detected, and won't connect. The page has multiple web components, each with their own entry point, and each entry point having import 'solid-devtools' at the top, followed by a series of exports. This is ESM, built with vite, using the plugin, and built in library mode.

I agree with you, I expect it has to do with the lack of an "app" when using solid-element, which means anything relying on a single element which solid is attached to ( ex: document.getElementById("app") ) would also not work. Could this be part of the issue?

[thetarnav]

Is there some repo I could check and see for myself?

[stevenalanstark]

not yet, I'll need to prepare one.

[stevenalanstark]

I did another test where I import the solid-devtools in the component class, and not its entry point class.

This did the trick.

I expect that most setups would not have this separation by default, but with web components it's handy to 'group' your components into their own entry points to help with vite bundling. In the downstream projects, they can have the one script tag to import a group of web components via their entry point.

I'll open a new issue if I come across any specific issues with web components, but right now I was successful in testing just a single component.

thanks