How do I map libraries which need require? <https:...

# javascript

[Reuben Firmin]

How do I map libraries which need require? https://htmx.org/docs/#webpack as an example

[Reuben Firmin]

I attempted via:

@file:JsModule("<http://htmx.org|htmx.org>")
@file:JsNonModule
package ah.libs

// see <https://htmx.org/docs/#webpack> (i'm not bothering with the window injection yet)
@JsName("htmx")
external object HTMX {
    // see <https://htmx.org/docs/#init_3rd_party_with_events>
    fun onLoad(initializer: (content: Any) -> Unit)
}

[Reuben Firmin]

the first part works (it imports, initializes, etc)

[Reuben Firmin]

but the "htmx" object isn't available - probably because I'm not setting it up in the way they describe

[andylamax]

if you are adding htmx as a script tag, just define externals without @JsModule

[andylamax]

something like

external fun require(mod: String): dynamic

then in your main function

window.asDynamic().htmx = require("<http://htmx.org|htmx.org>")

should do the trick

[Reuben Firmin]

thanks, that did the job

[Artem Kobzar]

Better solution, will be to put the JsModule (and JsNonModule) annotation directly on the object. It will not require the hack with the hack with 'require' function

[andylamax]

I agree.

So something like

@file:JsModule("<http://htmx.org|htmx.org>")
@file:JsNonModule
package ah.libs

// see <https://htmx.org/docs/#webpack> (i'm not bothering with the window injection yet)
@JsName("htmx")
external object HTMX {
    // see <https://htmx.org/docs/#init_3rd_party_with_events>
    fun onLoad(initializer: (content: Any) -> Unit)
}

then in main function

window.asDynamic().htmx = HTMX

[Artem Kobzar]

More like this:

package ah.libs

// see <https://htmx.org/docs/#webpack> (i'm not bothering with the window injection yet)
@JsModule("<http://htmx.org|htmx.org>")
@JsNonModule
external object HTMX {
    // see <https://htmx.org/docs/#init_3rd_party_with_events>
    fun onLoad(initializer: (content: Any) -> Unit)
}

[andylamax]

isn't htmx implementations dependent upon htmx being defined on the windows object yet

[Artem Kobzar]

Yeap it could be added in the same way after:

window.asDynamic().htmx = HTMX