标签: kotlin-js-interop

目前正试图通过命令行将Kotlin"Hello,World"编译为JS.我按照教程:

https://kotlinlang.org/docs/tutorials/javascript/getting-started-command-line/command-line-library-js.html

我看到正在生成的Javascript文件,但我错过了kotlin.js我期望看到的文件:https: //kotlinlang.org/docs/tutorials/javascript/kotlin-to-javascript/kotlin-to-javascript html的

生成的JS文件的前几行读取: if (typeof kotlin === 'undefined') { throw new Error("Error loading module 'sample-library'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'sample-library'."); }

所以很明显,它意味着要运行一个实例化的文件kotlin.任何想法为什么我没有看到它？我完全按照书面的说法完成了教程.我正在使用自制程序中最新版本的编译器,即1.1.2.2

有没有什么方法可以在没有WebView的情况下从Kotlin调用JS函数？

让我们说如下所述我helloJS()在test.js文件中有一个JS函数,

test.js: -

function helloJS(){
    return "Hello from JS"
}

现在我想从Kotlin文件中调用此函数

TestClass.kt: -

class TestHello{

    fun getHelloFromJS(){
        val name = test.helloJS()
    }
}

直到现在我正在使用Webview并将JS文件加载到该文件中并将结果作为回调获取

但是,我读到Kotlin可以像JS那样与JS互操作

所以我很想知道在没有webView的情况下我们是否可以在Android上使用它

如果我有一个名为如下的 JavaScript 文件myfile.js：

function myJsFunc() { return "Hello from JavaScript"; }

如何将此文件导入 Kotlin/JS 项目并myJsFunc()从 Kotlin 代码调用？

我的目标是编写一个Kotlin库，将其编译为WebAssembly并从JS调用其功能。几个小时以来，我一直在努力建立一个简单的问候世界。关于此主题的文档不存在或隐藏得很好。

这是我的kotlin文件：

@Used
public fun hello() {
    println("Hello world!")
}

fun main(args: Array<String>) {
    println("main() function executed!")
}

当我将其编译为WebAssembly时，会得到一个hello.wasm和hello.wasm.js文件。

首先，我尝试使用如下代码来执行该功能：

WebAssembly.instantiateStreaming(fetch('hello.wasm'), importObject)
    .then(obj => obj.instance.exports.hello());

然后，我了解到需要在importObject参数中传递来自hello.wasm.js文件的导入。所以我想我需要使用hello.wasm.js文件正确初始化wasm程序。

当像下面那样加载wasm时，没有任何错误，并且执行了main（）函数。

<script wasm="hello.wasm" src="hello.wasm.js"></script>

但是，如何从JavaScript 执行hello（）函数呢？我发现的唯一Kotlin wasm示例不是调用特定函数，而是从main（）函数渲染某些内容。

此外，非常感谢与相关文档的任何链接。

更新： 我设法执行了该函数，但是我不相信这是正确的方法：

<script wasm="hello.wasm" src="hello.wasm.js"></script>
<script>
WebAssembly.instantiateStreaming(fetch('hello.wasm'), konan_dependencies)
        .then(obj => obj.instance.exports['kfun:hello$$ValueType']());
</script>

问题是，如果我这样做，我的wasm文件将被提取两次。

仅加载没有wasm属性的hello.wasm.js文件会给我以下错误：

Uncaught Error: Could not find the wasm attribute pointing to the WebAssembly binary.
    at …

我在1.0.x中使用了Kotlin不受支持的JavaScript后端,现在我正在尝试将我的玩具项目迁移到1.1.x. 它是与PouchDB连接的单页Web应用程序的最基本骨骼.要添加到PouchDB你需要具有特殊性能的JavaScript对象数据_id和_rev.他们还需要没有任何其他属性,_因为它们是由PouchDB保留的.

现在,如果我创建这样的类,我可以将实例发送到PouchDB.

class PouchDoc(
        var _id: String
) {
    var _rev: String? = null
}

