diff --git a/docs/blog/announcing-open-web-components/index.md b/docs/blog/announcing-open-web-components/index.md index 66a78e66..959ae6a7 100644 --- a/docs/blog/announcing-open-web-components/index.md +++ b/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_) -​ -
-

-🚽 Made with love by open-wc.

+ ​ + You can also find some of us on twitter: [BennyP](https://twitter.com/PowersBenny), [daKmoR](https://twitter.com/daKmoR), [passle](https://twitter.com/passle_) + ​ +
+

+ 🚽 Made with love by open-wc.

diff --git a/docs/docs/development/hot-module-replacement.md b/docs/docs/development/hot-module-replacement.md index 93daa786..90eda430 100644 --- a/docs/docs/development/hot-module-replacement.md +++ b/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. diff --git a/docs/docs/linting/eslint-plugin-lit-a11y/overview.md b/docs/docs/linting/eslint-plugin-lit-a11y/overview.md index c619f9fd..677c6c7d 100644 --- a/docs/docs/linting/eslint-plugin-lit-a11y/overview.md +++ b/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``; +html` `; ``` 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: diff --git a/docs/docs/testing/helpers.md b/docs/docs/testing/helpers.md index 3b10f9f3..8763b417 100644 --- a/docs/docs/testing/helpers.md +++ b/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 `
` element on karma's test runner page: ```js -const el = await fixture(html``); +const el = await fixture(html` `); ``` ```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``, { parentNode }); +const el = await fixture(html` `, { parentNode }); ``` ```html diff --git a/docs/guides/knowledge/attributes-and-properties.md b/docs/guides/knowledge/attributes-and-properties.md index ff6026a5..d58b280a 100644 --- a/docs/guides/knowledge/attributes-and-properties.md +++ b/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``; +html` `; // set a property -html``; +html` `; ``` `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``; +html` `; ``` diff --git a/packages/dev-server-hmr/demo/haunted/src/sharedTemplate.js b/packages/dev-server-hmr/demo/haunted/src/sharedTemplate.js index 5bb710f1..4f964f43 100644 --- a/packages/dev-server-hmr/demo/haunted/src/sharedTemplate.js +++ b/packages/dev-server-hmr/demo/haunted/src/sharedTemplate.js @@ -1,5 +1,3 @@ import { html } from 'lit-html'; -export const sharedTemplate = html` -

Shared template

-`; +export const sharedTemplate = html`

Shared template

`; diff --git a/packages/dev-server-hmr/demo/haunted/src/todo-list.js b/packages/dev-server-hmr/demo/haunted/src/todo-list.js index 2d210748..13e0d4fb 100644 --- a/packages/dev-server-hmr/demo/haunted/src/todo-list.js +++ b/packages/dev-server-hmr/demo/haunted/src/todo-list.js @@ -75,9 +75,7 @@ function TodoList() {
- +
${sharedTemplate} diff --git a/packages/dev-server-hmr/demo/lit-element/src/sharedTemplate.js b/packages/dev-server-hmr/demo/lit-element/src/sharedTemplate.js index 8cdd63a0..94319a25 100644 --- a/packages/dev-server-hmr/demo/lit-element/src/sharedTemplate.js +++ b/packages/dev-server-hmr/demo/lit-element/src/sharedTemplate.js @@ -1,3 +1,3 @@ import { html } from 'lit-element'; -export const sharedTemplate = html`

Shared template

`; +export const sharedTemplate = html`

Shared template

`; diff --git a/packages/dev-server-hmr/package.json b/packages/dev-server-hmr/package.json index dcfd0be6..5431afeb 100644 --- a/packages/dev-server-hmr/package.json +++ b/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" diff --git a/packages/eslint-plugin-lit-a11y/README.md b/packages/eslint-plugin-lit-a11y/README.md index 48c17220..c07620a1 100644 --- a/packages/eslint-plugin-lit-a11y/README.md +++ b/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``; +html` `; ``` 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: diff --git a/packages/testing-helpers/README.md b/packages/testing-helpers/README.md index fb26f7ef..e62bb327 100644 --- a/packages/testing-helpers/README.md +++ b/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 `
` element on the test page: ```js -const el = await fixture(html``); +const el = await fixture(html` `); ``` ```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``, { parentNode }); +const el = await fixture(html` `, { parentNode }); ``` ```html