Hello, I'm working on a framework in Kotlin/JS lan...

# javascript

[David Herman]

Hello, I'm working on a framework in Kotlin/JS land, and I recently updated to 1.7.10. I am now running into the change where JS files are compiled per-module instead of whole-program.

I know I can just change the granularity back, but before I do that, I'm trying to, in code, generate an index.html file will all the separate JS files imported via <script> tags. The problem is, I don't know the order to import them. Is there a way to find out?

[David Herman]

For example, let's say two JS files are kotlin-kotlin-stdlib-js-ir.js and example-site.js .

I assume I want to declare them like so:

<script src="kotlin-kotlin...js"></script>
<script src="example-site.js"></script>

[David Herman]

but since I don't know what depends on what, I'm currently just importing them in alphabetical order, which explodes.

[hfhbd]

In theory, you could analyze the dependency graph. You could write a Gradle plugin to parse the dependencies, Gradle and npm. I don't know if there is a better idea but the Kotlin JS compiler needs to resolve the tree too to load the js modules in the correct order too (with whole-program option), doesn't it?

[David Herman]

Yeah, I'm wondering if that logic is exposed anywhere in a way I could reuse it or if it's hidden as some implementation detail

[hfhbd]

I just tested it with `binaries.library()`: The dependency graph is not resolved, the imports are not "correct":'

if (typeof this['web-internal-web-core-runtime'] === 'undefined') {
      throw new Error("Error loading module 'routing-compose-browserRouterTest'. Its dependency 'web-internal-web-core-runtime' was not found. Please, check whether 'web-internal-web-core-runtime' is loaded prior to 'routing-compose-browserRouterTest'.");
    }
    if (typeof this['kotlin-kotlin-stdlib-js-ir'] === 'undefined') {
      throw new Error("Error loading module 'routing-compose-browserRouterTest'. Its dependency 'kotlin-kotlin-stdlib-js-ir' was not found. Please, check whether 'kotlin-kotlin-stdlib-js-ir' is loaded prior to 'routing-compose-browserRouterTest'.");
    }
    if (typeof this['androidx-runtime'] === 'undefined') {
      throw new Error("Error loading module 'routing-compose-browserRouterTest'. Its dependency 'androidx-runtime' was not found. Please, check whether 'androidx-runtime' is loaded prior to 'routing-compose-browserRouterTest'.");
    }
    if (typeof this['routing-compose-integrationTest'] === 'undefined') {
      throw new Error("Error loading module 'routing-compose-browserRouterTest'. Its dependency 'routing-compose-integrationTest' was not found. Please, check whether 'routing-compose-integrationTest' is loaded prior to 'routing-compose-browserRouterTest'.");
    }
    if (typeof this['routing-compose'] === 'undefined') {
      throw new Error("Error loading module 'routing-compose-browserRouterTest'. Its dependency 'routing-compose' was not found. Please, check whether 'routing-compose' is loaded prior to 'routing-compose-browserRouterTest'.");
    }

For example, every Kotlin lib depends on the stdlib, which is not the first.

[hfhbd]

But how does it work in js/html anyway? I mean you could use `async`: <script src="kotlin-kotlin...js" async></script>, so how does JS enforce the order? 🤔

[David Herman]

Well, I think the JS code in this case explicitly checks and then barfs

[David Herman]

Ah yes, the code you just pasted above 🙂

[hfhbd]

But the imports of this code is still wrong: web-internal-web-core-runtime depends on androidx-runtime which itself depends on kotlin-kotlin-stdlib-js-ir. Yeah, every dependency has to be loaded before running the actual code, but the order of the imports does not matter, I guess. Otherwise it would not work 😄

[hfhbd]

Do you get an error with your alphabetical import?

[David Herman]

Yeah

[David Herman]

That was my first attempt and when it didn't work I came here 🙂