StephenGrider · urakymzhan · Mar 28, 2020
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["react", "es2015", "stage-1"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <link rel="stylesheet" href="/style/style.css">
     <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
+    <script src="https://unpkg.com/esprima@~4.0/dist/esprima.js"></script>
   </head>
   <body>
     <div class="render"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,39 +5,44 @@
   "main": "index.js",
   "repository": "[email protected]:StephenGrider/ReduxSimpleStarter.git",
   "scripts": {
-    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "start": "webpack-dev-server --open chrome",
     "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
     "test:watch": "npm run test -- --watch"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "babel-core": "^6.2.1",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
-    "chai": "^3.5.0",
-    "chai-jquery": "^2.0.0",
-    "jquery": "^2.2.1",
-    "jsdom": "^8.1.0",
-    "mocha": "^2.4.5",
-    "react-addons-test-utils": "^0.14.7",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0"
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "babel-loader": "^8.1.0",
+    "babel-preset-react": "^6.24.1",
+    "chai": "^4.2.0",
+    "chai-jquery": "^2.1.0",
+    "jquery": "^3.4.1",
+    "jsdom": "^16.2.1",
+    "mocha": "^7.1.1",
+    "react-addons-test-utils": "^15.6.2",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   },
   "dependencies": {
-    "babel-preset-stage-1": "^6.1.18",
-    "babel-standalone": "^6.7.7",
-    "esprima": "^2.7.2",
-    "lodash": "^3.10.1",
-    "react": "^0.14.3",
-    "react-addons-create-fragment": "^15.1.0",
-    "react-codemirror": "^0.2.6",
-    "react-dom": "^0.14.3",
-    "react-redux": "^4.0.0",
-    "react-router": "^2.0.1",
-    "react-split-pane": "^0.1.42",
-    "redux": "^3.0.4",
-    "reselect": "^2.5.1"
+    "babel-cli": "^6.26.0",
+    "babel-preset-stage-1": "^6.24.1",
+    "babel-standalone": "^6.26.0",
+    "css-loader": "^3.4.2",
+    "esprima": "^4.0.1",
+    "lodash": "^4.17.15",
+    "react": "^16.13.1",
+    "react-addons-create-fragment": "^15.6.2",
+    "react-codemirror": "^1.0.0",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-router": "^5.1.2",
+    "react-split-pane": "^0.1.91",
+    "redux": "^4.0.5",
+    "reselect": "^4.0.0",
+    "style-loader": "^1.1.3"
   }
 }
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -1,6 +1,6 @@
 import {
   DID_UPDATE_CODE
-} from 'actions/types';
+} from './types';
 
 export function updateCode(code) {
   console.clear();

diff --git a/src/components/editor.js b/src/components/editor.js
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React, { Component } from 'react';
 import CodeMirror from 'react-codemirror';
 import 'codemirror/mode/jsx/jsx';
-import * as actions from 'actions';
+import * as actions from '../actions';
 import { connect } from 'react-redux';
 
 class Editor extends Component {

diff --git a/src/components/viewer.js b/src/components/viewer.js
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import parseExpressions from 'selectors/parse_expressions';
+import parseExpressions from '../selectors/parse_expressions';
 import SplitPane from 'react-split-pane';
 
 class Viewer extends Component {

diff --git a/src/reducers/code_reducer.js b/src/reducers/code_reducer.js
@@ -1,4 +1,4 @@
-import { DID_UPDATE_CODE } from 'actions/types';
+import { DID_UPDATE_CODE } from '../actions/types';
 
 const INITIAL_STATE = '';
 

diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux';
-import code from 'reducers/code_reducer';
+import code from './code_reducer';
 
 const rootReducer = combineReducers({
   code

diff --git a/src/selectors/parse_expressions.js b/src/selectors/parse_expressions.js
@@ -1,7 +1,8 @@
 import _ from 'lodash';
 import { createSelector } from 'reselect';
 import { transform } from 'babel-standalone';
-import esprima from 'esprima';
+// import esprima from 'esprima';
+
 
 const codeSelector = state => state.code;
 const OPEN_DELIMITERS = [ '(', '{', '[', '`' ];
@@ -18,7 +19,9 @@ const findDelimiters = ({ column }, lineContents) =>
 
 const parseExpressions = (code) => {
   const transformedCode = transform(code, { presets: ['react']}).code;
+  console.log("transformedCode", transformedCode);
   const codeByLine = transformedCode.split('\n');
+  console.log("codeByLine", codeByLine);
   const tokenized = esprima.tokenize(transformedCode, { loc: true });
 
   const parens = { '(': 0, '{': 0, '[': 0 };

diff --git a/webpack.config.js b/webpack.config.js
@@ -10,14 +10,20 @@ module.exports = {
     filename: 'bundle.js'
   },
   module: {
-    loaders: [{
-      exclude: /node_modules/,
-      loader: 'babel'
-    }]
-  },
-  resolve: {
-    root: path.resolve(__dirname, 'src'),
-    extensions: ['', '.js', '.jsx']
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: "babel-loader",
+        options: {
+          presets: ["@babel/preset-env", "@babel/preset-react"]
+        }
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
   },
   devServer: {
     historyApiFallback: true,