Stable decorators

.github/workflows/ci-jobs.yml

@@ -89,6 +89,8 @@ jobs:
           - name: "Production build, with optional features"
             BUILD: "production"
             ENABLE_OPTIONAL_FEATURES: "true"
+          - name: "Stable decorators"
+            VITE_STABLE_DECORATORS: "true"
 
     steps:
       - uses: actions/checkout@v4
@@ -97,13 +99,18 @@ jobs:
         run: pnpm vite build --mode=${{ matrix.BUILD || 'development' }}
         env:
           NODE_ENV: ${{ matrix.BUILD || 'development' }}
+          ALL_DEPRECATIONS_ENABLED: ${{ matrix.ALL_DEPRECATIONS_ENABLED }}
+          OVERRIDE_DEPRECATION_VERSION: ${{ matrix.OVERRIDE_DEPRECATION_VERSION }}
+          ENABLE_OPTIONAL_FEATURES: ${{ matrix.ENABLE_OPTIONAL_FEATURES }}
+          RAISE_ON_DEPRECATION: ${{ matrix.RAISE_ON_DEPRECATION }}
+          VITE_STABLE_DECORATORS: ${{ matrix.VITE_STABLE_DECORATORS }}
       - name: test
         env:
           ALL_DEPRECATIONS_ENABLED: ${{ matrix.ALL_DEPRECATIONS_ENABLED }}
           OVERRIDE_DEPRECATION_VERSION: ${{ matrix.OVERRIDE_DEPRECATION_VERSION }}
           ENABLE_OPTIONAL_FEATURES: ${{ matrix.ENABLE_OPTIONAL_FEATURES }}
           RAISE_ON_DEPRECATION: ${{ matrix.RAISE_ON_DEPRECATION }}
-
+          VITE_STABLE_DECORATORS: ${{ matrix.VITE_STABLE_DECORATORS }}
         run: pnpm test
 
   browserstack-test:

babel.config.mjs

@@ -17,13 +17,17 @@ export default {
         allowDeclareFields: true,
       },
     ],
