How to support i18n with kotlin js

coffeLord

i'm currently trying to add i18n support to a kotlin js project (no react).

return document.create.div {
        span("mid-title") {
            +i18n here (ResourceBundle.getBundle()?)
        }....
  • Added resource bundle files (strings.properties, strings_en.properties)
  • Tried to get them via ResourceBundle.getBundle <- kotlin doesn't know how to use
  • Found a github but dont like that approach

So is there a convenient way that works with kotlin js?

Update:

 fun loadJSON(callback: (response: String) -> Unit) {
    val xobj = XMLHttpRequest()
    xobj.overrideMimeType("application/json")
    xobj.open("GET", "test.json", true)
    xobj.onreadystatechange = {

        if (xobj.readyState.toInt() == 4 && xobj.status.toInt() == 200) {
            // Required use of an anonymous callback
            // as .open() will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    }
    xobj.send(null)
}

Update 2:

Got it now

So like I wrote before i'm using javascript to load the file. After that I have the Json object where I can get the value by key. I've also added an overload to replace arguments in the string. Further I've added an MuatableStateFlow var to observe the loading state of the language. But keep in mind that this concept always needs to run on a server. Locally you get a CORS error

coffeLord
class LanguageSupport(private val folder: String = "", private val lang: String) {
    private lateinit var currentLang: Json

    private val languageMutableStateFlow = MutableStateFlow<LanguageSupportState>(
        LanguageSupportState.LanguageInit
    )
    val languageStateFlow: StateFlow<LanguageSupportState> = languageMutableStateFlow

    init {
        loadJSON()
    }

    fun get(key: String): String {
        val value = currentLang[key]
        check(value != null) {
            throw Exception("key not found to load language definition")
        }
        return if (value is String) {
            value
        } else {
            throw Exception("value of key is not a string")
        }
    }

    fun get(key: String, vararg placeholders: String): String {
        val value = currentLang[key]
        check(value != null) {
            throw Exception("key not found to load language definition")
        }
        return if (value is String) {
            var finalValue: String = value
            for (item in placeholders) {
                finalValue = finalValue.replaceFirst(PLACEHOLDER, item)
            }
            finalValue
        } else {
            throw Exception("value of key is not a string")
        }
    }

    private fun loadJSON() {
        val xobj = XMLHttpRequest()
        xobj.overrideMimeType("application/json")
        xobj.open("GET", "${folder}test_${lang}.json", true)
        xobj.onreadystatechange = {

            if (xobj.readyState.toInt() == 4 && xobj.status.toInt() == 200) {
                // Required use of an anonymous callback
                // as .open() will NOT return a value but simply returns undefined in asynchronous mode
                currentLang = JSON.parse(xobj.responseText)
                languageMutableStateFlow.value = LanguageSupportState.LanguageLoaded
            }
        }
        xobj.send(null)
    }

    companion object {
        const val PLACEHOLDER = "%s"
    }
}

sealed class LanguageSupportState {
    object LanguageLoaded : LanguageSupportState()
    object LanguageError : LanguageSupportState()
    object LanguageInit : LanguageSupportState()
}

And because I use Koin

single { (folder: String, language: String) ->
        LanguageSupport(
            folder = folder,
            lang = language,
        )
    }

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to support multiple i18n endpoint in Aurelia?

How to make flask extensions support i18n?

How to make i18n support filenames in Drupal 7?

How to use Vue i18n translation in .js file?

How to pass parameters to Vue.js i18n <i18n-t> tag

How to add an I18N support to setup file made by the MSIX Packaging Toolkit

Sails.js: how to use i18n function in assets/js/files.js

Nuxt/Vue js - How do I synchronize path field to an i18n variable in router. I did a try but can't get to i18n

How to load i18n Property file using jQuery.i18n.properties.js + Spring 3 mvc

How to localize (i18n) moment.js within meteor.js?

How to make i18n with Handlebars.js (mustache templates)?

Vue.js vuetify i18n : How to translate dynamically the Toolbar items?

How can get a non-trivial i18n translation to work using Sails.js?

Vue.js how to get current locale in i18n language package

How do I update translated text when changing a language in a Vue.js app with i18n and Pinia?

How to handle i18n in Go?

How i18n works in Javascript?

how to use i18n to gatsby?

How make i18n for vuetify

how to pass a variable to i18n

How to Internationalize Sphinx (i18n)

i18n support for Golang Web application HTML templates

Does Angular i18n support Devanagari digits?

matplotlib in gtk window with i18n (gettext) support

Angular 2+ localization (i18n) rtl support

How to "pull out" styled HTML tags from I18N properties files with Makara module for Express and Kraken.js?

I18n::InvalidLocaleData: I18n gem has issues in js export

node.js i18n: Use __ or import?

Vue.js: loop on <i18n> tag