@codelaw/rules-js 0.1.0 → 0.2.0

package/rules/stencil/own-props-must-be-private.md

@@ -1,60 +0,0 @@
----
-id: stencil/own-props-must-be-private
-title: "A component's own fields are private"
-languages: [typescript, tsx]
-fix: auto
-stability: preview
-ported_from: [stencil/own-props-must-be-private]
-since: 0.1.0
----
-
-A class field of a component without a Stencil decorator is `private`.
-
-**Why:** Only `@Prop()` fields reach users of the element; a public plain field suggests an API that
-isn't there.
-
-```codelaw
-native: stencil/own-props-must-be-private
-```
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  cache = new Map();
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  private cache = new Map();
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  cache = new Map();
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  private cache = new Map();
-}
-```

package/rules/stencil/prefer-vdom-listener.md

@@ -1,67 +0,0 @@
----
-id: stencil/prefer-vdom-listener
-title: "DOM events are handled in render(), not with @Listen"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "the handler moves into the rendered markup by hand"
-stability: preview
-ported_from: [stencil/prefer-vdom-listener]
-since: 0.1.0
----
-
-A component handles DOM events on itself (`click`, `keydown`, …) with an `on…` handler in
-`render()`, not `@Listen`; `@Listen` with a `target` is fine.
-
-**Why:** Handlers in `render()` are scoped to the element they're on and cheaper than a host-wide
-listener.
-
-```codelaw
-native: stencil/prefer-vdom-listener
-```
-
-## How to fix
-
-1. Attach the handler in `render()` (e.g. `onClick={…}` on `<Host>`).
-2. Remove the `@Listen`.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  @Listen('click') onClick() {}
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  @Listen('resize', { target: 'window' }) onResize() {}
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  @Listen('click') onClick() {}
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  @Listen('resize', { target: 'window' }) onResize() {}
-}
-```

package/rules/stencil/prop-readonly.md

@@ -1,63 +0,0 @@
----
-id: stencil/prop-readonly
-title: "@Prop() members are readonly unless mutable"
-languages: [typescript, tsx]
-fix: auto
-stability: preview
-ported_from: [stencil/props-must-be-readonly]
-since: 0.1.0
----
-
-A `@Prop()` is `readonly`, unless its options say `mutable: true`.
-
-**Why:** Props are set from outside; a component that writes one by accident fights its parent.
-
-```codelaw
-native: stencil/prop-readonly
-```
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading. */
-  @Prop() heading: string;
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading. */
-  @Prop() readonly heading: string;
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading. */
-  @Prop() heading: string;
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading. */
-  @Prop() readonly heading: string;
-}
-```

package/rules/stencil/props-must-be-public.md

@@ -1,68 +0,0 @@
----
-id: stencil/props-must-be-public
-title: "@Prop() members are public"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "whether the field is public API needs the author"
-stability: preview
-ported_from: [stencil/props-must-be-public]
-since: 0.1.0
----
-
-A `@Prop()` isn't marked `private` or `protected`.
-
-**Why:** A prop is set from outside the component; hiding it in TypeScript contradicts that.
-
-```codelaw
-native: stencil/props-must-be-public
-```
-
-## How to fix
-
-1. Remove `private`/`protected`, or make it a `@State()` if it is internal.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading. */
-  @Prop() private readonly heading: string;
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading. */
-  @Prop() readonly heading: string;
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading. */
-  @Prop() private readonly heading: string;
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading. */
-  @Prop() readonly heading: string;
-}
-```

package/rules/stencil/required-jsdoc.md

@@ -1,66 +0,0 @@
----
-id: stencil/required-jsdoc
-title: "Public members have JSDoc"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "the documentation text needs the author"
-stability: preview
-ported_from: [stencil/required-jsdoc]
-since: 0.1.0
----
-
-Every `@Prop()`, `@Method()` and `@Event()` has a `/** … */` comment.
-
-**Why:** Stencil turns these comments into the component's documentation and editor hints.
-
-```codelaw
-native: stencil/required-jsdoc
-```
-
-## How to fix
-
-1. Write a `/** … */` comment above the member saying what it is for.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  @Prop() readonly heading: string;
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading shown at the top. */
-  @Prop() readonly heading: string;
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  @Prop() readonly heading: string;
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The heading shown at the top. */
-  @Prop() readonly heading: string;
-}
-```

package/rules/stencil/reserved-member-names.md

@@ -1,70 +0,0 @@
----
-id: stencil/reserved-member-names
-title: "Public members don't reuse HTML element names"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "renaming a public member changes every user"
-stability: preview
-ported_from: [stencil/reserved-member-names]
-since: 0.1.0
----
-
-A `@Prop()` or `@Method()` isn't named after an HTML global attribute or an `HTMLElement` member
-(`title`, `hidden`, `id`, `click`, …).
-
-**Why:** The element already has a member of that name, so the component's version clashes with it.
-
-```codelaw
-native: stencil/reserved-member-names
-```
-
-## How to fix
-
-1. Rename the member.
-2. Update its users.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The card's title. */
-  @Prop() readonly title: string;
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The card's heading. */
-  @Prop() readonly heading: string;
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The card's title. */
-  @Prop() readonly title: string;
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The card's heading. */
-  @Prop() readonly heading: string;
-}
-```

