Another Kotlin/JS question, regarding how best to orchestrate gradle to build the

productionLibrary

for publishing? I have attempted to do the following:

tasks.getByName("publishJsNpmPublicationToNpmjs") {
            dependsOn(tasks.getByName("jsBrowserProductionLibraryDistribution"))
            doLast {
val jsDir = buildDir.resolve("productionLibrary")
...
}

But

jsBrowserProductionLibraryDistribution

does not create

productionLibrary

. Any clues to what does?

Hey peeps! After upgrading Kotlin from 1.6.10 to 1.6.21 recently, our exported TypeScript definitions are broken for some cases. It’s mostly about Kotlin generating nested comments inside method signatures, e.g.

/* kotlin.collections.List<any/* com.company.manager.data.ApiAnswer */> */

). The inner comment closing statement (

*/

) will make the outer comment closing appear as regular code and thus generate a syntax error in TypeScript. I’ll put a slightly more complete example in the thread. Did anyone have any issues like that, or is there any related entry in the issue tracker? I haven’t found anything so far, but can’t imagine that I’m the only one with totally broken TypeScript definitions. 🤔

Has anybody experience with plotly.kt on frontend side? I am working on a multiplatform app and am trying to add the plotly.kt dependencies to the frontend (react/js). I am not able to use this example here: https://github.com/mipt-npm/plotly.kt/blob/master/examples/js-demo/build.gradle.kts, I think “implementation(project(“:plotlykt-core”))” is wrong for me. My Setup is also with Kotlin 1.7 which might be a problem too.

Strange question. Anyone ever tried building a VSCode extension using Kotlin.js?

Doodle 0.8.0 Released 3D Transforms Views can now have full 3D transformations via their

transform

property. This works because

AffineTransform

has been updated to support scale, rotation, and translations that involve x, y and z axes. The result is that Views can now be placed in a full 3D space by simply giving them a transform that has been modified accordingly.

import io.nacular.doodle.drawing.AffineTransform.Companion.Identity
import io.nacular.measured.units.Angle.Companion.degrees

// Rotate this View around they y-axis (through its center) by 45°
view.transform *= Identity.rotateY(around = view.center, by = 45 * degrees)

Views can also now render in 3D, since

Canvas

also supports the new 3D transforms.

view {
    render = {
        transform(Identity.rotateY(by = 45 * degrees)) {
            // ...
        }
    }
}

3D Perspective A realistic 3D space requires more than just affine transforms (which keep parallel lines parallel). Simulating this requires perspective transforms. Views now have a

camera

property, which gives them a perspective when combined with a 3D transform. The following allows the y-axis rotation to look more realistic.

import io.nacular.doodle.drawing.AffineTransform.Companion.Identity
import io.nacular.measured.units.Angle.Companion.degrees

// Rotate this View around they y-axis (through its center) by 45°
view.transform *= Identity.rotateY(around = view.center, by = 45 * degrees)

// Position the View's camera to apply some realistic perspective warping
view.camera = Camera(position = view.center, distance = 1000.0)

Canvas also takes a

Camera

in its

transform

method to enable perspective.

view {
    render = {
        transform(Identity.rotateY(by = 45 * degrees), camera = Camera(Origin, distance = 1000.0)) {
            // ...
        }
    }
}

Kotlin 1.7 Support Doodle now supports 1.7.10!! https://github.com/nacular/doodle/releases/tag/v0.8.0

so regarding tooling: I've got massive tooling pains dealing with module definitions, ts, webpack and ts-jest; will this go away when I go with Kotlin? Or will it be worse since it's another tool on top of webpack

My js tests tasks are failing with no insights at all, all I am getting is

Cause: command '/home/andylamax/.gradle/nodejs/node-v16.13.0-linux-x64/bin/node' exited with errors (exit code: 1)

Is there a way to at least get the logs of node to see what went wrong? Also, this is after I upgraded to 1.7.0. Anyone met this problem? how did you solve it?

Is there a workaround for exporting things nested under an interface other than making the interface a class - https://youtrack.jetbrains.com/issue/KT-52800

I have a multiplatform library (only common code) and I'm targeting Android and iOS. My web team is now asking to target js as well, so they can use the library in their regular javascript codebase. I added the target like this:

js(IR) {
      if(jsModuleName != null) {
        moduleName = jsModuleName
      }

      useCommonJs()

      browser {
        webpackTask {
          output.libraryTarget = "commonjs2"
        }

        if(isJsLeafModule) {
          binaries.executable()
        }
      }
}

