convert codebase to typescript

2022-12-19 13:53:20 +01:00
parent 1758af4f3d
commit 071d1f9788
20 changed files with 5995 additions and 1192 deletions
--- a/.drone.yml
+++ b/.drone.yml
@@ -1,17 +0,0 @@
-kind: pipeline
-type: ssh
-name: default
-
-server:
-  host: nuc.home
-  user:
-    from_secret: ssh_username
-  password:
-    from_secret: ssh_password
-
-steps:
- name: build
-  commands:
-  - cd /home/marco/containers
-  - docker-compose build sensor-web-v2
-  - docker-compose up -d sensor-web-v2
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -3,9 +3,14 @@ require('@rushstack/eslint-patch/modern-module-resolution')

 module.exports = {
  root: true,
-  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier'],
-  env: {
-    'vue/setup-compiler-macros': true
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
  },
  rules: {
    'vue/multi-word-component-names': 'off'
--- a/README.md
+++ b/README.md
@@ -1,10 +1,21 @@
-# vue-project
+# vue-ts

 This template should help get you started developing with Vue 3 in Vite.

 ## Recommended IDE Setup

-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

 ## Customize configuration

@@ -22,7 +33,7 @@ npm install
 npm run dev
 ```

-### Compile and Minify for Production
+### Type-Check, Compile and Minify for Production

 ```sh
 npm run build
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/index.html
+++ b/index.html
@@ -11,6 +11,6 @@
  </head>
  <body>
    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,28 +3,36 @@
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview --port 5050",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "bulma": "^0.9.4",
-    "dayjs": "^1.11.1",
-    "dotenv": "^16.0.0",
-    "express": "^4.18.1",
-    "highcharts": "^10.1.0",
-    "mongodb": "^4.5.0",
-    "sass": "^1.53.0",
-    "vue": "^3.2.37",
-    "vue-router": "^4.1.2"
+    "dayjs": "^1.11.7",
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2",
+    "highcharts": "^10.3.2",
+    "mongodb": "^4.13.0",
+    "sass": "^1.57.0",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
  },
  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.4",
-    "@vitejs/plugin-vue": "^3.0.0",
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@types/node": "^18.11.17",
+    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
-    "eslint": "^8.19.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.30.0",
    "eslint-plugin-vue": "^9.2.0",
+    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
-    "vite": "^3.0.0"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.2",
+    "vue-tsc": "^1.0.14"
  }
 }
--- a/src/components/Chart.vue
+++ b/src/components/Chart.vue
@@ -4,103 +4,100 @@
    <div class="chart" id="chart" ref="chart" v-else></div>
  </div>
 </template>
-<script>
+<script setup lang="ts">
 import { ref, watch, toRefs, nextTick, onMounted } from 'vue'
-import Highcharts from 'highcharts'
+import * as Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
+import type { Window } from '@/utils/types'

 Highcharts.setOptions({
  time: {
    timezoneOffset: new Date().getTimezoneOffset()
  }
 })
