Betreff: AEM component wise JavaScript via clientlib

[Nesan]

Hi,

I have developed one component, Used clientlib library to load the JavaScript inside the component. 

This below code is used in component HTL.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
<sly data-sly-call="${clientlib.js @ categories='project.componentname'}"/>

Only one time this JavaScript is calling. But from as a requirement I need to get the count of the specific component and need to inject attribute according to the count via jQuery.

This is the JavaScript function. But this is working for first component in the page.

var componentCount = 0;
$('.componentClassName').each(function() {
      componentCount ++;
     $(this).attr("component-number", componentCount );
});

without putting to etc/clientlib, Can we handle this issue?

How I can tackle this.

[Asutosh_Jena_]

Hi @Nesan 

If you put the clientlib in component and load it based on the number of times the component loads, it will make multiple calls to the client lib. You need to embed the clientlib in the main clientlib and load it only once.

[markus_bulla_adobe · Accepted solution]

Hi @Nesan!

In AEM ClientLibrary Manager will make sure that a specific ClientLib is only loaded once to avoid duplicate, unnecessary loading of redundant code.

However, I feel that you may have a slightly incorrect understanding of how ClientLibs work. While the HTL code you shared will make sure that your JavaScript code will be loaded on the page, you may still have your code executed by various triggers.

For your specific requirement, this sounds like something that can easily be done with simple jQuery logic. You could set a component-specific class on your components HTML (there probably already is one; let's call it "myComponent") and use jQuery selectors to get all components on the page and count them:

var componentCount = $(".myComponent").size(); 

This code should be executed in the footer of your page to make sure that all instances of the component are already present in the HTML DOM. No need to iterate or load code multiple times.

Hope that helps!

[Nesan]

Thanks, @markus_bulla_adobe for your explanation.

I forgot to trigger after the DOM ready, Now i have wrapped the code with the document.ready function. It is working fine now. Thanks for the quick response.

[markus_bulla_adobe]

Optimizing ClientLibs to only load component ClientLibs for components that are also present in the page is quite a complex task and AFAIk there is no OOTB way to achieve this right now. One reason is that ClientLib Manager fires in the page header. At that point in time, it does not yet know about the components actually present in the page. However, I don't see a big issue executing the above mentioned code for every page. I wouldn't expect a measurable effect from a performance perspective. If you need to include more complex code that should only be executed if a certain component is present in the page you could use that same simple count mechanism and only trigger your complex processing if the count result is bigger than zero. Trying to optimize for selective ClientLib loading comes with quite some complexity and implications (performance, caching, etc.).

[Nesan]

Thanks, @markus_bulla_adobe,