HMR is not working in View (router)

1

I have just created a blank new project using F7 the newest version (5.7) with parcel bundler. HMR (hot module replacement) runs smooth and fast and when I make any change in the code it appears very quickly.

Unfortunately, code resides in the View component (routing) won’t get hot updated and to see the new changes you have to fully refresh the whole page.

For example:

const f7params = {
  name: 'name',
  id: 'bundle.id',
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about/',
      component: About,
    }
  ],
}

export default () => {
  return (
    <App params={f7params}>
      Hello World { + new Date() }
      <View main url="/" />
    </App>
  )
}

When changing the Hello World to Hello World 1, and changing something in the Home component and save both, only the Hello World will be changed to Hello World 1. If you want to see the changes in the Home component taking effect, you have to fully refresh.

index.js: 

import React from 'react';

import ReactDOM from 'react-dom';

import Framework7 from 'framework7/framework7-lite.esm.bundle.js';

import Framework7React from 'framework7-react';

import App from '../app/App';

import 'framework7/css/framework7.bundle.min.css';

import './index.css';

Framework7.use(Framework7React);

ReactDOM.render(

React.createElement(App),

document.getElementById('root')

);

if (module.hot) {

module.hot.accept()

}

// home.jsx 
import React from 'react'
import { Page, Link, Button } from 'framework7-react'
import './Home.css'

export default () => (
  <Page name="home">
    <h1 className="text-color-white">
      Home
    </h1>
    <Button fill href="/about/">
      hey11
    </Button>
  </Page>
)
2

This is also done with the smart select component:

    <List>
      <ListItem
        title="Fruit"
        smartSelect
        smartSelectParams={{
          openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search car'
        }}
      >
        <select name="fruits" defaultValue="apple" multiple>
          <option value="apple">Apple</option>
          <option value="pineapple">Pineapple</option>
          <option value="pear">Pear</option>
          <option value="orange">Orange</option>
          <option value="melon">Melon</option>
          <option value="peach">Peach</option>
          <option value="banana">Banana</option>
        </select>
      </ListItem>
    </List>

Any change will make the smart select to freeze and if you want to make it available to open again you should refresh the whole page.

3

Any update? I really love F7 and this is crucial to work.