Best way to run code from newly added JS files by snippets

[semisedlak]

Hey 👋 ,
what is the best practice to run code from JS files dynamically added via snippets? I saw this documentation https://naja.js.org/#/scripts but it is rather poor.

Lets assume we want to load external file and run a code from this particular file. Interesting example is Google Maps API and displaying map in "Contact" page. We don't want to load Maps API for the whole application - only for "Contact" subpage and only when user wants to truly see that map.

Example code (not Google Maps API but for simplicity it only outputs text to some HTML node) may looks like this.
@layout.latte contains one snippet "scripts":

{snippet scripts}{block scripts}{/block}{/snippet}

Subpage "Contact" (e.g. contact.latte) is redrawing that snippet with code like this:

{block scripts}
    <script src="{$basePath}/js/map.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let map = new Map();
            document.getElementById('map').innerText = map.init();
        });
    </script>
{/block}

File map.js contains:

class Map {
    init = () => 'WE ARE HERE';
}

After ajax request to "Contact" page file map.js should be loaded, Map class initialized and init method executed. But ScriptLoader loads file map.js on every "Contact" page approach.

I know that this should be done via extension but I didn't find good working solution to achieve this behavior yet.

Many thanks for your answers and great work on this library 🙏

[jiripudil]

Hello, I'm sorry you find the documentation lacking, but I'm afraid there's really not much more to it than what it already says 😟

As for loading third-party scripts, it's more convenient to implement it in an extension. Usually, third-party scripts pollute the global scope, so it's best to check for the existence of the API and load the script if it's not there. You can draw some inspiration from how I load Facebook SDK (beware, it uses Naja 1).

I also have an idea how to improve the current behaviour: the ScriptLoader could deduplicate loaded scripts by their id if present. I think that could help your use case. Would do you think?