adds common-js dist binary webpack build

adds mirador3-e2e-tests package

.gitignore

@@ -2,13 +2,15 @@
 node_modules/
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 coverage
 
 # production
 lib
 build
+dist
 
 # misc
 .DS_Store

packages/mirador3-app/.eslintignore

@@ -1,4 +1,5 @@
 build/
 config/
+dist/
 scripts/
 coverage/

packages/mirador3-app/config/paths.js

@@ -65,9 +65,11 @@ module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
   appBuild: resolveApp('build'),
+  appDist: resolveApp('dist'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appDistIndexJs: resolveModule(resolveApp, 'src/index-dist'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),

packages/mirador3-app/config/webpack.config.dist.js

@@ -0,0 +1,50 @@
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+require('./env');
+const paths = require('./paths');
+
+module.exports = {
+  mode: 'production',
+  entry: [paths.appDistIndexJs],
+  output: {
+    path: paths.appDist,
+    filename: 'mirador.bundle.js',
+    libraryTarget: 'umd',
+    library: 'Mirador',
+    libraryExport: 'default',
+  },
+  resolve: { extensions: ['.js'] },
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            test: /\.js?$/,
+            exclude: /(node_modules)/,
+            loader: 'babel-loader',
+          },
+          {
+            test: /\.scss$/,
+            use: [
+              'style-loader', // creates style nodes from JS strings
+              'css-loader', // translates CSS into CommonJS
+              'sass-loader', // compiles Sass to CSS, using Node Sass by default
+            ],
+          },
+          {
+            loader: require.resolve('file-loader'),
+            // Exclude `js` files to keep "css" loader working as it injects
+            // it's runtime that would otherwise be processed through "file" loader.
+            // Also exclude `html` and `json` extensions so they get processed
+            // by webpacks internal loaders.
+            exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+            options: {
+              name: 'static/media/[name].[hash:8].[ext]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};

packages/mirador3-app/config/webpack.config.prod.js

@@ -206,7 +206,7 @@ module.exports = {
     // https://github.com/facebook/create-react-app/issues/253
     modules: ['node_modules'].concat(
       // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+      process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
     ),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
@@ -394,7 +394,7 @@ module.exports = {
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
               },
-              'sass-loader'
+              'sass-loader',
             ),
           },
           // "file" loader makes sure assets end up in the `build` folder.

packages/mirador3-app/package.json

@@ -65,11 +65,13 @@
     "terser-webpack-plugin": "1.1.0",
     "url-loader": "1.1.1",
     "webpack": "4.19.1",
+    "webpack-cli": "^3.1.2",
     "webpack-dev-server": "3.1.9",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3"
   },
   "scripts": {
+    "dist": "node_modules/.bin/webpack --config ./config/webpack.config.dist.js",
     "lint": "node_modules/.bin/eslint ./",
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
@@ -86,7 +88,7 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-   "babel": {
+  "babel": {
     "presets": [
       "react-app"
     ]

packages/mirador3-app/src/index-dist.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { store } from 'mirador3-core';
+import App from './components/App';
+import './styles/index.scss';
+
+/**
+ * Default Mirador distribution instantiation
+ */
+export default function Mirador(config) {
+  ReactDOM.render(
+    <Provider store={store}>
+      <App config={config} />
+    </Provider>,
+    document.getElementById(config.id),
+  );
+}

packages/mirador3-core/.eslintignore

@@ -1,3 +1,4 @@
 lib/
 config/
 coverage/
+

packages/mirador3-e2e-tests/.eslintignore

@@ -0,0 +1 @@
+dist/

packages/mirador3-e2e-tests/.eslintrc

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "jest/globals": true
+  },
+  "extends": "airbnb",
+  "globals": {
+    "page": true,
+    "document": true
+  },
+  "plugins": ["jest"],
+  "rules": {
+    "no-console": "off",
+    "global-require": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "require-jsdoc": 0,
+    "react/prefer-stateless-function": "off"
+  }
+}

packages/mirador3-e2e-tests/README.md

@@ -0,0 +1,14 @@
+# Mirador3 E2E Tests
+
+### `npm run cypress:open`
+starts server and runs cypress
+
+### Notes:
+webpack is not used here yet, though a configuration is included.
+
+Currently, `dist` contains the common-js pre-built binary produced by `mirador3-app` with the `npm run dist` command.
+
+The server uses the index template from views that loads the binary from dist and loads default Mirador export.
+
+Optimally, `apps` will contain different source Apps that will be built with webpack from ES6 imports
+using a published mirador3-app artifact.

packages/mirador3-e2e-tests/apps.json

@@ -0,0 +1,3 @@
+[
+  "mirador"
+]

packages/mirador3-e2e-tests/cypress.json

@@ -0,0 +1,8 @@
+{
+    "baseUrl": "http://localhost:4000",
+    "reporter": "junit",
+    "reporterOptions": {
+        "mochaFile": "e2e-results.xml",
+        "toConsole": true
+    }   
+}

packages/mirador3-e2e-tests/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

packages/mirador3-e2e-tests/cypress/integration/mirador-base.spec.js

@@ -0,0 +1,7 @@
+/* global cy */
+describe('Mirador Base', () => {
+  it('Visits Mirador Base', () => {
+    cy.visit('http://localhost:4000/mirador');
+    cy.get('title').contains('Mirador');
+  });
+});

packages/mirador3-e2e-tests/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

packages/mirador3-e2e-tests/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

packages/mirador3-e2e-tests/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/mirador3-e2e-tests/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "mirador3-e2e-tests",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start": "node src/start.js",
+    "test:ci": "npm run start:prod & cypress run cypress.json && kill $!",
+    "cypress:open": "npm run start & cypress open && kill $!"
+  },
+  "dependencies": {
+    "ejs": "^2.6.1",
+    "express": "^4.16.4",
+    "file-loader": "2.0.0",
+    "serve-favicon": "^2.5.0",
+    "webpack": "^4.26.1",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack-dev-middleware": "^3.4.0",
+    "webpack-hot-middleware": "^2.24.3"
+  },
+  "devDependencies": {
+    "cypress": "^3.1.2"
+  }
+}

