|
1 |
| -# vite-plugin-typescript-transform |
| 1 | +vite-plugin-typescript-transform |
| 2 | +--- |
| 3 | + |
| 4 | +[![ci][badge-workflow-ci]][badge-workflow-ci-link] |
| 5 | +[![npm][badge-npm]][badge-npm-link] |
| 6 | +[![license][badge-license]][badge-license-link] |
| 7 | + |
| 8 | +[badge-license]: https://img.shields.io/github/license/herberttn/vite-plugin-typescript-transform?style=flat-square |
| 9 | +[badge-license-link]: ./LICENSE.md |
| 10 | +[badge-npm]: https://img.shields.io/npm/v/@herberttn/vite-plugin-typescript-transform?logo=npm&style=flat-square |
| 11 | +[badge-npm-link]: https://www.npmjs.com/package/@herberttn/vite-plugin-typescript-transform |
| 12 | +[badge-workflow-ci]: https://img.shields.io/github/actions/workflow/status/herberttn/vite-plugin-typescript-transform/ci.yml?branch=main&label=ci&logo=github&style=flat-square |
| 13 | +[badge-workflow-ci-link]: https://github.com/herberttn/vite-plugin-typescript-transform/actions/workflows/ci.yml |
| 14 | + |
2 | 15 | Applies the typescript compiler during vite transform build phase.
|
| 16 | + |
| 17 | +[link-to-ecmascript-decorators]: https://tc39.es/proposal-decorators |
| 18 | +[link-to-esbuild]: https://www.npmjs.com/package/esbuild |
| 19 | +[link-to-nodejs]: https://nodejs.org |
| 20 | +[link-to-typescript-v5-announcement]: https://devblogs.microsoft.com/typescript/announcing-typescript-5-0 |
| 21 | +[link-to-typescript]: https://www.npmjs.com/package/typescript |
| 22 | +[link-to-vite]: https://www.npmjs.com/package/vite |
| 23 | +[link-to-options]: ./src/types.ts#L4 |
| 24 | + |
| 25 | +### Install |
| 26 | +```shell |
| 27 | +npm install --save-dev vite-plugin-typescript-transform |
| 28 | +``` |
| 29 | + |
| 30 | +### Options |
| 31 | +See the [`Options`][link-to-options] interface. |
| 32 | + |
| 33 | +### Transform ECMAScript decorators |
| 34 | +As of now, [`vite`][link-to-vite] uses [`esbuild`][link-to-esbuild] to transpile typescript, which doesn't yet support the new [ECMAScript decorators][link-to-ecmascript-decorators]. |
| 35 | +But [`typescript`][link-to-typescript] added support for them in [`v5`][link-to-typescript-v5-announcement]. |
| 36 | + |
| 37 | +This example transpiles the new ECMAScript decorators into code that is usable in runtimes that do not yet support it. |
| 38 | +```typescript |
| 39 | +import { vitePluginTypescriptTransform } from 'vite-plugin-typescript-transform'; |
| 40 | +import { defineConfig } from 'vitest/config'; |
| 41 | + |
| 42 | +export default defineConfig({ |
| 43 | + // ...your vite configuration |
| 44 | + plugins: [ |
| 45 | + vitePluginTypescriptTransform({ |
| 46 | + enfore: 'pre', |
| 47 | + filter: { |
| 48 | + files: { |
| 49 | + include: /\.ts$/, |
| 50 | + }, |
| 51 | + }, |
| 52 | + tsconfig: { |
| 53 | + override: { |
| 54 | + target: 'ES2021', |
| 55 | + }, |
| 56 | + }, |
| 57 | + }), |
| 58 | + ], |
| 59 | +}); |
| 60 | +``` |
0 commit comments