@codelaw/rules-stencil 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2026 Arpit Arya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+SPDX-License-Identifier: MIT

package/NOTICE

@@ -0,0 +1,6 @@
+@codelaw/rules-stencil
+
+The rules are reimplementations written for codelaw. Their `ported_from:`
+fields name the @stencil/eslint-plugin rules (MIT License) whose documented
+behaviour they reproduce; no @stencil/eslint-plugin code or documentation text
+is included.

package/README.md

@@ -1,3 +1,41 @@
-# Temporary Holding Version
+# @codelaw/rules-stencil
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+codelaw's Stencil rules — one of codelaw's first-party rule packs
+([SR-RULE-PACKS](../../records/0101_rule-packs.md)). It ships on
+npm only, as `@codelaw/rules-stencil`; PyPI has no copy (L6 decision 11).
+
+```toml
+# codelaw.toml
+extends = ["codelaw:js/recommended", "codelaw:stencil/recommended"]
+preview = true   # every rule is `preview` until a corpus run promotes it
+```
+
+## Presets
+
+| preset | rules | ported from |
+|---|---|---|
+| `stencil/recommended` | 15 | @stencil/eslint-plugin 1.4.0 `recommended` — 15 of its 21 rules |
+| `stencil/conventions` | 1 | codelaw's starter catalogue: `stencil/tag-prefix` — opt in |
+
+Every rule is **reimplemented**, not vendored: the matchers, messages and docs
+are written fresh, and each rule's `ported_from:` names the source rule.
+
+## How the ports differ
+
+Every rule matches its source's documented behaviour on the source's own
+examples. Where codelaw differs, the rule's `## Differences from the source`
+section says so. The larger ones:
+
+| rule | difference |
+|---|---|
+| `stencil/tag-prefix` | with no `prefix` option set, a tag only needs some prefix |
+| `stencil/prop-readonly` | the starter id for upstream `props-must-be-readonly` |
+
+## Not ported, and why
+
+| rule | why |
+|---|---|
+| `stencil/async-methods`, `stencil/render-returns-host`, `stencil/single-export`, `stencil/strict-boolean-conditions` | need type information |
+| `stencil/element-type` | needs the component's tag mapped to its element type name |
+| `stencil/decorators-style` | layout: the formatter owns it |
+| `stencil/dependency-suggestions` | advisory, with no fixed check to port |

package/codelaw-pack.toml

@@ -0,0 +1,6 @@
+name = "@codelaw/rules-stencil"
+version = "0.1.0"
+min_codelaw = "0.1.0"
+languages = ["typescript", "tsx"]
+presets = ["stencil/recommended", "stencil/conventions"]
+description = "codelaw's Stencil rules, from @stencil/eslint-plugin; npm only (SR-RULE-PACKS)"

package/package.json

@@ -1,6 +1,16 @@
 {
   "name": "@codelaw/rules-stencil",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "codelaw's Stencil rules, from @stencil/eslint-plugin; npm only (SR-RULE-PACKS)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arpitarya/codelaw.git"
+  },
+  "homepage": "https://github.com/arpitarya/codelaw",
+  "keywords": [
+    "codelaw",
+    "codelaw-pack",
+    "lint-rules"
+  ]
+}

package/presets/stencil/conventions.toml

@@ -0,0 +1,4 @@
+description = "House conventions from codelaw's starter catalogue; opt in"
+
+[rules]
+"stencil/tag-prefix" = "error"

package/presets/stencil/recommended.toml

@@ -0,0 +1,18 @@
+description = "@stencil/eslint-plugin 1.4.0 recommended without its type-checked rules, reimplemented"
+
+[rules]
+"stencil/ban-default-true" = "error"
+"stencil/ban-exported-const-enums" = "error"
+"stencil/ban-prefix" = "error"
+"stencil/decorators-context" = "error"
+"stencil/host-data-deprecated" = "error"
+"stencil/methods-must-be-public" = "error"
+"stencil/no-unused-watch" = "error"
+"stencil/own-methods-must-be-private" = "error"
+"stencil/own-props-must-be-private" = "error"
+"stencil/prefer-vdom-listener" = "error"
+"stencil/prop-readonly" = "error"
+"stencil/props-must-be-public" = "error"
+"stencil/required-jsdoc" = "error"
+"stencil/reserved-member-names" = "error"
+"stencil/strict-mutable" = "error"

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

@@ -0,0 +1,70 @@
+---
+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

@@ -0,0 +1,60 @@
+---
+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

@@ -0,0 +1,76 @@
+---
+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

@@ -0,0 +1,61 @@
+---
+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

@@ -0,0 +1,73 @@
+---
+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

@@ -0,0 +1,69 @@
+---
+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

@@ -0,0 +1,68 @@
+---
+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

@@ -0,0 +1,68 @@
+---
+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;
+  }
+}
+```

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

@@ -0,0 +1,60 @@
+---
+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

@@ -0,0 +1,67 @@
+---
+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

@@ -0,0 +1,63 @@
+---
+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

@@ -0,0 +1,68 @@
+---
+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

@@ -0,0 +1,66 @@
+---
+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

@@ -0,0 +1,70 @@
+---
+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

@@ -0,0 +1,75 @@
+---
+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

@@ -0,0 +1,75 @@
+---
+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;
+  }
+}
+```