I've been working on a library with some external ...

# javascript

[iroyo]

I've been working on a library with some external declarations for WebExtensions api's based on the Firefox spec. I now want the library to be compatible with chrome so I added a polyfill as a dependency in my gradle.

implementation(npm("webextension-polyfill", "0.7.0"))

After this I'm a bit lost. Do I need to make something special to in order to get this dependency bundled alongside my kotlin code? Do I have to manually map the polyfill to kotlin code with @JsModule?

[turansky]

I have to manually map the polyfill to kotlin code with @JsModule?

Yes, you can to declare and use polyfill
But webpack shim is preferable as I see

[iroyo]

Thanks for your answer, but I don't fully understand what you mean with "webpack shim". The idea is to tell webpack to include this dependency in the js output, right? How can I do it?

[turansky]

The idea is to tell webpack to include this dependency in the js output, right?

Yes

How can I do it?

AFAIK you can declare shims in webpack config
https://webpack.js.org/guides/shimming/

[iroyo]

Oh thanks, I'll look into that!!
I have found someone that achieved what I want, take a look: https://github.com/rivasdiaz/helloworld-chrome-extension-kotlin/blob/master/build.gradle
The gradle file uses an old plugin, If I'd adapted it into the new plugin version do you think it would work? As I understand he's only copying the polyfill js file into the output folder?

[turansky]

As I understand he’s only copying the polyfill js file into the output folder?`

Yes

[turansky]

New plugin already have distribution logic

[iroyo]

Hey Victor I know you've helped me enough already, but with distribution I can only modify the directory output, right? Maybe I misunderstood you.

[turansky]

If you want to include shim inside js file:
1. Add dependency and webpack configuration for shim

or

2. Add dependency and require polyfill at app start

--------------------
If you want copy polyfills to distributions folder:
3. Add configuration for “distribution” Copy task

[turansky]

Hey Victor I know you’ve helped me enough already

Feel free to ask as many questions as you really need

[iroyo]

OK, I'll explore all the options. The first two require tinkering with webpack and create an extra webpack.config.js file, right? Isn't this generated automatically in the build folder? I've read what you previously mentioned, but I'm uncertain as to where I should put this extra webpack configuration for the shim.
For the third option I've tried this:

browser {
    distribution {
        copy {
            from("build/js/node_modules/webextension-polyfill/dist") {
                include("browser-polyfill.min.js")
            }
            into("$projectDir/extension/output/")
        }
        directory = File("$projectDir/extension/output/")
    }

Does it make sense?
Again Victor, thanks you for your patience!

[turansky]

1. webpack.config.js
2. require call in Kotlin
3. Copy task configuration

[turansky]

Do you want to include polyfill inside main js?