[Bug]: When using the decorator syntax, the build product is incorrect and does not work properly in @modern-js/[email protected]

[targeral]

Version

npmPackages: @modern-js/[email protected]

Details

The use of swc transform in @modern-js/[email protected] has resulted in a change in the handling of class. When using the decorator syntax, the product behaves in a way that is not expected during runtime.

Should need to support behavior similar to typescript's useDefineForClassFields configuration.

Related Links:

• https://www.typescriptlang.org/tsconfig#useDefineForClassFields
• https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier
• https://www.typescriptlang.org/play?useDefineForClassFields=true&target=9#code/PTAEAEBcEMCcHMCmkBcpEGcBMAGLWAoECAVw0QBFEAzASwDtEAxAe1gGEAbaDDJ2xJwAmGNJFglEBAMbdeoVi1ABvAqFAAPUAF5QARgDcBAL5A
• https://www.typescriptlang.org/play?useDefineForClassFields=true&target=7#code/PTAEAEBcEMCcHMCmkBcpEGcBMAGXAoECAVw0QBFEAzASwDtEAxAe1gGEAbaDDRmxDgBMMaSLGKJ8AYy49QLZqADe+UKAAeoALygAjAG58AXyA

Handling of this configuration by swc and esbuild：

• Inconsistent useDefineForClassFields behavior swc-project/swc#6985
• --target=esnext --tsconfig-raw='{"compilerOptions": { "target": "es2021" }}' will default useDefineForClassFields to true evanw/esbuild#2584

Reproduce link

none

Reproduce Steps

Demo Code:

import 'reflect-metadata';

function Service(options?: {}): any {
  return (target: any): any => target;
}

class AbstractLine {
  constructor() {}
}

@Service()
class Line extends AbstractLine {
  private b: string;

  constructor(private a: string) {
    super();
  }
}