Switching to typescript. Missing vue files. Got issues in NC21.

6 files changed, 102 insertions, 16 deletions

diff --git a/package.json b/package.json
index 3d97d5d..a572132 100644
--- a/package.json
+++ b/package.json
@@ -1,22 +1,25 @@
 {
   "name": "checksum",
-  "description": "Checksum app for Nextcloud",
   "version": "1.1.1",
-  "author": "westberliner",
-  "license": "agpl",
   "private": true,
+  "description": "Checksum app for Nextcloud",
+  "author": "westberliner",
   "scripts": {
     "build": "NODE_ENV=production webpack --config webpack.prod.js",
+    "deploy": "rm -rf js/* && yarn install && yarn build && cd .. && tar -cvzf checksum.tar.gz -X checksum/.exclude checksum && cd checksum",
     "dev": "NODE_ENV=development webpack --config webpack.dev.js",
-    "watch": "NODE_ENV=development webpack --config webpack.dev.js --watch",
-    "deploy": "rm -rf js/* && yarn install && yarn build && cd .. && tar -cvzf checksum.tar.gz -X checksum/.exclude checksum && cd checksum"
+    "watch": "NODE_ENV=development webpack --config webpack.dev.js --watch"
   },
   "dependencies": {
     "@nextcloud/axios": "^1.5.0",
     "@nextcloud/l10n": "^1.4.1",
     "@nextcloud/router": "^1.2.0",
+    "@nextcloud/typings": "^1.0.0",
     "@nextcloud/vue": "^3.6.0",
-    "vue": "^2.6.12"
+    "@vue/cli-service": "^4.5.11",
+    "vue": "^2.6.12",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -25,6 +28,7 @@
     "@nextcloud/eslint-config": "^4.0.0-alpha.0",
     "@nextcloud/eslint-plugin": "^2.0.0",
     "@nextcloud/webpack-vue-config": "^3.0.0-alpha.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "core-js": "^3.8.1",
@@ -42,6 +46,7 @@
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-scss": "^3.19.0",
     "stylelint-webpack-plugin": "^2.1.1",
+    "typescript": "~3.9.3",
     "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.6.12",
     "webpack": "^5.11.0",
@@ -50,5 +55,6 @@
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
-  ]
+  ],
+  "license": "agpl"
 }
diff --git a/src/main.js b/src/main.ts
index ef1d10c..8760961 100644
--- a/src/main.js
+++ b/src/main.ts
@@ -19,14 +19,23 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
+/// <reference types="@nextcloud/typings" />
+
+declare var OC: Nextcloud.v20.OC
+declare var window: Nextcloud.v20.WindowWithGlobals
+declare var OCA: Checksum.OCA
+
 import Vue from 'vue'
 import { translate as t } from '@nextcloud/l10n'
+// @ts-ignore
 import ChecksumTab20 from './views/ChecksumTab20'
+// @ts-ignore
 import ChecksumTab from './views/ChecksumTab'
 
 // Init Sharing tab component
 const View = Vue.extend(ChecksumTab)
-let tabInstance = null
+let tabInstance: Checksum.VueElement | null = null;
 
 window.addEventListener('DOMContentLoaded', function() {
 	if (OCA.Files && OCA.Files.Sidebar) {
@@ -39,7 +48,9 @@ window.addEventListener('DOMContentLoaded', function() {
 				name: t('checksum', 'Checksum'),
 				icon: 'icon-category-auth',
 
-				mount(el, fileInfo, context) {
+				mount(el: HTMLElement, fileInfo: Checksum.FileInfo, context: any) {
+					console.log('context')
+					console.log(context)
 					if (tabInstance) {
 						tabInstance.$destroy()
 					}
@@ -51,14 +62,14 @@ window.addEventListener('DOMContentLoaded', function() {
 					tabInstance.update(fileInfo)
 					tabInstance.$mount(el)
 				},
-				update(fileInfo) {
-					tabInstance.update(fileInfo)
+				update(fileInfo: Checksum.FileInfo) {
+					tabInstance?.update(fileInfo)
 				},
 				destroy() {
-					tabInstance.$destroy()
+					tabInstance?.$destroy()
 					tabInstance = null
 				},
-				enabled(fileInfo) {
+				enabled(fileInfo: Checksum.FileInfo): boolean {
 					return (fileInfo.type === 'file')
 				},
 			})
diff --git a/src/shims-checksum.d.ts b/src/shims-checksum.d.ts
new file mode 100644
index 0000000..ac2683a
--- /dev/null
+++ b/src/shims-checksum.d.ts
@@ -0,0 +1,25 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace Checksum {
+    interface VueElement extends Vue {
+      update: function
+    }
+    interface OCA {
+      Files: {
+        Sidebar: {
+          Tab: function,
+          registerTab: function
+        }
+      }
+    }
+    interface FileInfo {
+      name: string,
+      path: string,
+      type: string
+    }
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..d9f24fa
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8c93ef5
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/webpack.common.js b/webpack.common.js
index 0c9e8b8..2d35679 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -4,7 +4,7 @@ const webpackConfig = require('@nextcloud/webpack-vue-config')
 
 module.exports = merge(webpackConfig, {
   entry: {
-    main: path.join(__dirname, 'src/main.js'),
+    main: path.join(__dirname, 'src/main.ts'),
   },
   output: {
     path: path.resolve(__dirname, 'js'),
@@ -13,9 +13,9 @@ module.exports = merge(webpackConfig, {
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.ts$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: 'ts-loader',
       },
     ],
   },