How to emit the server path to the current file?

[valcohen]

I have some components that I've broken into multiple smaller files. The main file includes them using data-sly-include attributes.

I'd like to generate HTML comments containing the current filename in both the main file and the included files, so that when I view the rendered output I can easily tell which file generated the output. Something like:

... some HTML from the template or other components...

<!-- begin /path/to/main/file.html -->

<div>

    This is from the main file

    <!-- begin  /path/to/main/includes/first.html -->

    <p>This is fromt the first include</p>

    <!-- end /path/to/main/includes/first.html -->

    <!-- begin  /path/to/main/includes/second.html -->

    <p>This is fromt the second include</p>

    <!-- end /path/to/main/includes/second.html -->

    now we're back in the main file

<!-- end /path/to/main/file.html -->

I can see how to get the path to the current page, but that's the resource that contains my component; I want the paths to the files that make up the components. Any way to do this in Sightly?

[kautuk_sahni]

Just add a HTML comment/Or current path at component level and whenever that component gets included in the page template you can see that comment/path in the response HTML.

More information at ClientLibs level also you can do debugging by adding ?debugClientLibs=true to the URL.

Just add a query parameter in the page URL. “?debugClientLibs=true”, there will be separate network calls for each clientlibs. So debugging of js/css individual files will be easy.

Source :- http://aempodcast.com/2014/front-end-engineering/debug-client-libs-adobe-experience-manager-formerly...

~kautuk

[valcohen]

Sorry, I should have been more clear. I want a way to automatically inject the path to the current file. I don't want to hard-code it; I want a single snippet of code I can drop into each file that echoes the current path. That way, if I move the file, the comment automatically updates. I did this just the recently -- I refactored a component into smaller fragments, and then a few days later I re-organized the fragments into subfolders and renamed some of them for clarity. If I had hard-coded comments, I'd have to remember to update them in all the files.

The debugClientLibs trick doesn't address my need. I'm including these file fragments on the server-side; by the time they're in a clientLib they've been merged. That's exactly why I want this feature -- so I can tell where the server-side fragments begin and end.

[valcohen · Accepted solution]

I posted this on StackOverflow at aem - How to emit the server path to the current file using Sightly? - Stack Overflow

and got a satisfactory answer:

Create a JavaScript file that asks Sling for the path to the current file:

component-path.js:

use( function() {

    return { "path" : sling.getScript().getScriptResource().getPath() };

});

Then reference this where needed in the component markup:

<sly data-sly-use.currentFile="component-path.js"><!--  begin: ${currentFile.path} --></sly>

This results in an HTML comment like

<!--  begin: /apps/path/to/my/component.html -->

One thing to watch out for: the path to the script is relative to the markup file calling it in the data-sly-use attribute. If the path can't be resolved, the component won't render. In the example above, component-path.js is in the same directory as the component markup. if the markup were in a subdirectory, I'd have to refer to the script a level above: "../component-path.js". And to make it global, I should probably store the script somewhere else and refer to an absolute path, like "/etc/designs/path/to/global/scripts/component-path.js"