tracked tests passing

Author: ef4

babel.config.mjs

@@ -17,14 +17,17 @@ export default {
         allowDeclareFields: true,
       },
     ],
-    ['@babel/plugin-proposal-decorators', { version: '2023-11' }],
-    // [
-    //   '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',
       {

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,11 @@ export function computed(callback: ComputedPropertyCallback): ComputedDecorator;
 export function computed(
   ...args: ElementDescriptor | string[] | ComputedDecoratorKeysAndConfig
 ): ComputedDecorator | DecoratorPropertyDescriptor | void {
+  if (isModernDecoratorArgs(args)) {
+    console.log(`ignoring computed on ${args[1].kind} ${args[1].name?.toString()}`);
+    return;
+  }
+
   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.ts

@@ -2,6 +2,11 @@ import type { Meta } from '@ember/-internals/meta';
 import { meta as metaFor, peekMeta } from '@ember/-internals/meta';
 import { assert } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
+import {
+  type Decorator,
+  identifyModernDecoratorArgs,
+  isModernDecoratorArgs,
+} from './decorator-util';
 
 export type DecoratorPropertyDescriptor = (PropertyDescriptor & { initializer?: any }) | undefined;
 
@@ -113,13 +118,23 @@ export function makeComputedDecorator(
   desc: ComputedDescriptor,
   DecoratorClass: { prototype: object }
 ): ExtendedMethodDecorator {
-  let decorator = function COMPUTED_DECORATOR(
-    target: object,
-    key: string,
-    propertyDesc?: DecoratorPropertyDescriptor,
-    maybeMeta?: Meta,
-    isClassicDecorator?: boolean
-  ): DecoratorPropertyDescriptor {
+  let decorator = function COMPUTED_DECORATOR(...args: unknown[]): DecoratorPropertyDescriptor {
+    if (isModernDecoratorArgs(args)) {
+      return computedDecorator2023(
+        args,
+        desc,
+        DecoratorClass
+      ) as unknown as DecoratorPropertyDescriptor;
+    }
+
+    let [target, key, propertyDesc, maybeMeta, isClassicDecorator] = args as [
+      object,
+      string,
+      DecoratorPropertyDescriptor | undefined,
+      Meta | undefined,
+      boolean | undefined
+    ];
+
     assert(
       `Only one computed property decorator can be applied to a class field or accessor, but '${key}' was decorated twice. You may have added the decorator to both a getter and setter, which is unnecessary.`,
       isClassicDecorator ||
@@ -148,6 +163,16 @@ export function makeComputedDecorator(
   return decorator;
 }
 
+function computedDecorator2023(
+  args: Paramters<Decorator>,
+  desc: ComputedDescriptor,
+  DecoratorClass: { prototype: object }
+) {
+  let dec = identifyModernDecoratorArgs(args);
+  console.log(`ignoring modern decorator on ${dec.kind} ${dec.context.name?.toString()}`);
+  return;
+}
+
 /////////////
 
 const DECORATOR_DESCRIPTOR_MAP: WeakMap<ExtendedMethodDecorator, ComputedDescriptor | true> =

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

@@ -8,6 +8,7 @@ import { CHAIN_PASS_THROUGH } from './chain-tags';
 import type { ExtendedMethodDecorator, DecoratorPropertyDescriptor } from './decorator';
 import { COMPUTED_SETTERS, isElementDescriptor, setClassicDecorator } from './decorator';
 import { SELF_TAG } from './tags';
+import { Decorator, identifyModernDecoratorArgs, isModernDecoratorArgs } from './decorator-util';
 
 /**
   @decorator
@@ -82,6 +83,11 @@ export function tracked(
   desc: DecoratorPropertyDescriptor
 ): DecoratorPropertyDescriptor;
 export function tracked(...args: any[]): ExtendedMethodDecorator | DecoratorPropertyDescriptor {
+  if (isModernDecoratorArgs(args)) {
+    // TODO: cast is a lie, keeping the public types unchanged for now
+    return tracked2023(args) as unknown as DecoratorPropertyDescriptor;
+  }
+
   assert(
     `@tracked 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: tracked()`,
     !(isElementDescriptor(args.slice(0, 3)) && args.length === 5 && args[4] === true)
@@ -200,3 +206,25 @@ export class TrackedDescriptor {
     this._set.call(obj, value);
   }
 }
+
+function tracked2023(args: Parameters<Decorator>) {
+  const dec = identifyModernDecoratorArgs(args);
+  switch (dec.kind) {
+    case 'field':
+      dec.context.addInitializer(function (this: any) {
+        let initial = this[dec.context.name];
+        Object.defineProperty(
+          this,
+          dec.context.name,
+          descriptorForField([
+            this,
+            dec.context.name as string,
+            { initializer: () => initial },
+          ]) as any
+        );
+      });
+      return;
+    default:
+      throw new Error(`unimplemented: tracked on ${dec.kind} ${dec.context.name?.toString()}`);
+  }
+}

packages/@ember/-internals/metal/tests/tracked/validation_test.js

@@ -54,7 +54,11 @@ moduleFor(
       let tag = track(() => obj.first);
       let snapshot = valueForTag(tag);
 
-      assert.equal(obj.first, 'first: second', 'The value initializes correctly');
+      let expectedInitialValue = import.meta.env.VITE_STABLE_DECORATORS
+        ? 'first: undefined'
+        : 'first: second';
+
+      assert.equal(obj.first, expectedInitialValue, 'The value initializes correctly');
       assert.equal(validateTag(tag, snapshot), true);
 
       snapshot = valueForTag(tag);
@@ -65,7 +69,7 @@ moduleFor(
       // See: https://github.com/glimmerjs/glimmer-vm/pull/1018
       // assert.equal(validate(tag, snapshot), true);
 
-      assert.equal(obj.first, 'first: second', 'The value stays the same once initialized');
+      assert.equal(obj.first, expectedInitialValue, 'The value stays the same once initialized');
       snapshot = valueForTag(tag);
 
       assert.equal(validateTag(tag, snapshot), true);

rollup.config.mjs

@@ -247,10 +247,14 @@ export function hiddenDependencies() {
       'module'
     ).path,
     ...walkGlimmerDeps(['@glimmer/compiler']),
-    // 'decorator-transforms/runtime': resolve(
-    //   findFromProject('decorator-transforms').root,
-    //   'dist/runtime.js'
-    // ),
+    ...(process.env.VITE_STABLE_DECORATORS
+      ? {}
+      : {
+          'decorator-transforms/runtime': resolve(
+            findFromProject('decorator-transforms').root,
+            'dist/runtime.js'
+          ),
+        }),
   };
 }