Setup no-incompatible-property-type and remove no-unknown-property-co…

…nverter
runem · May 6, 2020 · 4d95d77 · 4d95d77
1 parent 72727bc
commit 4d95d77
Show file tree

Hide file tree

Showing 22 changed files with 1,862 additions and 1,600 deletions.
diff --git a/README.md b/README.md
@@ -1,48 +1,55 @@
-<h1 align="center">lit-analyzer</h1>
-<p align="center">
-  <b>Monorepo for tools that analyze lit-html templates</b></br>
-  <sub><sub>
-</p>
-
-<br />
-
-<p align="center">
+<h1 align="center">lit-analyzer</h1>
+<p align="center">
+  <b>Monorepo for tools that analyze lit-html templates</b></br>
+  <sub><sub>
+</p>
+
+<br />
+
+
+<p align="center">
 		<a href="https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin"><img alt="Downloads per Month" src="https://vsmarketplacebadge.apphb.com/downloads-short/runem.lit-plugin.svg?label=vscode-lit-plugin" height="20"/></a>
 <a href="https://www.npmjs.com/package/lit-analyzer"><img alt="Downloads per Month" src="https://img.shields.io/npm/dm/lit-analyzer.svg?label=lit-analyzer" height="20"/></a>
 <a href="https://www.npmjs.com/package/ts-lit-plugin"><img alt="Downloads per Month" src="https://img.shields.io/npm/dm/ts-lit-plugin.svg?label=ts-lit-plugin" height="20"/></a>
