INT-1319: Add less compile cache:

.eslintrc

@@ -1,9 +1,13 @@
 {
+  "env": {
+    "mocha": true,
+    "node": true,
+  },
+  "rules": {
+    "camelcase": 1
+  },
   "extends": [
     "mongodb-js/node",
     "mongodb-js/browser"
-  ],
-  "rules": {
-    "camelcase": 1
-  }
+  ]
 }

.gitignore

@@ -10,3 +10,4 @@ src/app/templates.js
 src/connect/static-connect.html
 report.json
 .user-data/
+src/app/compiled-less/

package.json

@@ -27,14 +27,15 @@
     "prestart": "node scripts/prestart.js",
     "start": "node scripts/start.js",
     "//": "Run only the fast unit tests",
-    "pretest": "node scripts/templatize.js",
+    "pretest": "npm run compile-ui",
     "test": "xvfb-maybe node scripts/test.js",
     "prepublish": "node scripts/prepublish.js",
     "postuninstall": "node scripts/postuninstall.js",
-    "precheck": "node scripts/templatize.js",
+    "precheck": "npm run compile-ui",
     "check": "mongodb-js-precommit ./src/app/*.js ./src/app/**/**/*.js ./src/{app/**/*.js,main/**/*.js} ./{scripts,test}/*.js",
     "ci": "npm run test",
     "clean": "npm run postuninstall",
+    "compile-ui": "node scripts/compile-ui.js",
     "fmt": "mongodb-js-fmt ./*.js src/{**/*.js,*.js} test/{**/*.js,*.js} scripts/*.js",
     "release": "npm run prepublish",
     "test-functional": "npm test -- --functional",
@@ -77,6 +78,7 @@
     "jquery": "^2.1.4",
     "keytar": "mongodb-js/node-keytar#node-pre-gyp",
     "less": "^2.6.1",
+    "less-cache": "^0.23.0",
     "local-links": "^1.4.0",
     "lodash": "^3.10.1",
     "marked": "^0.3.5",

scripts/compile-ui.js

@@ -0,0 +1,58 @@
+var async = require('async');
+var templatizer = require('templatizer');
+var path = require('path');
+var createCLI = require('mongodb-js-cli');
+var cli = createCLI('mongodb-compass:scripts:compile-ui');
+var LessCache = require('less-cache');
+var fs = require('fs');
+
+function generateLessCache(CONFIG, done) {
+  var appDir = path.join(__dirname, '..', 'src', 'app');
+  var cacheDir = path.join(appDir, 'compiled-less');
+  var src = path.join(appDir, 'index.less');
+
+  var callback = done;
+  if (typeof CONFIG === 'function') {
+    callback = CONFIG;
+  }
+
+  var lessCache = new LessCache({ cacheDir: cacheDir, resourcePath: appDir });
+
+  fs.readFile(src, 'utf-8', function(err, contents) {
+    if (err) {
+      return done(err);
+    }
+    lessCache.cssForFile(src, contents);
+    callback();
+  });
+}
+
+function generateTemplates(CONFIG, done) {
+  var callback = done;
+  if (typeof CONFIG === 'function') {
+    callback = CONFIG;
+  }
+  var appdir = path.join(__dirname, '..', 'src', 'app');
+  templatizer(appdir, path.join(appdir, 'templates.js'), callback);
+}
+
+module.exports.generateTemplates = generateTemplates;
+module.exports.generateLessCache = generateLessCache;
+
+function main() {
+  async.series([
+    generateTemplates,
+    generateLessCache
+  ], function(err) {
+    cli.abortIfError(err);
+    cli.debug('Compiled application UI.');
+    process.exit(0);
+  });
+}
+
+/**
+ * ## Main
+ */
+if (cli.argv.$0 && cli.argv.$0.indexOf('compile-ui.js') > -1) {
+  main();
+}

scripts/postuninstall.js

@@ -18,14 +18,14 @@ if (cli.argv.verbose) {
   require('debug').enable('ele*,mon*');
 }
 
-
 var del = require('del');
 var async = require('async');
 var path = require('path');
 
+var COMPILED_LESS = path.join('src', 'app', 'compiled-less');
 
 cli.spinner('Removing build artifacts');
