Skip to content

fix(vue3): clear stale args/globals when nextArgs is empty in updateArgs#34327

Open
mixelburg wants to merge 1 commit intostorybookjs:nextfrom
mixelburg:fix/vue3-reactive-args-empty-nextargs
Open

fix(vue3): clear stale args/globals when nextArgs is empty in updateArgs#34327
mixelburg wants to merge 1 commit intostorybookjs:nextfrom
mixelburg:fix/vue3-reactive-args-empty-nextargs

Conversation

@mixelburg
Copy link
Copy Markdown
Contributor

@mixelburg mixelburg commented Mar 25, 2026

What does this PR do?

Fixes the bug where stale args/globals persisted in Vue decorators after resetting args or clearing toolbar globals.

When updateArgs() was called with an empty nextArgs object, the early return on line 156 skipped the deletion loop entirely. This left every existing key in reactiveArgs/reactiveGlobals alive, so resetting args or clearing toolbar globals back to {} had no effect on the Vue reactive objects.

Fix

Remove the early return so the deletion loop always runs. When nextArgs is {}, all keys in currentArgs are deleted, resulting in a properly empty reactive object.

Test

Added a regression test: updateArgs(reactive({ argFoo: 'foo', argBar: 'bar' }), {}) now results in an empty object.

Fixes #34319

Summary by CodeRabbit

Bug Fixes

  • Fixed Vue3 renderer to properly clear component arguments when updating with empty values. Previously, the renderer would skip processing updates if an empty object was provided. Now it correctly removes arguments not included in new values.

Tests

  • Added test coverage to verify argument clearing works correctly during updates.

When updateArgs() was called with an empty nextArgs object (e.g. when
resetting args or clearing toolbar globals), the early return left all
existing keys in reactiveArgs/reactiveGlobals intact. Stale values
would then persist in Vue decorators even after a reset.

Remove the early return so the deletion loop always runs, leaving the
reactive object empty when nextArgs is {}.

Fixes storybookjs#34319
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 25, 2026

📝 Walkthrough

Walkthrough

The updateArgs function in the Vue3 renderer was modified to remove an early-exit guard that prevented execution when nextArgs was empty. This allows the function to proceed through its logic and clear previously-held arguments when an empty object is passed. A new test verifies this behavior.

Changes

Cohort / File(s) Summary
Vue3 Renderer updateArgs Implementation
code/renderers/vue3/src/render.ts
Removed early-exit guard that returned when nextArgs had zero keys, enabling the function to clear existing reactive arguments when an empty object is provided.
Vue3 Renderer Tests
code/renderers/vue3/src/render.test.ts
Added new test case verifying that updateArgs(reactiveArgs, {}) clears reactive argument state entirely.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs


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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
code/renderers/vue3/src/render.test.ts (1)

94-98: Good regression test for the empty nextArgs fix.

The test correctly covers the scenario from issue #34319. One minor suggestion: consider using the generic type parameter pattern already established elsewhere in this file (lines 28, 42, 58) instead of the as any cast for better type safety.

♻️ Suggested type-safe alternative
  it('clears all args when nextArgs is empty -> updateArgs()', () => {
    const reactiveArgs = reactive({ argFoo: 'foo', argBar: 'bar' });
-   updateArgs(reactiveArgs, {} as any);
+   updateArgs<Args>(reactiveArgs, {});
    expect(reactiveArgs).toEqual({});
  });
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@code/renderers/vue3/src/render.test.ts` around lines 94 - 98, The test uses
an unsafe cast (`as any`) when calling updateArgs; replace that cast with the
generic type parameter pattern used elsewhere in this file by invoking
updateArgs with the inferred/explicit generic for the reactiveArgs variable
(e.g., use the same generic style as the other tests instead of `as any`) so the
call to updateArgs(reactiveArgs, ...) is type-safe; update the invocation that
references updateArgs and reactiveArgs to use the generic type parameter form.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@code/renderers/vue3/src/render.test.ts`:
- Around line 94-98: The test uses an unsafe cast (`as any`) when calling
updateArgs; replace that cast with the generic type parameter pattern used
elsewhere in this file by invoking updateArgs with the inferred/explicit generic
for the reactiveArgs variable (e.g., use the same generic style as the other
tests instead of `as any`) so the call to updateArgs(reactiveArgs, ...) is
type-safe; update the invocation that references updateArgs and reactiveArgs to
use the generic type parameter form.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d6869e50-8679-4dc5-a7ba-be406ffce20c

📥 Commits

Reviewing files that changed from the base of the PR and between 1c38a36 and e406caa.

📒 Files selected for processing (2)
  • code/renderers/vue3/src/render.test.ts
  • code/renderers/vue3/src/render.ts
💤 Files with no reviewable changes (1)
  • code/renderers/vue3/src/render.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: In Progress

Development

Successfully merging this pull request may close these issues.

Vue: Potential desync bug in reactive globals

2 participants