Hey everyone! I'm getting very unexpected behavior from Kotlin/JS and I have no idea what is happening and why it is happening. Basically, I have code that gets me a

List

of `HTMLDivElement`s:

val questionDivs = document.querySelectorAll("div[id^='question']").asList().map { it as HTMLDivElement }

Then, if I print it out to the console, by using

console.log(questionDivs)

, it prints out just fine. If I print out the size of this

List

, by using

console.log(questionDivs.size)

, it prints out the size of the

List

(in my case 11). But if I try to loop over the

List

by using either a foreach loop or by using the

.forEach { }

method, it isn't being run not even once. This is what gets printed out when doing `console.log(questionDivs)`: https://paste.pics/GR0JS

And this doesn't?

Okay, one more. Is there a way to reference a JavaScript

Number

type in Kotlin?

Number

is

kotlin.Number

, which is not what I want. Is there a

javascript.Number

or something?

Hi all! Hope everyone is well. I'm currently working in a multiplatform project where I have an NPM dependency. I've been trying to figure out how to compile the dependency into my output so that it isn't necessary for a consumer to resolve the dependency. We have a multiplatform module, (core), and a kotlin/js standalone that will be used as an SDK, the JS module depends on the core. Currently any consumer must have the package installed via NPM in some way. Is this out of the box possible, or is anyone aware of work around?

Hello! How to fix this issue? When use short url like "/" or "/somthing" it works fine because it return the index.html that has the script of WebApp.js But when using long url like "/somthing/sothingelse" I got this error It can't serve the index.html Any idea how to fix it ?

Hi. I was trying to use ktor js client and failed to load anything because of CORS policy. How can it be handled ?

I found this post from 2 years ago. Is it still following best practice, or has another method been created since then?

Hi😃, I'm trying to use minecraft script framework in kotlin, but I meet some problems in converting TS definition to kt. Here are dependencies:

implementation(npm("@types/mojang-gametest", "^0.1.3", generateExternals = true))
implementation(npm("@types/mojang-minecraft", "^0.1.3", generateExternals = true))
implementation(npm("typescript", "^4.4.3"))
implementation(npm("gulp", "^4.0.2"))
implementation(npm("gulp-typescript", "^6.0.0-alpha.1", generateExternals = true))
implementation(npm("del", "^6.0.0"))

Problem 1 Here are excerpts from

@types/mojang-minecraft

dependency:

export class MinecraftItemTypes {
    static readonly 'air': ItemType;
    static readonly 'apple': ItemType;
//  ...
    static readonly 'item.acaciaDoor': ItemType;
    static readonly 'item.bed': ItemType;
}

There are some fields which have a

.

in their name. And they are converted to:

external open class MinecraftItemTypes {
    companion object {
        var item.acaciaDoor: ItemType
        var item.bed: ItemType
        var item.beetroot: ItemType
    }
}

They can not be compiled, should they be converted like this?

var `item.acaciaDoor`: ItemType

Also, the TS uses

readonly

keyword, I'm not familiar with TypeScript, may be it should be converted to

val

? Problem 2 There are some fields, store a literal value:

export class BlockProperties {
    static readonly 'active' = 'active';
    static readonly 'color' = 'color';
    static readonly 'direction' = 'direction';
    // ...
}

They are converted to:

external open class BlockProperties {
    companion object {
        var active: Any = "active"
        var color: Any = "color"
        var direction: Any = "direction"
    }
}

They are reported wrong with

Wrong initializer of external declaration. Must be ' = definedExternally'

In addition, is it possible to infer the type

String

?

val active: String = definedExternally

Are these bugs? How can I deal with them?🤔

Hey, I have a compose web library (bootstrap-compose) which uses the npm library bootstrap. This dependency contains the released css and js files, which I want to forward them to my consumers, via

api(npm("bootstrap"))

. The js files are included, but the css files are not. How can I publish the css files too, so the user does not need to import it separatly?

Hi, I want to use the html-loader module in webpack to load an html file into a string constant. I added a webpack.config.d directory to the root of my kotlin js project and confirmed that the js file in there was included in the generated webpack.config.js in {projectRoot}/build/js/packages/{projectName} on browserDevelopmentRun . From here, I am not sure where to put my html files or how I should configure webpack to find the html files in the src directory of my kotlin project. Does anyone have any experience with this?

