[Feature]: build stage 3 decorator with swc in modern.js module

[yf-yang]

What problem does this feature solve?

I'd like to build a module which uses stage3 decorator. In modern.js app + rspack, I can easily configure swc to do so:

export default defineConfig<'rspack'>({
  plugins: [
    appTools({
      bundler: 'experimental-rspack',
    }),
  ],
  tools: {
    swc: {
      jsc: {
        transform: {
          decoratorVersion: '2022-03',
        },
      },
    },
  },
});

However, it seems modern.js module is using esbuild and there is no way to explicitly configure using swc or enable swc for this decorator transform.

Example file you can test with:

function loggedMethod<This, Args extends any[], Return>(
  target: (this: This, ...args: Args) => Return,
  context: ClassMethodDecoratorContext<
    This,
    (this: This, ...args: Args) => Return
  >,
) {
  const methodName = String(context.name);

  function replacementMethod(this: This, ...args: Args): Return {
    console.log(`LOG: Entering method '${methodName}'.`);
    const result = target.call(this, ...args);
    console.log(`LOG: Exiting method '${methodName}'.`);
    return result;
  }

  return replacementMethod;
}

export class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  @loggedMethod
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

What does the proposed API look like?

Maybe use SWC when "experimentalDecorator" of tsconfig is true?

Related: https://modernjs.dev/module-tools/en/guide/advance/in-depth-about-build.html#use-swc

[yf-yang]

Sorry, experimentalDecorator is stage2 decorator. Perhaps it should be explicitly configured.

[fi3ework]

As per #5849. We're going to bump esbuild https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0210.

[yf-yang]

@fi3ework How is everything going on, is it blocked internally or can we track the progress somewhere?

[fi3ework]

@fi3ework How is everything going on, is it blocked internally or can we track the progress somewhere?

Nothing is blocking us internally, only because we lacks enough to implement this feature, feel free to launch a PR to implement if you're interested. We will try to implement this feature within this month.

[yf-yang]

Sorry, could you explain what are the todos? I thought it was just bumping esbuild versions?

[fi3ework]

Yes, it's just bumping, whereas the bumping includes some breaking versions, see (https://github.com/evanw/esbuild/releases). Not sure will it introduce any breaking changes to Modern Module, we need to fix the breaking part if so. And we also better to add a test for the decorator case as the decorator is now a mess in JavaScript ecosystem.

[yf-yang]

Sure, I am confused about the e2e test, where should the module-tool test be?

[fi3ework]

@yf-yang It's here https://github.com/web-infra-dev/modern.js/tree/main/tests/integration/module. I have to admit that I also failed to find this test the first time. 😅