🐛 BUG: HMR destroy scripts (and changes made) because they don't re-run on HMR update

[felixsanz]

What version of astro are you using?

v1.0.0-beta.42

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

Inserting scripts that make changes to the page (DOM), like this...

    <script is:inline>
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = `/themes/default.css`

      document.head.insertAdjacentElement('afterbegin', link)
    </script>

...are lost on HMR because HMR reloads the entire page and scripts are not re-run because they hasn't changed.

As discussed on discord, a solution could be a new directive like <script is:fixed> that re-runs the script on HMR and is stripped off on building. HMR algorithm should just re-run those scripts like if they were changed

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-rqmsac-zbs3uf

Participation

• I am willing to submit a pull request for this issue.

[natemoo-re]

Chatted about this on Discord. We probably need some way for authors to specify that they want certain scripts to rerun when HMR happens, unless we can find a way scope HMR updates to component boundaries.

Will need to discuss this with the team.

[tony-sull]

Community Call 6/21

• Could be really interesting to have an option to opt-out of HMR for live reload. This may also be one specific case we need to just recognize on the page and trigger a full reload when <script is:inline> is used

• Further discussion - It is worth keeping an eye on the value add of HMR vs. the cost of maintenance when it is often impacted by the use of specific features and component frameworks

• Could Vite's HMR APIs be a nice solution here?

[natemoo-re]

Marking this as closed by #3932. We'll now perform a full reload if scripts are present.