From 038dc27163fc339d2c9f87c00e1534dbb7b96343 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 26 Sep 2019 05:23:36 -0700
Subject: [PATCH] perf: lazy-load computations (#1538)

* perf: lazy-load computations (experimental)

* fix lint

* add marks

* fixup

* lazy-load mixins too

* add missing files

* fix tests
---
 src/routes/_components/NavItem.html           |  2 +-
 .../_components/compose/LazyComposeBox.html   |  7 +++--
 .../_components/timeline/LazyTimeline.html    |  9 ++++---
 .../computations/autosuggestComputations.js   |  3 +++
 .../_store/computations/computations.js       |  4 ---
 .../computations/instanceComputations.js      |  4 +++
 .../computations/loggedInComputations.js      | 10 +++++++
 .../_store/computations/navComputations.js    |  6 +++++
 .../computations/timelineComputations.js      |  3 +++
 src/routes/_store/loggedInStoreExtensions.js  |  8 ++++++
 src/routes/_store/mixins/composeMixins.js     | 27 +++++++++++++++++++
 src/routes/_store/mixins/instanceMixins.js    | 26 ------------------
 src/routes/_store/mixins/loggedInMixins.js    | 12 +++++++++
 src/routes/_store/mixins/mixins.js            |  6 -----
 .../_store/observers/loggedInObservers.js     |  2 +-
 .../observers/setupLoggedInObservers.js       | 13 ++++-----
 src/routes/_store/store.js                    |  2 +-
 src/routes/_utils/asyncModules.js             |  6 ++---
 src/routes/share.html                         |  4 ++-
 19 files changed, 97 insertions(+), 57 deletions(-)
 create mode 100644 src/routes/_store/computations/loggedInComputations.js
 create mode 100644 src/routes/_store/loggedInStoreExtensions.js
 create mode 100644 src/routes/_store/mixins/composeMixins.js
 create mode 100644 src/routes/_store/mixins/loggedInMixins.js

diff --git a/src/routes/_components/NavItem.html b/src/routes/_components/NavItem.html
index 50d3ac58..7f0ca88a 100644
--- a/src/routes/_components/NavItem.html
+++ b/src/routes/_components/NavItem.html
@@ -144,7 +144,7 @@
         (name === 'notifications' && $hasNotifications) || (name === 'community' && $hasFollowRequests)
       ),
       badgeNumber: ({ name, $numberOfNotifications, $numberOfFollowRequests }) => (
-        (name === 'notifications' && $numberOfNotifications) || (name === 'community' && $numberOfFollowRequests)
+        (name === 'notifications' && $numberOfNotifications) || (name === 'community' && $numberOfFollowRequests) || 0
       )
     },
     methods: {
diff --git a/src/routes/_components/compose/LazyComposeBox.html b/src/routes/_components/compose/LazyComposeBox.html
index 15289e39..2d8edcf1 100644
--- a/src/routes/_components/compose/LazyComposeBox.html
+++ b/src/routes/_components/compose/LazyComposeBox.html
@@ -2,11 +2,14 @@
   <svelte:component this={composeBox} {realm} {hidden} />
 {/if}
 <script>
-  import { importComposeBox } from '../../_utils/asyncModules'
+  import { importComposeBox, importLoggedInStoreExtensions } from '../../_utils/asyncModules'
 
   export default {
     async oncreate () {
-      const composeBox = await importComposeBox()
+      const [composeBox] = await Promise.all([
+        importComposeBox(),
+        importLoggedInStoreExtensions()
+      ])
       this.set({ composeBox })
     },
     data: () => ({
diff --git a/src/routes/_components/timeline/LazyTimeline.html b/src/routes/_components/timeline/LazyTimeline.html
index 4f04e802..d644dc0e 100644
--- a/src/routes/_components/timeline/LazyTimeline.html
+++ b/src/routes/_components/timeline/LazyTimeline.html
@@ -10,18 +10,19 @@
 </style>
 <script>
   import { store } from '../../_store/store'
-  import { importTimeline } from '../../_utils/asyncModules'
+  import { importLoggedInStoreExtensions, importTimeline } from '../../_utils/asyncModules'
 
   export default {
     async oncreate () {
       console.log('LazyTimeline oncreate')
       const { currentInstance } = this.store.get()
       const { timeline } = this.get()
+      const [timelineComponent] = await Promise.all([
+        importTimeline(),
+        importLoggedInStoreExtensions()
+      ])
       this.store.set({ currentTimeline: timeline })
       this.store.setForTimeline(currentInstance, timeline, { runningUpdate: false })
-      console.log('importing timeline')
-      const timelineComponent = await importTimeline()
-      console.log('imported timeline')
       this.set({ timelineComponent })
     },
     store: () => store,
diff --git a/src/routes/_store/computations/autosuggestComputations.js b/src/routes/_store/computations/autosuggestComputations.js
index 70ca3d13..9a9328eb 100644
--- a/src/routes/_store/computations/autosuggestComputations.js
+++ b/src/routes/_store/computations/autosuggestComputations.js
@@ -1,4 +1,5 @@
 import { get } from '../../_utils/lodash-lite'
+import { mark, stop } from '../../_utils/marks'
 
 const MIN_PREFIX_LENGTH = 2
 // Technically mastodon accounts allow dots, but it would be weird to do an autosuggest search if it ends with a dot.
@@ -17,6 +18,7 @@ function computeForAutosuggest (store, key, defaultValue) {
 }
 
 export function autosuggestComputations (store) {
+  mark('autosuggestComputations')
   computeForAutosuggest(store, 'composeFocused', false)
   computeForAutosuggest(store, 'composeSelectionStart', 0)
   computeForAutosuggest(store, 'autosuggestSelected', 0)
@@ -59,4 +61,5 @@ export function autosuggestComputations (store) {
       !!(composeFocused && autosuggestSearchText && autosuggestNumSearchResults)
     )
   )
+  stop('autosuggestComputations')
 }
diff --git a/src/routes/_store/computations/computations.js b/src/routes/_store/computations/computations.js
index d3ba9269..0888cc28 100644
--- a/src/routes/_store/computations/computations.js
+++ b/src/routes/_store/computations/computations.js
@@ -1,11 +1,7 @@
 import { instanceComputations } from './instanceComputations'
-import { timelineComputations } from './timelineComputations'
 import { navComputations } from './navComputations'
-import { autosuggestComputations } from './autosuggestComputations'
 
 export function computations (store) {
   instanceComputations(store)
-  timelineComputations(store)
   navComputations(store)
-  autosuggestComputations(store)
 }
diff --git a/src/routes/_store/computations/instanceComputations.js b/src/routes/_store/computations/instanceComputations.js
index 5d9ab9d3..43a9069d 100644
--- a/src/routes/_store/computations/instanceComputations.js
+++ b/src/routes/_store/computations/instanceComputations.js
@@ -1,4 +1,5 @@
 import { DEFAULT_THEME } from '../../_utils/themeEngine'
+import { mark, stop } from '../../_utils/marks'
 
 function computeForInstance (store, computedKey, key, defaultValue) {
   store.compute(computedKey,
@@ -7,6 +8,7 @@ function computeForInstance (store, computedKey, key, defaultValue) {
 }
 
 export function instanceComputations (store) {
+  mark('instanceComputations')
   computeForInstance(store, 'currentTheme', 'instanceThemes', DEFAULT_THEME)
   computeForInstance(store, 'currentVerifyCredentials', 'verifyCredentials', null)
   computeForInstance(store, 'currentInstanceInfo', 'instanceInfos', null)
@@ -59,4 +61,6 @@ export function instanceComputations (store) {
       (currentInstanceInfo && currentInstanceInfo.max_toot_chars) || 500
     )
   )
+
+  stop('instanceComputations')
 }
diff --git a/src/routes/_store/computations/loggedInComputations.js b/src/routes/_store/computations/loggedInComputations.js
new file mode 100644
index 00000000..39072659
--- /dev/null
+++ b/src/routes/_store/computations/loggedInComputations.js
@@ -0,0 +1,10 @@
+// like loggedInObservers.js, these can be lazy-loaded once the user is actually logged in
+import { timelineComputations } from './timelineComputations'
+import { autosuggestComputations } from './autosuggestComputations'
+
+import { store } from '../store'
+
+export function loggedInComputations () {
+  timelineComputations(store)
+  autosuggestComputations(store)
+}
diff --git a/src/routes/_store/computations/navComputations.js b/src/routes/_store/computations/navComputations.js
index f5417bcc..3d383414 100644
--- a/src/routes/_store/computations/navComputations.js
+++ b/src/routes/_store/computations/navComputations.js
@@ -1,4 +1,8 @@
+import { mark, stop } from '../../_utils/marks'
+
 export function navComputations (store) {
+  mark('navComputations')
+
   store.compute(
     'pinnedListTitle',
     ['lists', 'pinnedPage'],
@@ -89,4 +93,6 @@ export function navComputations (store) {
       ]
     }
   )
+
+  stop('navComputations')
 }
diff --git a/src/routes/_store/computations/timelineComputations.js b/src/routes/_store/computations/timelineComputations.js
index 8496d01a..e2e13832 100644
--- a/src/routes/_store/computations/timelineComputations.js
+++ b/src/routes/_store/computations/timelineComputations.js
@@ -9,6 +9,7 @@ import {
   NOTIFICATION_POLLS,
   NOTIFICATION_MENTIONS
 } from '../../_static/instanceSettings'
+import { mark, stop } from '../../_utils/marks'
 
 function computeForTimeline (store, key, defaultValue) {
   store.compute(key,
@@ -45,6 +46,7 @@ function computeNotificationFilter (store, computationName, key) {
 }
 
 export function timelineComputations (store) {
+  mark('timelineComputations')
   computeForTimeline(store, 'timelineItemSummaries', null)
   computeForTimeline(store, 'timelineItemSummariesToAdd', null)
   computeForTimeline(store, 'runningUpdate', false)
@@ -191,4 +193,5 @@ export function timelineComputations (store) {
     ['numberOfFollowRequests'],
     (numberOfFollowRequests) => !!numberOfFollowRequests
   )
+  stop('timelineComputations')
 }
diff --git a/src/routes/_store/loggedInStoreExtensions.js b/src/routes/_store/loggedInStoreExtensions.js
new file mode 100644
index 00000000..166a0fd3
--- /dev/null
+++ b/src/routes/_store/loggedInStoreExtensions.js
@@ -0,0 +1,8 @@
+import { loggedInComputations } from './computations/loggedInComputations'
+import { loggedInObservers } from './observers/loggedInObservers'
+import { loggedInMixins } from './mixins/loggedInMixins'
+
+console.log('imported logged in observers and computations')
+loggedInMixins()
+loggedInComputations()
+loggedInObservers()
diff --git a/src/routes/_store/mixins/composeMixins.js b/src/routes/_store/mixins/composeMixins.js
new file mode 100644
index 00000000..2502c5e6
--- /dev/null
+++ b/src/routes/_store/mixins/composeMixins.js
@@ -0,0 +1,27 @@
+import { get } from '../../_utils/lodash-lite'
+
+export function composeMixins (Store) {
+  Store.prototype.setComposeData = function (realm, obj) {
+    const { composeData, currentInstance } = this.get()
+    const instanceNameData = composeData[currentInstance] = composeData[currentInstance] || {}
+    instanceNameData[realm] = Object.assign(
+      instanceNameData[realm] || {},
+      { ts: Date.now() },
+      obj
+    )
+    this.set({ composeData })
+  }
+
+  Store.prototype.getComposeData = function (realm, key) {
+    const { composeData, currentInstance } = this.get()
+    return get(composeData, [currentInstance, realm, key])
+  }
+
+  Store.prototype.clearComposeData = function (realm) {
+    const { composeData, currentInstance } = this.get()
+    if (composeData && composeData[currentInstance]) {
+      delete composeData[currentInstance][realm]
+    }
+    this.set({ composeData })
+  }
+}
diff --git a/src/routes/_store/mixins/instanceMixins.js b/src/routes/_store/mixins/instanceMixins.js
index e07da488..b6d8a735 100644
--- a/src/routes/_store/mixins/instanceMixins.js
+++ b/src/routes/_store/mixins/instanceMixins.js
@@ -1,32 +1,6 @@
 import { get } from '../../_utils/lodash-lite'
 
 export function instanceMixins (Store) {
-  Store.prototype.setComposeData = function (realm, obj) {
-    const { composeData, currentInstance } = this.get()
-    const instanceNameData = composeData[currentInstance] = composeData[currentInstance] || {}
-    instanceNameData[realm] = Object.assign(
-      instanceNameData[realm] || {},
-      { ts: Date.now() },
-      obj
-    )
-    this.set({ composeData })
-  }
-
-  Store.prototype.getComposeData = function (realm, key) {
-    const { composeData, currentInstance } = this.get()
-    return composeData[currentInstance] &&
-      composeData[currentInstance][realm] &&
-      composeData[currentInstance][realm][key]
-  }
-
-  Store.prototype.clearComposeData = function (realm) {
-    const { composeData, currentInstance } = this.get()
-    if (composeData && composeData[currentInstance]) {
-      delete composeData[currentInstance][realm]
-    }
-    this.set({ composeData })
-  }
-
   Store.prototype.getInstanceSetting = function (instanceName, settingName, defaultValue) {
     const { instanceSettings } = this.get()
     return get(instanceSettings, [instanceName, settingName], defaultValue)
diff --git a/src/routes/_store/mixins/loggedInMixins.js b/src/routes/_store/mixins/loggedInMixins.js
new file mode 100644
index 00000000..2dfaf3ac
--- /dev/null
+++ b/src/routes/_store/mixins/loggedInMixins.js
@@ -0,0 +1,12 @@
+import { timelineMixins } from './timelineMixins'
+import { statusMixins } from './statusMixins'
+import { autosuggestMixins } from './autosuggestMixins'
+import { composeMixins } from './composeMixins'
+import { PinaforeStore as Store } from '../store'
+
+export function loggedInMixins () {
+  composeMixins(Store)
+  timelineMixins(Store)
+  statusMixins(Store)
+  autosuggestMixins(Store)
+}
diff --git a/src/routes/_store/mixins/mixins.js b/src/routes/_store/mixins/mixins.js
index 1c1b9231..e516a78c 100644
--- a/src/routes/_store/mixins/mixins.js
+++ b/src/routes/_store/mixins/mixins.js
@@ -1,11 +1,5 @@
-import { timelineMixins } from './timelineMixins'
 import { instanceMixins } from './instanceMixins'
-import { statusMixins } from './statusMixins'
-import { autosuggestMixins } from './autosuggestMixins'
 
 export function mixins (Store) {
   instanceMixins(Store)
-  timelineMixins(Store)
-  statusMixins(Store)
-  autosuggestMixins(Store)
 }
diff --git a/src/routes/_store/observers/loggedInObservers.js b/src/routes/_store/observers/loggedInObservers.js
index 0f8d4a82..faaad3c9 100644
--- a/src/routes/_store/observers/loggedInObservers.js
+++ b/src/routes/_store/observers/loggedInObservers.js
@@ -8,7 +8,7 @@ import { cleanup } from './cleanup'
 
 // These observers can be lazy-loaded when the user is actually logged in.
 // Prevents circular dependencies and reduces the size of main.js
-export default function loggedInObservers () {
+export function loggedInObservers () {
   instanceObservers()
   timelineObservers()
   notificationObservers()
diff --git a/src/routes/_store/observers/setupLoggedInObservers.js b/src/routes/_store/observers/setupLoggedInObservers.js
index 614635a5..f39a75aa 100644
--- a/src/routes/_store/observers/setupLoggedInObservers.js
+++ b/src/routes/_store/observers/setupLoggedInObservers.js
@@ -1,15 +1,12 @@
-import { importLoggedInObservers } from '../../_utils/asyncModules'
-
-let observedOnce = false
+import { importLoggedInStoreExtensions } from '../../_utils/asyncModules'
 
 // An observer that calls an observer... this is a bit weird, but it eliminates
-// circular dependencies and also allows us to lazy load observers that are
-// only needed when you're logged in.
+// circular dependencies and also allows us to lazy load observers/computations
+// that are only needed when you're logged in.
 export function setupLoggedInObservers (store) {
   store.observe('isUserLoggedIn', isUserLoggedIn => {
-    if (isUserLoggedIn && !observedOnce) {
-      importLoggedInObservers().then(loggedInObservers => loggedInObservers())
-      observedOnce = true
+    if (isUserLoggedIn) {
+      importLoggedInStoreExtensions()
     }
   })
 }
diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js
index 155dcf60..1ce7adc9 100644
--- a/src/routes/_store/store.js
+++ b/src/routes/_store/store.js
@@ -67,7 +67,7 @@ const nonPersistedState = {
 const state = Object.assign({}, persistedState, nonPersistedState)
 const keysToStoreInLocalStorage = new Set(Object.keys(persistedState))
 
-class PinaforeStore extends LocalStorageStore {
+export class PinaforeStore extends LocalStorageStore {
   constructor (state) {
     super(state, keysToStoreInLocalStorage)
   }
diff --git a/src/routes/_utils/asyncModules.js b/src/routes/_utils/asyncModules.js
index 85ce2303..4ed1c184 100644
--- a/src/routes/_utils/asyncModules.js
+++ b/src/routes/_utils/asyncModules.js
@@ -24,9 +24,9 @@ export const importDatabase = () => import(
   /* webpackChunkName: 'database.js' */ '../_database/databaseApis.js'
 )
 
-export const importLoggedInObservers = () => import(
-  /* webpackChunkName: 'loggedInObservers.js' */ '../_store/observers/loggedInObservers.js'
-).then(getDefault)
+export const importLoggedInStoreExtensions = () => import(
+  /* webpackChunkName: 'loggedInStoreExtensions.js' */ '../_store/loggedInStoreExtensions.js'
+)
 
 export const importNavShortcuts = () => import(
   /* webpackChunkName: 'NavShortcuts' */ '../_components/NavShortcuts.html'
diff --git a/src/routes/share.html b/src/routes/share.html
index 811d1969..3151019d 100644
--- a/src/routes/share.html
+++ b/src/routes/share.html
@@ -3,12 +3,13 @@
   import { store } from './_store/store'
   import { goto } from '../../__sapper__/client'
   import { decodeURIComponentWithPluses } from './_utils/decodeURIComponentWithPluses'
+  import { importLoggedInStoreExtensions } from './_utils/asyncModules'
 
   const SHARE_KEYS = ['title', 'text', 'url']
 
   export default {
     store: () => store,
-    oncreate () {
+    async oncreate () {
       const params = new URLSearchParams(location.search)
 
       const text = SHARE_KEYS
@@ -16,6 +17,7 @@
         .filter(Boolean)
         .join(' ')
 
+      await importLoggedInStoreExtensions()
       this.store.set({ openShareDialog: true })
       this.store.clearComposeData('dialog')
       this.store.setComposeData('dialog', { text })