Code reuse in Trilium!

[sottey]

I was finding that I was rewriting code over and over (getNote, getContent, etc. etc. etc.). It was a pain to have to copy the code to new notes and, if there was an improvement, have to go to all those locations to make the change.

Additionally, I have some JSON charting code, where each chart's code is identical, except for a configuration object.

SO, tonight I started thinking about how to have some code reuse. And it worked!

Implementing Dynamic Includes:
In a Note where you want to use some code from somewhere else in your tree, create a new JS Frontend child note (e.g. myIncludesNote), paste the code below into the myIncludesNote and then add an attribute to the myIncludesNote called "#myIncludes" that has a value that is a comma delimited list of NoteIDs. The included note will run, since it is a child of your executing code, and will inject the #myIncludes notes' contents into the rendered document

---

Example Tree Structure:

• SomeJSNote - ID: rqiajsfajdlfkbnla (anywhere in your Trilium Tree)

• SomeJSNote2 - ID:safuehfalejsdf (anywhere in your Trilium Tree)
  .
  .
  .

• Render Note "Display"

  • HTML Note "Html"
    • JS Note "myIncludesNote"

Steps:

1. Add an attribute to the Include note that looks like this:
   #myIncludes=Aa3YQRk8rVe5,y0uciphMeWc5,MgcHFCsoVc4Y
2. Paste this code into the "myIncludesNote":

async function init() {
    const includes = api.currentNote.getAttribute("label", "myIncludes").value.split(",");
    for (let i = 0; i < includes.length; i++) {
        var newScript = document.createElement('script');
        newScript.innerHTML = "\n\n" + await api.getNote(includes[i]).then(targetNote => { return targetNote.getContent(); })
        document.head.appendChild(newScript);
    }
}
init();

Now, anytime you load the render note, both SomeJSNote and SomeJSNote2 will be added to the output and executed.

I have attached an exported tree demonstrating this...
myIncludes Example.zip

Hope this helps someone! I am using it a ton!

[zerebos]

There's several different ways you could go about something like this. Some other easy alternatives:

• Creating a script with the src having the pattern api/notes/{noteId}/open which will "remotely" link that script
• Exposing an api on the window object from a central script and just calling specific functions in the local script
• Similarly, use custom events on the window so one script listens for window.addEventListener("my-event") and another triggers window.dispatchEvent("my-event")
• Similar to what you've already done, but use the note ids to read the script contents and eval them (or more preferably an indirect eval)

And something that takes a little more setup but is my personal preference and what I'm currently doing:

• Use an external editor that has your own scripts and libraries locally that bundles and tree shakes them then maps each bundle to a note id and automatically update each note with the result of the build