.babelrc

@@ -1,32 +1,44 @@
 {
   "presets": [
-    "react",
-    ["env", {
-      "targets": {
-        "browsers": ["last 2 versions", "safari >= 7"]
-      },
-      "modules": false
-    }]
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [
+            "last 2 versions",
+            "safari >= 7"
+          ]
+        },
+        "modules": false
+      }
+    ]
   ],
   "plugins": [
-    "syntax-object-rest-spread",
-    "transform-object-rest-spread",
-    "transform-class-properties"
+    "@babel/plugin-syntax-object-rest-spread",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
   ],
   "env": {
     "test": {
       "presets": [
-        "react",
-        ["env", {
-          "targets": {
-            "browsers": ["last 2 versions", "safari >= 7"]
+        "@babel/preset-react",
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "browsers": [
+                "last 2 versions",
+                "safari >= 7"
+              ]
+            }
           }
-        }]
+        ]
       ],
       "plugins": [
-        "syntax-object-rest-spread",
-        "transform-object-rest-spread",
-        "transform-class-properties"
+        "@babel/plugin-syntax-object-rest-spread",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-proposal-class-properties"
       ]
     }
   }

CONTRIBUTING.md

@@ -2,7 +2,50 @@
 
 Pull requests of any kind are welcome from the community, and if you're reading this I am really happy that you have decided to contribute. You rock! When contributing to this repository, please first discuss the change you wish to make via a GitHub issue with the owners of this repository before making a change.
 
-Please note we have a [Code of Conduct][url-code-of-conduct], please follow it in all your interactions with the project.
+Please note we have a [Code of Conduct][url-code-of-conduct], please follow it in all of your interactions with this project.
+
+## Development Setup
+
+**Installation:**
+
+1. Clone the project `git clone git@github.com:matt-d-rat/react-middle-truncate.git`
+2. Install npm dependencies `npm install`
+
+**Running the demo app:**
+
+```
+npm start
+```
+
+***Running Eslint***
+
+```
+npm run check
+```
+
+**Running the tests:**
+
+_Mocha_
+
+```
+npm run test
+```
+
+```
+npm run test:watch
+```
+
+_Karma (in-browser)_
+
+```
+npm run test:karma
+```
+
+_Test coverage_
+
+```
+npm run cover
+```
 
 ## Pull Request Process
 

README.md

@@ -1,6 +1,6 @@
 # react-middle-truncate
 
-[![][travis_img]][travis_url] [![][github_issues_img]][github_issues_url] [![github_forks_img]][github_forks_url] [![github_stars_img]][github_stars_url] [![][license_img]][license_url] 
+[![][travis_img]][travis_url] [![][github_issues_img]][github_issues_url] [![github_forks_img]][github_forks_url] [![github_stars_img]][github_stars_url] [![][license_img]][license_url]
 
 A React component for intelligently truncating text in the middle of the string with an ellipsis. You can see the component in action in this [demo][url-demo].
 
@@ -12,7 +12,7 @@ npm install react-middle-truncate --save
 
 ## Usage
 
-The truncation point is determined by taking into account the inheritted `font` CSS properties of the element, and rendering the result to [Canvas][url-docs-canvas] in order to dynamically calculaute the width of the text. Should the width of the text not fit into the available space to render, truncation is applied. The result of which looks like this:
+The truncation point is determined by taking into account the inherited `font` CSS properties of the element, and rendering the result to [Canvas][url-docs-canvas] in order to dynamically calculate the width of the text. Should the width of the text not fit into the available space to render, truncation is applied. The result of which looks like this:
 
 ```javascript
 import MiddleTruncate from 'react-middle-truncate';
@@ -42,13 +42,13 @@ In the case of using a [Regular Expression][url-docs-regexp] for the `end` prop,
 
 ### Why and when to middle truncate?
 
-We have access to CSS text truncation with the `text-overflow: ellipsis;` which will truncate the text at the end of a string for us. So why do you need middle truncation, and when should you usw it?
+We have access to CSS text truncation with the `text-overflow: ellipsis;` which will truncate the text at the end of a string for us. So why do you need middle truncation, and when should you use it?
 
 Ultimately it boils down to whether text at the end or in the middle of the string is more likely to differentiate the item.
 
 In the case of a street address, the end of the string is likely to be less important in helping the user to differentiate items from one another, as most strings of that category are likely to end in road, street, avenue etc... So in that case truncating at the end of the string would be a better solution.
 
-In the case of a connection string or a URL, the start and/or end of the string is likely to contain more valueable information to help the user differentiate items from one another, such as the protocol and subdomain parts at the start, and the port number at the end of the string are more likely to be different. In that case truncatig in the middle of the string would be a better solution.
+In the case of a connection string or a URL, the start and/or end of the string is likely to contain more valuable information to help the user differentiate items from one another, such as the protocol and sub domain parts at the start, and the port number at the end of the string are more likely to be different. In that case truncating in the middle of the string would be a better solution.
 
 ## Contributing
 

config/project.js

@@ -24,7 +24,6 @@ module.exports = {
   vendor: [
     'classnames',
     'lodash',
-    'measure-text',
     'react',
     'react-dom',
     'units-css'

config/webpack.base.config.js

@@ -1,6 +1,7 @@
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const cssNano = require('cssnano');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const project = require('./project');
 
@@ -29,7 +30,8 @@ module.exports = {
       fonts: path.join(project.path.src, 'demo/assets/fonts'),
       images: path.join(project.path.src, 'demo/assets/images'),
       lib: path.join(project.path.src, 'react-middle-truncate'),
-      scss: path.join(project.path.src, 'demo/assets/scss')
+      scss: path.join(project.path.src, 'demo/assets/scss'),
+      utils: path.join(project.path.src, 'utils')
     },
     extensions: ['.js', '.jsx', '.json', '.scss', '.css']
   },
@@ -50,40 +52,46 @@ module.exports = {
       {
         test: /\.scss$/,
         exclude: [/node_modules/],
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader',
-              options: {
-                minimize: process.env.NODE_ENV === 'production',
-                sourceMap: true,
-                modules: true,
-                importLoaders: 1,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: process.env.NODE_ENV === 'development' // only enable hot in development
+            }
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              importLoaders: 1,
+              modules: {
                 localIdentName: (process.env.NODE_ENV === 'production')
                   ? '[hash:base64:5]'
                   : project.name + '_[name]_[local]---[hash:base64:5]'
               }
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                sourceMap: true,
-                plugins: function() {
-                  return [
-                    autoprefixer('last 2 versions')
-                  ];
-                }
-              }
-            },
-            {
-              loader: 'sass-loader',
-              options: {
-                outputStyle: 'expanded'
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            ident: 'postcss',
+            options: {
+              sourceMap: true,
+              plugins: function() {
+                return [
+                  cssNano(),
+                  autoprefixer('last 2 versions')
+                ];
               }
             }
-          ]
-        })
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              outputStyle: 'expanded'
+            }
+          }
+        ]
       },
       {
         test: /\.(png|jpg|jpeg|gif|svg)$/,
@@ -125,11 +133,10 @@ module.exports = {
     new webpack.DefinePlugin(GLOBALS),
 
     // Extracts the imported Sass dependencies into a single CSS file
-    new ExtractTextPlugin({
-      filename: 'assets/css/[name].css',
-      allChunks: true,
+    new MiniCssExtractPlugin({
       ignoreOrder: false,
-      disable: process.env.NODE_ENV !== 'production'
+      filename: process.env.NODE_ENV !== 'production' ? '[name].css' : '[name].[hash].css',
+      chunkFilename: process.env.NODE_ENV !== 'production' ? '[id].css' : '[id].[hash].css'
     })
   ]
 };

config/webpack.lib.config.js

@@ -15,7 +15,10 @@ module.exports = {
   },
   resolve: {
     modules: ['node_modules'],
-    extensions: ['.js', '.jsx']
+    extensions: ['.js', '.jsx'],
+    alias: {
+      utils: path.join(project.path.src, 'utils')
+    }
   },
   entry: {
     'react-middle-truncate': path.resolve(project.path.src, 'react-middle-truncate/index.js')