feat(transform): support useDefineForClassFields Config

crates/mako/src/build/transform.rs

@@ -142,6 +142,8 @@ impl Transform {
                     })));
                     // TODO: is it a problem to clone comments?
                     let comments = origin_comments.get_swc_comments().clone();
+                    let assumptions = context.assumptions_for(file);
+
                     folders.push(Box::new(swc_preset_env::preset_env(
                         unresolved_mark,
                         Some(comments),
@@ -152,7 +154,7 @@ impl Transform {
                             )),
                             ..Default::default()
                         },
-                        Assumptions::default(),
+                        assumptions,
                         &mut FeatureFlag::default(),
                     )));
                     // simplify, but keep top level dead code
@@ -227,6 +229,19 @@ impl Transform {
     }
 }
 
+impl Context {
+    pub fn assumptions_for(&self, file: &File) -> Assumptions {
+        let is_ts = file.extname == "ts" || file.extname == "tsx";
+
+        let mut assumptions = Assumptions::default();
+        assumptions.set_public_class_fields |= !self.config.use_define_for_class_fields;
+        if is_ts {
+            assumptions.set_class_methods |= !self.config.use_define_for_class_fields;
+        }
+        assumptions
+    }
+}
+
 // TODO: use visitor instead
 // Why do this?
 // 为了修复 @import url() 会把 css 当 asset 处理，返回 base64 的问题

crates/mako/src/config/config.rs

@@ -504,6 +504,7 @@ pub struct Config {
     pub rsc_client: Option<RscClientConfig>,
     pub experimental: ExperimentalConfig,
     pub watch: WatchConfig,
+    pub use_define_for_class_fields: bool,
 }
 
 #[allow(dead_code)]
@@ -657,6 +658,7 @@ const DEFAULT_CONFIG: &str = r#"
     "rscServer": false,
     "rscClient": false,
     "experimental": { "webpackSyntaxValidate": [] },
+    "useDefineForClassFields": true,
     "watch": { "ignorePaths": [] },
     "devServer": { "host": "127.0.0.1", "port": 3000 }
 }

e2e/fixtures/javascript.transform.use_define_for_class_fields/expect.js

@@ -0,0 +1,7 @@
+const assert = require("assert");
+const { parseBuildResult, trim, moduleReg, injectSimpleJest } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+injectSimpleJest();
+
+require("./dist/index.js");

e2e/fixtures/javascript.transform.use_define_for_class_fields/mako.config.json

@@ -0,0 +1 @@
+{}

e2e/fixtures/javascript.transform.use_define_for_class_fields/src/index.tsx

@@ -0,0 +1,20 @@
+class T{
+    a;
+    b(){
+        return this.a
+    }
+}
+
+it('define the field with descriptor by default',()=>{
+    let t = new T();
+    expect(Object.getOwnPropertyDescriptor(t,'a')).toStrictEqual({
+      value: undefined,
+      writable: true,
+      enumerable: true,
+      configurable: true
+    });
+});
+
+
+
+

e2e/fixtures/javascript.transform.use_define_for_class_fields_off/expect.js

@@ -0,0 +1,7 @@
+const assert = require("assert");
+const { parseBuildResult, trim, moduleReg, injectSimpleJest } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+injectSimpleJest();
+
+require("./dist/index.js");

e2e/fixtures/javascript.transform.use_define_for_class_fields_off/mako.config.json

@@ -0,0 +1,3 @@
+{
+  "useDefineForClassFields": false
+}

e2e/fixtures/javascript.transform.use_define_for_class_fields_off/src/index.tsx

@@ -0,0 +1,15 @@
+class T{
+    a;
+    b(){
+        return this.a
+    }
+}
+
+it('has no descriptor when disable use define for class fields',()=>{
+    let t = new T();
+    expect(Object.getOwnPropertyDescriptor(t,'a')).toStrictEqual(undefined);
+});
+
+
+
+

packages/bundler-mako/.gitignore

