is there guide how to write kotlin bindings for npm projects manually. dukat is giving me errors.

Hi mates. I wonder if I can use JQuery with K/JS. Is there some type bindings for that? Saw something in @Robert Jaros's kvision, but I assume that's an unrelated stuff for the topic and I can't use it for standalone applications.

message has been deleted

is there sample application which works newer version of kotlin-react wrappers

I am getting below error when i am generate bindings for https://github.com/ukrbublik/react-awesome-query-builder

> Task :jsGenerateExternals
Exception in thread "main" java.lang.StackOverflowError
        at java.base/java.util.HashMap.hash(HashMap.java:339)
        at java.base/java.util.LinkedHashMap.getOrDefault(LinkedHashMap.java:452)
        at org.jetbrains.dukat.tsLowerings.TypeSpecifierLowering.spec(TypeAliasContext.kt:20)
        at org.jetbrains.dukat.tsLowerings.TypeSpecifierLowering.lowerParameterValue(TypeAliasContext.kt:39)
        at org.jetbrains.dukat.tsLowerings.DeclarationLowering$DefaultImpls.lowerUnionTypeDeclaration(DeclarationLowering.kt:132)
        at org.jetbrains.dukat.tsLowerings.TypeSpecifierLowering.lowerUnionTypeDeclaration(TypeAliasContext.kt:15)

Trying to use Motion-Framer to animate my components, the API looks like this

<motion.div 
   animate= {{x: [50, 0], opacity: [0,1]}} // X will go from 50% to 0%  and opacity from 0% to 100%

I tried to translate the animate property with dynamics

val animate = js("{}")
animate.x = listOf(50, 0)
animate.opacity = listOf(0, 1)

When it gets converted to JS, the lists are ArrayLists instead of what I'd expect to be a List and even adding

.toList

results in the same transformation. For some reason this doesn't work, and I have to use

animate.x = js("[50,0]")
animate.opacity = js("[0,1]")

For it to work as expected , which doesn't allow me to pass parameters as

js()

only accepts string literals

1.5.31

Kotlin

Hello. Is it possible to configure the webpack config from a gradle plugin? Otherwise every user that wants to use the plugin has to copy the config into their project webpack.config.d

Another question: Is there any way I can get access to a package from NPM which is purely ESM. Im currently looking at this package: https://www.npmjs.com/package/bcp-47

Hello all, has anybody had performance issues with kotlin-js, as per this bug?: https://youtrack.jetbrains.com/issue/KT-24784

Hi all, wondering anyone here worked on consuming kotlin code in React without kotlin-react-wrappers. I’m looking for a more elegant way to consume a

Flow<State>

with a reach-hook

What are people using for testing react? I found an old enzyme wrapper in a repo but I'm curious to hear from the community. Thanks!

Is there kotlijs wrapper for https://immutable-js.com/

Hi everyone! The html5 spec allows for arbitrary custom tag names like <myPlaceholder/> Is there a way with the KotlinJS html builder to define arbitrary tag names like this? Having trouble finding an appropriate method. Thanks

what is the correct way to JsExport suspend functions? this is not supported:

