Framework 7 backdrop remover and reopener when used with hot reload (HRM)

f7hotreload.js

export default function ($f7, reopenPopup = true) {
  if (module.hot) {
    module.hot.addStatusHandler(status => {
      if (status === 'idle') {
        const activePopup = document.querySelector('.modal-in')

        // next tick
        setTimeout(() => {
          // remove all popup backdrops if all popups are closed
          if (!document.querySelectorAll('.modal-in').length) {
            const popupBackdrop = document.querySelector('.popup-backdrop')
            if (popupBackdrop) {
              popupBackdrop.classList.remove('backdrop-in')
            }

            if (reopenPopup && activePopup && activePopup.id) {
              $f7.popup.open(`#${activePopup.id}`, false)
            }
          }
        }, 0)
      }
    })
  }
}

usage:

import f7hotreload from '@/helpers/f7hotreload'

with Framework7 Vue

mounted () {
...
    f7hotreload(this.$f7)
...
}

with vanilla js (not tested):

var app = new Framework7({
  on: {
    init: function () {
      f7hotreload(this.$f7)
    }
  }
})