Include a javascript for composite component only once in a page despite of composite components themselves used multiple times

Question

How do I include a JavaScript code only once for multiple usages of a composite component on a page?

Initially I had put I put the JS code inside the cc:implementation tags but that lead to the script being included each time with the components. I want to avoid this condition and include the JavaScript only once even if component has been used multiple times on a page.

Pennoncel

Answer 1

Include the static part of that JS code as a standalone JS file by <h:outputScript> with target="head". It'll be rendered into <h:head> just once.

<cc:implementation>
    <h:outputScript name="js/myCompositeHelper.js" target="head" />
    ...
</cc:implementation>

Neuberger

Has something changed here? I used <h:outputScript target="head"> to include Leaflet and GoogleMutant for Leaflet inside a component. The web browser consoles says "You have included the Google Maps API multiple times on this page. This may cause unexpected errors." – Pacheco