fix: use es-dev-server auto compatibility

packages/create/src/generators/app-lit-element/templates/_package.json

@@ -2,8 +2,7 @@
   "name": "<%= tagName %>",
   "license": "MIT",
   "scripts": {
-    "start": "es-dev-server --app-index index.html --node-resolve --open --watch",
-    "start:compatibility": "es-dev-server --app-index index.html --compatibility all --node-resolve --open --watch"
+    "start": "es-dev-server --app-index index.html --node-resolve --open --watch"
   },
   "dependencies": {
     "lit-html": "^1.0.0",

packages/create/src/generators/testing-karma-bs/templates/_package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "test:bs": "karma start karma.bs.config.js --compatibility all --coverage"
+    "test:bs": "karma start karma.bs.config.js --coverage"
   },
   "devDependencies": {
     "@open-wc/testing-karma-bs": "^1.0.0"

packages/create/src/generators/testing-karma/templates/_package.json

@@ -3,9 +3,7 @@
     "test": "karma start --coverage",
     "test:watch": "karma start --auto-watch=true --single-run=false",
     "test:update-snapshots": "karma start --update-snapshots",
-    "test:prune-snapshots": "karma start --prune-snapshots",
-    "test:compatibility": "karma start --compatibility all --coverage",
-    "test:compatibility:watch": "karma start --compatibility all --auto-watch=true --single-run=false"
+    "test:prune-snapshots": "karma start --prune-snapshots"
   },
   "devDependencies": {
     "@open-wc/testing-karma": "^3.0.0",

packages/create/src/generators/wc-lit-element/templates/_package.json

@@ -2,8 +2,7 @@
   "main": "index.js",
   "module": "index.js",
   "scripts": {
-    "start": "es-dev-server --app-index demo/index.html --node-resolve --open --watch",
-    "start:compatibility": "es-dev-server --app-index demo/index.html --compatibility all --node-resolve --open --watch"
+    "start": "es-dev-server --app-index demo/index.html --node-resolve --open --watch"
   },
   "dependencies": {
     "lit-html": "^1.0.0",

packages/create/test/snapshots/fully-loaded-app/package.json

@@ -10,15 +10,12 @@
     "test:watch": "karma start --auto-watch=true --single-run=false",
     "test:update-snapshots": "karma start --update-snapshots",
     "test:prune-snapshots": "karma start --prune-snapshots",
-    "test:compatibility": "karma start --compatibility all --coverage",
-    "test:compatibility:watch": "karma start --compatibility all --auto-watch=true --single-run=false",
-    "test:bs": "karma start karma.bs.config.js --compatibility all --coverage",
+    "test:bs": "karma start karma.bs.config.js --coverage",
     "storybook": "start-storybook -p 9001",
     "storybook:build": "build-storybook -o _site -s storybook-static",
     "start:build": "cd dist && es-dev-server --open",
     "build": "rimraf dist && rollup -c rollup.config.js",
-    "start": "es-dev-server --app-index index.html --node-resolve --open --watch",
-    "start:compatibility": "es-dev-server --app-index index.html --compatibility all --node-resolve --open --watch"
+    "start": "es-dev-server --app-index index.html --node-resolve --open --watch"
   },
   "devDependencies": {
     "eslint": "^6.1.0",

packages/es-dev-server/README.md

@@ -2,17 +2,21 @@
 
 [//]: # 'AUTO INSERT HEADER PREPUBLISH'
 
-A web server for developing without a build step.
+A web server for development without bundling, utilizing the browser's standard module loader and efficient browser caching for simple and fast web development.
 
-By default, `es-dev-server` acts as a simple static file server. Through flags, different features can be enabled, such as:
+```bash
+npx es-dev-server --node-resolve --watch
+```
+
+**Quick overview**
 
-- reloading the browser on file changes
-- resolve bare module imports using node resolution
-- history API fallback for SPA routing
-- Smart caching to speed up file serving
-- Compatibility mode for older browsers
+- efficient browser caching for fast reloads
+- [transform code on older browsers for compatibility](#Compatibility%20mode)
+- [resolve bare module imports for use in the browser](#Node%20resolve) (`--node-resolve`)
+- auto reload the browser on file changes with the (`--watch`)
+- history API fallback for SPA routing with the (`--app-index index.html`)
 
-Compatibility mode enables bundle-free development with modern javascript, es modules and import maps on all major browsers and IE11.
+[See all commands](#Command%20line%20flags%20and%20Configuration)
 
 ## Getting started
 
@@ -39,8 +43,7 @@ Add scripts to your `package.json`, modify the flags as needed:
 ```json
 {
   "scripts": {
-    "start": "es-dev-server --app-index index.html --node-resolve --watch --open",
-    "start:compatibility": "es-dev-server --compatibility all --app-index index.html --node-resolve --watch --open"
+    "start": "es-dev-server --app-index index.html --node-resolve --watch --open"
   }
 }
 ```
@@ -79,16 +82,17 @@ es-dev-server requires node v10 or higher
 
 ### Code transformation
 
-| name                 | type         | description                                                             |
-| -------------------- | ------------ | ----------------------------------------------------------------------- |
-| compatibility        | string       | Compatibility mode for older browsers. Can be: `esm`, `modern` or `all` |
-| node-resolve         | number       | Resolve bare import imports using node resolve                          |
-| preserve-symlinks    | boolean      | Preserve symlinks when resolving modules. Default false.                |
-| module-dirs          | string/array | Directories to resolve modules from. Used by node-resolve               |
-| babel                | boolean      | Transform served code through babel. Requires .babelrc                  |
-| file-extensions      | number/array | Extra file extensions to use when transforming code.                    |
-| babel-exclude        | number/array | Patterns of files to exclude from babel compilation.                    |
-| babel-modern-exclude | number/array | Patterns of files to exclude from babel compilation on modern browsers. |
+| name                 | type         | description                                                                                  |
+| -------------------- | ------------ | -------------------------------------------------------------------------------------------- |
+| compatibility        | string       | Compatibility mode for older browsers. Can be: `auto`, `min`, `max` or `none` Default `auto` |
+| node-resolve         | number       | Resolve bare import imports using node resolve                                               |
+| preserve-symlinks    | boolean      | Preserve symlinks when resolving modules. Default false.                                     |
+| module-dirs          | string/array | Directories to resolve modules from. Used by node-resolve                                    |
+| babel                | boolean      | Transform served code through babel. Requires .babelrc                                       |
+| file-extensions      | number/array | Extra file extensions to use when transforming code.                                         |
+| babel-exclude        | number/array | Patterns of files to exclude from babel compilation.                                         |
+| babel-modern-exclude | number/array | Patterns of files to exclude from babel compilation on modern browsers.                      |
+| babel-module-exclude | number/array | Patterns of files to exclude from babel compilation for modules only.                        |
 
 Most commands have an alias/shorthand. You can view them by using `--help`.
 
@@ -116,6 +120,24 @@ In addition to the command-line flags, the configuration file accepts these addi
 | responseTransformers | array  | Functions which transform the server's response.       |
 | babelConfig          | object | Babel config to run with the server                    |
 
+## Node resolve
+
+"Bare imports" are imports which don't specify a full path to a file:
+
+```js
+import foo from 'bar';
+```
+
+The browser doesn't know where to find this file called `bar`. The `--node-resolve` flag resolves this bare import to the actual file path before serving it to the browser:
+
+```js
+import foo from './node_modules/bar/bar.js';
+```
+
+Because we use [es-module-lexer](https://github.com/guybedford/es-module-lexer) for blazing fast analysis, we can do this without noticeable impact on performance.
+
+In future, we are hoping that [import maps](https://github.com/WICG/import-maps) will make this step unnecessary.
+
 ## Folder structure
 
 `es-dev-server` serves static files using the same structure as your file system. It cannot serve any files outside of the root of the webserver. You need to make sure any files requested, including node modules, are accessible for the webserver.
@@ -435,43 +457,38 @@ npm i --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-
 
 ## Compatibility mode
 
-Compatibility mode enables bundle-free development with features such as es modules and import maps on older browsers, including IE11.
+Compatibility mode enables bundle-free development using modern browsers features on older browsers. Automatic compatibility mode is enabled by default.
 
 <details>
 
   <summary>Read more</summary>
 
-If you want to make use of import maps, you can provide an import map in your `index.html`. To generate an import map, you can check out our package [import-maps-generate](https://github.com/open-wc/open-wc/tree/master/packages/import-maps-generate), or you can add one manually.
-
-Three modes can be enabled:
-
-### esm
-
-`esm` mode adds [es-module-shims](https://github.com/guybedford/es-module-shims) to enable new module features such as dynamic imports and import maps.
-
-This mode has a negligible performance impact and is great when working on modern browsers.
-
-### modern
-
-`modern` mode expands `esm` mode, adding a babel transform and a polyfill loader.
+Compatibility mode can be configured using the `--compatibility` flag. The possible options are: `auto`, `min`, `max` and `none`. The default is mode is `auto`.
 
-The babel transform uses the [present-env](https://babeljs.io/docs/en/babel-preset-env) plugin. This transforms standard syntax which isn't yet supported by all browsers. By default, it targets the latest two versions of Chrome, Safari, Firefox, and Edge. This can be configured with a [browserslist configuration](https://www.npmjs.com/package/browserslist).
+**auto**
+`auto` compatibility looks at the current browser to determine the level of compatibility to enable. On the latest 2 versions of the major browsers, it doesn't do any work. This keeps the server as fast as possible in the general case.
 
-The polyfill loader does lightweight feature detection to determine which polyfills to load. By default it loads polyfills for web components, these can be turned off or custom polyfills can be added in the configuration.
+On older browsers, the server uses the browser's user agent and [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) to do a targeted transformation for that specific browser and version. If the browser does not support es module scripts, dynamic imports or `import.meta.url` es modules are transformed to [system-js](https://github.com/systemjs/systemjs).
 
-This mode has a moderate performance impact. Use this when using new javascript syntax that is not yet supported on all browsers.
+This works down to at least IE11. Depending on what browser features you are using, it might work with earlier version too but this is not tested.
 
-### all
+**min**
+`min` compatibility forces the same level of compatibility on all browsers. It makes code compatible with the latest two versions of the major browsers, and does not transform es modules.
 
-`all` mode expands `modern` mode by making your code compatible with browsers that don't yet support modules.
+**max**
+`max` compatibility forces the same level of compatibility on all browsers. It compiles everything to es5 and [system-js](https://github.com/systemjs/systemjs).
 
-In addition to the web component polyfills, it loads the general [core-js polyfills](https://www.npmjs.com/package/core-js) and a polyfill for [fetch](https://www.npmjs.com/package/whatwg-fetch)
+**none**
+`none` disables compatibility mode entirely.
 
-When loading your application it detects module support. If it is not supported, your app is loaded through [system-js](https://github.com/systemjs/systemjs) and your code is transformed to `es5`.
+**polyfills**
+Compatibility mode injects polyfills for popular browser features. We plan to make this behavior configurable.
 
-The `es5` transformation is only done for browsers which don't support modules, so you can safely use this mode on modern browsers where it acts the same way as `modern` mode.
+Features which are polyfilled:
 
-`all` mode has the same moderate impact as `modern` mode on browsers that support modules. On browsers that don't support modules, it has a heavier impact. Use this mode if you want to verify if your code runs correctly on older browsers without having to run a build.
+- [core-js (js polyfills)](https://github.com/zloirock/core-js)
+- [webcomponents](https://github.com/webcomponents/webcomponentsjs)
+- [fetch](https://github.com/github/fetch)
 
 </details>
 

packages/testing-karma-bs/README.md

@@ -50,7 +50,7 @@ Add a script to your `package.json`:
 ```json
 {
   "scripts": {
-    "test:bs": "karma start karma.bs.config.js --compatibility all --coverage"
+    "test:bs": "karma start karma.bs.config.js --coverage"
   }
 }
 ```

packages/testing-karma/README.md

@@ -76,8 +76,7 @@ Add scripts to your package.json:
     "test": "karma start --coverage",
     "test:watch": "karma start --auto-watch=true --single-run=false",
     "test:update-snapshots": "karma start --update-snapshots",
-    "test:prune-snapshots": "karma start --prune-snapshots",
-    "test:compatibility": "karma start --compatibility all --auto-watch=true --single-run=false"
+    "test:prune-snapshots": "karma start --prune-snapshots"
   }
 }
 ```
@@ -90,7 +89,6 @@ Commands explained:
 - `test:watch`: does a single test run, and then re-runs on file changes. coverage is not analyzed for performance. in watch mode you can also visit http://localhost:9876/debug.html to debug in the browser
 - `test:update-snapshots`: updates any snapshots files from `@open-wc/semantic-dom-diff`. Use this when your component's rendered HTML changed.
 - `test:prune-snapshots`: prunes any used snapshots files from `@open-wc/semantic-dom-diff`.
-- `test:compatibility`: like `test:watch`, except that it makes your tests compatible with older browsers (including IE11).
 
 ## Testing single files or folders