use TSLint for JS files too (#334)

* use TSLint 4.x to lint JS files too!

mostly alphabetizing objects.

* remove eslint

* fix `check` task alias

* spacing, object shorthand

Gulpfile.js

@@ -45,6 +45,9 @@ interface IProject {
 }
 */
 
+// prioritizing legibility over correctness here
+// tslint:disable:object-literal-sort-keys
+
 const projects = [
     {
         id: "core",
@@ -83,16 +86,16 @@ const projects = [
                 "@blueprintjs/datetime",
                 "@blueprintjs/table",
                 "dom4",
-                "jquery",
+                "moment",
                 "normalize.css",
                 "react",
                 "react-addons-css-transition-group",
                 "react-dom",
             ],
         },
         copy: {
-            "src/index.html": { to: [""], base: "src/" },
             "resources/favicon.png": { to: ["assets/"], base: "resources/" },
+            "src/index.html": { to: [""], base: "src/" },
         },
     }, {
         id: "landing",

gulp/aliases.js

@@ -3,13 +3,13 @@
  */
 "use strict";
 
-module.exports = (gulp) =>{
+module.exports = (gulp) => {
     const rs = require("run-sequence").use(gulp);
 
     // lint all the things!
     // this will fail the CI build but will not block starting the server.
     // your editor is expected to handle this in realtime during development.
-    gulp.task("check", ["eslint", "sass-lint", "typescript-lint", "typescript-lint-docs"]);
+    gulp.task("check", ["tslint", "sass-lint", "typescript-lint", "typescript-lint-docs"]);
 
     // compile all the project source codes EXCEPT for docs webpack
     // (so we can run it in watch mode during development)

gulp/docs.js

@@ -4,30 +4,30 @@
 "use strict";
 
 module.exports = (gulp, plugins, blueprint) => {
-    var glob = require("glob");
-    var path = require("path");
-    var text = require("./util/text");
-    var tsdoc = require("ts-quick-docs");
-    var spawn = require("child_process").spawn;
-    var semver = require("semver");
-    var cwd = blueprint.findProject("docs").cwd;
-
-    var config = {
+    const glob = require("glob");
+    const path = require("path");
+    const text = require("./util/text");
+    const tsdoc = require("ts-quick-docs");
+    const spawn = require("child_process").spawn;
+    const semver = require("semver");
+    const cwd = blueprint.findProject("docs").cwd;
+
+    const config = {
         data: path.join(cwd, "src", "generated"),
         dest: path.join(cwd, "build"),
         kssSources: blueprint.projectsWithBlock("sass").map((project) => path.join(project.cwd, "src")),
     };
 
     // paths to data files used to generate documentation app
-    var filenames = {
+    const filenames = {
         docs: "docs.json",
         props: "props.json",
+        releases: "releases.json",
         styleguide: path.join(cwd, "src", "styleguide.md"),
         versions: "versions.json",
-        releases: "releases.json",
     };
 
-    var unwrapData = (section) => section.data;
+    const unwrapData = (section) => section.data;
 
     function processSection(section) {
         return Object.assign({}, section, {
@@ -40,10 +40,10 @@ module.exports = (gulp, plugins, blueprint) => {
     }
 
     // find all flags: @[flag-name] [value?]
-    var FLAG_REGEX = /<p>@([\w-]+)(?:\s(.+))?<\/p>/g;
+    const FLAG_REGEX = /<p>@([\w-]+)(?:\s(.+))?<\/p>/g;
     function processFlags(section) {
         if (typeof section.description === "string") {
-            section.description = section.description.replace(FLAG_REGEX, function(m, flag, value) {
+            section.description = section.description.replace(FLAG_REGEX, function (m, flag, value) {
                 switch (flag) {
                 case "interface":
                     section.interfaceName = value;
@@ -60,6 +60,8 @@ module.exports = (gulp, plugins, blueprint) => {
                 case "angular-example":
                     section.angularExample = value;
                     break;
+                default:
+                    break;
                 }
                 // remove flag from output
                 return "";
@@ -114,9 +116,9 @@ module.exports = (gulp, plugins, blueprint) => {
     gulp.task("docs-kss", (done) => {
         var kss = require("kss");
         var options = {
-            mask: /\.scss$/,
             // disable KSS internal markdown rendering so we can do it all ourselves!
             markdown: false,
+            mask: /\.scss$/,
         };
 
         kss.traverse(config.kssSources, options, (err, styleguide) => {
@@ -138,8 +140,8 @@ module.exports = (gulp, plugins, blueprint) => {
                 header: "Overview",
                 modifiers: [],
                 parameters: [],
-                sections: [],
                 reference: "overview",
+                sections: [],
             });
 
             text.fileStream(filenames.docs, JSON.stringify(pages, stringifyKss, 2))

gulp/hygiene.js

@@ -17,10 +17,10 @@ module.exports = (gulp, plugins, blueprint) => {
         return del(cleanDirs, { force: true });
     });
 
-    gulp.task("eslint", () => (
-        gulp.src("gulp/**/*.js")
-            .pipe(plugins.eslint())
-            .pipe(plugins.eslint.format())
-            .pipe(plugins.eslint.failAfterError())
+    gulp.task("tslint", () => (
+        gulp.src(["*.js", "gulp/**/*.js", "packages/*/*.js"])
+            .pipe(plugins.tslint({ formatter: "verbose" }))
+            .pipe(plugins.tslint.report())
+            .pipe(plugins.count("## javascript files linted"))
     ));
 };

gulp/icons.js

@@ -35,9 +35,6 @@ module.exports = (gulp, plugins, blueprint) => {
         }
 
         return writeFiles({
-            // simple variable definitions
-            "_icon-variables.scss": ICONS.map((icon) => `$${icon.className}: "${icon.content}";`),
-
             // great big map for iteration
             "_icon-map.scss": [
                 '@import "icon-variables";',
@@ -46,6 +43,9 @@ module.exports = (gulp, plugins, blueprint) => {
                 ");",
             ],
 
+            // simple variable definitions
+            "_icon-variables.scss": ICONS.map((icon) => `$${icon.className}: "${icon.content}";`),
+
             // map name to className
             "iconClasses.ts": buildTSObject("IconClasses", (icon) => icon.className),
 

gulp/karma.js

@@ -16,13 +16,13 @@ module.exports = (gulp, plugins, blueprint) => {
         const resourcesGlob = (project.id === "core" ? "." : "node_modules/@blueprintjs/*");
         const filesToInclude = [
             {
-                pattern: "node_modules/**/*.css",
                 included: false,
+                pattern: "node_modules/**/*.css",
                 served: true,
             },
             {
-                pattern: resourcesGlob + "/resources/**/*",
                 included: false,
+                pattern: resourcesGlob + "/resources/**/*",
                 served: true,
             },
             "dist/**/*.css",
@@ -36,41 +36,42 @@ module.exports = (gulp, plugins, blueprint) => {
 
         return {
             basePath: project.cwd,
-            browsers: [ "PhantomJS" ],
             browserNoActivityTimeout: 100000,
+            browsers: ["PhantomJS"],
             client: {
                 useIframe: false,
             },
             coverageReporter: {
                 check: {
                     each: {
-                        statements: 80,
                         lines: 80,
+                        statements: 80,
                     },
                 },
+                includeAllSources: true,
+                phantomjsLauncher: {
+                    exitOnResourceError: true,
+                },
                 reporters: [
                     { type: "html", dir: "coverage" },
                     { type: "lcov" },
                     { type: "text" },
                 ],
-                includeAllSources: true,
-                phantomjsLauncher: {
-                    exitOnResourceError: true,
-                },
                 watermarks: {
-                    statements: [80, 90],
                     lines: [80, 90],
+                    statements: [80, 90],
                 },
             },
             files: filesToInclude,
-            frameworks: [ "mocha", "chai", "phantomjs-shim", "sinon" ],
-            reporters: [ "mocha", "coverage" ],
+            frameworks: ["mocha", "chai", "phantomjs-shim", "sinon"],
             port: 9876,
             // coverage is instrumented in gulp/webpack.js
             preprocessors: {
                 "test/**/*.ts": "sourcemap",
                 "test/index.ts": "webpack",
             },
+            reporters: ["mocha", "coverage"],
+            singleRun: true,
             webpack: webpackConfig,
             webpackMiddleware: {
                 noInfo: true,
@@ -79,7 +80,6 @@ module.exports = (gulp, plugins, blueprint) => {
                     chunks: false,
                 },
             },
-            singleRun: true,
         };
     }
 
@@ -91,16 +91,16 @@ module.exports = (gulp, plugins, blueprint) => {
 
         gulp.task(`karma-unit-${project.id}`, (done) => {
             const config = Object.assign(createConfig(project), {
-                reporters: [ "mocha" ],
-                singleRun: false,
+                browsers: ["Chrome"],
                 client: {
-                    useIframe: true,
                     mocha: {
                         reporter: "html",
                         ui: "bdd",
                     },
+                    useIframe: true,
                 },
-                browsers: ["Chrome"],
+                reporters: ["mocha"],
+                singleRun: false,
             });
 
             const server = new karma.Server(config, done);

gulp/sass.js

@@ -54,8 +54,8 @@ module.exports = (gulp, plugins, blueprint) => {
         }
 
         const postcssOptions = {
-            to : blueprint.destPath(project, "dist.css"),
             map: { inline: false },
+            to : blueprint.destPath(project, "dist.css"),
         };
         const postcssPlugins = project.sass === "bundle" ? [
             // inline all imports
@@ -64,7 +64,7 @@ module.exports = (gulp, plugins, blueprint) => {
             postcssUrl({ url: "rebase" }),
             // copy assets to dist folder, respecting rebase
             postcssCopyAssets({
-                pathTransform: (_newPath, origPath) => {
+                pathTransform: (newPath, origPath) => {
                     return path.resolve(
                         blueprint.destPath(project),
                         "assets",

gulp/typescript.js

@@ -9,7 +9,6 @@ module.exports = (gulp, plugins, blueprint) => {
 
     function createTypescriptProject(tsConfigPath) {
         return plugins.typescript.createProject(tsConfigPath, {
-            typescript: require("typescript"),
             // ensure that only @types from this project are used (instead of from local symlinked blueprint)
             typeRoots: ["node_modules/@types"],
         });
@@ -24,10 +23,7 @@ module.exports = (gulp, plugins, blueprint) => {
 
     const lintTask = (project, isDevMode) => (
         gulp.src(path.join(project.cwd, "{examples,src,test}", "**", "*.ts{,x}"))
-            .pipe(plugins.tslint({
-                formatter: "verbose",
-                tslint: require("tslint"),
-            }))
+            .pipe(plugins.tslint({ formatter: "verbose" }))
             .pipe(plugins.tslint.report({ emitError: !isDevMode }))
             .pipe(plugins.count(`${project.id}: ## typescript files linted`))
     );

gulp/util/text.js

@@ -49,19 +49,19 @@ renderer.code = (textContent, language) => {
 module.exports = {
     COPYRIGHT_HEADER,
 
-    highlight: highlight,
-
-    // render the given text as markdown, using the custom rendering logic above.
-    // code blocks are highlighted using highlight() above.
-    markdown: (textContent) => marked(textContent, { renderer }),
-
-    // synchronously read and return string content of file.
-    fromFile: (filepath) => fs.readFileSync(filepath, "utf8"),
-
     // return a vinyl-source-stream with the given filename and write the contents to it.
     fileStream: (filename, contents) => {
         const stream = strSource(filename);
         stream.end(contents);
         return stream;
     },
+
+    // synchronously read and return string content of file.
+    fromFile: (filepath) => fs.readFileSync(filepath, "utf8"),
+
+    highlight,
+
+    // render the given text as markdown, using the custom rendering logic above.
+    // code blocks are highlighted using highlight() above.
+    markdown: (textContent) => marked(textContent, { renderer }),
 };