AG-530 Implement React declarative offering

seanlandsman · seanlandsman · commit b030235bbc34 · 2017-11-07T16:32:03.000Z
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config webpack.config.trader.js --progress --colors --hot --inline",
     "examples": "webpack-dev-server --content-base src/ --config webpack.config.examples.js --progress --colors --hot --inline",
-    "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline",
+    "large": "webpack-dev-server --content-base src-large/ --config webpack.config.large.js --progress --colors --hot --inline",
     "clean": "rimraf dist",
     "mkdirs": "mkdirp dist/trader/dist dist/examples/dist",
     "copy-examples": "ncp images dist/examples/images && ncp src/index.html dist/examples/index.html && ncp dist/react-examples.js dist/examples/dist/react-examples.js && ncp src dist/examples/src",
diff --git a/src-large/index.html b/src-large/index.html
@@ -5,7 +5,7 @@
 
     <head>
         <meta charset="utf-8">
-        <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
+        <script type="text/javascript" src="dist/react-large.js" charset="utf-8"></script>
         <!-- Example uses font awesome icons -->
         <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
     </head>
diff --git a/src-large/index.js b/src-large/index.js
@@ -3,9 +3,9 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import LargeGrid from './largeGrid.jsx';
-// is there a better way of doing this?
-import 'ag-grid-root/dist/styles/ag-grid.css';
-import 'ag-grid-root/dist/styles/theme-fresh.css';
+
+import 'ag-grid/dist/styles/ag-grid.css';
+import 'ag-grid/dist/styles/theme-fresh.css';
 
 // waiting for dom to load before booting react. we could alternatively
 // put the index.js reference at the end fo the index.html, but i prefer this way.
diff --git a/src-trader-dashboard/index.js b/src-trader-dashboard/index.js
@@ -5,8 +5,8 @@ import {render} from "react-dom";
 
 import {Provider} from "react-redux";
 
-import "ag-grid-root/dist/styles/ag-grid.css";
-import "ag-grid-root/dist/styles/theme-fresh.css";
+import "ag-grid/dist/styles/ag-grid.css";
+import "ag-grid/dist/styles/theme-fresh.css";
 
 import StoreService from './services/StoreService';
 import TraderDashboard from "./components/TraderDashboard.jsx";
diff --git a/webpack.config.large.js b/webpack.config.large.js
@@ -1,8 +1,12 @@
+const path = require('path');
+
+const SRC_DIR = path.resolve(__dirname, 'src-large');
+
 module.exports = {
-    entry: "./src-large/index.js",
+    entry: SRC_DIR + "/index.js",
     output: {
         path: __dirname,
-        filename: "dist/bundle.js"
+        filename: "dist/react-large.js"
     },
     module: {
         loaders: [
@@ -12,16 +16,20 @@ module.exports = {
             },
             {
                 test: /\.js$|\.jsx$/,
+                include: SRC_DIR,
                 loader: 'babel-loader',
                 query: {
-                    presets: ['react', 'es2015']
+                    presets: ['react', 'es2015', 'stage-0']
                 }
             }
         ]
     },
     resolve: {
         alias: {
-            "ag-grid-root" : __dirname + "/node_modules/ag-grid"
-        }
+            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
+            react: path.resolve('./node_modules/react')
+        },
+        extensions: ['', '.js', '.jsx']
     }
 };
diff --git a/webpack.config.trader.js b/webpack.config.trader.js
@@ -26,7 +26,9 @@ module.exports = {
     },
     resolve: {
         alias: {
-            "ag-grid-root" : __dirname + "/node_modules/ag-grid"
+            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
+            react: path.resolve('./node_modules/react')
         },
         extensions: ['', '.js', '.jsx']
     }
