It seems to me that it’d be a fairly compelling fe...

# javascript

[Christian Williams]

It seems to me that it’d be a fairly compelling feature to be able to put .js or .ts files into src/jsMain/kotlin and have them auto included in the compiled js module, and perhaps auto-generate kotlin stubs when possible using dukat — more or less mirroring kotlin’s behavior with java in jvm land. I’d be happy to hack that feature into a gradle plugin (or whatever) to hook that all up if someone can verify that functionality doesn’t already exist in some obvious form, and maybe give me some pointers on how to configure such a setup.

[Big Chungus]

I think you can already do that by placing js files in resources folder

[Christian Williams]

I’ll try. Weird place for js source but sure.

[Christian Williams]

Yeah not really afaict.

[Christian Williams]

Closest thing I’ve found is this nonsense about getting at it via a local npm dependency. Which appears to require setting it up as a second module.

[Big Chungus]

How are you determining that it does not work? What's the error?

[Big Chungus]

Also how are you importing it from kotlin?

[Christian Williams]

app/Index.kt

package app
import app.Foo
import react.*

val Index = FC<Props> {
    Foo {}
}

app/Foo.kt

@file:JsModule("Foo") // maybe this should be "../Foo"?
@file:JsNonModule
package app

import react.*
external val Foo: ComponentType<Props>

app/Foo.js

import React from 'react';

const Foo = () => {
  return (
      <h1>Code from JSX!</h1>
  );
};

Fails with:

> Task :jsBrowserDevelopmentWebpack FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':jsBrowserDevelopmentWebpack'.
> Module not found: Error: Can't resolve 'Foo' in '/build/js/packages/baaahs-dot-org/kotlin'
  Did you mean './Fooz'?
  Requests that should resolve in the current directory need to start with './'.
  Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
  If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

[Big Chungus]

You need relative path to foo.js, just like in js... ./path/from/resources/root/to/Foo

[Christian Williams]

Martynas you’re awesome, thank you. Still think resources is a weird spot for it but seems to work.

[Christian Williams]

Much appreciated. Didn’t see any references to that in kt docs anywhere, I think it’d be helpful.

[Christian Williams]

Looks to be at ./kotlin/Foo.js.

[Big Chungus]

Resources works as a side-effect here. Everything you place there will be copied to the same dir as compiled kjs file as-is and so you can reference it from kotlin like a "local" file.

[Big Chungus]

And kotlin dir doesn't work because gradle only uses .kt(s) files from there and ignores everything else.

[Christian Williams]

Right. I feel like that oughta be a first-class feature, not a side effect. It’d be pretty weird to have to put .java files into resources to get them to be resolvable from jvm kotlin right?

Doesn’t seem to work though actually:

[Christian Williams]

With @file:JsModule("./Foo.js") , the external is undefined cuz the file is in js modules as ./kotlin/Foo.js.

With `@file:JsModule("./kotlin/Foo.js")`:

> Task :jsBrowserDevelopmentWebpack
Module not found: Error: Can't resolve './kotlin/Foo.js' in '.../build/js/packages/baaahs-dot-org/kotlin'

[Big Chungus]

Odd

[Adam S]

And kotlin dir doesn’t work because gradle only uses .kt(s) files from there and ignores everything else.

I’ve not tried it with Kotlin Multiplatform, but you can update the includes/excludes in Gradle source sets to include new files

// build.gradle.kts

kotlin {
  js(IR) { ... }

  sourceSets {
    jsMain {
      kotlin.include("**/*.js", "**/*.ts")
    }
  }
}

^ that might work?

[Big Chungus]

It won't as those files aren't copied, but just fed in to kotlinc to produce js output

[Big Chungus]

@Christian Williams you get external as undefined because it's not exported in your js file

[Big Chungus]

Just add "export" before "const" there and it should work

[Christian Williams]

That works! Thanks so much Martynas! I'll prob send a PR to add docs to the Kotlin/JS section.

[Big Chungus]

FYI, I've written an article to help people get started with kjs interop https://dev.to/mpetuska/js-in-kotlinjs-c4g