Fix error that occurs when you try to get completion and the extension is loading; Add limitations to the concurrency in resource intensive operations; Add progress indicator, useful for large projects

zignd · cvharris · commit acfa44b4fa85 · 2018-06-25T12:58:20.000-05:00
diff --git a/package.json b/package.json
@@ -1,54 +1,54 @@
 {
-    "name": "html-css-class-completion",
-    "displayName": "IntelliSense for CSS class names",
-    "description": "Provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace. Also supports React's className attribute.",
-    "version": "1.10.2",
-    "publisher": "Zignd",
-    "engines": {
-        "vscode": "^1.4.0"
-    },
-    "categories": [
-        "Languages",
-        "Other"
-    ],
-    "activationEvents": [
-        "*"
-    ],
-    "contributes": {
-        "commands": [
-            {
-                "command": "html-css-class-completion.cache",
-                "title": "Cache CSS class definitions"
-            }
-        ]
-    },
-    "icon": "images/icon.png",
-    "repository": {
-        "url": "https://github.com/Zignd/HTML-CSS-Class-Completion"
-    },
-    "main": "./out/src/extension",
-    "scripts": {
-        "vscode:prepublish": "tsc -p ./",
-        "compile": "tsc -watch -p ./",
-        "postinstall": "node ./node_modules/vscode/bin/install"
-    },
-    "devDependencies": {
-        "@types/async": "^2.0.40",
-        "@types/css": "^0.0.30",
-        "@types/htmlparser2": "^3.7.29",
-        "@types/lodash": "^4.14.63",
-        "@types/mocha": "^2.2.41",
-        "@types/node": "^7.0.18",
-        "@types/request": "^0.0.43",
-        "@types/request-promise": "^4.1.33",
-        "typescript": "^2.3.2",
-        "vscode": "^1.1.0"
-    },
-    "dependencies": {
-        "async": "^2.4.0",
-        "css": "^2.2.1",
-        "htmlparser2": "^3.9.2",
-        "request": "^2.81.0",
-        "request-promise": "^4.2.1"
-    }
+  "name": "html-css-class-completion",
+  "displayName": "IntelliSense for CSS class names",
+  "description": "Provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace. Also supports React's className attribute.",
+  "version": "1.10.2",
+  "publisher": "Zignd",
+  "engines": {
+    "vscode": "^1.4.0"
+  },
+  "categories": [
+    "Languages",
+    "Other"
+  ],
+  "activationEvents": [
+    "*"
+  ],
+  "contributes": {
+    "commands": [
+      {
+        "command": "html-css-class-completion.cache",
+        "title": "Cache CSS class definitions"
+      }
+    ]
+  },
+  "icon": "images/icon.png",
+  "repository": {
+    "url": "https://github.com/Zignd/HTML-CSS-Class-Completion"
+  },
+  "main": "./out/src/extension",
+  "scripts": {
+    "vscode:prepublish": "tsc -p ./",
+    "compile": "tsc -watch -p ./",
+    "postinstall": "node ./node_modules/vscode/bin/install"
+  },
+  "devDependencies": {
+    "@types/bluebird": "^3.5.16",
+    "@types/css": "^0.0.30",
+    "@types/htmlparser2": "^3.7.29",
+    "@types/lodash": "^4.14.63",
+    "@types/node": "^7.0.18",
+    "@types/request": "^0.0.43",
+    "@types/request-promise": "^4.1.33",
+    "typescript": "^2.3.2",
+    "vscode": "^1.1.0"
+  },
+  "dependencies": {
+    "bluebird": "^3.5.1",
+    "css": "^2.2.1",
+    "htmlparser2": "^3.9.2",
+    "lodash": "^4.17.4",
+    "request": "^2.81.0",
+    "request-promise": "^4.2.1"
+  }
 }
diff --git a/src/extension.ts b/src/extension.ts
@@ -1,4 +1,4 @@
-import * as async from 'async';
+import * as Bluebird from 'bluebird';
 import * as _ from 'lodash';
 import * as vscode from 'vscode';
 import CssClassDefinition from './common/css-class-definition';
@@ -8,7 +8,7 @@ import Notifier from './notifier';
 import ParseEngineGateway from './parse-engine-gateway';
 
 let notifier: Notifier = new Notifier('html-css-class-completion.cache');
