fix: move page-lifecycle and idb-getall-shim to dynamic modules (#804)

This would help with Rollup compat if we ever decided to switch to
Rollup

src/routes/_database/databaseLifecycle.js

@@ -15,10 +15,6 @@ import {
 } from './constants'
 import { addKnownInstance, deleteKnownInstance } from './knownInstances'
 
-if (process.browser) {
-  require('indexeddb-getall-shim') // needed for Edge
-}
-
 const openReqs = {}
 const databaseCache = {}
 

src/routes/_store/LocalStorageStore.js

@@ -1,10 +1,6 @@
 import { Store } from 'svelte/store'
 import { safeLocalStorage as LS } from '../_utils/safeLocalStorage'
-
+import { importPageLifecycle } from '../_utils/asyncModules'
-let lifecycle
-if (process.browser) {
-  lifecycle = require('page-lifecycle/dist/lifecycle.mjs').default
-}
 
 function safeParse (str) {
   return !str ? undefined : (str === 'undefined' ? undefined : JSON.parse(str))
@@ -35,11 +31,13 @@ export class LocalStorageStore extends Store {
       })
     })
     if (process.browser) {
-      lifecycle.addEventListener('statechange', e => {
+      importPageLifecycle().then(lifecycle => {
-        if (e.newState === 'passive') {
+        lifecycle.addEventListener('statechange', e => {
-          console.log('saving LocalStorageStore...')
+          if (e.newState === 'passive') {
-          this.save()
+            console.log('saving LocalStorageStore...')
-        }
+            this.save()
+          }
+        })
       })
     }
   }

src/routes/_utils/asyncModules.js

@@ -1,6 +1,8 @@
+const getDefault = mod => mod.default
+
 export const importTimeline = () => import(
   /* webpackChunkName: 'Timeline' */ '../_components/timeline/Timeline.html'
-  ).then(mod => mod.default)
+  ).then(getDefault)
 
 export const importIntersectionObserver = () => import(
   /* webpackChunkName: 'intersection-observer' */ 'intersection-observer'
@@ -14,22 +16,30 @@ export const importWebAnimationPolyfill = () => import(
   /* webpackChunkName: 'web-animations-js' */ 'web-animations-js'
   )
 
+export const importIndexedDBGetAllShim = () => import(
+  /* webpackChunkName: 'indexeddb-getall-shim' */ 'indexeddb-getall-shim'
+  )
+
+export const importPageLifecycle = () => import(
+  /* webpackChunkName: 'page-lifecycle' */ 'page-lifecycle/dist/lifecycle.mjs'
+  ).then(getDefault)
+
 export const importWebSocketClient = () => import(
   /* webpackChunkName: '@gamestdio/websocket' */ '@gamestdio/websocket'
-  ).then(mod => mod.default)
+  ).then(getDefault)
 
 export const importVirtualList = () => import(
   /* webpackChunkName: 'VirtualList.html' */ '../_components/virtualList/VirtualList.html'
-  ).then(mod => mod.default)
+  ).then(getDefault)
 
 export const importList = () => import(
   /* webpackChunkName: 'List.html' */ '../_components/list/List.html'
-  ).then(mod => mod.default)
+  ).then(getDefault)
 
 export const importStatusVirtualListItem = () => import(
   /* webpackChunkName: 'StatusVirtualListItem.html' */ '../_components/timeline/StatusVirtualListItem.html'
-  ).then(mod => mod.default)
+  ).then(getDefault)
 
 export const importNotificationVirtualListItem = () => import(
   /* webpackChunkName: 'NotificationVirtualListItem.html' */ '../_components/timeline/NotificationVirtualListItem.html'
-  ).then(mod => mod.default)
+  ).then(getDefault)

src/routes/_utils/loadPolyfills.js

@@ -1,4 +1,5 @@
 import {
+  importIndexedDBGetAllShim,
   importIntersectionObserver,
   importRequestIdleCallback,
   importWebAnimationPolyfill
@@ -8,6 +9,7 @@ export function loadPolyfills () {
   return Promise.all([
     typeof IntersectionObserver === 'undefined' && importIntersectionObserver(),
     typeof requestIdleCallback === 'undefined' && importRequestIdleCallback(),
-    !Element.prototype.animate && importWebAnimationPolyfill()
+    !Element.prototype.animate && importWebAnimationPolyfill(),
+    !IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim()
   ])
 }