docs: use es module syntax for all configs in the docs

Author: LarsDenBakker

docs/docs/dev-server/middleware/index.md

@@ -16,9 +16,9 @@ You can use middleware to modify responses to any request from the browser, for
   <summary>Read more</summary>
 
 ```javascript
-const proxy = require('koa-proxies');
+import proxy from 'koa-proxies';
 
-module.exports = {
+export default {
   port: 9000,
   middlewares: [
     proxy('/api', {
@@ -40,7 +40,7 @@ You can rewrite certain file requests using a simple middleware. This can be use
 Serve `/index.html` from `/src/index.html`:
 
 ```javascript
-module.exports = {
+export default {
   middlewares: [
     function rewriteIndex(context, next) {
       if (context.url === '/' || context.url === '/index.html') {

docs/docs/dev-server/plugins/esbuild.md

@@ -21,9 +21,9 @@ npm i -D @web/dev-server-esbuild
 Create a configuration file:
 
 ```js
-const { esbuildPlugin } = require('@web/dev-server-esbuild');
+import { esbuildPlugin } from '@web/dev-server-esbuild';
 
-module.exports = {
+export default {
   plugins: [esbuildPlugin({ ts: true })],
 };
 ```

docs/docs/dev-server/plugins/examples.md

@@ -51,9 +51,12 @@ console.log(`The current version is: ${version}`);
 Add a plugin to serve the contents of this environment:
 
 ```js
-const packageJson = require('./package.json');
+import fs from 'fs';
+import path from 'path';
 
-module.exports = {
+const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
+
+export default {
   plugins: [
     {
       name: 'env-vars',
@@ -80,12 +83,12 @@ Another approach is to replace constants or patterns in your code. We don't reco
 You can use the [@rollup/plugin-replace](https://www.npmjs.com/package/@rollup/plugin-replace) for replacing environment variables in your code. Make sure to add an `include` pattern to avoid processing files unnecessarily.
 
 ```js
-const rollupReplace = require('@rollup/plugin-replace');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupReplace from '@rollup/plugin-replace';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const replace = fromRollup(rollupReplace);
 
-module.exports = {
+export default {
   plugins: [replace({ include: ['src/**/*.js'], __environment__: '"development"' })],
 };
 ```
@@ -100,7 +103,7 @@ Es modules are immutable, you cannot mock or stub them at runtime in the browser
 <summary>View example</summary>
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'stub-package',
@@ -133,12 +136,12 @@ Note that the dev server and test runner already includes `esbuild` for compilin
 <summary>View example</summary>
 
 ```js
-const rollupBabel = require('@rollup/plugin-babel');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupBabel from '@rollup/plugin-babel';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const babel = fromRollup(rollupBabel);
 
-module.exports = {
+export default {
   plugins: [babel({ include: ['src/**/*.js'], plugins: ['babel-plugin-foo'] })],
 };
 ```
@@ -159,12 +162,12 @@ To import JSON files you can use [@rollup/plugin-json](https://www.npmjs.com/pac
 In addition to installing the rollup plugin, we need to tell the dev server to serve json files as js modules:
 
 ```js
-const rollupJson = require('@rollup/plugin-json');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupJson from '@rollup/plugin-json';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const json = fromRollup(rollupJson);
 
-module.exports = {
+export default {
   // tell the server to serve json files as js
   mimeTypes: {
     '**/*.json': 'js',
@@ -187,12 +190,12 @@ There are a lot of ways to import CSS. For this example, we have tested two roll
 
 ```js
 /* eslint-disable */
-const rollupPostcss = require('rollup-plugin-postcss');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupPostcss from 'rollup-plugin-postcss';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const postcss = fromRollup(rollupPostcss);
 
-module.exports = {
+export default {
   // in a monorepo you need to adjust the rootdir of the web server
   // postcss injects a module which needs to be reachable from the browser
   // rootDir: '../..',
@@ -214,12 +217,12 @@ If you're using `lit-element`, you can use [rollup-plugin-lit-css](https://www.n
 
 ```js
 /* eslint-disable */
-const rollupLitcss = require('rollup-plugin-lit-css');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupLitcss from 'rollup-plugin-lit-css';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const litcss = fromRollup(rollupLitcss);
 
-module.exports = {
+export default {
   // tell the server to serve css files as js
   mimeTypes: {
     '**/*.css': 'js',
@@ -242,12 +245,12 @@ Make sure not to use the `limit` option, as this causes the plugin to emit files
 
 ```js
 /* eslint-disable */
-const rollupUrl = require('rollup-plugin-url');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupUrl from 'rollup-plugin-url';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const url = fromRollup(rollupUrl);
 
-module.exports = {
+export default {
   // tell the server to serve your assets files as js
   mimeTypes: {
     './assets/**/*': 'js',

docs/docs/dev-server/plugins/index.md

@@ -17,9 +17,9 @@ A plugin is just an object that you add to the `plugins` array in your configura
 In your `web-dev-server.config.js` or `web-test-runner.config.js`:
 
 ```js
-const awesomePlugin = require('awesome-plugin');
+import awesomePlugin from 'awesome-plugin';
 
-module.exports = {
+export default {
   plugins: [
     // use a plugin
     awesomePlugin({ someOption: 'someProperty' }),

docs/docs/dev-server/plugins/legacy.md

@@ -17,9 +17,9 @@ npm i --save-dev @web/dev-server-legacy
 Add the plugin to your config:
 
 ```js
-const { legacyPlugin } = require('@web/dev-server-legacy');
+import { legacyPlugin } from '@web/dev-server-legacy';
 
-module.exports = {
+export default {
   plugins: [legacyPlugin()],
 };
 ```

docs/docs/dev-server/plugins/rollup.md

@@ -23,12 +23,12 @@ npm i --save-dev @web/dev-server-rollup
 Import the rollup plugin and the `fromRollup` function in your configuration file. Then, wrap the rollup plugin with the adapter function:
 
 ```js
-const rollupReplace = require('@rollup/plugin-replace');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupReplace from '@rollup/plugin-replace';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const replace = fromRollup(rollupReplace);
 
-module.exports = {
+export default {
   plugins: [replace({ include: ['src/**/*.js'], __environment__: '"development"' })],
 };
 ```
@@ -42,10 +42,10 @@ Some rollup plugins do expensive operations. During development, this matters a
 The rollup build process assumes that any imported files are meant to be compiled to JS, web dev server serves many different kinds of files to the browser. If you are transforming a non-standard filetype to JS, for example .json files, you need to instruct the server to handle it as a JS file:
 
 ```js
-const json = require('@rollup/plugin-json');
-const { rollupAdapter } = require('@web/dev-server-rollup');
+import json from '@rollup/plugin-json';
+import { rollupAdapter } from '@web/dev-server-rollup';
 
-module.exports = {
+export default {
   mimeTypes: {
     // serve all json files as js
     '**/*.json': 'js',

docs/docs/dev-server/plugins/writing-plugins.md

@@ -14,9 +14,9 @@ A plugin is just an object that you add to the `plugins` array in your configura
 In your `web-dev-server.config.js` or `web-test-runner.config.js`:
 
 ```js
-const awesomePlugin = require('awesome-plugin');
+import awesomePlugin from 'awesome-plugin';
 
-module.exports = {
+export default {
   plugins: [
     // use a plugin
     awesomePlugin({ someOption: 'someProperty' }),
@@ -99,7 +99,7 @@ Serve an auto generated `index.html`:
 ```js
 const indexHTML = generateIndexHTML();
 
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -118,7 +118,7 @@ Serve a virtual module:
 ```js
 const indexHTML = generateIndexHTML();
 
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -135,7 +135,7 @@ module.exports = {
 The file extension is used to infer the mime type to respond with. If you are using a non-standard file extension you need to use the `type` property to set it explicitly:
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -163,7 +163,7 @@ The dev server guesses the MIME type based on the file extension. When serving v
 The returned MIME type can be a file extension, this will be used to set the corresponding default MIME type. For example `js` resolves to `application/javascript` and `css` to `text/css`.
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -190,7 +190,7 @@ module.exports = {
 You can use a mime type shorthand, such as `js` or `css`. Koa will resolve this to the full mimetype. It is also possible to set the full mime type directly:
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -220,7 +220,7 @@ In a web server, the response body is not always a string, but it can be a binar
 Rewrite the base path of your application for local development;
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -238,7 +238,7 @@ module.exports = {
 Inject a script to set global variables during local development:
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -259,9 +259,11 @@ module.exports = {
 Inject environment variables into a JS module:
 
 ```js
-const packageJson = require('./package.json');
+import fs from 'fs';
 
-module.exports = {
+const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
+
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -278,9 +280,9 @@ module.exports = {
 Transform markdown to HTML:
 
 ```js
-const markdownToHTML = require('markdown-to-html-library');
+import { markdownToHTML } from 'markdown-to-html-library';
 
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -308,7 +310,7 @@ module.exports = {
 Polyfill CSS modules in JS:
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -348,7 +350,7 @@ The dev server already resolves module imports when the `--node-resolve` flag is
 The hook receives the import string and should return the string to replace it with. This should be a browser-compatible path, not a file path.
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -394,17 +396,17 @@ function myFancyPlugin() {
   };
 }
 
-module.exports = {
+export default {
   plugins: [myFancyPlugin()],
 };
 ```
 
 Boot up another server for proxying in serverStart:
 
 ```js
-const proxy = require('koa-proxies');
+import proxy from 'koa-proxies';
 
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -443,7 +445,7 @@ function myFancyPlugin() {
   };
 }
 
-module.exports = {
+export default {
   plugins: [myFancyPlugin()],
 };
 ```

docs/docs/test-runner/browsers/browserstack.md

@@ -13,7 +13,7 @@ For modern browsers, we recommend using other browser launchers, as they are a l
 ## Usage
 
 ```js
-const { browserstackLauncher } = require('@web/test-runner-browserstack');
+import { browserstackLauncher } from '@web/test-runner-browserstack';
 
 const sharedCapabilities = {
   // it's recommended to store user and key as environment variables
@@ -28,7 +28,7 @@ const sharedCapabilities = {
   build: `build ${process.env.GITHUB_RUN_NUMBER || 'unknown'}`,
 };
 
-module.exports = {
+export default {
   browsers: [
     browserstackLauncher({
       capabilities: {

docs/docs/test-runner/browsers/chrome.md

@@ -23,9 +23,9 @@ For other projects you can install the browser launcher by running:
 And included in your config:
 
 ```js
-const { chromeLauncher } = require('@web/test-runner-chrome');
+import { chromeLauncher } from '@web/test-runner-chrome';
 
-module.exports = {
+export default {
   browsers: [chromeLauncher()],
 };
 ```
@@ -37,9 +37,9 @@ If you want to customize the puppeteer launcher options, you can add the browser
 You can find all possible launch options in the [official documentation](https://github.com/microsoft/puppeteer/blob/master/docs/api.md#browsertypelaunchoptions)
 
 ```js
-const { chromeLauncher } = require('@web/test-runner-chrome');
+import { chromeLauncher } from '@web/test-runner-chrome';
 
-module.exports = {
+export default {
   browsers: [
     chromeLauncher({
       launchOptions: {