带有第 2 阶段提案和 Babel 7 的类装饰器

Question

I am playing with stage-2 decorators proposal and I have found some problems with class decorators. In legacy decorator, the next example works because class decorators took as their only argument a target constructor, but with stage-2 proposal receives a object descriptor.

function log(Class) {
  return (...args) => {
    console.log(`Arguments: ${args}`);

    return new Class(...args);
  };
}

@log
class Bar {
  constructor(name, age) { }
}

I have read the tc39 proposal-decorators and built-in decorators,but it did not help me so much. How can I make this example works with the new proposal decorator? is it possible to use built-in decorators with babel?

To try some stuff, I developed my own basic wrap decorator, it works as expected for methods, and I want to extend its functionality to class.

const wrap = f => {
 return wrapped => {
   const { kind } = wrapped;

   if (kind === 'class') {
     return f(wrapped);
   }
   const { descriptor } = wrapped;
   const original = descriptor.value;

   descriptor.value = f(original);

   return { ...wrapped, descriptor };
  };
};

export default wrap;

With this basic decorator, I can create for example this logger method decorator that works.

import wrap from './wrap';

const loggerFunction = f => {
  const name = f.name;

  return function test(...args) {
    console.log(`starting ${name} with arguments ${args.join(', ')}`);

    return f.call(this, ...args);
  };
};

export default wrap(loggerFunction);

And I can use it by this way:

class Foo {
  @logger
  method(argument) {
    return argument;
  }
}

Answer 1

Your question is a bit old, but I think it is still actual so here is my answer:

TLDR: Use a finisher property to wrap your class when using non-legacy stage 2 decorators.

The stage 2 API is not thoroughly documented and some things and use cases are missing.

In order to achieve what you want, define a special finisher property on the object you are returning in your decorator.

Therefore, this legacy stage-1 decorator code:

function log(Class) {
  return (...args) => {
    console.log(`Arguments: ${args}`);

    return new Class(...args);
  };
}

@log
class Bar {
  constructor(name, age) { }
}

Will be equivalent to this non-legacy stage-2 decorator code:

function log(descriptor) {
  return {
    ...descriptor,
    finisher: (Class) => (...args) => {
      console.log(`Arguments: ${args}`);

      return new Class(...args);
    },
  };
}

@log
class Bar {
  constructor(name, age) {}
}

You can apply the same principle to your wrap function.