jlengrand/open-wc
1
0
Fork 0
mirror of https://github.com/jlengrand/open-wc.git synced 2026-03-10 08:31:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: format project with prettier v2

Browse Source
This commit is contained in:
Lars den Bakker
2020-04-18 17:10:44 +02:00
committed by Thomas Allmer
parent b548683f39
commit 280676e9ae
60 changed files with 204 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/faq/README.md
View File

@@ -200,9 +200,7 @@ class MyComponent extends LitElement {
// ...
}
render() {
return html`
<button @click=${this.myFunction}>click</button>
`;
return html` <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(
html`
<my-component></my-component>
`,
);
const el = fixture(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(
html`
<my-component></my-component>
`,
);
const el = await fixture(html` <my-component></my-component> `);
const myFunctionStub = sinon.stub(el, 'myFunction');
el.requestUpdate();
await el.updateComplete;

8
docs/testing/testing-sinon.md
View File

@@ -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`
<my-component></my-component>
`);
const el = fixture(html` <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`
<button @click=${e => this.myFunction(e)}>click</button>
`;
return html` <button @click=${e => this.myFunction(e)}>click</button> `;
}
}

4
package.json
View File

@@ -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",

4
packages/building-rollup/demo/cjs/demo-app.js
View File

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

4
packages/building-rollup/demo/js/demo-component.js
View File

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

4
packages/building-rollup/demo/js/lazy-component.js
View File

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

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

@@ -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];

5
packages/building-utils/index-html/utils.js
View File

@@ -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) {

4
packages/building-webpack/demo/js/demo-component.js
View File

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

4
packages/building-webpack/demo/js/lazy-component.js
View File

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

42
packages/chai-a11y-axe/README.md
View File

@@ -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`
<button>label</button>
`,
);
const el = await fixture(html` <button>label</button> `);
await expect(el).to.be.accessible();
});
it('fails without label', async () => {
const el = await fixture(
html`
<div aria-labelledby="test-x"></div>
`,
);
const el = await fixture(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(
html`
<div aria-labelledby="test-x"></div>
`,
);
const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
await expect(el).to.be.accessible({
ignoredRules: ['aria-valid-attr-value'],
});
});
it('accepts "done" option', done => {
fixture(
html`
<button>some light dom</button>
`,
).then(el => {
fixture(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(
html`
<button>some light dom</button>
`,
);
const el = await fixture(html` <button>some light dom</button> `);
await assert.isAccessible(el);
});
it('accepts ignored rules list', async () => {
const el = await fixture(
html`
<div aria-labelledby="test-x"></div>
`,
);
const el = await fixture(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(
html`
<div aria-labelledby="test-x"></div>
`,
);
const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
await assert.isNotAccessible(el);
});
```

12
packages/codelabs/src/basics/lit-html.md
View File

@@ -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`
<h1>Hello world</h1>
`;
const template = html` <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`
<h1>Todo app</h1>
`;
return html` <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`
<button @click=${this._addTodo}></button>
`;
html` <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:

48
packages/codelabs/src/intermediate/lit-html.md
View File

@@ -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`
<pre>${JSON.stringify(this.breweries, null, 2)}</pre>
`;
return html` <pre>${JSON.stringify(this.breweries, null, 2)}</pre> `;
}
}
@@ -331,14 +327,10 @@ render() {
render() {
if (this.loading) {
return html`
<p>Loading...</p>
`;
return html` <p>Loading...</p> `;
}
return html`
<pre>${JSON.stringify(this.breweries, null, 2)}</pre>
`;
return html` <pre>${JSON.stringify(this.breweries, null, 2)}</pre> `;
}
}
@@ -453,9 +445,7 @@ render() {
render() {
if (this.loading) {
return html`
<p>Loading...</p>
`;
return html` <p>Loading...</p> `;
}
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`
<p>Loading...</p>
`;
return html` <p>Loading...</p> `;
}
return html`
@@ -798,9 +784,7 @@ render() {
render() {
if (this.loading) {
return html`
<p>Loading...</p>
`;
return html` <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`
<p>Loading...</p>
`;
return html` <p>Loading...</p> `;
}
const totalVisited = this.breweries.filter(b => b.visited).length;
@@ -1127,9 +1109,7 @@ html`
render() {
if (this.loading) {
return html`
<p>Loading...</p>
`;
return html` <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`
<h1>${beer}</h1>
`;
return html` <h1>${beer}</h1> `;
}
```
@@ -1331,9 +1309,7 @@ html`
render() {
if (this.loading) {
return html`
<p>Loading...</p>
`;
return html` <p>Loading...</p> `;
}
const totalVisited = this.breweries.filter(b => b.visited).length;

36
packages/create/owc-app/package.json
View File

@@ -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"
}
}

8
packages/create/test/integration.test.js
View File

@@ -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', () => {

2
packages/dedupe-mixin/package.json
View File

@@ -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
}

4
packages/demoing-storybook/MIGRATION.md
View File

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

16
packages/demoing-storybook/README.md
View File

@@ -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`
<demo-wc-card>Hello World</demo-wc-card>
`;
export const Simple = () => html` <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`
<demo-wc-card>Hello World</demo-wc-card>
`;
export const Simple = () => html` <demo-wc-card>Hello World</demo-wc-card> `;
```
## API
@@ -183,9 +179,7 @@ export default {
component: 'demo-wc-card',
};
export const singleComponent = () => html`
<demo-wc-card></demo-wc-card>
`;
export const singleComponent = () => html` <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`
<demo-wc-card></demo-wc-card>
`;
export const singleComponent = () => html` <demo-wc-card></demo-wc-card> `;
```
For additional features like

4
packages/demoing-storybook/demo/fake-input.js
View File

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

9
packages/demoing-storybook/demo/stories/csf.stories.js
View File

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

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

@@ -32,9 +32,7 @@ import '@foo/demo-wc-card/demo-wc-card.js';
```
```js preview-story
export const Simple = () => html`
<demo-wc-card>Hello World</demo-wc-card>
`;
export const Simple = () => html` <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`
<demo-wc-card back-side>Hello World</demo-wc-card>
`;
export const ShowBack = () => html` <demo-wc-card back-side>Hello World</demo-wc-card> `;
```
###### Providing Rows

18
packages/lit-helpers/README.md
View File

@@ -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`
<div ...="${spreadProps({ propertyA: 'a', propertyB: 'b' })}"></div>
`,
document.body,
);
render(html` <div ...="${spreadProps({ propertyA: 'a', propertyB: 'b' })}"></div> `, document.body);
```
### Attribute spread
@@ -71,12 +66,7 @@ Example:
```js
function renderSpread(data) {
render(
html`
<div ...="${spread(data)}"></div>
`,
document.body,
);
render(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`
<my-element .scrollTop=${live(scrollTop)}></my-element>
`;
html` <my-element .scrollTop=${live(scrollTop)}></my-element> `;
```
## Privately Settable Read-Only Properties

2
packages/lit-helpers/package.json
View File

@@ -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
}

14
packages/lit-helpers/test/live.test.js
View File

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

7
packages/lit-helpers/test/spread.test.js
View File

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

7
packages/lit-helpers/test/spreadProps.test.js
View File

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

15
packages/mdjs/README.md
View File

@@ -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`
<demo-wc-card>JS Story</demo-wc-card>
`;
export const JsStory = () => 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 = () =>
html`
<demo-wc-card>JS Story</demo-wc-card>
`;
export const JsStory = () => 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()
.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);

10
packages/mdjs/demo/stories/README.md
View File

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

5
packages/mdjs/test/mdjsParse.test.js
View File

@@ -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(
'<h2>Intro</h2>\n<pre><code class="language-js">const foo = 1;\n</code></pre>\n',

5
packages/mdjs/test/mdjsStoryParse.test.js
View File

@@ -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

5
packages/polyfills-loader/src/utils.js
View File

@@ -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');
}
/**

8
packages/scoped-elements/demo/before-nesting/demo-app.js
View File

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

8
packages/scoped-elements/demo/no-scope/demo-app.js
View File

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

8
packages/scoped-elements/demo/with-scope/demo-app.js
View File

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

2
packages/scoped-elements/package.json
View File

@@ -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
}

108
packages/scoped-elements/test/ScopedElementsMixin.test.js
View File

@@ -8,17 +8,13 @@ import { getFromGlobalTagsCache } from '../src/globalTagsCache.js';
class FeatureA extends LitElement {
render() {
return html`
<div>Element A</div>
`;
return html` <div>Element A</div> `;
}
}
class FeatureB extends LitElement {
render() {
return html`
<div>Element A</div>
`;
return html` <div>Element A</div> `;
}
}
@@ -34,9 +30,7 @@ describe('ScopedElementsMixin', () => {
const tag = defineCE(
class ContainerElement extends ScopedElementsMixin(LitElement) {
render() {
return html`
<feature-a></feature-a><feature-b></feature-b>
`;
return html` <feature-a></feature-a><feature-b></feature-b> `;
}
},
);
@@ -57,9 +51,7 @@ describe('ScopedElementsMixin', () => {
}
render() {
return html`
<feature-a></feature-a><feature-b></feature-b>
`;
return html` <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`
<div>Element A</div>
`;
return html` <div>Element A</div> `;
}
}
class FeatureA2x extends LitElement {
render() {
return html`
<div>Element A</div>
`;
return html` <div>Element A</div> `;
}
}
@@ -93,9 +81,7 @@ describe('ScopedElementsMixin', () => {
}
render() {
return html`
<feature-a></feature-a>
`;
return html` <feature-a></feature-a> `;
}
}
@@ -107,9 +93,7 @@ describe('ScopedElementsMixin', () => {
}
render() {
return html`
<feature-a></feature-a>
`;
return html` <feature-a></feature-a> `;
}
}
@@ -123,9 +107,7 @@ describe('ScopedElementsMixin', () => {
}
render() {
return html`
<page-a></page-a><page-b></page-b>
`;
return html` <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`
<feature-a></feature-a>
`;
const sharedTemplate = html` <feature-a></feature-a> `;
class FeatureA1x extends LitElement {
render() {
return html`
<div>Element A</div>
`;
return html` <div>Element A</div> `;
}
}
class FeatureA2x extends LitElement {
render() {
return html`
<div>Element A</div>
`;
return html` <div>Element A</div> `;
}
}
@@ -197,9 +173,7 @@ describe('ScopedElementsMixin', () => {
}
render() {
return html`
<page-a></page-a><page-b></page-b>
`;
return html` <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`
<div>Element C</div>
`;
return html` <div>Element C</div> `;
}
}
class FeatureD extends LitElement {
render() {
return html`
<div>Element D</div>
`;
return html` <div>Element D</div> `;
}
}
@@ -252,9 +222,7 @@ describe('ScopedElementsMixin', () => {
const tag = defineCE(
class extends ScopedElementsMixin(PageA) {
render() {
return html`
<feature-c></feature-c>
`;
return html` <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`
<div>Lazy element</div>
`;
return html` <div>Lazy element</div> `;
}
}
@@ -320,23 +286,14 @@ describe('ScopedElementsMixin', () => {
this.defineScopedElement('lazy-element', LazyElement);
this.loading = new Promise(resolve => {
resolve(
html`
<lazy-element></lazy-element>
`,
);
resolve(html` <lazy-element></lazy-element> `);
});
}
render() {
return html`
<feature-a></feature-a>
${until(
this.loading,
html`
<div>Loading...</div>
`,
)}
${until(this.loading, html` <div>Loading...</div> `)}
`;
}
},
@@ -383,9 +340,7 @@ describe('ScopedElementsMixin', () => {
class UnregisteredFeature extends LitElement {
render() {
return html`
<div>Unregistered feature</div>
`;
return html` <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(
() =>
resolve(
html`
<feature-a id="feat"></feature-a>
`,
),
0,
);
setTimeout(() => resolve(html` <feature-a id="feat"></feature-a> `), 0);
});
const tag = defineCE(
@@ -429,14 +376,7 @@ describe('ScopedElementsMixin', () => {
}
render() {
return html`
${until(
content,
html`
<span>Loading...</span>
`,
)}
`;
return html` ${until(content, html` <span>Loading...</span> `)} `;
}
},
);
@@ -464,9 +404,7 @@ describe('ScopedElementsMixin', () => {
return html`
${repeat(
[...Array(10).keys()],
() => html`
<feature-a data-type="child"></feature-a>
`,
() => html` <feature-a data-type="child"></feature-a> `,
)}
`;
}

4
packages/semantic-dom-diff/package.json
View File

@@ -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"
]
}

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

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

4
packages/storybook-addon-web-components-knobs/README.md
View File

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

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

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

24
packages/testing-helpers/README.md
View File

@@ -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(
html`
<my-el .foo=${'bar'}></my-el>
`,
);
const el = await fixture(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(
html`
<my-el .foo=${'bar'}></my-el>
`,
);
const el = await fixture(html` <my-el .foo=${'bar'}></my-el> `);
expect(el.foo).to.equal('bar');
// vs
const el = fixtureSync(
html`
<my-el .foo=${'bar'}></my-el>
`,
);
const el = fixtureSync(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(
html`
<my-element></my-element>
`,
);
const element = await fixture(html` <my-element></my-element> `);
// wait until some async property is set
await waitUntil(() => element.someAsyncProperty, 'Element did not become ready');

4
packages/testing-helpers/package.json
View File

@@ -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"
}
}

26
packages/testing-helpers/test/fixture.test.js
View File

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

4
packages/testing-helpers/test/lit-html.test.js
View File

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

65
packages/testing-helpers/test/stringLitFixture.test.js
View File

@@ -18,20 +18,12 @@ describe('stringFixtureSync & litFixtureSync & fixture & litFixture', () => {
}
[
stringFixtureSync('<test-component>Text content</test-component>'),
litFixtureSync(
html`
<test-component>Text content</test-component>
`,
),
litFixtureSync(html` <test-component>Text content</test-component> `),
].forEach(testElement);
(
await Promise.all([
stringFixture('<test-component>Text content</test-component>'),
litFixture(
html`
<test-component>Text content</test-component>
`,
),
litFixture(html` <test-component>Text content</test-component> `),
])
).forEach(testElement);
});
@@ -46,20 +38,12 @@ describe('stringFixtureSync & litFixtureSync & fixture & litFixture', () => {
}
[
stringFixtureSync('<test-component></test-component>'),
litFixtureSync(
html`
<test-component></test-component>
`,
),
litFixtureSync(html` <test-component></test-component> `),
].forEach(testElement);
(
await Promise.all([
stringFixture('<test-component></test-component>'),
litFixture(
html`
<test-component></test-component>
`,
),
litFixture(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(
html`
<test-component></test-component>
`,
),
litFixtureSync(
html`
<test-component></test-component>
`,
),
litFixtureSync(html` <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(
html`
<test-component></test-component>
`,
),
litFixture(
html`
<test-component></test-component>
`,
),
litFixture(html` <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(testElement);
[stringFixtureSync('<test-component/>'), litFixtureSync(html` <test-component /> `)].forEach(
testElement,
);
(
await Promise.all([
stringFixture('<test-component/>'),
litFixture(
html`
<test-component />
`,
),
litFixture(html` <test-component /> `),
])
).forEach(testElement);
});

4
packages/testing-karma-bs/demo/package.json
View File

@@ -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"
}
}

8
packages/testing/README.md
View File

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

6
packages/testing/demo/test/get-result.test.js
View File

@@ -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(
html`
<get-result .success=${foo === 1}></get-result>
`,
);
const el = await litFixture(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>');

4
packages/testing/package.json
View File

@@ -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"
}
}

28
packages/testing/test/chai-a11y-axe.test.js
View File

@@ -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`
<button>some light dom</button>
`);
const el = await fixture(html` <button>some light dom</button> `);
await expect(el).to.be.accessible();
});
it('accepts "done" option', done => {
fixture(html`
<button>some light dom</button>
`).then(el => {
fixture(html` <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`
<div aria-labelledby="test-x"></div>
`);
const el = await fixture(html` <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`
<button>some light dom</button>
`);
const el = await fixture(html` <button>some light dom</button> `);
await assert.isAccessible(el);
});
it('accepts ignored rules list', async () => {
const el = await fixture(html`
<div aria-labelledby="test-x"></div>
`);
const el = await fixture(html` <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`
<div aria-labelledby="test-x"></div>
`);
const el = await fixture(html` <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`
<div aria-labelledby="test-x"></div>
`);
const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
await assert.isNotAccessible(el);
});
});

28
packages/testing/test/chaiA11yAxe.test.js
View File

@@ -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`
<button>some light dom</button>
`);
const el = await fixture(html` <button>some light dom</button> `);
await expect(el).to.be.accessible();
});
it('accepts "done" option', done => {
fixture(html`
<button>some light dom</button>
`).then(el => {
fixture(html` <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`
<div aria-labelledby="test-x"></div>
`);
const el = await fixture(html` <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`
<button>some light dom</button>
`);
const el = await fixture(html` <button>some light dom</button> `);
await assert.isAccessible(el);
});
it('accepts ignored rules list', async () => {
const el = await fixture(html`
<div aria-labelledby="test-x"></div>
`);
const el = await fixture(html` <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`
<div aria-labelledby="test-x"></div>
`);
const el = await fixture(html` <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`
<div aria-labelledby="test-x"></div>
`);
const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
await assert.isNotAccessible(el);
});
});

6
packages/testing/test/my-element.test.js
View File

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

11
packages/webpack-import-meta-loader/test/webpack-import-meta-loader.test.js
View File

@@ -14,10 +14,7 @@ const rules = [
},
];
function getOnlyDynamicSource(source) {
return source
.split('\n')
.splice(18)
.join(newLine);
return source.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(

7
prettier.config.js
View File

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

13
yarn.lock
View File

@@ -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:
version "0.3.1"
resolved "https://registry.yarnpkg.com/prettier-plugin-package/-/prettier-plugin-package-0.3.1.tgz#dbb78fa0408c2ab18045ac23868bad4560607a93"
integrity sha512-aCx+dVwRwgzsqulCFZcLTS7gTMmn+TXhRIDTbn8ev50n0abIlvukHLLZ9qiJN+6tdSZtd40rlqMx5oQ/mvw1+w==
prettier-plugin-package@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-plugin-package/-/prettier-plugin-package-1.0.0.tgz#164a400f5b695246835b94c7e1b65ea253d67bdc"
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"