WIP: Initial Webpack work

.babelrc

@@ -1,5 +1,13 @@
 {
   "presets": [
-    "es2015"
+    ["env", {
+      "targets": {
+        "browsers": [
+          "last 2 versions"
+        ]
+      },
+      "modules": false,
+      "loose": true
+    }]
   ]
 }

.eslintrc

@@ -1,10 +1,13 @@
 {
   "env": {
+    "es6": true,
     "browser": true,
-    "jquery": true
+    "jquery": true,
+    "node": true,
   },
   "extends": "eslint:recommended",
   "root": true,
+  "sourceType": "module",
   "parserOptions": {
     "ecmaVersion": 6,
     "ecmaFeatures": {
@@ -13,23 +16,13 @@
   },
   "globals": {
     "angular": true,
-    "$": true,
-    "_": true,
     "_gaq": true,
     "chrome": true,
     "sum": true,
     "count": true,
     "flatMap": true,
     "gapi": true,
     "Set": true,
-    "base64js": true,
-    "SQL": true,
-    "zip": true,
-    "Uint8Array": true,
-    "Int32Array": true,
-    "DataView": true,
-    "Proxy": true,
-    "ga": true,
     "idbKeyval": true
   },
   "rules": {

.gitignore

@@ -24,3 +24,4 @@ build/dim-extension.zip
 .brackets.json
 .npmrc
 npm-debug.log
+app/generated

Gruntfile.js

@@ -99,43 +99,6 @@ module.exports = function(grunt) {
       }
     },
 
-    sass: {
-      options: {
-        sourceMap: true
-      },
-      dist: {
-        files: {
-          'app/styles/main.css': 'app/scss/main.scss'
-        }
-      }
-    },
-
-    postcss: {
-      options: {
-        map: true,
-        processors: [
-
-          require('autoprefixer')()
-        ]
-      },
-      dist: {
-        src: 'app/styles/main.css',
-        dest: 'app/styles/main.css'
-      }
-    },
-
-    watch: {
-      sass: {
-        files:['app/scss/**/*.scss'],
-        tasks:['css','sync'],
-        options: { spawn: false }
-      },
-      dist: {
-        files: ['app/**/*.{js,html}'],
-        tasks: ['sync']
-      }
-    },
-
     // See https://github.com/c301/grunt-webstore-upload
     webstore_upload: {
       accounts: {
@@ -174,33 +137,16 @@ module.exports = function(grunt) {
         }
       }
     },
-
-    eslint: {
-      target: ["app/scripts/**/*.js"],
-      options: {
-        fix: true
-      }
-    }
   });
 
-
-
   grunt.loadNpmTasks('grunt-webstore-upload');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-compress');
   grunt.loadNpmTasks('grunt-text-replace');
   grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-postcss');
-  grunt.loadNpmTasks('grunt-sass');
-  grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-sync');
-  grunt.loadNpmTasks("grunt-eslint");
-
-  grunt.registerTask('css', ['sass', 'postcss']);
-
-  grunt.registerTask('default', ['eslint', 'build', 'watch']);
 
