closes #76

includes required linting changes to pass build and tests

.babelrc

 {
-  "presets": ["env", "react"]
+  "presets": ["react-app"]
 }

.eslintignore

-m3core.umd.js
-mirador.min.js
+dist/
+config/

.eslintrc

@@ -7,8 +7,10 @@
     "page": true,
     "document": true
   },
+  "parser": "babel-eslint",
   "plugins": ["jest"],
   "rules": {
+    "no-console": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "require-jsdoc": ["error", {
       "require": {
@@ -16,7 +18,7 @@
         "MethodDefinition": true,
         "ClassDeclaration": true,
         "ArrowFunctionExpression": true,
-        "FunctionExpression": true,
+        "FunctionExpression": true
       }
     }],
     "react/prefer-stateless-function": "off"

.gitignore

-m3core.umd.js
+dist/
 
-dist/mirador.min.js
+.idea

config/paths.js

+const path = require('path');
+const fs = require('fs');
+const url = require('url');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+
+/**
+ *
+ * @param relativePath
+ * @returns {string}
+ */
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+const envPublicUrl = process.env.PUBLIC_URL;
+
+/**
+ *
+ * @param inputPath
+ * @param needsSlash
+ * @returns {*}
+ */
+function ensureSlash(inputPath, needsSlash) {
+  const hasSlash = inputPath.endsWith('/');
+  if (hasSlash && !needsSlash) {
+    return inputPath.substr(0, inputPath.length - 1);
+  } else if (!hasSlash && needsSlash) {
+    return `${inputPath}/`;
+  } else {
+    return inputPath;
+  }
+}
+
+/**
+ *
+ * @param appPackageJson
+ * @returns {string | *}
+ */
+const getPublicUrl = appPackageJson => envPublicUrl || require(appPackageJson).homepage;
+
+/**
+ *
+ * @param appPackageJson
+ * @returns {*}
+ */
+function getServedPath(appPackageJson) {
+  const publicUrl = getPublicUrl(appPackageJson);
+  const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
+  return ensureSlash(servedUrl, true);
+}
+
+const moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx',
+];
+
+/**
+ *
+ * @param resolveFn
+ * @param filePath
+ * @returns {*}
+ */
+const resolveModule = (resolveFn, filePath) => {
+  const extension = moduleFileExtensions.find(extension => fs.existsSync(resolveFn(`${filePath}.${extension}`)));
+
+  if (extension) {
+    return resolveFn(`${filePath}.${extension}`);
+  }
+
+  return resolveFn(`${filePath}.js`);
+};
+
+module.exports = {
+  dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
+  appBuild: resolveApp('build'),
+  appDist: resolveApp('dist'),
+  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('src'),
+  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+  appNodeModules: resolveApp('node_modules'),
+  publicUrl: getPublicUrl(resolveApp('package.json')),
+  servedPath: getServedPath(resolveApp('package.json')),
+};
+
+module.exports.moduleFileExtensions = moduleFileExtensions;

package.json

@@ -8,9 +8,12 @@
     "server": "node_modules/.bin/http-server",
     "test": "npm run build && npm run lint && node_modules/.bin/jest",
     "test:watch": "npm test -- --watch",
