From 280676e9ae51c47b79c0f3d000f4aea20b860299 Mon Sep 17 00:00:00 2001 From: Lars den Bakker Date: Sat, 18 Apr 2020 17:10:44 +0200 Subject: [PATCH] chore: format project with prettier v2 --- docs/faq/README.md | 16 +-- docs/testing/testing-sinon.md | 8 +- package.json | 4 +- packages/building-rollup/demo/cjs/demo-app.js | 4 +- .../building-rollup/demo/js/demo-component.js | 4 +- .../building-rollup/demo/js/lazy-component.js | 4 +- packages/building-utils/dom5-fork/index.js | 32 +++--- .../index-html/dynamic-import-polyfill.js | 8 +- packages/building-utils/index-html/utils.js | 5 +- .../demo/js/demo-component.js | 4 +- .../demo/js/lazy-component.js | 4 +- packages/chai-a11y-axe/README.md | 42 ++----- packages/codelabs/src/basics/lit-html.md | 12 +- .../codelabs/src/intermediate/lit-html.md | 48 ++------ packages/create/owc-app/README.md | 2 +- packages/create/owc-app/package.json | 36 +++--- packages/create/test/integration.test.js | 8 +- packages/dedupe-mixin/package.json | 2 +- packages/demoing-storybook/MIGRATION.md | 4 +- packages/demoing-storybook/README.md | 16 +-- packages/demoing-storybook/demo/fake-input.js | 4 +- .../demo/stories/csf.stories.js | 9 +- .../stories/markdown-demo-wc-card.stories.md | 8 +- packages/lit-helpers/README.md | 18 +-- packages/lit-helpers/package.json | 2 +- packages/lit-helpers/test/live.test.js | 14 +-- packages/lit-helpers/test/spread.test.js | 7 +- packages/lit-helpers/test/spreadProps.test.js | 7 +- packages/mdjs/README.md | 15 +-- packages/mdjs/demo/stories/README.md | 10 +- packages/mdjs/test/mdjsParse.test.js | 5 +- packages/mdjs/test/mdjsStoryParse.test.js | 5 +- packages/polyfills-loader/src/utils.js | 5 +- packages/rollup-plugin-index-html/README.md | 2 +- .../demo/before-nesting/demo-app.js | 8 +- .../scoped-elements/demo/no-scope/demo-app.js | 8 +- .../demo/with-scope/demo-app.js | 8 +- packages/scoped-elements/package.json | 2 +- .../test/ScopedElementsMixin.test.js | 108 ++++-------------- packages/semantic-dom-diff/package.json | 4 +- .../demo/stories/demo-wc-card.stories.md | 10 +- .../README.md | 4 +- .../demo/fake-input.js | 4 +- packages/testing-helpers/README.md | 24 +--- packages/testing-helpers/package.json | 4 +- packages/testing-helpers/test/fixture.test.js | 30 ++--- .../testing-helpers/test/lit-html.test.js | 4 +- .../test/stringLitFixture.test.js | 65 ++--------- packages/testing-karma-bs/demo/package.json | 4 +- packages/testing/README.md | 8 +- packages/testing/demo/test/get-result.test.js | 6 +- packages/testing/package.json | 4 +- packages/testing/test/chai-a11y-axe.test.js | 28 ++--- packages/testing/test/chaiA11yAxe.test.js | 28 ++--- packages/testing/test/my-element.test.js | 6 +- .../test/webpack-import-meta-loader.test.js | 11 +- .../webpack-import-meta-loader.js | 2 +- packages/webpack-index-html-plugin/README.md | 2 +- prettier.config.js | 7 +- yarn.lock | 13 ++- 60 files changed, 204 insertions(+), 572 deletions(-) diff --git a/docs/faq/README.md b/docs/faq/README.md index e4a6448c..abe3ba35 100644 --- a/docs/faq/README.md +++ b/docs/faq/README.md @@ -200,9 +200,7 @@ class MyComponent extends LitElement { // ... } render() { - return html` - - `; + return html` `; } } ``` @@ -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( - html` - - `, - ); + const el = fixture(html` `); 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( - html` - - `, - ); + const el = await fixture(html` `); const myFunctionStub = sinon.stub(el, 'myFunction'); el.requestUpdate(); await el.updateComplete; diff --git a/docs/testing/testing-sinon.md b/docs/testing/testing-sinon.md index 6ae4f3d7..376d8201 100644 --- a/docs/testing/testing-sinon.md +++ b/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` `); // stub a function const myFunctionStub = stub(el, 'myFunction'); @@ -38,9 +36,7 @@ class MyComponent extends LitElement { console.log(e); } render() { - return html` - - `; + return html` `; } } diff --git a/package.json b/package.json index 6a2660bc..4cbe19bb 100644 --- a/package.json +++ b/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-plugin-package": "^0.3.1", + "prettier": "^2.0.0", + "prettier-plugin-package": "^1.0.0", "puppeteer": "^2.1.1", "rimraf": "^3.0.2", "rollup": "^2.0.0", diff --git a/packages/building-rollup/demo/cjs/demo-app.js b/packages/building-rollup/demo/cjs/demo-app.js index 386c5418..72717114 100644 --- a/packages/building-rollup/demo/cjs/demo-app.js +++ b/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` - ${message} - `; + return html` ${message} `; } } diff --git a/packages/building-rollup/demo/js/demo-component.js b/packages/building-rollup/demo/js/demo-component.js index 31306d5d..97bfdc6a 100644 --- a/packages/building-rollup/demo/js/demo-component.js +++ b/packages/building-rollup/demo/js/demo-component.js @@ -11,9 +11,7 @@ class DemoComponent extends LitElement { } render() { - return html` -

Demo component

- `; + return html`

Demo component

`; } } diff --git a/packages/building-rollup/demo/js/lazy-component.js b/packages/building-rollup/demo/js/lazy-component.js index 4512aff0..25eff371 100644 --- a/packages/building-rollup/demo/js/lazy-component.js +++ b/packages/building-rollup/demo/js/lazy-component.js @@ -10,9 +10,7 @@ class LazyComponent extends LitElement { } render() { - return html` -

Lazy component

- `; + return html`

Lazy component

`; } } diff --git a/packages/building-utils/dom5-fork/index.js b/packages/building-utils/dom5-fork/index.js index 06de6f0e..956f43e7 100644 --- a/packages/building-utils/dom5-fork/index.js +++ b/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; }, ); diff --git a/packages/building-utils/index-html/dynamic-import-polyfill.js b/packages/building-utils/index-html/dynamic-import-polyfill.js index 5ff9fa70..e1de2f1c 100644 --- a/packages/building-utils/index-html/dynamic-import-polyfill.js +++ b/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); // @@ -18,11 +18,7 @@ function importShim(url) { return new Promise((resolve, reject) => { - const vector = - '$importModule$' + - Math.random() - .toString(32) - .slice(2); + const vector = '$importModule$' + Math.random().toString(32).slice(2); const script = document.createElement('script'); const destructor = () => { delete window[vector]; diff --git a/packages/building-utils/index-html/utils.js b/packages/building-utils/index-html/utils.js index 42f08726..fe8d9103 100644 --- a/packages/building-utils/index-html/utils.js +++ b/packages/building-utils/index-html/utils.js @@ -1,10 +1,7 @@ const crypto = require('crypto'); function createContentHash(content) { - return crypto - .createHash('md4') - .update(content) - .digest('hex'); + return crypto.createHash('md4').update(content).digest('hex'); } function cleanImportPath(path) { diff --git a/packages/building-webpack/demo/js/demo-component.js b/packages/building-webpack/demo/js/demo-component.js index 31306d5d..97bfdc6a 100644 --- a/packages/building-webpack/demo/js/demo-component.js +++ b/packages/building-webpack/demo/js/demo-component.js @@ -11,9 +11,7 @@ class DemoComponent extends LitElement { } render() { - return html` -

Demo component

- `; + return html`

Demo component

`; } } diff --git a/packages/building-webpack/demo/js/lazy-component.js b/packages/building-webpack/demo/js/lazy-component.js index 4512aff0..25eff371 100644 --- a/packages/building-webpack/demo/js/lazy-component.js +++ b/packages/building-webpack/demo/js/lazy-component.js @@ -10,9 +10,7 @@ class LazyComponent extends LitElement { } render() { - return html` -

Lazy component

- `; + return html`

Lazy component

`; } } diff --git a/packages/chai-a11y-axe/README.md b/packages/chai-a11y-axe/README.md index 7b313c4a..29eafdba 100644 --- a/packages/chai-a11y-axe/README.md +++ b/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( - html` - - `, - ); + const el = await fixture(html` `); await expect(el).to.be.accessible(); }); it('fails without label', async () => { - const el = await fixture( - html` -
- `, - ); + const el = await fixture(html`
`); await expect(el).not.to.be.accessible(); }); it('passes for all rules, ignores attributes test', async () => { - const el = await fixture( - html` -
- `, - ); + const el = await fixture(html`
`); await expect(el).to.be.accessible({ ignoredRules: ['aria-valid-attr-value'], }); }); it('accepts "done" option', done => { - fixture( - html` - - `, - ).then(el => { + fixture(html` `).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( - html` - - `, - ); + const el = await fixture(html` `); await assert.isAccessible(el); }); it('accepts ignored rules list', async () => { - const el = await fixture( - html` -
- `, - ); + const el = await fixture(html`
`); await assert.isAccessible(el, { ignoredRules: ['aria-valid-attr-value'], }); }); it('passes for negation', async () => { - const el = await fixture( - html` -
- `, - ); + const el = await fixture(html`
`); await assert.isNotAccessible(el); }); ``` diff --git a/packages/codelabs/src/basics/lit-html.md b/packages/codelabs/src/basics/lit-html.md index feafa56e..20a4c6f5 100644 --- a/packages/codelabs/src/basics/lit-html.md +++ b/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` -

Hello world

-`; +const template = html`

Hello world

`; ``` 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` -

Todo app

- `; + return html`

Todo app

`; } } @@ -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` `; ``` 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: diff --git a/packages/codelabs/src/intermediate/lit-html.md b/packages/codelabs/src/intermediate/lit-html.md index 2f0a583d..16eaecda 100644 --- a/packages/codelabs/src/intermediate/lit-html.md +++ b/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` - My brewery app - `; + return html` My brewery app `; } } @@ -234,9 +232,7 @@ render() { } render() { - return html` -
${JSON.stringify(this.breweries, null, 2)}
- `; + return html`
${JSON.stringify(this.breweries, null, 2)}
`; } } @@ -331,14 +327,10 @@ render() { render() { if (this.loading) { - return html` -

Loading...

- `; + return html`

Loading...

`; } - return html` -
${JSON.stringify(this.breweries, null, 2)}
- `; + return html`
${JSON.stringify(this.breweries, null, 2)}
`; } } @@ -453,9 +445,7 @@ render() { render() { if (this.loading) { - return html` -

Loading...

- `; + return html`

Loading...

`; } return html` @@ -547,9 +537,7 @@ function visitedStatus(visited) { class MyBrewery extends LitElement { render() { - return html` - Bendërbrāu ${visitedStatus(this.visited)} - `; + return html` 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` -

Loading...

- `; + return html`

Loading...

`; } return html` @@ -798,9 +784,7 @@ render() { render() { if (this.loading) { - return html` -

Loading...

- `; + return html`

Loading...

`; } 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` -

Loading...

- `; + return html`

Loading...

`; } const totalVisited = this.breweries.filter(b => b.visited).length; @@ -1127,9 +1109,7 @@ html` render() { if (this.loading) { - return html` -

Loading...

- `; + return html`

Loading...

`; } 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` -

${beer}

- `; + return html`

${beer}

`; } ``` @@ -1331,9 +1309,7 @@ html` render() { if (this.loading) { - return html` -

Loading...

- `; + return html`

Loading...

`; } const totalVisited = this.breweries.filter(b => b.visited).length; diff --git a/packages/create/owc-app/README.md b/packages/create/owc-app/README.md index b9b2a72d..2050deb9 100644 --- a/packages/create/owc-app/README.md +++ b/packages/create/owc-app/README.md @@ -27,4 +27,4 @@ npm init @open-wc For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project. -If you customize the configuration a lot, you can consider moving them to individual files. \ No newline at end of file +If you customize the configuration a lot, you can consider moving them to individual files. diff --git a/packages/create/owc-app/package.json b/packages/create/owc-app/package.json index 6a7ad15b..880a77ff 100644 --- a/packages/create/owc-app/package.json +++ b/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", - "version": "0.0.0", - "description": "Webcomponent owc-app following open-wc recommendations", - "author": "owc-app", - "license": "MIT", - "dependencies": { - "lit-html": "^1.0.0", - "lit-element": "^2.0.1" + "prettier": { + "singleQuote": true, + "arrowParens": "avoid" } } diff --git a/packages/create/test/integration.test.js b/packages/create/test/integration.test.js index 5fcee9d0..2b495fb8 100644 --- a/packages/create/test/integration.test.js +++ b/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) - .to.be.a.file() - .and.equal(expectedPath); + expect(actualPath).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) - .to.be.a.directory() - .and.deep.equal(expectedPath); + expect(ACTUAL_PATH).to.be.a.directory().and.deep.equal(expectedPath); }); it('generates expected file contents', () => { diff --git a/packages/dedupe-mixin/package.json b/packages/dedupe-mixin/package.json index 79d1032f..cf0a9504 100644 --- a/packages/dedupe-mixin/package.json +++ b/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 } diff --git a/packages/demoing-storybook/MIGRATION.md b/packages/demoing-storybook/MIGRATION.md index 52a586a0..8956499e 100644 --- a/packages/demoing-storybook/MIGRATION.md +++ b/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` `; // + setup in .storybook/config.js import { setCustomElements } from '@open-wc/demoing-storybook'; import customElements from '../custom-elements.json'; diff --git a/packages/demoing-storybook/README.md b/packages/demoing-storybook/README.md index a9c4b4d2..0399adf5 100644 --- a/packages/demoing-storybook/README.md +++ b/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` - Hello World -`; +export const Simple = () => html` Hello World `; ``` ## 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` - Hello World -`; +export const Simple = () => html` Hello World `; ``` ## API @@ -183,9 +179,7 @@ export default { component: 'demo-wc-card', }; -export const singleComponent = () => html` - -`; +export const singleComponent = () => html` `; ``` 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` `; ``` For additional features like diff --git a/packages/demoing-storybook/demo/fake-input.js b/packages/demoing-storybook/demo/fake-input.js index 821fc46d..1ac11386 100644 --- a/packages/demoing-storybook/demo/fake-input.js +++ b/packages/demoing-storybook/demo/fake-input.js @@ -32,9 +32,7 @@ export class FakeInput extends LitElement { } render() { - return html` - - `; + return html` `; } } diff --git a/packages/demoing-storybook/demo/stories/csf.stories.js b/packages/demoing-storybook/demo/stories/csf.stories.js index 7d891a9b..b415d4c1 100644 --- a/packages/demoing-storybook/demo/stories/csf.stories.js +++ b/packages/demoing-storybook/demo/stories/csf.stories.js @@ -13,12 +13,7 @@ export const heading = () => `; -export const card = () => - html` - Hello World - `; +export const card = () => html` Hello World `; export const assets = () => - html` - - `; + html` `; diff --git a/packages/demoing-storybook/demo/stories/markdown-demo-wc-card.stories.md b/packages/demoing-storybook/demo/stories/markdown-demo-wc-card.stories.md index a897200f..b6617215 100644 --- a/packages/demoing-storybook/demo/stories/markdown-demo-wc-card.stories.md +++ b/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` - Hello World -`; +export const Simple = () => html` Hello World `; ``` ## API @@ -59,9 +57,7 @@ export const CustomHeader = () => html` ###### Back Side ```js story -export const ShowBack = () => html` - Hello World -`; +export const ShowBack = () => html` Hello World `; ``` ###### Providing Rows diff --git a/packages/lit-helpers/README.md b/packages/lit-helpers/README.md index 443392c3..5209dfcd 100644 --- a/packages/lit-helpers/README.md +++ b/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( - html` -
- `, - document.body, -); +render(html`
`, document.body); ``` ### Attribute spread @@ -71,12 +66,7 @@ Example: ```js function renderSpread(data) { - render( - html` -
- `, - document.body, - ); + render(html`
`, document.body); } // result:
@@ -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` `; ``` ## Privately Settable Read-Only Properties diff --git a/packages/lit-helpers/package.json b/packages/lit-helpers/package.json index 96445637..3c032e61 100644 --- a/packages/lit-helpers/package.json +++ b/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 } diff --git a/packages/lit-helpers/test/live.test.js b/packages/lit-helpers/test/live.test.js index d9ed31fd..e16c07d6 100644 --- a/packages/lit-helpers/test/live.test.js +++ b/packages/lit-helpers/test/live.test.js @@ -25,12 +25,7 @@ describe('live', () => { }); function renderLive(value) { - render( - html` - - `, - wrapper, - ); + render(html` `, wrapper); return wrapper.firstElementChild; } @@ -82,12 +77,7 @@ describe('live', () => { }); function renderLive(value) { - render( - html` -
- `, - wrapper, - ); + render(html`
`, wrapper); return wrapper.firstElementChild; } diff --git a/packages/lit-helpers/test/spread.test.js b/packages/lit-helpers/test/spread.test.js index bc97e95e..0ce9e56b 100644 --- a/packages/lit-helpers/test/spread.test.js +++ b/packages/lit-helpers/test/spread.test.js @@ -10,12 +10,7 @@ describe('spread', () => { }); function renderSpread(data) { - render( - html` -
- `, - wrapper, - ); + render(html`
`, wrapper); return wrapper.firstElementChild; } diff --git a/packages/lit-helpers/test/spreadProps.test.js b/packages/lit-helpers/test/spreadProps.test.js index d9abc699..a830d9ca 100644 --- a/packages/lit-helpers/test/spreadProps.test.js +++ b/packages/lit-helpers/test/spreadProps.test.js @@ -9,12 +9,7 @@ describe('spreadProps', () => { }); function renderSpread(props) { - render( - html` -
- `, - wrapper, - ); + render(html`
`, wrapper); return wrapper.firstElementChild; } diff --git a/packages/mdjs/README.md b/packages/mdjs/README.md index 35fbf4e1..050c2fcc 100644 --- a/packages/mdjs/README.md +++ b/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 = () => - html` - JS Story - `; +export const JsStory = () => html` JS Story `; ``` ```` @@ -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 = () => - html` - JS Story - `; +export const JsStory = () => html` JS Story `; ``` ```` @@ -172,10 +166,7 @@ const markdown = require('remark-parse'); const htmlStringify = require('remark-html'); const mdjsParse = require('@mdjs/core'); -const parser = unified() - .use(markdown) - .use(mdjsParse) - .use(htmlStringify); +const parser = unified().use(markdown).use(mdjsParse).use(htmlStringify); const result = await parser.process(body); const { jsCode } = result.data; console.log(result.contents); diff --git a/packages/mdjs/demo/stories/README.md b/packages/mdjs/demo/stories/README.md index f2782a46..a98b32de 100644 --- a/packages/mdjs/demo/stories/README.md +++ b/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 = () => - html` - JS Story - `; +export const JsStory = () => html` JS Story `; ``` ## Story @@ -35,8 +32,5 @@ export const JsStory = () => with preview ```js preview-story -export const JsStory2 = () => - html` - JS Story with preview - `; +export const JsStory2 = () => html` JS Story with preview `; ``` diff --git a/packages/mdjs/test/mdjsParse.test.js b/packages/mdjs/test/mdjsParse.test.js index ff240d25..e4ea5ca8 100644 --- a/packages/mdjs/test/mdjsParse.test.js +++ b/packages/mdjs/test/mdjsParse.test.js @@ -18,10 +18,7 @@ describe('mdjsParse', () => { 'const bar = 22;', '```', ].join('\n'); - const parser = unified() - .use(markdown) - .use(mdjsParse) - .use(html); + const parser = unified().use(markdown).use(mdjsParse).use(html); const result = await parser.process(input); expect(result.contents).to.equal( '

Intro

\n
const foo = 1;\n
\n', diff --git a/packages/mdjs/test/mdjsStoryParse.test.js b/packages/mdjs/test/mdjsStoryParse.test.js index a71cdd52..50df3485 100644 --- a/packages/mdjs/test/mdjsStoryParse.test.js +++ b/packages/mdjs/test/mdjsStoryParse.test.js @@ -33,10 +33,7 @@ describe('mdjsStoryParse', () => { '', ].join('\n'); - const parser = unified() - .use(markdown) - .use(mdjsStoryParse) - .use(html); + const parser = unified().use(markdown).use(mdjsStoryParse).use(html); const result = await parser.process(input); expect(result.contents).to.equal(expected); // @ts-ignore diff --git a/packages/polyfills-loader/src/utils.js b/packages/polyfills-loader/src/utils.js index 4158e25a..b5581340 100644 --- a/packages/polyfills-loader/src/utils.js +++ b/packages/polyfills-loader/src/utils.js @@ -21,10 +21,7 @@ const fileTypes = { * @returns {string} */ function createContentHash(content) { - return crypto - .createHash('md4') - .update(content) - .digest('hex'); + return crypto.createHash('md4').update(content).digest('hex'); } /** diff --git a/packages/rollup-plugin-index-html/README.md b/packages/rollup-plugin-index-html/README.md index c44de796..89d63b62 100644 --- a/packages/rollup-plugin-index-html/README.md +++ b/packages/rollup-plugin-index-html/README.md @@ -28,7 +28,7 @@ Rollup plugin to make rollup understand your index.html.