-let uniqueDefinitions: CssClassDefinition[];
+let uniqueDefinitions: CssClassDefinition[] = [];
 
 const completionTriggerChars = ['"', '\'', ' '];
 
@@ -31,38 +31,41 @@ function cache(): Promise<void> {
             console.log('Found all parseable documents.');
             let definitions: CssClassDefinition[] = [];
 
+            let filesParsed: number = 0;
             let failedLogs: string = '';
             let failedLogsCount: number = 0;
 
             console.log('Parsing documents and looking for CSS class definitions...');
-            return async.eachLimit(uris, 100, async (uri, callback) => {
-                try {
-                    Array.prototype.push.apply(definitions, await ParseEngineGateway.callParser(uri));
-                    callback();
-                } catch (error) {
-                    failedLogs += `${uri.path}\n`;
-                    failedLogsCount++;
-                    callback();
-                }
-            }, (error) => {
-                if (error) {
-                    console.error('Failed to parse the documents: ', error);
-                    return reject(error);
-                }
 
-                uniqueDefinitions = _.uniqBy(definitions, def => def.className);
+            try {
+                await Bluebird.map(uris, async (uri) => {
+                    try {
+                        Array.prototype.push.apply(definitions, await ParseEngineGateway.callParser(uri));
+                    } catch (error) {
+                        failedLogs += `${uri.path}\n`;
+                        failedLogsCount++;
+                    }
+                    filesParsed++;
+                    notifier.notify('eye', 'Looking for CSS classes in the workspace... (' + ((filesParsed / uris.length) * 100).toFixed(2) + '%)', false);
+                }, { concurrency: 30 });
+            } catch (err) {
+                console.error('Failed to parse the documents: ', err);
+                notifier.notify('alert', 'Failed to cache the CSS classes in the workspace (click for another attempt)');
+                return reject(err);
+            }
+
+            uniqueDefinitions = _.uniqBy(definitions, def => def.className);
 
-                console.log('Summary:');
-                console.log(uris.length, 'parseable documents found');
-                console.log(definitions.length, 'CSS class definitions found');
-                console.log(uniqueDefinitions.length, 'unique CSS class definitions found');
-                console.log(failedLogsCount, 'failed attempts to parse. List of the documents:');
-                console.log(failedLogs);
+            console.log('Summary:');
+            console.log(uris.length, 'parseable documents found');
+            console.log(definitions.length, 'CSS class definitions found');
+            console.log(uniqueDefinitions.length, 'unique CSS class definitions found');
+            console.log(failedLogsCount, 'failed attempts to parse. List of the documents:');
+            console.log(failedLogs);
 
-                notifier.notify('zap', 'CSS classes cached (click to cache again)');
+            notifier.notify('zap', 'CSS classes cached (click to cache again)');
 
-                return resolve();
-            });
+            return resolve();
         } catch (error) {
             console.error('Failed to cache the class definitions during the iterations over the documents that were found:', error);
             notifier.notify('alert', 'Failed to cache the CSS classes in the workspace (click for another attempt)');
diff --git a/src/notifier.ts b/src/notifier.ts
@@ -11,18 +11,20 @@ class Notifier {
         this.statusBarItem.show();
     }
 
-    public notify(icon: string, text: string): void {
+    public notify(icon: string, text: string, autoHide: boolean = true): void {
         if (this._timeoutId) {
             clearTimeout(this._timeoutId);
         }
 
         this.statusBarItem.text = `$(${icon}) ${text}`;
         this.statusBarItem.tooltip = null;
 
-        this._timeoutId = setTimeout(() => {
-            this.statusBarItem.text = `$(${icon})`;
-            this.statusBarItem.tooltip = text;
-        }, 5000);
+        if (autoHide) {
+            this._timeoutId = setTimeout(() => {
+                this.statusBarItem.text = `$(${icon})`;
+                this.statusBarItem.tooltip = text;
+            }, 5000);
+        }
     }
 }
 
diff --git a/src/parse-engines/types/html-parse-engine.ts b/src/parse-engines/types/html-parse-engine.ts
@@ -1,4 +1,4 @@
-import * as async from 'async';
+import * as Bluebird from 'bluebird';
 import * as request from 'request-promise';
 import * as css from 'css';
 import * as html from 'htmlparser2';
@@ -12,60 +12,50 @@ class HtmlParseEngine implements ParseEngine {
     public languageId: string = 'html';
     public extension: string = 'html';
 
-    public parse(textDocument: SimpleTextDocument): Promise<CssClassDefinition[]> {
-        return new Promise((resolve, reject) => {
-            const definitions: CssClassDefinition[] = [];
-            const urls: string[] = [];
-            let tag: string;
-            let isRelStylesheet: boolean = false;
-            let linkHref: string;
-            
-            const parser = new html.Parser({
-                onopentagname: (name: string) => {
-                    tag = name;
-                },
-                onattribute: (name: string, value: string) => {
-                    if (name === "rel" && value === "stylesheet") {
-                        isRelStylesheet = true;
-                    }
+    public async parse(textDocument: SimpleTextDocument): Promise<CssClassDefinition[]> {
+        const definitions: CssClassDefinition[] = [];
+        const urls: string[] = [];
+        let tag: string;
+        let isRelStylesheet: boolean = false;
+        let linkHref: string;
 
-                    if (tag === "link" && name === "href" && value.indexOf('http') === 0) {
-                        linkHref = value;
-                    }
-                },
-                ontext: (text: string) => {
-                    if (tag === "style") {
-                        definitions.push(...CssClassExtractor.extract(css.parse(text)));
-                    }
-                },
-                onclosetag: () => {
-                    if (tag === "link" && isRelStylesheet && linkHref) {
-                        urls.push(linkHref);
-                    }
-
-                    isRelStylesheet = false;
-                    linkHref = null;
+        const parser = new html.Parser({
+            onopentagname: (name: string) => {
+                tag = name;
+            },
+            onattribute: (name: string, value: string) => {
+                if (name === "rel" && value === "stylesheet") {
+                    isRelStylesheet = true;
                 }
-            });
-
-            parser.write(textDocument.getText());
-            parser.end();
 
-            return async.each(urls, async (url, callback) => {
-                try {
-                    let content = await request.get(url);
-                    definitions.push(...CssClassExtractor.extract(css.parse(content)));
-                    return callback();
-                } catch (error) {
-                    return callback(error);
+                if (tag === "link" && name === "href" && value.indexOf('http') === 0) {
+                    linkHref = value;
+                }
+            },
+            ontext: (text: string) => {
+                if (tag === "style") {
+                    definitions.push(...CssClassExtractor.extract(css.parse(text)));
                 }
-            }, (error) => {
-                if (error) {
-                    return reject(error);
+            },
+            onclosetag: () => {
+                if (tag === "link" && isRelStylesheet && linkHref) {
+                    urls.push(linkHref);
                 }
-                return resolve(definitions);
-            });
+
+                isRelStylesheet = false;
+                linkHref = null;
+            }
         });
+
+        parser.write(textDocument.getText());
+        parser.end();
+
+        await Bluebird.map(urls, async (url) => {
+            let content = await request.get(url);
+            definitions.push(...CssClassExtractor.extract(css.parse(content)));
+        }, { concurrency: 10 });
+        
+        return definitions;
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -11,18 +11,20 @@ class Notifier {`
`11`	`11`	`this.statusBarItem.show();`
`12`	`12`	`}`
`13`	`13`
`14`		`- public notify(icon: string, text: string): void {`
	`14`	`+ public notify(icon: string, text: string, autoHide: boolean = true): void {`
`15`	`15`	`if (this._timeoutId) {`
`16`	`16`	`clearTimeout(this._timeoutId);`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	this.statusBarItem.text = `$(${icon}) ${text}`;
`20`	`20`	`this.statusBarItem.tooltip = null;`
`21`	`21`
`22`		`- this._timeoutId = setTimeout(() => {`
`23`		- this.statusBarItem.text = `$(${icon})`;
`24`		`- this.statusBarItem.tooltip = text;`
`25`		`- }, 5000);`
	`22`	`+ if (autoHide) {`
	`23`	`+ this._timeoutId = setTimeout(() => {`
	`24`	+ this.statusBarItem.text = `$(${icon})`;
	`25`	`+ this.statusBarItem.tooltip = text;`
	`26`	`+ }, 5000);`
	`27`	`+ }`
`26`	`28`	`}`
`27`	`29`	`}`
`28`	`30`