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

@@ -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: {

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: () => ({

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,

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')
 }

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)
 }

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')
 }

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)
+}

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')
 }

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')
 }

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()

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 })
+  }
+}

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)

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)
+}

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)
 }

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()

src/routes/_store/observers/setupLoggedInObservers.js

@@ -1,15 +1,12 @@
-import { importLoggedInObservers } from '../../_utils/asyncModules'
+import { importLoggedInStoreExtensions } from '../../_utils/asyncModules'
-
-let observedOnce = false
 
 // 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
+// circular dependencies and also allows us to lazy load observers/computations
-// only needed when you're logged in.
+// that are only needed when you're logged in.
 export function setupLoggedInObservers (store) {
   store.observe('isUserLoggedIn', isUserLoggedIn => {
-    if (isUserLoggedIn && !observedOnce) {
+    if (isUserLoggedIn) {
-      importLoggedInObservers().then(loggedInObservers => loggedInObservers())
+      importLoggedInStoreExtensions()
-      observedOnce = true
     }
   })
 }

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)
   }

src/routes/_utils/asyncModules.js

@@ -24,9 +24,9 @@ export const importDatabase = () => import(
   /* webpackChunkName: 'database.js' */ '../_database/databaseApis.js'
 )
 
-export const importLoggedInObservers = () => import(
+export const importLoggedInStoreExtensions = () => import(
-  /* webpackChunkName: 'loggedInObservers.js' */ '../_store/observers/loggedInObservers.js'
+  /* webpackChunkName: 'loggedInStoreExtensions.js' */ '../_store/loggedInStoreExtensions.js'
-).then(getDefault)
+)
 
 export const importNavShortcuts = () => import(
   /* webpackChunkName: 'NavShortcuts' */ '../_components/NavShortcuts.html'

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 })