Where to start upgrading from 5.7 to 7.1

Questions
1

I’ve been sidelined since April '21 and I’m just getting back to my apps. The last builds were with 5.7.10. According to my forum posts, I was just starting the upgrade to 6.0 but that’s not reflected in any of the source code or existing builds.

Yesterday I downloaded 7.1.2, integrated it into a test app I have and got it all to load in the browser with no errors but nothing is displayed.

So, where do I start with the debugging process? Is there a better way to approach the upgrade?

BTW, I did make the root: #myapp to el: #myapp, I added in the create view() and the app and mainView variables are populated.

Thanks,

Phil

2

I recently dragged myself to migrate a decent-sized project from v5 to v7 (further complicated with also upgrading from Vue 2 to 3). As I wanted a stable base and isolate any breakages, I started with a clean install of v7 then brought my pages and components over one at a time. It actually didn’t take as long as expected to update the deprecated parts and get everything working again. Every project is different though…

3

Thanks for that. I didn’t figure it would be a huge lift. Problem is, the page that listed the breaking changes from 5->6 is gone so I can’t find those instructions.

I got the latest Kitchen Sink working with the 7.1.2 build but that means I have to go back through and find all the classes that have changed and whatever else there is that’s keeping even the menu bar from being rendered. Literally, all I get is a blank page unless I comment out F7 in which case the raw html gets loaded.

4
5

As deejay, linked, here’s the links to the doc: Migration from Framework7 v5 | Framework7 Documentation

You can get to any version of the docs by changing the subdomain to the version number. Might be worth @nolimits4web adding this to the footer (or somewhere) on the site.

6

Thanks. There are links on the blog for 6-7 but the 5-6 isn’t there and the other links I found are broken.

I’ve been through everything in the docs and have been comparing the Kitchen Sink to my test app and so far everything matches up but the router code isn’t even getting called, navbars and toolbars aren’t getting drawn… nothing is being displayed and I’m getting zero errors but all my console.log output is being displayed.

In my routes.js I have a redirect for “/” to “/home/” (in the real apps it handles the onboarding or login or home redirection) and inside that redirect: I have a console.log and debugger statement and it’s not being called so it looks like there’s zero attempt to even route to anything.

7

I’m using f7 version 7.1.2 and there are two problems:

Problem 1:
even with view-init set, you must still call app.init();

<div id="main" class="view view-main view-init safe-areas" data-master-detail-breakpoint="768" data-url="/">```

Problem 2:
In the routes table if you’re using redirect (which I do) as in:

redirect: function (to, resolve, reject) {
      // test for onboarding or logged out conditions here
      if(!user)
        to.resolve('/onboarding/');
      if(user.bLoggedIn)
        to.resolve('/home/');
      if(!user.bLoggedIn)
        to.resolve('/login/');
    }

According to the current docs (and the way it was working in 5.7) the parameters to the redirect function were (to, resolve, reject) like this:

redirect: function (to, resolve, reject) {...}

In reality, resolve and reject are undefined so you have to access the resolve() via to as in to.resolve(…).

8 
{ path: '/path-1/', redirect: (ctx) => ctx.resolve('/path-2/')     },
{ path: '/path-3/', redirect: ({ resolve }) => resolve('/path-4/') },