From be1c5badd833f8f962efb030fc7bd9b03560e68a Mon Sep 17 00:00:00 2001
From: Iuri Matias <iuri.matias@gmail.com>
Date: Tue, 16 Jan 2018 19:17:52 -0500
Subject: [PATCH] improve full support for es6

---
 lib/pipeline/pipeline.js | 94 +++++++++++++++++++++++++++++++++++-----
 package.json             |  7 +++
 test_app/app/index.html  |  5 ++-
 test_app/app/js/index.js | 32 ++++++++++++--
 test_app/embark.json     |  1 -
 test_app/package.json    |  5 ++-
 webpack.config.js        |  1 +
 7 files changed, 128 insertions(+), 17 deletions(-)
 create mode 100644 webpack.config.js

diff --git a/lib/pipeline/pipeline.js b/lib/pipeline/pipeline.js
index 8adc375a4..95626c7a2 100644
--- a/lib/pipeline/pipeline.js
+++ b/lib/pipeline/pipeline.js
@@ -7,6 +7,11 @@ var utils = require('../utils/utils.js');
 //let currentWeb3Version = require('../../package.json').dependencies.web3.replace("^","");
 const webpack = require("webpack");
 
+require("babel-preset-react");
+require("babel-preset-es2015");
+require("babel-preset-es2016");
+require("babel-preset-es2017");
+
 class Pipeline {
 
   constructor(options) {
@@ -57,6 +62,42 @@ class Pipeline {
                       path: utils.joinPath(fs.dappPath(), '.embark'),
                       filename: file.filename
                     },
+                    resolve: {
+                      alias: importsList,
+                      modules: [
+                        fs.embarkPath('node_modules'),
+                        utils.joinPath(fs.dappPath(), 'node_modules')
+                      ]
+                    },
+                    externals: function(context, request, callback) {
+                      callback();
+                    }
+                  }).run((_err, _stats) => {
+                    next();
+                  });
+                },
+
+                function changeCwd(next) {
+                  realCwd = process.env.PWD;
+                  process.chdir(fs.embarkPath(''));
+                  next();
+                },
+
+                function findImportsPhase2(next) {
+                  webpack({
+                    entry: utils.joinPath(fs.dappPath(), file.filename),
+                    output: {
+                      libraryTarget: 'umd',
+                      path: utils.joinPath(fs.dappPath(), '.embark'),
+                      filename: file.filename
+                    },
+                    resolve: {
+                      alias: importsList,
+                      modules: [
+                        fs.embarkPath('node_modules'),
+                        utils.joinPath(fs.dappPath(), 'node_modules')
+                      ]
+                    },
                     externals: function(context, request, callback) {
                       if (request === utils.joinPath(fs.dappPath(), file.filename)) {
                         callback();
@@ -70,16 +111,38 @@ class Pipeline {
                         }
                         callback(null, "amd " + Math.random());
                       }
-                    }
+                    },
+                    module: {
+                      rules: [
+                        {
+                          test: /\.css$/,
+                          use: [{loader: "style-loader"}, {loader: "css-loader"}]
+                        },
+                        {
+                          test: /\.scss$/,
+                          use: [{loader: "style-loader"}, {loader: "css-loader"}]
+                        },
+                        {
+                          test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+                          loader: 'url-loader?limit=100000'
+                        },
+                        {
+                          test: /\.js$/,
+                          loader: "babel-loader",
+                          exclude: /(node_modules|bower_components)/,
+                          options: {
+                            presets: ['es2016', 'es2017', 'react'],
+                            plugins: [
+                              "babel-plugin-webpack-aliases"
+                            ]
+                          }
+                        }
+                      ]
+                    },
                   }).run((_err, _stats) => {
                     next();
                   });
-                },
 
-                function changeCwd(next) {
-                  realCwd = process.env.PWD;
-                  process.chdir(fs.embarkPath(''));
-                  next();
                 },
 
                 function runWebpack(next) {
@@ -117,9 +180,20 @@ class Pipeline {
                         {
                           test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                           loader: 'url-loader?limit=100000'
+                        },
+                        {
+                          test: /\.js$/,
+                          loader: "babel-loader",
+                          exclude: /(node_modules|bower_components)/,
+                          options: {
+                            presets: ['es2016', 'es2017', 'react'],
+                            plugins: [
+                              "babel-plugin-webpack-aliases"
+                            ]
+                          }
                         }
                       ]
-                    }
+                    },
                   }).run((_err, _stats) => {
                     next();
                   });
