TSLint: Add typedef rule, missing return types, lint task, eslint

package.json

@@ -6,7 +6,8 @@
     "dev": "npm run copy && pm2 start pm2.dev.config.js",
     "dev-local": "npm run copy && pm2 start pm2.dev.config.js --env local",
     "copy": "cp-cli server/mock dist/server/mock",
-    "compile": "cd server && tsc",
+    "lint": "tslint src/**/*.ts types/**/*.ts server/**/*.ts",
+    "compile": "npm run lint && cd server && tsc",
     "build": "npm run compile && npm run copy && vue-cli-service build --dest dist/webui",
     "zip": "bestzip tmp/webui.zip dist/*",
     "logs": "pm2 logs",
@@ -53,9 +54,11 @@
     "ajv": "^6.5.3",
     "bestzip": "^2.0.0",
     "cp-cli": "^1.1.2",
+    "eslint": "^5.5.0",
     "node-sass": "^4.9.0",
     "release-it": "^7.6.0",
     "sass-loader": "^7.0.1",
+    "tslint": "^5.11.0",
     "typescript": "^2.1.0",
     "vue-cli-plugin-vuetify": "^0.1.6",
     "vue-template-compiler": "^2.5.16"

pm2.config.js

@@ -9,6 +9,13 @@ module.exports = {
     args: "serve",
     env_local
   },
