Merge pull request #848 from stealjs/serviveworker

bundle assets in slim loader

.gitignore

@@ -38,3 +38,4 @@ test/live_reload/out.js
 test/transform_export/out.js
 test/exports_basics/out.js
 test/circular/export/
+/test/serviceworker/service-worker.js

lib/build/multi.js

@@ -1,3 +1,4 @@
+/*jshint funcscope:true*/
 /*
 
 # lib/build/multi.js
@@ -109,21 +110,25 @@ module.exports = function(config, options){
 				}
 			);
 
-			writeStream.on("data", function(data){
-				this.end();
+			writeStream.on("data", function(builtResult){
+				// run external steal-tool plugins after the build
+				if(options){
 
-				// If bundleAssets is truthy run the bundler after the build.
-				if(options && options.bundleAssets) {
-					require("steal-bundler")(data, options.bundleAssets)
-						.then(function(){
-							resolve(data);
-						}, function(err){
-							reject(err);
+					var p = Promise.resolve(builtResult);
+
+					if(options.bundleAssets){
+						var bundleAssets = require("steal-bundler");
+						p = p.then(function(builtResult) {
+							return bundleAssets(builtResult, options.bundleAssets);
 						});
-					return;
+					}
 				}
 
-				resolve(data);
+				p.then(function (builtResult) {
+					resolve(builtResult);
+				}).catch(function (error) {
+					reject(error);
+				});
 			});
 		});
 	}

lib/build/slim.js

@@ -1,3 +1,4 @@
+/*jshint funcscope:true*/
 var pump = require("pump");
 var arrify = require("../arrify");
 var assign = require("lodash/assign");
@@ -92,7 +93,25 @@ module.exports = function(cfg, opts) {
 			}
 		);
 
-		final.on("data", dfd.resolve);
+		final.on("data", function (builtResult) {
+			// run external steal-tool plugins after the build
+			if (options) {
+				var p = Promise.resolve(builtResult);
+
+				if (options.bundleAssets) {
+					var bundleAssets = require("steal-bundler");
+					p = p.then(function (builtResult) {
+						return bundleAssets(builtResult, options.bundleAssets);
+					});
+				}
+			}
+
+			p.then(function (builtResult) {
+				dfd.resolve(builtResult);
+			}).catch(function (error) {
+				dfd.reject(error);
+			});
+		});
 		return dfd.promise;
 	});
 

package.json

@@ -11,7 +11,7 @@
     "babel-standalone": "^6.23.1",
     "bitovi-source-map": "0.4.2-bitovi.2",
     "chokidar": "^1.0.1",
-    "clean-css": "^4.0.5",
+    "clean-css": "^4.1.9",
     "colors": "^1.1.2",
     "find-line-column": "^0.5.2",
     "fs-extra": "~4.0.2",
@@ -24,7 +24,7 @@
     "multimatch": "^2.1.0",
     "normalize-path": "^2.1.1",
     "pdenodeify": "^0.1.0",
-    "prettier": "^1.3.1",
+    "prettier": "^1.7.0",
     "pump": "^1.0.2",
     "steal": "^1.5.13",
     "steal-bundler": "^0.3.0",
@@ -33,19 +33,19 @@
     "tmp": "0.0.33",
     "traceur": "0.0.111",
     "transpile": "^2.5.5",
-    "uglify-es": "^3.0.26",
+    "uglify-es": "^3.1.2",
     "urix": "^0.1.0",
     "winston": "^2.2.0",