@@ -192,16 +266,16 @@ class Pipeline {
   }
 
   buildContracts(contractsJSON) {
-    fs.mkdirpSync(this.buildDir + 'contracts');
+    fs.mkdirpSync(utils.joinPath(fs.dappPath(), this.buildDir, 'contracts'));
 
     for (let className in contractsJSON) {
       let contract = contractsJSON[className];
-      fs.writeJSONSync(this.buildDir + 'contracts/' + className + ".json", contract, {spaces: 2});
+      fs.writeJSONSync(utils.joinPath(fs.dappPath(), this.buildDir, 'contracts', className + ".json"), contract, {spaces: 2});
     }
   }
 
   buildContractJS(contractName) {
-    let contractJSON = fs.readFileSync('dist/contracts/' + contractName + '.json').toString();
+    let contractJSON = fs.readFileSync(utils.joinPath(fs.dappPath(), this.buildDir, 'contracts', contractName + '.json')).toString();
 
     let contractCode = "";
     contractCode += "import web3 from 'Embark/web3';\n";
diff --git a/package.json b/package.json
index b857e88cf..9de8bab93 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,13 @@
   },
   "dependencies": {
     "async": "^2.0.1",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-es2016": "^6.24.1",
+    "babel-preset-es2017": "6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-plugin-webpack-aliases": "^1.1.3",
     "blessed": "^0.1.81",
     "chokidar": "^1.6.0",
     "colors": "^1.1.2",
diff --git a/test_app/app/index.html b/test_app/app/index.html
index 80a00fa23..9ee0951ea 100644
--- a/test_app/app/index.html
+++ b/test_app/app/index.html
@@ -4,9 +4,11 @@
     <!-- <link rel="stylesheet" href="css/app.css"> -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
     <!-- <script src="js/bootstrap.js"></script> -->
-    <script src="js/app.js"></script>
   </head>
   <body class="container">
+
+    <div id="root"></div>
+
     <h3>Embark - Usage Example</h3>
 
     <ul class="nav nav-tabs" role="tablist" id="myTabs">
@@ -105,5 +107,6 @@
       </div>
     </div>
 
+    <script src="js/app.js"></script>
   </body>
 </html>
diff --git a/test_app/app/js/index.js b/test_app/app/js/index.js
index 0c75cfdc4..dcbb0e0aa 100644
--- a/test_app/app/js/index.js
+++ b/test_app/app/js/index.js
@@ -1,20 +1,46 @@
 /*globals $, SimpleStorage, document*/
 
+//import React, { Component } from 'react';
+import EmbarkJS from 'Embark/EmbarkJS';
+import SimpleStorage from 'Embark/contracts/SimpleStorage';
+import Test from 'Embark/contracts/Test';
+
+import React from 'react';
+let Component = React.Component;
+
+import ReactDOM from 'react-dom';
+
 //import $ from './_vendor/jquery.min';
 import $ from 'jquery';
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 //import 'bootstrap/dist/js/bootstrap.min.js';
-import EmbarkJS from 'Embark/EmbarkJS';
-import SimpleStorage from 'Embark/contracts/SimpleStorage';
-import Test from 'Embark/contracts/Test';
 
 window.EmbarkJS = EmbarkJS;
 window.SimpleStorage = SimpleStorage;
 window.Test = Test;
 
+window.React = React;
+
 import './foo.css';
 
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <h1 className="App-title">Welcome to React</h1>
+        </header>
+        <p className="App-intro">
+          To get started, edit <code>src/App.js</code> and save to reload.
+        </p>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
 var addToLog = function(id, txt) {
   $(id + " .logs").append("<br>" + txt);
 };
diff --git a/test_app/embark.json b/test_app/embark.json
index 1998cfb16..aa988a9a1 100644
--- a/test_app/embark.json
+++ b/test_app/embark.json
@@ -14,7 +14,6 @@
   "buildDir": "dist/",
   "config": "config/",
   "plugins": {
-    "embark-babel": {"files": ["**/*.js", "**/*.jsx", "!**/_vendor/*.js"]},
     "embark-service": {}
   }
 }
diff --git a/test_app/package.json b/test_app/package.json
index dd05b5900..b58c37ee8 100644
--- a/test_app/package.json
+++ b/test_app/package.json
@@ -12,8 +12,9 @@
   "devDependencies": {},
   "dependencies": {
     "bootstrap": "^3.3.6",
-    "embark-babel": "^1.0.0",
     "embark-service": "./extensions/embark-service",
-    "jquery": "^1.11.3"
+    "jquery": "^1.11.3",
+    "react": "^16.0.0",
+    "react-dom": "^16.2.0"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1 @@
+{}