Haoyang (+ Martin): Typings update

Makefile

@@ -1,7 +1,7 @@
 .PHONY: default setup clean vendor
 default: setup
 
-# Put bower and tsd in path
+# Put tsc and typings in path
 export PATH := node_modules/.bin:$(PATH)
 
 # Fetch libraries
@@ -10,8 +10,7 @@ setup: vendor
 
 vendor:
 	npm install
-	rm -f typings/tsd.d.ts
-	tsd reinstall -so
+	typings install
 
 # Remove derived files
 clean:
@@ -21,3 +20,4 @@ clean:
 	rm -rf otter
 	rm -rf zorilla
 	rm -rf marten
+	rm -rf typings

README.md

@@ -64,13 +64,13 @@ in `node_modules` (or via the symlink `vendor`).
 
 Typings
 -------
-TypeScript typings are installed via
-[TSD](https://github.com/DefinitelyTyped/tsd). To use, install TSD globally
-with `npm install tsd -g` or use the binary in the `node_modules/.bin`
-directory created after `make setup`.
-
-Do not modify d.ts files in `typings` directory directly. Modify
-typings in https://github.com/esperco/DefinitelyTyped (`tsd.json` is set
-to pull definitions from there instead of the official DefinitelyTyped repo).
-This makes it easier for us to merge upstream later if we want to open-source
-our definitions.
+TypeScript typings are installed via the Typings definition manager.
+[Typings](https://github.com/typings/typings). To use, install Typings
+globally with `npm install typings -g` or use the binary in the
+`node_modules/.bin` directory created after `make setup`.
+
+Do not modify d.ts files in the `typings` directory directly. Either modify
+typings in https://github.com/esperco/DefinitelyTyped (`typings.json` uses
+definitions from there instead of the official DefinitelyTyped repo), or
+fork or use definitions in a separate repo. This makes it easier for us to
+merge upstream later if we want to open-source our definitions.

build-helpers/typescript.js

@@ -4,7 +4,9 @@ var _             = require('lodash'),
     exec          = require('gulp-exec'),
     filter        = require('gulp-filter'),
     fs            = require('fs'),
+    glob          = require("glob"),
     merge         = require('merge-stream'),
+    minimatch     = require('minimatch'),
     path          = require('path'),
     production    = require('./production'),
     remember      = require('gulp-remember'),
@@ -21,65 +23,95 @@ var projects = {};
 var OBLIVION_BIN = "setup/bin/oblivion";
 
 /*
-  Gulp stream for compiling TypeScript. Supports using Oblivion.
+  Returns functions for building and compiling TypeScript projects.
+  Supports using Oblivion.
 
-  globs: string[] - Globs with source files
-  tsConfigs: string[] - Paths to a config file (relative to CWD of gulpfile).
-    Config file should be in the form of a tsconfig.json file with `outFile`,
-    with the following optional extra vars:
+  tsConfigPaths: string[] - Paths to a config file (relative to CWD of
+    gulpfile). Config file should be in the form of a tsconfig.json file with
+    an `outFile` and no `files` attribue (all files in directory get globbed)
+    and with the following optional extra vars:
 
-    devFiles?: string[] - Files used only in development
-    prodFiles?: string[] - Files used only in production
+    devOnly?: string[] - Files used only in development
+    prodOnly?: string[] - Files used only in production
     oblivion?: boolean - Pre-process with Oblivion?
 
+  commonGlobs?: string[] - "Common" glob paths to add to path for each tsConfig
   outDir?: string - Path to output directory (modifies tsConfig.outFile path
     for Gulp output)
 */
