fix(es/decorators): Fix init order of 2022-03 impl (#9760)

jzhan-canva · web-flow · commit 751a310e87cb · 2025-01-15T07:26:26.000Z
**Description:** Fix the order of initialization for 2022-03 decorators. TBH the [proposal](https://github.com/tc39/proposal-decorators) isn't very clear on how `init` is executed for [auto-accessor](https://github.com/tc39/proposal-decorators) decorator **Related issue:** - Closes #9669
diff --git a/.changeset/tame-hairs-applaud.md b/.changeset/tame-hairs-applaud.md
@@ -0,0 +1,6 @@
+---
+swc_ecma_transforms_proposal: patch
+swc_core: patch
+---
+
+Fix 2022-03 decorators initialization order
diff --git a/crates/swc/tests/fixture/issues-7xxx/7220/1/output/index.js b/crates/swc/tests/fixture/issues-7xxx/7220/1/output/index.js
@@ -14,8 +14,7 @@ var TestClass = /*#__PURE__*/ function() {
     "use strict";
     function TestClass() {
         _class_call_check(this, TestClass);
-        _define_property(this, "calls", []);
-        _initProto(this);
+        _define_property(this, "calls", (_initProto(this), []));
     }
     _create_class(TestClass, [
         {
diff --git a/crates/swc_ecma_transforms_proposal/src/decorator_impl.rs b/crates/swc_ecma_transforms_proposal/src/decorator_impl.rs
@@ -51,7 +51,6 @@ struct ClassState {
     /// If not empty, `initProto` should be injected to the constructor.
     init_proto: Option<Ident>,
     init_proto_args: Vec<Option<ExprOrSpread>>,
-    is_init_proto_called: bool,
 
     init_static: Option<Ident>,
     init_static_args: Vec<Option<ExprOrSpread>>,
@@ -718,10 +717,10 @@ impl DecoratorPass {
             }
         }
         body.visit_mut_with(self);
-        c.visit_mut_with(self);
         c.ident = preserved_class_name.clone();
         replace_ident(&mut c.class, c.ident.to_id(), &preserved_class_name);
         c.class.body.extend(body);
+        c.visit_mut_with(self);
         c.class.body.push(ClassMember::StaticBlock(StaticBlock {
             span: DUMMY_SP,
             body: BlockStmt {
@@ -814,19 +813,48 @@ impl VisitMut for DecoratorPass {
 
         n.visit_mut_children_with(self);
 
-        if !self.state.is_init_proto_called {
-            if let Some(init_proto) = self.state.init_proto.clone() {
+        if let Some(init_proto) = self.state.init_proto.clone() {
+            let init_proto_expr = CallExpr {
+                span: DUMMY_SP,
+                callee: init_proto.clone().as_callee(),
+                args: vec![ThisExpr { span: DUMMY_SP }.as_arg()],
+                ..Default::default()
+            };
+            let mut proto_inited = false;
+            for member in n.body.iter_mut() {
+                if let ClassMember::ClassProp(prop) = member {
+                    if prop.is_static {
+                        continue;
+                    }
+                    if let Some(value) = prop.value.clone() {
+                        prop.value = Some(Expr::from_exprs(vec![
+                            init_proto_expr.clone().into(),
+                            value,
+                        ]));
+
+                        proto_inited = true;
+                        break;
+                    }
+                } else if let ClassMember::PrivateProp(prop) = member {
+                    if prop.is_static {
+                        continue;
+                    }
+                    if let Some(value) = prop.value.clone() {
+                        prop.value = Some(Expr::from_exprs(vec![
+                            init_proto_expr.clone().into(),
+                            value,
+                        ]));
+
+                        proto_inited = true;
+                        break;
+                    }
+                }
+            }
+
+            if !proto_inited {
                 let c = self.ensure_constructor(n);
 
-                inject_after_super(
-                    c,
-                    vec![Box::new(Expr::Call(CallExpr {
-                        span: DUMMY_SP,
-                        callee: init_proto.as_callee(),
-                        args: vec![ThisExpr { span: DUMMY_SP }.as_arg()],
-                        ..Default::default()
-                    }))],
-                )
+                inject_after_super(c, vec![Box::new(init_proto_expr.into())])
             }
         }
 
@@ -847,7 +875,6 @@ impl VisitMut for DecoratorPass {
         }
 
         self.state.init_proto = None;
-        self.state.is_init_proto_called = false;
 
         self.state.extra_stmts = old_stmts;
     }
@@ -1045,29 +1072,6 @@ impl VisitMut for DecoratorPass {
                         value: if accessor.decorators.is_empty() {
                             accessor.value
                         } else {
-                            let init_proto =
-                                if self.state.is_init_proto_called || accessor.is_static {
-                                    None
-                                } else {
-                                    self.state.is_init_proto_called = true;
-
-                                    let init_proto = self
-                                        .state
-                                        .init_proto
-                                        .get_or_insert_with(|| private_ident!("_initProto"))
-                                        .clone();
-
-                                    Some(
-                                        CallExpr {
-                                            span: DUMMY_SP,
-                                            callee: init_proto.clone().as_callee(),
-                                            args: vec![ThisExpr { span: DUMMY_SP }.as_arg()],
-                                            ..Default::default()
-                                        }
-                                        .into(),
-                                    )
-                                };
-
                             let init_call = CallExpr {
                                 span: DUMMY_SP,
                                 callee: init.clone().as_callee(),
@@ -1078,9 +1082,7 @@ impl VisitMut for DecoratorPass {
                             }
                             .into();
 
-                            Some(Expr::from_exprs(
-                                init_proto.into_iter().chain(once(init_call)).collect(),
-                            ))
+                            Some(init_call)
                         },
                         type_ann: None,
                         is_static: accessor.is_static,
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-duplicated-keys/method-and-field/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-duplicated-keys/method-and-field/output.js
@@ -2,7 +2,7 @@ var _init_a, _initProto;
 const dec = ()=>{};
 class Foo {
     static{
-        ({ e: [_init_a, _initProto]  } = _apply_decs_2203_r(this, [
+        ({ e: [_init_a, _initProto] } = _apply_decs_2203_r(this, [
             [
                 dec,
                 2,
@@ -15,10 +15,7 @@ class Foo {
             ]
         ], []));
     }
-    constructor(){
-        _initProto(this);
-    }
-    a = _init_a(this, 123);
+    a = (_initProto(this), _init_a(this, 123));
     a() {
         return 1;
     }
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters--to-es2015/private/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters--to-es2015/private/output.js
@@ -10,8 +10,7 @@ class Foo {
             get: get_a,
             set: void 0
         });
-        _define_property(this, "value", 1);
-        _initProto(this);
+        _define_property(this, "value", (_initProto(this), 1));
     }
 }
 ({ e: [_call_a, _initProto] } = _apply_decs_2203_r(Foo, [
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters--to-es2015/public/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters--to-es2015/public/output.js
@@ -10,8 +10,7 @@ class Foo {
         return this.value;
     }
     constructor(){
-        _define_property(this, "value", 1);
-        _initProto(this);
+        _define_property(this, "value", (_initProto(this), 1));
     }
 }
 ({ e: [_initProto] } = _apply_decs_2203_r(Foo, [
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters-and-setters--to-es2015/private/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters-and-setters--to-es2015/private/output.js
@@ -13,8 +13,7 @@ class Foo {
             get: get_a,
             set: set_a
         });
-        _define_property(this, "value", 1);
-        _initProto(this);
+        _define_property(this, "value", (_initProto(this), 1));
     }
 }
 ({ e: [_call_a, _call_a1, _initProto] } = _apply_decs_2203_r(Foo, [
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters-and-setters--to-es2015/public/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters-and-setters--to-es2015/public/output.js
@@ -16,8 +16,7 @@ class Foo {
         this.value = v;
     }
     constructor(){
-        _define_property(this, "value", 1);
-        _initProto(this);
+        _define_property(this, "value", (_initProto(this), 1));
     }
 }
 ({ e: [_initProto] } = _apply_decs_2203_r(Foo, [
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters-and-setters/private/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters-and-setters/private/output.js
@@ -21,10 +21,7 @@ class Foo {
             ]
         ], []));
     }
-    constructor(){
-        _initProto(this);
-    }
-    value = 1;
+    value = (_initProto(this), 1);
     get #a() {
         return _call_a(this);
     }
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters-and-setters/public/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters-and-setters/public/output.js
@@ -3,7 +3,7 @@ const dec = ()=>{};
 _computedKey = 'b', _computedKey1 = 'b';
 class Foo {
     static{
-        ({ e: [_initProto]  } = _apply_decs_2203_r(this, [
+        ({ e: [_initProto] } = _apply_decs_2203_r(this, [
             [
                 dec,
                 3,
@@ -26,10 +26,7 @@ class Foo {
             ]
         ], []));
     }
-    constructor(){
-        _initProto(this);
-    }
-    value = 1;
+    value = (_initProto(this), 1);
     get a() {
         return this.value;
     }
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters/private/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters/private/output.js
@@ -2,7 +2,7 @@ var _call_a, _initProto;
 const dec = ()=>{};
 class Foo {
     static{
-        ({ e: [_call_a, _initProto]  } = _apply_decs_2203_r(this, [
+        ({ e: [_call_a, _initProto] } = _apply_decs_2203_r(this, [
             [
                 dec,
                 3,
@@ -13,10 +13,7 @@ class Foo {
             ]
         ], []));
     }
-    constructor(){
-        _initProto(this);
-    }
-    value = 1;
+    value = (_initProto(this), 1);
     get #a() {
         return _call_a(this);
     }
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters/public/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-getters/public/output.js
@@ -3,7 +3,7 @@ const dec = ()=>{};
 _computedKey = 'b';
 class Foo {
     static{
-        ({ e: [_initProto]  } = _apply_decs_2203_r(this, [
+        ({ e: [_initProto] } = _apply_decs_2203_r(this, [
             [
                 dec,
                 3,
@@ -16,10 +16,7 @@ class Foo {
             ]
         ], []));
     }
-    constructor(){
-        _initProto(this);
-    }
-    value = 1;
+    value = (_initProto(this), 1);
     get a() {
         return this.value;
     }
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-methods--to-es2015/private/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-methods--to-es2015/private/output.js
@@ -10,8 +10,7 @@ class Foo {
             get: get_a,
             set: void 0
         });
-        _define_property(this, "value", 1);
-        _initProto(this);
+        _define_property(this, "value", (_initProto(this), 1));
     }
 }
 ({ e: [_call_a, _initProto] } = _apply_decs_2203_r(Foo, [
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-methods--to-es2015/public/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-methods--to-es2015/public/output.js
@@ -10,8 +10,7 @@ class Foo {
         return this.value;
     }
     constructor(){
-        _define_property(this, "value", 1);
-        _initProto(this);
+        _define_property(this, "value", (_initProto(this), 1));
     }
 }
 ({ e: [_initProto] } = _apply_decs_2203_r(Foo, [
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-methods/private/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-methods/private/output.js
@@ -13,10 +13,7 @@ class Foo {
             ]
         ], []));
     }
-    constructor(){
-        _initProto(this);
-    }
-    value = 1;
+    value = (_initProto(this), 1);
     get #a() {
         return _call_a;
     }
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-methods/public/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-methods/public/output.js
@@ -3,7 +3,7 @@ const dec = ()=>{};
 _computedKey = 'b';
 class Foo {
     static{
-        ({ e: [_initProto]  } = _apply_decs_2203_r(this, [
+        ({ e: [_initProto] } = _apply_decs_2203_r(this, [
             [
                 dec,
                 2,
@@ -16,10 +16,7 @@ class Foo {
             ]
         ], []));
     }
-    constructor(){
-        _initProto(this);
-    }
-    value = 1;
+    value = (_initProto(this), 1);
     a() {
         return this.value;
     }
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-misc/all-decorators/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-misc/all-decorators/output.js
@@ -144,11 +144,11 @@ new class extends _identity {
                 ]));
                 _initStatic(this);
             }
-            a = _init_a(this);
+            a = (_initProto(this), _init_a(this));
             b() {}
             get c() {}
             set c(v) {}
-            #___private_d_1 = (_initProto(this), _init_d(this));
+            #___private_d_1 = _init_d(this);
             get d() {
                 return this.#___private_d_1;
             }
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-setters--to-es2015/private/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-setters--to-es2015/private/output.js
@@ -10,8 +10,7 @@ class Foo {
             get: void 0,
             set: set_a
         });
-        _define_property(this, "value", 1);
-        _initProto(this);
+        _define_property(this, "value", (_initProto(this), 1));
     }
 }
 ({ e: [_call_a, _initProto] } = _apply_decs_2203_r(Foo, [
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-setters--to-es2015/public/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-setters--to-es2015/public/output.js
@@ -10,8 +10,7 @@ class Foo {
         return this.value = v;
     }
     constructor(){
-        _define_property(this, "value", 1);
-        _initProto(this);
+        _define_property(this, "value", (_initProto(this), 1));
     }
 }
 ({ e: [_initProto] } = _apply_decs_2203_r(Foo, [
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-setters/private/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-setters/private/output.js
@@ -13,10 +13,7 @@ class Foo {
             ]
         ], []));
     }
-    constructor(){
-        _initProto(this);
-    }
-    value = 1;
+    value = (_initProto(this), 1);
     set #a(v) {
         return _call_a(this, v);
     }
diff --git a/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-setters/public/output.js b/crates/swc_ecma_transforms_proposal/tests/decorators/2022-03-setters/public/output.js

Original file line number	Diff line number	Diff line change
`@@ -14,8 +14,7 @@ var TestClass = /#__PURE__/ function() {`
`14`	`14`	`"use strict";`
`15`	`15`	`function TestClass() {`
`16`	`16`	`_class_call_check(this, TestClass);`
`17`		`- _define_property(this, "calls", []);`
`18`		`- _initProto(this);`
	`17`	`+ _define_property(this, "calls", (_initProto(this), []));`
`19`	`18`	`}`
`20`	`19`	`_create_class(TestClass, [`
`21`	`20`	`{`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ var _init_a, _initProto;`
`2`	`2`	`const dec = ()=>{};`
`3`	`3`	`class Foo {`
`4`	`4`	`static{`
`5`		`- ({ e: [_init_a, _initProto] } = _apply_decs_2203_r(this, [`
	`5`	`+ ({ e: [_init_a, _initProto] } = _apply_decs_2203_r(this, [`
`6`	`6`	`[`
`7`	`7`	`dec,`
`8`	`8`	`2,`
`@@ -15,10 +15,7 @@ class Foo {`
`15`	`15`	`]`
`16`	`16`	`], []));`
`17`	`17`	`}`
`18`		`- constructor(){`
`19`		`- _initProto(this);`
`20`		`- }`
`21`		`- a = _init_a(this, 123);`
	`18`	`+ a = (_initProto(this), _init_a(this, 123));`
`22`	`19`	`a() {`
`23`	`20`	`return 1;`
`24`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,7 @@ class Foo {`
`10`	`10`	`get: get_a,`
`11`	`11`	`set: void 0`
`12`	`12`	`});`
`13`		`- _define_property(this, "value", 1);`
`14`		`- _initProto(this);`
	`13`	`+ _define_property(this, "value", (_initProto(this), 1));`
`15`	`14`	`}`
`16`	`15`	`}`
`17`	`16`	`({ e: [_call_a, _initProto] } = _apply_decs_2203_r(Foo, [`
Original file line number	Diff line number	Diff line change
`@@ -13,8 +13,7 @@ class Foo {`
`13`	`13`	`get: get_a,`
`14`	`14`	`set: set_a`
`15`	`15`	`});`
`16`		`- _define_property(this, "value", 1);`
`17`		`- _initProto(this);`
	`16`	`+ _define_property(this, "value", (_initProto(this), 1));`
`18`	`17`	`}`
`19`	`18`	`}`
`20`	`19`	`({ e: [_call_a, _call_a1, _initProto] } = _apply_decs_2203_r(Foo, [`
Original file line number	Diff line number	Diff line change
`@@ -16,8 +16,7 @@ class Foo {`
`16`	`16`	`this.value = v;`
`17`	`17`	`}`
`18`	`18`	`constructor(){`
`19`		`- _define_property(this, "value", 1);`
`20`		`- _initProto(this);`
	`19`	`+ _define_property(this, "value", (_initProto(this), 1));`
`21`	`20`	`}`
`22`	`21`	`}`
`23`	`22`	`({ e: [_initProto] } = _apply_decs_2203_r(Foo, [`
Original file line number	Diff line number	Diff line change
`@@ -21,10 +21,7 @@ class Foo {`
`21`	`21`	`]`
`22`	`22`	`], []));`
`23`	`23`	`}`
`24`		`- constructor(){`
`25`		`- _initProto(this);`
`26`		`- }`
`27`		`- value = 1;`
	`24`	`+ value = (_initProto(this), 1);`
`28`	`25`	`get #a() {`
`29`	`26`	`return _call_a(this);`
`30`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ const dec = ()=>{};`
`3`	`3`	`_computedKey = 'b', _computedKey1 = 'b';`
`4`	`4`	`class Foo {`
`5`	`5`	`static{`
`6`		`- ({ e: [_initProto] } = _apply_decs_2203_r(this, [`
	`6`	`+ ({ e: [_initProto] } = _apply_decs_2203_r(this, [`
`7`	`7`	`[`
`8`	`8`	`dec,`
`9`	`9`	`3,`
`@@ -26,10 +26,7 @@ class Foo {`
`26`	`26`	`]`
`27`	`27`	`], []));`
`28`	`28`	`}`
`29`		`- constructor(){`
`30`		`- _initProto(this);`
`31`		`- }`
`32`		`- value = 1;`
	`29`	`+ value = (_initProto(this), 1);`
`33`	`30`	`get a() {`
`34`	`31`	`return this.value;`
`35`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ var _call_a, _initProto;`
`2`	`2`	`const dec = ()=>{};`
`3`	`3`	`class Foo {`
`4`	`4`	`static{`
`5`		`- ({ e: [_call_a, _initProto] } = _apply_decs_2203_r(this, [`
	`5`	`+ ({ e: [_call_a, _initProto] } = _apply_decs_2203_r(this, [`
`6`	`6`	`[`
`7`	`7`	`dec,`
`8`	`8`	`3,`
`@@ -13,10 +13,7 @@ class Foo {`
`13`	`13`	`]`
`14`	`14`	`], []));`
`15`	`15`	`}`
`16`		`- constructor(){`
`17`		`- _initProto(this);`
`18`		`- }`
`19`		`- value = 1;`
	`16`	`+ value = (_initProto(this), 1);`
`20`	`17`	`get #a() {`
`21`	`18`	`return _call_a(this);`
`22`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ const dec = ()=>{};`
`3`	`3`	`_computedKey = 'b';`
`4`	`4`	`class Foo {`
`5`	`5`	`static{`
`6`		`- ({ e: [_initProto] } = _apply_decs_2203_r(this, [`
	`6`	`+ ({ e: [_initProto] } = _apply_decs_2203_r(this, [`
`7`	`7`	`[`
`8`	`8`	`dec,`
`9`	`9`	`3,`
`@@ -16,10 +16,7 @@ class Foo {`
`16`	`16`	`]`
`17`	`17`	`], []));`
`18`	`18`	`}`
`19`		`- constructor(){`
`20`		`- _initProto(this);`
`21`		`- }`
`22`		`- value = 1;`
	`19`	`+ value = (_initProto(this), 1);`
`23`	`20`	`get a() {`
`24`	`21`	`return this.value;`
`25`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -144,11 +144,11 @@ new class extends _identity {`
`144`	`144`	`]));`
`145`	`145`	`_initStatic(this);`
`146`	`146`	`}`
`147`		`- a = _init_a(this);`
	`147`	`+ a = (_initProto(this), _init_a(this));`
`148`	`148`	`b() {}`
`149`	`149`	`get c() {}`
`150`	`150`	`set c(v) {}`
`151`		`- #___private_d_1 = (_initProto(this), _init_d(this));`
	`151`	`+ #___private_d_1 = _init_d(this);`
`152`	`152`	`get d() {`
`153`	`153`	`return this.#___private_d_1;`
`154`	`154`	`}`