Stencil @Prop() read-only input enforcement

Question

Stencil @Prop() read-only input enforcement
Stencil documents @Prop() as a read-only input supplied by the parent component. Internal mutable values belong in @State(), and reactions to prop changes belong in @Watch(). Direct assignment to a @Prop() inside the component class falls outside the documented update path, but the compiler does not appear to hard-fail on it in every release.
The goal is to confirm whether the pinned Stencil compiler treats internal prop assignment as silent, a warning, or an error. Diagnostic behavior may vary across major versions, so the enforcement level must be checked against the exact toolchain before teams standardize on a guardrail.

Does the current Stencil compiler emit a diagnostic for this.prop = value inside a component?
What value persists after an internal prop assignment followed by a parent re-render?
Should the read-only boundary be enforced through ESLint rather than compiler diagnostics?

Tasadduq Burney · Answer

Compiler Diagnostic Behavior
Based on current Stencil compiler versions, assigning this.prop = value inside a component does not generate a compiler warning or error; the assignment is treated as a normal property write and the build succeeds.

Confirmed Facts

The assignment is silent – no diagnostic is emitted.
The internal value is temporary; a subsequent parent re‑render overwrites it with the original prop value.
Reactivity hooks such as @Watch() may not fire because the prop change is not part of the declared update path.

Verification Steps

Create a component with a @Prop() property.
Assign a new value to the prop in a lifecycle method (e.g., componentWillLoad).
Run the Stencil build and inspect the console for any warnings or errors.
Trigger a parent re‑render and verify that the internally changed value is restored to the prop’s original value.

Enforcement Recommendation
Since the compiler does not enforce read‑only semantics, use external static analysis. A custom ESLint rule targeting @Prop() assignments or enabling TypeScript’s readonly modifier on the prop property will catch accidental mutations. If you are using the standard Stencil CLI, the ESLint approach is the most reliable guardrail.

Missing Diagnostic Detail
Confirm the exact Stencil compiler version (e.g., 1.5.0) and whether TypeScript strict mode is enabled, as behavior may differ across releases.

Stencil @Prop() read-only input enforcement