web-infra-dev / modern.js

Modern.js is a web engineering system, including a web framework and a npm package solution.
https://modernjs.dev/en/
MIT License
4.26k stars 351 forks source link

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

Open yf-yang opened 3 weeks ago

yf-yang commented 3 weeks ago

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 commented 3 weeks ago

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

fi3ework commented 2 weeks ago

As per https://github.com/web-infra-dev/modern.js/pull/5849. We're going to bump esbuild https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0210.