但是,如果我做任何事情来使属性成为虚拟 - 让它们覆盖一个接口,或者让类打开并创建一个覆盖它们的子类 - _id字段名称会变成类似的东西_id_mmz446$_0,因此PouchDB会拒绝该对象.如果我应用于@JsName("_id")属性,那只会影响生成的getter和setter - 它仍然会在后备字段中留下一个受损的名称.

此外,对于名称不以其开头的任何虚拟属性_,PouchDB将接受该对象,但它仅存储带有损坏名称的支持字段,而不是名称很好的属性.

我认为现在我可以通过使它们不虚拟来解决问题.但我想在Kotlin中分享PouchDoc和非PouchDoc类之间的接口,似乎我做不到.

知道我怎么能做这个工作,还是需要Kotlin语言改变呢？

我正在尝试在我的create-react-kotlin-app中使用这个lib :

https://material-ui-next.com/

我想生成一堆类型的安全包装器.我开始是这样的:

@file:JsModule("material-ui")

package material

import react.RState
import react.React
import react.ReactElement

external class Typography : React.Component<dynamic, RState> {
    override fun render(): ReactElement
}

...

fun RBuilder.typography(
    classes: String = "",
    variant: Variant = Variant.body1,
    align: Align = Align.inherit,
    color: Color = Color.default,
    gutterBottom: Boolean = false,
    noWrap: Boolean = false,
    paragraph: Boolean = false,
    handler: RHandler<dynamic>
) = child(Typography::class) {
    attrs {
        this.className = classes
        this.align = align.name
        this.color = color.name
        this.variant = variant.name
        this.gutterBottom = …

我在KotlinJs项目中创建的每个函数和变量都进入了一个模块.但我需要在全球范围内定义一些功能.

我使用p5js库(纯js).它允许用户在全局范围内定义事件处理函数.我正在尝试在这个项目中使用KotlinJS.但我不知道如何创建全局函数来处理p5js的事件.我所有的Kotlin函数都在模块内部.要调用我的Kotlin代码,我需要指定全名mymodule.draw()

目前,我必须使用全局函数创建一个额外的纯JS代码层,将执行转换为kotlin函数,如下所示:

function setup() {
    mymodule.setup();
}

function draw() {
    mymodule.draw();
}

这种方法的问题是很多样板和重复代码.

我是 JS 和 Kotlin/JS 的新手。我有以下来自示例的黑曜石插件的最小工作 Javascript 代码。它按预期工作：

var obsidian = require('obsidian');
class SomePlugin extends obsidian.Plugin {
    onload() {
        new obsidian.Notice('This is a notice!');
    }
}
module.exports = Plugin;

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

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

主程序.kt

@JsExport
class SomePlugin: Plugin() {
    override fun onload() {
        Notice("This is a notice!")
    }
}
@JsModule("obsidian")
@JsNonModule // required by the umd moduletype
external open class Component {
    open fun …

鉴于此代码，我应该将 file.json 放在哪里才能在运行时中找到？

// path: src/main/kotlin/Server.kt
fun main() {
  val serviceAccount = require("file.json")
}

我试着把它放在 src/main/resources/ 下，但没有运气。我还使用 Gradle 将 kotlin 编译为带有kotlin2js插件的js 。

考虑以下 javascript 代码（部分取自 Apollo Server 文档），它创建 ApolloServer 的实例并启动它。

const {ApolloServer} = require('apollo-server')

const server = new ApolloServer({ ... });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

现在考虑使用 KotlinJS 复制相同的行为。首先，Kotlin 没有“new”关键字并且ApolloServer()按预期调用，不会工作但会引发错误（类型错误：类构造函数 ApolloServer 不能在没有“new”的情况下被调用）。

// We can banally represent part of the code above like:
external fun require(module: String): dynamic
val ApolloServer = require("apollo-server").ApolloServer

// ApolloServer is a js class

声明一个外部类，如：

external open class ApolloServer() {
    open fun listen(vararg opts: Any): Promise<Any>
    operator fun invoke(): Any
} …