Как расширить класс JavaScript HTMLElement в ReasonML для веб-компонента? - PullRequest
Новая
       55

Как расширить класс JavaScript HTMLElement в ReasonML для веб-компонента?

0 голосов
/ 08 января 2019

Для следующего кода JavaScript, как я могу написать его в ReasonML? 

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    // Attach a shadow root to the element.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<p>hello world</p>`;
  }
}

Я не смог найти документацию по написанию классов в ReasonML? Я не могу использовать простые объекты / типы, поскольку мне нужно расширять класс HTMLElement, который не работает с классами стиля ES .

Я изучил этот существующий вопрос - Как расширить класс JS в ReasonML , однако это совсем другое. Чтобы написать веб-компонент, нам нужно расширить HTMLElement и вызвать его с ключевым словом new. Механизм расширения стиля ES5 не работает.

1 Ответ

0 голосов
/ 08 января 2019

Вы не можете. По крайней мере, напрямую, поскольку BuckleScript (который Reason использует для компиляции в JavaScript) ориентирован на ES5 и поэтому не знает классов ES6.

К счастью, классы ES6 не требуют специальной поддержки времени выполнения, но реализованы как просто синтаксический сахар, поэтому вы можете перенести ES6 в ES5, как показано в вопросе, на который вы ссылаетесь. Все, что вам действительно нужно сделать, это преобразовать этот преобразованный вывод в ReasonML: 

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var BaseElement = (function (_super) {
    __extends(BaseElement, _super);
    function BaseElement() {
        _super.call(this);
    }
    return BaseElement;
}(HTMLElement));

И в зависимости от того, какие конкретные классовые функции вам действительно нужны, вы, вероятно, можете немного упростить его.

...