feat(app): ##648 Add style url data to component documentation

src/app/application.ts

@@ -1239,6 +1239,37 @@ export class Application {
         );
     }
 
+    private handleStyleurl(component): Promise<any> {
+        let dirname = path.dirname(component.file);
+
+        let styleDataPromise = component.styleUrls.map((styleUrl) => {
+            let stylePath = path.resolve(dirname + path.sep + styleUrl);
+
+            if (!this.fileEngine.existsSync(stylePath)) {
+                let err = `Cannot read style for ${component.name}`;
+                logger.error(err);
+                return new Promise((resolve, reject) => {});
+            }
+
+            return new Promise((resolve, reject) => {
+                this.fileEngine.get(stylePath).then(data => {
+                    resolve({
+                        data,
+                        styleUrl
+                    });
+                });
+            });
+        });
+
+        return Promise.all(styleDataPromise).then(
+            data => (component.styleData = data),
+            err => {
+                logger.error(err);
+                return Promise.reject('');
+            }
+        );
+    }
+
     private getNavTabs(dependency): Array<any> {
         let navTabConfig = this.configuration.mainData.navTabConfig;
         navTabConfig = navTabConfig.length === 0 ? _.cloneDeep(COMPODOC_CONSTANTS.navTabDefinitions) : navTabConfig;
@@ -1267,6 +1298,7 @@ export class Application {
             if (customTab.id === 'readme' && !dependency.readme) { return; }
             if (customTab.id === 'example' && !dependency.exampleUrls) { return; }
             if (customTab.id === 'templateData' && (!dependency.templateUrl || dependency.templateUrl.length === 0)) { return; }
+            if (customTab.id === 'styleData' && (!dependency.styleUrls || dependency.styleUrls.length === 0)) { return; }
 
             navTabs.push(navTab);
         });
@@ -1360,6 +1392,22 @@ at least one config for the 'info' or 'source' tab in --navTabConfig.`);
                             i++;
                             loop();
                         }
+
+                        if (component.styleUrls.length > 0) {
+                            logger.info(` ${component.name} has a styleUrl, include it`);
+                            this.handleStyleurl(component).then(
+                                () => {
+                                    i++;
+                                    loop();
+                                },
+                                e => {
+                                    logger.error(e);
+                                }
+                            );
+                        } else {
+                            i++;
+                            loop();
+                        }
                     } else {
                         let page = {
                             path: 'components',
@@ -1390,6 +1438,22 @@ at least one config for the 'info' or 'source' tab in --navTabConfig.`);
                             i++;
                             loop();
                         }
