Decorators Implementation Updates

Refresher: What is a decorator?

Decorators are functions which have four main capabilities when applied to a class or class element: Replacement, Initialization, Metadata, and Access

Common Use Cases

Validation libraries, dynamic type systems
ORMs, declarative data structures and models
Reactivity libraries
Method binding
Debugging tools
Dependency injection

Refresher: Why classes, and why at all?

// Decorator pattern without syntax

// Option 1
class C {
  // - New memoized function created
  //   for every instance, overhead
  memoizedMethod = memoize(() => {
    // ...
  });
}

// Option 2
class C {
  memoizedMethod() {}
  
  static {
    // - Imperative
    // - Can be conditional, more complex
    // - Can't be typed easily
    // - Difficult to understand
    C.prototype.memoizedMethod = 
      memoize(C.prototype.memoizedMethod);
  }
}

// Decorator pattern without syntax
 
function memoize(fn) {
  return (...args) => {
    // ...impl
  }
}

// + Concise, declarative, easy 
//   to understand
// + Performant, only one 
//   decorated function exists
const memoizedFunc = memoize(() => {
  // ...impl
});

Community interest remains high

Number 2 most exciting feature in State of JS 2024 Survey

Current Implementation Status

Transforms have been shipped in TypeScript and Babel, and have been widely adopted by the community
Tests have been written for Test262 (not yet merged due to time constraints for the champion, but comprehensive: PR)
Edge is nearing completion in V8
SpiderMonkey is around 75% complete
Additional proposals which build on Decorators are currently in a holding pattern until it is complete:
- Parameter decorators
- Function decorators
- Grouped and auto accessors

Implementer feedback

Several implementers have expressed some hesitation in being the first to ship decorators.
We'd like to take some time to discuss those concerns in plenary.