slightly improve Svelte 2.0 compatibility (#244)

* slightly improve Svelte 2.0 compatibility

* fixup

* fix lint

routes/_components/Avatar.html

@@ -74,6 +74,12 @@
       imgLoad,
       imgLoadError
     },
+    data: () => ({
+      className: void 0,
+      loaded: false,
+      error: void 0,
+      isLink: false
+    }),
     store: () => store,
     computed: {
       computedClass: (className, loaded, size) => (classname(

routes/_components/DynamicPageBanner.html

@@ -60,6 +60,9 @@
 </style>
 <script>
   export default {
+    data: () => ({
+      icon: void 0
+    }),
     methods: {
       onGoBack (e) {
         e.preventDefault()

routes/_components/ExternalLink.html

@@ -22,4 +22,11 @@
   .external-link-with-icon.normal-icon-color .external-link-svg {
     fill: var(--body-text-color);
   }
-</style>
+</style>
+<script>
+  export default {
+    data: () => ({
+      normalIconColor: false
+    })
+  }
+</script>

routes/_components/IconButton.html

@@ -105,6 +105,17 @@
   import { store } from '../_store/store'
 
   export default {
+    data: () => ({
+      big: false,
+      muted: false,
+      disabled: false,
+      svgClassName: void 0,
+      focusKey: void 0,
+      pressable: false,
+      pressed: false,
+      className: void 0,
+      delegateKey: void 0
+    }),
     store: () => store,
     computed: {
       computedClass: (pressable, pressed, big, muted, className) => {

routes/_components/LazyImage.html

@@ -45,6 +45,11 @@
       }
       img.src = src
       stop('LazyImage oncreate()')
-    }
+    },
+    data: () => ({
+      displaySrc: void 0,
+      hidden: false,
+      ariaHidden: false
+    })
   }
 </script>

routes/_components/LoadingPage.html

@@ -26,6 +26,9 @@
         this.set({shown: true})
       }, SPINNER_DELAY)
     },
+    data: () => ({
+      shown: false
+    }),
     components: {
       LoadingSpinner
     }

routes/_components/LoadingSpinner.html

@@ -1,5 +1,5 @@
 <svg class="loading-spinner-icon spin {{maskStyle ? 'mask-style' : ''}}"
-     style="width: {{size || 64}}px; height: {{size || 64}}px;"
+     style="width: {{size}}px; height: {{size}}px;"
      aria-label="Loading"
 >
   <use xlink:href="#fa-spinner" />
@@ -12,4 +12,12 @@
   .loading-spinner-icon.mask-style {
     fill: var(--mask-svg-fill);
   }
-</style>
+</style>
+<script>
+  export default {
+    data: () => ({
+      maskStyle: false,
+      size: 64
+    })
+  }
+</script>

routes/_components/compose/ComposeAutosuggest.html

@@ -107,7 +107,7 @@
       })
     },
     methods: {
-      once: once,
+      once,
       onClick (item) {
         this.fire('autosuggestItemSelected')
         let { realm } = this.get()
@@ -147,7 +147,7 @@
         if (!thisComposeFocused) {
           return
         }
-        let selectionStart = composeSelectionStartDeferred || 0
+        let selectionStart = composeSelectionStartDeferred
         if (!text || selectionStart < MIN_PREFIX_LENGTH) {
           return
         }
@@ -162,6 +162,10 @@
           searchResults.length)
       }
     },
+    data: () => ({
+      composeFocusedDeferred: void 0,
+      composeSelectionStartDeferred: 0
+    }),
     store: () => store,
     components: {
       ComposeAutosuggestionList

routes/_components/compose/ComposeBox.html

@@ -151,6 +151,13 @@
       ComposeMedia,
       ComposeContentWarning
     },
+    data: () => ({
+      size: void 0,
+      isReply: false,
+      autoFocus: false,
+      sticky: false,
+      hideBottomBorder: false
+    }),
     store: () => store,
     computed: {
       computedClassName: (overLimit, realm, size, postPrivacyKey, isReply) => (classname(

routes/_components/compose/ComposeLengthGauge.html

@@ -1,5 +1,5 @@
 <div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}}  {{overLimit ? 'over-char-limit' : ''}}"
-     style="transform: scaleX({{lengthAsFractionDeferred || 0}});"
+     style="transform: scaleX({{lengthAsFractionDeferred}});"
      aria-hidden="true"
 ></div>
 <style>
@@ -38,6 +38,10 @@
         })
       }, {init: false})
     },
+    data: () => ({
+      shouldAnimate: false,
+      lengthAsFractionDeferred: 0
+    }),
     store: () => store,
     computed: {
       lengthAsFraction: (length) => {
@@ -46,5 +50,5 @@
         return (int - (int % 2)) / 100
       }
     }
-}
+  }
 </script>

routes/_components/compose/ComposeLengthIndicator.html

@@ -1,6 +1,6 @@
 <span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
       aria-label={{lengthLabel}}>
-      {{lengthToDisplayDeferred || '0'}}
+      {{lengthToDisplayDeferred}}
     </span>
 <style>
   .compose-box-length {
@@ -35,6 +35,9 @@
         })
       }, {init: false})
     },
