remove deprecated .observe() from components (#246)

routes/_components/Toast.html

@@ -44,7 +44,7 @@
   }
 </style>
 <script>
-  import { splice, push } from 'svelte-extras'
+  import { splice, push, observe } from 'svelte-extras'
 
   const TIME_TO_SHOW_TOAST = 5000
   const DELAY_BETWEEN_TOASTS = 1000
@@ -65,6 +65,7 @@
       messages: []
     }),
     methods: {
+      observe,
       push,
       splice,
       say (text) {

routes/_components/compose/ComposeAutosuggest.html

@@ -47,6 +47,7 @@
   import {
     searchAccountsByUsername as searchAccountsByUsernameInDatabase
   } from '../../_database/accountsAndRelationships'
+  import { observe } from 'svelte-extras'
 
   const SEARCH_RESULTS_LIMIT = 4
   const DATABASE_SEARCH_RESULTS_LIMIT = 30
@@ -107,6 +108,7 @@
       })
     },
     methods: {
+      observe,
       once,
       onClick (item) {
         this.fire('autosuggestItemSelected')

routes/_components/compose/ComposeBox.html

@@ -115,6 +115,7 @@
   import { postStatus, insertHandleForReply, setReplySpoiler, setReplyVisibility } from '../../_actions/compose'
   import { importShowComposeDialog } from '../dialog/asyncDialogs'
   import { classname } from '../../_utils/classname'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -191,6 +192,7 @@
       slide
     },
     methods: {
+      observe,
       async onClickPostButton () {
         let { sticky } = this.get()
         if (sticky) {

routes/_components/compose/ComposeContentWarning.html

@@ -17,6 +17,7 @@
   import { store } from '../../_store/store'
   import debounce from 'lodash-es/debounce'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -28,6 +29,7 @@
       rawText: ''
     }),
     methods: {
+      observe,
       setupSyncFromStore () {
         this.observe('contentWarning', contentWarning => {
           this.set({rawText: contentWarning})

routes/_components/compose/ComposeInput.html

@@ -35,6 +35,7 @@
   import { selectionChange } from '../../_utils/events'
   import { clickSelectedAutosuggestionUsername } from '../../_actions/compose'
   import { clickSelectedAutosuggestionEmoji } from '../../_actions/emoji'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -46,6 +47,7 @@
       this.teardownAutosize()
     },
     methods: {
+      observe,
       setupSyncFromStore () {
         let textarea = this.refs.textarea
         let firstTime = true

routes/_components/compose/ComposeLengthGauge.html

@@ -22,6 +22,7 @@
   import { mark, stop } from '../../_utils/marks'
   import { store } from '../../_store/store'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -49,6 +50,9 @@
         let int = Math.round(Math.min(CHAR_LIMIT, length) / CHAR_LIMIT * 100)
         return (int - (int % 2)) / 100
       }
+    },
+    methods: {
+      observe
     }
   }
 </script>

routes/_components/compose/ComposeLengthIndicator.html

@@ -20,6 +20,7 @@
   import { mark, stop } from '../../_utils/marks'
   import { store } from '../../_store/store'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -48,6 +49,9 @@
           return `${lengthToDisplayDeferred} characters remaining`
         }
       }
+    },
+    methods: {
+      observe
     }
   }
 </script>

routes/_components/compose/ComposeMediaItem.html

@@ -79,6 +79,7 @@
   import { deleteMedia } from '../../_actions/media'
   import debounce from 'lodash-es/debounce'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -90,6 +91,7 @@
     }),
     store: () => store,
     methods: {
+      observe,
       setupSyncFromStore () {
         this.observe('mediaDescriptions', mediaDescriptions => {
           mediaDescriptions = mediaDescriptions || []

routes/_components/pseudoVirtualList/PseudoVirtualList.html

@@ -23,6 +23,7 @@
   import { getRectFromEntry } from '../../_utils/getRectFromEntry'
   import { mark, stop } from '../../_utils/marks'
   import { pseudoVirtualListStore } from './pseudoVirtualListStore'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -75,6 +76,7 @@
       }
     },
     methods: {
+      observe,
       scrollToPosition (element) {
         let { scrolledToPosition } = this.get()
         if (scrolledToPosition) {

routes/_components/pseudoVirtualList/PseudoVirtualListItem.html

@@ -14,6 +14,7 @@
 <script>
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { mark, stop } from '../../_utils/marks'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -48,6 +49,9 @@
         }
         return !isIntersecting && hide
       }
+    },
+    methods: {
+      observe
     }
   }
 </script>

routes/_components/status/StatusComposeBox.html

@@ -20,6 +20,7 @@
   import debounce from 'lodash-es/debounce'
   import throttle from 'lodash-es/throttle'
   import { on } from '../../_utils/eventBus'
+  import { observe } from 'svelte-extras'
 
   const DEBOUNCE_DELAY = 400
   const THROTTLE_DELAY = 150
@@ -34,6 +35,7 @@
       composeData: ($currentComposeData, originalStatusId) => $currentComposeData[originalStatusId] || {}
     },
     methods: {
+      observe,
       onPostedStatus (realm) {
         let { originalStatusId } = this.get()
         if (realm !== originalStatusId) {

routes/_components/timeline/Timeline.html

@@ -57,6 +57,7 @@
   import { mark, stop } from '../../_utils/marks'
   import isEqual from 'lodash-es/isEqual'
   import { doubleRAF } from '../../_utils/doubleRAF'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -150,6 +151,7 @@
       blurWithCapture
     },
     methods: {
+      observe,
       initialize () {
         let { initializeStarted } = this.get()
         if (initializeStarted) {

routes/_components/virtualList/VirtualList.html

@@ -32,6 +32,7 @@
   import throttle from 'lodash-es/throttle'
   import { mark, stop } from '../../_utils/marks'
   import isEqual from 'lodash-es/isEqual'
+  import { observe } from 'svelte-extras'
 
   const DISTANCE_FROM_BOTTOM_TO_FIRE = 800
   const SCROLL_EVENT_THROTTLE = 1000
@@ -108,6 +109,7 @@
       allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
     },
     methods: {
+      observe,
       calculateListOffset () {
         // TODO: better way to get the offset top?
         let node = this.refs.node

routes/_components/virtualList/VirtualListContainer.html

@@ -7,6 +7,7 @@
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { isMobile } from '../../_utils/isMobile'
   import { doubleRAF } from '../../_utils/doubleRAF'
+  import { observe } from 'svelte-extras'
 
   const SCROLL_EVENT_DELAY = 300
 
@@ -60,6 +61,7 @@
     },
     store: () => virtualListStore,
     methods: {
+      observe,
       setupScroll (node) {
         if (!node) {
           return

routes/_components/virtualList/VirtualListHeader.html

@@ -24,6 +24,7 @@
   import { virtualListStore } from './virtualListStore'
   import { doubleRAF } from '../../_utils/doubleRAF'
   import { mark, stop } from '../../_utils/marks'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -41,6 +42,7 @@
     }),
     store: () => virtualListStore,
     methods: {
+      observe,
       doCalculateHeight () {
         let { heightCalculated } = this.get()
         if (heightCalculated) { // only need to calculate once, it never changes