api-builder: render pipes with specialised template

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

@@ -1,51 +0,0 @@
-var mockPackage = require('../mocks/mockPackage');
-var Dgeni = require('dgeni');
-
-describe('extractDirectiveClasses processor', function() {
-  var dgeni, injector, processor;
-
-  beforeEach(function() {
-    dgeni = new Dgeni([mockPackage()]);
-    injector = dgeni.configureInjector();
-    processor = injector.get('extractDirectiveClassesProcessor');
-  });
-
-  it('should extract specified decorator arguments', function() {
-    var doc = {
-      id: 'angular2/angular2.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 docs = processor.$process([doc]);
-
-    expect(doc).toEqual(jasmine.objectContaining({
-      id: 'angular2/angular2.ngFor',
-      name: 'ngFor',
-      docType: 'directive',
-      decorators: [
-        {
-          name: 'Directive',
-          arguments: ['{selector: \'[ng-for][ng-for-of]\', properties: [\'ngForOf\']}'],
-          argumentInfo: [
-            { selector: '[ng-for][ng-for-of]', properties: ['ngForOf'] }
-          ]
-        }
-      ]
-    }));
-
-    expect(doc.directiveOptions).toEqual({
-      selector: '[ng-for][ng-for-of]',
-      properties: ['ngForOf']
-    });
-  });
-});

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

@@ -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/docs-package/index.js

@@ -11,7 +11,6 @@ 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'))
@@ -19,6 +18,7 @@ module.exports = new Package('angular-v2-docs', [jsdocPackage, nunjucksPackage,
 .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/processors/extractDecoratedClasses.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.docType = decorator.name.toLowerCase();
-
+            doc[doc.docType + 'Options'] = decorator.argumentInfo[0];
-            doc[decorator.name.toLowerCase() + 'Options'] = decorator.argumentInfo[0];
           }
         });
       });

tools/api-builder/docs-package/processors/extractDecoratedClasses.spec.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/extractDirectiveClasses.js

@@ -1,32 +0,0 @@
-var _ = require('lodash');
-var vm = require('vm');
-
-module.exports = function extractDirectiveClassesProcessor() {
-  return {
-    $runAfter: ['processing-docs'],
-    $runBefore: ['docs-processed'],
-    decoratorTypes: ['Directive', 'Component', 'View'],
-    $process: function(docs) {
-      var decoratorTypes = this.decoratorTypes;
-
-      _.forEach(docs, function(doc) {
-
-        _.forEach(doc.decorators, function(decorator) {
-
-          if (decoratorTypes.indexOf(decorator.name) !== -1) {
-
-            // We use this sneaky vm trick to extract the object literal
-            // argument from the decorator's constructor call
-            var args = decorator.arguments ?
-              vm.runInNewContext('dummy = ' + decorator.arguments[0]) : {};
-
-            doc[decorator.name.toLowerCase() + 'Options'] = args;
-            doc.docType = 'directive';
-          }
-        });
-      });
-
-      return docs;
-    }
-  };
-};

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

@@ -1,45 +0,0 @@
-var mockPackage = require('../mocks/mockPackage');
-var Dgeni = require('dgeni');
-
-describe('extractDirectiveClasses processor', function() {
-  var dgeni, injector, processor;
-
-  beforeEach(function() {
-    dgeni = new Dgeni([mockPackage()]);
-    injector = dgeni.configureInjector();
-    processor = injector.get('extractDirectiveClassesProcessor');
-  });
-
-  it('should extract specified decorator arguments', function() {
-    var doc = {
-      id: 'angular2/angular2.ngFor',
-      name: 'ngFor',
-      docType: 'class',
-      decorators: [
-        {
-          name: 'Directive',
-          arguments: ['{selector: \'[ng-for][ng-for-of]\', properties: [\'ngForOf\']}']
-        }
-      ]
-    };
-
-    var docs = processor.$process([doc]);
-
-    expect(doc).toEqual(jasmine.objectContaining({
-      id: 'angular2/angular2.ngFor',
-      name: 'ngFor',
-      docType: 'directive',
-      decorators: [
-        {
-          name: 'Directive',
-          arguments: ['{selector: \'[ng-for][ng-for-of]\', properties: [\'ngForOf\']}']
-        }
-      ]
-    }));
-
-    expect(doc.directiveOptions).toEqual({
-      selector: '[ng-for][ng-for-of]',
-      properties: ['ngForOf']
-    });
-  });
-});

tools/dart-api-builder/index.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;