fix(es/compat): Handle useDefineForClassFields: false (#7055)

**BREAKING CHANGE:**

IMPORTANT NOTE: Users of decorators are recommended to configure `"useDefineForClassFields": false` to ensure that your code is properly transpiled.


**Related issue:**
 - Closes #6985.

crates/swc/src/builder.rs

@@ -213,6 +213,10 @@ impl<'a, 'b, P: swc_ecma_visit::Fold> PassBuilder<'a, 'b, P> {
             feature_flag = enable_available_feature_from_es_version(self.target);
 
             Either::Right(chain!(
+                Optional::new(
+                    compat::class_fields_use_set::class_fields_use_set(assumptions.pure_getters),
+                    assumptions.set_public_class_fields,
+                ),
                 Optional::new(
                     compat::es2022::es2022(
                         comments,

crates/swc/src/config/mod.rs

@@ -363,10 +363,10 @@ impl Options {
         // variable management system based on the syntax contexts.
         if syntax.typescript() {
             assumptions.set_class_methods = !transform.use_define_for_class_fields.into_bool();
-            assumptions.set_public_class_fields =
-                !transform.use_define_for_class_fields.into_bool();
         }
 
+        assumptions.set_public_class_fields = !transform.use_define_for_class_fields.into_bool();
+
         program.visit_mut_with(&mut resolver(
             unresolved_mark,
             top_level_mark,
@@ -669,7 +669,6 @@ impl Options {
                                 .into_bool(),
                             ts_enum_is_readonly: assumptions.ts_enum_is_readonly,
                         },
-                        use_define_for_class_fields: !assumptions.set_public_class_fields,
                         import_export_assign_config,
                         ..Default::default()
                     },
@@ -1478,7 +1477,7 @@ pub struct TransformConfig {
     pub treat_const_enum_as_enum: BoolConfig<false>,
 
     #[serde(default)]
-    pub use_define_for_class_fields: BoolConfig<false>,
+    pub use_define_for_class_fields: BoolConfig<true>,
 }
 
 #[derive(Debug, Default, Clone, Serialize, Deserialize, Merge)]

crates/swc/tests/exec.rs

@@ -8,7 +8,10 @@ use std::{
 use anyhow::{Context, Error};
 use once_cell::sync::Lazy;
 use swc::{
-    config::{Config, JsMinifyOptions, JscConfig, ModuleConfig, Options, SourceMapsConfig},
+    config::{
+        Config, JsMinifyOptions, JscConfig, ModuleConfig, Options, SourceMapsConfig,
+        TransformConfig,
+    },
     try_with_handler, BoolOrDataConfig, Compiler, HandlerOpts,
 };
 use swc_common::{errors::ColorConfig, SourceMap, GLOBALS};
@@ -113,10 +116,7 @@ fn init_helpers() -> Arc<PathBuf> {
 }
 
 fn create_matrix(entry: &Path) -> Vec<Options> {
-    // use_define_for_class_fields: false
-    // force to use [[Set]] instead of [[Define]]
-    // EsVersion should be lower than EsVersion::Es2022
-    let force_set_class_field = entry
+    let use_define_for_class_fields = entry
         .parent()
         .map(|parent| parent.join(".swcrc"))
         .and_then(|path| fs::read_to_string(path).ok())
@@ -133,8 +133,8 @@ fn create_matrix(entry: &Path) -> Vec<Options> {
         })
         .and_then(|content| serde_json::from_value::<Config>(content).ok())
         .and_then(|config| config.jsc.transform.into_inner())
-        .map(|c| c.use_define_for_class_fields == false.into())
-        .unwrap_or(false);
+        .map(|c| c.use_define_for_class_fields)
+        .unwrap_or_default();
 
     [
         EsVersion::Es2022,
@@ -148,7 +148,6 @@ fn create_matrix(entry: &Path) -> Vec<Options> {
         EsVersion::Es5,
     ]
     .into_iter()
-    .filter(|e| !force_set_class_field || e < &EsVersion::Es2022)
     .matrix(|| {
         let default_es = Syntax::Es(EsConfig {
             ..Default::default()
@@ -177,7 +176,11 @@ fn create_matrix(entry: &Path) -> Vec<Options> {
                 config: Config {
                     jsc: JscConfig {
                         syntax: Some(syntax),
-                        transform: None.into(),
+                        transform: Some(TransformConfig {
+                            use_define_for_class_fields,
+                            ..Default::default()
+                        })
+                        .into(),
                         // true, false
                         external_helpers: (!external_helpers).into(),
                         target: Some(target),
@@ -307,11 +310,19 @@ fn get_expected_stdout(input: &Path) -> Result<String, Error> {
                         &Options {
                             config: Config {
                                 jsc: JscConfig {
-                                    target: Some(EsVersion::Es2021),
+                                    target: Some(EsVersion::Es2022),
                                     syntax: Some(Syntax::Typescript(TsConfig {
                                         decorators: true,
                                         ..Default::default()
                                     })),
+                                    transform: Some(TransformConfig {
+                                        use_define_for_class_fields: (!input
+                                            .to_string_lossy()
+                                            .contains("set_public_class_fields"))
+                                        .into(),
+                                        ..Default::default()
+                                    })
+                                    .into(),
                                     ..Default::default()
                                 },
                                 module: match input.extension() {

crates/swc/tests/exec/issues-1xxx/1592/.swcrc → crates/swc/tests/exec/issues-1xxx/1592/set_public_class_fields/.swcrc

@@ -12,7 +12,8 @@
         },
         "transform": {
             "legacyDecorator": true,
-            "decoratorMetadata": true
+            "decoratorMetadata": true,
+            "useDefineForClassFields": false
         }
     },
     "module": {

crates/swc/tests/fixture/issues-1xxx/1160/output/entry.ts

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
 const _tsDecorate = require("@swc/helpers/lib/_ts_decorate.js").default;
 const _tsMetadata = require("@swc/helpers/lib/_ts_metadata.js").default;
 var MyEnum;
@@ -10,6 +11,9 @@ var MyEnum;
     MyEnum["y"] = "yyy";
 })(MyEnum || (MyEnum = {}));
 class Xpto {
+    constructor(){
+        _defineProperty(this, "value", void 0);
+    }
 }
 _tsDecorate([
     Decorator(),

crates/swc/tests/fixture/issues-1xxx/1219/output/index.ts

@@ -1,6 +1,7 @@
+import _define_property from "@swc/helpers/src/_define_property.mjs";
 class Foo {
     constructor(){
-        this.static = 5;
-        this.declare = 5;
+        _define_property(this, "static", 5);
+        _define_property(this, "declare", 5);
     }
 }

crates/swc/tests/fixture/issues-1xxx/1278/output/index.ts

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
 const _tsDecorate = require("@swc/helpers/lib/_ts_decorate.js").default;
 const _tsMetadata = require("@swc/helpers/lib/_ts_metadata.js").default;
 function MyDecorator(klass) {
@@ -11,6 +12,9 @@ function MyDecorator(klass) {
     };
 }
 class MyClass {
+    constructor(){
+        _defineProperty(this, "prop", void 0);
+    }
 }
 _tsDecorate([
     MyDecorator(MyClass),

crates/swc/tests/fixture/issues-1xxx/1306/case1/output/index.ts

@@ -2,6 +2,7 @@ import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
 import _class_private_field_get from "@swc/helpers/src/_class_private_field_get.mjs";
 import _class_private_field_init from "@swc/helpers/src/_class_private_field_init.mjs";
 import _class_private_field_set from "@swc/helpers/src/_class_private_field_set.mjs";
+import _create_class from "@swc/helpers/src/_create_class.mjs";
 var _name = /*#__PURE__*/ new WeakMap();
 var Animal = /*#__PURE__*/ function() {
     "use strict";
@@ -13,9 +14,13 @@ var Animal = /*#__PURE__*/ function() {
         });
         _class_private_field_set(this, _name, name);
     }
-    var _proto = Animal.prototype;
-    _proto.noise = function noise() {
-        return _class_private_field_get(this, _name).toUpperCase();
-    };
+    _create_class(Animal, [
+        {
+            key: "noise",
+            value: function noise() {
+                return _class_private_field_get(this, _name).toUpperCase();
+            }
+        }
+    ]);
     return Animal;
 }();

crates/swc/tests/fixture/issues-1xxx/1341/case1/output/index.ts

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _asyncToGenerator = require("@swc/helpers/lib/_async_to_generator.js").default;
+const _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
 class A {
     foo() {
         var _this = this;
@@ -23,7 +24,7 @@ class A {
         })();
     }
     constructor(){
-        this.val = "1";
+        _defineProperty(this, "val", "1");
     }
 }
 new A().foo();

crates/swc/tests/fixture/issues-1xxx/1345/input/.swcrc

@@ -7,6 +7,7 @@
             "dynamicImport": true
         },
         "transform": {
+            "useDefineForClassFields": false,
             "legacyDecorator": true,
             "decoratorMetadata": true,
             "optimizer": {
@@ -18,4 +19,4 @@
             }
         }
     }
-}
+}

crates/swc/tests/fixture/issues-1xxx/1362/case1/input/.swcrc

@@ -6,6 +6,7 @@
             "decorators": true
         },
         "transform": {
+            "useDefineForClassFields": false,
             "legacyDecorator": true,
             "decoratorMetadata": true
         },
@@ -14,4 +15,4 @@
     "module": {
         "type": "commonjs"
     }
-}
+}

crates/swc/tests/fixture/issues-1xxx/1421/case1/input/.swcrc

@@ -7,11 +7,12 @@
             "dynamicImport": false
         },
         "transform": {
+            "useDefineForClassFields": false,
             "legacyDecorator": true,
             "decoratorMetadata": true
         }
     },
     "module": {
         "type": "commonjs"
     }
-}
+}

crates/swc/tests/fixture/issues-1xxx/1456/case1/input/.swcrc

@@ -6,6 +6,7 @@
             "decorators": true
         },
         "transform": {
+            "useDefineForClassFields": false,
             "legacyDecorator": true,
             "decoratorMetadata": true
         }
@@ -16,4 +17,4 @@
     "env": {
         "targets": "node 12"
     }
-}
+}

crates/swc/tests/fixture/issues-1xxx/1456/case2/input/.swcrc

@@ -6,6 +6,7 @@
             "decorators": true
         },
         "transform": {
+            "useDefineForClassFields": false,
             "legacyDecorator": true,
             "decoratorMetadata": true
         }
@@ -16,4 +17,4 @@
     "env": {
         "targets": "node 12"
     }
-}
+}

crates/swc/tests/fixture/issues-1xxx/1505/case1/output/index.ts

@@ -1,4 +1,5 @@
 import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
+import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _inherits from "@swc/helpers/src/_inherits.mjs";
 import _create_super from "@swc/helpers/src/_create_super.mjs";
 var MyClass = function MyClass() {
@@ -16,6 +17,6 @@ export var fn = function() {
         }
         return _class;
     }(MyClass);
-    _class.x = 5;
+    _define_property(_class, "x", 5);
     return _class;
 };

crates/swc/tests/fixture/issues-1xxx/1505/case3/output/index.tsx

@@ -1,4 +1,5 @@
 import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
+import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _inherits from "@swc/helpers/src/_inherits.mjs";
 import _create_super from "@swc/helpers/src/_create_super.mjs";
 var Component = function Component() {
@@ -20,6 +21,6 @@ var withTeamsForUser = function(_WrappedComponent) {
         }
         return _class;
     }(Component);
-    _class.displayName = "x";
+    _define_property(_class, "displayName", "x");
     return _class;
 };