+    data: () => ({
+      lengthToDisplayDeferred: 0
+    }),
     store: () => store,
     computed: {
       lengthToDisplay: (length) => CHAR_LIMIT - length,

routes/_components/pseudoVirtualList/PseudoVirtualList.html

@@ -124,6 +124,9 @@
     components: {
       PseudoVirtualListLazyItem
     },
+    data: () => ({
+      intersectionObserver: void 0
+    }),
     store: () => pseudoVirtualListStore
   }
 </script>

routes/_components/pseudoVirtualList/PseudoVirtualListItem.html

@@ -38,6 +38,9 @@
       let { intersectionObserver } = this.get()
       intersectionObserver.observe(this.refs.node)
     },
+    data: () => ({
+      hide: false
+    }),
     computed: {
       shouldHide: (isIntersecting, isCached, hide) => {
         if (isCached) {

routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html

@@ -25,6 +25,9 @@
         stop('PseudoVirtualListLazyItem set props')
       }
     },
+    data: () => ({
+      props: void 0
+    }),
     components: {
       PseudoVirtualListItem
     }

routes/_components/status/Media.html

@@ -155,7 +155,8 @@
       }
     },
     data: () => ({
-      oneTransparentPixel: ONE_TRANSPARENT_PIXEL
+      oneTransparentPixel: ONE_TRANSPARENT_PIXEL,
+      mouseover: void 0
     }),
     store: () => store,
     events: {

routes/_components/status/Status.html

@@ -138,6 +138,11 @@
       StatusSpoiler,
       StatusComposeBox
     },
+    data: () => ({
+      notification: void 0,
+      replyVisibility: void 0,
+      contentPreloaded: false
+    }),
     store: () => store,
     methods: {
       onClickOrKeydown (e) {

routes/_components/timeline/LazyTimeline.html

@@ -1,5 +1,6 @@
 <div class="lazy-timeline">
   {{#await importTimeline}}
+    <!-- awaiting promise -->
   {{then constructor}}
     <:Component {constructor} :timeline />
   {{catch error}}

routes/_components/timeline/Timeline.html

@@ -5,6 +5,7 @@
      on:blurWithCapture="clearFocus(event)"
 >
   {{#await componentsPromise}}
+    <!-- awaiting promise -->
   {{then result}}
     <:Component {result.listComponent}
                 component={{result.listItemComponent}}

routes/_components/virtualList/VirtualListHeader.html

@@ -36,6 +36,9 @@
         }
       }, {init: false})
     },
+    data: () => ({
+      fadedIn: false
+    }),
     store: () => virtualListStore,
     methods: {
       doCalculateHeight () {

routes/_components/virtualList/VirtualListLazyItem.html

@@ -20,6 +20,9 @@
         stop('VirtualListLazyItem set props')
       }
     },
+    data: () => ({
+      props: void 0
+    }),
     components: {
       VirtualListItem
     }

routes/_pages/settings/instances/[instanceName].html

@@ -105,22 +105,21 @@
   import { themes } from '../../../_static/themes'
 
   export default {
-    components: {
+    async oncreate () {
-      SettingsLayout,
+      let { instanceName } = this.get()
-      ExternalLink,
+      let { instanceThemes } = this.store.get()
-      Avatar
+      this.set({
+        selectedTheme: instanceThemes[instanceName] || 'default'
+      })
+      await updateVerifyCredentialsForInstance(instanceName)
     },
     store: () => store,
     data: () => ({
-      themes: themes
+      themes: themes,
+      selectedTheme: 'default'
     }),
-    async oncreate () {
-      let { instanceName } = this.get()
-      await updateVerifyCredentialsForInstance(instanceName)
-    },
     computed: {
       instanceName: (params) => params.instanceName,
-      selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName] || 'default',
       verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName]
     },
     methods: {
@@ -145,6 +144,11 @@
           }
         })
       }
+    },
+    components: {
+      SettingsLayout,
+      ExternalLink,
+      Avatar
     }
   }
 </script>

routes/_utils/events.js

@@ -2,7 +2,7 @@ export function imgLoadError (node, callback) {
   node.addEventListener('error', callback)
 
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('error', callback)
     }
   }
@@ -12,7 +12,7 @@ export function imgLoad (node, callback) {
   node.addEventListener('load', callback)
 
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('load', callback)
     }
   }
@@ -28,7 +28,7 @@ export function mouseover (node, callback) {
   node.addEventListener('mouseenter', onMouseEnter)
   node.addEventListener('mouseleave', onMouseLeave)
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('mouseenter', onMouseEnter)
       node.removeEventListener('mouseleave', onMouseLeave)
     }
@@ -38,7 +38,7 @@ export function mouseover (node, callback) {
 export function focusWithCapture (node, callback) {
   node.addEventListener('focus', callback, true)
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('focus', callback, true)
     }
   }
@@ -47,7 +47,7 @@ export function focusWithCapture (node, callback) {
 export function blurWithCapture (node, callback) {
   node.addEventListener('blur', callback, true)
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('blur', callback, true)
     }
   }
@@ -62,7 +62,7 @@ export function selectionChange (node, callback) {
     node.addEventListener(event, listener)
   }
   return {
-    teardown () {
+    destroy () {
       for (let event of events) {
         node.removeEventListener(event, listener)
       }

webpack.client.config.js

@@ -23,11 +23,12 @@ module.exports = {
         use: {
           loader: 'svelte-loader',
           options: {
+            dev: isDev,
             hydratable: true,
             emitCss: !isDev,
             cascade: false,
             store: true,
-            hot: isDev
+            hotReload: isDev
           }
         }
       },