package/rules/stencil/strict-mutable.md

@@ -1,75 +0,0 @@
----
-id: stencil/strict-mutable
-title: "mutable: true only on props the component changes"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "whether the component should change the prop needs the author"
-stability: preview
-ported_from: [stencil/strict-mutable]
-since: 0.1.0
----
-
-A `@Prop({ mutable: true })` is assigned somewhere in the component.
-
-**Why:** `mutable: true` says the component changes the prop; if it never does, the flag only hides
-that the prop should be `readonly`.
-
-```codelaw
-native: stencil/strict-mutable
-```
-
-## How to fix
-
-1. Remove `mutable: true` and make the prop `readonly`, or assign it where the component means to.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The count. */
-  @Prop({ mutable: true }) count = 0;
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The count. */
-  @Prop({ mutable: true }) count = 0;
-  private inc() {
-    this.count++;
-  }
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The count. */
-  @Prop({ mutable: true }) count = 0;
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** The count. */
-  @Prop({ mutable: true }) count = 0;
-  private inc() {
-    this.count++;
-  }
-}
-```

package/rules/stencil/tag-prefix.md

@@ -1,75 +0,0 @@
----
-id: stencil/tag-prefix
-title: "Component tags start with the project's prefix"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "renaming a tag changes every page that uses it"
-stability: preview
-options:
-  prefix: { type: string, default: "", description: "the prefix every tag must start with" }
-since: 0.1.0
----
-
-Every component's `tag` starts with the project's prefix (the `prefix` option); with no prefix set,
-a tag still needs one.
-
-**Why:** One prefix keeps a project's elements apart from other libraries'.
-
-```codelaw
-native: stencil/tag-prefix
-```
-
-## How to fix
-
-1. Rename the tag to start with the project's prefix.
-2. Update every usage of the element.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'card' })
-export class Card {
-  render() {
-    return null;
-  }
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'acme-card' })
-export class Card {
-  render() {
-    return null;
-  }
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'card' })
-export class Card {
-  render() {
-    return null;
-  }
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'acme-card' })
-export class Card {
-  render() {
-    return null;
-  }
-}
-```

package/rules/ts/ban-ts-comment.md

@@ -1,64 +0,0 @@
----
-id: ts/ban-ts-comment
-title: "No @ts-ignore or @ts-nocheck; @ts-expect-error says why"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "the reason the error is expected has to come from the author"
-stability: preview
-ported_from: [typescript-eslint/ban-ts-comment]
-since: 0.1.0
----
-
-Type-checking is never switched off with `@ts-ignore` or `@ts-nocheck`, and a `@ts-expect-error`
-says why the error is expected.
-
-**Why:** `@ts-ignore` hides an error for good, even after the code it excused changes; `@ts-expect-
-error` fails as soon as the error is gone.
-
-```codelaw
-match:
-  kind: comment
-  any:
-    - regex: ^(//|/\*)\s*@ts-(ignore|nocheck)\b
-    - regex: ^(//|/\*)\s*@ts-expect-error\s*(\*/)?$
-message: "Don't silence the compiler with `@ts-ignore` or `@ts-nocheck`; use `@ts-expect-error: <why>`"
-```
-
-## How to fix
-
-1. Fix the type error if you can.
-2. Otherwise replace the comment with `// @ts-expect-error: <why>`.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-// @ts-ignore
-const n: number = "1";
-```
-
-#### Do
-
-```ts
-// @ts-expect-error: the fixture checks the compiler's message
-const n: number = "1";
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-// @ts-ignore
-const n: number = "1";
-```
-
-#### Do
-
-```tsx
-// @ts-expect-error: the fixture checks the compiler's message
-const n: number = "1";
-```

package/rules/ts/no-array-constructor.md

@@ -1,58 +0,0 @@
----
-id: ts/no-array-constructor
-title: "No Array constructor with several arguments"
-languages: [typescript, tsx]
-fix: auto
-stability: preview
-ported_from: [typescript-eslint/no-array-constructor, eslint/no-array-constructor]
-since: 0.1.0
----
-
-Arrays are built with literals; `new Array(n)` with one argument (a length) is allowed.
-
-**Why:** `new Array(a, b)` and `new Array(n)` mean different things, and the literal says what it
-means.
-
-```codelaw
-match:
-  any:
-    - pattern: new Array($$$ARGS)
-    - pattern: Array($$$ARGS)
-  not:
-    any:
-      - pattern: new Array($ONE)
-      - pattern: Array($ONE)
-      - has: { field: type_arguments, pattern: $T }
-message: "Use an array literal instead of the Array constructor"
-fix: "[$$$ARGS]"
-```
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-const xs = new Array(1, 2, 3);
-```
-
-#### Do
-
-```ts
-const xs = [1, 2, 3];
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-const xs = new Array(1, 2, 3);
-```
-
-#### Do
-
-```tsx
-const xs = [1, 2, 3];
-```