https://kotlinlang.org logo
Title
z

zfan93

02/17/2023, 6:21 AM
hi,i want use dependencies from npm,which write with js like below :
// Include Lightbox 
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';

const lightbox = new PhotoSwipeLightbox({
  // may select multiple "galleries"
  gallery: '#gallery--getting-started',

  // Elements within gallery (slides)
  children: 'a',

  // setup PhotoSwipe Core dynamic import
  pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.init();
How do I define it in kotlin with @JsModule("") ?This seems a lot more complicated than the example on the website....Many thanks!!😒aluting_face:
That's all I can write
@JsModule("photoswipe/lightbox")
external class PhotoSwipeLightbox(){
    fun init()
}
val lightbox =PhotoSwipeLightbox()
    lightbox.init()
d

David Herman

02/17/2023, 6:33 AM
I'm not sure I can help you too much, but I do appreciate that the docs are a bit simple. Did you know you can annotate a package and not just a class?
I'm just starting out myself, and I'm not sure my code is worth imitating yet, but here's an example of something I'm doing: https://github.com/bitspittle/firebase-kotlin-bindings/blob/8fbf7d2f5ecf3941ebe4ce[…]sMain/kotlin/dev/bitspittle/firebase/externals/app/Externals.kt
z

zfan93

02/17/2023, 6:36 AM
something like this?
@file:JsModule("extModule")
package ext.jspackage.name

external fun foo()

external class C
d

David Herman

02/17/2023, 6:39 AM
Yeah. I think the details of the Kotlin package itself doesn't matter, but you're saying that all external declarations in that package should map to classes, methods, etc. in the NPM module you're importing.
You may also need to annotate the package with
@file:JsNonModule
because 🤷 I don't know why, the compiler said I had to 🙂
z

zfan93

02/17/2023, 8:53 AM
Thank you very much. Very useful. I need to study it
b

Big Chungus

02/17/2023, 9:29 AM
I've written this up a while ago to help people get started with js wrapping https://dev.to/mpetuska/js-in-kotlinjs-c4g
d

David Herman

02/17/2023, 5:56 PM
Awesome post, thanks! Wish I found it earlier!