@codelaw/rules-js 0.1.0 → 0.2.0

package/rules/react/rules-of-hooks.md

@@ -1,128 +0,0 @@
----
-id: react/rules-of-hooks
-title: "Hooks are called at the top level of components and hooks"
-languages: [javascript, jsx, typescript, tsx]
-fix: manual
-fix_reason: "moving a hook can change what the code does on the renders that skipped it"
-stability: preview
-ported_from: [eslint-plugin-react-hooks/rules-of-hooks]
-since: 0.1.0
----
-
-Hooks (`useState`, `useEffect`, any `use…`) are called only at the top level of a function component
-or a custom hook: not in conditions, loops, nested functions, after an early return, in classes, or
-in plain functions.
-
-**Why:** React matches hook calls to state by their order, so a hook that runs on some renders and
-not others mixes up every hook after it.
-
-```codelaw
-native: react/rules-of-hooks
-```
-
-## How to fix
-
-1. Move the hook call to the top level of the component or hook, before any early return.
-2. Put the condition inside the hook (e.g. inside the effect) instead of around it.
-
-## Examples
-
-### JavaScript
-
-#### Don't
-
-```js
-function Profile({ id }) {
-  if (!id) {
-    return null;
-  }
-  const [user] = useState(null);
-  return user;
-}
-```
-
-#### Do
-
-```js
-function Profile({ id }) {
-  const [user] = useState(null);
-  if (!id) {
-    return null;
-  }
-  return user;
-}
-```
-
-### JSX
-
-#### Don't
-
-```jsx
-function Profile({ id }) {
-  if (!id) {
-    return null;
-  }
-  const [user] = useState(null);
-  return user;
-}
-```
-
-#### Do
-
-```jsx
-function Profile({ id }) {
-  const [user] = useState(null);
-  if (!id) {
-    return null;
-  }
-  return user;
-}
-```
-
-### TypeScript
-
-#### Don't
-
-```ts
-function useProfile(id: string) {
-  if (!id) {
-    return null;
-  }
-  return useState(id);
-}
-```
-
-#### Do
-
-```ts
-function useProfile(id: string) {
-  const state = useState(id);
-  return id ? state : null;
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-function Profile({ id }) {
-  if (!id) {
-    return null;
-  }
-  const [user] = useState(null);
-  return user;
-}
-```
-
-#### Do
-
-```tsx
-function Profile({ id }) {
-  const [user] = useState(null);
-  if (!id) {
-    return null;
-  }
-  return user;
-}
-```

package/rules/stencil/ban-default-true.md

@@ -1,70 +0,0 @@
----
-id: stencil/ban-default-true
-title: "A boolean @Prop defaults to false"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "inverting the prop renames it for every user"
-stability: preview
-ported_from: [stencil/ban-default-true]
-since: 0.1.0
----
-
-A `@Prop()` of a Stencil component doesn't default to `true`.
-
-**Why:** An HTML boolean attribute can only switch something on; a prop that starts `true` can't be
-turned off from markup.
-
-```codelaw
-native: stencil/ban-default-true
-```
-
-## How to fix
-
-1. Invert the prop's meaning so it defaults to `false` (e.g. `closable` → `hideClose`).
-2. Update the component's markup users.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** Shows the close button. */
-  @Prop() readonly closable = true;
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** Hides the close button. */
-  @Prop() readonly hideClose = false;
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** Shows the close button. */
-  @Prop() readonly closable = true;
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** Hides the close button. */
-  @Prop() readonly hideClose = false;
-}
-```

package/rules/stencil/ban-exported-const-enums.md

@@ -1,60 +0,0 @@
----
-id: stencil/ban-exported-const-enums
-title: "No exported const enums"
-languages: [typescript, tsx]
-fix: auto
-stability: preview
-ported_from: [stencil/ban-exported-const-enums]
-since: 0.1.0
----
-
-An exported enum is a plain `enum`, not a `const enum`.
-
-**Why:** A `const enum` is erased at compile time, so code that imports it from the built bundle
-finds nothing.
-
-```codelaw
-native: stencil/ban-exported-const-enums
-```
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-export const enum Size {
-  Small,
-  Large,
-}
-```
-
-#### Do
-
-```ts
-export enum Size {
-  Small,
-  Large,
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-export const enum Size {
-  Small,
-  Large,
-}
-```
-
-#### Do
-
-```tsx
-export enum Size {
-  Small,
-  Large,
-}
-```

package/rules/stencil/ban-prefix.md

