How to set up for AstroJS

[sparklingkaluza]

Could you add some instructions on how to enable for Astro Apps with SolidJS integration? I have no idea where to add those import statements, nor the Vite config. Adding that import statement to my Astro SolidJS component throws "ReferenceError: window is not defined". Thanks!!

[thetarnav]

I still have to write a proper Astro integration plugin. The devtools should support island architecture, but only to the extent of automatically tracking new roots. So render calls as well. But the problem is, as you've noticed, how you run the debugger script on the client. You cannot just import it in the astro's frontmatter, as it'll run only on the server. But importing it in any of the components—or better, in a <script> tag—should be fine. But if you are getting a window is not defined error, then I assume that Astro is grabbing a client version of the debugger script, instead of the server version, which should be just a noop without accessing any dom APIs. I guess you should be able to do something like this:

if (typeof window !== "undefined") {
  import("solid-devtools")
}

[brandonpittman]

All you can do for Astro is mark the component with client:only="solid-js".

[samuelhulla]

Hey, bumping this a little, was there any progress made here? I understand it's difficult to adapt it to island architecture over standard solid SPA / solid-start which are native to solid.

I've tried adding dev-tools to my astro project with the following setup:

// astro.config.mjs
import { defineConfig } from 'astro/config'
import solid from '@astrojs/solid-js'
import solidDev from 'solid-devtools/vite'
import solidVite from 'vite-plugin-solid'

export defaut defineConfig({
  integrations: [solid()],
  vite: {
    plugins: [solidDev(), solidVite()]
  }
})

This is the most barebones setup that should seemingly be sufficient for running dev-tools. Then in the island component

// MenuMobile.tsx
import 'solid-devtools'
import { createSignal } from 'solid-js'

const MobileMenu = () => {
 const [open, setOpen] = createSignal(false)
 const toggle = (e: MouseEvent) => {
    setOpen((prev) => !prev)
 }
 return (
   <div onClick={toggle}>{open().toString()}</div>
 )
}

This seems to work correctly for the chrome extension when opening my site

However, opening my developer console, I'm not able to see the Solid panel

I've followed the installation steps outlined here

Any idea how to go about setting this up?