@JsName("blah2")
suspend fun blah2() {

should I GlobalScope its insides or is there a cleaner way?

@JsName("blah2")
fun blah2() {
   GlobalScope.launch {
      flow.collect {
         println(it)
      }     
   }
}

there are 3 ways to work with CSS:

kotlin-csstype

,

kotlin-css

and I think sometimes I need to use dynamic JS object. Are there any plans to unify it? 😅 it's especially inconvenient when both

kotlin-csstype

and

kotlin-css

has the same names of functions and need to be imported in the same file, e.g. when using React and Styled Components in the same component

just got bitten by the

colors

thing. is there a way i can pin a version of a library that is included by a dependency indirectly through npm? i know in jvm lang you can force pin a transitive dependency but not sure that works for npm

I have a new error in the configuration phase of my kmp project

Could not determine the dependencies of task ':kotlinNodeJsSetup'.
> Could not resolve all files for configuration ':detachedConfiguration1'.
   > Could not download node-14.17.0-darwin-x64.tar.gz (org.nodejs:node:14.17.0): No cached version available for offline mode

Possible solution:
 - Disable offline mode and rerun the build

found this bug which looks similar. I am on kotlin 1.5.31 - is the only sloution to upgrade to kotlin 1.6? maybe it not a problem but just might be some work. https://youtrack.jetbrains.com/issue/KT-49109

Hello all, I am attempting to bring our existing Kotlin library to our JS project, I have searched through the history of this channel for "npm library" and i am able to produce a

build/js

output via

./gradlew build

. i have tried to link the

build/js

folder via

yarn link

and i also tried to npm install it by adding the absolute path to the package.json of the js project. However i am getting the error

Error: Can't resolve '@js-joda/core' in home/node/jsProject/node_modules/kotlinProject/kotlin

. I think i am not installing the dependencies correctly in the

build/js

folder when i used

./gradlew build

Hi, I need to sort a list of strings "german-style" in Kotlin/JS. This means, considering Umlauts and the letter "ß" (located between "s" and "t". Many SO-Comments recomend using java.text.Collator but I wonder if there is a js-way to do it since I cannot use the java imports due to project constraints. e.g.: listOf("Ä", "a", "A", "s", "ß", "?", "1", "2", "3") will be sorted as [1, 2, 3, ?, A, a, s, Ä, ß] but actually I need the following order [1, 2, 3, ?, A, a, Ä, s, ß]. In SQL, COLLATE utf8mb4_german2_ci would do the trick. Does anybody know how I could get the same result using kotlin/js?

Any documentation on this from the changelog:

KT-34014 Gradle, JS: Ability to persist / reuse yarn.lock

?

Hi! Trying to figure out how to use

historyApiFallback: true

in webpack config. My webpack.config.d/03.devServer.js looks like this (copy from previous versions of full-stack-web-jetbrains-night-sample (current one doesn't work )):

// wrap is useful, because declaring variables in module can be already declared
// module creates own lexical environment
;(function (config) {
    const shouldRunServer = config.mode !== "production"
    const serverTaskName = ":server:devServer"
    const serverUrl = '<http://localhost:8081>'
    const path = require('path')

    if (shouldRunServer) {
        console.log("Running " + serverTaskName + " in background...")
        // __dirname = $ROOT/build/js/packages/$PACKAGE_NAME
        // rootProject = $ROOT
        const rootProject = path.resolve(__dirname, '../../../../')
        const child = require('child_process').exec(
            "." + path.sep + "gradlew " + serverTaskName,
            {
                "cwd": rootProject
            },
            (err, stdout, stderr) => {
                if (err) {
                    console.log("Cannot run " + serverTaskName + " server: " + err);
                }
            }
        )

        let isBackendRun = false

        config.devServer = config.devServer || {}
        config.devServer.onBeforeSetupMiddleware = function (server) {
            if (isBackendRun) return

            isBackendRun = true

            const originalClose = server.middleware.close;
            server.middleware.close = function () {
                child.kill('SIGINT');
                originalClose(arguments)
            }
        }
        config.devServer.proxy = {
            '/': {
                target: serverUrl,
                secure: false,
                bypass: function (req, res, proxyOptions) {
                    if (req.headers.accept.indexOf('.js') !== -1) {
                        return req.headers.accept;
                    }
                }
            }
        }
        
    }
    config.devServer = {
        ...config.devServer,
        historyApiFallback: true,
    }
    // config.devServer["historyApiFallback"] = true // doesn't work too
})(config);

I need it for react routing to be able to work with reloading and using external url. Am I missing something and it should be in another place or smth else?

I tried adding npm dependencies but got this error, what does it mean? Using kotlin/js 1.5.31 https://www.toptal.com/developers/hastebin/poduvocuno.log my dependencies block:

dependencies {
    implementation(compose.web.core)
    implementation(compose.runtime)

    implementation("io.ktor:ktor-client-core:1.6.7")

    // From <https://github.com/gzoritchak/kotlin-js-sass>
    implementation(npm(projectDir.resolve("src/main/sass")))
    implementation(devNpm("node-sass", "^4.12.0"))
    implementation(devNpm("sass-loader", "^7.1.0"))
    implementation(devNpm("css-loader", "^4.2.0"))
    implementation(devNpm("style-loader","^1.2.0"))

    implementation(project(":common"))
}

is there any workaround for kotlin-csstype: cannot specify Filter other than none ? I imagine being able to add any CSS property with any value

HI TechGeeks, I am trying to inject value from the android web view in the EditText field after injection, clicking on a button to download a file from android. The value gets empty and the website says to enter a value. I’m able to inject EditField from android on the whole page.  So the problem is the last editField getting empty while clicking on the download button.  In the background, I can see website is sending an event by clicking on the download button. Once the download button is clicked then one function is triggered and that function reads the value from the event function. If an event is not there then the edit field gets empty and it does not capture the inject value from the edit field.  Anyone can help me with this. I tried set the value in console from browser and hit download button using document.getElementById(‘btn_name’).click(). when ever Download button click the edit value gets empty. While entering the value manually it’s working perfectly. I need to inject value from code and hit the download button from code using javaScript. Please help with this. #javascript

Hi everyone! Has anyone got a hack for getting console errors to reference source map lines so that debugging runtime errors is a little easier? Right now I just get things like a giant CCE error blob and have to go hunting.

JS in a gradle multi module project and using kotlin multiplatform: How do you config js webpack? I created a new folder in my root project:

webpack.config.d

containing the config.js files, but I still get his error:

Execution failed for task ':web:jsBrowserProductionWebpack'.
> Module not found: Error: Can't resolve 'path' in '/Users/philipwedemann/GitHub/ComposeTodo/build/js/node_modules/sql.js/dist'

I want to use npm dependency

@material/textfield

in my project https://www.npmjs.com/package/@material/textfield I have added the following dependency as

implementation(npm("@material/textfield", "13.0.0")

But after that, I am not able to understand, how to create the an adapter file for this Its not a simple function Does anyone here have similar problem or used npm dependency in kotlin web ?

Kotlin/JS builds are broken due to jcenter failure (Could not get resource 'https://jcenter.bintray.com/com/yarnpkg/yarn/1.22.10/yarn-1.22.10.pom'.) Is there an issue for this to be fixed in the future?

implementation(enforcedPlatform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:${kotlinWrappersVersion}"))

I am not able to see

enforcedPlatform

in build.gradle.kts Do I have to use any other plugin as well ? cc @turansky This is from the kotlin-wrappers library