From 86d0074386dfcdb65ff3f84f47405bb1e5622fc7 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Tue, 15 Aug 2017 19:17:06 -0400
Subject: [PATCH] Print ES6 import hint on each doc page

---
 config/jsdoc/api/template/tmpl/container.tmpl | 81 +++++++++++--------
 1 file changed, 47 insertions(+), 34 deletions(-)

diff --git a/config/jsdoc/api/template/tmpl/container.tmpl b/config/jsdoc/api/template/tmpl/container.tmpl
index 065f0c6dd1..5a41fdf963 100644
--- a/config/jsdoc/api/template/tmpl/container.tmpl
+++ b/config/jsdoc/api/template/tmpl/container.tmpl
@@ -10,40 +10,53 @@
 <?js } else { ?>
 
 <section>
-    
+
 <header>
     <h2><?js if (doc.ancestors && doc.ancestors.length) { ?>
         <span class="ancestors"><?js= doc.ancestors.join('') ?></span><?js } ?><?js= doc.name ?>
     <?js if (doc.variation) { ?>
         <sup class="variation"><?js= doc.variation ?></sup>
     <?js } ?></h2>
+    <br>
+    <?js if (doc.stability || doc.kind == 'namespace') {
+      var ancestors = doc.ancestors.map(a => a.replace(/>\./g, '>').replace(/\.</g, '<')).join('/');
+      var name = doc.name.toLowerCase();
+      var parts = [];
+      if (ancestors) {
+        parts.push(ancestors);
+      }
+      parts.push(name);
+      var importPath = parts.join('/');
+    ?>
+    <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>
+    <?js } ?>
     <?js if (doc.classdesc) { ?>
         <div class="class-description"><?js= doc.classdesc ?></div>
     <?js } ?>
-</header>  
+</header>
 
 <article>
     <div class="container-overview">
     <?js if (doc.kind === 'module' && doc.module) { ?>
         <?js= self.partial('method.tmpl', doc.module) ?>
     <?js } ?>
-    
+
     <?js if (doc.kind === 'class') { ?>
         <?js= self.partial('method.tmpl', doc) ?>
     <?js } else { ?>
         <?js if (doc.description) { ?>
             <div class="description"><?js= doc.description ?></div>
         <?js } ?>
-        
+
         <?js= self.partial('details.tmpl', doc) ?>
-        
+
         <?js if (doc.examples && doc.examples.length) { ?>
             <h3>Example<?js= doc.examples.length > 1? 's':'' ?></h3>
             <?js= self.partial('examples.tmpl', doc.examples) ?>
         <?js } ?>
     <?js } ?>
     </div>
-    
+
     <?js if (doc.kind == 'class') {
       var subclasses = self.find(function() {
         return this.augments && this.augments.indexOf(doc.longname) > -1;
@@ -60,52 +73,52 @@
 
     <?js if (doc.augments && doc.augments.length) { ?>
         <h3 class="subsection-title">Extends</h3>
-        
+
         <ul><?js doc.augments.forEach(function(a) { ?>
             <li><?js= self.linkto(a, a) ?></li>
         <?js }); ?></ul>
     <?js } ?>
-    
+
     <?js if (doc.mixes && doc.mixes.length) { ?>
         <h3 class="subsection-title">Mixes In</h3>
-        
+
         <ul><?js doc.mixes.forEach(function(a) { ?>
             <li><?js= self.linkto(a, a) ?></li>
         <?js }); ?></ul>
     <?js } ?>
-    
+
     <?js if (doc.requires && doc.requires.length) { ?>
         <h3 class="subsection-title">Requires</h3>
-        
+
         <ul><?js doc.requires.forEach(function(r) { ?>
             <li><?js= self.linkto(r, r) ?></li>
         <?js }); ?></ul>
     <?js } ?>
-    
+
     <?js
-        var classes = self.find({kind: 'class', memberof: doc.longname}); 
-        if (doc.kind !== 'globalobj' && classes && classes.length) { 
+        var classes = self.find({kind: 'class', memberof: doc.longname});
+        if (doc.kind !== 'globalobj' && classes && classes.length) {
     ?>
         <h3 class="subsection-title">Classes</h3>
-        
+
         <dl><?js classes.forEach(function(c) { ?>
             <dt><?js= self.linkto(c.longname, c.name) ?></dt>
             <dd><?js if (c.summary) { ?><?js= c.summary ?><?js } ?></dd>
         <?js }); ?></dl>
     <?js } ?>
-    
+
     <?js
-        var namespaces = self.find({kind: 'namespace', memberof: doc.longname}); 
-        if (doc.kind !== 'globalobj' && namespaces && namespaces.length) { 
+        var namespaces = self.find({kind: 'namespace', memberof: doc.longname});
+        if (doc.kind !== 'globalobj' && namespaces && namespaces.length) {
     ?>
         <h3 class="subsection-title">Namespaces</h3>
-        
+
         <dl><?js namespaces.forEach(function(n) { ?>
             <dt><a href="namespaces.html#<?js= n.longname ?>"><?js= self.linkto(n.longname, n.name) ?></a></dt>
             <dd><?js if (n.summary) { ?><?js= n.summary ?><?js } ?></dd>
         <?js }); ?></dl>
     <?js } ?>
-    
+
     <?js
         if (doc.observables && doc.observables.length) {
     ?>
@@ -116,32 +129,32 @@
 
     <?js
         var members = self.find({kind: 'member', memberof: title === 'Global' ? {isUndefined: true} : doc.longname});
-        if (members && members.length && members.forEach) { 
+        if (members && members.length && members.forEach) {
     ?>
         <h3 class="subsection-title">Members</h3>
-        
+
         <dl><?js members.forEach(function(p) { ?>
             <?js= self.partial('members.tmpl', p) ?>
         <?js }); ?></dl>
     <?js } ?>
-    
+
     <?js
         var methods = self.find({kind: 'function', memberof: title === 'Global' ? {isUndefined: true} : doc.longname});
-        if (methods && methods.length && methods.forEach) { 
+        if (methods && methods.length && methods.forEach) {
     ?>
         <h3 class="subsection-title">Methods</h3>
-        
+
         <dl><?js methods.forEach(function(m) { ?>
             <?js= self.partial('method.tmpl', m) ?>
         <?js }); ?></dl>
     <?js } ?>
-    
+
     <?js
-        var typedefs = self.find({kind: 'typedef', memberof: title === 'Global' ? {isUndefined: true} : doc.longname}); 
-        if (typedefs && typedefs.length && typedefs.forEach) { 
+        var typedefs = self.find({kind: 'typedef', memberof: title === 'Global' ? {isUndefined: true} : doc.longname});
+        if (typedefs && typedefs.length && typedefs.forEach) {
     ?>
         <h3 class="subsection-title">Type Definitions</h3>
-        
+
         <dl><?js typedefs.forEach(function(e) {
                 if (e.signature) {
             ?>
@@ -155,20 +168,20 @@
                 }
             }); ?></dl>
     <?js } ?>
-    
+
     <?js
-        var events = self.find({kind: 'event', memberof: title === 'Global' ? {isUndefined: true} : doc.longname}); 
-        if (events && events.length && events.forEach) { 
+        var events = self.find({kind: 'event', memberof: title === 'Global' ? {isUndefined: true} : doc.longname});
+        if (events && events.length && events.forEach) {
     ?>
         <h3 class="subsection-title">Events</h3>
-        
+
         <dl><?js events.forEach(function(e) { ?>
             <?js= self.partial('method.tmpl', e) ?>
         <?js }); ?></dl>
     <?js } ?>
 </article>
 
-</section>  
+</section>
 <?js } ?>
 
 <?js }); ?>