What does

@kotlin.internal.InlineOnly

do in Kotlin/JS? Will it prevent JS code from being generated?

In a multiplatform project I'm doing

kotlin.targets.all { target ->
  target.compilations.all { compilation ->
    compilation.compileKotlinTask.dependsOn(generate.get())
  }
}

to add a dependency on a source-generating task. My project is configured with both legacy and IR for JS, but when I print out the targets that this applies to the IR ones are missing:

compilation 'main' (target jsLegacy (js))
compilation 'test' (target jsLegacy (js))
compilation 'main' (target jvm (jvm))
compilation 'test' (target jvm (jvm))
compilation 'main' (target metadata (common))

IR compilation seems to be occurring first, which results in an empty artifact that eventually fails downstream. Is it expected that the IR compilation tasks would not show up here?

Some of my lessons learned after digging into emitted JS code for optimization 😅 I’ll add to the list as I learn more. • Avoid

x.toString()

. Use

"$x"

. The former cannot be optimized by Terser. • Avoid

Number

. Cannot be optimized by Terser. • Avoid

String.isEmpty()

and

String.isNotEmpty()

. Unnecessarily imports

CharSequence

code. Use

== ""

and

!= ""

. • Avoid

StringBuilder

. Imports heaps of code. I’ve made a cheap alternative: https://gist.github.com/fluidsonic/473758c30dd084042905e77c5ebd0374 • Avoid

Long

if possible. Uses a custom JS class fo Kotlin and cannot be optimized by Terser. • Avoid `print`/`println`. Imports heaps of code. Use

console.log

. But even the latter isn’t efficiently implemented. • Prefer

unsafeCast<Foo>()

over

as Foo

when you’re certain of the type. The latter adds overhead and imports more code from stdlib. • Use

external

when possible to reduce amount of classes & interfaces.

1 and 3 should be bugs for the compiler to optimize

I have succeeded in writing unit test for kotlin/js. Can someone please direct me on how I can start writing UI tests with kotlin/js? specifically be able to run them in a CI environment?

Hi, is there any way for me to import Kotlin/React Component into ReactJS

Hello all, I have encountered a problem using IR (1.4.20) here.

browserDevelopmentRun

successfully runs while

browserProductionRun

fails. Is this a bug?

When casting a suspending lambda to a

kotlin.reflect.KSuspendFunction2

type with IR backend, I've got a compiler error:

> Task :compileDevelopmentExecutableKotlinFrontend FAILED
e: java.lang.IllegalStateException: Can't find name for declaration CLASS FUNCTION_INTERFACE_CLASS INTERFACE name:KSuspendFunction2 modality:ABSTRACT visibility:public superTypes:[kotlin.reflect.KFunction<R of kotlin.reflect.KSuspendFunction2>]
        at org.jetbrains.kotlin.ir.backend.js.utils.NameTables.getNameForStaticDeclaration(NameTables.kt:315)
        at org.jetbrains.kotlin.ir.backend.js.utils.IrNamerImpl.getNameForStaticDeclaration(IrNamerImpl.kt:20)
        at org.jetbrains.kotlin.ir.backend.js.transformers.irToJs.EmptyCrossModuleReferenceInfo$withReferenceTracking$1.getNameForStaticDeclaration(MultiModuleSupport.kt)

But what's interesting not when I compile the library with such code, but when I compile an app which uses it.

This simple code doesn't work with IR backend at all:

@JsExport
data class Test(val content: String)

val json = "{\"content\":\"data\"}"
val test = kotlin.js.JSON.parse<Test>(json)
println(test.content)

Property is

undefined

, no matter if I use

@JsExport

or not. It works fine with legacy and the only workaround for IR seems to be

parse<dynamic>()

. Is this a known issue? Can't find anything on YT.

Hi! I was wondering if Kotlin/KJS could be a good match to write a database client library that would perhaps be used more frequently from JavaScript, TypeScript and Java than from Kotlin or Kotlin/JS, at least for a start. The current implementation is pure JS and has no TS types. Writing the code on TypeScript and making it callable from K/JS sounds absolutely doable, but the attractive thing here is to also generate a Java client. It seems to me there's some focus going on in making existing JS/TS libs easily accessible but how about the other way? Can I write a single codebase in Kotlin code in such way that it is easy and natural to call from Java/JavaScript/TypeScript? Does this sound like a practical thing to do? What can I expect in terms of added K/JS runtime size? Thx!

