Some new files for JS rendering of new layout.

package.json

@@ -10,11 +10,15 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "@babel/core": "^7.2.2",
+        "@babel/plugin-proposal-class-properties": "^7.2.3",
+        "@babel/preset-flow": "^7.0.0",
         "@babel/preset-react": "^7.0.0",
         "axios": "^0.18",
         "babel-preset-react": "^6.23.0",
         "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
+        "flow-bin": "^0.89.0",
         "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "lodash": "^4.17.5",
@@ -23,6 +27,17 @@
         "react-dom": "^16.2.0",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
-        "sass-loader": "^7.1.0"
+        "sass-loader": "^7.1.0",
+        "webpack": "^4.28.3"
+    },
+    "dependencies": {
+        "d3-scale": "^2.1.2",
+        "formik": "^1.4.1",
+        "react-c3js": "^0.1.20",
+        "react-google-maps": "^9.4.5",
+        "react-router-dom": "^4.3.1",
+        "react-simple-maps": "^0.12.1",
+        "react-syntax-highlighter": "^10.1.2",
+        "tabler-react": "^1.27.0"
     }
 }

webpack.mix.js

@@ -1,18 +1,84 @@
-const mix = require('laravel-mix');
+let mix = require('laravel-mix');
+let Assert = require('laravel-mix/src/Assert');
+let glob = require('glob');
 
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for the application as well as bundling up all the JS files.
- |
- */
+mix.extend(
+    'foo',
+    new class {
 
-mix.react('resources/js/app.js', 'public/v2/assets/js')
-   .sass('resources/sass/app.scss', 'public/v2/assets/css');
+        constructor() {
+            this.toCompile = [];
+        }
+        /**
+         * The API name for the component.
+         */
+        name() {
+            return 'foo';
+        }
+        register(entry, output) {
+            if (typeof entry === 'string' && entry.includes('*')) {
+                entry = glob.sync(entry);
+            }
+
+            Assert.js(entry, output);
+
+            entry = [].concat(entry).map(file => new File(file));
+            output = new File(output);
+
+            this.toCompile.push({ entry, output });
+
+            Mix.bundlingJavaScript = true;
+        }
+
+        /**
+         * Assets to append to the webpack entry.
+         *
+         * @param {Entry} entry
+         */
+        webpackEntry(entry) {
+            this.toCompile.forEach(js => {
+                entry.addFromOutput(
+                    js.entry.map(file => file.path()),
+                    js.output,
+                    js.entry[0]
+                );
+            });
+        }
+        dependencies() {
+            return ["@babel/preset-flow",'@babel/preset-react'];
+        }
+
+        /**
+         * webpack rules to be appended to the master config.
+         */
+        webpackRules() {
+            return [].concat([
+                                 {
+                                     test: /\.jsx?$/,
+                                     exclude: /(node_modules|bower_components)/,
+                                     use: [
+                                         {
+                                             loader: 'babel-loader',
+                                             options: this.babelConfig()
+                                         }
+                                     ]
+                                 }
+                             ]);
+        }
+
+        /**
+         * Babel config to be merged with Mix's defaults.
+         */
+        babelConfig() {
+            return {
+                presets: ["@babel/preset-flow",'@babel/preset-react'],
+                plugins: [["@babel/plugin-proposal-class-properties"]]
+            };
+        }
 
 
+    }()
+);
 
+
+mix.foo('resources/js/app.js', 'public/v2/assets/js').sass('resources/sass/app.scss', 'public/v2/assets/css');