Obliterate old stuff, recreate using webpack and proper TS

This commit is contained in:
Nick Playfair 2025-06-10 12:58:16 +01:00
parent 4df65d6fba
commit 0790309216
12 changed files with 6187 additions and 11380 deletions

50
index.html Normal file
View File

@ -0,0 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Read CSV File</title>
</head>
<body>
<header>
<h1>BOM to Table</h1>
</header>
<main>
<section class="upload">
<h2>Upload BOM csv file</h2>
<input type="file" id="csvInput" accept=".csv" />
<hr />
</section>
<section id="output">
<h3>CSV Text</h3>
<pre id="csvText"></pre>
<hr />
<h3>JSON Object</h3>
<pre id="partsJSON"></pre>
<hr />
<h3>HTML Table</h3>
<table id="partsTable"></table>
<hr />
<h3>Table HTML Markup</h3>
<pre id="partsHTML"></pre>
</section>
</main>
<script src="dist/bundle.js"></script>
<script>
document
.getElementById('csvInput')
.addEventListener('change', function (event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const content = e.target.result;
document.getElementById('csvText').innerText = content;
};
reader.readAsText(file);
}
});
</script>
</body>
</html>

17193
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -4,32 +4,24 @@
"description": "",
"main": "bom2table.js",
"scripts": {
"build": "npm run bundle && npm run copy:html && npm run copy:css",
"bundle": "browserify ./src/bom2table.ts -p [ tsify --noImplicitAny ] -o ./dist/bundle.js",
"copy:html": "cpy 'src/*.html' 'dist/'",
"copy:css": "cpy 'src/*.css' 'dist/'",
"dev": "watchify ./src/bom2table.js -o ./dist/bundle.js -v",
"lint": "eslint . --ext .ts"
"dev": "http-server",
"serve": "webpack serve --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"author": "nplayfair",
"license": "MIT",
"dependencies": {
"csvtojson": "^2.0.10",
"js-beautify": "^1.13.13",
"http-server": "^14.1.1",
"pretty": "^2.0.0"
},
"devDependencies": {
"@types/csvtojson": "^1.1.5",
"@types/js-beautify": "^1.13.1",
"@typescript-eslint/eslint-plugin": "^4.22.0",
"@typescript-eslint/parser": "^4.22.0",
"browserify": "^17.0.0",
"cpy-cli": "^3.1.1",
"eslint": "^7.24.0",
"prettier": "^2.2.1",
"tinyify": "^3.0.0",
"tsify": "^5.0.2",
"typescript": "^4.2.4",
"watchify": "^4.0.0"
"prettier": "^3.5.3",
"ts-loader": "^9.5.2",
"typescript": "^5.8.3",
"webpack": "^5.99.9",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2"
}
}

16
src/boms2table.d.ts vendored
View File

@ -1,16 +0,0 @@
interface part {
Part: string,
Value: string,
}
interface structuredParts {
C: {
[key: string]: string
},
R: {
[key: string]: string
},
Q: {
[key: string]: string
}
}

View File

@ -1,32 +1,7 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
// Modules
import { html as beautify } from 'js-beautify';
import csv from 'csvtojson';
import { Converter } from 'csvtojson/v2/Converter';
// Configuration
// Which components should we remove from the BOM?
const rejectedParts = [
'TP1',
'TP2',
'TP3',
'G',
'U$1',
'S1',
'J1',
'J2',
'JP1',
'JP2',
'V',
'I',
'O',
'T1',
'T2',
'T3',
'INPUT',
'IN',
'OUT',
];
// import csv from 'csvtojson';
// import { Converter } from 'csvtojson/v2/Converter';
import { rejectedParts } from './rejectedParts';
// Return false if the Part value of the object passed in is in the list to remove
function isJunk(element: part) {
@ -65,6 +40,7 @@ function getJSONParts(allParts: part[]) {
return jsonParts;
}
/* TODO
// Format the HTML nicely and output to a pre code block
function displayMarkup() {
const tableCode = document.querySelector('table')!.outerHTML;
@ -160,3 +136,4 @@ csvPicker.onchange = function handleFiles(event: Event) {
makeJSON(csvString);
};
}
*/

16
src/parts.d.ts vendored Normal file
View File

@ -0,0 +1,16 @@
declare interface part {
Part: string;
Value: string;
}
declare interface structuredParts {
C: {
[key: string]: string;
};
R: {
[key: string]: string;
};
Q: {
[key: string]: string;
};
}

22
src/rejectedParts.ts Normal file
View File

@ -0,0 +1,22 @@
// Which components should we remove from the BOM?
export const rejectedParts = [
'TP1',
'TP2',
'TP3',
'G',
'U$1',
'S1',
'J1',
'J2',
'JP1',
'JP2',
'V',
'I',
'O',
'T1',
'T2',
'T3',
'INPUT',
'IN',
'OUT',
];

View File

@ -4,21 +4,21 @@
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "ES2017", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"target": "ES2017" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "es2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
"lib": [
"es2017",
"dom"
], /* Specify library files to be included in the compilation. */
"allowJs": true, /* Allow javascript files to be compiled. */
] /* Specify library files to be included in the compilation. */,
//"allowJs": true /* Allow javascript files to be compiled. */,
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
"sourceMap": true /* Generates corresponding '.map' file. */,
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "dist", /* Redirect output structure to the directory. */
"rootDir": "src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
"outDir": "dist" /* Redirect output structure to the directory. */,
// "rootDir": "src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
// "removeComments": true, /* Do not emit comments to output. */
@ -28,8 +28,8 @@
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
"strict": true /* Enable all strict type-checking options. */,
"noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
@ -53,7 +53,7 @@
// "typeRoots": [], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
@ -68,7 +68,9 @@
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"skipLibCheck": true, /* Skip type checking of declaration files. */
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}
},
"include": ["src"],
"exclude": ["node_modules", "dist/**/*", "tests/**/*"]
}

28
webpack.dev.js Normal file
View File

@ -0,0 +1,28 @@
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.ts",
devtool: "inline-source-map",
devServer: {
static: {
directory: path.join(__dirname, "./"),
},
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/dist",
},
};

31
webpack.prod.js Normal file
View File

@ -0,0 +1,31 @@
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.ts",
// devtool: "inline-source-map",
devServer: {
static: {
directory: path.join(__dirname, "./"),
},
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/dist",
},
plugins: [new CleanWebpackPlugin()],
};