Critic bugs about: React + Webpack + F7 Router


#1

Hey guys I have found some critical bugs about the implementation of F7 with React and bundled using Webpack. I have installed the project using the framework7 create --ui (CLI) and then chose React + Webpack.

It runs very good, however I have some questions:

  1. Why the back button on Android is block? 99% of Android users are using the back button on the actual device. Is this something that I can manage?
    I want to acheive: back button should back to previous page, unless there is a popup/smart select/etc… and in such a case it should close them, instead of moving back to the previous page.

  2. Hot module replacement doesn’t working. It should save the changes without refreshing the whole webpage. Is there a fix for this? (Again, I am using the project that was created using the F7’s CLI).

  3. Router should allow to navigate through the URL, and save the page’s path, like this:
    http://localhost:8080/
    http://localhost:8080/about
    http://localhost:8080/contact
    So by the time I visit the about page with a deep link, it will be rendered. Also, after refreshing in development webpack server, I don’t want to each time navigate manually to the desired route, it should be automatic, based on the URL, that means that if I am editing about page and saving the changes, or refresh manually, it should be back to about, not to the starter point of the whole app.

  4. Swiper slide doesn’t working as it should be.
    It should be expanded to the full width and height of the page and text should be resided in the middle and center of the slide. Instead, the behaviour is: one liner slide that doesn’t gets the full height of the page, text in the slide is aligned to a side, instead of center.
    Also, I have tried to: <Swiper params={{effect: "fade"}}>... but that doesn’t work - anything I pass through the params to the Swiper is not working - like the Swiper ignores the params.

Hope that all of those things will be fixed ASAP, since those things can make F7 much much better.
It is hard to develop when on every save you back to the starter page and the whole webpage is getting refreshed!

Thanks.


#2

It is not, check the cordova-app.js file in generated project and tweak its behavior as you need it

It allows, check View’s pushState parameters, but don’t use it in Cordova

Why is that it should work like that? If you need it like so, then just set required width/height and other required styles

You did something wrong, it works. Otherwise, would be good to see JSFiddle

It is ideally, but due how F7’s router works it is more WebPack issue rather than F7’s and it is not critical and you can tweak webpack settings


#3

Thanks for your help.

Are you familiar with this issue? Can you help me to fix this maybe?


#4

I have tested, and when there is this: Framework7.use(Framework7React); in the code, it forces refreshes. Without this, the HMR works just fine.

Do you know how to fix this?


#5

The only way I found to solve this, is by starting with the Framework7.use(Framework7React);
and then comment it out and then HMR is working. However, if I refresh the webpage, I should do this process over again. That means that there problem with this line for sure.