Get path for clientlibs files

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.

Vlad · Answer 1 · 2017-10-19T13:23:48.420

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}"/>

I am actually using templates and setting the clientlibs at this level, using the `categories` property. (``) But in head where we need to create link tags I only need the assets' url, not the whole script tag. It seems like solving this resumes to getting the assets' url from the categories prop. Any idea how I could achieve this? — Tiberiu Maxim, Oct 09 '17 at 12:32
Thx @vlad. i had this on hold but resumed it now. When I try to run your example, I get `package org.apache.sling.scripting.sightly.pojo does not exist`. I have no idea how to add this in my project. Can you offer help in this direction please? — Tiberiu Maxim, Nov 06 '17 at 15:48
We are currently switching over from 6.1 to 6.3. So I should be have this implemented in 6.3 — Tiberiu Maxim, Nov 07 '17 at 17:13
Googled it and I've been able to inlcude Use from `import io.sightly.java.api.Use;` Now I get another package error: `package libs.granite.sightly.templates does not exist` — Tiberiu Maxim, Nov 07 '17 at 17:16

Get path for clientlibs files

1 Answers1