Execution order of js notes

[sottey]

I started to ask a question about this then realized I could do my own homework. :-)

I wanted to know the execution order of FrontendJS notes. I know, I could have just looked at the source, but where is the fun in that? There may already be documentation on this, but I couldn't find it.

So I created a tree, tested it and wrote out a bit about it. Not pretty, but I hope it helps someone in the future.

The basics are this:

I have exported the tree in case anyone wants to try it themselves:
jsOrder Test.zip

---

UPDATE: I found a new wrinkle: If everything except the top node is JS, then the above is correct. However, if there are child nodes that are HTML, they get precedence over JS. SO, it goes like this:

At root of tree, look for all HTML children and do the steps above. Next, look for all JS children and do the steps above.

Thanks!
Sean

[sottey]

And, of course, I find an exception to the rules I defined above.

I have a structure that follows the above order of execution. Each CSS or JS note has a console.log for when it starts loading and when it finishes (made the CSS HTML with a Style tag so I could add the console output.)

However, even though the function in Calendar.js (calendarJs) is loaded BEFORE the code that references it (js (Trilium)) I get an error in js (Trilum as seen below saying that calendarJs is undefined. I am working on it but if anyone sees an obvious issue, please let me know.

Thanks! (and sorry for being so chatty on here, just excited to use Trilium!)
Sean

[sottey]

So, for whatever reason, including the Calendar.js as a separate note (first in the sequence of JS notes) did not work as the scope was insufficient for the calendarJs function. (causing the error above)

Moving that from the independent note into a <script> block in the top HTML (html Trilium note), as well as having all my custom variables referenced with the prefix "window." solved it.

@zadam , is there a way to change the scoping on a function? Is this expected behavior?

[zadam]

Generally you shouldn't rely on the order of the execution. The purpose of the tree is to define dependencies between notes - a parent-child relationship means that the parent depends on the child. This defines the order, because the child as a dependency needs to run before the parent (which could then use exported functions for example).

I think your problem might be caused by the fact that the JS note is called "Calendar.js", but you then use "calendarJs" module name to access it. The module (in the sense of a CommonJS module) name is the same as the note name, so try to rename the "Calendar.js" to "calendarJs" and use this name to access it.