Merge pull request #69 from YouKnowBlom/convert-to-ts

Add typescript and eslint-typescript, convert app.js

.eslintrc.js

@@ -1,11 +1,16 @@
 module.exports = {
     root: true,
+    parser: '@typescript-eslint/parser',
+    plugins: [
+        '@typescript-eslint'
+    ],
     env: {
         node: true,
         es6: true
     },
     extends: [
-        'eslint:recommended'
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended'
     ],
     parserOptions: {
         ecmaVersion: 2020,
@@ -28,17 +33,24 @@ module.exports = {
         'semi': ["error"],
         'space-before-blocks': ["error"]
     },
-    overrides: [{
-        files: ['./src/**/*.js'],
-        env: {
-            node: false,
-            browser: true,
-            es6: true
-        },
-        globals: {
-            cast: 'readonly',
-            PRODUCTION: 'readonly',
-            $scope: 'writable'
+    overrides: [
+        {
+            files: ['./src/**/*.js', './src/**/*.ts'],
+            env: {
+                node: false,
+                browser: true,
+                es6: true
+            },
+            globals: {
+                cast: 'readonly',
+                PRODUCTION: 'readonly',
+                $scope: 'writable'
+            },
+            rules: {
+                // Disable these until we have converted the project to TS
+                '@typescript-eslint/explicit-module-boundary-types': "off",
+                '@typescript-eslint/no-explicit-any': "off"
+            }
         }
-    }]
-}
+    ]
+}

package.json

@@ -25,7 +25,13 @@
     "lint": "eslint ./src/"
   },
   "devDependencies": {
+    "@types/chromecast-caf-receiver": "^5.0.12",
+    "@typescript-eslint/eslint-plugin": "^4.6.0",
+    "@typescript-eslint/parser": "^4.6.0",
     "eslint": "6.8.0",
-    "eslint-plugin-eslint-comments": "^3.1.2"
+    "eslint-plugin-eslint-comments": "^3.1.2",
+    "source-map-loader": "^1.1.2",
+    "ts-loader": "^8.0.7",
+    "typescript": "^4.0.5"
   }
 }

src/app.js → src/app.ts

@@ -1,7 +1,7 @@
 import "./components/maincontroller";
 
-let senders = cast.framework.CastReceiverContext.getInstance().getSenders();
-let id = senders.length !== 0 && senders[0].id ? senders[0].id : new Date().getTime();
+const senders = cast.framework.CastReceiverContext.getInstance().getSenders();
+const id = senders.length !== 0 && senders[0].id ? senders[0].id : new Date().getTime();
 
 window.deviceInfo = {
     deviceId: id,

src/types/global.d.ts

@@ -0,0 +1,16 @@
+declare global {
+    export let PRODUCTION: boolean;
+    export interface Window {
+        deviceInfo: DeviceInfo;
+        mediaElement: HTMLElement | null;
+        playlist: Array<any>;
+        currentPlaylistIndex: number;
+        repeatMode: "RepeatOne" | "RepeatAll" | "RepeatNone";
+    }
+}
+
+export interface DeviceInfo {
+    deviceId: string | number,
+    deviceName: string,
+    versionNumber: string
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "target": "ES2018",
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "allowJs": true,
+        "sourceMap": true,
+        "outDir": "./dist/",
+        "strict": true
+    }
+}

webpack.config.js

@@ -5,10 +5,13 @@ const webpack = require("webpack");
 
 let config = {
     context: path.resolve(__dirname, "src"),
-    entry: "./app.js",
+    entry: "./app.ts",
     output: {
         filename: "bundle.js",
-        path: path.resolve(__dirname, "dist"),
+        path: path.resolve(__dirname, "dist")
+    },
+    resolve: {
+        extensions: [".webpack.js", ".web.js", ".ts", ".js"]
     },
     plugins: [
         new CleanWebpackPlugin(),
@@ -17,7 +20,13 @@ let config = {
             to: ".",
             ignore: ['*.js']
         }])
-    ]
+    ],
+    module: {
+        rules: [
+            { test: /\.tsx?$/, loader: "ts-loader" },
+            { test: /\.js$/, loader: "source-map-loader" }
+        ]
+    }
 };
 
 module.exports = (env, argv) => {
@@ -30,7 +39,7 @@ module.exports = (env, argv) => {
     );
 
     if (!isProduction) {
-        config.devtool = "#inline-source-map";
+        config.devtool = "inline-source-map";
     }
 
     return config;