fix: make settable getters (computed) editable

[Waradu]

computed values with both get and set could not be edited from pinia devtools before.

Example:

export const useVolumeStore = defineStore("volumeStore", () => {
  const rawVolume = ref(0.5);

  const round = (val: number) => Math.round(val * 100000) / 100000;

  const volume = computed({
    get: () => rawVolume.value,
    set: (value: number) => {
      rawVolume.value = round(Math.max(0, Math.min(1, value)));
    },
  });

  const output = computed(() => {
    if (volume.value < 0.01) return 0;

    const pow = Math.pow(volume.value, 2);

    return round(pow);
  });

  return { volume, output };
});

This change makes writable getters (computed) editable in the devtools while keeping readonly computed values readonly.

Summary by CodeRabbit

Release Notes

• New Features
  • Pinia devtools inspector now enables direct editing of writable computed values.
• Enhancements
  • Improved computed getter editability detection in the devtools inspector.
  • Enhanced state editing validation and error handling for computed properties.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes introduce support for editing writable computed getters in Pinia stores through the devtools. A new _editableComputed set tracks which computed properties are non-readonly, enabling the devtools UI and plugin to identify and facilitate modifications to writable computed values while preventing edits to readonly ones.

Changes

Cohort / File(s)	Summary
Devtools Integration packages/pinia/src/devtools/formatting.ts, packages/pinia/src/devtools/plugin.ts	Updated getter editability determination to check store._editableComputed set instead of hardcoding to false. Added logic to editComponentState handler to validate and apply updates to writable computed getters with proper error handling.
Store Core & Types packages/pinia/src/store.ts, packages/pinia/src/types.ts	Introduced _editableComputed tracking set initialized during setup-store creation, populated based on isReadonly() checks of computed properties. Added type definition and HMR synchronization; hidden from devtools enumeration via internal properties list.

Sequence Diagram

sequenceDiagram
    participant User as Devtools User
    participant DevTools as Devtools UI
    participant Plugin as DevTools Plugin
    participant Store as Pinia Store
    participant Computed as Computed Getter

    User->>DevTools: Attempts to edit computed getter value
    DevTools->>Plugin: editComponentState(path=['getters', 'myComputed'], payload)
    Plugin->>Store: Validate: store._editableComputed.has('myComputed')?
    
    alt Is Writable Computed
        Store-->>Plugin: ✓ Found in _editableComputed
        Plugin->>Plugin: Disable timeline logging
        Plugin->>Computed: payload.set(newValue)
        Computed-->>Store: Update computed value
        Plugin->>Plugin: Re-enable timeline logging
        Plugin-->>DevTools: Success
        DevTools-->>User: Changes reflected
    else Is Readonly Computed
        Store-->>Plugin: ✗ Not found in _editableComputed
        Plugin-->>DevTools: Error toast (invalid path)
        DevTools-->>User: Edit rejected
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Computed dreams now editable and free,
No longer frozen in immutability,
We tracked which getters bend and sway,
While readonly ones stay firm in place today,
Devtools dances with computed grace! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: enabling settable computed getters to be editable in the devtools, which is reflected across all modified files.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/pinia/src/devtools/plugin.ts (1)

185-200: Consider marking editable getters in component inspector view.

The inspectComponent handler still shows all getters with editable: false (line 189). For consistency with the inspector state and to enable editing writable computed refs from the component panel, consider checking store._editableComputed here as well.

♻️ Suggested improvement

           if (store._getters && store._getters.length) {
             payload.instanceData.state.push({
               type: getStoreType(store.$id),
               key: 'getters',
-              editable: false,
+              editable: store._editableComputed?.size ? true : false,
               value: store._getters.reduce((getters, key) => {

Or more granularly, you'd need to restructure to pass individual getter editability, which would require changes to how getters are represented in the component state.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/pinia/src/devtools/plugin.ts` around lines 185 - 200, The getters
block always sets editable: false; update it to consider store._editableComputed
so writable computed refs appear editable in the inspector: when building the
getters entry pushed to payload.instanceData.state (the block that checks
store._getters and pushes an object with type: getStoreType(store.$id), key:
'getters'), set editable to true when store._editableComputed is present (or,
for finer granularity, derive editability per key from store._editableComputed
while preserving the current value-building logic using store._getters and
store[key]); adjust the payload shape accordingly if you choose per-key
editability.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/pinia/src/devtools/plugin.ts`:
- Around line 185-200: The getters block always sets editable: false; update it
to consider store._editableComputed so writable computed refs appear editable in
the inspector: when building the getters entry pushed to
payload.instanceData.state (the block that checks store._getters and pushes an
object with type: getStoreType(store.$id), key: 'getters'), set editable to true
when store._editableComputed is present (or, for finer granularity, derive
editability per key from store._editableComputed while preserving the current
value-building logic using store._getters and store[key]); adjust the payload
shape accordingly if you choose per-key editability.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0ca2a94c-42c8-4e1e-a0cb-caa2faa54ea8

📥 Commits

Reviewing files that changed from the base of the PR and between 97dff81 and ab7f8e1.

📒 Files selected for processing (4)

• packages/pinia/src/devtools/formatting.ts
• packages/pinia/src/devtools/plugin.ts
• packages/pinia/src/store.ts
• packages/pinia/src/types.ts