Using webjars: refering exported object without import

I killed two days to figure out a feature, but I failed. I use Javalin with Vue (version 2) and would like to use some additional modules. These modules are not available as vanilla CDN/UNPKG package, but they are available as webjars.

I figures out, so long, the following:

I added the webjar support to my Server:

val server = Javalin.create { config ->
            config.enableWebjars()
            ...

I included the webjar in my dependency:

implementation("org.webjars.npm:joeattardi__emoji-button:4.5.0")

I imported the module in my layout.html:

    <script type="module" src="/webjars/joeattardi__emoji-button/4.5.0/dist/index.js"></script>

But I can’t access its exported class: EmojiButton. All the manuals uses ES6 import aliases:

import { EmojiButton } from '@joeattardi/emoji-button';
const picker = new EmojiButton();

But as layout.html is not a module, I can’t use import.

I feel I am almost there, but I simply can’t find the last piece of the puzzle. Is there any example? Also I would highly appreciate any guidance how I could register (use) new Vue components from webjars.

Thanks, Balage

[balage1551]

Finally, after lots of hesitation, I moved on. Javalin is great and I love it, but my application needs some features conflicting with some of the philosophy of Javalin. Having the whole Vue app in Javalin required so much compromise and extra work, that I split the front-end and back-end. The front-end is now handled by Vue CLI (in nodejs) which allows me to use js modules, SPA, router and any of the modules available for Vue while handling dependencies automatically. On the other hand, I still use Javalin for back-end, because it is a flexible, well configurable, light-weight web server.

I’ve even made a utility abstract class, which lets me split the handlers into several classes and which uses Reflections to dynamically scan the classpath for all handlers.

@Target(AnnotationTarget.CLASS)
@Retention(AnnotationRetention.RUNTIME)
annotation class RouteDisabled

abstract class RoutedHandler {
    protected val logger by LogFactory()

    fun addRoutes(server: Javalin) {
        route(server)
    }

    open fun route(server: Javalin) {}

    companion object {
        fun registerAll(server: Javalin) {
            Reflections(RoutedHandler::class.java.packageName)
                .getSubTypesOf(RoutedHandler::class.java)
                .forEach {
                    if (it.isAnnotationPresent(RouteDisabled::class.java)) {
                        logger.warn("DISABLED: ${it.simpleName.substringBeforeLast("Handler")} ")
                    } else {
                        logger.warn("ADDED:    ${it.simpleName.substringBeforeLast("Handler")} ")
                        val i = it.kotlin.objectInstance!!
                        i.addRoutes(server)
                    }
                }
        }
    }
}

[tipsy]

Thanks for the update @balage1551, that sounds like a good solution. JavalinVue was developed with very simple projects in mind, so it makes sense to move to a standard frontend build 😃