如何在 ReasonML 中为 Web 组件扩展 JavaScript HTMLElement 类？答案

【问题标题】：How to extend JavaScript HTMLElement class in ReasonML for web component?如何在 ReasonML 中为 Web 组件扩展 JavaScript HTMLElement 类？
【发布时间】：2019-01-09 12:14:56
【问题描述】：

对于下面的 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 中编写类的文档？我不能使用普通对象/类型，因为我需要从不适用于ES style classes 的 HTMLElement 类扩展。

我已经研究过这个existing question - How to extend JS class in ReasonML 但是，这是另一回事。要编写 Web 组件，我们需要扩展 HTMLElement 并且必须使用 new 关键字调用它。 ES5 样式扩展机制不起作用。

【问题讨论】：

How to extend JS class in ReasonML的可能重复
@Yawar，我不认为它是重复的。它专门针对 Web 组件扩展原生 HTMLElement 类。
嗨，Harshal，如果您要扩展 JavaScript 类，据我所知，我的链接答案是唯一的方法。我还在我的链接答案中提到你必须做两件事：在[%%bs.raw ...] 的类中扩展；然后从 Reason 端绑定到它。绑定到它，例如构造函数，将允许您让 Reason 输出必要的new HelloWorld() 调用。
顺便说一句，我刚刚更新了该答案以明确显示绑定，希望对您有所帮助。
谢谢@Yawar。我读了你的更新答案。它有效，但失去了理性。做这个练习的重点是编写 stencil.js 之类的 web 组件编译器，具有 reasonml 的美感。

标签： class ffi reason bucklescript

【解决方案1】：

你不能。至少不是直接的，因为 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));

根据您实际需要的特定类功能，您可以稍微简化一下。

【讨论】：

感谢您的信息。我是这么想的。我已经试过了。但是，在为 Web 组件扩展时，它不适用于 HTMLElement 类。它需要使用new 关键字调用。我刚刚更新了我的问题。
有趣。我认为@Yawar 在建议使用bs.raw 的重复问题中的回答是当时唯一的解决方法。您可能还必须输出 es6 而不是 commonjs。
是的，似乎是这样。不幸的是，我失去了理智和bs的善良。