docs: update HMR docs

docs/blog/announcing-open-web-components/index.md

@@ -168,9 +168,9 @@ We'd love to hear any feedback or questions you might have. You can reach us at:
   You can join the Polymer slack by visiting [this link](https://join.slack.com/t/polymer/shared_invite/enQtNTAzNzg3NjU4ODM4LTkzZGVlOGIxMmNiMjMzZDM1YzYyMzdiYTk0YjQyOWZhZTMwN2RlNjM5ZDFmZjMxZWRjMWViMDA1MjNiYWFhZWM).
   ​
 - You can find our recommendations and documentation over at: [open-wc](https://open-wc.org).
-​
-You can also find some of us on twitter: [BennyP](https://twitter.com/PowersBenny), [daKmoR](https://twitter.com/daKmoR), [passle](https://twitter.com/passle_)
-​
-<br>
-<p align="center">
-🚽 Made with love by <a href="https://github.com/open-wc/open-wc">open-wc</a>. </p>
+  ​
+  You can also find some of us on twitter: [BennyP](https://twitter.com/PowersBenny), [daKmoR](https://twitter.com/daKmoR), [passle](https://twitter.com/passle_)
+  ​
+  <br>
+  <p align="center">
+  🚽 Made with love by <a href="https://github.com/open-wc/open-wc">open-wc</a>. </p>

docs/docs/development/hot-module-replacement.md

@@ -2,7 +2,7 @@
 
 > This project is currently experimental. Try it out and let us know what you think!
 
-[@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) plugin for "hot module replacement" or "fast refresh" with web components.
+[@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) plugin for "hot module replacement" or "fast refresh" with web components and es modules.
 
 Keeps track of web component definitions in your code, and updates them at runtime on change. This is faster than a full page reload and preserves the page's state.
 
@@ -10,7 +10,7 @@ HMR requires the web component base class to implement a `hotReplaceCallback`.
 
 ## Installation
 
-> Make sure you have [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) installed.
+First install [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) if you don't already have this installed in your project.
 
 Install the package:
 
@@ -32,7 +32,7 @@ export default {
 };
 ```
 
-Pick one of the presets below if needed, then start the dev server like normal. There are no code modifications needed. If a component or one of it's dependencies is changed, the component is replaced. Otherwise the page is reloaded.
+Pick one of the presets below if needed, then start the dev server like normal. You don't need to make any changes to your code. If a component or one of it's dependencies is changed, the component is replaced. Otherwise the page is reloaded.
 
 > Make sure to start the dev server without `watch` mode, as this always forces a page reload on change.
 
@@ -207,6 +207,12 @@ class MyElement extends HTMLElement {
 }
 ```
 
+## HMR implementation
+
+This plugin currently only works for web dev server. The approach should be compatible with other ESM-HMR implementations in other dev servers. This is something that can be explored.
+
+Compatibility with non es modules HMR, such as webpack, is not currently a goal.
+
 ### Static callback
 
 The static `hotReplaceCallback` callback is called once for each replacement on the initial class of the component. This is where you can copy over properties from the new class to the existing class.

docs/docs/linting/eslint-plugin-lit-a11y/overview.md

@@ -53,7 +53,7 @@ You may also extend the recommended configuration like so:
 By default, any tagged template literal that starts with `html` is linted. Example:
 
 ```js
-html`<img />`;
+html` <img /> `;
 ```
 
 It could be the case, however, that you're using multiple rendering libraries in a project, like for example [`htm`](https://github.com/developit/htm), which also uses a `html` tagged template literal, but has a slightly different syntax than lit-html. In this case you can specify the following option, to make sure only lit-html tagged template literals are linted:

docs/docs/testing/helpers.md

@@ -108,7 +108,7 @@ expect(el.bar).to.equal('baz');
 Ordinarily, `fixture` will render your template as a child of a plain `<div>` element on karma's test runner page:
 
 ```js
-const el = await fixture(html`<my-el></my-el>`);
+const el = await fixture(html` <my-el></my-el> `);
 ```
 
 ```html
@@ -120,7 +120,7 @@ This should suffice for most cases, but if you need to specify the type of eleme
 ```js
 const parentNode = document.createElement('div');
 parentNode.setAttribute('style', 'position:absolute;');
-const el = await fixture(html`<my-el></my-el>`, { parentNode });
+const el = await fixture(html` <my-el></my-el> `, { parentNode });
 ```
 
 ```html

docs/guides/knowledge/attributes-and-properties.md

@@ -59,9 +59,9 @@ Most templating systems allow setting properties. For example in `lit-html` ther
 ```js
 // set an attribute
 const foo = 'bar';
-html`<my-element foo="${foo}"></my-element>`;
+html` <my-element foo="${foo}"></my-element> `;
 // set a property
-html`<my-element .foo="${foo}"></my-element>`;
+html` <my-element .foo="${foo}"></my-element> `;
 ```
 
 `preact` does some detection to see if a property exists on the element, and will set the property instead of the attribute.
@@ -161,5 +161,5 @@ console.log(mycheck.checked); // false
 When using lit-html, we can get around this by always setting the property instead of the attribute:
 
 ```js
-html`<input type="checkbox" .checked=${this.checkboxChecked} />`;
+html` <input type="checkbox" .checked=${this.checkboxChecked} /> `;
 ```

packages/dev-server-hmr/demo/haunted/src/sharedTemplate.js

@@ -1,5 +1,3 @@
 import { html } from 'lit-html';
 
-export const sharedTemplate = html`
-  <p class="shared-template">Shared template</p>
-`;
+export const sharedTemplate = html` <p class="shared-template">Shared template</p> `;

packages/dev-server-hmr/demo/haunted/src/todo-list.js

@@ -75,9 +75,7 @@ function TodoList() {
 
     <div class="add">
       <input id="input" placeholder="Add a TODO" autocomplete="off" />
-      <button @click=${addTodo}>
-        Add
-      </button>
+      <button @click=${addTodo}>Add</button>
     </div>
 
     ${sharedTemplate}

packages/dev-server-hmr/demo/lit-element/src/sharedTemplate.js

@@ -1,3 +1,3 @@
 import { html } from 'lit-element';
 
-export const sharedTemplate = html`<p class="shared-template">Shared template</p>`;
+export const sharedTemplate = html` <p class="shared-template">Shared template</p> `;

packages/dev-server-hmr/package.json

@@ -22,10 +22,10 @@
   },
   "scripts": {
     "start:fast": "wds --config demo/fast-element/server.config.mjs",
+    "start:haunted": "wds --config demo/haunted/server.config.mjs",
     "start:lit": "wds --config demo/lit-element/server.config.mjs",
     "start:lit-ts": "wds --config demo/lit-element-ts/server.config.mjs",
     "start:vanilla": "wds --config demo/vanilla/server.config.mjs",
-    "start:haunted": "wds --config demo/haunted/server.config.mjs",
     "test": "npm run test:node",
     "test:node": "mocha test-node --recursive",
     "test:watch": "npm run test:node -- --watch --watchfiles test"

packages/eslint-plugin-lit-a11y/README.md

@@ -53,7 +53,7 @@ You may also extend the recommended configuration like so:
 By default, any tagged template literal that starts with `html` is linted. Example:
 
 ```js
-html`<img />`;
+html` <img /> `;
 ```
 
 It could be the case, however, that you're using multiple rendering libraries in a project, like for example [`htm`](https://github.com/developit/htm), which also uses a `html` tagged template literal, but has a slightly different syntax than lit-html. In this case you can specify the following option, to make sure only lit-html tagged template literals are linted:

packages/testing-helpers/README.md

@@ -106,7 +106,7 @@ expect(el.bar).to.equal('baz');
 Ordinarily, `fixture` will render your template as a child of a plain `<div>` element on the test page:
 
 ```js
-const el = await fixture(html`<my-el></my-el>`);
+const el = await fixture(html` <my-el></my-el> `);
 ```
 
 ```html
@@ -118,7 +118,7 @@ This should suffice for most cases, but if you need to specify the type of eleme
 ```js
 const parentNode = document.createElement('div');
 parentNode.setAttribute('style', 'position:absolute;');
-const el = await fixture(html`<my-el></my-el>`, { parentNode });
+const el = await fixture(html` <my-el></my-el> `, { parentNode });
 ```
 
 ```html