Convert more stuff to TypeScript

Author: MetRonnie

src/components/cylc/SVGTask.vue

@@ -246,34 +246,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </g>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue'
 import { TaskState } from '@/model/TaskState.model'
+import { animResetKey } from '@/utils/injectionKeys'
+
+interface Props {
+  task: any
+  /**
+   * The start time as an ISO8601 date-time string in expanded format
+   * e.g. 2022-10-26T13:43:45Z
+   *
+   * TODO: aim to remove this in due course
+   * (we should be able to obtain this directly from the task)
+   */
+  startTime?: string
+  /**
+   * Scale the size of the task state modifier
+   */
+  modifierSize?: number
+}
 
-const props = defineProps({
-  task: {
-    required: true
-  },
-  startTime: {
-    // The start time as an ISO8601 date-time string in expanded format
-    // e.g. 2022-10-26T13:43:45Z
-    // TODO: aim to remove this in due course
-    // (we should be able to obtain this directly from the task)
-    type: String,
-    required: false
-  },
-  modifierSize: {
-    // Scale the size of the task state modifier
-    type: Number,
-    default: 0.7
-  },
+const props = withDefaults(defineProps<Props>(), {
+  modifierSize: 0.7
 })
 
 /**
- * @type {import('vue').Ref<number>}
  * @see @/components/cylc/workspace/Widget.vue
  */
-const animResetTime = inject('animResetTime', () => ref(0), true)
+const animResetTime = inject(animResetKey, () => ref(0), true)
 
 const runningStyle = computed(() => {
   if (

src/components/cylc/workspace/Lumino.vue

@@ -24,15 +24,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :id="id"
   >
     <component
-      :is="props.allViews.get(name).component"
+      :is="props.allViews.get(name)!.component"
       :workflow-name="workflowName"
-      v-model:initial-options="views.get(id).initialOptions"
+      v-model:initial-options="views.get(id)!.initialOptions"
       class="h-100"
     />
   </WidgetComponent>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
   nextTick,
   onBeforeUnmount,
@@ -45,8 +45,14 @@ import WidgetComponent from '@/components/cylc/workspace/Widget.vue'
 import LuminoWidget from '@/components/cylc/workspace/lumino-widget'
 import { BoxPanel, DockPanel, Widget } from '@lumino/widgets'
 import { when } from '@/utils'
-import { useDefaultView } from '@/views/views'
-import { eventBus } from '@/services/eventBus'
+import {
+  useDefaultView,
+  type CylcView
+} from '@/views/views'
+import {
+  eventBus,
+  type AddViewEvent
+} from '@/services/eventBus'
 
 /*
  * A component to wrap the Lumino application.
@@ -58,47 +64,25 @@ import { eventBus } from '@/services/eventBus'
  * works, but there could be alternative approaches too.
  */
 
-/**
- * Mitt event for adding a view to the workspace.
- * @typedef {Object} AddViewEvent
- * @property {string} name - the view to add
- * @property {Record<string,*>} initialOptions - prop passed to the view component
- */
-
 const $store = useStore()
 
-const props = defineProps({
-  workflowName: {
-    type: String,
-    required: true
-  },
-  /**
-   * All possible view component classes that can be rendered
-   *
-   * @type {Map<string, import('@/views/views').CylcView>}
-   */
-  allViews: {
-    type: Map,
-    required: true
-  },
-})
+const props = defineProps<{
+  workflowName: string
+  /** All possible view component classes that can be rendered */
+  allViews: Map<string, CylcView>
+}>()
 
 const emit = defineEmits([
   'emptied'
 ])
 
-/**
- * Template ref
- * @type {import('vue').Ref<HTMLElement>}
- */
-const mainDiv = ref(null)
+/** Template ref */
+const mainDiv = ref<HTMLElement>()
 
 /**
  * Mapping of widget ID to the name of view component and its initialOptions prop.
- *
- * @type {import('vue').Ref<Map<string, AddViewEvent>>}
  */
-const views = ref(new Map())
+const views = ref(new Map<string, AddViewEvent>())
 
 const defaultView = useDefaultView()
 
@@ -113,11 +97,14 @@ const resizeObserver = new ResizeObserver(() => {
   boxPanel.update()
 })
 
-onMounted(() => {
+when(mainDiv, (div) => {
   // Attach box panel to DOM:
-  Widget.attach(boxPanel, mainDiv.value)
+  Widget.attach(boxPanel, div)
   // Watch for resize of the main element to trigger relayout:
-  resizeObserver.observe(mainDiv.value)
+  resizeObserver.observe(div)
+})
+
+onMounted(() => {
   eventBus.on('add-view', addView)
   eventBus.on('lumino:deleted', onWidgetDeleted)
   getLayout(props.workflowName)
@@ -135,13 +122,13 @@ onBeforeUnmount(() => {
 
 /**
  * Create a widget and add it to the dock.
- *
- * @param {AddViewEvent} event
- * @param {boolean} onTop
  */
-const addView = ({ name, initialOptions = {} }, onTop = true) => {
+const addView = (
+  { name, initialOptions = {} }: AddViewEvent,
+  onTop: boolean = true
+) => {
   const id = uniqueId('widget')
-  const luminoWidget = new LuminoWidget(id, startCase(name), /* closable */ true)
+  const luminoWidget = new LuminoWidget(id, startCase(name))
   dockPanel.addWidget(luminoWidget, { mode: 'tab-after' })
   // give time for Lumino's widget DOM element to be created
   nextTick(() => {
@@ -164,10 +151,8 @@ const closeAllViews = () => {
 /**
  * Get the saved layout (if there is one) for the given workflow,
  * else add the default view.
- *
- * @param {string} workflowName
  */
-const getLayout = (workflowName) => {
+const getLayout = (workflowName: string) => {
   restoreLayout(workflowName) || addView({ name: defaultView.value })
 }
 
@@ -185,10 +170,9 @@ const saveLayout = () => {
 /**
  * Restore the layout for this workflow from the store, if it was saved.
  *
- * @param {string} workflowName
- * @returns {boolean} true if the layout was restored, false otherwise
+ * @returns true if the layout was restored, false otherwise
  */
-const restoreLayout = (workflowName) => {
+const restoreLayout = (workflowName: string): boolean => {
   const stored = $store.state.app.workspaceLayouts.get(workflowName)
   if (stored) {
     dockPanel.restoreLayout(stored.layout)
@@ -205,9 +189,9 @@ const restoreLayout = (workflowName) => {
 /**
  * Save & close the current layout and open the one for the given workflow.
  *
- * @param {string} workflowName
+ * @param workflowName
  */
-const changeLayout = (workflowName) => {
+const changeLayout = (workflowName: string) => {
   saveLayout()
   closeAllViews()
   // Wait if necessary for the workflowName prop to be updated to the new value:
@@ -220,9 +204,9 @@ const changeLayout = (workflowName) => {
 /**
  * React to a deleted event.
  *
- * @param {string} id - widget ID
+ * @param id - widget ID
  */
-const onWidgetDeleted = (id) => {
+const onWidgetDeleted = (id: string) => {
   views.value.delete(id)
   if (!views.value.size) {
     emit('emptied')

src/components/cylc/workspace/Widget.vue

@@ -24,16 +24,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </Teleport>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onBeforeUnmount, provide, readonly, ref } from 'vue'
 import { eventBus } from '@/services/eventBus'
+import { animResetKey } from '@/utils/injectionKeys'
 
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-})
+const props = defineProps<{
+  id: string
+}>()
 
 /**
  * Ref used to indicate to children that the widget has become unhidden, and
@@ -45,13 +43,17 @@ const props = defineProps({
  * @see https://stackoverflow.com/a/37671302/3217306
  */
 const animResetTime = ref(Date.now())
-provide('animResetTime', readonly(animResetTime))
+provide(animResetKey, readonly(animResetTime))
 
-eventBus.on(`lumino:show:${props.id}`, () => {
-  animResetTime.value = Date.now()
-})
+function onWidgetShow (id: string) {
+  if (id === props.id) {
+    animResetTime.value = Date.now()
+  }
+}
+
+eventBus.on('lumino:show', onWidgetShow)
 
 onBeforeUnmount(() => {
-  eventBus.off(`lumino:show:${props.id}`)
+  eventBus.off('lumino:show', onWidgetShow)
 })
 </script>

src/components/cylc/workspace/lumino-widget.ts

@@ -85,7 +85,7 @@ export default class LuminoWidget extends Widget {
 
   onAfterShow (msg: Message) {
     // Emit an event so that the Vue component knows that this widget is visible again
-    eventBus.emit(`lumino:show:${this.id}`)
+    eventBus.emit('lumino:show', this.id)
     super.onAfterShow(msg)
   }
 }

src/services/eventBus.ts

@@ -17,9 +17,34 @@
 
 import mitt from 'mitt'
 
+/**
+ * Mitt event for adding a view to the workspace.
+ */
+export interface AddViewEvent {
+  /** The view to add */
+  name: string
+  /** Prop passed to the view component */
+  initialOptions?: Record<string, unknown>
+}
+
+/**
+ * Mitt event for showing the mutations menu.
+ */
+export interface ShowMutationsMenuEvent {
+  node: any, // TODO
+  target: HTMLElement,
+}
+
+type Events = {
+  'add-view': AddViewEvent,
+  'show-mutations-menu': ShowMutationsMenuEvent,
+  'lumino:deleted': string,
+  'lumino:show': string,
+}
+
 /**
  * Global event bus for the app.
  *
  * @see https://github.com/developit/mitt
  */
-export const eventBus = mitt()
+export const eventBus = mitt<Events>()

src/utils/index.ts

@@ -26,17 +26,17 @@ import {
  *
  * Immediate by default.
  */
-export function when (
-  source: WatchSource<boolean>,
-  callback: () => void,
+export function when<T> (
+  source: WatchSource<T>,
+  callback: (value: NonNullable<T>) => unknown,
   options: WatchOptions = {}
 ): void {
   const unwatch = watch(
     source,
-    (ready) => {
-      if (ready) {
+    (value) => {
+      if (value) {
         unwatch()
-        callback()
+        callback(value)
       }
     },
     { immediate: true, ...options }

src/utils/injectionKeys.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  type InjectionKey,
+  type Ref,
+} from 'vue'
+
+// Place to define keys for provide/inject in Vue components
+// @see https://vuejs.org/guide/typescript/composition-api.html#typing-provide-inject
+
+export const animResetKey = Symbol('time of animation reset') as InjectionKey<Ref<number>>