-module.exports = function(globs, tsConfigPaths, outDir) {
+module.exports = function(tsConfigPaths, commonGlobs, outDir) {
   'use strict';
 
-  return merge.apply(null,
-    _.map(tsConfigPaths, function(p) {
-      return build(globs, p, outDir);
-    })
-  );
+  var buildFns = _.map(tsConfigPaths, function(p) {
+    return function() { return buildOne(p, commonGlobs, outDir) };
+  });
+
+  var watchFns = _.map(tsConfigPaths, function(p) {
+    return watchOne(p, commonGlobs, outDir);
+  });
+
+  return {
+    build: gulp.parallel.apply(gulp, buildFns),
+    watch: gulp.parallel.apply(gulp, watchFns)
+  }
 }
 
 // Helper function for a single tsconfig.json file
-var build = function(globs, tsConfigPath, outDir) {
+var buildOne = function(tsConfigPath, commonGlobs, outDir) {
   'use strict';
 
+  console.log("Building " + tsConfigPath);
+
   var relPath = path.relative(__dirname, process.cwd());
   var config = require(path.join(relPath, tsConfigPath));
   var compilerOpts = config.compilerOptions || {};
   var project = projects[tsConfigPath];
   if (! project) {
     project = projects[tsConfigPath] = ts.createProject(_.extend({
+      // In theory, noExternalResolve should be faster but it isn't for
+      // in practice. Disable for now.
       noExternalResolve: false,
+
       sortOutput: true,
       typescript: typescript
     }, compilerOpts));
   }
 
-  // Get entry points from config files
-  var files = config.files || [];
-  if (production.isSet()) {
-    files = files.concat(config.prodFiles || []);
-  } else {
-    files = files.concat(config.devFiles || []);
-  }
+  // Include all files in tsconfig dir
+  var base = path.dirname(tsConfigPath);
+  var baseGlob = path.join(base, "**", "*.{ts,tsx}");
+  var files = glob.sync(baseGlob);
 
   // Files are relative to tsconfig.json file. Adjust paths so they're
-  // relative to cwd
-  var base = path.dirname(tsConfigPath);
-  files = _.map(files, function(f) {
+  // relative to cwd before processing
+  function adjustPaths(f) {
     f = path.join(base, f);
     return path.relative(process.cwd(), f);
+  }
+
+  /*
+    Prod => Exclude dev files and explicitly add prod files
+    Dev => Exclude prod files and explicitly add dev files
+    Explicit add necessary because we may want to add files outside
+      the tsconfig base dir on a one-off basis.
+  */
+  var devFiles = _.map(config.devOnly, adjustPaths);
+  var prodFiles = _.map(config.prodOnly, adjustPaths);
+  var exclusions = [];
+  if (production.isSet()) {
+    exclusions = devFiles;
+    files = prodFiles.concat(files);
+  } else {
+    exclusions = prodFiles;
+    files = devFiles.concat(files);
+  }
+  _.remove(files, function(f) {
+    return !!_.find(exclusions, function(e) {
+      return minimatch(f, e);
+    });
   });
 
-  // Concatenate entry points to globs to ensure more consistent ordering
-  globs = files.concat(globs);
-  var ret = gulp.src(globs, { base: "." });
+  var ret = gulp.src(commonGlobs.concat(files), { base: "." });
 
   /*
     Oblivion is a custom JS/TS pre-processor that converts HTML-like code to
@@ -154,5 +186,19 @@ var build = function(globs, tsConfigPath, outDir) {
     ret = ret.pipe(sourcemaps.write());
   }
 
-  return ret.pipe(gulp.dest(outDir));
+  return ret.pipe(gulp.dest(outDir))
+    .on('end', function() { console.log(tsConfigPath, 'done'); });
+}
+
+// Watch a single tsConfigFile
+var watchOne = function(tsConfigPath, commonGlobs, outDir) {
+  'use strict';
+
+  var base = path.dirname(tsConfigPath);
+  var baseGlob = path.join(base, "**", "*.{ts,tsx}");
+  var tsGlobs = [baseGlob].concat(commonGlobs);
+
+  return watch(gulp)(tsGlobs, function() {
+    return buildOne(tsConfigPath, commonGlobs, outDir);
+  });
 }

build-helpers/watch.js

@@ -1,4 +1,5 @@
 "use strict";
+var _ = require("lodash");
 
 /*
   Short-hand for returning a function that creates a watcher based on an
@@ -11,14 +12,18 @@ function makeWatch(gulp) {
 
   /*
     globs: string[] - Globs to watch
-    task: string - Name of Gulp task
+    task: string|function - Name of Gulp task, or task itself
   */
   return function(globs, task) {
     return function() {
       // Set a var on this function so other code knows we're in watch mode
       makeWatch.watchMode = true;
 
-      return gulp.watch(globs, gulp.series(task));
+      if (! _.isFunction(task)) {
+        task = gulp.series(task);
+      }
+
+      return gulp.watch(globs, task);
     };
   };
 };

esper.com/gulpfile.js

@@ -30,8 +30,9 @@ var config = {
 
   jasmineDir: "pub/jasmine",
 
-  tsGlobs: [
-    "ts/**/*.{ts,tsx}"
+  tsCommonGlobs: [
+    "ts/common/**/*.{ts,tsx}",
+    "ts/lib/**/*.{ts,tsx}"
   ],
   tsProjects: [
     "ts/chrome-ext.js/tsconfig.json",
@@ -71,13 +72,11 @@ gulp.task("build-js", function() {
 
 gulp.task("watch-js", watch(config.jsGlobs, "build-js"));
 
-gulp.task("build-ts", function() {
-  return helpers.typescript(config.tsGlobs,
-                            config.tsProjects,
+var ts = helpers.typescript(config.tsProjects,
+                            config.tsCommonGlobs,
                             config.jsOut);
-});
-
-gulp.task("watch-ts", watch(config.tsGlobs, "build-ts"));
+gulp.task("build-ts", ts.build);
+gulp.task("watch-ts", ts.watch);
 
 gulp.task("build-assets", function() {
   return helpers.assets(config.assetMap);

esper.com/ts/chrome-ext.js/chrome-ext.js.ts

@@ -3,6 +3,7 @@
   Chrome extension
 */
 
+/// <reference path="../../../typings/browser.d.ts" />
 /// <reference path="../common/Login.ts" />
 /// <reference path="../lib/ApiT.ts" />
 

esper.com/ts/chrome-ext.js/tsconfig.json

@@ -2,9 +2,5 @@
   "compilerOptions": {
     "noImplicitAny": true,
     "outFile": "chrome-ext.js"
-  },
-
-  "files": [
-    "chrome-ext.js.ts"
-  ]
+  }
 }

esper.com/ts/common/Analytics.Web.ts

@@ -4,8 +4,6 @@
   or global scope.
 */
 
-/// <reference path="../typings/moment/moment.d.ts" />
-/// <reference path="../typings/segment-analytics/segment-analytics.d.ts" />
 /// <reference path="../lib/Analytics.ts" />
 /// <reference path="../lib/Login.ts" />
 /// <reference path="../lib/ApiT.ts" />

esper.com/ts/common/Layout.tsx

@@ -2,7 +2,6 @@
   Module for rendering things (mostly React components) into our HTML page
 */
 
-/// <reference path="../typings/bootstrap/bootstrap.d.ts" />
 /// <reference path="../lib/ReactHelpers.ts" />
 
 module Esper.Layout {

esper.com/ts/common/Login.ts

@@ -2,7 +2,6 @@
   Refactored login code for OAuth clients (Zorilla, Grison, Otter)
 */
 
-/// <reference path="../typings/ravenjs/ravenjs.d.ts" />
 /// <reference path="../lib/Api.ts" />
 /// <reference path="../lib/LocalStore.ts" />
 /// <reference path="../lib/Login.ts" />

esper.com/ts/common/Route.ts

@@ -1,6 +1,5 @@
 // Helpers for client-side router
 
-/// <reference path="../typings/page/page.d.ts" />
 /// <reference path="./Login.ts" />
 
 module Esper.Route {

esper.com/ts/common/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "description": "Placeholder tsconfig so editor plugins recognize type defs",
+
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "jsx": "react"
+  }
+}

esper.com/ts/common/typings.d.ts

@@ -0,0 +1,3 @@
+/* Include all typings for common */
+
+/// <reference path="../../../typings/browser.d.ts" />

esper.com/ts/login.js/Login.OAuth.ts

@@ -2,7 +2,6 @@
   Refactored login code for OAuth clients (Zorilla, Grison, Otter)
 */
 
-/// <reference path="../typings/ravenjs/ravenjs.d.ts" />
 /// <reference path="../lib/Api.ts" />
 /// <reference path="../lib/LocalStore.ts" />
 /// <reference path="../lib/Model.StoreOne.ts" />

esper.com/ts/login.js/login.js.tsx

@@ -1,3 +1,4 @@
+/// <reference path="../../../typings/browser.d.ts" />
 /// <reference path="../lib/Util.ts" />
 /// <reference path="../common/Layout.tsx" />
 /// <reference path="./Login.Oauth.ts" />

esper.com/ts/login.js/tsconfig.json

@@ -5,11 +5,7 @@
     "outFile": "login.js"
   },
 
-  "files": [
-    "login.js.tsx"
-  ],
-
-  "devFiles": [
+  "devOnly": [
     "../common/Login.Fake.ts"
   ]
 }

esper.com/ts/settings.js/Esper.ts

@@ -4,15 +4,7 @@
   Esper module.
 */
 
-/// <reference path="../typings/jquery/jquery.d.ts" />
-/// <reference path="../typings/bootstrap/bootstrap.d.ts" />
-/// <reference path="../typings/cryptojs/cryptojs.d.ts" />
-/// <reference path="../typings/moment/moment.d.ts" />
-/// <reference path="../typings/moment-timezone/moment-timezone.d.ts" />
-/// <reference path="../typings/fullCalendar/fullCalendar.d.ts" />
-/// <reference path="../typings/page/page.d.ts" />
-/// <reference path="../typings/lodash/lodash.d.ts" />
-/// <reference path="../typings/quill/quill.d.ts" />
+/// <reference path="../../../typings/browser.d.ts" />
 
 declare module Esper {
   export var _: _.LoDashStatic;