Issue #34 - Split off shared code into separate bundle

build/build.js

@@ -7,13 +7,13 @@
 const browserify = require("browserify");
 const {exec} = require("child_process");
 const del = require("del");
+const factorVinylify = require("factor-vinylify");
 const gulp = require("gulp");
 const jeditor = require("gulp-json-editor");
 const sourcemaps = require("gulp-sourcemaps");
 const zip = require("gulp-zip");
 const path = require("path");
 const buffer = require("vinyl-buffer");
-const source = require("vinyl-source-stream");
 
 const packageJSON = require("../package.json");
 const manifest = require("../src/manifest.json");
@@ -109,35 +109,35 @@ function makeSourceMap(input)
 }
 
 /**
- * Creates bundle for specified file
- * @param {string} src - file path
+ * Creates bundles for specified files
+ * @param {string[]} filepaths - file paths
  * @param {BuildInfo} buildInfo
  * @param {boolean} debug - indicates whether to include debug information
  * @return {Promise}
  */
-function bundle(src, buildInfo, debug)
+function bundle(filepaths, buildInfo, debug)
 {
   return new Promise((resolve, reject) =>
   {
-    log(`Bundling ${src}`);
+    log("Bundling files");
 
-    let dest = path.join(DEVENV_DIR, src);
-    let input = path.join(SRC_DIR, src);
+    let input = filepaths.map((filepath) => path.join(SRC_DIR, filepath));
+    let inputExternal = path.join(SRC_DIR, "lib/common/env/external.js");
+    let output = filepaths.map((filepath) => path.join(DEVENV_DIR, filepath));
+    let outputCommon = "lib/common.js";
 
     let browserifyBundle = browserify({entries: input, debug});
 
     // Expose certain extension functionality to the outside
-    browserifyBundle.require(
-      "./src/lib/common/env/external.js",
-      {expose: "flattrAPI"}
-    );
+    browserifyBundle.require(inputExternal, {expose: "flattrAPI"});
 
     if (buildInfo.type !== "development")
     {
       browserifyBundle.ignore("redux-logger");
     }
 
-    let stream = browserifyBundle.transform("browserify-versionify",
+    let stream = browserifyBundle
+      .transform("browserify-versionify",
       {
         placeholder: "__BUILD_VERSION__",
         version: buildInfo.version
@@ -146,18 +146,22 @@ function bundle(src, buildInfo, debug)
         placeholder: "__BUILD_TYPE__",
         version: buildInfo.type
       })
+      .plugin(factorVinylify, {
+        basedir: DEVENV_DIR,
+        common: outputCommon,
+        outputs: output
+      })
       .bundle()
-      .pipe(source(path.basename(dest)))
       .on("error", reject);
 
     if (debug)
     {
-      log(`Generating ${src}.map`);
+      log("Generating source maps");
       stream = makeSourceMap(stream);
     }
 
     stream
-      .pipe(gulp.dest(path.dirname(dest)))
+      .pipe(gulp.dest(DEVENV_DIR))
       .on("error", reject)
       .on("end", resolve);
   });
@@ -227,10 +231,15 @@ function bundleFiles(buildInfo, debug)
       "ui/js/"
     ),
 
-    bundle("lib/content/index.js", buildInfo, debug),
-    bundle("lib/background/index.js", buildInfo, debug),
-    bundle("lib/ui/options/index.js", buildInfo, debug),
-    bundle("lib/ui/popup/index.js", buildInfo, debug)
+    bundle(
+      [
+        "lib/background/index.js",
+        "lib/content/index.js",
+        "lib/ui/options/index.js",
+        "lib/ui/popup/index.js"
+      ],
+      buildInfo, debug
+    )
   ]);
 }
 exports.bundleFiles = bundleFiles;

package.json

@@ -20,6 +20,7 @@
     "deep-freeze": "0.0.1",
     "del": "^2.2.0",
     "eslint-config-eyeo": "^2.0.0",
+    "factor-vinylify": "^3.0.4",
     "gulp": "3.9.0",
     "gulp-csslint": "^0.2.2",
     "gulp-eslint": "^4.0.0",
@@ -41,8 +42,7 @@
     "sign-addon": "^0.2.1",
     "sinon": "^1.17.4",
     "sinon-chrome": "2.1.2",
-    "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0"
+    "vinyl-buffer": "^1.0.0"
   },
   "dependencies": {
     "dexie": "^2.0.1",

src/manifest.json

@@ -21,12 +21,18 @@
     "128": "icons/flattr-128x128-default.png"
   },
   "background": {
-    "scripts": ["lib/background/index.js"]
+    "scripts": [
+      "lib/common.js",
+      "lib/background/index.js"
+    ]
   },
   "content_scripts": [
     {
       "matches": ["http://*/*", "https://*/*"],
-      "js": ["lib/content/index.js"],
+      "js": [
+        "lib/common.js",
+        "lib/content/index.js"
+      ],
       "run_at": "document_start"
     }
   ],

src/ui/options.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" type="text/css" href="css/input-toggle.css"/>
     <link rel="stylesheet" type="text/css" href="css/options.css"/>
     <script src="js/webcomponents-lite.js" defer></script>
+    <script src="../lib/common.js" defer></script>
     <script src="../lib/ui/options/index.js" defer></script>
   </head>
   <body>

src/ui/popup.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="css/popup-flattr-control.css"/>
     <link rel="stylesheet" type="text/css" href="css/popup.css"/>
     <script src="js/webcomponents-lite.js" defer></script>
+    <script src="../lib/common.js" defer></script>
     <script src="../lib/ui/popup/index.js" defer></script>
   </head>
   <body>

test/tests/build.js

@@ -211,6 +211,8 @@ describe("Test build tasks", () =>
         .then(() => assertExists("./devenv", true))
         .then(() => assertExists("./devenv/COPYING", true))
         .then(() => assertExists("./devenv/manifest.json", true))
+        .then(() => assertExists("./devenv/lib/common.js", true))
+        .then(() => assertExists("./devenv/lib/common.js.map", true))
         .then(() => assertExists("./devenv/lib/background/index.js", true))
         .then(() => assertExists("./devenv/ui/js/webcomponents-lite.js", true))
         .then(() => assertExists("./devenv/lib/background/index.js.map", true))
@@ -224,6 +226,7 @@ describe("Test build tasks", () =>
         .then(() => assertExists("./devenv", true))
         .then(() => assertExists("./devenv/COPYING", true))
         .then(() => assertExists("./devenv/manifest.json", true))
+        .then(() => assertExists("./devenv/lib/common.js", true))
         .then(() => assertExists("./devenv/lib/background/index.js", true))
         .then(() => assertExists("./devenv/ui/js/webcomponents-lite.js", true))
         .then(() => assertExists("./bin", false))