Как украсить класс веб-компонента

Question

Я создаю декоратор @Component, который заменяет конструктор класса для выполнения некоторой работы после построения. Как видно из следующего кода, работа выполняется методом init.

export function Component (Cls) {
  function Class (...args) {
    let self = new Cls (...args); // (1)
    init (self, ...args);
    return self;
  }
  Class.prototype = Cls.prototype;
  return Class;
}

Когда я тестирую этот код в обычном классе, все работает нормально. Это рабочий пример:

class Base { ... }

@Component
class Core extends Base {
  constructor () {
    super (); // init is invoked
  }
  fx () { console.log ('Core.fx') }
  fy () { console.log ('Core.fy') }
}

Тем не менее, когда я пытаюсь украсить веб-компонент, появляется сообщение TypeError: Illegal constructor.

@Component
class Core extends HTMLElement {
  constructor () {
    super ();
  }
  fx () { console.log ('Core.fx') }
  fy () { console.log ('Core.fy') }
}
customElements.define ('x-core', Core);

let coreX = document.createElement ('x-core');
document.body.appendChild (coreX);

Я понимаю, что проблема в том, что HTMLElement не поддерживают прямое построение через оператор new - см. (1) в первом листинге - но мне нужна процедура для украшения конструктора любого класса, даже если они являются пользовательскими элементами.

Какая-то идея?

Рабочие настройки: Chrome 68 · Babel 7.0.0-beta.51 с babel-plugin-transform-decorators-legacy

Answer 1

Вы можете вернуть класс, чтобы избежать прямого new.

function Component(cls) {
  class c extends cls {
    constructor() {
      super()
      console.log(this)//init
    }
  }
  return c
}