Mixing kotlinx with blocks of native javascript

Web Development
1

Hi all,
We are migrating from JSTL (.jsp and .tag view-files) to a much more structured code base, where we decouple backend and frontend with protobuf in between. Frontend markup is generated with kotlinx. Generally, all goes well, but I’m a bit stuck with something pretty non-standard:

We currently have some .tag files, that – if you aren’t familiar with it – basically are jsp-files, but meant to called from .jsp files (or other .tag files), where you can pass parameters to them easily.
They are very flexible, so you can mix JSTL with blocks of javascript and even plain HTML etc, and you can write comments, that won’t be output to the page like this <%-- comment --%>
That makes is easy to mix javascript with whatever arguments, you have passed down, like this <c:if test="useFeatureX"><script>do-something</script></c:if>, and even use the passed down arguments as javascript values.

Although this might seem like anarchy to some, it’s super flexible, since most editors are able to detect what language block you’re currently in, so javascript is fully syntax highlighed, with code completion intact, as is JSTL, java etc., if you need that.

So I thought I could just write a function in Kotlin, pass arguments to that, and off I go. But unless I’m dim, there doesn’t seem to be anyway I can ‘escape’ kotlinx and write a block of javascript. I can of course write a block of plain text, but that hurts, since we have several hundred lines of js.

I know this is really an edge case, but is there anything I’m, missing here? Any hacks, that might make sonething like this possible?

Thanks in advance :slight_smile:

2

I’m not sure if I got you right, but do you mean unsafe {}?

3

Thank you for your reply.
I know unsafe is a thing, but my main challenge is finding a way to write blocks of javascript code inside kotlinx views (or plain kotlin-files) – with javascript syntax highlighting and code completion intact.

I may have to go about this in a completely different way, but since we used to be able to mix JSTL and javascript (where a js variable could be directly set in the generated page, but actually coming from a jstl-variable), it will take lot of refactoring.

If it was possible in kotlinx, I guess it would look something like this:

h2 {
 +model.subHeader
}
<script>
const myObj = {
   Id: ${model.someGuid}
};

if (${model.someBoolean}) {
   myFunction(){
      ...
   }
}
// and so on
</script>
<script src="https://url-to-our-cmp-provider.com/cmp.js?id=${model.ourCmpAccountId}"></script>

So in a more friendly world, something like this would be possible.

We know this is a bit hacky, but it is (was) very flexible to work with.
But we might be out of luck in kotlin-land…

Best regards
Martin