chore: format project with prettier v2

docs/faq/README.md

@@ -200,9 +200,7 @@ class MyComponent extends LitElement {
     // ...
   }
   render() {
-    return html`
+    return html` <button @click=${this.myFunction}>click</button> `;
-      <button @click=${this.myFunction}>click</button>
-    `;
   }
 }
 ```
@@ -215,11 +213,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 
 describe('my component', () => {
   it('calls myFunction when a button is clicked', () => {
-    const el = fixture(
+    const el = fixture(html` <my-component></my-component> `);
-      html`
-        <my-component></my-component>
-      `,
-    );
     const myFunctionStub = stub(el, 'myFunction');
     el.shadowRoot.querySelector('button').click();
     expect(myFunctionStub).to.have.callCount(1);
@@ -244,11 +238,7 @@ How can we solve this? There are a few ways to go about this:
 
 ```js
 it('does the thing', async () => {
-  const el = await fixture(
+  const el = await fixture(html` <my-component></my-component> `);
-    html`
-      <my-component></my-component>
-    `,
-  );
   const myFunctionStub = sinon.stub(el, 'myFunction');
   el.requestUpdate();
   await el.updateComplete;

docs/testing/testing-sinon.md

@@ -16,9 +16,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 
 describe('my component', () => {
   it('calls myFunction when a button is clicked', () => {
-    const el = fixture(html`
+    const el = fixture(html` <my-component></my-component> `);
-      <my-component></my-component>
-    `);
 
     // stub a function
     const myFunctionStub = stub(el, 'myFunction');
@@ -38,9 +36,7 @@ class MyComponent extends LitElement {
     console.log(e);
   }
   render() {
-    return html`
+    return html` <button @click=${e => this.myFunction(e)}>click</button> `;
-      <button @click=${e => this.myFunction(e)}>click</button>
-    `;
   }
 }
 

package.json

@@ -62,8 +62,8 @@
     "lit-element": "^2.2.1",
     "mocha": "^6.2.2",
     "npm-run-all": "4.1.3",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.0",
-    "prettier-plugin-package": "^0.3.1",
+    "prettier-plugin-package": "^1.0.0",
     "puppeteer": "^2.1.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.0.0",

packages/building-rollup/demo/cjs/demo-app.js

@@ -3,9 +3,7 @@ import { message } from './commonjs-module.js';
 
 class DemoApp extends LitElement {
   render() {
-    return html`
+    return html` ${message} `;
-      ${message}
-    `;
   }
 }
 

packages/building-rollup/demo/js/demo-component.js

@@ -11,9 +11,7 @@ class DemoComponent extends LitElement {
   }
 
   render() {
-    return html`
+    return html` <p>Demo component</p> `;
-      <p>Demo component</p>
-    `;
   }
 }
 

packages/building-rollup/demo/js/lazy-component.js

@@ -10,9 +10,7 @@ class LazyComponent extends LitElement {
   }
 
   render() {
-    return html`
+    return html` <p>Lazy component</p> `;
-      <p>Lazy component</p>
-    `;
   }
 }
 

packages/building-utils/dom5-fork/index.js

@@ -37,7 +37,7 @@ function hasAttribute(element, name) {
 }
 module.exports.hasAttribute = hasAttribute;
 function hasSpaceSeparatedAttrValue(name, value) {
-  return function(element) {
+  return function (element) {
     var attributeValue = getAttribute(element, name);
     if (typeof attributeValue !== 'string') {
       return false;
@@ -75,7 +75,7 @@ function removeAttribute(element, name) {
 module.exports.removeAttribute = removeAttribute;
 function hasTagName(name) {
   var n = name.toLowerCase();
-  return function(node) {
+  return function (node) {
     if (!node.tagName) {
       return false;
     }
@@ -88,7 +88,7 @@ function hasTagName(name) {
  * This will use the lowercased tagName for comparison.
  */
 function hasMatchingTagName(regex) {
-  return function(node) {
+  return function (node) {
     if (!node.tagName) {
       return false;
     }
@@ -189,7 +189,7 @@ module.exports.setTextContent = setTextContent;
  * the textnode is the only child in that parent.
  */
 function hasTextValue(value) {
-  return function(node) {
+  return function (node) {
     return getTextContent(node) === value;
   };
 }
@@ -198,7 +198,7 @@ function OR() {
   for (var i = 0; i < arguments.length; i++) {
     rules[i] = arguments[i];
   }
-  return function(node) {
+  return function (node) {
     for (var i = 0; i < rules.length; i++) {
       if (rules[i](node)) {
         return true;
@@ -212,7 +212,7 @@ function AND() {
   for (var i = 0; i < arguments.length; i++) {
     rules[i] = arguments[i];
   }
-  return function(node) {
+  return function (node) {
     for (var i = 0; i < rules.length; i++) {
       if (!rules[i](node)) {
         return false;
@@ -225,7 +225,7 @@ function AND() {
  * negate an individual predicate, or a group with AND or OR
  */
 function NOT(predicateFn) {
-  return function(node) {
+  return function (node) {
     return !predicateFn(node);
   };
 }
@@ -234,7 +234,7 @@ function NOT(predicateFn) {
  * `predicateFn`.
  */
 function parentMatches(predicateFn) {
-  return function(node) {
+  return function (node) {
     var parent = node.parentNode;
     while (parent !== undefined) {
       if (predicateFn(parent)) {
@@ -246,12 +246,12 @@ function parentMatches(predicateFn) {
   };
 }
 function hasAttr(attr) {
-  return function(node) {
+  return function (node) {
     return getAttributeIndex(node, attr) > -1;
   };
 }
 function hasAttrValue(attr, value) {
-  return function(node) {
+  return function (node) {
     return getAttribute(node, attr) === value;
   };
 }
@@ -281,17 +281,17 @@ module.exports.isCommentNode = isCommentNode;
  */
 function treeMap(node, mapfn) {
   var results = [];
-  nodeWalk(node, function(node) {
+  nodeWalk(node, function (node) {
     results = results.concat(mapfn(node));
     return false;
   });
   return results;
 }
 module.exports.treeMap = treeMap;
-module.exports.defaultChildNodes = function(node) {
+module.exports.defaultChildNodes = function (node) {
   return node.childNodes;
 };
-module.exports.childNodesIncludeTemplate = function(node) {
+module.exports.childNodesIncludeTemplate = function (node) {
   if (node.nodeName === 'template') {
     return parse5_1.treeAdapters['default'].getTemplateContent(node).childNodes;
   }
@@ -537,7 +537,7 @@ function insertNode(parent, index, newNode, replace) {
     removedNode = parent.childNodes[index];
   }
   Array.prototype.splice.apply(parent.childNodes, [index, replace ? 1 : 0].concat(newNodes));
-  newNodes.forEach(function(n) {
+  newNodes.forEach(function (n) {
     n.parentNode = parent;
   });
   if (removedNode) {
@@ -597,12 +597,12 @@ module.exports.removeNodeSaveChildren = removeNodeSaveChildren;
 function removeFakeRootElements(ast) {
   var injectedNodes = queryAll(
     ast,
-    AND(function(node) {
+    AND(function (node) {
       return !node.__location;
     }, hasMatchingTagName(/^(html|head|body)$/i)),
     undefined,
     // Don't descend past 3 levels 'document > html > head|body'
-    function(node) {
+    function (node) {
       return node.parentNode && node.parentNode.parentNode ? undefined : node.childNodes;
     },
   );

packages/building-utils/index-html/dynamic-import-polyfill.js

@@ -9,7 +9,7 @@
  * - We need it to be a plain script which registers to the window
  */
 
-(function() {
+(function () {
   function toAbsoluteURL(url) {
     const a = document.createElement('a');
     a.setAttribute('href', url); // <a href="hoge.html">
@@ -18,11 +18,7 @@
 
   function importShim(url) {
     return new Promise((resolve, reject) => {
-      const vector =
+      const vector = '$importModule$' + Math.random().toString(32).slice(2);
-        '$importModule$' +
-        Math.random()
-          .toString(32)
-          .slice(2);
       const script = document.createElement('script');
       const destructor = () => {
         delete window[vector];

packages/building-utils/index-html/utils.js

@@ -1,10 +1,7 @@
 const crypto = require('crypto');
 
 function createContentHash(content) {
-  return crypto
+  return crypto.createHash('md4').update(content).digest('hex');
-    .createHash('md4')
-    .update(content)
-    .digest('hex');
 }
 
 function cleanImportPath(path) {

packages/building-webpack/demo/js/demo-component.js

@@ -11,9 +11,7 @@ class DemoComponent extends LitElement {
   }
 
   render() {
-    return html`
+    return html` <p>Demo component</p> `;
-      <p>Demo component</p>
-    `;
   }
 }
 

packages/building-webpack/demo/js/lazy-component.js

@@ -10,9 +10,7 @@ class LazyComponent extends LitElement {
   }
 
   render() {
-    return html`
+    return html` <p>Lazy component</p> `;
-      <p>Lazy component</p>
-    `;
   }
 }
 

packages/chai-a11y-axe/README.md

@@ -16,40 +16,24 @@ Rules can be ignored by passing `ignoredRules` with a list of ignored rules as a
 import { fixture, expect, html } from '@open-wc/testing';
 
 it('passes accessibility test', async () => {
-  const el = await fixture(
+  const el = await fixture(html` <button>label</button> `);
-    html`
-      <button>label</button>
-    `,
-  );
   await expect(el).to.be.accessible();
 });
 
 it('fails without label', async () => {
-  const el = await fixture(
+  const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-    html`
-      <div aria-labelledby="test-x"></div>
-    `,
-  );
   await expect(el).not.to.be.accessible();
 });
 
 it('passes for all rules, ignores attributes test', async () => {
-  const el = await fixture(
+  const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-    html`
-      <div aria-labelledby="test-x"></div>
-    `,
-  );
   await expect(el).to.be.accessible({
     ignoredRules: ['aria-valid-attr-value'],
   });
 });
 
 it('accepts "done" option', done => {
-  fixture(
+  fixture(html` <button>some light dom</button> `).then(el => {
-    html`
-      <button>some light dom</button>
-    `,
-  ).then(el => {
     expect(el).to.be.accessible({
       done,
     });
@@ -65,31 +49,19 @@ The `isAccessible()` and `isNotAccessible()` methods work on Chai's `assert` fun
 import { fixture, assert, html } from '@open-wc/testing';
 
 it('passes axe accessible tests', async () => {
-  const el = await fixture(
+  const el = await fixture(html` <button>some light dom</button> `);
-    html`
-      <button>some light dom</button>
-    `,
-  );
   await assert.isAccessible(el);
 });
 
 it('accepts ignored rules list', async () => {
-  const el = await fixture(
+  const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-    html`
-      <div aria-labelledby="test-x"></div>
-    `,
-  );
   await assert.isAccessible(el, {
     ignoredRules: ['aria-valid-attr-value'],
   });
 });
 
 it('passes for negation', async () => {
-  const el = await fixture(
+  const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-    html`
-      <div aria-labelledby="test-x"></div>
-    `,
-  );
   await assert.isNotAccessible(el);
 });
 ```

packages/codelabs/src/basics/lit-html.md

@@ -144,9 +144,7 @@ In order to create an actual lit-html template, we need to prefix the template l
 ```js
 import { html } from 'https://unpkg.com/lit-element?module';
 
-const template = html`
+const template = html` <h1>Hello world</h1> `;
-  <h1>Hello world</h1>
-`;
 ```
 
 This is a native browser feature called [tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates). The `html` tag is just a function that gets called with information about the template literal that it's attached to. We won't go into details of how it works exactly. By using this syntax, lit-html can very efficiently create templates and update only the parts that changed when re-rendering.
@@ -183,9 +181,7 @@ If you refresh the browser, you should see the title displayed on the page.
 
       class TodoApp extends LitElement {
         render() {
-          return html`
+          return html` <h1>Todo app</h1> `;
-            <h1>Todo app</h1>
-          `;
         }
       }
 
@@ -474,9 +470,7 @@ Start by adding an input field and a button:
 On the "add" button we attached an event listener that listens for the `click` event. This is done by prefixing the event name with a `@` and attributing a function to it.
 
 ```js
-html`
+html` <button @click=${this._addTodo}></button> `;
-  <button @click=${this._addTodo}></button>
-`;
 ```
 
 This is just syntactic sugar that executes the `addEventListener()` function on the element with the specified event and function. In this case, we reference a function of our component, which we should now implement:

packages/codelabs/src/intermediate/lit-html.md

@@ -81,9 +81,7 @@ You should already know how to create a web component using `LitElement`. Go ahe
 
       class BreweryApp extends LitElement {
         render() {
-          return html`
+          return html` My brewery app `;
-            My brewery app
-          `;
         }
       }
 
@@ -234,9 +232,7 @@ render() {
         }
 
         render() {
-          return html`
+          return html` <pre>${JSON.stringify(this.breweries, null, 2)}</pre> `;
-            <pre>${JSON.stringify(this.breweries, null, 2)}</pre>
-          `;
         }
       }
 
@@ -331,14 +327,10 @@ render() {
 
         render() {
           if (this.loading) {
-            return html`
+            return html` <p>Loading...</p> `;
-              <p>Loading...</p>
-            `;
           }
 
-          return html`
+          return html` <pre>${JSON.stringify(this.breweries, null, 2)}</pre> `;
-            <pre>${JSON.stringify(this.breweries, null, 2)}</pre>
-          `;
         }
       }
 
@@ -453,9 +445,7 @@ render() {
 
         render() {
           if (this.loading) {
-            return html`
+            return html` <p>Loading...</p> `;
-              <p>Loading...</p>
-            `;
           }
 
           return html`
@@ -547,9 +537,7 @@ function visitedStatus(visited) {
 
 class MyBrewery extends LitElement {
   render() {
-    return html`
+    return html` Bendërbrāu ${visitedStatus(this.visited)} `;
-      Bendërbrāu ${visitedStatus(this.visited)}
-    `;
   }
 }
 ```
@@ -616,9 +604,7 @@ In this example, we register an event listener for the `click` event, and call t
 
         render() {
           if (this.loading) {
-            return html`
+            return html` <p>Loading...</p> `;
-              <p>Loading...</p>
-            `;
           }
 
           return html`
@@ -798,9 +784,7 @@ render() {
 
         render() {
           if (this.loading) {
-            return html`
+            return html` <p>Loading...</p> `;
-              <p>Loading...</p>
-            `;
           }
 
           const totalVisited = this.breweries.filter(b => b.visited).length;
@@ -941,9 +925,7 @@ Then, on the top of your `render` function, you can filter the array of brewerie
 
         render() {
           if (this.loading) {
-            return html`
+            return html` <p>Loading...</p> `;
-              <p>Loading...</p>
-            `;
           }
 
           const totalVisited = this.breweries.filter(b => b.visited).length;
@@ -1127,9 +1109,7 @@ html`
 
         render() {
           if (this.loading) {
-            return html`
+            return html` <p>Loading...</p> `;
-              <p>Loading...</p>
-            `;
           }
 
           const totalVisited = this.breweries.filter(b => b.visited).length;
@@ -1236,9 +1216,7 @@ Since lit-html templates are actual javascript variables, we could write our tem
 
 ```js
 function BeerTemplate(beer) {
-  return html`
+  return html` <h1>${beer}</h1> `;
-    <h1>${beer}</h1>
-  `;
 }
 ```
 
@@ -1331,9 +1309,7 @@ html`
 
         render() {
           if (this.loading) {
-            return html`
+            return html` <p>Loading...</p> `;
-              <p>Loading...</p>
-            `;
           }
 
           const totalVisited = this.breweries.filter(b => b.visited).length;

packages/create/owc-app/package.json

@@ -1,20 +1,29 @@
 {
+  "name": "owc-app",
+  "version": "0.0.0",
+  "description": "Webcomponent owc-app following open-wc recommendations",
+  "license": "MIT",
+  "author": "owc-app",
   "scripts": {
-    "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
+    "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
-    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
     "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
     "lint": "npm run lint:eslint && npm run lint:prettier",
-    "format": "npm run format:eslint && npm run format:prettier",
+    "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
     "start": "es-dev-server --app-index index.html --node-resolve --open --watch"
   },
+  "dependencies": {
+    "lit-element": "^2.0.1",
+    "lit-html": "^1.0.0"
+  },
   "devDependencies": {
-    "eslint": "^6.1.0",
     "@open-wc/eslint-config": "^2.0.0",
-    "prettier": "^2.0.4",
+    "es-dev-server": "^1.5.0",
+    "eslint": "^6.1.0",
     "husky": "^1.0.0",
     "lint-staged": "^8.0.0",
-    "es-dev-server": "^1.5.0"
+    "prettier": "^2.0.4"
   },
   "eslintConfig": {
     "extends": [
@@ -22,10 +31,6 @@
       "eslint-config-prettier"
     ]
   },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -38,13 +43,8 @@
       "git add"
     ]
   },
-  "name": "owc-app",
+  "prettier": {
-  "version": "0.0.0",
+    "singleQuote": true,
-  "description": "Webcomponent owc-app following open-wc recommendations",
+    "arrowParens": "avoid"
-  "author": "owc-app",
-  "license": "MIT",
-  "dependencies": {
-    "lit-html": "^1.0.0",
-    "lit-element": "^2.0.1"
   }
 }

packages/create/test/integration.test.js

@@ -42,9 +42,7 @@ function stripUserDir(output) {
  * @param  {string} actualPath   path to actual output
  */
 function assertFile(expectedPath, actualPath) {
-  expect(actualPath)
+  expect(actualPath).to.be.a.file().and.equal(expectedPath);
-    .to.be.a.file()
-    .and.equal(expectedPath);
 }
 
 /**
@@ -90,9 +88,7 @@ describe('create', function create() {
 
   it('scaffolds a fully loaded app project', async () => {
     // Check that all files exist, without checking their contents
-    expect(ACTUAL_PATH)
+    expect(ACTUAL_PATH).to.be.a.directory().and.deep.equal(expectedPath);
-      .to.be.a.directory()
-      .and.deep.equal(expectedPath);
   });
 
   it('generates expected file contents', () => {

packages/dedupe-mixin/package.json

@@ -13,6 +13,7 @@
   },
   "author": "open-wc",
   "homepage": "https://github.com/open-wc/open-wc/tree/master/packages/dedupe-mixin",
+  "module": "index.js",
   "scripts": {
     "demo-build:no-dedupe": "rollup -c demo-typed/no-dedupe/rollup.config.js",
     "demo-build:with-dedupe": "rollup -c demo-typed/with-dedupe/rollup.config.js",
@@ -33,6 +34,5 @@
   "devDependencies": {
     "http-server": "^0.11.1"
   },
-  "module": "index.js",
   "sideEffects": false
 }

packages/demoing-storybook/MIGRATION.md

@@ -162,9 +162,7 @@ export default {
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } },
 };
 
-export const singleComponent = () => html`
+export const singleComponent = () => html` <my-el></my-el> `;
-  <my-el></my-el>
-`;
 // + setup in .storybook/config.js
 import { setCustomElements } from '@open-wc/demoing-storybook';
 import customElements from '../custom-elements.json';

packages/demoing-storybook/README.md

@@ -116,9 +116,7 @@ A component meant to display small information with additional data on the back.
 // the following demo is inline
 
 ```js story
-export const Simple = () => html`
+export const Simple = () => html` <demo-wc-card>Hello World</demo-wc-card> `;
-  <demo-wc-card>Hello World</demo-wc-card>
-`;
 ```
 
 ## Variations
@@ -126,9 +124,7 @@ export const Simple = () => html`
 Show demo with a frame and a "show code" button.
 
 ```js preview-story
-export const Simple = () => html`
+export const Simple = () => html` <demo-wc-card>Hello World</demo-wc-card> `;
-  <demo-wc-card>Hello World</demo-wc-card>
-`;
 ```
 
 ## API
@@ -183,9 +179,7 @@ export default {
   component: 'demo-wc-card',
 };
 
-export const singleComponent = () => html`
+export const singleComponent = () => html` <demo-wc-card></demo-wc-card> `;
-  <demo-wc-card></demo-wc-card>
-`;
 ```
 
 For more details see the [official storybook docs](https://storybook.js.org/docs/formats/component-story-format/).
@@ -247,9 +241,7 @@ export default {
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } },
 };
 
-export const singleComponent = () => html`
+export const singleComponent = () => html` <demo-wc-card></demo-wc-card> `;
-  <demo-wc-card></demo-wc-card>
-`;
 ```
 
 For additional features like

packages/demoing-storybook/demo/fake-input.js

@@ -32,9 +32,7 @@ export class FakeInput extends LitElement {
   }
 
   render() {
-    return html`
+    return html` <input type="text" @focusin=${this.focusin} @focusout=${this.focusout} /> `;
-      <input type="text" @focusin=${this.focusin} @focusout=${this.focusout} />
-    `;
   }
 }
 

packages/demoing-storybook/demo/stories/csf.stories.js

@@ -13,12 +13,7 @@ export const heading = () =>
     <input type="text" />
   `;
 
-export const card = () =>
+export const card = () => html` <demo-wc-card>Hello World</demo-wc-card> `;
-  html`
-    <demo-wc-card>Hello World</demo-wc-card>
-  `;
 
 export const assets = () =>
-  html`
+  html` <img src=${new URL('../assets/logo.png', import.meta.url)} title="loaded logo" /> `;
-    <img src=${new URL('../assets/logo.png', import.meta.url)} title="loaded logo" />
-  `;

packages/demoing-storybook/demo/stories/markdown-demo-wc-card.stories.md

@@ -32,9 +32,7 @@ import '@foo/demo-wc-card/demo-wc-card.js';
 ```
 
 ```js preview-story
-export const Simple = () => html`
+export const Simple = () => html` <demo-wc-card>Hello World</demo-wc-card> `;
-  <demo-wc-card>Hello World</demo-wc-card>
-`;
 ```
 
 ## API
@@ -59,9 +57,7 @@ export const CustomHeader = () => html`
 ###### Back Side
 
 ```js story
-export const ShowBack = () => html`
+export const ShowBack = () => html` <demo-wc-card back-side>Hello World</demo-wc-card> `;
-  <demo-wc-card back-side>Hello World</demo-wc-card>
-`;
 ```
 
 ###### Providing Rows

packages/lit-helpers/README.md

@@ -47,12 +47,7 @@ Because spreading properties is a common use case, you can use the `spreadProps`
 import { html, render } from 'lit-html';
 import { spreadProps } from '@open-wc/lit-helpers';
 
-render(
+render(html` <div ...="${spreadProps({ propertyA: 'a', propertyB: 'b' })}"></div> `, document.body);
-  html`
-    <div ...="${spreadProps({ propertyA: 'a', propertyB: 'b' })}"></div>
-  `,
-  document.body,
-);
 ```
 
 ### Attribute spread
@@ -71,12 +66,7 @@ Example:
 
 ```js
 function renderSpread(data) {
-  render(
+  render(html` <div ...="${spread(data)}"></div> `, document.body);
-    html`
-      <div ...="${spread(data)}"></div>
-    `,
-    document.body,
-  );
 }
 
 // result: <div foo="bar">
@@ -104,9 +94,7 @@ A great example for this, is the DOM element's `scrollTop` property which change
 By using the `live` directive, you can make sure it is always in sync with the value rendered by `lit-html`:
 
 ```js
-html`
+html` <my-element .scrollTop=${live(scrollTop)}></my-element> `;
-  <my-element .scrollTop=${live(scrollTop)}></my-element>
-`;
 ```
 
 ## Privately Settable Read-Only Properties

packages/lit-helpers/package.json

@@ -13,6 +13,7 @@
   },
   "author": "open-wc",
   "homepage": "https://github.com/open-wc/open-wc/tree/master/packages/lit-helpers",
+  "module": "index.js",
   "scripts": {
     "prepublishOnly": "../../scripts/insert-header.js"
   },
@@ -32,6 +33,5 @@
     "lit-element": "^1.0.0",
     "lit-html": "^1.0.0"
   },
-  "module": "index.js",
   "sideEffects": false
 }

packages/lit-helpers/test/live.test.js

@@ -25,12 +25,7 @@ describe('live', () => {
     });
 
     function renderLive(value) {
-      render(
+      render(html` <lit-helpers .myProp="${live(value)}"></lit-helpers> `, wrapper);
-        html`
-          <lit-helpers .myProp="${live(value)}"></lit-helpers>
-        `,
-        wrapper,
-      );
       return wrapper.firstElementChild;
     }
 
@@ -82,12 +77,7 @@ describe('live', () => {
     });
 
     function renderLive(value) {
-      render(
+      render(html` <div my-attr="${live(value)}"></div> `, wrapper);
-        html`
-          <div my-attr="${live(value)}"></div>
-        `,
-        wrapper,
-      );
       return wrapper.firstElementChild;
     }
 

packages/lit-helpers/test/spread.test.js

@@ -10,12 +10,7 @@ describe('spread', () => {
   });
 
   function renderSpread(data) {
-    render(
+    render(html` <div ...=${spread(data)}></div> `, wrapper);
-      html`
-        <div ...=${spread(data)}></div>
-      `,
-      wrapper,
-    );
     return wrapper.firstElementChild;
   }
 

packages/lit-helpers/test/spreadProps.test.js

@@ -9,12 +9,7 @@ describe('spreadProps', () => {
   });
 
   function renderSpread(props) {
-    render(
+    render(html` <div ...=${spreadProps(props)}></div> `, wrapper);
-      html`
-        <div ...=${spreadProps(props)}></div>
-      `,
-      wrapper,
-    );
     return wrapper.firstElementChild;
   }
 

packages/mdjs/README.md

@@ -46,10 +46,7 @@ The code snippet will actually get executed at that place and you will have a li
 
 ````md
 ```js story
-export const JsStory = () =>
+export const JsStory = () => html` <demo-wc-card>JS Story</demo-wc-card> `;
-  html`
-    <demo-wc-card>JS Story</demo-wc-card>
-  `;
 ```
 ````
 
@@ -72,10 +69,7 @@ Will become a live demo wrapped in a container with a show code button.
 
 ````md
 ```js preview-story
-export const JsStory = () =>
+export const JsStory = () => html` <demo-wc-card>JS Story</demo-wc-card> `;
-  html`
-    <demo-wc-card>JS Story</demo-wc-card>
-  `;
 ```
 ````
 
@@ -172,10 +166,7 @@ const markdown = require('remark-parse');
 const htmlStringify = require('remark-html');
 const mdjsParse = require('@mdjs/core');
 
-const parser = unified()
+const parser = unified().use(markdown).use(mdjsParse).use(htmlStringify);
-  .use(markdown)
-  .use(mdjsParse)
-  .use(htmlStringify);
 const result = await parser.process(body);
 const { jsCode } = result.data;
 console.log(result.contents);

packages/mdjs/demo/stories/README.md

@@ -24,10 +24,7 @@ import '@foo/demo-wc-card/demo-wc-card.js';
 ## Story
 
 ```js story
-export const JsStory = () =>
+export const JsStory = () => html` <demo-wc-card>JS Story</demo-wc-card> `;
-  html`
-    <demo-wc-card>JS Story</demo-wc-card>
-  `;
 ```
 
 ## Story
@@ -35,8 +32,5 @@ export const JsStory = () =>
 with preview
 
 ```js preview-story
-export const JsStory2 = () =>
+export const JsStory2 = () => html` <demo-wc-card>JS Story with preview</demo-wc-card> `;
-  html`
-    <demo-wc-card>JS Story with preview</demo-wc-card>
-  `;
 ```

packages/mdjs/test/mdjsParse.test.js

@@ -18,10 +18,7 @@ describe('mdjsParse', () => {
       'const bar = 22;',
       '```',
     ].join('\n');
-    const parser = unified()
+    const parser = unified().use(markdown).use(mdjsParse).use(html);
-      .use(markdown)
-      .use(mdjsParse)
-      .use(html);
     const result = await parser.process(input);
     expect(result.contents).to.equal(
       '<h2>Intro</h2>\n<pre><code class="language-js">const foo = 1;\n</code></pre>\n',

packages/mdjs/test/mdjsStoryParse.test.js

@@ -33,10 +33,7 @@ describe('mdjsStoryParse', () => {
       '',
     ].join('\n');
 
-    const parser = unified()
+    const parser = unified().use(markdown).use(mdjsStoryParse).use(html);
-      .use(markdown)
-      .use(mdjsStoryParse)
-      .use(html);
     const result = await parser.process(input);
     expect(result.contents).to.equal(expected);
     // @ts-ignore

packages/polyfills-loader/src/utils.js

@@ -21,10 +21,7 @@ const fileTypes = {
  * @returns {string}
  */
 function createContentHash(content) {
-  return crypto
+  return crypto.createHash('md4').update(content).digest('hex');
-    .createHash('md4')
-    .update(content)
-    .digest('hex');
 }
 
 /**

packages/rollup-plugin-index-html/README.md

@@ -28,7 +28,7 @@ Rollup plugin to make rollup understand your index.html.
     <my-app></my-app>
 
     <script>
-      (function() {
+      (function () {
         var message = 'hello inline script';
         console.log(message);
       })();

packages/scoped-elements/demo/before-nesting/demo-app.js

@@ -73,13 +73,7 @@ class DemoApp extends LitElement {
           Page B
         </button>
       </nav>
-      ${this.page === 'A'
+      ${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
-        ? html`
-            <page-a></page-a>
-          `
-        : html`
-            <page-b></page-b>
-          `}
     `;
   }
 }

packages/scoped-elements/demo/no-scope/demo-app.js

@@ -73,13 +73,7 @@ class DemoApp extends LitElement {
           Page B
         </button>
       </nav>
-      ${this.page === 'A'
+      ${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
-        ? html`
-            <page-a></page-a>
-          `
-        : html`
-            <page-b></page-b>
-          `}
     `;
   }
 }

packages/scoped-elements/demo/with-scope/demo-app.js

@@ -73,13 +73,7 @@ class DemoApp extends LitElement {
           Page B
         </button>
       </nav>
-      ${this.page === 'A'
+      ${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
-        ? html`
-            <page-a></page-a>
-          `
-        : html`
-            <page-b></page-b>
-          `}
     `;
   }
 }

packages/scoped-elements/package.json

@@ -13,6 +13,7 @@
   },
   "author": "open-wc",
   "homepage": "https://github.com/open-wc/open-wc/tree/master/packages/scoped-elements",
+  "module": "index.js",
   "scripts": {
     "demo-build:before-nesting": "rollup -c demo/before-nesting/rollup.config.js",
     "demo-build:no-scope": "rollup -c demo/no-scope/rollup.config.js",
@@ -41,6 +42,5 @@
     "@open-wc/dedupe-mixin": "^1.2.16",
     "lit-html": "^1.0.0"
   },
-  "module": "index.js",
   "sideEffects": false
 }

packages/scoped-elements/test/ScopedElementsMixin.test.js

@@ -8,17 +8,13 @@ import { getFromGlobalTagsCache } from '../src/globalTagsCache.js';
 
 class FeatureA extends LitElement {
   render() {
-    return html`
+    return html` <div>Element A</div> `;
-      <div>Element A</div>
-    `;
   }
 }
 
 class FeatureB extends LitElement {
   render() {
-    return html`
+    return html` <div>Element A</div> `;
-      <div>Element A</div>
-    `;
   }
 }
 
@@ -34,9 +30,7 @@ describe('ScopedElementsMixin', () => {
     const tag = defineCE(
       class ContainerElement extends ScopedElementsMixin(LitElement) {
         render() {
-          return html`
+          return html` <feature-a></feature-a><feature-b></feature-b> `;
-            <feature-a></feature-a><feature-b></feature-b>
-          `;
         }
       },
     );
@@ -57,9 +51,7 @@ describe('ScopedElementsMixin', () => {
         }
 
         render() {
-          return html`
+          return html` <feature-a></feature-a><feature-b></feature-b> `;
-            <feature-a></feature-a><feature-b></feature-b>
-          `;
         }
       },
     );
@@ -71,17 +63,13 @@ describe('ScopedElementsMixin', () => {
   it('supports the "same" tag name in the template for multiple different sub components', async () => {
     class FeatureA1x extends LitElement {
       render() {
-        return html`
+        return html` <div>Element A</div> `;
-          <div>Element A</div>
-        `;
       }
     }
 
     class FeatureA2x extends LitElement {
       render() {
-        return html`
+        return html` <div>Element A</div> `;
-          <div>Element A</div>
-        `;
       }
     }
 
@@ -93,9 +81,7 @@ describe('ScopedElementsMixin', () => {
       }
 
       render() {
-        return html`
+        return html` <feature-a></feature-a> `;
-          <feature-a></feature-a>
-        `;
       }
     }
 
@@ -107,9 +93,7 @@ describe('ScopedElementsMixin', () => {
       }
 
       render() {
-        return html`
+        return html` <feature-a></feature-a> `;
-          <feature-a></feature-a>
-        `;
       }
     }
 
@@ -123,9 +107,7 @@ describe('ScopedElementsMixin', () => {
         }
 
         render() {
-          return html`
+          return html` <page-a></page-a><page-b></page-b> `;
-            <page-a></page-a><page-b></page-b>
-          `;
         }
       },
     );
@@ -143,23 +125,17 @@ describe('ScopedElementsMixin', () => {
   });
 
   it('supports to use a shared template and use it with different sub components', async () => {
-    const sharedTemplate = html`
+    const sharedTemplate = html` <feature-a></feature-a> `;
-      <feature-a></feature-a>
-    `;
 
     class FeatureA1x extends LitElement {
       render() {
-        return html`
+        return html` <div>Element A</div> `;
-          <div>Element A</div>
-        `;
       }
     }
 
     class FeatureA2x extends LitElement {
       render() {
-        return html`
+        return html` <div>Element A</div> `;
-          <div>Element A</div>
-        `;
       }
     }
 
@@ -197,9 +173,7 @@ describe('ScopedElementsMixin', () => {
         }
 
         render() {
-          return html`
+          return html` <page-a></page-a><page-b></page-b> `;
-            <page-a></page-a><page-b></page-b>
-          `;
         }
       },
     );
@@ -219,17 +193,13 @@ describe('ScopedElementsMixin', () => {
   it('supports to extend as ScopedElements component without defining unused sub components', async () => {
     class FeatureC extends LitElement {
       render() {
-        return html`
+        return html` <div>Element C</div> `;
-          <div>Element C</div>
-        `;
       }
     }
 
     class FeatureD extends LitElement {
       render() {
-        return html`
+        return html` <div>Element D</div> `;
-          <div>Element D</div>
-        `;
       }
     }
 
@@ -252,9 +222,7 @@ describe('ScopedElementsMixin', () => {
     const tag = defineCE(
       class extends ScopedElementsMixin(PageA) {
         render() {
-          return html`
+          return html` <feature-c></feature-c> `;
-            <feature-c></feature-c>
-          `;
         }
       },
     );
@@ -298,9 +266,7 @@ describe('ScopedElementsMixin', () => {
   it("support define a lazy element even if it's not used in previous templates", async () => {
     class LazyElement extends LitElement {
       render() {
-        return html`
+        return html` <div>Lazy element</div> `;
-          <div>Lazy element</div>
-        `;
       }
     }
 
@@ -320,23 +286,14 @@ describe('ScopedElementsMixin', () => {
           this.defineScopedElement('lazy-element', LazyElement);
 
           this.loading = new Promise(resolve => {
-            resolve(
+            resolve(html` <lazy-element></lazy-element> `);
-              html`
-                <lazy-element></lazy-element>
-              `,
-            );
           });
         }
 
         render() {
           return html`
             <feature-a></feature-a>
-            ${until(
+            ${until(this.loading, html` <div>Loading...</div> `)}
-              this.loading,
-              html`
-                <div>Loading...</div>
-              `,
-            )}
           `;
         }
       },
@@ -383,9 +340,7 @@ describe('ScopedElementsMixin', () => {
 
       class UnregisteredFeature extends LitElement {
         render() {
-          return html`
+          return html` <div>Unregistered feature</div> `;
-            <div>Unregistered feature</div>
-          `;
         }
       }
 
@@ -409,15 +364,7 @@ describe('ScopedElementsMixin', () => {
   describe('directives integration', () => {
     it('should work with until(...)', async () => {
       const content = new Promise(resolve => {
-        setTimeout(
+        setTimeout(() => resolve(html` <feature-a id="feat"></feature-a> `), 0);
-          () =>
-            resolve(
-              html`
-                <feature-a id="feat"></feature-a>
-              `,
-            ),
-          0,
-        );
       });
 
       const tag = defineCE(
@@ -429,14 +376,7 @@ describe('ScopedElementsMixin', () => {
           }
 
           render() {
-            return html`
+            return html` ${until(content, html` <span>Loading...</span> `)} `;
-              ${until(
-                content,
-                html`
-                  <span>Loading...</span>
-                `,
-              )}
-            `;
           }
         },
       );
@@ -464,9 +404,7 @@ describe('ScopedElementsMixin', () => {
             return html`
               ${repeat(
                 [...Array(10).keys()],
-                () => html`
+                () => html` <feature-a data-type="child"></feature-a> `,
-                  <feature-a data-type="child"></feature-a>
-                `,
               )}
             `;
           }

packages/semantic-dom-diff/package.json

@@ -13,6 +13,7 @@
   },
   "author": "open-wc",
   "homepage": "https://github.com/open-wc/open-wc/tree/master/packages/semantic-dom-diff",
+  "module": "index.js",
   "scripts": {
     "prepublishOnly": "../../scripts/insert-header.js"
   },
@@ -25,6 +26,5 @@
     "dom-diff",
     "testing",
     "snapshots"
-  ],
+  ]
-  "module": "index.js"
 }

packages/storybook-addon-markdown-docs/demo/stories/demo-wc-card.stories.md

@@ -26,10 +26,7 @@ import '@foo/demo-wc-card/demo-wc-card.js';
 ## Story
 
 ```js story
-export const JsStory = () =>
+export const JsStory = () => html` <demo-wc-card>JS Story</demo-wc-card> `;
-  html`
-    <demo-wc-card>JS Story</demo-wc-card>
-  `;
 ```
 
 ## Story
@@ -37,8 +34,5 @@ export const JsStory = () =>
 with preview
 
 ```js preview-story
-export const JsStory2 = () =>
+export const JsStory2 = () => html` <demo-wc-card>JS Story with preview</demo-wc-card> `;
-  html`
-    <demo-wc-card>JS Story with preview</demo-wc-card>
-  `;
 ```

packages/storybook-addon-web-components-knobs/README.md

@@ -55,9 +55,7 @@ export default {
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } },
 };
 
-export const singleComponent = () => html`
+export const singleComponent = () => html` <demo-wc-card></demo-wc-card> `;
-  <demo-wc-card></demo-wc-card>
-`;
 ```
 
 For additional features like

packages/storybook-addon-web-components-knobs/demo/fake-input.js

@@ -32,9 +32,7 @@ export class FakeInput extends LitElement {
   }
 
   render() {
-    return html`
+    return html` <input type="text" @focusin=${this.focusin} @focusout=${this.focusout} /> `;
-      <input type="text" @focusin=${this.focusin} @focusout=${this.focusout} />
-    `;
   }
 }
 

packages/testing-helpers/README.md

@@ -57,11 +57,7 @@ it('can instantiate an element', async () => {
 import { html, fixture } from '@open-wc/testing';
 
 it('can instantiate an element with properties', async () => {
-  const el = await fixture(
+  const el = await fixture(html` <my-el .foo=${'bar'}></my-el> `);
-    html`
-      <my-el .foo=${'bar'}></my-el>
-    `,
-  );
   expect(el.foo).to.equal('bar');
 });
 ```
@@ -121,20 +117,12 @@ Essentially, `fixture` creates a synchronous fixture, then waits for the element
 This way, you can write your tests more succinctly, without having to explicitly `await` those hooks yourself.
 
 ```js
-const el = await fixture(
+const el = await fixture(html` <my-el .foo=${'bar'}></my-el> `);
-  html`
-    <my-el .foo=${'bar'}></my-el>
-  `,
-);
 expect(el.foo).to.equal('bar');
 
 // vs
 
-const el = fixtureSync(
+const el = fixtureSync(html` <my-el .foo=${'bar'}></my-el> `);
-  html`
-    <my-el .foo=${'bar'}></my-el>
-  `,
-);
 await elementUpdated(el);
 expect(el.foo).to.equal('bar');
 ```
@@ -164,11 +152,7 @@ Waits until the given condition returns true. This is useful when elements do as
 ```js
 import { fixture, waitUntil } from '@open-wc/testing-helpers';
 
-const element = await fixture(
+const element = await fixture(html` <my-element></my-element> `);
-  html`
-    <my-element></my-element>
-  `,
-);
 
 // wait until some async property is set
 await waitUntil(() => element.someAsyncProperty, 'Element did not become ready');

packages/testing-helpers/package.json

@@ -13,6 +13,7 @@
   },
   "author": "open-wc",
   "homepage": "https://github.com/open-wc/open-wc/tree/master/packages/testing-helpers",
+  "module": "index.js",
   "scripts": {
     "prepublishOnly": "../../scripts/insert-header.js"
   },
@@ -33,6 +34,5 @@
   "devDependencies": {
     "lit-html": "^1.0.0",
     "webpack-merge": "^4.1.5"
-  },
+  }
-  "module": "index.js"
 }

packages/testing-helpers/test/fixture.test.js

@@ -69,38 +69,24 @@ describe('fixtureSync & fixture', () => {
       expect(element.localName).to.equal('div');
     }
 
-    const elementSync = fixtureSync(html`
+    const elementSync = fixtureSync(html` <div></div> `);
-      <div></div>
-    `);
     // @ts-ignore
     testElement(elementSync);
 
-    const elementAsync = await fixture(html`
+    const elementAsync = await fixture(html` <div></div> `);
-      <div></div>
-    `);
     // @ts-ignore
     testElement(elementAsync);
   });
 
   it('supports lit-html TemplateResult with custom parent', async () => {
-    const elSync = fixtureSync(
+    const elSync = fixtureSync(html` <div foo="${'bar'}"></div> `, {
-      html`
+      parentNode: createParent(),
-        <div foo="${'bar'}"></div>
+    });
-      `,
-      {
-        parentNode: createParent(),
-      },
-    );
     expect(elSync.parentElement.tagName).to.equal('MY-PARENT');
 
-    const elAsync = await fixture(
+    const elAsync = await fixture(html` <div foo="${'bar'}"></div> `, {
-      html`
+      parentNode: createParent(),
-        <div foo="${'bar'}"></div>
+    });
-      `,
-      {
-        parentNode: createParent(),
-      },
-    );
     expect(elAsync.parentElement.tagName).to.equal('MY-PARENT');
   });
 

packages/testing-helpers/test/lit-html.test.js

@@ -20,9 +20,7 @@ describe('html', () => {
   });
 
   it('renders static templates', async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(html` <div></div> `);
-      <div></div>
-    `);
     expect(el.tagName).to.equal('DIV');
   });
 

packages/testing-helpers/test/stringLitFixture.test.js

@@ -18,20 +18,12 @@ describe('stringFixtureSync & litFixtureSync & fixture & litFixture', () => {
     }
     [
       stringFixtureSync('<test-component>Text content</test-component>'),
-      litFixtureSync(
+      litFixtureSync(html` <test-component>Text content</test-component> `),
-        html`
-          <test-component>Text content</test-component>
-        `,
-      ),
     ].forEach(testElement);
     (
       await Promise.all([
         stringFixture('<test-component>Text content</test-component>'),
-        litFixture(
+        litFixture(html` <test-component>Text content</test-component> `),
-          html`
-            <test-component>Text content</test-component>
-          `,
-        ),
       ])
     ).forEach(testElement);
   });
@@ -46,20 +38,12 @@ describe('stringFixtureSync & litFixtureSync & fixture & litFixture', () => {
     }
     [
       stringFixtureSync('<test-component></test-component>'),
-      litFixtureSync(
+      litFixtureSync(html` <test-component></test-component> `),
-        html`
-          <test-component></test-component>
-        `,
-      ),
     ].forEach(testElement);
     (
       await Promise.all([
         stringFixture('<test-component></test-component>'),
-        litFixture(
+        litFixture(html` <test-component></test-component> `),
-          html`
-            <test-component></test-component>
-          `,
-        ),
       ])
     ).forEach(testElement);
   });
@@ -76,31 +60,15 @@ describe('stringFixtureSync & litFixtureSync & fixture & litFixture', () => {
     [
       stringFixtureSync('<test-component></test-component>'),
       stringFixtureSync('<test-component></test-component>'),
-      litFixtureSync(
+      litFixtureSync(html` <test-component></test-component> `),
-        html`
+      litFixtureSync(html` <test-component></test-component> `),
-          <test-component></test-component>
-        `,
-      ),
-      litFixtureSync(
-        html`
-          <test-component></test-component>
-        `,
-      ),
     ].forEach(testElement);
     (
       await Promise.all([
         stringFixture('<test-component></test-component>'),
         stringFixture('<test-component></test-component>'),
-        litFixture(
+        litFixture(html` <test-component></test-component> `),
-          html`
+        litFixture(html` <test-component></test-component> `),
-            <test-component></test-component>
-          `,
-        ),
-        litFixture(
-          html`
-            <test-component></test-component>
-          `,
-        ),
       ])
     ).forEach(testElement);
   });
@@ -112,22 +80,13 @@ describe('stringFixtureSync & litFixtureSync & fixture & litFixture', () => {
     function testElement(element) {
       expect(element).to.be.an.instanceof(TestComponent);
     }
-    [
+    [stringFixtureSync('<test-component/>'), litFixtureSync(html` <test-component /> `)].forEach(
-      stringFixtureSync('<test-component/>'),
+      testElement,
-      litFixtureSync(
+    );
-        html`
-          <test-component />
-        `,
-      ),
-    ].forEach(testElement);
     (
       await Promise.all([
         stringFixture('<test-component/>'),
-        litFixture(
+        litFixture(html` <test-component /> `),
-          html`
-            <test-component />
-          `,
-        ),
       ])
     ).forEach(testElement);
   });

packages/testing-karma-bs/demo/package.json

@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "@open-wc/testing-karma": "^0.3.0",
-    "webpack-merge": "^4.1.5",
+    "@open-wc/testing-karma-bs": "^0.1.0",
-    "@open-wc/testing-karma-bs": "^0.1.0"
+    "webpack-merge": "^4.1.5"
   }
 }

packages/testing/README.md

@@ -17,9 +17,7 @@ import { fixture, html } from '@open-wc/testing';
 
 describe('my-test', () => {
   it('works', async () => {
-    const el = await fixture(html`
+    const el = await fixture(html` <my-element></my-element> `);
-      <my-element></my-element>
-    `);
   });
 });
 ```
@@ -58,9 +56,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 
 describe('my-test', () => {
   it('works', async () => {
-    const el = await fixture(html`
+    const el = await fixture(html` <my-element></my-element> `);
-      <my-element></my-element>
-    `);
     await expect(el).to.be.accessible();
   });
 });

packages/testing/demo/test/get-result.test.js

@@ -16,11 +16,7 @@ describe('True Checking', () => {
 
   it('true values will have a light-dom of <p>YEAH</p>', async () => {
     const foo = 1;
-    const el = await litFixture(
+    const el = await litFixture(html` <get-result .success=${foo === 1}></get-result> `);
-      html`
-        <get-result .success=${foo === 1}></get-result>
-      `,
-    );
     // @ts-ignore
     expect(el.success).to.be.true;
     expect(el).dom.to.equal('<get-result><p>YEAH</p></get-result>');

packages/testing/package.json

@@ -13,6 +13,7 @@
   },
   "author": "open-wc",
   "homepage": "https://github.com/open-wc/open-wc/tree/master/packages/testing",
+  "module": "index.js",
   "scripts": {
     "prepublishOnly": "../../scripts/insert-header.js"
   },
@@ -38,6 +39,5 @@
     "chai-dom": "^1.8.1",
     "mocha": "^6.2.2",
     "sinon-chai": "^3.3.0"
-  },
+  }
-  "module": "index.js"
 }

packages/testing/test/chai-a11y-axe.test.js

@@ -3,16 +3,12 @@ import { fixture, expect, assert, html } from '../index.js';
 describe('chaiA11yAxe', () => {
   describe('Expect', () => {
     it('passes axe accessible tests', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <button>some light dom</button> `);
-        <button>some light dom</button>
-      `);
       await expect(el).to.be.accessible();
     });
 
     it('accepts "done" option', done => {
-      fixture(html`
+      fixture(html` <button>some light dom</button> `).then(el => {
-        <button>some light dom</button>
-      `).then(el => {
         expect(el).to.be.accessible({
           done,
         });
@@ -31,34 +27,26 @@ describe('chaiA11yAxe', () => {
     });
 
     it('uses negation to pass failed test', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-        <div aria-labelledby="test-x"></div>
-      `);
       await expect(el).not.to.be.accessible();
     });
   });
 
   describe('Assert', () => {
     it('passes axe accessible tests', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <button>some light dom</button> `);
-        <button>some light dom</button>
-      `);
       await assert.isAccessible(el);
     });
 
     it('accepts ignored rules list', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-        <div aria-labelledby="test-x"></div>
-      `);
       await assert.isAccessible(el, {
         ignoredRules: ['aria-valid-attr-value'],
       });
     });
 
     it('throws when audit did not pass', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-        <div aria-labelledby="test-x"></div>
-      `);
       let thrown = false;
       try {
         await assert.isAccessible(el);
@@ -69,9 +57,7 @@ describe('chaiA11yAxe', () => {
     });
 
     it('passes for negation', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-        <div aria-labelledby="test-x"></div>
-      `);
       await assert.isNotAccessible(el);
     });
   });

packages/testing/test/chaiA11yAxe.test.js

@@ -3,16 +3,12 @@ import { fixture, expect, assert, html } from '../index.js';
 describe('chaiA11yAxe', () => {
   describe('Expect', () => {
     it('passes axe accessible tests', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <button>some light dom</button> `);
-        <button>some light dom</button>
-      `);
       await expect(el).to.be.accessible();
     });
 
     it('accepts "done" option', done => {
-      fixture(html`
+      fixture(html` <button>some light dom</button> `).then(el => {
-        <button>some light dom</button>
-      `).then(el => {
         expect(el).to.be.accessible({
           done,
         });
@@ -31,34 +27,26 @@ describe('chaiA11yAxe', () => {
     });
 
     it('uses negation to pass failed test', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-        <div aria-labelledby="test-x"></div>
-      `);
       await expect(el).not.to.be.accessible();
     });
   });
 
   describe('Assert', () => {
     it('passes axe accessible tests', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <button>some light dom</button> `);
-        <button>some light dom</button>
-      `);
       await assert.isAccessible(el);
     });
 
     it('accepts ignored rules list', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-        <div aria-labelledby="test-x"></div>
-      `);
       await assert.isAccessible(el, {
         ignoredRules: ['aria-valid-attr-value'],
       });
     });
 
     it('throws when audit did not pass', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-        <div aria-labelledby="test-x"></div>
-      `);
       let thrown = false;
       try {
         await assert.isAccessible(el);
@@ -69,9 +57,7 @@ describe('chaiA11yAxe', () => {
     });
 
     it('passes for negation', async () => {
-      const el = await fixture(html`
+      const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
-        <div aria-labelledby="test-x"></div>
-      `);
       await assert.isNotAccessible(el);
     });
   });

packages/testing/test/my-element.test.js

@@ -3,11 +3,7 @@ import '../demo/my-element.js';
 
 describe('my-element', () => {
   it('renders correctly', async () => {
-    const element = await fixture(
+    const element = await fixture(html` <my-element message="hello world!"></my-element> `);
-      html`
-        <my-element message="hello world!"></my-element>
-      `,
-    );
     // @ts-ignore
     await element.updateComplete;
 

packages/webpack-import-meta-loader/test/webpack-import-meta-loader.test.js

@@ -14,10 +14,7 @@ const rules = [
   },
 ];
 function getOnlyDynamicSource(source) {
-  return source
+  return source.split('\n').splice(18).join(newLine);
-    .split('\n')
-    .splice(18)
-    .join(newLine);
 }
 
 describe('import-meta-url-loader', () => {
@@ -26,8 +23,7 @@ describe('import-meta-url-loader', () => {
     const caseA = getOnlyDynamicSource(stats.toJson().modules[0].source);
 
     expect(caseA).to.equal(
-      `${'' +
+      `${"export const foo = new URL('./', ({ url: getAbsoluteUrl('caseA/index.js') }).url);"}${newLine}export const bar = new URL('./', ({ url: getAbsoluteUrl('caseA/index.js') }).url);${newLine}`,
-        "export const foo = new URL('./', ({ url: getAbsoluteUrl('caseA/index.js') }).url);"}${newLine}export const bar = new URL('./', ({ url: getAbsoluteUrl('caseA/index.js') }).url);${newLine}`,
     );
 
     const statsReturn = await compiler('caseA/return.js', rules);
@@ -44,8 +40,7 @@ describe('import-meta-url-loader', () => {
     const caseBsub = getOnlyDynamicSource(stats.toJson().modules[0].source);
 
     expect(caseB).to.equal(
-      `${'' +
+      `${"import './caseBsub/caseBsub.js';"}${newLine}${newLine}export const foo = new URL('./', ({ url: getAbsoluteUrl('caseB/index.js') }).url);${newLine}`,
-        "import './caseBsub/caseBsub.js';"}${newLine}${newLine}export const foo = new URL('./', ({ url: getAbsoluteUrl('caseB/index.js') }).url);${newLine}`,
     );
 
     expect(caseBsub).to.equal(

packages/webpack-import-meta-loader/webpack-import-meta-loader.js

@@ -13,7 +13,7 @@ const regex = /import\.meta/g;
  * return import.meta.url;
  * // becomes: return ({ url: `${window.location.protocol}//${window.location.host}/relative/path/to/file.js` }).url;
  */
-module.exports = function(source) {
+module.exports = function (source) {
   const path = require('path');
 
   const relativePath = this.context.substring(

packages/webpack-index-html-plugin/README.md

@@ -26,7 +26,7 @@ Webpack plugin to make webpack understand your index.html.
     <my-app></my-app>
 
     <script>
-      (function() {
+      (function () {
         var message = 'hello inline script';
         console.log(message);
       })();

prettier.config.js

@@ -1 +1,6 @@
-module.exports = require('./packages/prettier-config');
+module.exports = {
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: 'all',
+  arrowParens: 'avoid',
+};

yarn.lock

@@ -14359,16 +14359,21 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-prettier-plugin-package@^0.3.1:
+prettier-plugin-package@^1.0.0:
-  version "0.3.1"
+  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-package/-/prettier-plugin-package-0.3.1.tgz#dbb78fa0408c2ab18045ac23868bad4560607a93"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-package/-/prettier-plugin-package-1.0.0.tgz#164a400f5b695246835b94c7e1b65ea253d67bdc"
-  integrity sha512-aCx+dVwRwgzsqulCFZcLTS7gTMmn+TXhRIDTbn8ev50n0abIlvukHLLZ9qiJN+6tdSZtd40rlqMx5oQ/mvw1+w==
+  integrity sha512-flbKuLB7ftrW2zQYJjb0mF6zY7R0jDrYatpr0BBNj04Eb+g1RLbquOQSJE1LffDZfzU03fwJQ74grqQjQjYa3Q==
 
 prettier@^1.16.4, prettier@^1.18.2, prettier@^1.19.1:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
+prettier@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.4.tgz#2d1bae173e355996ee355ec9830a7a1ee05457ef"
+  integrity sha512-SVJIQ51spzFDvh4fIbCLvciiDMCrRhlN3mbZvv/+ycjvmF5E73bKdGfU8QDLNmjYJf+lsGnDBC4UUnvTe5OO0w==
+
 pretty-bytes@^5.1.0, pretty-bytes@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"