-    "ws": "^3.0.0",
+    "ws": "^3.2.0",
     "yargs": "^8.0.1"
   },
   "devDependencies": {
     "babel-plugin-steal-test": "0.0.2",
     "babel-preset-steal-test": "0.0.1",
     "bower": "1.8.2",
     "browserify": "~14.3.0",
-    "comparify": "git://github.com/bitovi/comparify#master",
-    "connect": "^3.5.0",
+    "comparify": "git://github.com/bitovi/comparify.git#master",
+    "connect": "^3.6.5",
     "coveralls-send": "0.0.2",
     "cssify": "^1.0.3",
     "istanbul": "^0.4.2",
@@ -55,12 +55,12 @@
     "mocha-lcov-reporter": "^1.2.0",
     "mock-fs": "4.4.1",
     "mockery": "^2.0.0",
-    "rimraf": "^2.5.2",
-    "serve-static": "^1.11.2",
+    "rimraf": "^2.6.2",
+    "serve-static": "^1.12.6",
     "steal-conditional": "^0.4.0",
     "steal-qunit": "^1.0.0",
     "testee": "^0.4.0",
-    "tree-kill": "^1.0.0",
+    "tree-kill": "^1.2.0",
     "zombie": "^5.0.6"
   },
   "bin": {

test/bundle_assets/assets/some.json

@@ -0,0 +1 @@
+{}

test/bundle_assets/main.css

@@ -0,0 +1,3 @@
+body {
+    background-image: url(./images/logo.png);
+}

test/bundle_assets/main.js

@@ -0,0 +1,11 @@
+require("./main.css");
+
+var xhr = new XMLHttpRequest();
+
+xhr.open("GET", "dist/images/logo.png");
+
+xhr.onload = function(){
+    window.MODULE = {};
+};
+
+xhr.send();

test/bundle_assets/prod-slim.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Test</title>
+</head>
+<body>
+<script src="./dist/bundles/main.js" async></script>
+</body>
+</html>

test/bundle_assets/prod.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Test</title>
+</head>
+<body>
+<script src="./dist/steal.production.js" main="main"></script>
+</body>
+</html>

test/bundle_assets/steal-css-slim.js

@@ -0,0 +1,70 @@
+/* naive version of the css plugin for the slim loader */
+module.exports = function(moduleId, config) {
+    return new CssModule(config.paths[config.bundles[moduleId]]).injectLink();
+};
+
+function CssModule(address) {
+    this.address = address;
+}
+
+// timeout in seconds
+CssModule.waitTimeout = 60;
+
+CssModule.prototype.linkExists = function() {
+    var styleSheets = document.styleSheets;
+    var anchor = document.createElement("a");
+    anchor.href = this.address;
+    var href = anchor.href;
+
+    for (var i = 0; i < styleSheets.length; ++i) {
+        if (href === styleSheets[i].href) {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+CssModule.prototype.injectLink = function() {
+    if (this._loadPromise) {
+        return this._loadPromise;
+    }
+
+    if (this.linkExists()) {
+        this._loadPromise = Promise.resolve("");
+        return this._loadPromise;
+    }
+
+    // inspired by https://github.com/filamentgroup/loadCSS
+    var link = (this.link = document.createElement("link"));
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.href = this.address;
+
+    // wait until the css file is loaded
+    this._loadPromise = new Promise(function(resolve, reject) {
+        var timeout = setTimeout(function() {
+            reject("Unable to load CSS");
+        }, CssModule.waitTimeout * 1000);
+
+        var linkEventCallback = function(event) {
+            clearTimeout(timeout);
+
+            link.removeEventListener("load", linkEventCallback);
+            link.removeEventListener("error", linkEventCallback);
+
+            if (event && event.type === "error") {
+                reject("Unable to load CSS");
+            } else {
+                resolve("");
+            }
+        };
+
+        link.addEventListener("load", linkEventCallback);
+        link.addEventListener("error", linkEventCallback);
+
+        document.head.appendChild(link);
+    });
+
+    return this._loadPromise;
+};

test/bundle_assets/stealconfig.js

@@ -0,0 +1,8 @@
+steal.config({
+	ext: {
+		"css": "steal-css"
+	},
+	paths: {
+		"steal-css": "../steal-css.js"
+	}
+});

test/bundle_assets_test.js

@@ -0,0 +1,81 @@
+var asap = require("pdenodeify"),
+    assert = require("assert"),
+    comparify = require("comparify"),
+    fs = require("fs-extra"),
+    multiBuild = require("../index").build,
+    optimize = require("../index").optimize,
+    rmdir = require("rimraf"),
+    path = require("path"),
+    testHelpers = require("./helpers");
+
+var find = testHelpers.find;
+var open = testHelpers.open;
+
+describe("bundleAssets", function(){
+    this.timeout(50000);
+
+    before(function(done){
+        asap(rmdir)(__dirname + "/bundle_assets/dist")
+            .then(function(){
+                done();
+            });
+    });
+
+    it("works with steal-tools build", function(done){
+        multiBuild({
+            main: "main",
+            config: path.join(__dirname, "bundle_assets", "stealconfig.js")
+        }, {
+            quiet: true,
+            minify: false,
+            bundleAssets: {
+                infer: true,
+                glob: [
+                    path.join(__dirname, "bundle_assets", "assets", "*")
+                ]
+            }
+        }).then(function(){
+            open("test/bundle_assets/prod.html", function(browser, close){
+                find(browser, "MODULE", function(module){
+                    const logo = path.join(__dirname, "bundle_assets", "dist", "images", "logo.png");
+                    assert(fs.pathExistsSync(logo), "image was copied");
+
+                    const json = path.join(__dirname, "bundle_assets", "dist", "assets", "some.json");
+                    assert(fs.pathExistsSync(json), "asset was copied");
+
+                    assert(true, "page loaded correctly");
+                    close();
+                }, close);
+            }, done);
+        });
+    });
+
+    it("works with steal-tools optimize", function (done) {
+        optimize({
+            main: "main",
+            config: path.join(__dirname, "bundle_assets", "stealconfig.js")
+        }, {
+            quiet: true,
+            minify: false,
+            bundleAssets: {
+                infer: true,
+                glob: [
+                    path.join(__dirname, "bundle_assets", "assets", "*")
+                ]
+            }
+        }).then(function() {
+            open("test/bundle_assets/prod-slim.html", function(browser, close){
+                find(browser, "MODULE", function(module){
+                    const logo = path.join(__dirname, "bundle_assets", "dist", "images", "logo.png");
+                    assert(fs.pathExistsSync(logo), "image was copied");
+
+                    const json = path.join(__dirname, "bundle_assets", "dist", "assets", "some.json");
+                    assert(fs.pathExistsSync(json), "asset was copied");
+
+                    assert(true, "page loaded correctly");
+                    close();
+                }, close);
+            }, done);
+        });
+    })
+});

test/serviceworker/index.js

@@ -0,0 +1 @@
+console.log("test");

test/serviceworker/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "serviceworker",
+  "version": "0.0.1",
+  "dependencies": {
+
+  }
+}