add basic handling for window resize

routes/_components/virtualList/VirtualListItem.html

@@ -25,6 +25,7 @@
 <script>
   import { virtualListStore } from './virtualListStore'
   import { AsyncLayout } from '../../_utils/AsyncLayout'
+  import { registerResizeListener, unregisterResizeListener } from '../../_utils/resize'
 
   export default {
     oncreate() {
@@ -35,6 +36,11 @@
         // update all item heights in one batch for better perf
         this.store.batchUpdateForRealm('itemHeights', key, rect.height)
       })
+      this.doRecalculateHeight = this.doRecalculateHeight.bind(this)
+      registerResizeListener(this.doRecalculateHeight)
+    },
+    ondestroy() {
+      unregisterResizeListener(this.doRecalculateHeight)
     },
     store: () => virtualListStore,
     computed: {

routes/_utils/resize.js

@@ -0,0 +1,24 @@
+import debounce from 'lodash/debounce'
+
+const DEBOUNCE_DELAY = 700
+
+const listeners = new Set()
+
+if (process.browser && process.env.NODE_ENV !== 'production') {
+  window.resizeListeners = listeners
+}
+
+if (process.browser) {
+  window.addEventListener('resize', debounce(() => {
+    console.log('resize')
+    listeners.forEach(listener => listener())
+  }, DEBOUNCE_DELAY))
+}
+
+export function registerResizeListener (listener) {
+  listeners.add(listener)
+}
+
+export function unregisterResizeListener (listener) {
+  listeners.delete(listener)
+}