New: Enable compat-api hints by default

Fix webhintio#1574

packages/extension-browser/package.json

@@ -9,6 +9,7 @@
   "description": "webhint browser extension",
   "devDependencies": {
     "@hint/hint-axe": "^2.1.1",
+    "@hint/hint-compat-api": "^2.0.1",
     "@hint/hint-content-type": "^3.0.0",
     "@hint/hint-css-prefix-order": "^1.0.0",
     "@hint/hint-disown-opener": "^2.1.1",
@@ -51,6 +52,7 @@
     "html-minifier": "^3.5.21",
     "is-ci": "^2.0.0",
     "lodash": "^4.17.11",
+    "mdn-browser-compat-data": "^0.0.66",
     "npm-run-all": "^4.1.5",
     "nyc": "^13.2.0",
     "puppeteer": "^1.12.2",
@@ -92,8 +94,9 @@
     "build": "npm-run-all build:*",
     "build-css": "tcm src",
     "build-hints": "node ./scripts/import-hints.js",
+    "build-mdn": "node ./scripts/pack-mdn-data.js",
     "build-release": "npm run clean && npm run build:assets && tsc --inlineSourceMap false --removeComments true",
-    "build:assets": "npm run build-css && npm run build-hints && cpx \"./{src,tests}/**/{!(*.ts),.!(ts)}\" dist",
+    "build:assets": "npm run build-css && npm run build-hints && cpx \"./{src,tests}/**/{!(*.ts),.!(ts)}\" dist && npm run build-mdn",
     "build:ts": "tsc -b",
     "build:webpack": "webpack --env.content-script && webpack && cpx \"./src/**/*.{html,json,png,svg}\" dist/bundle",
     "clean": "rimraf dist",

packages/extension-browser/scripts/import-hints.js

@@ -12,10 +12,14 @@ const hints = `// autogenerated by scripts/import-hints.js
 
 import { IHintConstructor } from 'hint/dist/src/lib/types';
 
+const resolve = (module: any): IHintConstructor => {
+    return module.default || module;
+};
+
 const hints = [
 ${
     hintModules.map((name) => {
-        return `    ...Object.values<IHintConstructor>(require('${name}'))`;
+        return `    ...Object.values(require('${name}')).map(resolve)`;
     }).join(',\n')
 }
 ];
@@ -38,10 +42,14 @@ const metas = `// autogenerated by scripts/import-hints.js
 
 import { HintMetadata } from 'hint/dist/src/lib/types';
 
+const resolve = (module: any): HintMetadata => {
+    return module.default || module;
+};
+
 const metas = [
 ${
     hintModules.map((name) => {
-        return `    ...Object.values<HintMetadata>(require('${name}/dist/src/meta'))`;
+        return `    ...Object.values(require('${name}/dist/src/meta')).map(resolve)`;
     }).join(',\n')
 }
 ];

packages/extension-browser/scripts/pack-mdn-data.js

@@ -0,0 +1,16 @@
+const fs = require('fs');
+const mdn = require('mdn-browser-compat-data');
+const path = require('path');
+const filename = path.resolve(`${__dirname}/../dist/mdn-browser-compat-data.packed.json`);
+
+fs.writeFile(filename, JSON.stringify({
+    browsers: mdn.browsers,
+    css: mdn.css,
+    html: mdn.html
+}), (err) => {
+    if (err) {
+        throw err;
+    } else {
+        console.log(`Created: ${filename}`);
+    }
+});

packages/extension-browser/src/content-script/connector.ts

@@ -20,6 +20,7 @@ export default class WebExtensionConnector implements IConnector {
     private _document = new AsyncHTMLDocument(document);
     private _window = new AsyncWindow(this._document); // eslint-disable-line
     private _engine: Engine;
+    private _onComplete: (resource: string) => void = () => { };
     private _options: ConnectorOptionsConfig;
 
     public constructor(engine: Engine, options?: ConnectorOptionsConfig) {
@@ -53,7 +54,7 @@ export default class WebExtensionConnector implements IConnector {
                     await this._engine.emitAsync('traverse::end', { resource });
                 }
 
-                await this._engine.emitAsync('scan::end', { resource });
+                this._onComplete(resource);
             }, this._options.waitFor);
         };
 
@@ -159,10 +160,11 @@ export default class WebExtensionConnector implements IConnector {
         this.sendMessage({ ready: true });
 
         return new Promise((resolve) => {
-            this._engine.once('scan::end', () => {
+            this._onComplete = async (resource: string) => {
+                await this._engine.emitAsync('scan::end', { resource });
                 resolve();
                 this.sendMessage({ done: true });
-            });
+            };
         });
     }
 

packages/extension-browser/src/content-script/webhint.ts

