thetarnav / solid-devtools

Library of developer tools, reactivity debugger & Devtools Chrome extension for visualizing SolidJS reactivity graph
https://chrome.google.com/webstore/detail/solid-devtools/kmcfjchnmmaeeagadbhoofajiopoceel
MIT License
530 stars 21 forks source link

How to configure with SolidStart #305

Open nixigaj opened 2 months ago

nixigaj commented 2 months ago

The latest template that you get when using npm create solid to create a SolidStart projects seems to be using Vinxi as build tool, which uses Vite internally. The documentation for setting upp Solid Developer Tools on the server side explains how to set it up as a Vite plugin but the documentation for Vite plugins for Vinxi is nonexistent as of writing this issue. While i know that this is technically an issue on Vinxi's side I am wondering if there are any easy instructions for setting this up with the newest SolidStart template?

InSuperposition commented 2 months ago

Using these instructions, apply the devtools plugin to the vite key in defineConfig() in app.config.ts

import { defineConfig } from "@solidjs/start/config";
import devtools from 'solid-devtools/vite';

export default defineConfig({
 vite: {
  plugins: [
   devtools({
    /* features options - all disabled by default */
    autoname: true, // e.g. enable autoname
   }),
  ],
 }
});