The using keyword cannot be used within .svelte files

[kran6a]

Describe the bug

The using keyword seems to be unsupported within .svelte files.

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-jnn3rq

Reproduction

No response

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 3600XT 6-Core Processor            
    Memory: 16.13 GB / 63.93 GB
  Binaries:
    Node: 22.5.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.21 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/adapter-static: ^3.0.2 => 3.0.2
    @sveltejs/kit: ^2.5.18 => 2.5.18
    @sveltejs/vite-plugin-svelte: ^3.1.1 => 3.1.1
    svelte: 5.0.0-next.201 => 5.0.0-next.201
    vite: ^5.3.5 => 5.3.5

[bluwy]

Typically in Vite if you want to use very new syntax like this, you need to configure this Vite config:

  esbuild: {
    // either this
    target: 'es2023',
    // or this config also works
    supported: {
      using: false
    }
  }

However our preprocessor runs its own setup so that config doesn't influence how it runs in Svelte files:

vite-plugin-svelte/packages/vite-plugin-svelte/src/preprocess.js

Lines 37 to 47 in 80aebfd

	const { code, map } = await transformWithEsbuild(content, filename, {
	loader: /** @type {import('vite').ESBuildOptions['loader']} */ (lang),
	target: 'esnext',
	tsconfigRaw: {
	compilerOptions: {
	// svelte typescript needs this flag to work with type imports
	importsNotUsedAsValues: 'preserve',
	preserveValueImports: true
	}
	}
	});

The target: 'esnext' prevents any down-transpilation (in this case using) so it errors in parsing by Svelte next. Seems like the script preprocessor may also need to be influenced by the resolved Vite config like the style preprocessor to support this ootb 🤔

[dominikg]

in the interim, you might be able to use svelte-preprocess instead, that uses typescript under the hood.

[dominikg]

The reasoning for using target esnext was that the resulting js output is going through vite anyways, so any downleveling would happen there. But obviously this only covers js features, not ts

[kran6a]

supported: {
      using: false
    }

Tried forking vite-plugin-svelte and using these configs but neither of them work.
The using keyword gets transpiled but then the $props() call end up inside a try block causing $props() can only be used at the top level of components as a variable declaration initializer.

[dominikg]

your reproduction does not contain use of $props and you did not share your fork, so we can't tell whats going on.