+
+                        if (component.styleUrls.length > 0) {
+                            logger.info(` ${component.name} has a styleUrl, include it`);
+                            this.handleStyleurl(component).then(
+                                () => {
+                                    i++;
+                                    loop();
+                                },
+                                e => {
+                                    logger.error(e);
+                                }
+                            );
+                        } else {
+                            i++;
+                            loop();
+                        }
                     }
                 } else {
                     mainResolve();

src/app/configuration.ts

@@ -45,6 +45,7 @@ export class Configuration implements ConfigurationInterface {
         disableSourceCode: COMPODOC_DEFAULTS.disableSourceCode,
         disableDomTree: COMPODOC_DEFAULTS.disableDomTree,
         disableTemplateTab: COMPODOC_DEFAULTS.disableTemplateTab,
+        disableStyleTab: COMPODOC_DEFAULTS.disableStyleTab,
         disableGraph: COMPODOC_DEFAULTS.disableGraph,
         disableMainGraph: COMPODOC_DEFAULTS.disableMainGraph,
         disableCoverage: COMPODOC_DEFAULTS.disableCoverage,

src/app/interfaces/main-data.interface.ts

@@ -39,6 +39,7 @@ export interface MainDataInterface {
     disableSourceCode: boolean;
     disableDomTree: boolean;
     disableTemplateTab: boolean;
+    disableStyleTab: boolean;
     disableGraph: boolean;
     disableMainGraph: boolean;
     disableCoverage: boolean;

src/index-cli.ts

@@ -97,7 +97,7 @@ export class CliApplication extends Application {
                 '--navTabConfig <tab configs>',
                 `List navigation tab objects in the desired order with two string properties ("id" and "label"). \
 Double-quotes must be escaped with '\\'. \
-Available tab IDs are "info", "readme", "source", "templateData", "tree", and "example". \
+Available tab IDs are "info", "readme", "source", "templateData", "styleData", "tree", and "example". \
 Note: Certain tabs will only be shown if applicable to a given dependency`,
                 list,
                 JSON.stringify(COMPODOC_DEFAULTS.navTabConfig)
@@ -137,6 +137,7 @@ Note: Certain tabs will only be shown if applicable to a given dependency`,
             )
             .option('--disableDomTree', 'Do not add dom tree tab', false)
             .option('--disableTemplateTab', 'Do not add template tab', false)
+            .option('--disableStyleTab', 'Do not add style tab', false)
             .option('--disableGraph', 'Do not add the dependency graph', false)
             .option('--disableCoverage', 'Do not add the documentation coverage report', false)
             .option('--disablePrivate', 'Do not show private in generated documentation', false)

src/templates/partials/component.hbs

@@ -36,6 +36,15 @@
     </div>
     {{/isTabEnabled}}
 
+    {{#isTabEnabled navTabs "styleData"}}
+    <div class="tab-pane fade {{#isInitialTab navTabs "styleData"}}active in{{/isInitialTab}}" id="c-styleData">
+        {{#each component.styleData}}
+            <p>{{ styleUrl }}</p>
+            <pre class="line-numbers"><code class="language-scss">{{ data }}</code></pre>
+        {{/each}}
+    </div>
+    {{/isTabEnabled}}
+
     {{#isTabEnabled navTabs "tree"}}
     <div class="tab-pane fade {{#isInitialTab navTabs "tree"}}active in{{/isInitialTab}}" id="c-tree">
         <div id="tree-container"></div>

src/utils/constants.ts

@@ -28,6 +28,13 @@ export const COMPODOC_CONSTANTS = {
             'label': 'Template',
             'depTypes': ['component']
         },
+        {
+            'id': 'styleData',
+            'href': '#styleData',
+            'data-link': 'style',
+            'label': 'Style',
+            'depTypes': ['component']
+        },
         {
             'id': 'tree',
             'href': '#tree',

src/utils/defaults.ts

@@ -16,6 +16,7 @@ export const COMPODOC_DEFAULTS = {
     disableSourceCode: false,
     disableDomTree: false,
     disableTemplateTab: false,
+    disableStyleTab: false,
     disableGraph: false,
     disableMainGraph: false,
     disableCoverage: false,

test/src/bar.component.ts

@@ -4,6 +4,7 @@ import { BarService } from './bar.service';
 @Component({
 	selector: 'app-bar',
 	templateUrl: `bar.template.html`,
+	styleUrl: ['bar.style.scss']
 	providers: [BarService]
 
 })

test/src/cli/cli-generation.spec.ts

@@ -717,7 +717,34 @@ describe('CLI simple generation', () => {
             expect(index).to.not.contain('id="templateData-tab"');
         });
     });
-
+
+    describe('when generation with --disableStyleTab flag', () => {
+
+        let stdoutString = undefined,
+            index = undefined;
+        before(function (done) {
+            tmp.create(distFolder);
+            let ls = shell('node', [
+                './bin/index-cli.js',
+                '-p', './test/src/sample-files/tsconfig.simple.json',
+                '--disableStyleTab',
+                '-d', distFolder]);
+
+            if (ls.stderr.toString() !== '') {
+                console.error(`shell error: ${ls.stderr.toString()}`);
+                done('error');
+            }
+            stdoutString = ls.stdout.toString();
+            done();
+        });
+        after(() => tmp.clean(distFolder));
+
+        it('should not contain style tab', () => {
+            index = read(`${distFolder}/components/BarComponent.html`);
+            expect(index).to.not.contain('id="styleData-tab"');
+        });
+    });
+
     describe('when generation with --disableGraph flag', () => {
 
         let stdoutString = undefined,

test/src/cli/cli-options.spec.ts

@@ -92,7 +92,7 @@ describe('CLI Options', () => {
             expect(runHelp.stdout.toString()).to.contain(
 `List navigation tab objects in the desired order with two string properties ("id" and "label"). \
 Double-quotes must be escaped with '\\'. \
-Available tab IDs are "info", "readme", "source", "templateData", "tree", and "example". \
+Available tab IDs are "info", "readme", "source", "templateData", "styleData", "tree", and "example". \
 Note: Certain tabs will only be shown if applicable to a given dependency`);
         });
 

test/src/sample-files/bar.component.ts

@@ -4,6 +4,7 @@ import { BarService } from './bar.service';
 @Component({
 	selector: 'app-bar',
 	templateUrl: `bar.template.html`,
+	styleUrls: ['bar.style.scss', 'bar2.style.scss'],
 	providers: [BarService]
 
 })

test/src/sample-files/bar.style.scss

@@ -0,0 +1,5 @@
+:host {
+  h1 {
+    background: red;
+  }
+}

test/src/sample-files/bar2.style.scss

@@ -0,0 +1,5 @@
+:host {
+  .some-class {
+    background: blue;
+  }
+}