What do I do now in terms of getting a javascript file that I can share with my web team?

Is there any way to strip the package from anything exported with

JsExport

?

Anyone know if this is considered a bug, or working as intended? https://youtrack.jetbrains.com/issue/KT-52800

This message was deleted.

Hi everyone! I'm planning to work on improving experience with web workers in Kotlin JS. So, it is very important for me to know the opinion of the community. Please, share your problems, wishes and thoughts regarding the following topics: • web workers generally • coroutines in Kotlin JS • concurrency in JavaScript (your experience with libraries, use cases etc.) For more information about this feature you can read design notes: https://github.com/Kotlin/KEEP/blob/master/notes/web-workers.md

Hi all, I’m having an issue with setting environment variables in

build.gradle.kts

to pass as arguments to

webpack-cli

. This is working fine in webpack 4, but I’m trying to upgrade to webpack 5. The following works for webpack 4:

Hi all, I’m having an issue with setting environment variables in

build.gradle.kts

to pass as arguments to

webpack-cli

. This is working fine in webpack 4, but I’m trying to upgrade to webpack 5. The following works for webpack 4:

kotlin {
    js {
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true
                mode = buildMode
                // stop default export of config object in Webpack code because we do it in 02.envConfig.js webpack extension
                export = false
            }

            // from <https://discuss.kotlinlang.org/t/kotlin-js-react-accessing-configuring-environment-variables/16906/9>
            val envTargetWebpackArgs = listOf("--env.envTarget=$envTarget", "--env.version=$version")
            webpackTask { args.plusAssign(envTargetWebpackArgs) }
            runTask { args.plusAssign(envTargetWebpackArgs) }
        }

        // Necessary to fix a compilation issue (see <https://github.com/Kotlin/dukat/issues/106>)
        useCommonJs()
    }

    // Force explicit APIs
    explicitApi()
}

With the key lines being:

Hi, I have a question about suspend function in JS Is there a way to sync asynchronous code in Kotlin/JS? In koltin/JVM we can use

runBlocking

Something like this (not working of course)

fun notSuspendedFunction(block: suspend () -> T): String {
   
  val result = await block() // or runBlocking { block() }
 
  return result
}

I'm okay with something like this (not working of course):

fun notSuspendedFunction(block: suspend () -> T): String {
  val job = GlobalScope.async { block() }

  while(job.isCompleted) { /* may be set timeout or something with delay */ }

  return job.getCompleted()
}

Kotlin 1.7.x compiler seems to duplicate a path if I configure

moduleName

in my modules inside

JS(IR) {}

.

js(IR) {
    moduleName = "@myCompany/${project.name}"
    nodejs()
    useCommonJs()
    binaries.executable()
    ...
}

Executing

:assemble

, the task

:myModule:compileProductionExecutableKotlinJs

crashes with:

/Users/repo/myModule/build/compileSync/main/productionExecutable/kotlin/@myCompany/@myCompany/moduleName.js (No such file or directory)

Note duplicated “/@myCompany/@myCompany/“. This wasn’t the case with Kotlin 1.6.21 and earlier versions.

Is there an easy fix for this? I'm just using the [multiplatform] build.gradle.kts that intellij generated for me, my level of gradle sophistication is "copy and paste from stackoverflow"

Execution optimizations have been disabled for task ':jsBrowserProductionRun' to ensure correctness due to the following reasons:

- Gradle detected a problem with the following location: 'E:\Projects\sketches-js\build\js\packages\sketches-js\kotlin\sketches-js.js'. Reason: Task ':jsBrowserProductionRun' uses this output of task ':jsProductionExecutableCompileSync' without declaring an explicit or implicit dependency. This can lead to incorrect results being produced, depending on what order the tasks are executed.

relatedly, is there a list of what the different js gradle targets do? i couldn't find one in the docs, and I have not been able to guess from the names, e.g. I would not expect jsProductionRun to generate something that shows a big black overlay listing the compiler warnings

how does one diagnose errors that only say?

Execution failed for task ':jsNodeTest'.
> command '/media/andylamax/Auxilliary/Devspace/.gradle/nodejs/node-v16.13.0-linux-x64/bin/node' exited with errors (exit code: 1)

Hi all. I’m trying to upgrade from webpack 4 to webpack 5 and I’m having an issue with setting environment variables in build.gradle.kts to pass as arguments to webpack-cli. The following works for webpack 4:

kotlin {
    js {
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true
                mode = buildMode
                export = false
            }

            // from <https://discuss.kotlinlang.org/t/kotlin-js-react-accessing-configuring-environment-variables/16906/9>
            val envTargetWebpackArgs = listOf("--env.envTarget=$envTarget", "--env.version=$version")
            webpackTask { args.plusAssign(envTargetWebpackArgs) }
            runTask { args.plusAssign(envTargetWebpackArgs) }
        }

        useCommonJs()
    }

    explicitApi()
}

With the key lines being:

val envTargetWebpackArgs = listOf("--env.envTarget=$envTarget", "--env.version=$version")
webpackTask { args.plusAssign(envTargetWebpackArgs) }
runTask { args.plusAssign(envTargetWebpackArgs) }

The new way of passing env variables in webpack-cli v4 (which is what webpack 5 uses as far as I understand) is to have a space instead of a

.

(i.e.

--env envTarget=$envTarget

instead of

--env.envTarget=$envTarget

) Neither the old way nor new way seem to work. The

webpack.config.js

file is not generated in the build directory. Both old and new env arg options error in

:browserProductionWebpack

with

Starting process 'command '/Users/cameron/.gradle/nodejs/node-v16.13.0-darwin-x64/bin/node''. Working directory: /Users/cameron/IdeaProjects/app/build/js/packages/app Command: /Users/cameron/.gradle/nodejs/node-v16.13.0-darwin-x64/bin/node /Users/cameron/IdeaProjects/app/build/js/node_modules/webpack/bin/webpack.js --env.envTarget=DEV --env.version=2.3.7 --config /Users/cameron/IdeaProjects/app/build/js/packages/app/webpack.config.js
Successfully started process 'command '/Users/cameron/.gradle/nodejs/node-v16.13.0-darwin-x64/bin/node''
[webpack-cli] Error: Unknown option '--env.envTarget=DEV'
[webpack-cli] Run 'webpack --help' to see available commands and options

But, when I go to the above working directory and execute that command it runs without failing and the

webpack.config.js

file is generated.

Hi all. I've been playing with exporting interfaces to JS/TS with KMP version (1.7.10)

external interface SomeAPI_JS {
    fun doSomeAction(context: Json?)
}

It seems like kotlin.js.json comes across as

Json

... but the type is undefine? Is this expected behaviour?

How to use yarn 3 berry with yarn plugin instead of use yarn 1 classic?

Hey everyone, I'm having issues running KJS unit tests from the commend line, I am getting the following error:

Execution failed for task ':browserTest'.
> Errors occurred during launch of browser for testing.
  - ChromeHeadless
  Please make sure that you have installed browsers.
  Or change it via
  browser {
      testTask {
          useKarma {
              useFirefox()
              useChrome()
              useSafari()
          }
      }
  }

However I have Chrome installed in my machine so not sure why this is happening. I have tried using Firefox (which I also have installed) and same error occurs. Anyone knows how to fix this?

Hi everyone. I’m trying to understand what the actual differences in behaviour are between the gradle tasks:

build

,

browserDevelopmentWebpack

and

browserProductionWebpack

, and also how they differ from setting the webpack mode to

PRODUCTION

or

DEVELOPMENT

in

build.gradle.kts

. I ask this because I was using

browserDevelopmentWebpack

but with

mode=PRODUCTION

, which seem like they would conflict with each other, and the resulting bundle appeared to be a development bundle (not minified, not DCE’d).

Hello fellas, Has anyone seen this? Task

kotlinNpmInstall

is failing on CI (github actions), but it passes locally. Full error log in thread.

HI I'm using MUI in trying to change the background-color for the Paper component in Dialog through PaperProps but my app crahes when I do

Dialog { 
 PaperComponent = FC { //this : ChildrenBuilder it: PaperProps
    <http://it.sx|it.sx> {
        fontSize = FontSize.small
        backgroundColor = Color("transparent")
    }

 }
}

I have also tried this but doesn't do anything

Dialog { 
 PaperComponent = FC { //this : ChildrenBuilder it: PaperProps
        it.asDynamic()["background-color"] = "transparent"
        it.asDynamic()["font-size"] = "small"
  }
}

Does anyone

Hi, I'm trying to create a full stack website with Kotlin/JS and Kotlin/JVM. I would like to create 1 js file for each page that I have on my website, however when building the project it merges all of the files into one js script. I was wondering if there was any way I could change that? I know that if you create submodules, it will compile 1 js file for each module, however I don't feel like this is a good solution as I would have to create one module for each page Thanks

Hi everyone I am looking for build a full stack web application. I couldn't find an explanatory article. Can you share the articles you know with me?