crates/swc/tests/fixture/issues-1xxx/1505/case5/output/index.tsx

@@ -1,4 +1,5 @@
 import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
+import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _inherits from "@swc/helpers/src/_inherits.mjs";
 import _create_super from "@swc/helpers/src/_create_super.mjs";
 var withTeamsForUser = function() {
@@ -12,6 +13,6 @@ var withTeamsForUser = function() {
         }
         return _class;
     }(Component);
-    _class.displayName = "x";
+    _define_property(_class, "displayName", "x");
     return _class;
 };

crates/swc/tests/fixture/issues-1xxx/1515/case1/output/input.ts

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "ServiceError", {
     enumerable: true,
     get: ()=>ServiceError
 });
+const _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
 class ServiceError extends Error {
     constructor(...args){
         super(...args);
-        this.code = ServiceError.Code.badResponse;
-        this.name = "ServiceError.BadResponse";
+        _defineProperty(this, "code", ServiceError.Code.badResponse);
+        _defineProperty(this, "name", "ServiceError.BadResponse");
     }
 }
 (function(ServiceError1) {
@@ -28,8 +29,8 @@ class ServiceError extends Error {
         constructor(...args){
             super(...args);
             // Service was probably not registered, or using the wrong channel
-            this.code = 404;
-            this.name = "ServiceError.ServiceNotFound";
+            _defineProperty(this, "code", 404);
+            _defineProperty(this, "name", "ServiceError.ServiceNotFound");
         }
     }
     ServiceError1.ServiceNotFound = ServiceNotFound;

crates/swc/tests/fixture/issues-1xxx/1612/case1/output/index.ts

@@ -1,12 +1,17 @@
 import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
+import _create_class from "@swc/helpers/src/_create_class.mjs";
 var Test = /*#__PURE__*/ function() {
     "use strict";
     function Test() {
         _class_call_check(this, Test);
     }
-    var _proto = Test.prototype;
-    _proto.test = function test() {
-        a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1);
-    };
+    _create_class(Test, [
+        {
+            key: "test",
+            value: function test() {
+                a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1).a(1);
+            }
+        }
+    ]);
     return Test;
 }();

crates/swc/tests/fixture/issues-1xxx/1869/decorator/output/index.ts

@@ -1,12 +1,13 @@
 import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
+import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _ts_decorate from "@swc/helpers/src/_ts_decorate.mjs";
 var _TestClass;
 var TestClass = (_TestClass = function TestClass() {
     "use strict";
     _class_call_check(this, TestClass);
-}, _TestClass.Something = "hello", _TestClass.SomeProperties = {
+}, _define_property(_TestClass, "Something", "hello"), _define_property(_TestClass, "SomeProperties", {
     firstProp: _TestClass.Something
-}, _TestClass);
+}), _TestClass);
 TestClass = _ts_decorate([
     someClassDecorator
 ], TestClass);