Hey, • I have a multi platform project • one of the modules is a JS module, which is going to be exported • that module uses objects from the other modules, added as dependencies When I export the JS file, I can export the classes in the JS module, but not the classes in the other modules, Is there a way to make webpack to export them?

Hello. I was wondering what would be the benefits of building a web app with Kotlin Multiplatform, instead of mixing JS and Kotlin separately. I want to get an idea of in which situations would using Kotlin Multiplatform be more beneficial than mixing those two.

Is there a way to force the project to include a module even if I don't reference it at all? I currently have to kind of hack it like so:

@JsModule("reflect-metadata")
external val blank : dynamic
val force = blank.test

I just want the module to be included and run always. Without something like this being in the code somewhere, it never gets run and other dependencies that require it fail on load. putting the

package.to.blank

in the dce keep option does not retain it. Did I miss anything in the documentation?

Hello everyone! I am making Kotlin definitions for a JS library using type definitions from Typescript and I've encountered this syntax: (typescript)

_showAuthDialog({ nonInteractive, error, canCancel, onTryAgain }?: AuthDialogParams): void;

What would be the best way to write Kotlin definition for that function? Just to replace argument name with any valid string or..? Just in case, AuthDialogParams definition:

interface AuthDialogParams {
    nonInteractive?: boolean;
    error?: Error;
    canCancel?: boolean;
    onTryAgain?: () => Promise<void>;
}

Thanks in advance!

Hi all, How do I call a Kotlin-Function from JavaScript when the

@JsExport

-annotated function is located in a different module? Within the same module, I would use

js("myModule.myFuntion();")

which works fine but calling

js("myOtherModule.myOtherFunction();")

fails since JavaScript fails to resolve

myOtherModule

Is there a Gradle configuration or anything else I can do to access

myOtherModule

from JS when running

myModule

?

Hi, 2 weeks ago

kotlin-react-css

was removed from the wrappers project (https://github.com/JetBrains/kotlin-wrappers/pull/1450) does anyone know why?

though my actual question is: i was reading https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/01_Introduction to get my feet wet with kotlin and react. now it still uses react 17 and makes use of kotlin-react-csss taht is now removed. how would i handle css with react 18?

I am curious if anybody has an example of a React Native project, but using Kotlin instead of JS/TS?

is there a howto guide or something similar about how to use a js library when there are no kotlin wrappers? i want to use d3.js and im kinda lost. I managed to geenrate the external declarations but of all the thigns its the d3-object itself that has no interface or something... also im unsure about how to use the genersated external during development

Hello, I have a problem with minification.. I have a project generating a js library that I use from a reactJS app, and I've noticed that jsBrowserDevelopmentWebpack and jsBrowserProductionWebpack produce the same, not minified, files. Should I do something to activate minification in production? I tried to create the webpack.config.d folder but I have an error saying webpack is not defined at this line:

config.plugins.push(new webpack.optimize.UglifyJsPlugin({
  minimize: true
}));

EDIT: I've added

const webpack = require('webpack');

and now the error is [webpack-cli] TypeError: webpack.optimize.UglifyJsPlugin is not a constructor

Hello again 🙂 some of the examples from https://mui.com/material-ui/react-drawer/ only work, because they directly manipulate some of the css classes like so:

<Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
          },
        }}

How would i add these stylings to the MuiDrawer-paper class the kotlin way?

If i am writing a multiplatform lib targeting android, ios and js, what is a good solution for multiplatform caching for example the LoadingCache pattern Lets say i have a

suspend fun refreshToken(token: Token)

if the cache is cold, I want to prevent to coroutines concurrently refreshing the value I have tried some solutions Semaphore (the coroutine aware one) Actor-like impl with channels but without actor lib. Are there any other simpler/more obvious solutions?

If I'm making a Kotlin/JS library that needs to have a web worker component to it, is there any simple way to ship the library so that the main js compilation and the web worker script are both available to library consumers in some way?

Anyone know if there's a bug for this? I'm still seeing promises as non-exportable in 1.6.21.

Hi, is it possible to see the JS generated before adding kotlin stdlib and optimizing the code (or even before bundling the files) ?

what would i need to do to a kotlin/js build.gradle.kts to also allow running on the jvm as a desktop app?

Why is it the case ? Is it planned to fix it ?

i want to use a material ui textfield with InputAdorments. in the mui docs it is decalred like so

InputProps={{
            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
          }}

How do i do that in kotlinjs? i cant find any implementation of

InputBaseComponentProps