fix(devtools): make settable getters (computed) editable

[posva]

Supersedes and closes #3110 — thanks @waradu for the original implementation, whose commit is preserved here!

computed values with both get and set could not be edited from the pinia devtools inspector. This makes writable computeds editable while keeping getter-only computeds readonly.

Compared to #3110, the implementation is simplified: instead of tracking writable computeds in a _editableComputed set on the store (which required changes in store.ts, types.ts, and HMR syncing), writability is detected at runtime in the devtools code with isReadonly() on the raw computed ref:

function isWritableComputed(store: StoreGeneric, key: string) {
  const raw = toRaw(store)[key]
  return isRef(raw) && !isReadonly(raw)
}

This keeps the feature entirely within src/devtools/ and stays in sync after HMR by construction.

Also dropped two dead code paths from the original PR: the root inspector and component inspector getters entries are not editable (editable: false), so their edit handlers could never fire — and the root-inspector one would have written onto the pinia instance instead of the store.

Summary by CodeRabbit

• New Features

  • Devtools now identify writable computed store properties as editable.
  • Writable computed values can be updated directly through the devtools inspector.

• Bug Fixes

  • Improved inspector state editing to preserve correct behavior for writable computed properties.

• Tests

  • Updated the counter example to demonstrate a computed value that can be edited and recalculates its underlying state.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 759770e4-9824-46f4-8bf2-7067fd7fb5f8

📥 Commits

Reviewing files that changed from the base of the PR and between d715bda and 8ce7f52.

📒 Files selected for processing (4)

• packages/pinia/src/devtools/formatting.ts
• packages/pinia/src/devtools/plugin.ts
• packages/pinia/src/devtools/utils.ts
• packages/playground/src/stores/counterSetup.ts

---

📝 Walkthrough

Walkthrough

Pinia devtools now identify writable computed store properties, mark them editable, and write edits directly to those properties. The playground counter store demonstrates a computed value with a setter that updates its underlying state.

Changes

Writable computed devtools support

Layer / File(s)	Summary
Detect and edit writable computed properties packages/pinia/src/devtools/utils.ts, packages/pinia/src/devtools/formatting.ts, packages/pinia/src/devtools/plugin.ts	Adds writable-computed detection and uses it to expose editable getters and avoid redirecting their edits through $state.
Exercise writable computed store behavior packages/playground/src/stores/counterSetup.ts	Changes double to a typed computed value with a setter that writes state.n from the assigned value.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Devtools
  participant PiniaStore
  participant WritableComputedCheck
  participant InspectorEditor

  Devtools->>PiniaStore: Inspect getter
  PiniaStore->>WritableComputedCheck: Read raw property
  WritableComputedCheck-->>Devtools: Return writable status
  Devtools->>InspectorEditor: Mark writable getter editable
  InspectorEditor->>PiniaStore: Apply direct getter assignment

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: making writable computed getters editable in devtools.
Linked Issues check	✅ Passed	The PR enables editing for writable computed values while preserving readonly behavior for getter-only computeds, matching the linked issue.
Out of Scope Changes check	✅ Passed	The playground store change is support code for exercising the new writable computed behavior and no unrelated changes are shown.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/devtools-writable-computed

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.39%. Comparing base (97dff81) to head (8ce7f52).
⚠️ Report is 33 commits behind head on v4.

Additional details and impacted files

@@           Coverage Diff           @@
##               v4    #3151   +/-   ##
=======================================
  Coverage   89.39%   89.39%           
=======================================
  Files          10       10           
  Lines         415      415           
  Branches      120      120           
=======================================
  Hits          371      371           
  Misses         17       17           
  Partials       27       27           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.