+  // tslint: {
+  //   name: 'frog-tslint',
+  //   script: './node_modules/tslint/bin/tslint',
+  //   args: "server/**/*.ts",
+  //   restart_delay: 10000,
+  //   env_local
+  // },
   compileServer: {
     name: "frog-compile-server",
     script: "./node_modules/typescript/bin/tsc",

pm2.dev.config.js

@@ -4,5 +4,10 @@ const runServer = tasks.runServer;
 runServer.watch = true;
 
 module.exports = {
-  apps: [tasks.compileServer, tasks.watchUI, runServer]
+  apps: [
+    // tasks.tslint,
+    tasks.compileServer,
+    tasks.watchUI,
+    runServer,
+  ]
 };

server/artifactory-service.ts

@@ -5,6 +5,7 @@ import * as tar from 'tar';
 import * as showdown from 'showdown';
 import * as emoji from 'node-emoji';
 import { PackagesResponse } from '../types/PackageResponse';
+import PackageId from '../types/PackageId';
 
 import config from './config-service.js';
 const repoKey = config.artifactory.repoKey;
@@ -18,7 +19,7 @@ axios.defaults.baseURL = `http${s}://${
 }/artifactory/api/npm/${repoKey}`;
 axios.defaults.headers.common.Authorization = config.artifactory.apiKey;
 
-function name2url({ scope, packageName }) {
+function name2url({ scope, packageName }: PackageId): string {
   return `${scope ? `${scope}/` : ''}${packageName}`;
 }
 
@@ -47,7 +48,7 @@ function readme2Html(readmeFile: string): string {
   return html;
 }
 
-function readMainCode(storageDir): string {
+function readMainCode(storageDir: string): string {
   const packageJson = fs.readJSONSync(path.join(storageDir, `package.json`));
   try {
     return fs.readFileSync(path.join(storageDir, packageJson.main)).toString();
@@ -73,7 +74,7 @@ function fetchPackages(): AxiosPromise<PackagesResponse> {
 async function getPackageDetail({
   scope,
   packageName,
-}): Promise<AxiosResponse> {
+}: PackageId): Promise<AxiosResponse> {
   const latestVersionResponse = await getDistTags({ scope, packageName });
   const latestVersion = latestVersionResponse.data.latest;
   const key = `${scope}-${packageName}-${latestVersion}`;
@@ -171,7 +172,7 @@ async function getPackageDetail({
   });
 }
 
-function readAdditionalCode(storageDir) {
+function readAdditionalCode(storageDir: string): { readme: string, mainCode: string } {
   let readme;
   let mainCode;
   try {
@@ -190,7 +191,7 @@ function readAdditionalCode(storageDir) {
   };
 }
 
-function getDistTags({ scope, packageName }): AxiosPromise<any> {
+function getDistTags({ scope, packageName }: PackageId): AxiosPromise<any> {
   return process.env.MOCK
     ? new Promise<AxiosResponse>((resolve, reject) => {
         resolve(

server/index.ts

@@ -1,4 +1,5 @@
 import * as express from 'express';
+import { Response } from 'express-serve-static-core';
 import * as bodyParser from 'body-parser';
 import * as cors from 'cors';
 import * as morgan from 'morgan';
@@ -13,7 +14,7 @@ app.use(morgan('combined'));
 app.use(bodyParser.json());
 app.use(cors());
 
-function handleError(error, targetResponse, msg) {
+function handleError(error: Error, targetResponse: Response, msg: string): void {
   targetResponse
     .status(500)
     .send(`Error: ${msg} Please verify your server settings.\n\n${error}`);

server/tsconfig.json

@@ -5,8 +5,8 @@
     "noImplicitAny": false,
     "module": "commonjs",
     "target": "es5",
-    "lib": ["es5", "es2015", "dom", "scripthost"]
+    "lib": ["es5", "es2015", "dom", "scripthost"],
   },
   "include": ["**/*.ts"],
-  "exclude": ["node_modules", "**/*.spec.ts"]
+  "exclude": ["node_modules", "**/*.spec.ts"],
 }

src/App.vue

@@ -192,7 +192,10 @@ export default class App extends Vue {
   private hasFocus: boolean = false;
   private btnIconSize: number = 36;
   private navItems: any[] = [];
-  private error = {
+  private error: {
+    show: boolean,
+    msg: string,
+  } = {
     show: false,
     msg: '',
   };
@@ -241,7 +244,7 @@ export default class App extends Vue {
     return this.$refs.searchbar.$el.querySelector('input');
   }
 
-  private goHome() {
+  private goHome(): void {
     router.push('/');
     this.$refs.searchbar.reset();
   }
@@ -291,7 +294,7 @@ export default class App extends Vue {
     this.fireSearchFilterEvent();
   }
 
-  private onSearchChange(values: Searchable[]) {
+  private onSearchChange(values: Searchable[]): void {
     this.hasFocus = true;
     for (const value of values) {
       if (value instanceof Package) {
@@ -303,13 +306,13 @@ export default class App extends Vue {
     this.adaptContentSpacing();
   }
 
-  private onSearchEnter(event) {
+  private onSearchEnter(event: KeyboardEvent): void {
     if (event.ctrlKey) {
       this.onSearchSubmit(event);
     }
   }
 
-  private onSearchSubmit(event) {
+  private onSearchSubmit(event?: Event): void {
     router.push({path: '/'});
     this.$nextTick(this.fireSearchFilterEvent);
     this.$nextTick(this.$refs.searchbar.blur);
@@ -321,30 +324,30 @@ export default class App extends Vue {
     }, 0);
   }
 
-  private focusSearch() {
+  private focusSearch(): void {
     this.$nextTick(this.$refs.searchbar.focus);
   }
 
-  private onSearchInput(e: Event) {
+  private onSearchInput(e: Event): void {
     const target = e.target as HTMLInputElement;
     this.fireSearchFilterEvent();
   }
 
-  private fireSearchFilterEvent() {
+  private fireSearchFilterEvent(): void {
     this.$nextTick(() => {
       EventBus.$emit(Events.FILTER_SEARCH, { filters: this.activeFilters, query: this.searchInput.value });
     });
   }
 
-  private adaptContentSpacing() {
+  private adaptContentSpacing(): void {
     setTimeout(() => {
       const contentElement = document.querySelector('.v-content') as HTMLElement;
       const toolbar = document.querySelector('.v-toolbar__content') as HTMLElement;
       contentElement.style.padding = `${toolbar.offsetHeight}px 0 0`;
     }, 0);
   }
 
-  private getIcon(icon: string) {
+  private getIcon(icon: string): NodeRequire {
     return require(`@/../art/${icon}.svg`);
   }
 }

src/components/About.vue

@@ -106,13 +106,13 @@ export default class About extends Vue {
     this.loadConfig();
   }
 
-  private loadMetaInfo() {
+  private loadMetaInfo(): void {
     DataStore.Instance.getMetaInfo().then((response) => {
       this.data.meta = response;
     });
   }
 
-  private loadConfig() {
+  private loadConfig(): void {
     DataStore.Instance.getConfig().then((response) => {
       if (response) {
         this.data.config = response;

src/components/CodeBlock.vue

@@ -43,13 +43,13 @@ export default class CodeBlock extends Vue {
     super();
   }
 
-  private onCopy() {
+  private onCopy(): void {
     this.showNotification = true;
     this.notificationColor = 'success';
     this.notificationText = 'Copied code to clipboard.';
   }
 
-  private onError() {
+  private onError(): void {
     this.showNotification = false;
     this.notificationColor = 'error';
     this.notificationText = 'Error: could not copy code to clipboard!';

src/components/LoadingSpinner.vue

@@ -34,7 +34,12 @@ import { EventBus, Errors } from '@/services/event-bus';
 })
 export default class LoadingSpinner extends Vue {
   @Prop() private msg!: string;
-  private error = {
+  private error: {
+    show: boolean,
+    msg: string,
+    status: number,
+    statusText: string,
+  } = {
     show: false,
     msg: '',
     status: 0,

src/components/PackageList.vue

@@ -99,7 +99,7 @@ export default class Packages extends Vue {
     });
   }
 
-  private loadConfig() {
+  private loadConfig(): void {
     DataStore.Instance.getConfig().then((config) => {
       if (config) {
         this.artifactoryUrl = config.artifactory.host;

src/services/BackendApi.ts

@@ -3,6 +3,7 @@ import { PackagesResponse } from '../../types/PackageResponse';
 import { PackageMetaDataDTO } from '../../types/package-meta-data';
 import { IPackageJSON } from '../../types/package-json';
 import Config from '../../types/Config';
+import PackageId from '../../types/PackageId';
 
 export default class BackendApi {
   private static instance: BackendApi;
@@ -31,7 +32,7 @@ export default class BackendApi {
   public getPackageDetail({
     scope,
     packageName,
-  }): AxiosPromise<PackageMetaDataDTO> {
+  }: PackageId): AxiosPromise<PackageMetaDataDTO> {
     return this.get(`packageDetail/${scope ? `${scope}/` : ''}${packageName}`);
   }
 

src/services/DataStore.ts

@@ -8,6 +8,7 @@ import Searchable from '../../types/Searchable';
 import { IPackageJSON } from '../../types/package-json';
 import Config from '../../types/Config';
 import { EventBus, Errors } from '@/services/event-bus';
+import PackageId from 'types/PackageId';
 
 export default class DataStore {
   public static get Instance(): DataStore {
@@ -44,10 +45,7 @@ export default class DataStore {
     this.packageDetails = {};
   }
 
-  public async getPackageDetail(packageId: {
-    scope: string;
-    packageName: string;
-  }): Promise<{
+  public async getPackageDetail(packageId: PackageId): Promise<{
     packageDetail: Package;
     currentPackage?: Package;
   }> {

src/views/PackageDetail.vue

@@ -266,6 +266,7 @@ import CodeBlock from '@/components/CodeBlock.vue';
 import CrafterAvatar from '@/components/CrafterAvatar.vue';
 import { EventBus, Events } from '@/services/event-bus';
 import { setTimeout } from 'timers';
+import Searchable from '../../types/Searchable';
 
 @Component({
   components: {
@@ -312,7 +313,7 @@ export default class PackageDetail extends Vue {
     this.init();
   }
 
-  private resetModel() {
+  private resetModel(): void {
     this.activeTab = 0;
     this.data = {
       packageDetail: null,
@@ -323,20 +324,23 @@ export default class PackageDetail extends Vue {
     };
   }
 
-  private init() {
+  private init(): void {
     Promise.all([
       this.getPackageDetails(),
       this.loadConfig(),
     ]);
   }
 
-  private loadConfig() {
+  private loadConfig(): Promise<Config | undefined> {
     return DataStore.Instance.getConfig().then((config) => {
-      this.data.config = config;
+      return this.data.config = config;
     });
   }
 
-  private getPackageDetails() {
+  private getPackageDetails(): Promise<{
+    packageDetail: Package;
+    currentPackage?: Package;
+  }> {
     return DataStore.Instance.getPackageDetail({
       scope: Router.currentRoute.params.scope,
       packageName: Router.currentRoute.params.packageName,
@@ -345,10 +349,17 @@ export default class PackageDetail extends Vue {
       this.data.currentTags = response.packageDetail['dist-tags'];
       this.data.versionsHistory = response.packageDetail.versions;
       this.data.currentPackage = response.currentPackage;
+      return {
+        packageDetail: response.packageDetail,
+        currentPackage: response.currentPackage,
+      };
     });
   }
 
-  private getInstallCode() {
+  private getInstallCode(): {
+    config: string,
+    install: string,
+  } | undefined {
     if (this.data.packageDetail && this.data.config && this.data.config.artifactory) {
       return {
         config: `npm config set ${
@@ -365,10 +376,10 @@ export default class PackageDetail extends Vue {
     }
   }
 
-  private triggerSearchFilter(tag) {
+  private triggerSearchFilter(searchable: Searchable): void {
     router.push(`/`);
     this.$nextTick(() => {
-      EventBus.$emit(Events.TRIGGER_FILTER_SEARCH, { filters: [tag] });
+      EventBus.$emit(Events.TRIGGER_FILTER_SEARCH, { filters: [searchable] });
     });
   }
 }

tslint.json

@@ -11,6 +11,7 @@
     "ordered-imports": false,
     "object-literal-sort-keys": false,
     "no-consecutive-blank-lines": false,
-    "no-console": false
+    "no-console": false,
+    "typedef": [true, "call-signature", "parameter", "member-variable-declaration"]
   }
 }