Typescript migration

index.ts

@@ -0,0 +1,61 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { AggregatedResult, TestResult } from '@jest/test-result';
+import { Circus, Config } from '@jest/types';
+import { Test, Context, ReporterOnStartOptions } from '@jest/reporters';
+function mkdirs(dirpath: string) {
+    if (!fs.existsSync(path.dirname(dirpath))) {
+        mkdirs(path.dirname(dirpath));
+    }
+    fs.mkdirSync(dirpath);
+}
+
+type HtmlReporter4JestOptions = {
+    title?: string;
+    reportPath?: string;
+    reportFileName?: string;
+};
+
+declare module '@jest/test-result' {
+    interface AggregatedResult {
+        endTime: number;
+        reporterOptions: HtmlReporter4JestOptions & Config.DefaultOptions;
+    }
+}
+
+class HTMLReport4Jest {
+    private _globalConfig: Config.GlobalConfig;
+    private _options: Config.DefaultOptions;
+
+    constructor(
+        globalConfig: Config.GlobalConfig,
+        options: Config.DefaultOptions,
+    ) {
+        this._globalConfig = globalConfig;
+        this._options = options;
+    }
+
+    onRunComplete(context: Set<Context>, result: AggregatedResult) {
+        result.endTime = Date.now();
+        result.reporterOptions = { ...this._options };
+        const data = JSON.stringify(result);
+        const templatePath = path.resolve(__dirname, './index.html');
+        const htmlTemplate = fs.readFileSync(templatePath, 'utf-8');
+        result.reporterOptions.title = result.reporterOptions.title
+            ? result.reporterOptions.title
+            : 'Jest Html Report';
+        const outputContext = htmlTemplate
+            .replace('%RESULTDATA%', data)
+            .replace('%TITLE%', result.reporterOptions.title);
+        const publicPath = result.reporterOptions.reportPath
+            ? result.reporterOptions.reportPath
+            : './temp/';
+        const filename = result.reporterOptions.reportFileName
+            ? result.reporterOptions.reportFileName
+            : 'result.html';
+        fs.existsSync(publicPath) === false && publicPath && mkdirs(publicPath);
+        fs.writeFileSync(publicPath.concat(filename), outputContext, 'utf-8');
+    }
+}
+
+module.exports = HTMLReport4Jest;

jest.config.js

@@ -2,7 +2,7 @@ module.exports = {
     reporters: [
         'default',
         [
-            '<rootDir>/index.js',
+            '<rootDir>/dist/index.js',
             {
                 title: 'Test Report',
                 expandResults: true,

package.json

@@ -2,6 +2,7 @@
     "name": "htmlreport4jest",
     "version": "0.5.0-semantically-released",
     "description": "Html report for jest",
+    "main": "dist/index.js",
     "keywords": [
         "jest",
         "jest report",
@@ -25,21 +26,24 @@
         "url": "https://github.com/vinothdevelop/HTMLReport4Jest/issues"
     },
     "homepage": "https://vinothdevelop.github.io/HTMLReport4Jest/result.html",
-    "dependencies": {},
+    "dependencies": {
+    },
     "scripts": {
-        "start": "webpack-dev-server --config webpack.development.config.js --open",
-        "build": "webpack --config webpack.build.config.js --mode production",
+        "build:index": "yarn tsc -p .",
+        "start": "webpack serve --config webpack.development.config.js",
+        "build": "webpack --config webpack.build.config.js && yarn build:index",
         "test": "jest --silent",
         "lint": "eslint ."
     },
     "eslintConfig": {
         "extends": "react-app"
     },
     "files": [
-        "index.js",
+        "dist/index.js",
         "readme.md",
         "dist/index.html"
     ],
+    "types": "./dir/index.d.ts",
     "browserslist": {
         "production": [
             ">0.2%",
@@ -56,33 +60,38 @@
         "@babel/core": "^7.10.4",
         "@babel/preset-env": "^7.10.4",
         "@babel/preset-react": "^7.10.4",
-        "@jest/types": "^26.1.0",
+        "@jest/types": "^26.3.0",
+        "@jest/reporters": "^26.4.1",
+        "@jest/test-result": "^26.3.0",
         "@testing-library/jest-dom": "^5.11.0",
         "@testing-library/react": "^11.0.0",
+        "@types/node": "^14.14.9",
         "@types/react-dev-utils": "^9.0.4",
         "ansi-to-html": "^0.6.14",
         "babel-eslint": "^10.1.0",
         "babel-loader": "^8.1.0",
         "clean-webpack-plugin": "^3.0.0",
-        "css-loader": "^4.0.0",
+        "css-loader": "^5.0.1",
         "eslint": "^7.4.0",
         "eslint-config-prettier": "^6.11.0",
         "eslint-loader": "^4.0.2",
         "eslint-plugin-prettier": "^3.1.4",
         "eslint-plugin-react": "^7.20.3",
         "eslint-plugin-react-hooks": "^4.0.8",
         "html-loader": "^1.1.0",
-        "html-webpack-plugin": "^4.3.0",
+        "html-webpack-plugin": "^5.0.0-alpha.14",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^26.1.0",
         "prettier": "^2.0.5",
-        "react": "^16.13.1",
-        "react-dev-utils": "^10.2.1",
-        "react-dom": "^16.13.1",
+        "react": "^17.0.1",
+        "react-dev-utils": "^11.0.0",
+        "react-dom": "^17.0.1",
         "semantic-release": "^17.1.1",
-        "style-loader": "^1.2.1",
-        "webpack": "^4.43.0",
-        "webpack-cli": "^3.3.12",
+        "style-loader": "^2.0.0",
+        "ts-loader": "^8.0.4",
+        "typescript": "^4.1.2",
+        "webpack": "^5.6.0",
+        "webpack-cli": "^4.2.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^5.0.9"
     }

tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "ES5",
+        "allowJs": true,
+        "experimentalDecorators": true,
+        "typeRoots": ["../node_modules/@types"],
+        "sourceMap": true,
+        "declaration": true,
+        "declarationDir": "./dist/"
+    },
+    "exclude": ["node_modules"],
+    "files": ["index.ts"],
+    "include": ["index.ts"]
+}

webpack.build.config.js

@@ -6,7 +6,7 @@ const HtmlWebPackPlugin = require('html-webpack-plugin');
 module.exports = merge.merge(common, {
     mode: 'production',
     plugins: [
-        new CleanWebpackPlugin(),
+        new CleanWebpackPlugin({}),
         new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/.*/]),
     ],
 });

webpack.common.js

@@ -3,6 +3,9 @@ const HtmlWebPackPlugin = require('html-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const publicUrl = './public';
 module.exports = {
+    output: {
+        path: path.resolve(process.cwd(), 'dist'),
+    },
     module: {
         rules: [
             {

webpack.development.config.js

@@ -8,7 +8,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 
 module.exports = merge.merge(common, {
     output: {
-        publicPath: 'public/',
+        publicPath: '/',
     },
     mode: 'development',
     devtool: 'inline-source-map',