Can't use Using Declarations added in TypeScript 5.2 yet?

[okamototomoyuki]

I am using SvelteKit.

using test = { [Symbol.dispose]: () => { console.log("disposed") } };

I tried to test the using declarations introduced in TypeScript 5.2 as shown above.
Then the following error occurred:

Error: Parse failure: Unexpected token (10:8)
At file: /src/hooks.server.ts
Contents of line 10:   using test = { [Symbol.dispose]: () => {
    at ssrTransformScript (file:///D:/repository/PROJ/node_modules/vite/dist/node/chunks/dep-df561101.js:55343:15)
    at ssrTransform (file:///D:/repository/PROJ/node_modules/vite/dist/node/chunks/dep-df561101.js:55318:12)
    at Object.ssrTransform (file:///D:/repositoryPROJ/node_modules/vite/dist/node/chunks/dep-df561101.js:64992:20)
    at loadAndTransform (file:///D:/repository/PROJ/node_modules/vite/dist/node/chunks/dep-df561101.js:54989:24)
    at async instantiateModule (file:///D:/repository/PROJ/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)

Is it not yet supported? If it is supported, how can I configure it to be able to use it?

[pettinen]

Setting esbuild.target to es2022 (or lower, instead of the default esnext) in Vite config seems to work:

// vite.config.{js,ts}

export default {
    esbuild: {
        target: "es2022",
    },
    // ...
};

[okamototomoyuki]

Thank you for your response.
I'd like to try it, but my current project is locked to Node v18, so I can't update it😢.
I'll give it a shot if I get another opportunity.

[pettinen]

Looks like the symbols were backported to Node v18.18.0 as well.

For anyone wondering: this works because with target: "es2022" (or presumably any current target except esnext) esbuild will polyfill the using statements, and then Rollup is able to parse esbuild's transpiled output with Acorn. With esnext the statements are left as-is, since Explicit Resource Management is a stage 3 ECMAScript proposal.

[neko-para]

@pettinen Sorry for bothering, could you please take a look at this problem?
I've managed using a plugin to make using work in dev mode, with the cost of sourcemap breaking. When I debug the vite build and inspect into it, I've found that the inner transform process also targetting es2022, but if I remove my plugin the using statements remains.
My plugin is a simple esbuild transform and the config is just { target: 'es2022' }.

[pettinen]

@neko-para I'm not sure if I understood your situation correctly, but if it's something like
https://stackblitz.com/edit/vitejs-vite-lreq5d?file=src%2Fmain.ts,vite.config.js

• with your plugin, Vite runs esbuild with default options (target: "esnext") and the output of that is passed to the transform plugin, which is then responsible for running esbuild again with target lower than esnext
• without your plugin, Vite config needs { esbuild: { target: "es2022" } }, otherwise there's no step where the polyfill is applied

though it seems to me that dev mode works fine with the latter option as well.

[neko-para]

That's the case. But if I use the latter, await using abc = def raise a SyntaxError, while in your demo it works. After all, I've found out that I can emit the sourcemap output by esbuild, then almost everything is as expected. Still thanks for your help!
You can checkout sources here. Just pnpm install and pnpm run dev. The web page is under pkgs/web, and if I remove the plugin the page just won't work.

[aviallon]

This is still relevant!