Use Flow, refactor code to use classes, improve build system

.babelrc

@@ -0,0 +1,7 @@
+{
+	"exclude": "node_modules/**",
+	"presets": [
+		"@babel/preset-flow"
+	],
+	"sourceMap": false
+}

.eslintrc.js

@@ -27,12 +27,6 @@ module.exports = {
 			"always"
 		]
 	},
-	"globals": {
-		"angular": true,
-		"jQuery": true,
-		"$": true,
-		"GM": true
-	},
 	"settings": {
 		"flowtype": {
 			"onlyFilesWithFlowAnnotation": false

Gruntfile.js

@@ -20,6 +20,7 @@
 const resolve = require('rollup-plugin-node-resolve');
 const commonJs = require('rollup-plugin-commonjs');
 const virtual = require('rollup-plugin-virtual');
+const babel  = require('rollup-plugin-babel');
 
 const licenseBanner = require('./licenseBanner');
 const userScriptBanner = require('./userScriptBanner');
@@ -29,20 +30,6 @@ const baseFileName = 'qc-ext';
 module.exports = function (grunt) {
 	'use strict';
 
-	grunt.registerTask('flowRemoveTypes', 'Runs flow-remove-types.', function () {
-		const flowRemoveTypes = require('flow-remove-types');
-
-		const files = grunt.file.expand('assets/js/**/*.js');
-		for (var i = 0, len = files.length; i < len; i++) {
-			const inputFile = files[i];
-			const outputFileName = inputFile.substring('assets/js/'.length);
-
-			const input = grunt.file.read(inputFile);
-			const output = flowRemoveTypes(input);
-			grunt.file.write('assets/removeFlow/' + outputFileName, output.toString());
-		}
-	});
-
 	// Project configuration.
 	grunt.initConfig({
 		pkg: grunt.file.readJSON('package.json'),
@@ -167,6 +154,7 @@ module.exports = function (grunt) {
 			options: {
 				pureExternalImports: true,
 				plugins: [
+					babel(),
 					virtual({
 						'jquery': 'export default jQuery',
 						'angular': 'export default angular',
@@ -180,7 +168,7 @@ module.exports = function (grunt) {
 			},
 			main: {
 				files: {
-					'assets/generated/rollup.js': 'assets/removeFlow/app.js'
+					'assets/generated/rollup.js': 'assets/js/app.js'
 				}
 			}
 		},
@@ -189,6 +177,16 @@ module.exports = function (grunt) {
 				server: false
 			},
 			files: ['assets/js/**/*.js']
+		},
+		babel: {
+			options: {
+				sourceMap: true
+			},
+			dist: {
+				files: {
+					'assets/generated/babel.js': 'assets/js/app.js'
+				}
+			}
 		}
 	});
 
@@ -198,13 +196,12 @@ module.exports = function (grunt) {
 	// Register the tasks.
 	grunt.registerTask('default', ['build']);
 	grunt.registerTask('build', [
-		'flow',               // Type-checking
-		'flowRemoveTypes',    // Removes flow annotations
-		'eslint',             // Check for lint
 		'compass',            // Compile CSS
 		'htmlmin',            // Minify HTML templates
 		'filesToJavascript',  // Convert HTML templates to JS variables
 		'concat:variables',   // Create finished variable.pass2.js file
+		'flow',               // Type-checking
+		'eslint',             // Check for lint
 		'rollup:main',        // Rollup all the javascript files into one
 		'concat:source',      // Add banner to rollup result
 		'uglify',             // Minify the javascript

assets/js/app.js

@@ -28,7 +28,7 @@ import { setup as setupAngular } from './modules/angular-app';
 (async () => {
 	await settings.loadSettings();
 
-	let domModifier = new DomModifier();
+	const domModifier = new DomModifier();
 	domModifier.modify();
 
 	setupAngular();

assets/js/constants.js

@@ -39,7 +39,7 @@ function getWebserviceBaseUrl() {
 const comicDataUrl = getWebserviceBaseUrl() + 'comicdata/';
 const itemDataUrl = getWebserviceBaseUrl() + 'itemdata/';
 
-let constants = {
+const constants = {
 	settingsKey: 'settings',
 
 	developmentMode,
@@ -58,7 +58,6 @@ let constants = {
 	setGuestComicUrl: comicDataUrl + 'setguest',
 	setNonCanonUrl: comicDataUrl + 'setnoncanon',
 
-
 	itemFriendDataUrl: itemDataUrl + 'friends/',
 	itemLocationDataUrl: itemDataUrl + 'locations/',
 	setItemDataPropertyUrl: itemDataUrl + 'setproperty',

assets/js/modules/angular-app.js

@@ -1,3 +1,4 @@
+// @flow
 /*
  * Copyright (C) 2016-2018 Alexander Krivács Schrøder <[email protected]>
  *

assets/js/modules/angular/api/comicData.js

@@ -0,0 +1,75 @@
+// @flow
+/*
+ * Copyright (C) 2016-2018 Alexander Krivács Schrøder <[email protected]>
+ *
+ * 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 { ItemType } from './itemData';
+
+export type ComicEditorDataMissing = {
+	first: ?number;
+	previous: ?number;
+	next: ?number;
+	last: ?number;
+	any: boolean;
+}
+
+export type ComicEditorData = {
+	missing: {
+		cast: ComicEditorDataMissing;
+		location: ComicEditorDataMissing;
+		storyline: ComicEditorDataMissing;
+		title: ComicEditorDataMissing;
+		tagline: ComicEditorDataMissing;
+		any: boolean;
+	}
+};
+
+export type ComicItem = {
+	first: ?number;
+	previous: ?number;
+	first: ?number;
+	last: ?number;
+	id: number;
+	shortName: string;
+	name: string;
+	type: ItemType;
+	color: string;
+};
+
+export type ComicData = {
+	comic: number;
+	hasData: boolean;
+	publishDate: ?string;
+	isAccuratePublishDate: ?boolean;
+	title: ?string;
+	tagline: ?string;
+	isGuestComic: ?boolean;
+	isNonCanon: ?boolean;
+	news: ?string;
+	previous: ?number;
+	next: ?number;
+	editorData?: ComicEditorData;
+	items: Array<ComicItem>;
+	allItems?: Array<ComicItem>;
+};
+
+export type ComicItemRepository = {
+	[string]: ComicItem[];
+
+	cast?: ComicItem[];
+	location?: ComicItem[];
+	storyline?: ComicItem[];
+}

assets/js/modules/angular/api/itemData.js

@@ -0,0 +1,50 @@
+// @flow
+/*
+ * Copyright (C) 2016-2018 Alexander Krivács Schrøder <[email protected]>
+ *
+ * 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/>.
+ */
+
+export type ItemType = 'cast' | 'location' | 'storyline';
+
+export type ItemBaseData = {
+	id: number;
+	shortName: string;
+	name: string;
+	type: ItemType;
+}
+
+export type ItemBaseDataWithColor = ItemBaseData & {
+	color: string;
+}
+
+export type ItemData = ItemBaseDataWithColor & {
+	first: number;
+	last: number;
+	appearances: number;
+	totalComics: number;
+	presence: number;
+	hasImage: boolean;
+};
+
+export type ItemRelationData = ItemBaseDataWithColor & {
+	count: number;
+	percentage: number;
+};
+
+export type DecoratedItemData = ItemData & {
+	highlightColor: string;
+	locations: ItemRelationData[];
+	friends: ItemRelationData[];
+};

assets/js/modules/angular/assemble.js

@@ -1,3 +1,4 @@
+// @flow
 /*
  * Copyright (C) 2016-2018 Alexander Krivács Schrøder <[email protected]>
  *
@@ -15,6 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import type { AngularModule } from 'angular';
+
 import config from './config';
 import run from './run';
 
@@ -25,6 +28,7 @@ import titleController from './controllers/titleController';
 import colorService from './services/colorService';
 import comicService from './services/comicService';
 import eventFactory from './services/eventFactory';
+import eventService from './services/eventService';
 import messageReportingService from './services/messageReportingService';
 import styleService from './services/styleService';
 
@@ -47,7 +51,7 @@ import qcSetTaglineDirective from './directives/qcSetTaglineDirective';
 import qcSettingsDirective from './directives/qcSettingsDirective';
 import qcSetTitleDirective from './directives/qcSetTitleDirective';
 
-export default function (app) {
+export default function (app: AngularModule) {
 	config(app);
 	run(app);
 
@@ -58,6 +62,7 @@ export default function (app) {
 	colorService(app);
 	comicService(app);
 	eventFactory(app);
+	eventService(app);
 	messageReportingService(app);
 	styleService(app);
 

assets/js/modules/angular/config.js

@@ -1,3 +1,4 @@
+// @flow
 /*
  * Copyright (C) 2016-2018 Alexander Krivács Schrøder <[email protected]>
  *
@@ -15,17 +16,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import GM from 'greasemonkey';
+import angular from 'angular';
+import type { AngularModule } from 'angular';
+
 import settings from './../settings';
 
 import decorateHttpService from './decorateHttpService';
+import decorateScope from './decorateScope';
 
-export default function (app) {
+export default function (app: AngularModule) {
 	// Set up routing and do other configuration
 	app.config(['$stateProvider', '$urlRouterProvider',
 		'$locationProvider', '$provide', '$logProvider',
 		function ($stateProvider, $urlRouterProvider, $locationProvider,
 			$provide, $logProvider) {
 			decorateHttpService($provide);
+			decorateScope($provide);
 
 			$stateProvider.state('homepage', {
 				url: '^/$',
@@ -44,6 +51,6 @@ export default function (app) {
 
 			$locationProvider.html5Mode(true);
 
-			$logProvider.debugEnabled(settings.showDebugLogs);
+			$logProvider.debugEnabled(settings.values.showDebugLogs);
 		}]);
 }