api-builder: render pipes with specialised template

Author: petebacondarwin

public/resources/css/module/_api.scss

@@ -8,6 +8,10 @@
     content: 'D';
     background: #db4437;
   }
+  &.pipe:before {
+    content: 'P';
+    background: #78909C;
+  }
   &.class:before {
     content: 'C';
     background: #4285f4;

public/resources/js/directives/api-list.js

@@ -31,6 +31,7 @@ angularIO.directive('apiList', function () {
       $ctrl.apiTypes = [
         { cssClass: 'stable', title: 'Stable', matches: ['stable']},
         { cssClass: 'directive', title: 'Directive', matches: ['directive'] },
+        { cssClass: 'pipe', title: 'Pipe', matches: ['pipe'] },
         { cssClass: 'decorator', title: 'Decorator', matches: ['decorator'] },
         { cssClass: 'class', title: 'Class', matches: ['class'] },
         { cssClass: 'interface', title: 'Interface', matches: ['interface'] },

tools/api-builder/angular.io-package/index.js

@@ -16,7 +16,6 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
 .factory(require('./services/renderMarkdown'))
 .processor(require('./processors/addJadeDataDocsProcessor'))
 .processor(require('./processors/filterUnwantedDecorators'))
-.processor(require('./processors/extractDirectiveClasses'))
 .processor(require('./processors/matchUpDirectiveDecorators'))
 .processor(require('./processors/filterMemberDocs'))
 
@@ -100,7 +99,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
 })
 
 
-.config(function(readFilesProcessor, generateNavigationDoc, createOverviewDump) {
+.config(function(readFilesProcessor, generateNavigationDoc) {
   // Clear out unwanted processors
   generateNavigationDoc.$enabled = false;
 })

tools/api-builder/angular.io-package/processors/extractDirectiveClasses.spec.js

@@ -0,0 +1,29 @@
+{% include "lib/githubLinks.html" -%}
+{% include "lib/paramList.html" -%}
+{% extends 'layout/base.template.html' -%}
+
+{% block body %}
+include {$ relativePath(doc.path, '_util-fns') $}
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+div(layout="row" layout-xs="column" class="row-margin ng-cloak")
+  div(flex="20" flex-xs="100")
+    h2(class="h2-api-docs") Description
+  div(class="code-links" flex="80" flex-xs="100")
+    :marked
+    {%- if doc.description.length > 2 %}
+{$ doc.description | indentForMarkdown(6) | trimBlankLines $}
+    {% endif %}
+
+p(class="location-badge").
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
+  defined in {$ githubViewLink(doc) $}
+
+{% endblock %}

tools/api-builder/angular.io-package/templates/pipe.template.html

@@ -11,14 +11,14 @@ module.exports = new Package('angular-v2-docs', [jsdocPackage, nunjucksPackage,
 
 // Register the processors
 .processor(require('./processors/convertPrivateClassesToInterfaces'))
-.processor(require('./processors/extractDirectiveClasses'))
 .processor(require('./processors/generateNavigationDoc'))
 .processor(require('./processors/extractTitleFromGuides'))
 .processor(require('./processors/createOverviewDump'))
 .processor(require('./processors/checkUnbalancedBackTicks'))
 .processor(require('./processors/convertBackticksToCodeBlocks'))
 .processor(require('./processors/addNotYetDocumentedProperty'))
 .processor(require('./processors/mergeDecoratorDocs'))
+.processor(require('./processors/extractDecoratedClasses'))
 
 .config(function(parseTagsProcessor) {
   parseTagsProcessor.tagDefinitions.push({ name: 'internal', transforms: function() { return true; } });

tools/api-builder/docs-package/index.js

@@ -1,14 +1,14 @@
 var _ = require('lodash');
 
-module.exports = function extractDirectiveClassesProcessor(EXPORT_DOC_TYPES) {
+module.exports = function extractDecoratedClassesProcessor(EXPORT_DOC_TYPES) {
 
   // Add the "directive" docType into those that can be exported from a module
-  EXPORT_DOC_TYPES.push('directive');
+  EXPORT_DOC_TYPES.push('directive', 'pipe');
 
   return {
     $runAfter: ['processing-docs'],
     $runBefore: ['docs-processed'],
-    decoratorTypes: ['Directive', 'Component'],
+    decoratorTypes: ['Directive', 'Component', 'Pipe'],
     $process: function(docs) {
       var decoratorTypes = this.decoratorTypes;
 
@@ -17,9 +17,8 @@ module.exports = function extractDirectiveClassesProcessor(EXPORT_DOC_TYPES) {
         _.forEach(doc.decorators, function(decorator) {
 
           if (decoratorTypes.indexOf(decorator.name) !== -1) {
-            doc.docType = 'directive';
-
-            doc[decorator.name.toLowerCase() + 'Options'] = decorator.argumentInfo[0];
+            doc.docType = decorator.name.toLowerCase();
+            doc[doc.docType + 'Options'] = decorator.argumentInfo[0];
           }
         });
       });

tools/api-builder/angular.io-package/processors/extractDirectiveClasses.js renamed to tools/api-builder/docs-package/processors/extractDecoratedClasses.js

@@ -0,0 +1,58 @@
+var mockPackage = require('../mocks/mockPackage');
+var Dgeni = require('dgeni');
+
+describe('extractDecoratedClasses processor', function() {
+  var dgeni, injector, processor;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([mockPackage()]);
+    injector = dgeni.configureInjector();
+    processor = injector.get('extractDecoratedClassesProcessor');
+  });
+
+  it('should extract specified decorator arguments', function() {
+    var doc1 = {
+      id: '@angular/common/ngFor',
+      name: 'ngFor',
+      docType: 'class',
+      decorators: [
+        {
+          name: 'Directive',
+          arguments: ['{selector: \'[ng-for][ng-for-of]\', properties: [\'ngForOf\']}'],
+          argumentInfo: [
+            { selector: '[ng-for][ng-for-of]', properties: ['ngForOf'] }
+          ]
+        }
+      ]
+    };
+    var doc2 = {
+      id: '@angular/core/DecimalPipe',
+      name: 'DecimalPipe',
+      docType: 'class',
+      decorators: [
+        { name: 'Pipe', arguments: ['{name: \'number\'}'], argumentInfo: [{ name: 'number' }]}
+      ]
+    };
+
+    processor.$process([doc1, doc2]);
+
+    expect(doc1).toEqual(jasmine.objectContaining({
+      id: '@angular/common/ngFor',
+      name: 'ngFor',
+      docType: 'directive',
+      directiveOptions: {
+        selector: '[ng-for][ng-for-of]',
+        properties: ['ngForOf']
+      }
+    }));
+
+    expect(doc2).toEqual(jasmine.objectContaining({
+      id: '@angular/core/DecimalPipe',
+      name: 'DecimalPipe',
+      docType: 'pipe',
+      pipeOptions: {
+        name: 'number'
+      }
+    }));
+  });
+});

tools/api-builder/docs-package/processors/extractDecoratedClasses.spec.js

@@ -52,7 +52,7 @@ module.exports = new Package('dart-api-and-cheatsheet-builder', [basePackage, ta
 
   .config(function (convertPrivateClassesToInterfacesProcessor,
     createOverviewDump,
-    extractDirectiveClassesProcessor,
+    extractDecoratedClassesProcessor,
     extractJSDocCommentsProcessor,
     extractTitleFromGuides,
     generateNavigationDoc,
@@ -62,7 +62,7 @@ module.exports = new Package('dart-api-and-cheatsheet-builder', [basePackage, ta
     // Clear out unwanted processors
     createOverviewDump.$enabled = false;
     convertPrivateClassesToInterfacesProcessor.$enabled = false;
-    extractDirectiveClassesProcessor.$enabled = false;
+    extractDecoratedClassesProcessor.$enabled = false;
     extractJSDocCommentsProcessor.$enabled = false;
     extractTitleFromGuides.$enabled = false;
     generateNavigationDoc.$enabled = false;