fix(aio): correctly render decorator docs (#14328)

This commit updates the doc-gen to account
for the changes to the codebase for decorators.

There are actually three kinds of calls that create decorators:

* makeDecorator
* makePropDecorator
* makeParamDecorator

Also, the actual documentation for each
decorator is split between two exported symbols:

* `interface [DecoratorName]` contains the metadata fields
* interface [DecoratorName]Decorator` contains a
  "call member" which holds the general description of the decorator.

This processor now identifies all three decorator types, and pulls the
description of the callMember onto the main decorator doc description.

(There are some outstanding interfaces in the angular/angular project that
need to be re-exported from `/angular/modules/@angular/core/src/metadata.ts`
to ensure that the doc-gen is able to access them.)

Closes https://github.com/angular/angular.io/pull/2349

docs/templates/includes/_metadata.html

@@ -1,8 +1,8 @@
-{% if doc.metadataDoc and doc.metadataDoc.members.length %}
+{% if doc.members.length %}
 <section class="meta-data">
   <h2>Metadata Properties</h2>
   <div class="description">
-    {% for metadata in doc.metadataDoc.members %}{% if not metadata.internal %}
+    {% for metadata in doc.members %}{% if not metadata.internal %}
     <div class="metadata-member">
       <a name="{$ metadata.name $}-anchor" class="anchor-offset"></a>
       <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ metadata.name $}') }">

tools/docs/angular.io-package/processors/mergeDecoratorDocs.js

@@ -1,61 +1,47 @@
 var _ = require('lodash');
 
-module.exports = function mergeDecoratorDocs() {
+module.exports = function mergeDecoratorDocs(log) {
   return {
     $runAfter: ['processing-docs'],
     $runBefore: ['docs-processed'],
-    docsToMergeInfo: [
+    makeDecoratorCalls: [
-      {nameTemplate: _.template('${name}Decorator'), decoratorProperty: 'decoratorInterfaceDoc'}, {
+      {type: '', description: 'toplevel'},
-        nameTemplate: _.template('${name}Metadata'),
+      {type: 'Prop', description: 'property'},
-        decoratorProperty: 'metadataDoc',
+      {type: 'Param', description: 'parameter'},
-        useFields: ['howToUse', 'whatItDoes']
-      },
-      {nameTemplate: _.template('${name}MetadataType'), decoratorProperty: 'metadataInterfaceDoc'},
-      {
-        nameTemplate: _.template('${name}MetadataFactory'),
-        decoratorProperty: 'metadataFactoryDoc'
-      }
     ],
     $process: function(docs) {
 
-      var docsToMergeInfo = this.docsToMergeInfo;
+      var makeDecoratorCalls = this.makeDecoratorCalls;
       var docsToMerge = Object.create(null);
 
       docs.forEach(function(doc) {
 
-        // find all the decorators, signified by a call to `makeDecorator(metadata)`
+        makeDecoratorCalls.forEach(function(call) {
-        var makeDecorator = getMakeDecoratorCall(doc);
+          // find all the decorators, signified by a call to `makeDecorator(metadata)`
-        if (makeDecorator) {
+          var makeDecorator = getMakeDecoratorCall(doc, call.type);
-          doc.docType = 'decorator';
+          if (makeDecorator) {
-          // get the type of the decorator metadata
+            log.debug('mergeDecoratorDocs: found decorator', doc.docType, doc.name);
-          doc.decoratorType = makeDecorator.arguments[0].text;
+            doc.docType = 'decorator';
-          // clear the symbol type named (e.g. ComponentMetadataFactory) since it is not needed
+            doc.decoratorLocation = call.description;
-          doc.symbolTypeName = undefined;
+            // get the type of the decorator metadata
+            doc.decoratorType = makeDecorator.arguments[0].text;
+            // clear the symbol type named (e.g. ComponentMetadataFactory) since it is not needed
+            doc.symbolTypeName = undefined;
 
-          // keep track of the docs that need to be merged into this decorator doc
+            // keep track of the names of the docs that need to be merged into this decorator doc
-          docsToMergeInfo.forEach(function(info) {
+            docsToMerge[doc.name + 'Decorator'] = doc;
-            docsToMerge[info.nameTemplate({name: doc.name})] = {
+          }
-              decoratorDoc: doc,
+        });
-              property: info.decoratorProperty
-            };
-          });
-        }
       });
 
       // merge the metadata docs into the decorator docs
       docs = docs.filter(function(doc) {
         if (docsToMerge[doc.name]) {
-          var decoratorDoc = docsToMerge[doc.name].decoratorDoc;
+          var decoratorDoc = docsToMerge[doc.name];
-          var property = docsToMerge[doc.name].property;
+          log.debug(
-          var useFields = docsToMerge[doc.name].useFields;
+              'mergeDecoratorDocs: merging', doc.name, 'into', decoratorDoc.name,
-
+              doc.callMember.description.substring(0, 50));
-          // attach this document to its decorator
+          decoratorDoc.description = doc.callMember.description;
-          decoratorDoc[property] = doc;
-
-          // Copy over fields from the merged doc if specified
-          if (useFields) {
-            useFields.forEach(function(field) { decoratorDoc[field] = doc[field]; });
-          }
 
           // remove doc from its module doc's exports
           doc.moduleDoc.exports =

tools/docs/angular.io-package/processors/mergeDecoratorDocs.spec.js

@@ -2,7 +2,7 @@ var testPackage = require('../../helpers/test-package');
 var Dgeni = require('dgeni');
 
 describe('mergeDecoratorDocs processor', function() {
-  var dgeni, injector, processor, decoratorDoc, otherDoc;
+  var dgeni, injector, processor, decoratorDoc, decoratorDocWithTypeAssertion, otherDoc;
 
   beforeEach(function() {
     dgeni = new Dgeni([testPackage('angular.io-package')]);
@@ -13,9 +13,8 @@ describe('mergeDecoratorDocs processor', function() {
       name: 'X',
       docType: 'var',
       exportSymbol: {
-        valueDeclaration: {
+        valueDeclaration:
-          initializer: {expression: {text: 'makeDecorator'}, arguments: [{text: 'XMetadata'}]}
+            {initializer: {expression: {text: 'makeDecorator'}, arguments: [{text: 'X'}]}}
-        }
       }
     };
 
@@ -25,11 +24,8 @@ describe('mergeDecoratorDocs processor', function() {
       exportSymbol: {
         valueDeclaration: {
           initializer: {
-            expression: {
+            expression:
-              type: {},
+                {type: {}, expression: {text: 'makeDecorator'}, arguments: [{text: 'Y'}]}
-              expression: {text: 'makeDecorator'},
-              arguments: [{text: 'YMetadata'}]
-            }
           }
         }
       }
@@ -55,7 +51,7 @@ describe('mergeDecoratorDocs processor', function() {
 
   it('should extract the "type" of the decorator meta data', function() {
     processor.$process([decoratorDoc, decoratorDocWithTypeAssertion, otherDoc]);
-    expect(decoratorDoc.decoratorType).toEqual('XMetadata');
+    expect(decoratorDoc.decoratorType).toEqual('X');
-    expect(decoratorDocWithTypeAssertion.decoratorType).toEqual('YMetadata');
+    expect(decoratorDocWithTypeAssertion.decoratorType).toEqual('Y');
   });
 });