Author Watch

Introduction

Author watch is a simple tool to detect AEM authoring changes and execute a list of javascript functions against the DOM parent element that was changed.

It was created to:

1. Avoid the heavy use of REFRESH_PAGE to re-execute javascript.
2. Avoid writing author-related javascript in visitor-facing code.
3. Avoid the use of MutationObserver in visitor-facing code.

Tutorial

Step 1 - Add the clientlib to customfooterlibs.html

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-test="${!wcmmode.disabled}" data-sly-call="${clientlib.js @ categories='dx.admin.author'}"></sly>
</sly>

Example: https://github.com/adobe/adobe-dx/blob/master/apps/structure/app/jcr_root/apps/dx/structure/components/page/customfooterlibs.html

Step 2 - Register your functions with Author Watch

const initMyCoolThing = (element) => {
    console.log('my cool thing was edited');
};

window.dx.author.watch.registerFunction(initMyCoolThing);

Example: https://github.com/adobe/adobe-dx/blob/master/apps/content/app/jcr_root/apps/dx/content/clientlibs/marketoAuthor/src/js/app.js

Step 3 - Edit a component on a page

(does this count as a step three?)