-<a href="https://github.com/runem/lit-analyzer/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/runem/lit-analyzer" height="20"/></a>
-	</p>
-
-This mono-repository consists of the following tools:
-
-- [**`vscode-lit-plugin`**](/packages/vscode-lit-plugin) VS Code plugin that adds syntax highlighting, type checking and code completion for lit-html.
-
-- [**`ts-lit-plugin`**](/packages/ts-lit-plugin) Typescript plugin that adds type checking and code completion to lit-html templates.
-
-- [**`lit-analyzer`**](/packages/lit-analyzer) CLI that analyzes lit-html templates in your code to validate html and type check bindings.
+<a href="https://github.com/runem/lit-analyzer/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/runem/lit-analyzer" height="20"/></a>
+	</p>
+
+
+This mono-repository consists of the following tools:
+
+- [**`vscode-lit-plugin`**](/packages/vscode-lit-plugin) VS Code plugin that adds syntax highlighting, type checking and code completion for lit-html.
+
+- [**`ts-lit-plugin`**](/packages/ts-lit-plugin) Typescript plugin that adds type checking and code completion to lit-html templates.
+
+- [**`lit-analyzer`**](/packages/lit-analyzer) CLI that analyzes lit-html templates in your code to validate html and type check bindings.
+
 
 [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#rules)
 
-## ➤ Rules
-
-You can find a list of all rules [here](https://github.com/runem/lit-analyzer/blob/master/docs/readme/rules.md).
+## ➤ Rules
+
+You can find a list of all rules [here](https://github.com/runem/lit-analyzer/blob/master/docs/readme/rules.md).
+
 
 [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#contributing)
 
-## ➤ Contributing
-
-If you are interested in contributing to this repository please read [`contributing.md`](/CONTRIBUTING.md)
+## ➤ Contributing
+
+If you are interested in contributing to this repository please read [`contributing.md`](/CONTRIBUTING.md)
+
 
 [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#contributors)
 
-## ➤ Contributors
-
-| [<img alt="Rune Mehlsen" src="https://avatars2.githubusercontent.com/u/5372940?s=460&v=4" width="100">](https://twitter.com/runemehlsen) | [<img alt="Andreas Mehlsen" src="https://avatars1.githubusercontent.com/u/6267397?s=460&v=4" width="100">](https://twitter.com/andreasmehlsen) | [<img alt="Peter Burns" src="https://avatars3.githubusercontent.com/u/1659?s=460&v=4" width="100">](https://twitter.com/rictic) | [<img alt="You?" src="https://joeschmoe.io/api/v1/random" width="100">](https://github.com/runem/lit-analyzer/blob/master/CONTRIBUTING.md) |
-| :--------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: |
-|                                             [Rune Mehlsen](https://twitter.com/runemehlsen)                                              |                                             [Andreas Mehlsen](https://twitter.com/andreasmehlsen)                                              |                                            [Peter Burns](https://twitter.com/rictic)                                            |                                 [You?](https://github.com/runem/lit-analyzer/blob/master/CONTRIBUTING.md)                                  |
+## ➤ Contributors
+
+
+| [<img alt="Rune Mehlsen" src="https://avatars2.githubusercontent.com/u/5372940?s=460&v=4" width="100">](https://twitter.com/runemehlsen) | [<img alt="Andreas Mehlsen" src="https://avatars1.githubusercontent.com/u/6267397?s=460&v=4" width="100">](https://twitter.com/andreasmehlsen) | [<img alt="Peter Burns" src="https://avatars3.githubusercontent.com/u/1659?s=460&v=4" width="100">](https://twitter.com/rictic) | [<img alt="You?" src="https://joeschmoe.io/api/v1/random" width="100">](https://github.com/runem/lit-analyzer/blob/master/CONTRIBUTING.md) |
+|:--------------------------------------------------:|:--------------------------------------------------:|:--------------------------------------------------:|:--------------------------------------------------:|
+| [Rune Mehlsen](https://twitter.com/runemehlsen)  | [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [Peter Burns](https://twitter.com/rictic)        | [You?](https://github.com/runem/lit-analyzer/blob/master/CONTRIBUTING.md) |
+
 
 [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#license)
 
-## ➤ License
-
-Licensed under [MIT](https://opensource.org/licenses/MIT).
+## ➤ License
+	
+Licensed under [MIT](https://opensource.org/licenses/MIT).
diff --git a/dev/src/my-element-1.ts b/dev/src/my-element-1.ts
@@ -3,12 +3,16 @@ import "./my-element-2";
 
 @customElement("my-element")
 export class MyElement extends LitElement {
-	@property({ attribute: "hello" }) test: number | undefined;
+	@property({ attribute: "hell>o" }) test: number | undefined;
 
-	@property({ type: String }) test2: number | undefined;
+	@property({ type: Date }) test2: number | undefined;
 
 	@internalProperty() internal: number | undefined;
 
+	static get observedAttributes() {
+		return ["this is a test", "testing"];
+	}
+
 	render() {
 		return html`
 			<my-tsconfig-element size="large"></my-tsconfig-element>

diff --git a/docs/readme/rules.md b/docs/readme/rules.md
@@ -43,7 +43,6 @@ Each rule can have severity of `off`, `warning` or `error`. You can toggle rules
 | Rule    | Description | Severity normal | Severity strict |
 | :------ | ----------- | --------------- | --------------- |
 | [no-incompatible-property-type](#-no-incompatible-property-type) | When using the @property decorator in Typescript, the property option `type` is checked against the declared property Typescript type | error | error |
-| [no-unknown-property-converter](#-no-unknown-property-converter) | LitElement provides default converters. For example 'Function' is not a valid default converter type for a LitElement-managed property. | error | error |
 | [no-invalid-attribute-name](#-no-invalid-attribute-name)         | When using the property option `attribute`, the value is checked to make sure it's a valid attribute name. | error | error |
 | [no-invalid-tag-name](#-no-invalid-tag-name)                     | When defining a custom element the tag name is checked to make sure it's valid. | error | error |
 
@@ -398,7 +397,15 @@ html`<input @input="${console.log}" />`
 
 #### 💞 no-incompatible-property-type
 
-When using the @property decorator in Typescript, the property option `type` is checked against the declared property Typescript type.
+This rule checks that LitElement-controlled properties are correctly configured in accordance with the default value converter.
+
+The following is a summary of what this rule does:
+
+1. The `type` given to the LitElement property configuration is checked against the actual Typescript type of the property.
+2. The default converter only accepts the types `String`, `Boolean`, `Number`, `Array` and `Object`, so all other values for `type` are considered warnings.
+3. The absence of a `type` is only considered a warning if the property is not assignable to the `string` type.
+
+This rule will not check for a given LitElement-controlled property if the property has custom converter configured.
 
 The following examples are considered warnings:
 
@@ -409,30 +416,7 @@ class MyElement extends LitElement {
   @property({type: Boolean}) count: number;
   @property({type: String}) disabled: boolean;
   @property({type: Object}) list: ListItem[];
-}
-```
-
-The following examples are not considered warnings:
-
-<!-- prettier-ignore -->
-```js
-class MyElement extends LitElement {
-  @property({type: String}) text: string;
-  @property({type: Number}) count: number;
-  @property({type: Boolean}) disabled: boolean;
-  @property({type: Array}) list: ListItem[];
-}
-```
-
-#### 👎 no-unknown-property-converter
-
-The default converter in LitElement only accepts `String`, `Boolean`, `Number`, `Array` and `Object`, so all other values for `type` are considered warnings. This check doesn't run if a custom converter is used.
-
-The following example is considered a warning:
 
-<!-- prettier-ignore -->
-```js
-class MyElement extends LitElement {
   static get properties () {
     return {
       callback: {
@@ -446,11 +430,16 @@ class MyElement extends LitElement {
 }
 ```
 
-The following example is not considered a warning:
+The following examples are not considered warnings:
 
 <!-- prettier-ignore -->
 ```js
 class MyElement extends LitElement {
+  @property({type: String}) text: string;
+  @property({type: Number}) count: number;
+  @property({type: Boolean}) disabled: boolean;
+  @property({type: Array}) list: ListItem[];
+
   static get properties () {
     return {
       callback: {
@@ -462,6 +451,7 @@ class MyElement extends LitElement {
       }
     }
   }
+
 }
 ```