@@ -0,0 +1 @@
+examples/**/dist

packages/bundler-mako/.npmignore

@@ -1 +1,2 @@
 scripts
+examples

packages/bundler-mako/examples/simple/base-tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "useDefineForClassFields": true
+  }
+}

packages/bundler-mako/examples/simple/build.js

@@ -0,0 +1,25 @@
+const bundler = require('../../');
+const noop = () => {};
+
+bundler
+  .build({
+    cwd: __dirname,
+    config: {
+      entry: {
+        index: 'index.ts',
+      },
+      alias: {},
+      jsMinifier: 'none',
+      hash: false,
+      targets: {
+        chrome: 40,
+      },
+    },
+    onBuildComplete: noop,
+    chainWebpack: noop,
+    watch: false,
+  })
+  .then(
+    () => console.log('Build completed'),
+    (e) => console.log(e),
+  );

packages/bundler-mako/examples/simple/index.ts

@@ -0,0 +1,16 @@
+const assert = require('assert');
+
+class T {
+  a;
+  b() {
+    return this.a;
+  }
+}
+
+let t = new T();
+assert.deepStrictEqual(Object.getOwnPropertyDescriptor(t, 'a'), {
+  value: undefined,
+  writable: true,
+  enumerable: true,
+  configurable: true,
+});

packages/bundler-mako/examples/simple/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./base-tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "dist2"
+  }
+}

packages/bundler-mako/index.js

@@ -5,6 +5,7 @@ const assert = require('assert');
 const { createProxy, createHttpsServer } = require('@umijs/bundler-utils');
 const lodash = require('lodash');
 const chalk = require('chalk');
+const { parseTsconfig } = require('get-tsconfig');
 const {
   createProxyMiddleware,
 } = require('@umijs/bundler-utils/compiled/http-proxy-middleware');
@@ -510,6 +511,7 @@ async function getMakoConfig(opts) {
     {},
   );
   const outputPath = path.resolve(opts.cwd, opts.config.outputPath || 'dist');
+  const tsConfig = getTsConfig(opts);
 
   const makoConfig = {
     entry: opts.entry,
@@ -541,6 +543,8 @@ async function getMakoConfig(opts) {
     emotion,
     forkTSChecker: !!forkTSChecker,
     ...(opts.disableCopy ? { copy: [] } : { copy: ['public'].concat(copy) }),
+    useDefineForClassFields:
+      tsConfig.compilerOptions.useDefineForClassFields ?? true,
   };
 
   return makoConfig;
@@ -565,3 +569,28 @@ function normalizeDefineValue(val) {
     }, {});
   }
 }
+
+const DEFAULT_TS_CONFIG = {
+  compilerOptions: {
+    useDefineForClassFields: true,
+  },
+};
+
+function getTsConfig(opts) {
+  let root = opts.cwd;
+  const tsConfigPath = path.resolve(root, 'tsconfig.json');
+
+  if (fs.existsSync(tsConfigPath)) {
+    try {
+      return parseTsconfig(tsConfigPath);
+    } catch (e) {
+      console.error(
+        'parsing tsconfig.json failed, fallback to default tsconfig\n',
+        e,
+      );
+      return DEFAULT_TS_CONFIG;
+    }
+  } else {
+    return DEFAULT_TS_CONFIG;
+  }
+}

packages/bundler-mako/package.json

@@ -2,13 +2,14 @@
   "name": "@umijs/bundler-mako",
   "version": "0.4.17",
   "dependencies": {
-    "@umijs/mako": "0.4.18-canary.20240521.4",
     "@umijs/bundler-utils": "^4.0.81",
+    "@umijs/mako": "0.4.18-canary.20240521.4",
     "chalk": "^4.1.2",
     "compression": "^1.7.4",
     "connect-history-api-fallback": "^2.0.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
+    "get-tsconfig": "4.7.5",
     "lodash": "^4.17.21",
     "rimraf": "5.0.1",
     "webpack-5-chain": "8.0.1"