From 9b130046adbdd2af605cd65c42da693ff993803a Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Sun, 19 Nov 2017 19:52:04 +1100 Subject: [PATCH] style: update prettier and apply on whole codebase --- .github/ISSUE_TEMPLATE.md | 15 +- .github/PULL_REQUEST_TEMPLATE.md | 29 ++-- CHANGELOG.md | 7 +- CONTRIBUTING.md | 38 ++--- README.md | 147 +++++++++++------- package.json | 8 +- site/components/code.js | 8 +- .../pages/mixins/__samples__/with-children.js | 6 +- site/pages/mixins/index.js | 4 +- site/pages/renderers/with-preact.js | 4 +- site/pages/renderers/with-react.js | 4 +- site/utils/index.js | 2 + src/with-update.js | 13 +- test/ts/mixins/with-children.tsx | 8 +- 14 files changed, 162 insertions(+), 131 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 35466261..fe5429e6 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,22 +1,23 @@ ## Bug report -*Delete this section if this is a feature request.* +_Delete this section if this is a feature request._ -- Skate version: *x.x.x* -- Affected browsers (and versions): *IE 10* +* Skate version: _x.x.x_ +* Affected browsers (and versions): _IE 10_ ### Current behaviour -You can use the [Codepen skate template](https://codepen.io/Hotell/pen/RVJamm) if you need a starting point. +You can use the [Codepen skate template](https://codepen.io/Hotell/pen/RVJamm) +if you need a starting point. ### Expected behaviour -*Please explain how you'd expect it to behave.* +_Please explain how you'd expect it to behave._ ## Feature request -*Delete this section if this is a bug report.* +_Delete this section if this is a bug report._ ### Use case(s) -*Explain the rationale for this feature.* +_Explain the rationale for this feature._ diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 847b2f83..a7458341 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,33 +1,36 @@ -*If there is a linked issue, mention it here.* +_If there is a linked issue, mention it here._ -- [ ] Bug -- [ ] Feature +* [ ] Bug +* [ ] Feature ## Requirements -- [ ] Read the [contribution guidelines](https://github.com/skatejs/skatejs/blob/5.x/CONTRIBUTING.md). -- [ ] Wrote tests. -- [ ] Updated docs and upgrade instructions, if necessary. -- [ ] Updated TS definitions, if necessary. +* [ ] Read the + [contribution guidelines](https://github.com/skatejs/skatejs/blob/5.x/CONTRIBUTING.md). +* [ ] Wrote tests. +* [ ] Updated docs and upgrade instructions, if necessary. +* [ ] Updated TS definitions, if necessary. ## Rationale -*Why is this PR necessary?* +_Why is this PR necessary?_ ## Implementation -*Why have you implemented it this way? Did you try any other methods?* +_Why have you implemented it this way? Did you try any other methods?_ ## Open questions -*Are there any open questions about this implementation that need answers?* +_Are there any open questions about this implementation that need answers?_ ## Other -*Is there anything else we should know? Delete this section if you don't need it.* +_Is there anything else we should know? Delete this section if you don't need +it._ ## Tasks -*List any tasks you need to do here, if any. Delete this section if you don't need it.* +_List any tasks you need to do here, if any. Delete this section if you don't +need it._ -- [ ] *Example task.* +* [ ] _Example task._ diff --git a/CHANGELOG.md b/CHANGELOG.md index 1be39711..884060aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ # Change Log -This project adheres to [Semantic Versioning](http://semver.org/). -Every release is documented on the Github [Releases](https://github.com/skatejs/skatejs/releases) page. -For migration instructions, see [the migration docs](docs/migrating/README.md). +This project adheres to [Semantic Versioning](http://semver.org/). Every release +is documented on the Github +[Releases](https://github.com/skatejs/skatejs/releases) page. For migration +instructions, see [the migration docs](docs/migrating/README.md). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 329c9606..ac23ed41 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,12 +2,14 @@ ## Technical overview -Skate's source is kept in `src/`. It is written using the latest ES2017 version, with Flow type definitions. +Skate's source is kept in `src/`. It is written using the latest ES2017 version, +with Flow type definitions. -When Skate is built, it is transpiled in to various distribution formats, ready for use -in the browser, on a server, or in a webpack build. +When Skate is built, it is transpiled in to various distribution formats, ready +for use in the browser, on a server, or in a webpack build. -The documentation for Skate is kept in `site/`, and is written using Skate with server-side rendering. +The documentation for Skate is kept in `site/`, and is written using Skate with +server-side rendering. Unit tests exist both for the source and for the documentation examples. @@ -17,33 +19,31 @@ Skate uses `npm` as its package manager. Ensure you're on `npm@5` at a minimum. Here are the main commands you'll need while developing: -- Creating a bundle: `npm prepublish` -- Developing with tests: `npm run test:watch` -- Fixing js and ts code style: `npm run style:fix` -- Commiting (with commitizen): `npm run commit` +* Creating a bundle: `npm prepublish` +* Developing with tests: `npm run test:watch` +* Updating skate site: `npm run dev` +* Fixing whole project code format via prettier: `npm run format` +* Updating Typescript definitions ( if you've changed anything make sure all TS + test pass ): `npm run test:ts` ## Making a change -All changes to Skate should be include an accompanying test case to demonstrate the feature or bug being addressed. +All changes to Skate should be include an accompanying test case to demonstrate +the feature or bug being addressed. ## Committing -We are using semantic-release and conventional-changelog for releasing, so our commit messages have to follow strict rules. - -The commit message formatting can be added using a typical git workflow or through the use of a CLI wizard ([Commitizen](https://github.com/commitizen/cz-cli)). - -To use the wizard, run `npm run commit` in your terminal after staging your changes in git. - -A detailed explanation can be found in this [document](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#). +// @TODO ## Pull Requests -Pull requests should be issued for even the smallest change. Every pull request should have at least one corresponding issue. +Pull requests should be issued for even the smallest change. Every pull request +should have at least one corresponding issue. ## Releasing -Skate uses semantic-release and conventional-changelog so releases are published automatically. +// @TODO ## Notes -- Default branch should always be the latest stable branch. +* Default branch should always be the latest stable branch. diff --git a/README.md b/README.md index 5d129492..d6e7fc11 100644 --- a/README.md +++ b/README.md @@ -12,33 +12,47 @@ [![Sauce Test Status](https://saucelabs.com/browser-matrix/skatejs.svg)](https://saucelabs.com/u/skatejs) -Skate is a functional abstraction over [the web component standards](https://github.com/w3c/webcomponents) that: - -- Produces cross-framework compatible components -- Abstracts away common attribute / property semantics via `props`, such as attribute reflection and coercion -- Adds several lifecycle callbacks for responding to prop updates, rendering and more -- Provides a base set of [mixins](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/) that hook into renderers such as [@skatejs/renderer-preact](https://github.com/skatejs/renderer-preact). +Skate is a functional abstraction over +[the web component standards](https://github.com/w3c/webcomponents) that: + +* Produces cross-framework compatible components +* Abstracts away common attribute / property semantics via `props`, such as + attribute reflection and coercion +* Adds several lifecycle callbacks for responding to prop updates, rendering and + more +* Provides a base set of + [mixins](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/) + that hook into renderers such as + [@skatejs/renderer-preact](https://github.com/skatejs/renderer-preact). ## Anatomy of a Skate web component -At its core, Skate is about creating [Custom Elements](https://w3c.github.io/webcomponents/spec/custom/). -Skate provides a series of [mixin functions](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/) +At its core, Skate is about creating +[Custom Elements](https://w3c.github.io/webcomponents/spec/custom/). Skate +provides a series of +[mixin functions](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/) that enable you to control what your component can do. -For instance, Skate's main mixin, `withComponent`, is just a composition of all of Skate's other mixin behaviours: - -* `withUpdate` -- the generated element will react to changes on their props or HTML attributes. -* `withChildren` -- the generated element will react to changes to its child elements. -* `withRenderer` -- the element can generate its own DOM and output it to a `renderRoot` (a `ShadowRoot` node by default). -* `withLifecycle` -- the element can use added sugar on top of the built-in lifecycle callbacks. -* `withContext` -- the element will inherit context from components up the tree, like in React. +For instance, Skate's main mixin, `withComponent`, is just a composition of all +of Skate's other mixin behaviours: + +* `withUpdate` -- the generated element will react to changes on their props or + HTML attributes. +* `withChildren` -- the generated element will react to changes to its child + elements. +* `withRenderer` -- the element can generate its own DOM and output it to a + `renderRoot` (a `ShadowRoot` node by default). +* `withLifecycle` -- the element can use added sugar on top of the built-in + lifecycle callbacks. +* `withContext` -- the element will inherit context from components up the tree, + like in React. * `withUnique` -- allows for naming the custom element through `is`. -Calling `withComponent()` gives you a Custom Element class constructor, which you can then extend to -define your own elements. +Calling `withComponent()` gives you a Custom Element class constructor, which +you can then extend to define your own elements. -Every mixin accepts an optional `Element` constructor as its only parameter, which -allows you to extend virtually any element type in HTML! +Every mixin accepts an optional `Element` constructor as its only parameter, +which allows you to extend virtually any element type in HTML! ### Rendering an element @@ -82,11 +96,14 @@ When this element is rendered, the DOM will look something like the following: ``` -This is the utility that web components provide when using Custom Elements and the Shadow DOM. +This is the utility that web components provide when using Custom Elements and +the Shadow DOM. -Skate also allows **turning off Shadow DOM** if you don't wanna use it for various particular reasons. You can turn it off via `get renderRoot()` override: +Skate also allows **turning off Shadow DOM** if you don't wanna use it for +various particular reasons. You can turn it off via `get renderRoot()` override: -> NOTE: by turning off Shadow DOM you cannot use content projection anymore by default, further tweaks needs to be applied +> NOTE: by turning off Shadow DOM you cannot use content projection +> anymore by default, further tweaks needs to be applied ```js import { withComponent, props } from 'skatejs'; @@ -132,7 +149,8 @@ When this element is rendered, the DOM will look something like the following: ### Watching element properties and attributes -We can create a Skate component that watches for HTML attribute changes on itself: +We can create a Skate component that watches for HTML attribute changes on +itself: ```js import { props, withComponent } from 'skatejs'; @@ -166,16 +184,17 @@ The resulting HTML when the element is rendered would look like this: ``` -Now, whenever the `name` property or attribute on the greeting component changes, -the component will re-render. +Now, whenever the `name` property or attribute on the greeting component +changes, the component will re-render. ### Making your own mixins -In the previous exampless, each component implements its own rendering behaviour. -Rather than re-defining it all the time, we can write a mixin and take advantage of -prototypal inheritance: +In the previous exampless, each component implements its own rendering +behaviour. Rather than re-defining it all the time, we can write a mixin and +take advantage of prototypal inheritance: -> NOTE: the `with` prefix is not mandatory, just a common practice for naming HOCs and Mixins +> NOTE: the `with` prefix is not mandatory, just a common practice for naming +> HOCs and Mixins ```js import { props, withComponent } from 'skatejs'; @@ -204,10 +223,10 @@ customElements.define('x-hello', GreetingComponent); ### Rendering using other front-end libraries -Because Skate provides a hook for the renderer, it can support just about -every modern component-based front-end library — React, Preact, Vue... -just provide a `render` to stamp out your component's HTML, -a `renderer` to update the DOM with your HTML, and then it's all the same to Skate! +Because Skate provides a hook for the renderer, it can support just about every +modern component-based front-end library — React, Preact, Vue... just +provide a `render` to stamp out your component's HTML, a `renderer` to update +the DOM with your HTML, and then it's all the same to Skate! The Skate team have provided a few renderers for popular front-end libraries; check the [Installing](#installing) section. @@ -215,8 +234,9 @@ check the [Installing](#installing) section. #### Using Skate with Preact Instead of writing our own `renderer`, we could use a library like -[Preact](https://preactjs.com/) to do the work for us. Skate provides a ready-made renderer for Preact; -here's how we would update our previous greeting component to use it: +[Preact](https://preactjs.com/) to do the work for us. Skate provides a +ready-made renderer for Preact; here's how we would update our previous greeting +component to use it: ```js /** @jsx h */ @@ -227,18 +247,21 @@ import { h } from 'preact'; const Component = withComponent(withRenderer()); -customElements.define('x-hello', class extends Component { - static props = { - name: props.string +customElements.define( + 'x-hello', + class extends Component { + static props = { + name: props.string + }; + render({ name }) { + return Hello, {name}!; + } } - render ({ name }) { - return Hello, {name}!; - } -}); +); ``` -Now that the greeting component is rendered via Preact, when it renders, -it only changes the part of the DOM that requires updating. +Now that the greeting component is rendered via Preact, when it renders, it only +changes the part of the DOM that requires updating. ## Installing Skate @@ -248,8 +271,8 @@ To use Skate on its own, just add it to your `package.json`: npm install skatejs ``` -To use Skate with another front-end library, you'll want to install that library itself, -along with a Skate renderer for it. +To use Skate with another front-end library, you'll want to install that library +itself, along with a Skate renderer for it. ```sh npm install skatejs @skatejs/renderer-[renderer] [renderer] @@ -257,30 +280,34 @@ npm install skatejs @skatejs/renderer-[renderer] [renderer] Where `[renderer]` is one of: -- [@skatejs/renderer-lit-html](https://github.com/skatejs/renderer-lit-html) -- [@skatejs/renderer-preact](https://github.com/skatejs/renderer-preact) -- [@skatejs/renderer-react](https://github.com/skatejs/renderer-react) -- Or any custom renderer! +* [@skatejs/renderer-lit-html](https://github.com/skatejs/renderer-lit-html) +* [@skatejs/renderer-preact](https://github.com/skatejs/renderer-preact) +* [@skatejs/renderer-react](https://github.com/skatejs/renderer-react) +* Or any custom renderer! ## Polyfills -Skate builds upon the [Custom Elements](https://w3c.github.io/webcomponents/spec/custom/) and -[the Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) standards. Skate is -capable of operating without the Shadow DOM — it just means you don't get any -encapsulation of your component's HTML or styles. +Skate builds upon the +[Custom Elements](https://w3c.github.io/webcomponents/spec/custom/) and +[the Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) standards. +Skate is capable of operating without the Shadow DOM — it just means you +don't get any encapsulation of your component's HTML or styles. -Though most modern browsers support these standards, some still need polyfills to implement missing or inconsistent -behaviours for them. +Though most modern browsers support these standards, some still need polyfills +to implement missing or inconsistent behaviours for them. For more information on the polyfills, see [the web components polyfill documentation](https://github.com/webcomponents/webcomponentsjs). ## Browser Support -Skate supports all evergreens and IE11, and is subject to the browser support matrix of the polyfills. +Skate supports all evergreens and IE11, and is subject to the browser support +matrix of the polyfills. ## Backers -Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/skatejs#backer)] + +Support us with a monthly donation and help us continue our activities. +[[Become a backer](https://opencollective.com/skatejs#backer)] @@ -314,7 +341,9 @@ Support us with a monthly donation and help us continue our activities. [[Become ## Sponsors -Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/skatejs#sponsor)] + +Become a sponsor and get your logo on our README on Github with a link to your +site. [[Become a sponsor](https://opencollective.com/skatejs#sponsor)] diff --git a/package.json b/package.json index 6e43a8c2..9cbcac64 100644 --- a/package.json +++ b/package.json @@ -95,8 +95,8 @@ "lint-staged": "^4.0.2", "lit-html": "^0.7.1", "preact": "^8.2.5", - "prettier": "^1.7.4", - "prettier-eslint": "^8.2.1", + "prettier": "1.8.2", + "prettier-eslint": "^8.2.2", "prismjs": "^1.8.4", "raw-loader": "^0.5.1", "react": "^15.0.0", @@ -134,7 +134,7 @@ "test:watch": "jest --watch", "test:ts": "tsc -p ./", "types": "get-typed src/index.js --dest umd/skatejs", - "format": "prettier --write \"{src,test,site}/**/*.{js,ts,tsx,json}\"" + "format": "prettier --write \"**/*.{js,ts,tsx,json,md}\"" }, "jest": { "modulePathIgnorePatterns": [ @@ -169,7 +169,7 @@ "virtual" ], "lint-staged": { - "*.{ts,tsx,js,json}": [ + "*.{ts,tsx,js,json,md}": [ "prettier --write", "git add" ] diff --git a/site/components/code.js b/site/components/code.js index 01d40cc5..919ee5e2 100644 --- a/site/components/code.js +++ b/site/components/code.js @@ -135,9 +135,11 @@ export const Example = define( ${cssExample.host()} ${cssExample.title()} - ${this.title - ? `
${this.title}
` - : ''} + ${ + this.title + ? `
${this.title}
` + : '' + }
${this.html}
`; } diff --git a/site/pages/mixins/__samples__/with-children.js b/site/pages/mixins/__samples__/with-children.js index 5a097939..8870a69a 100644 --- a/site/pages/mixins/__samples__/with-children.js +++ b/site/pages/mixins/__samples__/with-children.js @@ -5,9 +5,9 @@ class WithChildren extends withChildren() { const len = this.children.length; this.attachShadow({ mode: 'open' - }).innerHTML = `This element has ${len} ${len === 1 - ? 'child' - : 'children'}!`; + }).innerHTML = `This element has ${len} ${ + len === 1 ? 'child' : 'children' + }!`; } } diff --git a/site/pages/mixins/index.js b/site/pages/mixins/index.js index a80605fc..f14b9c0b 100644 --- a/site/pages/mixins/index.js +++ b/site/pages/mixins/index.js @@ -14,9 +14,7 @@ export default component(function mixins() { definitions and compose them into one. It works well for custom elements because every element has a different purpose and it allows you to pick and choose what goes into it. It's also what lets you render one - component with - Preact - {' '} + component with Preact{' '} and maybe another with{' '} LitHTML. Each component is self-contained. diff --git a/site/pages/renderers/with-preact.js b/site/pages/renderers/with-preact.js index b828b252..99f67e31 100644 --- a/site/pages/renderers/with-preact.js +++ b/site/pages/renderers/with-preact.js @@ -15,9 +15,7 @@ export default component(function mixins() {

The{' '} - - Preact renderer - {' '} + Preact renderer{' '} allows you to render using{' '} Preact.

diff --git a/site/pages/renderers/with-react.js b/site/pages/renderers/with-react.js index aa23d07c..f08a2934 100644 --- a/site/pages/renderers/with-react.js +++ b/site/pages/renderers/with-react.js @@ -15,9 +15,7 @@ export default component(function mixins() {

The{' '} - - React renderer - {' '} + React renderer{' '} allows you to render using React.

diff --git a/site/utils/index.js b/site/utils/index.js index e1306064..ad0a5b26 100644 --- a/site/utils/index.js +++ b/site/utils/index.js @@ -1,3 +1,5 @@ +// @flow + import { h } from 'preact'; import { define, props, withComponent, withUpdate } from '../../src'; import withPreact from '@skatejs/renderer-preact'; diff --git a/src/with-update.js b/src/with-update.js index 8693deb7..45e4cb3a 100644 --- a/src/with-update.js +++ b/src/with-update.js @@ -111,12 +111,13 @@ export const withUpdate = (Base: Class = HTMLElement): Class => } get props(): Object { - return keys( - this.constructor.props - ).reduce((prev: Object, curr: string) => { - prev[curr] = (this: any)[curr]; - return prev; - }, {}); + return keys(this.constructor.props).reduce( + (prev: Object, curr: string) => { + prev[curr] = (this: any)[curr]; + return prev; + }, + {} + ); } set props(props: Object) { diff --git a/test/ts/mixins/with-children.tsx b/test/ts/mixins/with-children.tsx index e192bb2e..eb04f7c5 100644 --- a/test/ts/mixins/with-children.tsx +++ b/test/ts/mixins/with-children.tsx @@ -3,11 +3,9 @@ import { withChildren } from 'skatejs'; class WithChildren extends withChildren() { childrenUpdated() { const len = this.children.length; - this.attachShadow( - { mode: 'open' } - ).innerHTML = `This element has ${len} ${len === 1 - ? 'child' - : 'children'}!`; + this.attachShadow({ mode: 'open' }).innerHTML = `This element has ${len} ${ + len === 1 ? 'child' : 'children' + }!`; } }