Prettify HTML code output

package-lock.json

@@ -9,7 +9,8 @@
       "version": "2.0.0",
       "license": "MIT",
       "dependencies": {
-        "csvtojson": "^2.0.10"
+        "csvtojson": "^2.0.10",
+        "htmlfy": "^0.7.5"
       },
       "devDependencies": {
         "@types/csvtojson": "^1.1.5",
@@ -2203,6 +2204,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/htmlfy": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/htmlfy/-/htmlfy-0.7.5.tgz",
+      "integrity": "sha512-woog97QSD0MJVXDs4nNz3S/XIb+wa/UgunpaI29tbXaTB9SlNvQalw1XolE4m3BPp3xkJMx96I27Lb/clesPLA==",
+      "license": "MIT"
+    },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -6036,6 +6043,11 @@
         }
       }
     },
+    "htmlfy": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/htmlfy/-/htmlfy-0.7.5.tgz",
+      "integrity": "sha512-woog97QSD0MJVXDs4nNz3S/XIb+wa/UgunpaI29tbXaTB9SlNvQalw1XolE4m3BPp3xkJMx96I27Lb/clesPLA=="
+    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",

package.json

@@ -10,7 +10,8 @@
   "author": "nplayfair",
   "license": "MIT",
   "dependencies": {
-    "csvtojson": "^2.0.10"
+    "csvtojson": "^2.0.10",
+    "htmlfy": "^0.7.5"
   },
   "devDependencies": {
     "@types/csvtojson": "^1.1.5",

src/csvToJSON.ts

@@ -3,7 +3,6 @@ const csv = require('csvtojson');
 
 export async function getBOM(csvBOM: string) {
   const rawBOM = await csv(csvConfig).fromString(csvBOM);
-  // const bom = rawBOM.filter((part: Part) => !isJunk(part));
   const bom = rawBOM.filter((part: Part) => !rejectedParts.includes(part.Part));
   return bom;
 }

src/index.ts

@@ -2,11 +2,13 @@
 import { getBOM } from './csvToJSON';
 import { PartsTable } from './table';
 import { headers } from './config';
+import { printHTMLtable } from './utils';
 
 //DOM elements
 const input = document.getElementById('csvInput') as HTMLInputElement;
 const csvTextOutput = document.getElementById('csvText') as HTMLPreElement;
 const jsonTextOutput = document.getElementById('partsJSON') as HTMLPreElement;
+const partsHTML = document.getElementById('partsHTML') as HTMLPreElement;
 const htmlTable = document.getElementById('partsTable') as HTMLTableElement;
 
 let csvBOM: string;
@@ -35,6 +37,7 @@ function processCSV(fileReader: Event) {
   printJSONbom(csvString);
   //Table
   createTable();
+  //TODO Table HTML code
 }
 
 //Print JSON
@@ -47,7 +50,8 @@ async function printJSONbom(csvString: string) {
 async function createTable() {
   const bomJSON = await getBOM(csvBOM);
   const partsTable = new PartsTable(htmlTable, headers, bomJSON);
-  partsTable.createTable();
+  const tableMarkup = await partsTable.createTable();
+  printHTMLtable(tableMarkup as HTMLTableElement, partsHTML);
 }
 
 //Add event listener

src/table.ts

@@ -40,9 +40,10 @@ export class PartsTable {
   }
 
   //Create full table
-  public createTable(): void {
+  public createTable(): HTMLElement {
     this.clearTable();
     this.createTableHeader();
     this.createTableBody();
+    return this.htmlTable;
   }
 }

src/utils.ts

@@ -1,4 +1,13 @@
-import { rejectedParts } from './config';
+import { prettify } from 'htmlfy';
+
+//Print HTML code
+export async function printHTMLtable(
+  table: HTMLTableElement,
+  codeBlock: HTMLPreElement,
+) {
+  codeBlock.innerText = prettify(table.outerHTML);
+}
+
 // no longer needed
 // export function isJunk(element: Part): boolean {
 //   // Returns true if element is in the rejected list

tsconfig.json

@@ -46,7 +46,7 @@
     // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */