fix(components): better SSR support

nolimits4web · nolimits4web · commit 0e7b9e831a8d · 2021-02-15T19:23:27.000+03:00
diff --git a/src/react/shared/f7.js b/src/react/shared/f7.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-mutable-exports */
 import Framework7 from 'framework7/lite';
-import { extend } from './utils';
+import { extend, unsetRouterIds } from './utils';
 
 let f7;
 let f7events;
@@ -13,6 +13,16 @@ const f7routers = {
   modals: null,
 };
 
+const cleanup = () => {
+  unsetRouterIds();
+  delete theme.ios;
+  delete theme.md;
+  delete theme.aurora;
+  f7routers.views = [];
+  f7routers.tabs = [];
+  f7routers.modals = null;
+};
+
 const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
@@ -31,7 +41,10 @@ const f7init = (rootEl, params = {}, init = true) => {
     theme.aurora = device.desktop && device.electron;
     theme.md = !theme.ios && !theme.aurora;
   }
-  if (f7) return;
+  // eslint-disable-next-line
+  if (f7 && typeof window !== 'undefined') return;
+
+  cleanup();
 
   const instance = new Framework7(f7Params);
   f7 = instance;
diff --git a/src/react/shared/utils.js b/src/react/shared/utils.js
@@ -133,6 +133,11 @@ export function getExtraAttrs(props = {}) {
 let routerIdCounter = 0;
 let routerComponentIdCounter = 0;
 
+export function unsetRouterIds() {
+  routerIdCounter = 0;
+  routerComponentIdCounter = 0;
+}
+
 export function getRouterId() {
   routerIdCounter += 1;
   return `${now()}_${routerIdCounter}`;
diff --git a/src/svelte/shared/f7.js b/src/svelte/shared/f7.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-mutable-exports */
 // eslint-disable-next-line
 import Framework7 from 'framework7/lite';
-import { extend } from './utils';
+import { extend, unsetRouterIds } from './utils';
 
 let f7;
 let f7events;
@@ -14,6 +14,16 @@ const f7routers = {
   modals: null,
 };
 
+const cleanup = () => {
+  unsetRouterIds();
+  delete theme.ios;
+  delete theme.md;
+  delete theme.aurora;
+  f7routers.views = [];
+  f7routers.tabs = [];
+  f7routers.modals = null;
+};
+
 const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
@@ -32,7 +42,10 @@ const f7init = (rootEl, params = {}, init = true) => {
     theme.aurora = device.desktop && device.electron;
     theme.md = !theme.ios && !theme.aurora;
   }
-  if (f7) return;
+  // eslint-disable-next-line
+  if (f7 && typeof window !== 'undefined') return;
+
+  cleanup();
 
   const instance = new Framework7(f7Params);
   f7 = instance;
diff --git a/src/svelte/shared/utils.js b/src/svelte/shared/utils.js
@@ -91,6 +91,11 @@ export function createEmitter(createEventDispatcher, props) {
 let routerIdCounter = 0;
 let routerComponentIdCounter = 0;
 
+export function unsetRouterIds() {
+  routerIdCounter = 0;
+  routerComponentIdCounter = 0;
+}
+
 export function getRouterId() {
   routerIdCounter += 1;
   return `${now()}_${routerIdCounter}`;
diff --git a/src/vue/shared/f7.js b/src/vue/shared/f7.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-mutable-exports */
 import Framework7 from 'framework7/lite';
-import { extend } from './utils';
+import { extend, unsetRouterIds } from './utils';
 
 let f7;
 let f7events;
@@ -13,6 +13,16 @@ const f7routers = {
   modals: null,
 };
 
+const cleanup = () => {
+  unsetRouterIds();
+  delete theme.ios;
+  delete theme.md;
+  delete theme.aurora;
+  f7routers.views = [];
+  f7routers.tabs = [];
+  f7routers.modals = null;
+};
+
 const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
@@ -31,7 +41,10 @@ const f7init = (rootEl, params = {}, init = true) => {
     theme.aurora = device.desktop && device.electron;
     theme.md = !theme.ios && !theme.aurora;
   }
-  if (f7) return;
+  // eslint-disable-next-line
+  if (f7 && typeof window !== 'undefined') return;
+
+  cleanup();
 
   const instance = new Framework7(f7Params);
   f7 = instance;
diff --git a/src/vue/shared/utils.js b/src/vue/shared/utils.js
@@ -70,6 +70,11 @@ export function classNames(...args) {
 let routerIdCounter = 0;
 let routerComponentIdCounter = 0;
 
+export function unsetRouterIds() {
+  routerIdCounter = 0;
+  routerComponentIdCounter = 0;
+}
+
 export function getRouterId() {
   routerIdCounter += 1;
   return `${now()}_${routerIdCounter}`;
