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:

https://github.com/sveltejs/vite-plugin-svelte/blob/80aebfd7ac6e03a8429611b06969dd55afdd1d38/packages/vite-plugin-svelte/src/preprocess.js#L37-L47

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.

[dominikg]

with the upcoming support of rolldown-vite in vite-plugin-svelte you can use transformWithOxc via vitePreprocess that takes the values from your tsconfig.json so you should be able to set target lower.

However, upon transforming App.svelte, oxc complains that the object is not disposable, see here:

https://stackblitz.com/edit/vitejs-vite-jzihpdek?file=src%2Ftsconfig.json,src%2Fmain.js,src%2Fclock.svelte.js (open console to see the error message)

This could be because svelte compiler neuters Symbol.dispose from the returned class or something else.

[dominikg]

there is an upcoming PR in svelte that also enables using in svelte script, however it might not work as you expect.

see this PR where the clock isn't bound to the lifecycle of the component instance

https://svelte.dev/playground/c9b422d059dd4ef2ae2bb0083ac0b293?version=pr-16190#H4sIAAAAAAAAA41STY-bMBD9K1NayUaKIL0mkKpqLz23t2VVERgSd42N8JDsCvm_1waWELatekHz-ea9h_tA5TUGu6AzQp2gkLp4CjZBJSSaYPfQB_TS-LYvuPo0_LlpInNBSb52zA3-qV5oRajIwQSJKVrR0CFTGYm60S3BF38JqlbXwKJ4yKZVtvdjEgnMWV_HuRQ-GMoJObUdhm4giWfI5NgRaQVaFVIUT2nPw_TQz7vpuzm0dlGHT8DOokQGO2C-yuwoP4lHQAfdvxfVjYX1vJIhjH0zFpXNyCklfKZg56nZzV8cWwq892zV-bdr_Uhk9q1YLEe_DPOjiz_pfFN4Hb3m4eyrQ0NvaYmtuGDJRxSlr9EJ6Ydr8nDtcSkuh97v2ST28f-pXtG7F_62udCOz4PeQubGTG-lzxSAI3l7DJ4kgHBL7SWXQ-IgjKNUkG75OOsN-DpMb6BrShf9fN1w3Y_b7Tb00Bll5Je1xEjqE2fuxEDAnWahhwagszDRhKqv-0VxgWiQvk0Z5yGkB-hhhF8dIOGR96-9JfhMeeraN9RH6dZ_Hr6_1Ecto1KYRht85OFolXOmAu7_i67WLNMUmOrqI7ZsVr-iN8HdHJhmJObtLPAOdubkCGfK3j-RR5flQl6FKoNdlUuD9jdHOzjqfAQAAA==

https://github.com/sveltejs/svelte/pull/16190

[dominikg]

i'm going to close the issue here as the example provided makes an assumption on how using works inside svelte components that isn't even specced and vite-plugin-svelte can't do anything about that, regardless of downleveling using or not.

[dominikg]

please contribute in the svelte repo on how you want to use using in svelte components