Add html parser in setup-aether

Author: AndrewJakubowicz

app/lib/aether/html.coffee

@@ -0,0 +1,4 @@
+# This is the html parser which wasn't updated to use esper.
+# We build it into a build-html.js file in `setup-aether.js`.
+window.deku = require('deku');
+window.htmlparser2 = require('htmlparser2');

copy.sh

@@ -36,7 +36,7 @@
     "predeploy": "echo Starting deployment--hold onto your butts.; echo Skipping webpack build --production",
     "postdeploy": "echo Deployed. Unclench.",
     "postinstall": "bower install && npm run build-aether && node ./runWebpack.js",
-    "build-aether": "node setup-aether.js && ./copy.sh",
+    "build-aether": "node setup-aether.js",
     "webpack": "webpack",
     "bower": "bower",
     "dev": "webpack --watch",
@@ -85,6 +85,7 @@
     "country-list": "0.0.3",
     "css-loader": "^0.25.0",
     "d3": "~3.4.4",
+    "deku": "^2.0.0-rc16",
     "delighted": "^1.2.0",
     "event-hooks-webpack-plugin": "^1.0.0",
     "express": "^4.14.0",
@@ -95,6 +96,7 @@
     "geoip-lite": "^1.1.6",
     "graceful-fs": "~2.0.1",
     "gridfs-stream": "~1.1.1",
+    "htmlparser2": "^3.9.1",
     "html-webpack-plugin": "^2.30.1",
     "intercom-client": "^2.8.8",
     "jade": "^1.11.0",

package.json

@@ -3,74 +3,51 @@
  * webpack. We also rename certain esper files here and move those files
  * into the public directory to be loaded dynamically at runtime by the
  * browser and service workers.
- * 
+ *
  * Note:
  *  esper-modern requires modern language plugin to be loaded otherwise it won't
  *  work correctly.
  */
-const fs = require('fs-extra');
-const webpack = require('webpack');
-const path = require('path');
+const fs = require("fs-extra");
+const webpack = require("webpack");
+const path = require("path");
 
 // List of esper langauge plugins we want to move into the public directory.
-const targets = [
-  'lua',
-  'python',
-  'coffeescript'
-];
-
-// Get a list of the regular and modern language plugin paths.
-const target_paths = targets
-  .map(lang => [
-    [
-      path.join(__dirname, 'bower_components', 'esper.js', `esper-plugin-lang-${lang}.js`),
-      path.join(__dirname, 'public', 'javascripts', 'app', 'vendor', `aether-${lang}.js`)
-    ],
-    [
-      path.join(__dirname, 'bower_components', 'esper.js', `esper-plugin-lang-${lang}-modern.js`),
-      path.join(__dirname, 'public', 'javascripts', 'app', 'vendor', `aether-${lang}.modern.js`)
-    ]
-  ])
-  .reduce((l, paths) => l.concat(paths))
-
-for (let [src, dest] of target_paths) {
-  // const src = path.join(__dirname, 'bower_components', 'esper.js', `esper-plugin-lang-${target}.js`);
-  // const dest = path.join(__dirname, 'bower_components', 'aether', 'build', `${target}.js`);
-  console.log(`Copy ${src}, ${dest}`);
-  fs.copySync(src, dest);
-}
+const targets = ["lua", "python", "coffeescript"];
 
 const aether_webpack_config = {
   context: path.resolve(__dirname),
   entry: {
-    aether: './app/lib/aether/aether.coffee'
+    aether: "./app/lib/aether/aether.coffee",
+    // We need to create the html parser ourselves and move it ourselves into
+    // `/javascripts/app/vendor/aether-html.js`
+    html: "./app/lib/aether/html.coffee"
   },
   output: {
-    filename: './bower_components/aether/build/aether.js'
+    filename: "./bower_components/aether/build/[name].js"
   },
   module: {
     rules: [
       {
         test: /\.coffee$/,
-        use: [ 'coffee-loader' ]
+        use: ["coffee-loader"]
       }
     ]
   },
   resolve: {
     extensions: [".coffee", ".json", ".js"]
   },
   externals: {
-    'esper.js': 'esper',
-    'lodash': '_',
-    'source-map': 'SourceMap'
+    "esper.js": "esper",
+    lodash: "_",
+    "source-map": "SourceMap"
   },
 
   node: {
     fs: "empty"
   }
 };
 
-
 webpack(aether_webpack_config, function(err, stats) {
   if (err) {
     console.log(err);
@@ -79,5 +56,72 @@ webpack(aether_webpack_config, function(err, stats) {
     if (stats.compilation.errors.length) {
       console.error("Compilation errors:", stats.compilation.errors);
     }
+    copyLanguagesFromEsper(targets);
   }
 });
+
+function copyLanguagesFromEsper(targets) {
+  // Get a list of the regular and modern language plugin paths.
+  const target_paths = targets
+    .map(lang => [
+      [
+        path.join(
+          __dirname,
+          "bower_components",
+          "esper.js",
+          `esper-plugin-lang-${lang}.js`
+        ),
+        path.join(
+          __dirname,
+          "public",
+          "javascripts",
+          "app",
+          "vendor",
+          `aether-${lang}.js`
+        )
+      ],
+      [
+        path.join(
+          __dirname,
+          "bower_components",
+          "esper.js",
+          `esper-plugin-lang-${lang}-modern.js`
+        ),
+        path.join(
+          __dirname,
+          "public",
+          "javascripts",
+          "app",
+          "vendor",
+          `aether-${lang}.modern.js`
+        )
+      ]
+    ])
+    .reduce((l, paths) => l.concat(paths));
+
+  for (let [src, dest] of target_paths) {
+    // const src = path.join(__dirname, 'bower_components', 'esper.js', `esper-plugin-lang-${target}.js`);
+    // const dest = path.join(__dirname, 'bower_components', 'aether', 'build', `${target}.js`);
+    console.log(`Copy ${src}, ${dest}`);
+    fs.copySync(src, dest);
+  }
+
+  // Finally copy html as we globally load these within the html iframe.
+  const src = path.join(
+    __dirname,
+    "bower_components",
+    "aether",
+    "build",
+    "html.js"
+  );
+  const dest = path.join(
+    __dirname,
+    "public",
+    "javascripts",
+    "app",
+    "vendor",
+    "aether-html.js"
+  );
+  fs.copySync(src, dest);
+  console.log(`Copy ${src}, ${dest}`);
+}