DEV Community

Cover image for ECMAScript decorators with Vite
Kiran Mantha
Kiran Mantha

Posted on


ECMAScript decorators with Vite

I felt very happy when i saw the progress on bringing typescript decorators to vanillajs. I thought to give it a try in my vanillajs + vite application and bammmmm πŸ’₯ it broke 🀯 πŸ™‡β€β™‚οΈ.

ESbuild, which comes with OOB of vite, doesn't support decorators yet πŸ™„ 🀷

That only left me the option to go for babel but i don't want to get away from my love, vite πŸ₯Ί

Then i found the vite-plugin-babel package and made few changes to vite config. It worked wohooooo 🀩

Here's the config:

import { defineConfig } from 'vite';
import babel from 'vite-plugin-babel';

export default defineConfig({
  base: "./",
  plugins: [
      babelConfig: {
        babelrc: false,
        configFile: false,
        plugins: [
            { loose: true, version: "2022-03" },
  server: {
    host: true,
    port: 3001,
    open: "/",
Enter fullscreen mode Exit fullscreen mode

That's it. This resolved my issue and i happily went on using decorators in javascript.

FYI, decorator proposal is in stage3 and one step behind of getting finalized.

Thanks for the read,
Kiran πŸ‘‹ πŸ‘‹

Top comments (2)

naubit profile image
Al - Naubit

Great article, you got my follow, keep writing!

kiranmantha profile image
Kiran Mantha

Thanks alot @naubit . 😊


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!