-async.parallel(['dist/', 'node_modules/'].map(function(p) {
+async.parallel(['dist/', 'node_modules/', COMPILED_LESS].map(function(p) {
   return function(cb) {
     del(path.join(__dirname, '..', p)).then(cb.bind(null, null));
   };

scripts/prepublish.js

@@ -50,7 +50,9 @@ var run = require('electron-installer-run');
 var license = require('electron-license');
 var createCLI = require('mongodb-js-cli');
 var config = require('./config');
-var generateTemplates = require('./templatize');
+var compileUI = require('./compile-ui');
+var generateTemplates = compileUI.generateTemplates;
+var generateLessCache = compileUI.generateLessCache;
 
 /**
  * TODO (imlucas) Document and use yargs environment variable support.
@@ -119,18 +121,6 @@ function cleanupBrandedApplicationScaffold(CONFIG, done) {
   }, done);
 }
 
-/**
- * TODO (imlucas) Currently just a stub.
- *
- * @see [Atom's `prebuild-less-task.coffee`](https://git.io/vaZkL)
- * @param {Object} CONFIG
- * @param {Function} done
- * @api public
- */
-function compileApplicationUI(CONFIG, done) {
-  done();
-}
-
 /**
  * Replace the LICENSE file `electron-packager` creates w/ a LICENSE
  * file specific to the project.
@@ -372,12 +362,12 @@ function main() {
     var tasks = [
       createBrandedApplication,
       cleanupBrandedApplicationScaffold,
-      compileApplicationUI,
+      generateTemplates,
+      generateLessCache,
       writeLicenseFile,
       writeVersionFile,
       transformPackageJson,
       installDependencies,
-      generateTemplates,
       removeDevelopmentFiles,
       createApplicationAsar,
       createApplicationZip,

scripts/prestart.js

@@ -36,7 +36,9 @@ var format = require('util').format;
 var run = require('electron-installer-run');
 var checkPython = require('check-python');
 var async = require('async');
-var generateTemplates = require('./templatize');
+var compileUI = require('./compile-ui');
+var generateTemplates = compileUI.generateTemplates;
+var generateLessCache = compileUI.generateLessCache;
 
 function checkNpmAndNodejs(done) {
   run('npm', ['version', '--json', '--loglevel', 'error'], {
@@ -79,7 +81,8 @@ function main() {
   async.series([
     checkPython,
     checkNpmAndNodejs,
-    generateTemplates
+    generateTemplates,
+    generateLessCache
   ], function(err) {
     cli.abortIfError(err);
     cli.debug('Environment verified as sane!');

src/app/index.html

@@ -3,7 +3,6 @@
   <head>
     <title>MongoDB Compass</title>
     <meta name="viewport" content="initial-scale=1">
-    <link rel="stylesheet/less" type="text/css" href="index.less" charset="UTF-8">
     <style>
       div#static-sidebar {
         position: fixed;
@@ -23,13 +22,5 @@
       </div>
     </div>
     <script src="index.js" charset="UTF-8" async></script>
-    <script>
-    window.less = {
-      env: process.env.NODE_ENV,
-      logLevel: 2,
-      async: true
-    };
-    </script>
-    <script src="../../node_modules/less/dist/less.js" charset="UTF-8" async></script>
   </body>
 </html>

src/app/index.js

@@ -6,6 +6,9 @@ if (process.env.NODE_ENV !== 'production') {
 var debug = require('debug')('mongodb-compass:app');
 console.time('app/index.js');
 
+var StyleManager = require('./style-manager');
+StyleManager.writeStyles();
+
 /**
  * The main entrypoint for the application!
  */

src/app/style-manager.js

@@ -0,0 +1,34 @@
+var path = require('path');
+var LessCache = require('less-cache');
+
+/**
+ * The compile cache directory.
+ */
+var COMPILE_CACHE_DIR = path.join(__dirname, 'compiled-less');
+
+/**
+ * The name of the base styles.
+ */
+var BASE_STYLES = path.join(__dirname, 'index.less');
+
+/**
+ * The style manager, well, manages styles.
+ */
+function StyleManager() {
+  this.cache = new LessCache({
+    cacheDir: COMPILE_CACHE_DIR,
+    resourcePath: __dirname,
+    importPaths: [ __dirname ]
+  });
+}
+
+/**
+ * Writes the compiled styles into the DOM.
+ */
+StyleManager.prototype.writeStyles = function() {
+  var style = document.createElement('style');
+  style.textContent = this.cache.readFileSync(BASE_STYLES);
+  document.head.appendChild(style);
+};
+
+module.exports = new StyleManager();