-export default {
-  props: ['window', 'type'],
-  components: {
-    Loader
-  },
-  setup(props) {
-    const data = ref([])
-    const loading = ref(false)
-    const chart = ref(null)
-    const { window, type } = toRefs(props)

-    const fetchData = async () => {
-      if (window.value && type.value) {
-        loading.value = true
-        const typeApi = {
-          temperatuur: 'temperature',
-          luchtvochtigheid: 'humidity'
-        }
-        try {
-          const [start, end] = [window.value.getStart(), window.value.getEnd()]
-          const sample = Math.round((end - start) / 60 / 288) || 1
-          const host = import.meta.env.MODE === 'development' ? 'http://localhost:3000' : ''
-          const fetchUrl = `${host}/type/${typeApi[type.value]}/startDate/${start}/endDate/${end}/sample/${sample}`
-          const response = await fetch(fetchUrl)
-          loading.value = false
-          data.value = await response.json()
-        } catch (err) {
-          console.log(err)
-        }
-      }
+const props = defineProps<{
+  window: Window | undefined
+  type: string
+}>()
+
+const data = ref([])
+const loading = ref(false)
+const chart = ref<HTMLElement | null>(null)
+const { window, type } = toRefs(props)
+
+const fetchData = async () => {
+  if (window.value && type.value) {
+    loading.value = true
+    const typeApi = {
+      temperatuur: 'temperature',
+      luchtvochtigheid: 'humidity'
    }
-    const renderChart = () => {
-      const chartData = data.value.map(({ date, value }) => ({ x: date, y: value }))
-      Highcharts.chart(chart.value, {
-        chart: { styledMode: true, marginBottom: 25 },
-        title: { text: '' },
-        legend: { enabled: false },
-        plotOptions: { series: { animation: false, marker: { enabled: false } } },
-        xAxis: {
-          type: 'datetime',
-          dateTimeLabelFormats: {
-            millisecond: '%H:%M:%S.%L',
-            second: '%H:%M:%S',
-            minute: '%H:%M',
-            hour: '%H:%M',
-            day: '%a %e %b',
-            week: '%e %b',
-            month: "%b '%y",
-            year: '%Y'
-          }
-        },
-        yAxis: {
-          labels: {
-            formatter() {
-              const suffix = type.value === 'temperatuur' ? '°C' : '%'
-              return this.value + suffix
-            }
-          },
-          title: { enabled: false },
-          minTickInterval: 0.1
-        },
-        series: [{ name: capitalizeFirstLetter(type.value), data: chartData }],
-        credits: { enabled: false }
-      })
-    }
-    watch([window, type], ([newWindow, newType], [oldWindow, oldType]) => {
-      if (newWindow !== oldWindow || newType !== oldType) {
-        fetchData()
-      }
-    })
-    onMounted(() => {
-      watch(
-        data,
-        () => {
-          if (data.value.length > 0) nextTick(() => renderChart())
-        },
-        { immediate: true }
-      )
-    })
-    return {
-      loading,
-      chart
+    try {
+      const [start, end] = [window.value.getStart(), window.value.getEnd()]
+      const sample = Math.round((end - start) / 60 / 288) || 1
+      const host = import.meta.env.MODE === 'development' ? 'http://localhost:3000' : ''
+      const fetchUrl = `${host}/type/${
+        typeApi[type.value as keyof typeof typeApi]
+      }/startDate/${start}/endDate/${end}/sample/${sample}`
+      const response = await fetch(fetchUrl)
+      loading.value = false
+      data.value = await response.json()
+    } catch (err) {
+      console.log(err)
    }
  }
 }
+
+const renderChart = () => {
+  const chartData = data.value.map(({ date, value }) => ({ x: date, y: value }))
+  Highcharts.chart({
+    chart: { renderTo: chart.value || '', styledMode: true, marginBottom: 25 },
+    title: { text: '' },
+    legend: { enabled: false },
+    plotOptions: { series: { animation: false, marker: { enabled: false } } },
+    xAxis: {
+      type: 'datetime',
+      dateTimeLabelFormats: {
+        millisecond: '%H:%M:%S.%L',
+        second: '%H:%M:%S',
+        minute: '%H:%M',
+        hour: '%H:%M',
+        day: '%a %e %b',
+        week: '%e %b',
+        month: "%b '%y",
+        year: '%Y'
+      }
+    },
+    yAxis: {
+      labels: {
+        formatter() {
+          const suffix = type.value === 'temperatuur' ? '°C' : '%'
+          return this.value + suffix
+        }
+      },
+      title: { text: null },
+      minTickInterval: 0.1
+    },
+    series: [{ name: capitalizeFirstLetter(type.value), data: chartData, type: 'line' }],
+    credits: { enabled: false }
+  })
+}
+
+watch([window, type], () => {
+  fetchData(), { immediate: true }
+})
+onMounted(() => {
+  watch(
+    data,
+    () => {
+      if (data.value.length > 0) nextTick(() => renderChart())
+    },
+    { immediate: true }
+  )
+})
 </script>

 <style lang="scss">
--- a/src/components/Loader.vue
+++ b/src/components/Loader.vue
@@ -7,7 +7,7 @@
  </div>
 </template>
 <style scoped lang="scss">
-@import "@/style/_variables.scss";
+@import '@/style/_variables.scss';
 .lds-ring {
  display: inline-block;
  position: relative;
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -8,53 +8,42 @@
    <router-view></router-view>
  </div>
 </template>
-<script>
+<script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import NavBar from '@/components/NavBar.vue'
 import TimeWindows from '@/components/TimeWindows.vue'
 import Chart from '@/components/Chart.vue'
-export default {
-  components: {
-    NavBar,
-    TimeWindows,
-    Chart
-  },
-  setup() {
-    const type = ref(null)
-    const window = ref({})
-    const router = useRouter()
-    const currentRoute = router.currentRoute
-    if (currentRoute.value.params.type) type.value = currentRoute.value.params.type
-    if (currentRoute.value.params.window) window.value = { label: currentRoute.value.params.window }
-    const updateRoute = () => {
-      if (type.value) {
-        const route = {
-          name: 'view',
-          params: {
-            type: type.value,
-            window: window.value.label ? window.value.label.replace(' ', '-') : undefined
-          }
-        }
-        router.push(route)
+import { windows } from '@/utils/helpers'
+import type { Window } from '@/utils/types'
+
+const type = ref<string>('')
+const window = ref<Window | undefined>(undefined)
+const router = useRouter()
+const currentRoute = useRoute()
+if (currentRoute.params.type) type.value = currentRoute.params.type as string
+if (currentRoute.params.window) window.value = windows.find((w) => w.label === currentRoute.params.window)
+
+const updateRoute = () => {
+  if (type.value) {
+    const route = {
+      name: 'view',
+      params: {
+        type: type.value,
+        window: window.value?.label.replace(' ', '-')
      }
    }
-    const setType = (newType) => {
-      type.value = newType
-      updateRoute()
-    }
-    const setWindow = (newWindow) => {
-      window.value = newWindow
-      updateRoute()
-    }
-    return {
-      type,
-      window,
-      setType,
-      setWindow
-    }
+    router.push(route)
  }
 }
+const setType = (newType: string) => {
+  type.value = newType
+  updateRoute()
+}
+const setWindow = (newWindow: Window) => {
+  window.value = newWindow
+  updateRoute()
+}
 </script>
 <style scoped>
 #app {
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -21,44 +21,39 @@
      <div class="navbar-start">
        <a
          class="navbar-item"
-          :class="{ 'is-active': type === activeType }"
-          :key="type"
-          v-for="type in navTypes"
-          @click="setType(type)"
-          >{{ capitalizeFirstLetter(type) }}</a
+          :class="{ 'is-active': navType === activeType }"
+          :key="navType"
+          v-for="navType in navTypes"
+          @click="setType(navType)"
+          >{{ capitalizeFirstLetter(navType) }}</a
        >
      </div>
    </div>
  </nav>
 </template>
-<script>
-import { ref, onMounted } from 'vue'
+<script setup lang="ts">
 import { capitalizeFirstLetter } from '@/utils/helpers'
-export default {
-  props: ['activeType'],
-  setup(props, { emit }) {
-    const toggled = ref(false)
-    const navTypes = ref(['temperatuur', 'luchtvochtigheid'])
-    onMounted(() => {
-      if (!props.activeType) {
-        emit('set-type', navTypes.value[0])
-      }
-    })
-    const toggleMenu = () => {
-      toggled.value = !toggled.value
-    }
-    const setType = (type) => {
-      toggled.value = false
-      emit('set-type', type)
-    }
-    return {
-      capitalizeFirstLetter,
-      navTypes,
-      toggled,
-      toggleMenu,
-      setType
-    }
+import { ref, onMounted } from 'vue'
+
+const props = defineProps<{
+  activeType: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'set-type', type: string): void
+}>()
+
+const toggled = ref(false)
+const navTypes = ref<string[]>(['temperatuur', 'luchtvochtigheid'])
+onMounted(() => {
+  if (!props.activeType) {
+    emit('set-type', navTypes.value[0])
  }
+})
+const toggleMenu = () => (toggled.value = !toggled.value)
+const setType = (type: string) => {
+  toggled.value = false
+  emit('set-type', type)
 }
 </script>
 <style scoped lang="scss">
--- a/src/components/TimeWindows.vue
+++ b/src/components/TimeWindows.vue
@@ -4,84 +4,31 @@
      <li
        v-for="window in windows"
        :key="window.label"
-        @click="$emit('set-window', window)"
-        :class="{ 'is-active': window.label === activeWindow.label }"
+        @click="emit('set-window', window)"
+        :class="{ 'is-active': window.label === activeWindow?.label }"
      >
        <a>{{ window.label }}</a>
      </li>
    </ul>
  </div>
 </template>
-<script>
-import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-export default {
-  props: {
-    activeWindow: {
-      type: Object
-    }
-  },
-  setup(props, { emit }) {
-    const windows = ref([
-      {
-        label: 'afgelopen uur',
-        getStart: () => dayjs().subtract(1, 'hour').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'HH:mm',
-        interval: 4
-      },
-      {
-        label: '24 uur',
-        getStart: () => dayjs().subtract(1, 'days').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'HH:mm',
-        interval: 4
-      },
-      {
-        label: 'vandaag',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(24, 'hours').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'HH:mm',
-        interval: 4
-      },
-      {
-        label: '3 dagen',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(3, 'days').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24
-      },
-      {
-        label: 'week',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(7, 'days').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24
-      },
-      {
-        label: 'maand',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'months').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24
-      },
-      {
-        label: 'jaar',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'year').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24 * 7
-      }
-    ])
-    onMounted(() => {
-      const activeWindow = !props.activeWindow.label
-        ? windows.value[1]
-        : windows.value.find((w) => w.label === props.activeWindow.label.replace('-', ' '))
-      emit('set-window', activeWindow)
-    })
-    return {
-      windows
-    }
-  }
-}
+<script setup lang="ts">
+import { onMounted, defineProps, defineEmits } from 'vue'
+import { windows } from '@/utils/helpers'
+import type { Window } from '@/utils/types'
+
+const props = defineProps<{
+  activeWindow: Window | undefined
+}>()
+
+const emit = defineEmits<{
+  (e: 'set-window', window: Window): void
+}>()
+
+onMounted(() => {
+  const activeWindow = !props.activeWindow?.label
+    ? windows[1]
+    : windows.find((w) => w.label === props.activeWindow?.label.replace('-', ' '))
+  if (activeWindow) emit('set-window', activeWindow)
+})
 </script>
--- a/src/main.ts
+++ b/src/main.ts
--- a/src/router.ts
+++ b/src/router.ts
--- a/src/utils/helpers.js
+++ b/src/utils/helpers.js
@@ -1,3 +0,0 @@
-export function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -0,0 +1,58 @@
+import dayjs from 'dayjs'
+import type { Window } from '@/utils/types'
+
+export function capitalizeFirstLetter(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export const windows: Window[] = [
+  {
+    label: 'afgelopen uur',
+    getStart: () => dayjs().subtract(1, 'hour').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'HH:mm',
+    interval: 4
+  },
+  {
+    label: '24 uur',
+    getStart: () => dayjs().subtract(1, 'days').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'HH:mm',
+    interval: 4
+  },
+  {
+    label: 'vandaag',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(24, 'hours').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'HH:mm',
+    interval: 4
+  },
+  {
+    label: '3 dagen',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(3, 'days').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'ddd D/M',
+    interval: 24
+  },
+  {
+    label: 'week',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(7, 'days').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'ddd D/M',
+    interval: 24
+  },
+  {
+    label: 'maand',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'months').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'ddd D/M',
+    interval: 24
+  },
+  {
+    label: 'jaar',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'year').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'ddd D/M',
+    interval: 24 * 7
+  }
+]
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -0,0 +1,7 @@
+export interface Window {
+  label: string
+  getStart: { (): number }
+  getEnd: { (): number }
+  format: string
+  interval: number
+}
--- a/tsconfig.config.json
+++ b/tsconfig.config.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,6 @@ export default defineConfig({
    }
  },
  server: {
-    port: '8080'
+    port: 8080
  }
 })