Convert frontend use TypeScript

frontend/package.json

@@ -10,6 +10,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
+    "@tsconfig/svelte": "^3.0.0",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
@@ -18,6 +19,7 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
+    "@rollup/plugin-typescript": "^8.3.0",
     "sirv-cli": "^1.0.0"
   }
 }

frontend/public/build/bundle.js

@@ -926,7 +926,7 @@ var app = (function () {
     			p = element("p");
     			t = text(t_value);
     			set_style(p, "color", "red");
-    			add_location(p, file$2, 60, 2, 1667);
+    			add_location(p, file$2, 60, 2, 1693);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -999,6 +999,7 @@ var app = (function () {
     			add_location(div2, file$2, 49, 4, 1193);
     			add_location(small1, file$2, 56, 7, 1574);
     			add_location(p, file$2, 56, 4, 1571);
+    			attr_dev(img, "alt", "This is a thumbnail");
     			if (!src_url_equal(img.src, img_src_value = /*video_info*/ ctx[3].Thumbnails[0].URL)) attr_dev(img, "src", img_src_value);
     			add_location(img, file$2, 57, 4, 1603);
     			attr_dev(a, "href", /*download_path*/ ctx[2]);
@@ -1653,11 +1654,11 @@ var app = (function () {
     			attr_dev(img, "width", "200px");
     			attr_dev(img, "class", "rounded mx-auto d-block p-3");
     			if (!src_url_equal(img.src, img_src_value = "newpipe_logo.svg")) attr_dev(img, "src", img_src_value);
-    			add_location(img, file, 13, 2, 246);
+    			add_location(img, file, 9, 2, 247);
     			attr_dev(div0, "class", "container");
-    			add_location(div0, file, 14, 2, 346);
+    			add_location(div0, file, 10, 2, 347);
     			attr_dev(div1, "class", "container");
-    			add_location(div1, file, 12, 0, 220);
+    			add_location(div1, file, 8, 0, 221);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1744,8 +1745,8 @@ var app = (function () {
     	}
     }
 
-    var app = new App({
-    	target: document.body
+    const app = new App({
+        target: document.body,
     });
 
     return app;

frontend/rollup.config.js

@@ -4,73 +4,79 @@ import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
+import typescript from '@rollup/plugin-typescript';
+import sveltePreprocess from 'svelte-preprocess';
 
 const production = !process.env.ROLLUP_WATCH;
 
 function serve() {
-	let server;
+    let server;
 
-	function toExit() {
-		if (server) server.kill(0);
+    function toExit() {
+	if (server) server.kill(0);
+    }
+
+    return {
+	writeBundle() {
+	    if (server) return;
+	    server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+		stdio: ['ignore', 'inherit', 'inherit'],
+		shell: true
+	    });
+
+	    process.on('SIGTERM', toExit);
+	    process.on('exit', toExit);
 	}
-
-	return {
-		writeBundle() {
-			if (server) return;
-			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
-				stdio: ['ignore', 'inherit', 'inherit'],
-				shell: true
-			});
-
-			process.on('SIGTERM', toExit);
-			process.on('exit', toExit);
-		}
-	};
+    };
 }
 
 export default {
-	input: 'src/main.js',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		file: 'public/build/bundle.js'
-	},
-	plugins: [
-		svelte({
-			compilerOptions: {
-				// enable run-time checks when not in production
-				dev: !production
-			}
-		}),
-		// we'll extract any component CSS out into
-		// a separate file - better for performance
-		css({ output: 'bundle.css' }),
+    input: 'src/main.ts',
+    output: {
+	sourcemap: true,
+	format: 'iife',
+	name: 'app',
+	file: 'public/build/bundle.js'
+    },
+    plugins: [
+	svelte({
+	    compilerOptions: {
+		// enable run-time checks when not in production
+		dev: !production
+	    },
+	    preprocess: sveltePreprocess({ sourceMap: !production })
+	}),
+	
+	typescript({ sourceMap: !production, inlineSources: !production }),
+	
+	// we'll extract any component CSS out into
+	// a separate file - better for performance
+	css({ output: 'bundle.css' }),
 
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
-		resolve({
-			browser: true,
-			dedupe: ['svelte']
-		}),
-		commonjs(),
+	// If you have external dependencies installed from
+	// npm, you'll most likely need these plugins. In
+	// some cases you'll need additional configuration -
+	// consult the documentation for details:
+	// https://github.com/rollup/plugins/tree/master/packages/commonjs
+	resolve({
+	    browser: true,
+	    dedupe: ['svelte']
+	}),
+	commonjs(),
 
-		// In dev mode, call `npm run start` once
-		// the bundle has been generated
-		!production && serve(),
+	// In dev mode, call `npm run start` once
+	// the bundle has been generated
+	!production && serve(),
 
-		// Watch the `public` directory and refresh the
-		// browser on changes when not in production
-		!production && livereload('public'),
+	// Watch the `public` directory and refresh the
+	// browser on changes when not in production
+	!production && livereload('public'),
 
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
+	// If we're building for production (npm run build
+	// instead of npm run dev), minify
+	production && terser()
+    ],
+    watch: {
+	clearScreen: false
+    }
 };

frontend/src/App.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Url from './Url.svelte';
   import TaskManager from './TaskManager.svelte';
 

frontend/src/Task.svelte

@@ -55,7 +55,7 @@
       {/if}
     </div>
     <p><small>{url}</small></p>
-    <img src={video_info.Thumbnails[0].URL}/>
+    <img alt="This is a thumbnail" src={video_info.Thumbnails[0].URL}/>
 </a>
 {:catch error}
   <p style="color: red">{error.message}</p>

frontend/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="svelte" />

frontend/src/main.js

@@ -1,7 +0,0 @@
-import App from './App.svelte';
-
-var app = new App({
-	target: document.body
-});
-
-export default app;

frontend/src/main.ts

@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+});
+
+export default app;

frontend/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}