From dbd6c35a88b7f2cfa33714d19bd7ac0f1661155f Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 15 Dec 2018 17:13:40 -0800
Subject: [PATCH] perf: move indexeddb operations to async module (#813)

---
 src/routes/_database/asyncDatabase.js | 19 +++++++++++++++++++
 src/routes/_database/database.js      |  4 +++-
 src/routes/_database/database.prod.js |  2 ++
 src/routes/_utils/asyncModules.js     |  4 ++++
 webpack/client.config.js              |  4 ++++
 5 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/_database/asyncDatabase.js
 create mode 100644 src/routes/_database/database.prod.js

diff --git a/src/routes/_database/asyncDatabase.js b/src/routes/_database/asyncDatabase.js
new file mode 100644
index 00000000..c574a483
--- /dev/null
+++ b/src/routes/_database/asyncDatabase.js
@@ -0,0 +1,19 @@
+// All database functions are asynchronous, so we can just proxy here and
+// put an async import of the database, to avoid including it in the main bundle
+// (which doesn't need to run when the user isn't logged in).
+
+import { importDatabase } from '../_utils/asyncModules'
+
+const handler = {
+  get: function (obj, prop) {
+    return async function (...args) {
+      if (!obj[prop]) {
+        let database = await importDatabase()
+        obj[prop] = database[prop]
+      }
+      return obj[prop].apply(null, args)
+    }
+  }
+}
+
+export const asyncDatabase = new Proxy({}, handler)
diff --git a/src/routes/_database/database.js b/src/routes/_database/database.js
index 8c71c096..9a8eefc3 100644
--- a/src/routes/_database/database.js
+++ b/src/routes/_database/database.js
@@ -1,3 +1,5 @@
-// this used to be workerized, hence the API looks like this
+// The proxy stuff doesn't play well with IDEs, so use this as
+// the dev mode database.js, but swap out the other one in Webpack.
+
 import * as database from './databaseApis'
 export { database }
diff --git a/src/routes/_database/database.prod.js b/src/routes/_database/database.prod.js
new file mode 100644
index 00000000..de1569a9
--- /dev/null
+++ b/src/routes/_database/database.prod.js
@@ -0,0 +1,2 @@
+import { asyncDatabase } from './asyncDatabase'
+export { asyncDatabase as database }
diff --git a/src/routes/_utils/asyncModules.js b/src/routes/_utils/asyncModules.js
index 56af0b8f..c7ae0b32 100644
--- a/src/routes/_utils/asyncModules.js
+++ b/src/routes/_utils/asyncModules.js
@@ -47,3 +47,7 @@ export const importStatusVirtualListItem = () => import(
 export const importNotificationVirtualListItem = () => import(
   /* webpackChunkName: 'NotificationVirtualListItem.html' */ '../_components/timeline/NotificationVirtualListItem.html'
   ).then(getDefault)
+
+export const importDatabase = () => import(
+  /* webpackChunkName: 'database.js' */ '../_database/databaseApis.js'
+  )
diff --git a/webpack/client.config.js b/webpack/client.config.js
index 0754ef4c..fff28e32 100644
--- a/webpack/client.config.js
+++ b/webpack/client.config.js
@@ -60,6 +60,10 @@ module.exports = {
     }
   },
   plugins: [
+    new webpack.NormalModuleReplacementPlugin(
+      /\/_database\/database\.js$/, // this version plays nicer with IDEs
+      './database.prod.js'
+    ),
     new LodashModuleReplacementPlugin({
       paths: true
     })