Get path for clientlibs files - aem

Question

I'm trying to preload assets like explained here.
I've included these in /apps/foundation/components/page/head.html:
<sly data-sly-use.appConfig="${'../../../utils/AppConfig.js'}">
<link rel="preload" href="${appConfig.assetsURL}/etc/designs/myapp/jquery/jquery-3.1.1.min.js">
<link rel="preload" href="${appConfig.mainStyle}/mainstyle.css">
</sly>
Now the final files that need to be included are clientlibs.js and clientlibs.css which are put together for each page, having a different paths depending on the page. For example for homepage (/content/homepage.html) the path to clientlibs.js is /etc/designs/myapp/homepage/clientlibs.js whereas for recent posts (/content/recent-posts.html) the path is /etc/designs/myapp/posts/clientlibs.js
The question is how do I compose the URL for these assets?
I tried using global variables from this gist but with no luck. Neither of them return the right path to the assets.

Answer 1

Since the mapping of clientlibs paths to pages seems to be application-specific, you will need to implement a way to detect the page type and needed clientlibs.
You could use clientlib categories to assemble the correct bits for each page type (have a look at https://docs.adobe.com/docs/en/aem/6-3/develop/the-basics/clientlibs.html and how clientlib inclusion is implemented in /libs/granite/sightly/templates).
Also, if using AEM 6.3, consider using editable templates and setting the clientlibs at template level.
If you already use clientlib categories and just want to rewrite the output of clientlib include you can create your own helper to extract the URLs:
package apps.test;
import javax.script.Bindings;
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import org.apache.sling.scripting.sightly.pojo.Use;
import libs.granite.sightly.templates.ClientLibUseObject;
public class Test implements Use {
ClientLibUseObject obj = null;
Pattern pattern = Pattern.compile("(?:href|src)=\"(.*?)\"");
List<String> srcs = null;
public void init(Bindings bindings) {
obj = (ClientLibUseObject) bindings.get("clientLibUseObject");
}
public List<String> getSrcs() {
if (srcs == null && obj != null) {
srcs = new ArrayList<>();
String tmp = obj.include();
Matcher matcher = pattern.matcher(tmp);
while (matcher.find()) {
srcs.add(matcher.group(1));
}
}
return srcs;
}
}
and then call it in your scripts:
<link data-sly-use.clientLibUseObject="${'libs.granite.sightly.templates.ClientLibUseObject' # categories='jquery,jquery-ui', mode='all'}"
data-sly-use.rewriter="${'Test' # clientLibUseObject=clientLibUseObject}"
data-sly-repeat="${rewriter.srcs}"
rel="preload" href="${item}"/>