@@ -1,76 +0,0 @@
----
-id: stencil/ban-prefix
-title: "A component tag doesn't use a reserved prefix"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "renaming a tag changes every page that uses it"
-stability: preview
-options:
-  prefixes: { type: "string[]", default: ["stencil", "stnl", "st"] }
-ported_from: [stencil/ban-prefix]
-since: 0.1.0
----
-
-A component's `tag` doesn't start with a prefix Stencil reserves (`stencil-`, `stnl-`, `st-` by
-default; the `prefixes` option changes the list).
-
-**Why:** Reserved prefixes may clash with Stencil's own elements.
-
-```codelaw
-native: stencil/ban-prefix
-```
-
-## How to fix
-
-1. Choose a prefix of your own and rename the tag.
-2. Update every usage of the element.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'stencil-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: 'stencil-card' })
-export class Card {
-  render() {
-    return null;
-  }
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'acme-card' })
-export class Card {
-  render() {
-    return null;
-  }
-}
-```

package/rules/stencil/decorators-context.md

@@ -1,61 +0,0 @@
----
-id: stencil/decorators-context
-title: "Stencil decorators only inside @Component classes"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "whether the class should be a component needs the author"
-stability: preview
-ported_from: [stencil/decorators-context]
-since: 0.1.0
----
-
-`@Prop`, `@State`, `@Element`, `@Method`, `@Watch`, `@Listen`, `@Event` and `@AttachInternals`
-appear only in a class decorated with `@Component`.
-
-**Why:** Outside a component Stencil ignores them, so the code silently does nothing.
-
-```codelaw
-native: stencil/decorators-context
-```
-
-## How to fix
-
-1. Make the class a `@Component`, or remove the Stencil decorators.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-export class Store {
-  @State() count = 0;
-}
-```
-
-#### Do
-
-```ts
-export class Store {
-  count = 0;
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-export class Store {
-  @State() count = 0;
-}
-```
-
-#### Do
-
-```tsx
-export class Store {
-  count = 0;
-}
-```

package/rules/stencil/host-data-deprecated.md

@@ -1,73 +0,0 @@
----
-id: stencil/host-data-deprecated
-title: "No hostData()"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "the attributes move into `render()` by hand"
-stability: preview
-ported_from: [stencil/host-data-deprecated]
-since: 0.1.0
----
-
-A component doesn't define `hostData()`.
-
-**Why:** `hostData()` is deprecated; the host element's attributes are set by rendering `<Host>`.
-
-```codelaw
-native: stencil/host-data-deprecated
-```
-
-## How to fix
-
-1. Render a `<Host>` element in `render()` with the attributes `hostData()` returned.
-2. Remove `hostData()`.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  hostData() {
-    return { class: 'card' };
-  }
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  render() {
-    return null;
-  }
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  hostData() {
-    return { class: 'card' };
-  }
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  render() {
-    return null;
-  }
-}
-```

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

@@ -1,69 +0,0 @@
----
-id: stencil/methods-must-be-public
-title: "@Method() members are public"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "whether the method is public API needs the author"
-stability: preview
-ported_from: [stencil/methods-must-be-public]
-since: 0.1.0
----
-
-A `@Method()` isn't marked `private` or `protected`.
-
-**Why:** A `@Method()` is part of the element's public API; hiding it in TypeScript contradicts
-that.
-
-```codelaw
-native: stencil/methods-must-be-public
-```
-
-## How to fix
-
-1. Remove `private`/`protected`, or remove `@Method()` if it isn't public API.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** Opens the card. */
-  @Method() private async open() {}
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  /** Opens the card. */
-  @Method() async open() {}
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** Opens the card. */
-  @Method() private async open() {}
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  /** Opens the card. */
-  @Method() async open() {}
-}
-```

package/rules/stencil/no-unused-watch.md

@@ -1,68 +0,0 @@
----
-id: stencil/no-unused-watch
-title: "@Watch watches a @Prop or @State"
-languages: [typescript, tsx]
-fix: manual
-fix_reason: "which member was meant needs the author"
-stability: preview
-ported_from: [stencil/no-unused-watch]
-since: 0.1.0
----
-
-`@Watch('name')` names a `@Prop` or `@State` of the same component.
-
-**Why:** Watching anything else never fires, so the handler is dead code.
-
-```codelaw
-native: stencil/no-unused-watch
-```
-
-## How to fix
-
-1. Correct the name to the @Prop or @State it should watch, or remove the watcher.
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  @State() open = false;
-  @Watch('opened') onOpen() {}
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  @State() open = false;
-  @Watch('open') onOpen() {}
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  @State() open = false;
-  @Watch('opened') onOpen() {}
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  @State() open = false;
-  @Watch('open') onOpen() {}
-}
-```

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

@@ -1,68 +0,0 @@
----
-id: stencil/own-methods-must-be-private
-title: "A component's own methods are private"
-languages: [typescript, tsx]
-fix: auto
-stability: preview
-ported_from: [stencil/own-methods-must-be-private]
-since: 0.1.0
----
-
-A method of a component that isn't a `@Method()`, a lifecycle method or `render()` is `private`.
-
-**Why:** Only `@Method()` members reach users of the element; a public own method suggests an API
-that isn't there.
-
-```codelaw
-native: stencil/own-methods-must-be-private
-```
-
-## Examples
-
-### TypeScript
-
-#### Don't
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  helper() {
-    return 1;
-  }
-}
-```
-
-#### Do
-
-```ts
-@Component({ tag: 'my-card' })
-export class Card {
-  private helper() {
-    return 1;
-  }
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  helper() {
-    return 1;
-  }
-}
-```
-
-#### Do
-
-```tsx
-@Component({ tag: 'my-card' })
-export class Card {
-  private helper() {
-    return 1;
-  }
-}
-```