-    "build": "node_modules/.bin/webpack",
-    "build:watch": "node_modules/.bin/webpack --watch",
-    "start": "npm run build && concurrently \"npm run build:watch\" \"npm run server -- -p 4444\""
+    "build": "NODE_ENV=production webpack",
+    "build:watch": "NODE_ENV=development webpack --watch",
+    "start": "NODE_ENV=development npm run build && concurrently \"npm run build:watch\" \"npm run server -- -p 4444\""
+  },
+  "eslintConfig": {
+    "extends": "react-app"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -34,29 +37,32 @@
     "sass-loader": "^7.1.0"
   },
   "devDependencies": {
-    "babel-jest": "^22.4.1",
-    "babel-loader": "7.1.4",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "9.0.0",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-named-asset-import": "^0.2.3",
+    "babel-preset-react-app": "^6.1.0",
     "concurrently": "^4.0.1",
     "css-loader": "^1.0.0",
     "enzyme": "^3.4.4",
     "enzyme-adapter-react-16": "^1.2.0",
-    "eslint": "^4.18.2",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-import": "^2.9.0",
-    "eslint-plugin-jest": "^21.13.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint": "^5.10.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jest": "^22.1.2",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.11.1",
     "http-server": "^0.11.1",
     "jest": "^22.4.4",
     "jest-fetch-mock": "^1.5.0",
     "jest-puppeteer": "^3.0.1",
     "puppeteer": "^1.4.0",
+    "react-dev-utils": "^6.1.1",
     "redux-mock-store": "^1.5.1",
     "style-loader": "^0.22.1",
-    "webpack": "3.10.0"
+    "webpack": "^4.27.1",
+    "webpack-cli": "^3.1.2"
   },
   "jest": {
     "preset": "jest-puppeteer",

src/components/App.js

@@ -43,11 +43,14 @@ class App extends Component {
    * @private
    */
   computedContent() {
-    const manifest = this.props.manifests[this.state.lastRequested];
+    const { manifests } = this.props;
+    const { lastRequested } = this.state;
+    const manifest = manifests[lastRequested];
     if (manifest) {
       if (manifest.isFetching) {
         return '☕';
-      } else if (manifest.error) {
+      }
+      if (manifest.error) {
         return manifest.error.message;
       }
       return JSON.stringify(manifest.json, 0, 2);
@@ -60,7 +63,9 @@ class App extends Component {
    * @return {String} - HTML markup for the component
    */
   render() {
-    const manifestList = Object.keys(this.props.manifests).map(manifest => (
+    const { manifests } = this.props;
+    const { lastRequested } = this.state;
+    const manifestList = Object.keys(manifests).map(manifest => (
       <ManifestListItem
         key={manifest}
         manifest={manifest}
@@ -74,7 +79,7 @@ class App extends Component {
           <ul>{manifestList}</ul>
 
           <Display
-            manifest={this.props.manifests[this.state.lastRequested]}
+            manifest={manifests[lastRequested]}
           />
         </div>
       </div>

src/components/Display.js

@@ -11,7 +11,8 @@ const displayContent = (manifest) => {
   if (manifest) {
     if (manifest.isFetching) {
       return '☕';
-    } else if (manifest.error) {
+    }
+    if (manifest.error) {
       return manifest.error.message;
     }
     return <ManifestMetadata manifest={manifest} />;
@@ -29,7 +30,8 @@ const stateClass = (manifest) => {
   if (manifest) {
     if (manifest.isFetching) {
       return 'fetching';
-    } else if (manifest.error) {
+    }
+    if (manifest.error) {
       return 'error';
     }
     return '';

src/components/ManifestForm.js

@@ -28,9 +28,11 @@ class ManifestForm extends Component {
    * @private
    */
   formSubmit(event) {
+    const { fetchManifest, setLastRequested } = this.props;
+    const { formValue } = this.state;
     event.preventDefault();
-    this.props.fetchManifest(this.state.formValue);
-    this.props.setLastRequested(this.state.formValue);
+    fetchManifest(formValue);
+    setLastRequested(formValue);
   }
 
   /**
@@ -51,10 +53,11 @@ class ManifestForm extends Component {
    * @return {String} - HTML markup for the component
    */
   render() {
+    const { formValue } = this.state;
     return (
       <form onSubmit={this.formSubmit}>
         <input
-          value={this.state.formValue}
+          value={formValue}
           id="manifestURL"
           type="text"
           onChange={this.handleInputChange}

src/components/ManifestMetadata.js

@@ -12,13 +12,14 @@ export default class ManifestMetadata extends Component {
    * @param {object} props
    */
   render() {
+    const { manifest } = this.props;
     return (
       <div>
         <h3>
-          {this.props.manifest.manifestation.getLabel().map(label => label.value)[0]}
+          {manifest.manifestation.getLabel().map(label => label.value)[0]}
         </h3>
         <div className={ns('description')}>
-          {this.props.manifest.manifestation.getDescription().map(label => label.value)}
+          {manifest.manifestation.getDescription().map(label => label.value)}
         </div>
       </div>
     );

src/components/Window.js

@@ -19,10 +19,12 @@ class Window extends Component {
 
     this.miradorInstanceRef = React.createRef();
   }
+
   /**
    * React lifecycle event
    */
   componentDidMount() {
+    const { manifest } = this.props;
     if (!this.miradorInstanceRef.current) {
       return false;
     }
@@ -31,7 +33,7 @@ class Window extends Component {
       showNavigationControl: false,
     });
     const that = this;
-    fetch(`${this.props.manifest.manifestation.getSequences()[0].getCanvases()[0].getImages()[0].getResource().getServices()[0].id}/info.json`)
+    fetch(`${manifest.manifestation.getSequences()[0].getCanvases()[0].getImages()[0].getResource().getServices()[0].id}/info.json`)
       .then(response => response.json())
       .then((json) => {
         viewer.addTiledImage({
@@ -61,7 +63,8 @@ class Window extends Component {
    * Fetches IIIF thumbnail URL
    */
   thumbnail() {
-    const thumb = this.props.manifest.manifestation.getThumbnail() || { id: 'http://placekitten.com/200/300' };
+    const { manifest } = this.props;
+    const thumb = manifest.manifestation.getThumbnail() || { id: 'http://placekitten.com/200/300' };
     return thumb.id;
   }
 
@@ -69,7 +72,8 @@ class Window extends Component {
    * Return style attributes
    */
   styleAttributes() {
-    return { width: `${this.props.window.xywh[2]}px`, height: `${this.props.window.xywh[3]}px` };
+    const { window } = this.props;
+    return { width: `${window.xywh[2]}px`, height: `${window.xywh[3]}px` };
   }
 
   /**
@@ -77,17 +81,18 @@ class Window extends Component {
    * @param {object} props (from react/redux)
    */
   render() {
+    const { manifest, window } = this.props;
     return (
       <div className={ns('window')} style={this.styleAttributes()}>
         <WindowTopBar
-          windowId={this.props.window.id}
-          manifest={this.props.manifest}
+          windowId={window.id}
+          manifest={manifest}
         />
         <img src={this.thumbnail()} alt="" />
         <div
           className={ns('osd-container')}
           style={{ display: 'none' }}
-          id={`${this.props.window.id}-osd`}
+          id={`${window.id}-osd`}
           ref={this.miradorInstanceRef}
         />
       </div>

src/components/WindowTopBar.js

@@ -14,10 +14,11 @@ class WindowTopBar extends Component {
    * @return {type}  description
    */
   render() {
+    const { manifest, removeWindow, windowId } = this.props;
     return (
       <div className={ns('window-top-bar')}>
-        <h3>{this.props.manifest.manifestation.getLabel().map(label => label.value)[0]}</h3>
-        <button className={ns('window-close')} aria-label="Close Window" onClick={() => this.props.removeWindow(this.props.windowId)}>&times;</button>
+        <h3>{manifest.manifestation.getLabel().map(label => label.value)[0]}</h3>
+        <button type="button" className={ns('window-close')} aria-label="Close Window" onClick={() => removeWindow(windowId)}>&times;</button>
       </div>
     );
   }

src/index.js

@@ -16,5 +16,3 @@ export default function Mirador(config) {
     document.getElementById(config.id),
   );
 }
-
-module.exports = Mirador;

webpack.config.js

 const path = require('path');
+const paths = require('./config/paths');
+
+const eslintLoaderConfig = {
+  test: /\.(js|mjs|jsx)$/,
+  enforce: 'pre',
+  use: [
+    {
+      options: {
+        formatter: require.resolve('react-dev-utils/eslintFormatter'),
+        eslintPath: require.resolve('eslint'),
+
+      },
+      loader: require.resolve('eslint-loader'),
+    },
+  ],
+  include: paths.appSrc,
+};
+
+const babelLoaderConfig = {
+  test: /\.(js|mjs|jsx)$/,
+  include: paths.appSrc, // CRL
+  loader: require.resolve('babel-loader'),
+  options: {
+    customize: require.resolve('babel-preset-react-app/webpack-overrides'),
+    plugins: [
+      [
+        require.resolve('babel-plugin-named-asset-import'),
+        {
+          loaderMap: {
+            svg: {
+              ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
+            },
+          },
+        },
+      ],
+    ],
+    cacheDirectory: true,
+    // Save disk space when time isn't as important
+    cacheCompression: true,
+    compact: true,
+  },
+};
 
 module.exports = [
   {
+    mode: 'production',
     entry: './src/store.js',
     output: {
       path: path.join(__dirname, 'dist'),
@@ -11,30 +54,26 @@ module.exports = [
     },
     module: {
       rules: [
-        {
-          test: /\.js$/,
-          exclude: /node_modules/,
-          use: ['babel-loader', 'eslint-loader'],
-        },
+        eslintLoaderConfig,
+        babelLoaderConfig,
       ],
     },
   },
   {
+    mode: 'production',
     entry: './src/index.js',
     output: {
       path: path.join(__dirname, 'dist'),
       filename: 'mirador.min.js',
       libraryTarget: 'umd',
       library: 'Mirador',
+      libraryExport: 'default',
     },
     resolve: { extensions: ['.js'] },
     module: {
-      loaders: [
-        {
-          test: /\.jsx?$/,
-          exclude: /(node_modules)/,
-          loader: 'babel-loader',
-        },
+      rules: [
+        eslintLoaderConfig,
+        babelLoaderConfig,
         {
           test: /\.scss$/,
           use: [