问题标签 [kotlin-js-interop]

我是 JS 和 Kotlin/JS 的新手。我从一个示例中为Obsidian插件提供了以下最小工作 Javascript 代码。它按预期工作：

我希望使用 Kotlin 扩展这个插件，因为我知道这种语言，但是我在将它转换为 Kotlin/JS 时遇到了一些问题。到目前为止我的方法：

可运行项目可以在 Github上找到。运行gradle build以生成构建文件夹。它将在浏览器步骤中失败，但该步骤不是必需的。构建后生成的 js 文件可以在build\js\packages\main\kotlin\main.js.

主文件

编辑：感谢@S.Janssen 的评论，我将模块类型切换为 umd

构建.gradle.kts

我实际上并不需要可以在 中运行的结果browser，但是如果没有browser定义，它甚至不会生成 js 文件。对于该browser部分，抛出异常说Can't resolve 'obsidian' in 'path\kotlin'. 但至少在 .js 下创建了一个 .js 文件build/js/packages/test/kotlin/test.js。然而，该代码与我预期的代码完全不同，并且也不被黑曜石接受为有效的插件代码。我还尝试了其他一些 gradle 选项。像“umd”，“amd”，“plain”，遗留编译器而不是 IR，nodejs 而不是浏览器。但是没有任何东西可以创建可运行的 js 文件。错误消息不同。使用旧版编译器，它需要 kotlin.js 文件，即使我将它放在文件夹旁边或将内容复制到脚本中，它也无法找到。

如何获得与上面发布的 Javascript 代码功能相似的代码？我知道它会产生开销，但是根据我的理解，当前生成的代码甚至没有定义或导出我的类。

我从 obisidan 调试器得到的错误消息：

生成的代码：

在一个基本的 kotlin js 项目中，我导入了firebase依赖项。我使用Dukat来访问类型引用并让它们编译。我的 kotlin 编译起来就像一个魅力，但在我看来，由 webpack 创建的包最终不包含 firebase 库。

我做了什么 ：

• 下载火力基地 ( npm install firebase)
• 在其上运行 Dukat 以生成声明 ( dukat firebase/app/dist/app/index.d.ts)。
• 将生成的文件复制到我的 Kotlin JS 项目中。

经过一些更改，我的 Kotlin 编译良好。然而，在运行它时，我Uncaught ReferenceError: firebase is not defined error在前端面临着一个。这个错误发生在使用 firebase 的代码被调用之前，所以我认为问题来自捆绑。

这是我的堆栈跟踪：

这是我的客户端代码（唯一真正有趣的行是包含initializeApp.

注释掉与 firebase 相关的代码会完全消除错误（但显然也不会添加 firebase 功能）。

我的客户在这里。您可以通过./gradlew run在 sample-firebase 模块中运行来重现。

我已经尝试了很多东西：

