feat(testing-karma): use native es modules in modern browsers

BREAKING CHANGE: You need to specify type: 'module' for you files
```js
// old karma.conf.js
files: [
  config.grep ? config.grep : 'test/**/*.test.js',
]

// new karma.conf.js
files: [
  { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
]

Author: LarsDenBakker

packages/karma-esm/README.md

@@ -0,0 +1,62 @@
+# karma-esm
+
+[//]: # (AUTO INSERT HEADER PREPUBLISH)
+
+Karma plugin for running tests in es modules.
+
+## Usage
+See `testing-karma` for an implementation and default configuration.
+
+1. Install the plugin
+`npm i --save @open-wc/karma-esm`
+
+2. Add to your karma config
+```javascript
+{
+  // define where your test files are, make sure to set type to module
+  files: [
+    { pattern: 'test/**/*.test.js' type: 'module' }
+  ]
+
+  plugins: [
+    // load plugin
+    require.resolve('@open-wc/karma-esm'),
+
+    // fallback: resolve any karma- plugins
+    'karma-*',
+  ],
+
+  frameworks: ['esm'],
+
+  middleware: ['esm'],
+
+  preprocessors: {
+    '**/*.test.js': ['esm'],
+    '**/*.spec.js': ['esm'],
+  },
+
+  esm: {
+    // whether you want to profile for test coverage
+    coverage: true / false,
+    babel: {
+      // exclude libraries which don't need babel processing for speed
+      exclude: [
+        '**/node_modules/sinon/**',
+        '**/node_modules/@bundled-es-modules/**',
+      ],
+    },
+  },
+}
+```
+
+<script>
+  export default {
+    mounted() {
+      const editLink = document.querySelector('.edit-link a');
+      if (editLink) {
+        const url = editLink.href;
+        editLink.href = url.substr(0, url.indexOf('/master/')) + '/master/packages/karma-esm/README.md';
+      }
+    }
+  }
+</script>

packages/karma-esm/karma-esm.js

@@ -0,0 +1,52 @@
+const merge = require('webpack-merge');
+const createCompiler = require('./src/compiler');
+
+const createBabelOptions = (config = {}) => ({
+  sourceType: 'module',
+  plugins: [
+    require.resolve('@babel/plugin-syntax-dynamic-import'),
+    require.resolve('@babel/plugin-syntax-import-meta'),
+    [
+      require.resolve('../forked-babel-plugin-bare-import-rewrite'),
+      {
+        rootBaseDir: '.',
+        alwaysRootImport: ['**'],
+        modulesDir: './node_modules',
+        failOnUnresolved: true,
+        resolveDirectories: config.moduleDirectories,
+      },
+    ],
+    config.coverage && [
+      require.resolve('babel-plugin-istanbul'),
+      {
+        exclude: ['**/node_modules/**', '**/*.test.js', '**/*.spec.js'],
+      },
+    ],
+  ].filter(_ => _),
+  sourceMap: 'inline',
+});
+
+const defaultPluginConfig = {
+  baseDir: './',
+  moduleResolveRoot: './',
+  moduleDirectories: ['node_modules'],
+};
+
+function createPluginConfig(karmaConfig) {
+  return merge(
+    {
+      babelOptions: createBabelOptions(karmaConfig.esm),
+    },
+    defaultPluginConfig,
+    karmaConfig.esm,
+  );
+}
+
+function initialize(karmaConfig, karmaEmitter) {
+  module.exports.pluginConfig = createPluginConfig(karmaConfig);
+  module.exports.compile = createCompiler(module.exports.pluginConfig, karmaEmitter);
+}
+
+module.exports = {
+  initialize,
+};

packages/karma-esm/middleware.js

@@ -0,0 +1,53 @@
+const fs = require('fs');
+const path = require('path');
+const esm = require('./src/karma-esm');
+
+function karmaEsmMiddleware(logger) {
+  const log = logger.create('middleware.esm');
+
+  return (req, res, next) => {
+    if (req.url.endsWith('.js') || req.url.endsWith('.ts')) {
+      try {
+        let relativeFilePath;
+        if (req.url.startsWith('/base')) {
+          relativeFilePath = req.url.replace('/base/', esm.pluginConfig.baseDir);
+        }
+
+        esm.pluginConfig.moduleDirectories.forEach(moduleDir => {
+          if (req.url.startsWith(`/${moduleDir}`)) {
+            relativeFilePath = req.url.replace(
+              `/${moduleDir}`,
+              path.join(esm.pluginConfig.moduleResolveRoot, moduleDir),
+            );
+          }
+        });
+
+        const fullFilePath = path.join(process.cwd(), relativeFilePath);
+        if (!fs.existsSync(fullFilePath)) {
+          throw new Error(`File does not exist: ${fullFilePath}`);
+        }
+
+        const fileContent = fs.readFileSync(fullFilePath, 'utf-8');
+        res.setHeader('Content-Type', 'application/javascript');
+        try {
+          const compiledContent = esm.compile(fullFilePath, fileContent);
+          res.end(compiledContent);
+        } catch (error) {
+          const message = `\n\n${error.message}\n at ${relativeFilePath}\n\n`;
+          log.error(message);
+          res.end(fileContent);
+        }
+      } catch (error) {
+        log.error(error.message);
+        res.statusCode = 500;
+        res.end(error.message);
+      }
+    } else {
+      next();
+    }
+  };
+}
+
+karmaEsmMiddleware.$inject = ['logger'];
+
+module.exports = karmaEsmMiddleware;

packages/karma-esm/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@open-wc/karma-esm",
+  "version": "0.1.0",
+  "description": "Karma plugin for testing with es modules",
+  "author": "open-wc",
+  "main": "./src/index.js",
+  "homepage": "https://github.com/open-wc/open-wc/",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/open-wc/open-wc.git",
+    "directory": "packages/karma-esm"
+  },
+  "scripts": {
+    "prepublishOnly": "../../scripts/insert-header.js"
+  },
+  "files": [
+    "src",
+    "*.js"
+  ],
+  "dependencies": {
+    "@babel/core": "^7.3.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-syntax-import-meta": "^7.2.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@types/node": "^11.13.0",
+    "arrify": "^2.0.1",
+    "babel-plugin-istanbul": "^5.1.1",
+    "chokidar": "^2.1.5",
+    "minimatch": "^3.0.4",
+    "path-is-inside": "^1.0.2",
+    "resolve": "^1.10.0",
+    "webpack-merge": "^4.2.1",
+    "whatwg-url": "^7.0.0"
+  }
+}

packages/karma-esm/preprocessor.js

@@ -0,0 +1,22 @@
+const esm = require('./src/karma-esm');
+
+function karmaEsmPreprocessor(logger) {
+  const log = logger.create('preprocessor.esm');
+
+  function preprocess(content, file, done) {
+    try {
+      const processed = esm.compile(file.originalPath, content);
+      done(null, processed);
+    } catch (e) {
+      const message = `\n\n${e.message}\n at ${file.originalPath}\n\n`;
+      log.error(message);
+      done(null, content);
+    }
+  }
+
+  return preprocess;
+}
+
+karmaEsmPreprocessor.$inject = ['logger'];
+
+module.exports = karmaEsmPreprocessor;

packages/karma-esm/src/compiler.js

@@ -0,0 +1,56 @@
+const babel = require('@babel/core');
+const minimatch = require('minimatch');
+const chokidar = require('chokidar');
+
+/**
+ * Sets up karma-esm compiler. Compiles files with babel, maintains
+ * a cache and notifies karma when files change.
+ */
+function createCompiler(config, karmaEmitter) {
+  const cache = new Map();
+  const watcher = chokidar.watch([]);
+
+  watcher.on('change', filePath => {
+    if (!filePath.endsWith('.test.js') && !filePath.endsWith('.spec.js')) {
+      karmaEmitter.refreshFiles();
+    }
+    cache.delete(filePath);
+  });
+
+  function addToCache(filePath, code) {
+    cache.set(filePath, code);
+    watcher.add(filePath);
+  }
+
+  function babelCompile(filePath, code) {
+    return babel.transform(code, {
+      filename: filePath,
+      ...config.babelOptions,
+    }).code;
+  }
+
+  function compile(filePath, code) {
+    // if we should not babel compile some files, only add them to the cache
+    if (config.babel && config.babel.exclude) {
+      if (config.babel.exclude.some(exclude => minimatch(filePath, exclude))) {
+        addToCache(filePath, code);
+        return code;
+      }
+    }
+
+    const compiled = babelCompile(filePath, code);
+    addToCache(filePath, compiled);
+    return compiled;
+  }
+
+  function getCached(filePath) {
+    return cache.get(filePath);
+  }
+
+  return {
+    compile,
+    getCached,
+  };
+}
+
+module.exports = createCompiler;