Hook up webpack to grunt

.gitignore

@@ -3,5 +3,5 @@ build/
 *.~
 bower_components
 node_modules
-src/font/*.otf
+src/vendor
 docs/jsdoc

Gruntfile.js

@@ -32,21 +32,7 @@ module.exports = function (grunt) {
             cwd: "src/nls"
         }, "*");
     
-    /**
-     * Concatenates the json files in the locale folder   
-     *
-     * @param {string} locale
-     * @return {Object} [description]
-     */
-    var i18nGetConcatOptions = function (locale) {
-        return {
-            dest: "src/nls/" + locale + ".json",
-            src: "*.json",
-            cwd: "src/nls/" + locale
-        };
-    };
-
-    var gruntConfig = {
+    grunt.initConfig({
         jshint: {
             options: {
                 jshintrc: true
@@ -119,66 +105,66 @@ module.exports = function (grunt) {
                 newlineMaximum: 1
             }
         },
+        // Preparation tasks
+        // Concatenates the multiple dictionary files
+        // into a single json file per locale
+        "concat-json": {
+            i18n: {
+                files: ALL_LOCALES.map(function (locale) {
+                    return {
+                        dest: "src/nls/" + locale + ".json",
+                        src: "*.json",
+                        cwd: "src/nls/" + locale
+                    };
+                })
+            },
+            options: {
+                space: " "
+            }
+        },
+        // Merges the non-en locale dictionaries with English so any missing string
+        // is replaced by the English one
+        "merge-json": {
+            i18n: {
+                files: ALL_LOCALES.reduce(function (map, locale) {
+                    // No need to merge English
+                    if (locale === "en") {
+                        return map;
+                    }
+
+                    var source = "src/nls/" + locale + ".json",
+                        target = "src/nls/" + locale + ".json";
 
+                    map[target] = ["src/nls/en.json", source];
+                    return map;
+                }, {})
+            },
+            options: {
+                space: " "
+            }
+        },
+        // Utility tasks
         clean: {
             build: ["./build"],
             i18n: ["./src/nls/*.json"]
         },
         copy: {
-            requirejs: { src: "bower_components/requirejs/require.js", dest: "build/js/require.js" },
-            html: { src: "src/index-build.html", dest: "build/index.html" },
+            html: { src: "src/index.html", dest: "build/index.html" },
             img: { expand: true, cwd: "src/img", src: "**", dest: "build/img/" }
         },
-        less: {
-            style: {
-                files: {
-                    "build/style/main.css": "src/style/main.less"
-                }
+        // Build tasks
+        webpack: {
+            design: require("./webpack.config.js"),
+            options: {
+                watch: !!grunt.option("watch"),
+                keepalive: !!grunt.option("watch")
             }
         },
         concurrent: {
             test: ["jshint", "jscs", "jsdoc", "jsonlint", "lintspaces"]
         }
-    };
-
-    // Auto create all i18n tasks
-    
-    gruntConfig["concat-json"] = {
-        i18n: {
-            files: ALL_LOCALES.map(function (locale) {
-                return i18nGetConcatOptions(locale);
-            })
-        },
-        options: {
-            space: " "
-        }
-    };
-
-    // Merge dictionaries with English for missing keys
-    var jsonMergeTargets = {};
-
-    ALL_LOCALES.forEach(function (locale) {
-        if (locale === "en") {
-            return;
-        }
-
-        var source = "src/nls/" + locale + ".json",
-            target = "src/nls/" + locale + ".json";
-
-        jsonMergeTargets[target] = ["src/nls/en.json", source];
     });
 
-    gruntConfig["merge-json"] = {
-        i18n: {
-            files: jsonMergeTargets
-        },
-        options: {
-            space: " "
-        }
-    };
-
-    grunt.initConfig(gruntConfig);
-
     grunt.loadNpmTasks("grunt-jsxhint");
     grunt.loadNpmTasks("grunt-jscs");
     grunt.loadNpmTasks("grunt-jsdoc");
@@ -187,19 +173,16 @@ module.exports = function (grunt) {
 
     grunt.loadNpmTasks("grunt-contrib-clean");
     grunt.loadNpmTasks("grunt-contrib-copy");
-    grunt.loadNpmTasks("grunt-contrib-requirejs");
-    grunt.loadNpmTasks("grunt-contrib-less");
+
+    grunt.loadNpmTasks("grunt-webpack");
 
     grunt.loadNpmTasks("grunt-concurrent");
     grunt.loadNpmTasks("grunt-concat-json");
     grunt.loadNpmTasks("grunt-merge-json");
 
     grunt.registerTask("seqtest", ["jshint", "jscs", "jsdoc", "jsonlint", "lintspaces"]);
     grunt.registerTask("test", ["concurrent:test"]);
-    grunt.registerTask("seqcompile", ["clean", "copy:requirejs", "copy:html", "copy:img", "less", "requirejs"]);
-    grunt.registerTask("compile", ["clean", "copy:requirejs", "copy:html", "copy:img", "less", "concurrent:requirejs"]);
-    grunt.registerTask("compile:en", ["clean", "copy:requirejs", "copy:html", "copy:img", "less", "requirejs:en"]);
     grunt.registerTask("i18n", ["clean:i18n", "concat-json", "merge-json"]);
-    grunt.registerTask("build", ["test", "compile"]);
+    grunt.registerTask("compile", ["test", "clean:build", "i18n", "copy", "webpack", "clean:i18n"]);
     grunt.registerTask("default", ["test"]);
 };

bower.json

@@ -30,17 +30,11 @@
     "eventEmitter": "~4.2.11",
     "fluxxor": "~1.7.1",
     "generator-connection": "https://github.com/adobe-photoshop/generator-connection.git#^2.4",
-    "i18n": "requirejs-i18n#~2.0.6",
     "immutable": "~3.7.5",
-    "jsx-requirejs-plugin": "~0.6.0",
-    "less": "~2.5.0",
     "lodash": "~3.10.1",
     "loglevel": "~1.4.0",
     "mathjs": "~2.2.0",
     "react": "~0.13.3",
-    "requirejs": "~2.1.20",
-    "requirejs-i18n": "~2.0.6",
-    "requirejs-text": "~2.0.14",
     "spaces-adapter": "https://github.com/adobe-photoshop/spaces-adapter.git#^0.30.0",
     "tinycolor": "~1.2.1"
   },

manifest.json

@@ -1,5 +1,5 @@
 {
-    "start_url": "./src/index.html",
+    "start_url": "./build/index.html",
     "name": "Adobe Photoshop Design Space",
     "short_name": "Design Space"
 }

package.json

@@ -23,20 +23,19 @@
     "esprima-fb": "^15001.1.0-dev-harmony-fb",
     "expose-loader": "^0.7.1",
     "extract-text-webpack-plugin": "^0.9.1",
-    "file-loader": "^0.8.4",
     "grunt": "^0.4.5",
     "grunt-concat-json": "0.0.10",
     "grunt-concurrent": "^2.0.4",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-copy": "^0.5.0",
     "grunt-contrib-less": "^1.0.0",
-    "grunt-contrib-requirejs": "^0.4.4",
     "grunt-jscs": "^2.3.0",
     "grunt-jsdoc": "^0.6.8",
     "grunt-jsonlint": "^1.0.4",
     "grunt-jsxhint": "^0.6.0",
     "grunt-lintspaces": "^0.7.0",
     "grunt-merge-json": "^0.9.5",
+    "grunt-webpack": "^1.0.11",
     "jscs-jsdoc": "shaoshing/jscs-jsdoc#7fbf64b",
     "jscs-trailing-whitespace-in-source": "0.0.1",
     "json-loader": "^0.5.3",
@@ -47,10 +46,10 @@
     "lodash": "^3.10.1",
     "node-lintspaces": "shaoshing/node-lintspaces",
     "react-tools": "^0.13.1",
-    "style-loader": "^0.13.0",
-    "uglify-loader": "^1.2.0",
     "uglifyjs": "^2.4.10",
     "url-loader": "^0.5.6",
-    "webpack": "^1.12.3"
+    "webpack": "^1.12.3",
+    "webpack-dev-server": "^1.12.1",
+    "wolfy87-eventemitter": "^4.3.0"
   }
 }

src/index-build.html

@@ -1,64 +0,0 @@
-<!doctype html>
-<!--
-  Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
-   
-  Permission is hereby granted, free of charge, to any person obtaining a
-  copy of this software and associated documentation files (the "Software"),
-  to deal in the Software without restriction, including without limitation
-  the rights to use, copy, modify, merge, publish, distribute, sublicense,
-  and/or sell copies of the Software, and to permit persons to whom the
-  Software is furnished to do so, subject to the following conditions:
-   
-  The above copyright notice and this permission notice shall be included in
-  all copies or substantial portions of the Software.
-   
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
-  DEALINGS IN THE SOFTWARE.
--->
-
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Photoshop Design Space (optimized build)</title>
-    <link rel="stylesheet" type="text/css" href="style/main.css" />
-    <script src="js/require.js"></script>
-    <script>
-        var locale = window.navigator.language,
-            parts = locale.match(/\w+/),
-            language = parts.length > 0 && parts[0];
-
-        switch (language) {
-        case "en":
-        case "de":
-        case "fr":
-        case "ja":
-            break;
-        default:
-            language = "en"
-        }
-
-        var localeModuleName = "js/init-build-" + language;
-
-        require.config({
-            paths: {
-                "js/init-build": localeModuleName
-            },
-            config: {
-                i18n: {
-                    locale: language
-                }
-            }
-        });
-
-        require(["js/init-build"]);
-    </script>
-</head>
-<body>
-    <div class="main"></div>
-</body>
-</html>

src/index.html

@@ -25,12 +25,12 @@
 <head>
     <meta charset="utf-8">
     <title>Photoshop Design Space (development build)</title>
-    <link rel="stylesheet/less" type="text/css" href="style/main.less" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
     <script type="text/javascript">
       var locale = window.navigator.language,
-        js = document.createElement("script");
+          js = document.createElement("script");
 
-      js.src = "../build/spaces-design-" + locale + ".js";
+      js.src = "./spaces-design-" + locale + ".js";
       js.type = "text/javascript";
 
       document.head.appendChild(js);

src/js/fluxcontroller.js

@@ -26,7 +26,7 @@ define(function (require, exports, module) {
 
     var Fluxxor = require("fluxxor"),
         Promise = require("bluebird"),
-        EventEmitter = require("events").EventEmitter,
+        EventEmitter = require("eventEmitter"),
         _ = require("lodash");
 
     var ps = require("adapter").ps,

src/js/models/library_sync_status.js

@@ -25,7 +25,7 @@ define(function (require, exports, module) {
     "use strict";
     
     var _ = require("lodash"),
-        EventEmitter = require("events").EventEmitter;
+        EventEmitter = require("eventEmitter");
     
     var log = require("js/util/log");
 

src/js/util/async-dependency-queue.js

@@ -24,7 +24,7 @@
 define(function (require, exports, module) {
     "use strict";
 
-    var EventEmitter = require("events").EventEmitter,
+    var EventEmitter = require("eventEmitter"),
         Promise = require("bluebird"),
         _ = require("lodash");