packages/mirador3-e2e-tests/src/server.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const express = require('express');
+const favicon = require('serve-favicon');
+const apps = require('../apps');
+
+module.exports = {
+  start: (port) => {
+    const app = express();
+    app.set('view engine', 'ejs');
+    app.set('views', __dirname + '/views');
+    app.use(favicon(__dirname + '/favicon.ico'));
+    app.get('/', (req, res) => {
+      res.render('index', {
+        apps,
+      });
+    });
+    app.use('/static', express.static(path.join(__dirname, '../dist')));
+
+    app.get('/:bundle', (req, res) => {
+      const bundle = req.params.bundle;
+      res.render('app-template', {
+        bundle,
+      });
+    });
+
+    app.listen(port, () => {
+      console.log(`server running at localhost:${port}, go refresh and see magic`);
+    });
+  },
+};

packages/mirador3-e2e-tests/src/start.js

@@ -0,0 +1,3 @@
+const server = require('./server');
+
+server.start(Number(process.env.PORT || 4000));

packages/mirador3-e2e-tests/src/views/app-template.ejs

@@ -0,0 +1,21 @@
+<html>
+
+<head>
+	<title>Mirador</title>
+  <!-- <link href="/static/styles.css" rel="stylesheet" /> -->
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+	<div id='mirador'>
+	</div>
+	<script src="/static/<%=bundle%>.bundle.js"></script>
+	<script type="text/javascript">
+      Mirador({
+        id: 'mirador',
+        plugins: ['HelloWorld']
+      });
+	</script>
+</body>
+
+</html>

packages/mirador3-e2e-tests/src/views/index.ejs

@@ -0,0 +1,18 @@
+<html>
+
+<head>
+	<title>Sample Apps</title>
+  <!-- <link href="/static/styles.css" rel="stylesheet" /> -->
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+	<h2>Apps</h2>
+  <ul>
+    <% for(var i=0; i<apps.length; i++) {%>
+   <li><a href="/<%=apps[i]%>"><%=apps[i]%></a></li>
+   <% } %>
+  </ul>
+</body>
+
+</html>