feat: add vite-plugin-devtools-json addon

[jycouet]

Closes: #578

• feature: adding vite-plugin-devtools-json plugin to vite config
• tests (js & ts)
• doc

---

• [ ] fix: resolve-conditions-for-client #582 needs to be merged before, then tests will pass here.
• waiting for vitest regression fix

[changeset-bot]

🦋 Changeset detected

Latest commit: 24ce9b4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
sv	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[svelte-docs-bot]

Preview: https://svelte-dev-git-preview-cli-581-svelte.vercel.app/

[pkg-pr-new]

Open in StackBlitz

npx https://pkg.pr.new/sveltejs/cli/sv@581

npx https://pkg.pr.new/sveltejs/cli/svelte-migrate@581

commit: c371572

[jycouet]

Ho WoW, it's linked with sveltejs/svelte#11394 (comment)
It's vitest that is failing... and it's failing also in main branch! (and with the current released sv).

I will do a PR to fix this. (I will do a separate one, to track things better)

[manuel3108]

Thanks for your awesome PR. The only thing that I'm unsure about is the case for newly created projects.

Normally I would expect that a newly created project will not throw any errors in the console as this will be very strange for newcomers. On the other hand i don't necessarily want to add code that only helps users with specific browsers. Given that the problem also arises in chromium based browsers like MS Edge we are talking about ~70% market share. I would say that this is not enough to bother everyone with this new tool, so making it an adder sounds like the correct option. We only need to rise awareness about this add-on.

The other thing I'm concerned about is the add-on name vite-plugin-devtools-json feels clunky and is not telling what it's actually for. We could consider something like chromium-devtools but I'm sure people will have better ideas than myself.

Edit: As you said, don't bother about the vitest tests, that's a seperate issue

[jycouet]

70% market share. I would say that this is not enough to bother everyone

I'm curious, what's your threshold ? Seems pretty high already.
But yes, if you feel that it's more appropriate, we can remove it from create.
How should I do it, I add a flag in defineAddon like: skipCreate: boolean ? Or Something in setup ?

---

I'm concerned about is the add-on name vite-plugin-devtools-json

Yes, you are right, it's not that cool! Most of (or at least a lot of) vite plugins starts like this vite-plugin-* and that's a nice convention (pck json organisation for example!)

I like your suggestion chromium-devtools, but it's adding a new term "chromium" and removing one "json", so it would be a "svelte thing". If we plan to add more thing to chromium-devtools, yes, let's go for it. If we don't plan more things we could maybe just call it devtools-json (keeping the author vibe?)

Let me know, I'll update the PR 👍

[manuel3108]

I'm curious, what's your threshold ? Seems pretty high already.

I don't know, just a feeling. 30% of people might not have that problem. But on the other hand, for us devs, the percentage is potentially totally different.

How should I do it, I add a flag in defineAddon like: skipCreate: boolean ? Or Something in setup ?

I think it's fine as is. I was referring to Rich's suggestion to add the plugin directly without user prompt when creating a new project. That's the thing i was considering. That the add-on is visible in the addon selection after sv create is totally fine by me.

I like your suggestion chromium-devtools, but it's adding a new term "chromium" and removing one "json", so it would be a "svelte thing". If we plan to add more thing to chromium-devtools, yes, let's go for it. If we don't plan more things we could maybe just call it devtools-json (keeping the author vibe?)

Yeah, totally get your point. I had to refresh my memories because sveltejs/svelte#15910 was once called devtools, but since this is no longer the case we might be good to use devtools-json. But i still se an edge where this could be confusing.

Would love to get other opinions on this.

[jycouet]

I would like to raise another option that is turning in my head.

Why not having:

npx sv add vite-plugin devtools-json
# by default it's:
#   1/ adding devDep: "vite-plugin-devtools-json"
#   2/ importing the plugin in list of vite plugins (with default export camel case `devtoolsJson`)

This would allow any* vite plugin to be added!

I could see:

npx sv add vite-plugin kit-routes -n
# -n for named plugin `import { kitRoutes }...`

Feel free to discard the idea :)