-  grunt.registerTask('build', ['clean','css', 'sync']);
+  grunt.registerTask('build', ['clean', 'sync']);
 
   grunt.registerTask('update_chrome_beta_manifest', function() {
     var manifest = grunt.file.readJSON('dist/chrome/manifest.json');

README.md

@@ -30,14 +30,13 @@ Install dependencies:
 
 * `npm install`
 
-Generate CSS
-* `npm run generate-css`
-* `npm run dev-chrome` (This will watch the scss files for any changes and generate a new style.css)
+Build in dev mode
+* `npm start`. This will bundle and copy all the assets, as well as watch for changes.
 
 Check code Style
 * `npm run lint` will tell you if you're following the DIM code style (and automatically fix what it can).
 
-You can now run DIM locally by enabling [Chrome Extensions Developer Mode](https://developer.chrome.com/extensions/faq#faq-dev-01) and point to the `app/` folder.
+You can now run DIM locally by enabling [Chrome Extensions Developer Mode](https://developer.chrome.com/extensions/faq#faq-dev-01) and point to the `app` folder.
 
 Get your own API key:
 

app/index.html

@@ -20,9 +20,6 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="stylesheet" href="vendor/components-font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="vendor/angular-hotkeys/build/hotkeys.css">
-    <link rel="stylesheet" href="styles/main.css?v=$DIM_VERSION">
   </head>
 
   <body ng-app="dimApp" ng-strict-di ng-controller="dimAppCtrl as app" ng-class="{ 'show-elements': app.settings.showElements, itemQuality: app.featureFlags.qualityEnabled && app.settings.itemQuality, 'show-new-items': app.settings.showNewItems, 'new-item-animated': app.settings.showNewAnimation }">
@@ -56,80 +53,6 @@
         <a class="loadout random" href="#" ng-disabled="random.disableRandomLoadout" ng-if="random.showRandomLoadout" ng-click="random.applyRandomLoadout($event)">&Pi;</a>
       </div>
     </div>
-
-    <script src="scripts/google.js?v=$DIM_VERSION"></script>
-
-    <!-- begin vendor scripts -->
-    <script src="generated/index.js?v=$DIM_VERSION"></script>
-    <!-- end vendor scripts -->
-
-    <!-- begin app scripts -->
-    <script src="scripts/util.js?v=$DIM_VERSION"></script>
-    <script src="scripts/dimApp.module.js?v=$DIM_VERSION"></script>
-    <script src="scripts/dimApp.config.js?v=$DIM_VERSION"></script>
-    <script src="scripts/dimApp.i18n.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimActionQueue.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimBungieService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimDefinitions.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimManifestService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimBucketService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimInfoService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimPlatformService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimLoadoutService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimSettingsService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimStoreService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimVendorService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimXurService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimCsvService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimItemService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimItemMoveService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimItemInfoService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimFarmingService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/services/dimSyncService.factory.js?v=$DIM_VERSION"></script>
-    <script src="scripts/loadout/dimLoadout.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/loadout/dimLoadoutPopup.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/loadout/random/dimRandom.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/compare/dimCompare.directive.js"></script>
-    <script src="scripts/compare/dimCompareService.factory.js"></script>
-    <script src="scripts/shell/dimAngularFilters.filter.js?v=$DIM_VERSION"></script>
-    <script src="scripts/shell/dimMaterialsExchangeCtrl.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/shell/dimAppCtrl.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/shell/dimSettingsCtrl.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/shell/dimPlatformChoice.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/shell/dimSearchFilter.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/shell/dimClickAnywhereButHere.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/shell/dimFilterLink.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/shell/dimManifestProgress.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimPercentWidth.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimStores.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimStoreBucket.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimStoreReputation.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimStoreItem.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimStoreHeading.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimSimpleItem.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimStats.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimFarming.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/store/dimClearNewItems.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/move-popup/dimMoveAmount.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/move-popup/dimMovePopup.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/move-popup/dimTalentGrid.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/move-popup/dimMoveItemProperties.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/move-popup/dimItemTag.directive.js"></script>
-    <script src="scripts/infuse/dimInfuse.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/xur/dimXur.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/vendors/dimVendor.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/vendors/dimVendorItems.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/vendors/dimVendorCurrencies.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/minmax/dimMinMax.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/minmax/dimMinMaxItem.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/minmax/dimMinMaxLocks.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/minmax/dimMinMaxCharSelect.directive.js?v=$DIM_VERSION"></script>
-    <script src="scripts/debug/dimDebugItem.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/developer/dimDeveloper.controller.js?v=$DIM_VERSION"></script>
-    <script src="scripts/materials-exchange/dimCollapsible.directive.js?v=$DIM_VERSION"></script>
-    <!-- end app scripts -->
-
-    <!-- <script src="scripts/scripts.min.js?v=$DIM_VERSION"></script> -->
   </body>
 
 </html>

app/index.js

@@ -1,33 +1,86 @@
-window._ = require('underscore');
+require('babel-polyfill');
+
+require('./scripts/google');
 
+// TODO: remove this globals and instead require where needed
+window._ = require('underscore');
 window.$ = window.jQuery = require('jquery');
 require('jquery-textcomplete');
 require('jquery-ui/ui/position');
-
 window.humanizeDuration = require('humanize-duration');
-require('imports?define=>false,module=>false,self=>window!idb-keyval');
-// window.JSZip = require('jszip');
+require('imports-loader?define=>false,module=>false,self=>window!idb-keyval');
+window.JSZip = require('jszip');
 window.LZString = require('lz-string');
 window.MessageFormat = require('messageformat');
 window.moment = require('moment');
-window.SQL = require('sql.js');
-require('imports?this=>window!zip-js/WebContent/zip.js');
+require('imports-loader?this=>window!zip-js/WebContent/zip.js');
+window.angular = require('angular');
+
+require('./scripts/util'); // TODO: make these not global and instead import where needed
+
+require('./scripts/dimApp.module');
+require('./scripts/dimApp.config');
+require('./scripts/dimApp.i18n');
+
+require('./scripts/services/dimActionQueue.factory');
+require('./scripts/services/dimBungieService.factory');
+require('./scripts/services/dimDefinitions.factory');
+require('./scripts/services/dimManifestService.factory');
+require('./scripts/services/dimBucketService.factory');
+require('./scripts/services/dimInfoService.factory');
+require('./scripts/services/dimPlatformService.factory');
+require('./scripts/services/dimLoadoutService.factory');
+require('./scripts/services/dimSettingsService.factory');
+require('./scripts/services/dimStoreService.factory');
+require('./scripts/services/dimVendorService.factory');
+require('./scripts/services/dimXurService.factory');
+require('./scripts/services/dimCsvService.factory');
+require('./scripts/services/dimItemService.factory');
+require('./scripts/services/dimItemMoveService.factory');
+require('./scripts/services/dimItemInfoService.factory');
+require('./scripts/services/dimFarmingService.factory');
+require('./scripts/services/dimSyncService.factory');
 
-window.angular = require('exports?window.angular!angular');
+require('./scripts/loadout/dimLoadout.directive');
+require('./scripts/loadout/dimLoadoutPopup.directive');
+require('./scripts/loadout/random/dimRandom.controller');
+require('./scripts/compare/dimCompare.directive');
+require('./scripts/compare/dimCompareService.factory');
+require('./scripts/shell/dimAngularFilters.filter');
+require('./scripts/shell/dimMaterialsExchangeCtrl.controller');
+require('./scripts/shell/dimAppCtrl.controller');
+require('./scripts/shell/dimSettingsCtrl.controller');
+require('./scripts/shell/dimPlatformChoice.directive');
+require('./scripts/shell/dimSearchFilter.directive');
+require('./scripts/shell/dimClickAnywhereButHere.directive');
+require('./scripts/shell/dimFilterLink.directive');
+require('./scripts/shell/dimManifestProgress.directive');
+require('./scripts/store/dimPercentWidth.directive');
+require('./scripts/store/dimStores.directive');
+require('./scripts/store/dimStoreBucket.directive');
+require('./scripts/store/dimStoreReputation.directive');
+require('./scripts/store/dimStoreItem.directive');
+require('./scripts/store/dimStoreHeading.directive');
+require('./scripts/store/dimSimpleItem.directive');
+require('./scripts/store/dimStats.directive');
+require('./scripts/store/dimFarming.directive');
+require('./scripts/store/dimClearNewItems.directive');
+require('./scripts/move-popup/dimMoveAmount.directive');
+require('./scripts/move-popup/dimMovePopup.directive');
+require('./scripts/move-popup/dimTalentGrid.directive');
+require('./scripts/move-popup/dimMoveItemProperties.directive');
+require('./scripts/move-popup/dimItemTag.directive');
+require('./scripts/infuse/dimInfuse.controller');
+require('./scripts/xur/dimXur.controller');
+require('./scripts/vendors/dimVendor.controller');
+require('./scripts/vendors/dimVendorItems.directive');
+require('./scripts/vendors/dimVendorCurrencies.directive');
+require('./scripts/minmax/dimMinMax.controller');
+require('./scripts/minmax/dimMinMaxItem.directive');
+require('./scripts/minmax/dimMinMaxLocks.directive');
+require('./scripts/minmax/dimMinMaxCharSelect.directive');
+require('./scripts/debug/dimDebugItem.controller');
+require('./scripts/developer/dimDeveloper.controller');
+require('./scripts/materials-exchange/dimCollapsible.directive');
 
-require('angular-aria');
-require('angular-chrome-storage/angular-chrome-storage');
-require('angular-hotkeys');
-require('angular-messages');
-require('angular-moment');
-require('angular-native-dragdrop');
-require('angular-promise-tracker');
-require('angular-timer');
-require('angular-translate');
-require('angular-translate-interpolation-messageformat');
-require('angular-ui-router');
-require('angular-uuid2/dist/angular-uuid2.js');
-require('angularjs-slider');
-require('angularjs-toaster');
-require('ng-dialog');
-require('ng-http-rate-limiter');
+require('./scss/main.scss');

app/manifest.json

@@ -32,7 +32,7 @@
       "38": "icon38.png"
     }
   },
-  "options_page": "index.html",
+  "options_page": "generated/index.html",
   "content_security_policy": "script-src 'self' 'unsafe-eval' https://www.google-analytics.com https://apis.google.com; object-src 'self'",
   "incognito": "split",
   "offline_enabled": false

app/scripts/compare/dimCompare.directive.js

@@ -1,3 +1,6 @@
+const angular = require('angular');
+const _ = require('underscore');
+
 (function() {
   'use strict';