Add TypeScript

Gemfile.lock

@@ -48,22 +48,22 @@ GEM
       sshkit (>= 1.6.1, != 1.7.0)
     arel (9.0.0)
     aws-eventstream (1.0.3)
-    aws-partitions (1.162.0)
-    aws-sdk-core (3.52.1)
+    aws-partitions (1.173.0)
+    aws-sdk-core (3.54.2)
       aws-eventstream (~> 1.0, >= 1.0.2)
       aws-partitions (~> 1.0)
       aws-sigv4 (~> 1.1)
       jmespath (~> 1.0)
-    aws-sdk-kms (1.20.0)
-      aws-sdk-core (~> 3, >= 3.52.1)
+    aws-sdk-kms (1.21.0)
+      aws-sdk-core (~> 3, >= 3.53.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.39.0)
-      aws-sdk-core (~> 3, >= 3.52.1)
+    aws-sdk-s3 (1.42.0)
+      aws-sdk-core (~> 3, >= 3.53.0)
       aws-sdk-kms (~> 1)
-      aws-sigv4 (~> 1.0)
+      aws-sigv4 (~> 1.1)
     aws-sigv4 (1.1.0)
       aws-eventstream (~> 1.0, >= 1.0.2)
-    bcrypt (3.1.12)
+    bcrypt (3.1.13)
     better_errors (2.5.1)
       coderay (>= 1.0.0)
       erubi (>= 1.0.0)
@@ -115,10 +115,10 @@ GEM
       railties (>= 4.2.0)
     fakefs (0.20.1)
     ffaker (2.11.0)
-    ffi (1.10.0)
+    ffi (1.11.1)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
-    hashdiff (0.3.9)
+    hashdiff (0.4.0)
     i18n (1.6.0)
       concurrent-ruby (~> 1.0)
     irb (1.0.0)
@@ -152,7 +152,7 @@ GEM
     nokogiri (1.10.3)
       mini_portile2 (~> 2.4.0)
     pg (1.1.4)
-    public_suffix (3.0.3)
+    public_suffix (3.1.0)
     puma (3.12.1)
     rack (2.0.7)
     rack-cache (1.9.0)
@@ -196,7 +196,7 @@ GEM
     rb-inotify (0.10.0)
       ffi (~> 1.0)
     redcarpet (3.4.0)
-    redis (4.1.1)
+    redis (4.1.2)
     redis-actionpack (5.0.2)
       actionpack (>= 4.0, < 6)
       redis-rack (>= 1, < 3)
@@ -272,11 +272,11 @@ GEM
       thread_safe (~> 0.1)
     validates_timeliness (4.0.2)
       timeliness (~> 0.3.7)
-    webmock (3.5.1)
+    webmock (3.6.0)
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
-      hashdiff
-    webpacker (4.0.2)
+      hashdiff (>= 0.4.0, < 2.0.0)
+    webpacker (4.0.7)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)

app/frontend/components/EpisodeActions.vue

@@ -27,29 +27,29 @@
   </div>
 </template>
 
-<script>
-  import {mapGetters} from 'vuex'
+<script lang="ts">
+  import Vue from 'vue'
+  import {Prop} from 'vue-property-decorator'
+  import Component from 'vue-class-component'
+  import {Getter} from 'vuex-class'
+
+  import audioProcessed from 'utilities/audioProcessed'
+  import {Episode} from 'types'
   import Play from 'images/Play.vue'
 