Anyone has any idea how to write an external for such declaration (WebIDL):

enum DOMParserSupportedType {
  "text/html",
  "text/xml",
  "application/xml",
  "application/xhtml+xml",
  "image/svg+xml"
};

😅

Using the IR compiler how does a companion object work? Currently its generating typescript class with a "readonly Companion" but it seems I need an instance of the class to use the companion functions

Hello, I tried to write my HTTP calls in kotlin then generate JS with typescript definitions. I want to use KTOR client to do that. But It seems I need to use serialization lib which doesn’t work with IR compiler (failed to generate typescript definition when annotate my entities with @Serializable). In JS world, we don’t need a serializer lib (just a JSON.parse()). Do you have solutions ? Or ideas to write my HTTP calls without serialization lib dependency ?

I have an issue with the typescript generation. Promise are not properly mapped (https://youtrack.jetbrains.com/issue/KT-43632). There is a workaround to force the Typescript type to use ?

@Dmitry Romanov [JB] https://github.com/mipt-npm/plotly.kt/releases/tag/v0.3.0-dev-rc. Full IR migration. I will start releasing all other projects in IR shortly. If everything is fine, I will promote it to bintray.

I’m surprised that it works. I’d like to have that as a feature 😄

external interface Foo
external interface Scope {
    @Suppress("INLINE_EXTERNAL_DECLARATION", "NON_ABSTRACT_MEMBER_OF_EXTERNAL_INTERFACE", "WRONG_MODIFIER_CONTAINING_DECLARATION", "WRONG_EXTERNAL_DECLARATION", "WRONG_BODY_OF_EXTERNAL_DECLARATION")
    final inline fun Foo.print() {
        console.log("${this@Scope}.$this")
    }
}

fun main() {
    val scope = "scope".unsafeCast<Scope>()
    val foo = "foo".unsafeCast<Foo>()
    with(scope) { foo.print() }
}

If I replace in my project

kotlinx-nodejs

0.0.6 by 0.0.7 I suddenly get

Unresolved reference. None of the following candidates is applicable because of receiver type mismatch: 
public inline operator fun RegExpMatch.get(index: Int): String? defined in kotlin.js

where the code is

val wslShellWrapperDirectory = path.join(process.env["RUNNER_TEMP"]!!, "wsl-shell-wrapper")

Anyone an idea what is broken and how to work-around it?

I am building out a multiplatform hybrid framework and was wondering if anyone would be willing to provide feedback based on the current progress. https://github.com/dazza5000/kybrid

I’m not happy with

kotlin-react

and

kotlinx-html

, so I’ve started my own React wrapper. • Similar to kotlin-react. • Nicer and consistent API. Easier to use. • Not multiplatform. Optimized for Kotlin/JS instead. • No dependencies beside React [Router]. • Lower size and performance overhead. • More type safety, esp. around hooks. • Props allow

class

instead of just

external interface

. • Highly experimental. IR compiler only. Relies on unofficial compiler behavior. Anyone wants to join the project? 😄 https://github.com/fluidsonic/fluid-react

It would be better for the community to create a wrapper for Vue, Angular or Svelte 😛

We have a kotlin-js project where we have a kotlin-react dependency:

implementation "org.jetbrains:kotlin-react-dom:16.13.1-pre.112-kotlin-1.4.0"

Looking in the build folder, my

yarn.lock

contains:

react-dom@^16.13.1:
  version "16.14.0"

Looking into the node-modules, the version in

<Project>\build\js\node_modules\react-dom\package.json

is

16.14.0

- so everything is working just as expected. Then I add an npm dependency to a plain Javascript module, where the

package.json

contains a dependency on `"react-dom": "^15.3.2"`:

implementation npm("js-module", "1.0.0")

Now my

yarn.lock

contains both of these:

react-dom@^15.3.2:
  version "15.7.0"
  
react-dom@^16.13.1:
  version "16.14.0"

Looking into the node modules, the version in

<Project>\build\js\node_modules\react-dom\package.json

is

15.7.0

. This causes problems because we use React 16 features, which are missing in 15. Is this the expected behaviour? Are there any ways to control such dependency resolutions?

Hello all, Using legacy backend, I used to create private react components and provide a public wrapper, something in the lines of

private class Counter(props: Counter.Props) : RComponent<Counter.Props,Counter.State>(props) {
  class Props(val initialValue: Int):RProps
  class State(val value: Int) : RState
  // . . .
}

fun RBuilder.Counter(initialValue: Int = 0) = child(Counter::class.js,Counter.Props(initialValue)){}

This made only

RBuiler.Counter()

available to consumers. However, with IR backend we need to mark our components with

@JsExport

. Sadly, IR backend won't export a private class/function it results in error upon minification similar to when you don't mark the component with

@JsExport

Currently, I have resorted to leaving them public. This works but again it exposes code that wasn't meant to be public. Also pollutes the namespace as every tiny component is available on the entire project. Which is really huge. Is there a workaround I can use, so that I may use the

IR

backend, export my components but still make them

private/internal

?

You could export factory function but not the resulting class

It's going to sound like a stupid question but what does IR mean?

Hi all, I am trying to create a kotlin multiplatform library to be used across native platforms and a separate JS web app... I have been able to successfully import the built js module into my web app and that is all fine and working, but I was curious how I could minimize the build size... either I can keep the common library small and import kotlin.js npm package separately, or I can include it in the build... Problem I can't get around is avoiding the entire 1.1mb kotlin.js library... DCE doesn't seem to work for my use case... anyone else run into a similar use case and issue?

hello once again, I have bumped into an issue that I don't know if it is a bug or not. since koltin 1.4, gradle installs npm transitive dependencies without a problem. i.e. a lib which declares an npm dependency will be picked uo and its npm dependency will also be downloaded. I expected devNpm to be the same but it is not. Is that expected? In addition, I also noticed declaring dependencies (both npm and devNpm dependencies) in test sourcesets wont provoke a download of those dependencies. Is this also expected, should I file an issue on YT?

Hi, is there a way to easily copy data classes generated by @JsExport in TypeScript? Currently, the generated

copy

function requires to set all fields, so it is no better than just creating a new object. I'm looking for something like

obj.copy(a = "foo")

in Kotlin or

obj = {...obj, a: "foo"}

in JS, but for the auto-generated data classes

I'd like to get us onto IR soon so we can start giving more feedback, but our JS webapp relies on a separate file per module so it can serve each module only where it's needed. I saw that KT-38136 is marked as fixed in 1.4.20, so I'm digging back into things, but I can't find info on how to get separate files per-module working 😔 In

LEGACY

, I was able to: • create an umbrella module with dependencies on other modules, kotlin stdlib, and even serialization (these other modules also have their own interdependencies) • configure

browser.dceTask.dceOptions.outputDirectory

to point to a specific folder • run

processDceKotlinJs

• check that specified directory for a separate, DCEd JS file for every dependency of the umbrella module (including a DCEd version of kotlin stdlib and serialization!) What I've done so far in `IR`: • added

binaries.executable()

to my umbrella module's JS config (and tried adding it to every dependency module) • tagged whatever was previously relying on

dceOptions.keep

with

@JsExport

• tried updating

browser.distribution.directory

to match

dceOptions.outputDirectory

• ran

browserDistribution

(since

processDceKotlinJs

is missing) I do get a single file for my umbrella repo that seems to include all of annotated contents of its dependencies I still can't seem to get separate, DCEd JS file per module/dependency though. Anyone else run into this or have any tips?

Hi, anyone met with this problem before? I am building kotlin js application that build well in my machine but fails on a CI server. I have tried clean building both on the machine and on the server. What am I doing wrong? Here is the error from gradle

Execution failed for task ':todo-core:jsPackageJson'.
> Failed to create MD5 hash for file '/home/runner/work/builders/builders/applikation-runtime/build/js/packages/applikation-runtime-test/package.json' as it does not exist.