Feature: bower.json to cq:ClientLibraryFolder

[dherges]

Hi,

this is a feature request / proposal.

At our company, we have an AEM workflow, where we user bower for dependency and package management of our frontend components. bower install extracts the components in a public JCR node, e.g. /etc/clientlibs/project. In a quick'n'dirty draft, I wrote a grunt task that reads the bower list --json command and generates a .content.xml file for each component so that they become cq:ClientLibraryFolders once they're deployed to an AEM server.

Idea is to write a grunt plugin hat automates all that stuff and is configurable (pathes, prefixes, etc.). Goal is to have a bower.json file and then run a single task grunt:bower-aem, resulting in all the packages being ready to be deployed to AEM.

Just let me know if that is of any interest to you.

Cheers, David

Quick draft:

  /**
   * AEM-enabling grunt task that generates a '.content.xml' files in the target folder of each bower dependency so
   * that bower packages are recognized as client libraries in AEM
   */
  grunt.registerTask(
    'generateClientLibraries',
    'Generates a \'.content-xml\' for each bower dependency so that it becomes a \'cq:ClientLibraryFolder\' that is recognized by AEM.',
    function() {
      var aemFriendlyPkgName = function(pkgName) { // 'typeahead.js' is a very evil clientlib name for AEM
        return "procato." + pkgName.replace('.', '');
      }
      var components = grunt.file.readJSON('bower_components.json').dependencies;

      for (var compName in components) {
        var comp = components[compName];
        // file path: '<%= vendor %>/{package}/.content.xml'
        var path = grunt.template.process('<%= vendor %>/<%= pkgDirectory %>/.content.xml', {
          data: {
            vendor: grunt.config.get('vendor'),
            pkgDirectory: comp.endpoint.name
          }
        });

        var dependencies = grunt.util
          .toArray(comp.dependencies)
          .map(function(dependency) {
            return aemFriendlyPkgName(dependency.pkgMeta.name)
          });

        // .content.xml template
        var xmlTemplate = '<?xml version="1.0" encoding="UTF-8"?>' + "\n" +
          '<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"' + "\n" +
          '    jcr:primaryType="cq:ClientLibraryFolder"' + "\n" +
          '    categories="[<%= pkgName %>]"' + "\n" +
          '    dependencies="[<%= deps.join(", ") %>]"/>';

        var xmlContents = grunt.template.process(xmlTemplate, {
          data: {
            pkgName: aemFriendlyPkgName(compName),
            deps: dependencies
          }
        });

        grunt.file.write(path, xmlContents);
      }
  });

[RaymondLim]

@dherges You can take a look at brackets-grunt and see it can help your workflow.

[dangoor]

Adding the extension idea label as this does not sound like something we'd have in Brackets core itself. (We close the extension idea issues as we are not directly working on them, but they are still available in searches...)

[dherges]

Well, I'll put it together in a grunt plugin https://github.com/dherges/grunt-bower

[tallbrick]

@dherges did you ever roll up your above 'bower-aem' code into a grunt plugin?

[dherges]

Eh yes.

https://github.com/dherges/grunt-bower-event https://github.com/dherges/grunt-bower-event/blob/master/tasks/lib/AemClientLibsListener.js

Do you need a working example? Haven't tried this out for a while ...