wip: Code and Tests working

Author: rtfpessoa

.eslintignore

@@ -3,4 +3,5 @@ coverage/**
 build/**
 docs/**
 node_modules/**
-src/diff2html-templates.js
+src/diff2html-templates.*
+typings/**

.gitignore

@@ -32,4 +32,4 @@ bower_components/
 /docs/
 /dist/
 /build/
-/src/diff2html-templates.js
+/src/diff2html-templates.*

README.md

@@ -201,7 +201,7 @@ The HTML output accepts a Javascript object with configuration. Possible options
   - `matchingMaxComparisons`: perform at most this much comparisons for line matching a block of changes, default is `2500`
   - `maxLineSizeInBlockForComparison`: maximum number os characters of the bigger line in a block to apply comparison, default is `200`
   - `maxLineLengthHighlight`: only perform diff changes highlight if lines are smaller than this, default is `10000`
-  - `templates`: object with previously compiled templates to replace parts of the html
+  - `compiledTemplates`: object with previously compiled templates to replace parts of the html
   - `rawTemplates`: object with raw not compiled templates to replace parts of the html
   - `renderNothingWhenEmpty`: render nothing if the diff shows no change in its comparison: `true` or `false`, default is `false`
   > For more information regarding the possible templates look into [src/templates](https://github.com/rtfpessoa/diff2html/tree/master/src/templates)

package.json

@@ -41,7 +41,7 @@
     "coverage": "jest --collectCoverage",
     "coverage-html": "yarn run coverage && open ./coverage/index.html",
     "codacy": "cat ./coverage/lcov.info | codacy-coverage",
-    "build": "rm -rf build; yarn run build-scripts && yarn run build-css && yarn run build-templates && yarn run build-library && yarn run build-browser-bundle && yarn run build-website",
+    "build": "rm -rf build docs; yarn run build-scripts && yarn run build-css && yarn run build-templates && yarn run build-library && yarn run build-browser-bundle && yarn run build-website",
     "build-scripts": "tsc -p tsconfig.scripts.json",
     "build-css": "./scripts/build-css.sh",
     "build-templates": "./scripts/build-templates.sh",
@@ -57,41 +57,42 @@
     "fs": false
   },
   "dependencies": {
-    "diff": "^4.0.1",
-    "hogan.js": "^3.0.2",
-    "merge": "^1.2.1",
-    "whatwg-fetch": "^3.0.0"
+    "diff": "4.0.1",
+    "hogan.js": "3.0.2"
   },
   "devDependencies": {
-    "@types/hogan.js": "^3.0.0",
+    "@types/diff": "4.0.2",
+    "@types/highlight.js": "9.12.3",
     "@types/jest": "24.0.18",
-    "@types/mkdirp": "^0.5.2",
-    "@types/node": "^12.7.2",
-    "@types/nopt": "^3.0.29",
+    "@types/mkdirp": "0.5.2",
+    "@types/node": "12.7.2",
+    "@types/nopt": "3.0.29",
     "@typescript-eslint/eslint-plugin": "2.0.0",
     "@typescript-eslint/parser": "2.0.0",
-    "autoprefixer": "^9.6.0",
-    "browserify": "^16.5.0",
-    "clean-css-cli": "^4.3.0",
-    "codacy-coverage": "^3.4.0",
+    "autoprefixer": "9.6.0",
+    "browserify": "16.5.0",
+    "clean-css-cli": "4.3.0",
+    "codacy-coverage": "3.4.0",
     "eslint": "6.2.2",
     "eslint-config-prettier": "6.1.0",
     "eslint-config-standard": "14.0.1",
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jest": "22.15.2",
     "eslint-plugin-node": "9.1.0",
     "eslint-plugin-prettier": "3.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "fast-html-parser": "^1.0.1",
+    "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-standard": "4.0.1",
+    "fast-html-parser": "1.0.1",
+    "highlight.js": "9.15.10",
     "jest": "24.9.0",
-    "mkdirp": "^0.5.1",
-    "nopt": "^4.0.1",
-    "postcss-cli": "^6.1.3",
+    "mkdirp": "0.5.1",
+    "nopt": "4.0.1",
+    "postcss-cli": "6.1.3",
     "prettier": "1.18.2",
-    "terser": "^4.3.8",
-    "ts-jest": "24.0.2",
-    "typescript": "^3.6.3"
+    "terser": "4.3.8",
+    "ts-jest": "24.1.0",
+    "typescript": "3.6.4",
+    "whatwg-fetch": "3.0.0"
   },
   "resolutions": {
     "lodash": "4.17.15"

scripts/build-templates.sh

@@ -5,6 +5,6 @@ set -e
 SCRIPT_DIRECTORY="$( cd "$( dirname "$0" )" && pwd )"
 
 node ${SCRIPT_DIRECTORY}/../build/scripts/hulk.js \
-    --wrapper node \
-    --variable 'browserTemplates' \
-    ${SCRIPT_DIRECTORY}/../src/templates/*.mustache > ${SCRIPT_DIRECTORY}/../src/diff2html-templates.js
+    --wrapper ts \
+    --variable 'defaultTemplates' \
+    ${SCRIPT_DIRECTORY}/../src/templates/*.mustache > ${SCRIPT_DIRECTORY}/../src/diff2html-templates.ts

scripts/hulk.ts

@@ -19,7 +19,7 @@ import * as path from "path";
 import * as fs from "fs";
 
 import * as hogan from "hogan.js";
-import * as nopt from "nopt";
+import nopt from "nopt";
 import * as mkderp from "mkdirp";
 
 const options = nopt(
@@ -52,10 +52,9 @@ function cyan(text: string): string {
 }
 
 function extractFiles(files: string[]): string[] {
-  const usage = `
-    ${cyan(
-      "USAGE:"
-    )}  hulk [--wrapper wrapper] [--outputdir outputdir] [--namespace namespace] [--variable variable] FILES
+  const usage = `${cyan(
+    "USAGE:"
+  )}  hulk [--wrapper wrapper] [--outputdir outputdir] [--namespace namespace] [--variable variable] FILES
 
     ${cyan("OPTIONS:")}  [-w, --wrapper]   :: wraps the template (i.e. amd)
              [-o,  --outputdir] :: outputs the templates as individual files to a directory
@@ -130,6 +129,8 @@ function wrap(file: string, name: string, openedFile: string): string {
       // If we have a template per file the export will expose the template directly
       return options.outputdir ? `global.${objectStmt};\nmodule.exports = ${objectAccessor};` : `global.${objectStmt}`;
 
+    case "ts":
+      return `// @ts-ignore\n${objectStmt}`;
     default:
       return objectStmt;
   }
@@ -141,19 +142,18 @@ function prepareOutput(content: string): string {
     case "amd":
       return content;
     case "node":
-      return (
-        "(function() {\n" +
-        "if (!!!global." +
-        variableName +
-        ") global." +
-        variableName +
-        " = {};\n" +
-        'var Hogan = require("hogan.js");' +
-        content +
-        "\n" +
-        (!options.outputdir ? "module.exports = global." + variableName + ";\n" : "") +
-        "})();"
-      );
+      return `(function() {
+if (!!!global.${variableName}) global.${variableName} = {};
+var Hogan = require("hogan.js");
+${content}
+${!options.outputdir ? `module.exports = global.${variableName};\n` : ""})();`;
+
+    case "ts":
+      return `import * as Hogan from "hogan.js";
+type CompiledTemplates = { [name: string]: Hogan.Template };
+export const ${variableName}: CompiledTemplates = {};
+${content}`;
+
     default:
       return "if (!!!" + variableName + ") var " + variableName + " = {};\n" + content;
   }
@@ -181,7 +181,9 @@ const templates = extractFiles(options.argv.remain)
 
     if (!options.outputdir) return cleanFileContents;
 
-    return fs.writeFileSync(path.join(options.outputdir, `${name}.js`), prepareOutput(cleanFileContents));
+    const fileExtension = options.wrapper === "ts" ? "ts" : "js";
+
+    return fs.writeFileSync(path.join(options.outputdir, `${name}.${fileExtension}`), prepareOutput(cleanFileContents));
   })
   .filter(templateContents => typeof templateContents !== "undefined");