fix: pre-optimize clsx

[GauBen]

Small fix to address these small log lines:

  VITE v6.0.7  ready in 1533 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
11:33:51 PM [vite] (client) ✨ new dependencies optimized: clsx
11:33:51 PM [vite] (client) ✨ optimized dependencies changed. reloading

[bluwy]

Do you have an example where this could happen? Svelte recently support using clsx internally, but it's part of its runtime and should already be optimized together.

[GauBen]

Yep! Not really a minimal repro, but running

git clone https://github.com/GauBen/gautier.dev
cd gautier.dev
yarn
yarn dev

Should display the following:

❯ yarn dev
Forced re-optimization of dependencies

  VITE v6.0.7  ready in 795 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
{
  message: 'Bad credentials',
  documentation_url: 'https://docs.github.com/graphql',
  status: '401'
}
9:42:46 AM [vite] (client) ✨ new dependencies optimized: clsx
9:42:46 AM [vite] (client) ✨ optimized dependencies changed. reloading
{
  message: 'Bad credentials',
  documentation_url: 'https://docs.github.com/graphql',
  status: '401'
}

[dominikg]

only seems to happen with vite6

https://www.sveltelab.dev/r13rocirxc06ybv

[dominikg]

https://svelte.dev/playground/hello-world?version=5.19.3#H4sIAAAAAAAAA22OywrCMBBFfyXOJgrF0m2MBXf-Q9NF2k5pISYhGV-E_LtEETduD-dwbwKrLwgCzmiMY3cXzMS2OK2E0w4qmFeDEUSXgJ6-eAVA9a1O3u_jDQ0VNuiI__joLKGlCAJkHMPqqVVWkUFiRWdHxt-7_KCsrH-GlUvDRqNjPKaOz87xig868D63n7ep5Hkj66VplYUKCB8EgsIVc59fpACa9tsAAAA=

import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';

var root = $.template(`<h1></h1>`);

export default function App($$anchor) {
	let name = 'world';
	var h1 = root();

	$.set_class(h1, $.clsx(['foo', 'bar']));
	h1.textContent = `Hello ${name ?? ''}!`;
	$.append($$anchor, h1);
}

svelte generates code that imports clsx, ultimately it is imported here:
https://github.com/sveltejs/svelte/blob/357e1a74b4af25c3e3839d303cc3d8d239d43087/packages/svelte/src/internal/shared/attributes.js#L2

i wonder how vite5 is able to detect this eagerly.

clsx was only added in a later version of svelte5, so to avoid issues with earlier versions, the inject would have to check if clsx is a dependency of svelte. But ideally we find out why vite6 behaves differently (or if the same can happen in vite5 and it was just my testing that was off).