Merge pull request #2173 from ProjectMirador/2083-export-es-modules

Enable top level es module usage and components

jest.json

@@ -8,7 +8,7 @@
   "coverageDirectory": "<rootDir>/coverage",
   "coverageReporters": ["html", "lcov"],
   "moduleNameMapper": {
-    "\\.css$": "<rootDir>/__mocks__/css.js"
+    "\\.s?css$": "<rootDir>/__mocks__/css.js"
   },
   "setupFiles": [
     "<rootDir>/setupJest.js"

package.json

@@ -7,14 +7,16 @@
     "dist"
   ],
   "scripts": {
+    "clean": "rm -rf ./dist",
     "lint": "node_modules/.bin/eslint ./ && node_modules/.bin/sass-lint -v ./src/styles/**/* && node ./scripts/i18n-lint.js",
     "server": "node_modules/.bin/http-server",
     "test": "npm run build && npm run lint && npm run size && jest -c jest.json",
     "test:watch": "jest -c jest.json --watch",
     "build": "webpack --mode=production",
     "build:dev": "webpack --mode=development",
+    "build:es": "mkdir -p dist/es && cp -r src dist/es && babel dist/es -d dist/es",
     "build:watch": "webpack --watch --mode=development",
-    "prepublishOnly": "rm -rf ./dist && npm run build",
+    "prepublishOnly": "npm run clean && npm run build:es && npm run build",
     "size": "size-limit",
     "start": "npm run build:dev && concurrently \"npm run build:watch\" \"npm run server -- -p 4444\"",
     "server:json": "node ./scripts/json-server/server.js >> ./scripts/json-server/json-server.log"
@@ -48,8 +50,6 @@
     "node-sass": "^4.9.2",
     "openseadragon": "^2.4.0",
     "prop-types": "^15.6.2",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
     "react-full-screen": "^0.2.4",
     "react-i18next": "^10.2.0",
     "react-mosaic-component": "^2.1.0",
@@ -65,6 +65,7 @@
     "uuid": "^3.3.2"
   },
   "devDependencies": {
+    "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.3.4",
     "@babel/preset-env": "^7.3.1",
@@ -95,7 +96,9 @@
     "jsdom": "14.0.0",
     "json-server": "^0.14.2",
     "puppeteer": "^1.12.0",
+    "react": "^16.8.3",
     "react-dev-utils": "^8.0.0",
+    "react-dom": "^16.8.3",
     "redux-mock-store": "^1.5.1",
     "sass-lint": "^1.12.1",
     "size-limit": "^0.21.1",
@@ -104,5 +107,9 @@
     "terser-webpack-plugin": "^1.2.1",
     "webpack": "^4.29.0",
     "webpack-cli": "^3.1.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3"
   }
 }

scripts/i18n-lint.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 const chalk = require('chalk'); // eslint-disable-line import/no-extraneous-dependencies
 
 const { log } = console;
-const globOpts = { cwd: 'locales' };
+const globOpts = { cwd: 'src/locales' };
 const defaultLocaleFile = 'en/translation.json';
 const files = glob.sync('**/translation.json', globOpts);
 const normalizedFiles = {};
@@ -37,7 +37,7 @@ function missingKeys(arr1, arr2) {
 }
 
 files.forEach((fileName) => {
-  const fileContent = fs.readFileSync(`locales/${fileName}`);
+  const fileContent = fs.readFileSync(`src/locales/${fileName}`);
   normalizedFiles[fileName] = Object.keys(JSON.parse(fileContent.toString()).translation);
 });
 

src/components/App.js

@@ -5,6 +5,7 @@ import Fullscreen from 'react-full-screen';
 import { I18nextProvider } from 'react-i18next';
 import i18n from '../i18n';
 import WorkspaceArea from '../containers/WorkspaceArea';
+import '../styles/index.scss';
 
 /**
  * This is the top level Mirador component.

src/i18n.js

 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import de from '../locales/de/translation.json';
-import en from '../locales/en/translation.json';
+import de from './locales/de/translation.json';
+import en from './locales/en/translation.json';
 
 
 // Load translations for each language

src/init.js

 import MiradorViewer from './lib/MiradorViewer';
-import './styles/index.scss';
 
 /**
  * Default Mirador instantiation