如何将I 18下一个浏览器语言检测器绑定到Kotlin？

Question

Gradle项目由JS插件设置：

plugins {
    kotlin("js") version("1.6.10")
}

并使用LEGACY编译后端：

kotlin {
    js(LEGACY) {
        // ...
    }
}

我的目标是在Kotlin源代码中使用以下依赖项：

dependencies {
    implementation(npm("i18next", "21.6.11"))
    implementation(npm("react-i18next", "11.15.4"))
    implementation(npm("i18next-browser-languagedetector", "6.1.3"))
}

很容易描述JS桥接前两个依赖项：

@JsModule("i18next")
@JsNonModule
external val i18next: I18n

external interface I18n {
    fun use(module: dynamic): I18n
}

@JsModule("react-i18next")
@JsNonModule
external val reactI18next: ReactI18next

external interface ReactI18next {
    val initReactI18next: dynamic
}

不幸的是，最后一个-- i18next-browser-languagedetector --用它的配置让我有些抓狂。就像这样：

@JsModule("i18next-browser-languagedetector")
@JsNonModule
external val LanguageDetector: dynamic

不起作用--上面声明提供的实际LanguageDetector是{}，因此i18next不会在Kotlin代码中使用它( JS代码抛出You are passing a wrong module! Please check the object you are passing to i18next.use())：

i18next.use(LanguageDetector) // fails

有人能帮我一下LanguageDetector的JS桥的声明吗？

Answer 1

通过调试，我成功地解决了这个JS桥接问题。工作解决方案是以下声明：

@JsModule("i18next-browser-languagedetector")
@JsNonModule
external val i18nextBrowserLanguageDetector: I18nextBrowserLanguageDetector

external interface I18nextBrowserLanguageDetector {
    @JsName("default")
    val LanguageDetector: dynamic
}

现在可以完成i18next初始化链的第一部分：

i18next
    .use(i18nextBrowserLanguageDetector.LanguageDetector)
    .use(reactI18next.initReactI18next)
    // ...

不幸的是，很难说我得到了它背后的任何直觉(也许是因为我在JS中的巨大盲点)-所以任何额外的澄清或解释仍然是有帮助的。

我最关心的是上面声明中的LanguageDetector应该是一个类，但是似乎没有办法使用其他东西而不是dynamic属性。当我尝试使用@JsName("default")注释标记某些类协议时，它不会编译：

@JsModule("i18next-browser-languagedetector")
@JsNonModule
@JsName("default")
external class LanguageDetector

在这种情况下，也不可能在接口内部使用嵌套类：

@JsModule("i18next-browser-languagedetector")
@JsNonModule
external interface I18nextBrowserLanguageDetector {
    @JsName("default")
    class LanguageDetector
}

所以，虽然它似乎已经解决了，但它仍然令人非常沮丧。