Update to Framework7 v6

Author: nolimits4web

package-lock.json

@@ -112,13 +112,13 @@
     "Samsung >= 5"
   ],
   "dependencies": {
-    "dom7": "^2.1.3",
-    "framework7": "^5.5.4",
+    "dom7": "^3.0.0",
+    "framework7": "^6.0.3",
     "framework7-icons": "^3.0.0",
-    "framework7-react": "^5.5.4",
+    "framework7-react": "^6.0.3",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "workbox-precaching": "^5.1.1"
   },
   "devDependencies": {

package.json

@@ -1,7 +1,9 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React, { useState, useEffect, useRef } from 'react';
 import $ from 'dom7';
 
 import {
+  f7,
   App,
   Views,
   View,
@@ -20,6 +22,14 @@ const AppComponent = () => {
     previousTab.current = activeTab;
   }, [activeTab]);
 
+  useEffect(() => {
+    // Fix viewport scale on mobiles
+    if ((f7.device.ios || f7.device.android) && f7.device.standalone) {
+      const viewPortContent = document.querySelector('meta[name="viewport"]').getAttribute('content');
+      document.querySelector('meta[name="viewport"]').setAttribute('content', `${viewPortContent}, maximum-scale=1, user-scalable=no`);
+    }
+  }, []);
+
   // Framework7 Parameters
   const f7params = {
     name: 'App Store',
@@ -39,7 +49,7 @@ const AppComponent = () => {
     }
   }
   return (
-    <App params={f7params}>
+    <App {...f7params}>
 
       <Views tabs className="safe-areas">
         <Toolbar tabbar labels bottom>

src/components/App.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import Framework7React from 'framework7-react';
-import Framework7, { Device } from './framework7-custom';
+import Framework7 from './framework7-custom';
 
 import '../css/framework7-custom.less';
 import 'framework7-icons/css/framework7-icons.css';
@@ -13,12 +13,6 @@ import App from '../components/App';
 
 Framework7.use(Framework7React);
 
-// Fix viewport scale on mobiles
-if ((Device.ios || Device.android) && Device.standalone) {
-  const viewPortContent = document.querySelector('meta[name="viewport"]').getAttribute('content');
-  document.querySelector('meta[name="viewport"]').setAttribute('content', `${viewPortContent}, maximum-scale=1, user-scalable=no`);
-}
-
 // Mount React App
 ReactDOM.render(
   React.createElement(App),

src/js/app.js

@@ -1,8 +1,8 @@
 
-import Framework7, { Device, Request, Utils } from 'framework7/framework7-lite.esm';
+import Framework7 from 'framework7/lite';
 // import Appbar from 'framework7/components/appbar/appbar';
 // import Dialog from 'framework7/components/dialog/dialog';
-import Popup from 'framework7/components/popup/popup';
+import Popup from 'framework7/components/popup/';
 // import LoginScreen from 'framework7/components/login-screen/login-screen';
 // import Popover from 'framework7/components/popover/popover';
 // import Actions from 'framework7/components/actions/actions';
@@ -17,9 +17,9 @@ import Popup from 'framework7/components/popup/popup';
 // import VirtualList from 'framework7/components/virtual-list/virtual-list';
 // import ListIndex from 'framework7/components/list-index/list-index';
 // import Timeline from 'framework7/components/timeline/timeline';
-import Tabs from 'framework7/components/tabs/tabs';
+import Tabs from 'framework7/components/tabs/';
 // import Panel from 'framework7/components/panel/panel';
-import Card from 'framework7/components/card/card';
+import Card from 'framework7/components/card/';
 // import Chip from 'framework7/components/chip/chip';
 // import Form from 'framework7/components/form/form';
 // import Input from 'framework7/components/input/input';
@@ -40,8 +40,8 @@ import Card from 'framework7/components/card/card';
 // import Searchbar from 'framework7/components/searchbar/searchbar';
 // import Messages from 'framework7/components/messages/messages';
 // import Messagebar from 'framework7/components/messagebar/messagebar';
-import Swiper from 'framework7/components/swiper/swiper';
-import PhotoBrowser from 'framework7/components/photo-browser/photo-browser';
+import Swiper from 'framework7/components/swiper/';
+import PhotoBrowser from 'framework7/components/photo-browser/';
 // import Notification from 'framework7/components/notification/notification';
 // import Autocomplete from 'framework7/components/autocomplete/autocomplete';
 // import Tooltip from 'framework7/components/tooltip/tooltip';
@@ -52,7 +52,7 @@ import PhotoBrowser from 'framework7/components/photo-browser/photo-browser';
 // import Treeview from 'framework7/components/treeview/treeview';
 // import TextEditor from 'framework7/components/text-editor/text-editor';
 // import Elevation from 'framework7/components/elevation/elevation';
-import Typography from 'framework7/components/typography/typography';
+import Typography from 'framework7/components/typography/';
 
 Framework7.use([
   // Appbar,
@@ -111,4 +111,3 @@ Framework7.use([
 ]);
 
 export default Framework7;
-export { Device, Request, Utils };