-    [
-      'module:decorator-transforms',
-      {
-        runEarly: true,
-        runtime: { import: 'decorator-transforms/runtime' },
-      },
-    ],
+    ...(process.env.VITE_STABLE_DECORATORS
+      ? [['@babel/plugin-proposal-decorators', { version: '2023-11' }]]
+      : [
+          [
+            'module:decorator-transforms',
+            {
+              runEarly: true,
+              runtime: { import: 'decorator-transforms/runtime' },
+            },
+          ],
+        ]),
     [
       'babel-plugin-ember-template-compilation',
       {

package.json

@@ -90,7 +90,8 @@
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.731.0",
-    "@babel/plugin-transform-typescript": "^7.22.9",
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@babel/plugin-transform-typescript": "^7.26.8",
     "@babel/preset-env": "^7.16.11",
     "@babel/types": "^7.22.5",
     "@embroider/macros": "^1.18.0",

packages/@ember/-internals/metal/index.ts

@@ -47,6 +47,7 @@ export {
   ComputedDescriptor,
   type ElementDescriptor,
   isElementDescriptor,
+  isDecoratorCall,
   nativeDescDecorator,
   descriptorForDecorator,
   descriptorForProperty,

packages/@ember/-internals/metal/lib/alias.ts

@@ -16,7 +16,7 @@ import type { ExtendedMethodDecorator } from './decorator';
 import {
   ComputedDescriptor,
   descriptorForDecorator,
-  isElementDescriptor,
+  isDecoratorCall,
   makeComputedDecorator,
 } from './decorator';
 import { defineProperty } from './properties';
@@ -28,7 +28,7 @@ export type AliasDecorator = ExtendedMethodDecorator & PropertyDecorator & Alias
 export default function alias(altKey: string): AliasDecorator {
   assert(
     'You attempted to use @alias as a decorator directly, but it requires a `altKey` parameter',
-    !isElementDescriptor(Array.prototype.slice.call(arguments))
+    !isDecoratorCall(Array.prototype.slice.call(arguments))
   );
 
   // SAFETY: We passed in the impl for this class

packages/@ember/-internals/metal/lib/cached.ts

@@ -3,6 +3,11 @@
 // of @cached, so any changes made to one should also be made to the other
 import { DEBUG } from '@glimmer/env';
 import { createCache, getValue } from '@glimmer/validator';
+import {
+  type Decorator,
+  identifyModernDecoratorArgs,
+  isModernDecoratorArgs,
+} from './decorator-util';
 
 /**
  * @decorator
@@ -84,7 +89,7 @@ import { createCache, getValue } from '@glimmer/validator';
   the subsequent cache invalidations of the `@cached` properties who were
   using this `trackedProp`.
 
-  Remember that setting tracked data should only be done during initialization, 
+  Remember that setting tracked data should only be done during initialization,
   or as the result of a user action. Setting tracked data during render
   (such as in a getter), is not supported.
 
@@ -94,6 +99,10 @@ import { createCache, getValue } from '@glimmer/validator';
   @public
  */
 export const cached: MethodDecorator = (...args: any[]) => {
+  if (isModernDecoratorArgs(args)) {
+    return cached2023(args) as any;
+  }
+
   const [target, key, descriptor] = args;
 
   // Error on `@cached()`, `@cached(...args)`, and `@cached propName = value;`
@@ -123,6 +132,23 @@ export const cached: MethodDecorator = (...args: any[]) => {
   };
 };
 
+function cached2023(args: Parameters<Decorator>) {
+  const dec = identifyModernDecoratorArgs(args);
+  switch (dec.kind) {
+    case 'getter': {
+      const caches = new WeakMap();
+      return function (this: any) {
+        if (!caches.has(this)) {
+          caches.set(this, createCache(dec.value.bind(this)));
+        }
+        return getValue(caches.get(this));
+      };
+    }
+    default:
+      throw new Error(`unsupported use of @cached on ${dec.kind} ${dec.context.name?.toString()}`);
+  }
+}
+
 function throwCachedExtraneousParens(): never {
   throw new Error(
     'You attempted to use @cached(), which is not necessary nor supported. Remove the parentheses and you will be good to go!'

packages/@ember/-internals/metal/lib/computed.ts

@@ -40,6 +40,7 @@ import {
   notifyPropertyChange,
   PROPERTY_DID_CHANGE,
 } from './property_events';
+import { isModernDecoratorArgs } from './decorator-util';
 
 export type ComputedPropertyGetterFunction = (this: any, key: string) => unknown;
 export type ComputedPropertySetterFunction = (
@@ -884,6 +885,14 @@ export function computed(callback: ComputedPropertyCallback): ComputedDecorator;
 export function computed(
   ...args: ElementDescriptor | string[] | ComputedDecoratorKeysAndConfig
 ): ComputedDecorator | DecoratorPropertyDescriptor | void {
+  if (isModernDecoratorArgs(args)) {
+    let decorator = makeComputedDecorator(
+      new ComputedProperty([]),
+      ComputedDecoratorImpl
+    ) as ComputedDecorator;
+    return decorator(...(args as [any, any]));
+  }
+
   assert(
     `@computed can only be used directly as a native decorator. If you're using tracked in classic classes, add parenthesis to call it like a function: computed()`,
     !(isElementDescriptor(args.slice(0, 3)) && args.length === 5 && (args[4] as unknown) === true)

packages/@ember/-internals/metal/lib/decorator-util.ts

@@ -0,0 +1,86 @@
+/*
+  Types and utilities for working with 2023-11 decorators -- the ones that are
+  currently (as of 2025-05-05) in Stage 3.
+
+  TypeScript provides built-in types for all the Context objects, but not a way
+  to do type discrimination against the `value` argument.
+*/
+
+export type ClassMethodDecorator = (
+  value: Function,
+  context: ClassMethodDecoratorContext
+) => Function | void;
+
+export type ClassGetterDecorator = (
+  value: Function,
+  context: ClassGetterDecoratorContext
+) => Function | void;
+
+export type ClassSetterDecorator = (
+  value: Function,
+  context: ClassSetterDecoratorContext
+) => Function | void;
+
+export type ClassFieldDecorator = (
+  value: undefined,
+  context: ClassFieldDecoratorContext
+) => (initialValue: unknown) => unknown | void;
+
+export type ClassDecorator = (value: Function, context: ClassDecoratorContext) => Function | void;
+
+export type ClassAutoAccessorDecorator = (
+  value: ClassAccessorDecoratorTarget<unknown, unknown>,
+  context: ClassAccessorDecoratorContext
+) => ClassAccessorDecoratorResult<unknown, unknown>;
+
+export type Decorator =
+  | ClassMethodDecorator
+  | ClassGetterDecorator
+  | ClassSetterDecorator
+  | ClassFieldDecorator
+  | ClassDecorator
+  | ClassAutoAccessorDecorator;
+
+export function isModernDecoratorArgs(args: unknown[]): args is Parameters<Decorator> {
+  return args.length === 2 && typeof args[1] === 'object' && args[1] != null && 'kind' in args[1];
+}
+
+// this is designed to turn the arguments into a discriminated union so you can
+// check the kind once and then have the right types for them.
+export function identifyModernDecoratorArgs(args: Parameters<Decorator>):
+  | {
+      kind: 'method';
+      value: Parameters<ClassMethodDecorator>[0];
+      context: Parameters<ClassMethodDecorator>[1];
+    }
+  | {
+      kind: 'getter';
+      value: Parameters<ClassGetterDecorator>[0];
+      context: Parameters<ClassGetterDecorator>[1];
+    }
+  | {
+      kind: 'setter';
+      value: Parameters<ClassSetterDecorator>[0];
+      context: Parameters<ClassSetterDecorator>[1];
+    }
+  | {
+      kind: 'field';
+      value: Parameters<ClassFieldDecorator>[0];
+      context: Parameters<ClassFieldDecorator>[1];
+    }
+  | {
+      kind: 'class';
+      value: Parameters<ClassDecorator>[0];
+      context: Parameters<ClassDecorator>[1];
+    }
+  | {
+      kind: 'accessor';
+      value: Parameters<ClassAutoAccessorDecorator>[0];
+      context: Parameters<ClassAutoAccessorDecorator>[1];
+    } {
+  return {
+    kind: args[1].kind,
+    value: args[0],
+    context: args[1],
+  } as ReturnType<typeof identifyModernDecoratorArgs>;
+}