• 默认情况下，Dukat 为 Kotlin 声明生成包名称。我试图删除它们，但这似乎对错误没有影响。
• 我试图从我的客户端（`require（“firebase”））直接导入firebase，以确保它被捆绑，但这也没有成功。
• 最后，我还尝试向另一个 npm 包声明一个实现依赖项，并使用文档中描述的自制声明导入这个。这个工作就像一个魅力。
• 该错误也会在运行 javascript 之前发生，因此它看起来像是运行时包的导入问题。

有什么方法可以找到我编译的 Kotlin 声明之间的差异，并且不会抛出错误，而我的前端只是无法导入 firebase？

我想显示一个文件选择器和一个提交按钮。该文件仅在单击按钮后提交。不过，提交/操作目标位于另一台服务器上。我查看了反应示例，​​但我无法弄清楚如何使用 KotlinJS 和 React 实现这一点的确切方法。

formMethod 和 onSubmitFunction 中的重复项只是我尝试并看到什么坚持。我也尝试method = FormMethod.post, encType = FormEncType.multipartFormData直接添加到表单中，但没有帮助。它甚至不输出调试打印。

编辑：我不需要对文件做任何事情，而是想利用默认表单功能进行上传。另一台服务器也是我的，并且有一个简单的 html/http 上传就足够了：

结束编辑

EDIT2：我稍微更改了代码，现在它引用了另一台服务器，但不附加任何文件。

我想解压缩在内存中使用普通 FileInput 上传/选择的文件，并从文本文件中提取数据。

我找到了这个 npm 包：https ://www.npmjs.com/package/unzipper并用

但我真的不知道如何从这里开始，因为 unzipper 只接受 URL 和 Streams。w3c.files.File 对象在那里并被填充，但我真的不知道如何处理它。

我想编写一个返回dynamic以赋值操作结尾的 lambda 函数。以下不进行类型检查：

注意：为了使其最小化，这个例子有些人为。实际上，我需要将此 lambda 分配给XMLHttpRequest.onreadystatechange，因此需要类型。

f() -> Unit删除类型注释时具有类型。为什么不能() -> Unit投到() -> dynamic？

此外，这个示例如何进行类型检查？

f2没有注解的也有类型() -> Unit。为什么f2进行类型检查f而不进行类型检查？

最后，什么是合适的写作方式f？加一个Unitornull在最后，也许？这有效，但看起来相当难看。有没有更好的方法来做到这一点？

我有一堆需要从 Kotlin 代码访问的 Javascript 文件。

我在根项目中创建了一个 js-files 目录，其中包含所需的 .js 文件和一个如下所示的 package.json：

我的 build.gradle 看起来像这样：

我从这篇文章中得到了这个想法。

为了调试，我在 js-files 中有以下 js 文件：

我的 kotlin main 看起来像这样：

但是，当我使用 vrowserDevelopmentRun 运行项目时，我收到此错误：

也许有一种更简单的方法来绑定我的 js 文件，但经过数小时的研究，我一无所获。我很感激任何帮助。

我正在编写一个单元测试，我想将一些由库（KVision）生成的 HTML 与一些预期的 HTML 进行比较。

为此，我想对 HTML 进行格式化，使其布局合理，并且可以轻松比较预期的 HTML 和实际的 HTML。

不一定需要美化 HTML。如果有一些 Kotlin/JS 库可以进行 HTML 比较，以便清楚地报告差异，那就行了！

要求

1. 为了减少维护需求，我更喜欢使用库来解决这个问题，而不是自定义代码。而且我更希望该库位于 Kotlin/JS 中，而不是包装的 NPM 依赖项
2. 格式化程序应该是宽松的，不要试图清理无效的 HTML，这样如果提供或生成了无效的 HTML，测试可能会失败

考试

该测试生成一个 LeafletJS 映射并将其添加到根元素。（我正在为 KVision 开发一项新功能，因此下面的代码尚不可用。）

我使用Kotest进行字符串比较，因为这会在控制台中触发 IntelliJ 的“点击查看差异”链接。

比较

然而，生成的代码是紧凑的 HTML，因此无法看到预期 HTML 和实际 HTML 之间的差异。

我想美化预期和实际的 HTML，以便可以轻松看到差异。

尝试

自定义字符串操作

我尝试在每个右角括号上插入换行符>，虽然一致，但这并不“正确”，并且要求 HTML 属性始终以特定顺序显示，但情况可能并非总是如此。

现在更容易看出差异：

XmlUtil

XmlUtil可用于 Kotlin/JS，并且提到了漂亮的打印和设置缩进，但我认为它需要设置带有注释的类，或自定义序列化策略 - 我不会为整个 HTML 模式这样做！如果 XmlUtil 可以读取 w3c DOM 文档并将其漂亮地打印出来，那就太好了。

kotlinx.html

kotlinx.html - 看起来这既不能解析 w3c DOM 文档，也不能解析 HTML 字符串。

我尝试使用该unsafe { }块（在此处记录），但是虽然使用 DSL 构造的 HTML 元素已格式化，但原始 HTML 未格式化。

我想在Kotlin/JS中编写单元测试，我可以在其中将被测代码与屏幕截图进行比较。这将比 HTML 比较（我之前询问过）要好得多，因为它会更清楚实际和预期的结果是什么，以及差异是什么。

我相信这也称为“快照测试”。

我对 Javascript 生态系统非常不熟悉，我怀疑将其封装在 Kotlin/JS 后面并没有让它变得更容易！

要求

1. 我可以将要测试的 HTML 转换为图像
2. 我可以从磁盘加载预期的图像
3. 我可以比较预期图像和实际图像

我希望答案只需要 Kotlin/JS 浏览器，因为这是我正在使用的库已经在使用的。

项目设置

• 科特林/JS 1.6.10
• Kotlin/JS 的目标是浏览Legacy 器 IR，使用 Karma 和 Chrome Headless 进行测试

我试过的

到目前为止，我专注于捕获图像，而不是加载预期的图像或生成比较。

html2canvas

KodeinKoders/Kodein-Code2Image有一个例子，其中html2canvas 确实有效！但是当我在单元测试中尝试过它时，它会产生一个完全空白的屏幕截图。这可能是在 Chrome 无头测试中使用 html2canvas 的问题吗？

测试

输出

html2canvas Kotlin 外部

我添加了一个 npm 依赖项并创建了以下外部组件以允许 html2canvas 互操作。

傀儡师

Puppeteer 可以截屏……但我不确定如何在 Kotlin/JS 测试环境中配置它。

我看到在kotlin-wrappers项目中配置了 Puppeteer，但是当我尝试复制此配置并运行测试时，它们冻结了。即使这确实有效，我也不确定下一步如何将 Puppeteer 连接到 Chrome 实例，然后启动屏幕截图。

在这个项目中也配置了 Puppeteer：https ://github.com/sakebook/kotlin-js-headless-chrome ，但我不知道如何翻译它，所以它在单元测试期间可用。

主/src/main/kotlin/Main.kt#L86

截屏 API

我没有调查过，但是否可以使用Screen Capture API？

国际广播电台图书馆？命令行参数？

在此页面 https://developers.google.com/web/updates/2017/04/headless-chrome上有很多用于截取屏幕截图的选项，但我不知道如何在 Kotlin/JS 测试期间使用它们。