chore: update dev dependencies and demo, format code (#65)

Author: web-padawan

.eslintrc.json

@@ -6,15 +6,13 @@
     "plugin:import/typescript",
     "plugin:lit/all",
     "plugin:wc/recommended",
-    "plugin:prettier/recommended",
-    "prettier/@typescript-eslint"
+    "plugin:prettier/recommended"
   ],
   "plugins": ["@typescript-eslint", "wc", "prettier"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "sourceType": "module",
-    "ecmaVersion": 2018,
-    "project": "./tsconfig.json"
+    "ecmaVersion": 2019
   },
   "env": {
     "browser": true

.nvmrc

@@ -0,0 +1 @@
+v12.22.1

README.md

@@ -71,7 +71,7 @@ $ wca analyze my-element.js --outFile custom-elements.json --format json
 </html>
 ```
 
-4. Use [es-dev-server](https://open-wc.org/developing/es-dev-server.html) to serve your HTML page.
+4. Use [web-dev-server](https://modern-web.dev/docs/dev-server/overview/) to serve your HTML page.
 
 ## Usage options
 
@@ -357,7 +357,7 @@ $ yarn
 $ yarn dev
 ```
 
-Open http://127.0.0.1:8081/demo/
+Open http://127.0.0.1:8080
 
 ### Create dist folder
 
@@ -377,4 +377,4 @@ $ yarn serve:dist
 - Thanks to [@bahrus](https://github.com/bahrus) for [wc-info](https://github.com/bahrus/wc-info) component which inspired me.
 - The visual appearance is largely inspired by [Vuetify](https://vuetifyjs.com/en/getting-started/quick-start) API docs.
 - The tabs component is based on the [howto-tabs](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs) example.
-- Thanks to [open-wc.org](https://open-wc.org/) for [es-dev-server](https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server) and [rollup preset](https://open-wc.org/building/building-rollup.html).
+- Thanks to [Modern Web](https://modern-web.dev) for [Web Dev Server](https://modern-web.dev/docs/dev-server/overview/) and [Rollup Plugin HTML](https://modern-web.dev/docs/building/rollup-plugin-html/).

demo/custom-elements.json renamed to custom-elements.json

@@ -3,7 +3,7 @@
   "tags": [
     {
       "name": "expansion-panel",
-      "path": "./../src/fixtures/expansion-panel.ts",
+      "path": "./src/fixtures/expansion-panel.ts",
       "description": "A custom element similar to the HTML5 `<details>` element.",
       "attributes": [
         {
@@ -97,7 +97,7 @@
     },
     {
       "name": "fancy-accordion",
-      "path": "./../src/fixtures/fancy-accordion.ts",
+      "path": "./src/fixtures/fancy-accordion.ts",
       "description": "A custom element implementing the accordion widget: a vertically stacked set of expandable panels\nthat wraps several instances of the `<expansion-panel>` element. Only one panel can be opened\n(expanded) at a time.\n\nPanel headings function as controls that enable users to open (expand) or hide (collapse) their\nassociated sections of content. The user can toggle panels by mouse click, Enter and Space keys.\n\nThe component supports keyboard navigation and is aligned with the\n[WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion).",
       "attributes": [
         {
@@ -133,7 +133,7 @@
     },
     {
       "name": "intl-currency",
-      "path": "./../src/fixtures/intl-currency.ts",
+      "path": "./src/fixtures/intl-currency.ts",
       "description": "A custom element that formats currency using Intl.",
       "attributes": [
         {
@@ -181,7 +181,7 @@
     },
     {
       "name": "progress-bar",
-      "path": "./../src/fixtures/progress-bar.ts",
+      "path": "./src/fixtures/progress-bar.ts",
       "description": "A custom element similar to the HTML5 `<progress>` element.",
       "attributes": [
         {
@@ -249,7 +249,7 @@
         {
           "name": "--progress-bar-opacity",
           "description": "Opacity set on the underlying track.",
-          "default": "\"0.16\""
+          "default": "0.16"
         }
       ],
       "cssParts": [

demo/index.html renamed to index.html

@@ -58,7 +58,7 @@
       }
     }
   </style>
-  <link rel="stylesheet" href="./styles.css">
+  <link rel="stylesheet" href="./demo/styles.css">
 </head>
 <body>
   <nav>
@@ -198,15 +198,14 @@ <h2>CSS shadow parts</h2>
     </section>
   </template>
 
-  <script type="module" src="../lib/fixtures/expansion-panel.js"></script>
-  <script type="module" src="../lib/fixtures/fancy-accordion.js"></script>
-  <script type="module" src="../lib/fixtures/intl-currency.js"></script>
-  <script type="module" src="../lib/fixtures/progress-bar.js"></script>
-  <script type="module" src="../lib/api-viewer.js"></script>
-  <script type="module" src="../lib/api-docs.js"></script>
-  <script type="module" src="../lib/api-demo.js"></script>
+  <script type="module">
+    import './lib/fixtures/expansion-panel.js';
+    import './lib/fixtures/fancy-accordion.js';
+    import './lib/fixtures/progress-bar.js';
+    import './lib/api-viewer.js';
+    import './lib/api-docs.js';
+    import './lib/api-demo.js';
 
-  <script>
     if (window.location.hash === '') {
       history.pushState({}, '', '#api-viewer');
     }

package.json

@@ -26,15 +26,15 @@
   "scripts": {
     "build": "tsc",
     "dev": "npm run watch & npm run serve",
-    "dist": "rimraf dist && rollup -c rollup.config.js && cp ./demo/*.json dist",
-    "fixtures": "wca analyze src/fixtures/*.ts --format json --outFile demo/custom-elements.json",
+    "dist": "rimraf dist && rollup -c rollup.config.js && npm run fixtures && cp custom-elements.json dist",
+    "fixtures": "wca analyze src/fixtures/*.ts --format json --outFile custom-elements.json",
     "lint:css": "stylelint src/*.ts",
     "lint:eslint": "eslint src --ext .ts",
     "lint:lit": "lit-analyzer src --strict",
     "lint": "npm-run-all --parallel lint:*",
     "prepublishOnly": "npm run build",
-    "serve": "es-dev-server --node-resolve --port 8081",
-    "serve:dist": "es-dev-server --app-index dist/index.html --open",
+    "serve": "web-dev-server --node-resolve",
+    "serve:dist": "web-dev-server --app-index dist/index.html --open",
     "size": "size-limit",
     "size:why": "size-limit --why",
     "watch": "tsc-watch"
@@ -50,38 +50,40 @@
     "lit-element": "^2.0.0",
     "lit-html": "^1.0.0",
     "marked": "^2.0.0",
-    "tslib": "^2.0.1"
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@open-wc/building-rollup": "^1.9.0",
-    "@size-limit/preset-small-lib": "^4.6.0",
-    "@typescript-eslint/eslint-plugin": "^4.1.0",
-    "@typescript-eslint/parser": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@size-limit/preset-small-lib": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "@web/dev-server": "^0.1.25",
+    "@web/rollup-plugin-html": "^1.10.1",
     "deepmerge": "4.2.2",
-    "es-dev-server": "^1.57.4",
-    "eslint": "^7.8.1",
+    "eslint": "^8.0.0",
     "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-lit": "^1.2.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-wc": "^1.2.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-lit": "1.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-wc": "^1.3.2",
     "husky": "^4.3.0",
     "lint-staged": "^10.3.0",
     "lit-analyzer": "^1.2.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.1",
+    "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.26.11",
-    "rollup-plugin-copy": "^3.3.0",
-    "size-limit": "^4.6.0",
-    "stylelint": "^13.7.1",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^20.0.0",
+    "rollup": "^2.58.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "size-limit": "^6.0.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^22.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "1.10.0",
-    "tsc-watch": "^4.2.9",
-    "typescript": "^4.0.2",
+    "tsc-watch": "^4.5.0",
+    "typescript": "^4.4.4",
     "web-component-analyzer": "^1.1.6"
   },
   "husky": {
@@ -98,7 +100,7 @@
   "size-limit": [
     {
       "path": "lib/api-viewer.js",
-      "limit": "37 KB"
+      "limit": "38 KB"
     }
   ]
 }

rollup.config.js

@@ -1,18 +1,11 @@
-import merge from 'deepmerge';
-import copy from 'rollup-plugin-copy';
-import { createSpaConfig } from '@open-wc/building-rollup';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { terser } from 'rollup-plugin-terser';
+import html from '@web/rollup-plugin-html';
 
-const config = createSpaConfig({
-  html: {
-    minify: false
-  }
-});
-
-export default merge(config, {
-  input: './demo/index.html',
-  plugins: [
-    copy({
-      targets: [{ src: './demo/*.css', dest: './dist' }]
-    })
-  ]
-});
+export default {
+  input: './index.html',
+  output: {
+    dir: './dist'
+  },
+  plugins: [html({ minify: false }), nodeResolve(), terser()]
+};

src/api-demo-layout-mixin.ts

@@ -324,7 +324,7 @@ export const ApiDemoLayoutMixin = <T extends Constructor<LitElement>>(
 
     private _syncKnob(component: Element, changed: PropertyInfo) {
       const { name, type, attribute } = changed;
-      const value = ((component as unknown) as ComponentWithProps)[name];
+      const value = (component as unknown as ComponentWithProps)[name];
 
       // update knobs to avoid duplicate event
       this.knobs = {

src/fixtures/fancy-accordion.ts

@@ -104,7 +104,7 @@ export class FancyAccordion extends LitElement {
 
   get focused(): Element | null {
     const root = this.getRootNode();
-    return ((root as unknown) as DocumentOrShadowRoot).activeElement;
+    return (root as unknown as DocumentOrShadowRoot).activeElement;
   }
 
   private _onKeydown(event: KeyboardEvent) {