[🐞] Components inside layouts not updating after a client-side SPA navigation in dev mode.

TeddyLourson commented 1 year ago

Which component is affected?

Qwik Runtime

Describe the bug

In dev mode : Clicking on a Link tag disable hot reload on components imported inside a layout. (Updates in the layout itself works, changes in the active page works but changes in components imported in the layout won’t be shown in the browser). To get back to normal, you have to make a change to the layout’s HTML and then a change inside the components imported in the layout.

Note : This bug cannot be reproduced in the provided CodeSandbox (in the browser), you should try on your own dev server.

Reproduction

https://codesandbox.io/p/sandbox/tender-turing-ylwr7g

Steps to reproduce

Click one of the Link element. (Make sure it is a Link this does not apply to native a tags)
Make a change to a component imported inside the root layout and save.
The change is not applied.

System Info

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 64.34 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
    pnpm: 7.33.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 114.0.5735.133
    Safari: 16.1
  npmPackages:
    @builder.io/qwik: ^1.1.5 => 1.1.5 
    @builder.io/qwik-city: ^1.1.5 => 1.1.5 
    undici: 5.22.1 => 5.22.1 
    vite: 4.3.9 => 4.3.9

Additional Information

Note : This bug cannot be reproduced in the provided CodeSandbox (in the browser), you should try on your own dev server.

TeddyLourson commented 1 year ago

I recorded a video to show what’s going on on my side : HMR Bug However it’s using my own project here, but it’s very similar. The basic skeleton of the HTML is :

<html>
  <head>…</head>
  <body>
    <nav>
      <ul>
        <li>
          <Link>…</Link>
        </li>
        <!— Other Link tags —>
      </ul>
    </nav>
  </body>
</html>

TeddyLourson commented 1 year ago

@jordanw66 I just tried everything you said and confirm everything but I have something more to add.

If you navigate (using Link) then make a modification to a component imported into the layout, the change won't show up. Then if you update the layout directly (with the change still in the new imported component), there will be a little flash of the change and it will be removed again, this flash will continue until you make a new change to that component and save after what everything will work normally. (To try this you need to have your code editor next to the browser because it flashes and disappear)

Basically what you said on your last point, but you have to save a new change to the imported component for it to work normally or else you're getting flashes only.

TeddyLourson commented 1 year ago

@jordanw66 I just updated the title and description. Tell me if I need to change anything.

QwikDev / qwik