-  export default {
-    props: ['episode'],
+  @Component({
+    components: {Play}
+  })
+  export default class EpisodeActions extends Vue {
+    @Prop({required: true}) episode: Episode
 
-    data() {
-      return {
-        playOpen: false
-      }
-    },
+    playOpen = false
 
-    components: {Play},
+    @Getter isAuthenticated: boolean
 
-    computed: {
-      ...mapGetters(['isAuthenticated']),
-      audioProcessed() { return this.episode.audio && this.episode.audio.mp3 && this.episode.audio.aac },
-    },
+    get audioProcessed(): boolean { return audioProcessed(this.episode) }
 
-    methods: {
-      play() { this.playOpen = true }
-    }
+    play() { this.playOpen = true }
   }
 </script>
 

app/frontend/components/Lightbox/Lightbox.vue

@@ -9,34 +9,36 @@
   </transition>
 </template>
 
-<script>
+<script lang="ts">
+  import Vue from 'vue'
+  import Component from 'vue-class-component'
+  import {Prop} from 'vue-property-decorator'
+
   import LightboxBus from './LightboxBus'
 
-  export default {
-    props: {shown: Boolean},
+  @Component
+  export default class Lightbox extends Vue {
+    @Prop({type: Boolean}) shown: boolean
+
+    $refs!: {
+      lightbox: HTMLElement
+    }
+
+    width: number
+    height: number
 
-    data() {
-      return {
-        width: null,
-        height: null
-      }
-    },
+    get style(): string {
+      return `transform: translate(-${this.width/2.0}px, -${this.height/2.0}px)`
+    }
 
-    computed: {
-      style() {
-        return `transform: translate(-${this.width/2.0}px, -${this.height/2.0}px)`
-      }
-    },
+    private resize() {
+      if (!this.$refs.lightbox) return
+      this.width = this.$refs.lightbox.offsetWidth
+      this.height = this.$refs.lightbox.offsetHeight
+    }
 
-    methods: {
-      resize() {
-        if (!this.$refs.lightbox) return
-        this.width = this.$refs.lightbox.offsetWidth
-        this.height = this.$refs.lightbox.offsetHeight
-      }
-    },
+    mounted() { this.resize() }
 
-    mounted() { this.resize() },
     updated() {
       this.resize()
       LightboxBus.$emit('lightbox:updated', this.shown)

app/frontend/components/Lightbox/LightboxCloseButton.vue

@@ -4,20 +4,19 @@
   </a>
 </template>
 
-<script>
-  import CloseButton from 'images/CloseButton'
+<script lang="ts">
+  import Vue from 'vue'
+  import Component from 'vue-class-component'
+  import {Prop} from 'vue-property-decorator'
 
-  export default {
-    props: {onClose: Function},
+  import CloseButton from 'images/CloseButton'
 
-    components: {CloseButton},
+  @Component({
+    components: {CloseButton}
+  })
+  export default class LightboxCloseButton extends Vue {
+    @Prop({type: Function}) onClose: (e: Event) => void
 
-    data() {
-      return {closeActive: false}
-    }
+    closeActive = false
   }
 </script>
-
-<style scoped>
-
-</style>

app/frontend/components/Lightbox/LightboxOverlay.vue

@@ -4,13 +4,15 @@
   </transition>
 </template>
 
-<script>
+<script lang="ts">
+  import Vue from 'vue'
+  import Component from 'vue-class-component'
+
   import LightboxBus from './LightboxBus'
 
-  export default {
-    data() {
-      return {shown: false}
-    },
+  @Component
+  export default class LightboxOverlay extends Vue {
+    shown = false
 
     created() {
       LightboxBus.$on('lightbox:updated', shown => this.shown = shown)

app/frontend/components/PageLoading.vue

@@ -136,10 +136,12 @@
   </div>
 </template>
 
-<script>
-  export default {
+<script lang="ts">
+  import Vue from 'vue'
+  import Component from 'vue-class-component'
 
-  }
+  @Component
+  export default class PageLoading extends Vue {}
 </script>
 
 <style scoped lang="scss">

app/frontend/components/SmartForm/SmartField.vue

@@ -70,77 +70,79 @@
   </div>
 </template>
 
-<script>
-  import SimpleMDE from 'simplemde'
-  import {DateTime} from 'luxon'
+<script lang="ts">
+  import Vue from 'vue'
+  import * as SimpleMDE from 'simplemde'
+  import {DateTime, DateTimeFormatOptions} from 'luxon'
+  import Component from 'vue-class-component'
+  import {Prop, Watch} from 'vue-property-decorator'
 
   import SmartFormBus from './SmartFormBus'
+  import SmartForm from 'components/SmartForm/SmartForm.vue'
 
-  export default {
-    data() {
+  @Component
+  export default class SmartField extends Vue {
+    $parent!: SmartForm
+    $refs!: {
+      markdownField: HTMLTextAreaElement
+    }
+
+    object: object
+    buffer = ''
+    MDE?: SimpleMDE
+
+    @Prop({type: String, default: 'text'}) type: string
+    @Prop({type: String, required: true}) field: string
+    @Prop({type: Boolean, default: false}) required: boolean
+    @Prop({type: Number}) maxlength: number
+    @Prop({type: String}) placeholder: string
+    @Prop({type: String, default: 'America/Los_Angeles'}) timezone: string
+
+    private get name(): string { return `${this.$parent.objectName}[${this.field}]` }
+    private get id(): string { return `${this.$parent.objectName}_${this.field}` }
+    get errors(): string[] { return this.$parent.errors[this.field] || [] }
+    private get invalid(): boolean { return this.errors.length > 0 }
+    get datetimeFormat(): DateTimeFormatOptions { return DateTime.DATETIME_FULL }
+
+    get commonAttributes() {
       return {
-        object: null,
-        buffer: '',
-        MDE: null
-      }
-    },
-
-    props: {
-      type: {type: String, default: 'text'},
-      field: {type: String, required: true},
-      required: {type: Boolean, default: false},
-      maxlength: {type: Number},
-      placeholder: {type: String},
-      timezone: {type: String, default: 'America/Los_Angeles'}
-    },
-
-    computed: {
-      name() { return `${this.$parent.objectName}[${this.field}]` },
-      id() { return `${this.$parent.objectName}_${this.field}` },
-      errors() { return this.$parent.errors[this.field] || [] },
-      invalid() { return this.errors.length > 0 },
-      datetimeFormat() { return DateTime.DATETIME_FULL },
-
-      commonAttributes() {
-        return {
-          name: this.name,
-          id: this.id,
-          class: {invalid: this.invalid},
-          'v-model': this.buffer
-        }
+        name: this.name,
+        id: this.id,
+        class: {invalid: this.invalid},
+        'v-model': this.buffer
       }
-    },
-
-    methods: {
-      onFocus() {SmartFormBus.$emit('field-focus', this.field)},
-      onBlur() {SmartFormBus.$emit('field-blur', this.field)},
-      onChange() {SmartFormBus.$emit('value-updated', this.field, this.buffer)},
-
-      createMDE() {
-        if (this.type !== 'markdown') return
-        if (this.MDE) return
-        this.MDE = new SimpleMDE({
-          element: this.$refs.markdownField,
-          blockStyles: {italic: '_'},
-          spellChecker: false,
-          status: false,
-          forceSync: true
-        })
-      },
-    },
-
-    watch: {
-      object() {
-        if (this.type === 'file') return
-        this.buffer = this.object[this.field]
-        this.createMDE()
-        if (this.MDE) this.MDE.element = this.$refs.markdownField
-      },
-      buffer() {
-        if (this.MDE) this.MDE.value(this.buffer)
-        this.onChange()
-      }
-    },
+    }
+
+    onFocus() { SmartFormBus.$emit('field-focus', this.field) }
+    onBlur() { SmartFormBus.$emit('field-blur', this.field) }
+    onChange() { SmartFormBus.$emit('value-updated', this.field, this.buffer) }
+
+    private createMDE() {
+      if (this.type !== 'markdown') return
+      if (this.MDE) return
+      this.MDE = new SimpleMDE({
+        element: this.$refs.markdownField,
+        blockStyles: {italic: '_'},
+        spellChecker: false,
+        status: false,
+        forceSync: true
+      })
+    }
+
+    @Watch('object')
+    onObjectChanged() {
+      if (this.type === 'file') return
+      this.buffer = this.object[this.field]
+      this.createMDE()
+      // @ts-ignore: accessing a private `element` property
+      if (this.MDE) this.MDE.element = this.$refs.markdownField
+    }
+
+    @Watch('buffer')
+    onBufferChanged() {
+      if (this.MDE) this.MDE.value(this.buffer)
+      this.onChange()
+    }
 
     mounted() {
       this.createMDE()