带有 JsInterop 的 GWT 中的 Javascript 模块函数答案

【问题标题】：Javascript module function in GWT with JsInterop带有 JsInterop 的 GWT 中的 Javascript 模块函数
【发布时间】：2020-11-02 09:51:56
【问题描述】：

希望这比我做的要容易 - 我是一名 Java 编码员，一些内部 Javascript 方面对我来说有点陌生。

尝试将伟大的CodeJar library 嵌入到 GWT 面板中。 CodeJar 有一个非常好的/简单的示例：

<script type="module">
  import {CodeJar} from './codejar.js'
  import {withLineNumbers} from './linenumbers.js';

  const editor = document.querySelector('.editor')

  const highlight = editor => {
    // highlight.js does not trim old tags,
    // let's do it by this hack.
    editor.textContent = editor.textContent
    hljs.highlightBlock(editor)
  }

  const jar = CodeJar(editor, withLineNumbers(highlight), {
    indentOn: /[(\[{]$/
  })

  jar.updateCode(localStorage.getItem('code'))
  jar.onUpdate(code => {
    localStorage.setItem('code', code)
  })
</script>

模块函数本身如下所示：

export function CodeJar(editor, highlight, opt = {}) { ... }

'editor'是一个Div引用，'highlight'是一个回调库函数，用于处理代码高亮。

我正在与 JsInterop 标记和代码作斗争，以使 Javascript 模块与 GWT 一起工作。以上有一些我正在与之抗争的方面

替换“导入”，以便 javascript 模块代码可用于 GWT。 Obvioulsy 我可以在我的顶级 index.html 中导入 js，但据我了解，JS 模块不会成为全局命名空间的一部分，它们只能从导入它们的 JS 模块中使用。在我的情况下，大概需要是 GWT 代码。
在 GWT 中重新编码时如何传入回调函数
如何获取我自己的“jar”引用来进行自己的文本集/获取（替换使用本地存储）

【问题讨论】：

标签： gwt gwt-jsinterop

【解决方案1】：

要加载脚本并使其可供 GWT 使用，您有（至少）3 种可能性：

在<script type=module> 中使用静态import，然后将CodeJar 函数分配给window 属性以使其全局可用（可能是另一个全局对象而不是@ 987654325@其实）
使用来自 GWT 的动态 import()，使用 JsInterop 和可能的 elemental2-promise
使用 Rollup/Webpack/whatever 将 CodeJar 模块转换为非模块脚本，以便您可以以不同方式使用它

接下来，您需要创建 JsInterop 绑定，以便可以从 GWT 调用它；类似的东西（假设您将 CodeJar 以window.CodeJar 的形式在全球范围内可用，并为HTMLElement 使用elemental2-dom，但com.google.gwt.dom.client.Element 也可以）：

@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "?")
interface CodeJar {
  @JsMethod(namespace = JsPackage.GLOBAL, name = "CodeJar")
  static native CodeJar newInstance(HTMLElement element, HighlightFn highlight);
  @JsMethod(namespace = JsPackage.GLOBAL, name = "CodeJar")
  static native CodeJar newInstance(HTMLElement element, HighlightFn highlight, Options opts);

  void updateOptions(Options options);
  void updateCode(String code);
  void onUpdate(UpdateFn cb);
  void destroy();
}

@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
class Options {
  public String tab;
  public JsRegExp indentOn;
  public boolean spellcheck;
  public boolean addClosing;
}

@JsFunction
@FunctionalInterface
interface HighlightFn {
  void highlight(HTMLElement e);
}

@JsFunction
@FunctionalInterface
interface UpdateFn {
  void onUpdate(String code);
}

使用上面的代码，您应该可以使用以下代码创建编辑器：

CodeJar jar = CodeJar.newInstance(editor, MyHighlighter::highlight);

如果您使用动态import()，请将静态方法替换为@JsType 接口中的实例方法，该接口表示从promise 接收的模块。

【讨论】：