@@ -71,7 +71,7 @@ const main = async (userConfig: Config) => {
         hints: hintsConfig,
         hintsTimeout: 10000,
         ignoredUrls: determineIgnoredUrls(userConfig.ignoredUrls),
-        parsers: ['javascript', 'manifest']
+        parsers: ['css', 'javascript', 'manifest']
     };
 
     const resources: HintResources = {

packages/extension-browser/tsconfig.json

@@ -15,6 +15,7 @@
     "references": [
         { "path": "../hint" },
         { "path": "../hint-axe" },
+        { "path": "../hint-compat-api" },
         { "path": "../hint-content-type" },
         { "path": "../hint-disown-opener" },
         { "path": "../hint-highest-available-document-mode" },

packages/extension-browser/webpack.config.js

@@ -53,6 +53,7 @@ const baseConfig = {
     resolve: {
         alias: {
             'hint/dist/src/lib/utils/network/request-async$': path.resolve(__dirname, 'dist/src/shims/request-async.js'),
+            'mdn-browser-compat-data$': path.resolve(__dirname, 'dist/mdn-browser-compat-data.packed.json'),
             url$: path.resolve(__dirname, 'dist/src/shims/url.js')
         }
     }

packages/hint-compat-api/docs/compat-api-css-next.md

@@ -1,8 +1,8 @@
-# Check for CSS features that are not broadly supported
+# New CSS features (`compat-api/css-next`)
 
 ## What does the hint check?
 
-`compat-api-css-next` checks if the CSS features used are
+`compat-api/css-next` checks if the CSS features used are
 supported in the [targeted browsers][browser-context].
 
 ## Why is this important?

packages/hint-compat-api/docs/compat-api-css.md

@@ -1,8 +1,8 @@
-# Check for Deprecated CSS features
+# Deprecated CSS features (`compat-api/css`)
 
 ## What does the hint check?
 
-`compat-api-css` checks if the CSS features used are deprecated in the
+`compat-api/css` checks if the CSS features used are deprecated in the
 [targeted browsers][browser-context].
 
 ## Why is this important?

packages/hint-compat-api/docs/compat-api-html-next.md

@@ -1,8 +1,8 @@
-# Check for HTML elements that are not broadly supported
+# New HTML features (`compat-api/html-next`)
 
 ## What does the hint check?
 
-`compat-api-html-next` checks if the HTML elements and attributes used are
+`compat-api/html-next` checks if the HTML elements and attributes used are
 supported in the [targeted browsers][browser-context].
 
 ## Why is this important?

packages/hint-compat-api/docs/compat-api-html.md

@@ -1,8 +1,8 @@
-# Check for Deprecated HTML elements
+# Deprecated HTML features (`compat-api/html`)
 
 ## What does the hint check?
 
-`compat-api-html` checks if the HTML elements and attributes used are
+`compat-api/html` checks if the HTML elements and attributes used are
 deprecated in the [targeted browsers][browser-context].
 
 ## Why is this important?

packages/hint-compat-api/src/meta/css-next.ts

@@ -7,8 +7,8 @@ const schema = require('./compat-hint-schema.json');
 const meta: HintMetadata = {
     docs: {
         category: Category.compatibility,
-        description: '`compat-api-css` validates if the CSS features of the project are not broadly supported',
-        name: 'Compatibility CSS not broadly supported features'
+        description: 'Validate if CSS features used are supported by target browsers',
+        name: 'New CSS features'
     },
     id: 'compat-api/css-next',
     schema: [schema],

packages/hint-compat-api/src/meta/css.ts

@@ -7,8 +7,8 @@ const schema = require('./compat-hint-schema.json');
 const meta: HintMetadata = {
     docs: {
         category: Category.compatibility,
-        description: '`compat-api-css` validates if the CSS features of the project are deprecated',
-        name: 'Compatibility CSS deprecated features'
+        description: 'Validate if CSS features used are deprecated in target browsers',
+        name: 'Deprecated CSS features'
     },
     id: 'compat-api/css',
     schema: [schema],

packages/hint-compat-api/src/meta/html-next.ts

@@ -7,8 +7,8 @@ const schema = require('./compat-hint-schema.json');
 const meta: HintMetadata = {
     docs: {
         category: Category.compatibility,
-        description: '`compat-api-html` validates if the HTML features of the project are not broadly supported',
-        name: 'Compatibility HTML not broadly supported features'
+        description: 'Validate if HTML features used are supported in target browsers',
+        name: 'New HTML features'
     },
     id: 'compat-api/html-next',
     schema: [schema],

packages/hint-compat-api/src/meta/html.ts

@@ -7,8 +7,8 @@ const schema = require('./compat-hint-schema.json');
 const meta: HintMetadata = {
     docs: {
         category: Category.compatibility,
-        description: '`compat-api-html` validates if the HTML features of the project are deprecated',
-        name: 'Compatibility HTML deprecated features'
+        description: 'Validate if HTML features used are deprecated in target browsers',
+        name: 'Deprecated HTML features'
     },
     id: 'compat-api/html',
     schema: [schema],