Include special attributes in Clientlibs(Defer, Nomodule)

Avatar

Avatar
Level 1
smkswamy
Level 1

Likes

0 likes

Total Posts

7 posts

Correct reply

0 solutions
View profile

Avatar
Level 1
smkswamy
Level 1

Likes

0 likes

Total Posts

7 posts

Correct reply

0 solutions
View profile
smkswamy
Level 1

10-12-2020

We have a requirement to include special attributes like async, defer, nomodule to the script tags generated by client libs. We have found there is no out of the box AEM support for this. We tried to find other options. But we are only getting following github links and not getting proper steps to install these extensions. If anyone of you has done such implementation and have an idea to share, kindly let us know.

 

https://github.com/nateyolles/aem-clientlib-async

https://wcm.io/wcm/ui/clientlibs/usage.html

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

646 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

646 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

11-12-2020

@smkswamy,

wcm.io is an Open Source project which provides libraries and extensions for AEM-based applications, very established and well known. wcm.io is widely known for it's mocking library for unit/integration. Looking at the documentation, it the client library extension tool looks very promising. Try it out, and let us know how it goes, https://wcm.io/wcm/ui/clientlibs/usage.html

Answers (3)

Answers (3)

Avatar

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile
shelly-goel
MVP

11-12-2020

@smkswamy  For these additional attributes on the clientlib, there would be two steps involved:

1. Alter the HTML markup by adding additional attributes to the script and link elements

2. Since it's a custom markup, add this logic to a Pojo class to extend the behavior of HtmlLibraryManager's writeIncludes. You can define the allowed attributes as per your case like async, defer, nomodule.

 

This is detailed here: http://www.nateyolles.com/blog/2016/06/custom-aem-html5-async-clientlibs

https://github.com/nateyolles/aem-clientlib-async

 

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

11-12-2020

Please check demo custom implementation to include clientlibs with defer or any other attribute

https://github.com/arunpatidar02/aem63app-repo/blob/master/java/ClientLibsModel.java

 

you can parameterize the implementation for clientlibs category, attribute(s) etc. 

Avatar

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile
vanegi
Employee

10-12-2020

Hi @smkswamy,

As of now, it isn’t supported in any version of AEM and as per engineering recommendation, its possible using rewriter, if the use case absolutely needs it. GRANITE-26144, GRANITE-18393 are created as an enhancement request for this feature

 

You need to create your own tag which uses the HtmlLibraryManager to get the list of includes for a particular category (or set of categories) and use those to output the appropriate HTML. One way to do this it to create a custom RequestRewriter. This essentially allows you to change what is written to the output HTML for the client lib script tag. This commons package has a code example where a request rewriter is used, and you could do something similar to rewrite the attributes for the script tag: http://adobe-consulting-services.github.io/acs-aem-commons/features/static-reference-rewriter.html.

Also see the following: https://sling.apache.org/documentation/bundles/output-rewriting-pipelines-org-apache-sling-rewriter....

http://www.wemblog.com/2011/08/how-to-remove-html-extension-from-url.html

 

You can also check this https://github.com/nateyolles/aem-clientlib-async for reference. You can use the following to add "async" attribute: <!--/* async */--> <meta data-sly-call="${clientLib.js @ categories='your.clientlib', loading='async'}" data-sly-unwrap></meta>

 

Thanks!!