vite icon indicating copy to clipboard operation
vite copied to clipboard

HMR doesn't update node attributes when Vue attribute stops being fallthrough

Open jez9999 opened this issue 1 year ago • 0 comments

Describe the bug

When a prop is added to a child component, if the parent was previously passing that prop through as a fallthrough attribute and defining it as a prop now means it is no longer a fallthrough attribute, the attribute is not removed by HMR upon the save of the child. For example:

Game.vue

            <Board
                :squares="game.history[game.stepNumber].squares"
                @cellClicked="(i) => handleClick(i)"
                foobar="baz"
            />

Board.vue

    const props = defineProps({
        squares: Array//,
        //foobar: String
    });

As foobar is not a prop, it is applied to the Board element's top-level div as a fallthrough attribute:

image

But, if I uncomment the prop in the Board component and save:

    const props = defineProps({
        squares: Array,
        foobar: String
    });

Some DOM is updated, but the fallthrough attribute is not removed:

image

A full refresh of the page, however, removes the attribute, indicating that the problem is with HMR.

Reproduction

Create parent and child element, add fallthrough attr in parent, then add it as prop to child and save

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 3.50 GB / 15.64 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (105.0.1343.33)
    Internet Explorer: 11.0.19041.1

Used Package Manager

npm

Logs

No response

Validations

jez9999 avatar Sep 10 '22 13:09 jez9999