Add basic demo built by Webpack

wimpyprogrammer · wimpyprogrammer · commit 97d8c8ca6f8e · 2021-05-23T02:45:53.000-05:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,4 @@
 /coverage/
+/demo/lib/
 /lib/
+webpack.config.js
diff --git a/demo/src/index.html b/demo/src/index.html
@@ -0,0 +1,26 @@
+<html>
+	<head>
+		<style>
+			body,
+			input {
+				font-size: 1.5em;
+			}
+			input {
+				text-align: center;
+				width: 5em;
+			}
+			[readonly] {
+				background-color: lightgray;
+			}
+		</style>
+	</head>
+	<body>
+		<input type="number" id="num1" value="0" required />
+		+
+		<input type="number" id="num2" value="0" required />
+		=
+		<input readonly id="sum" value="0" />
+
+		<script type="text/javascript" src="demo.js"></script>
+	</body>
+</html>
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -0,0 +1,14 @@
+import add from '../../src';
+
+const num1 = document.getElementById('num1') as HTMLInputElement;
+const num2 = document.getElementById('num2') as HTMLInputElement;
+const sum = document.getElementById('sum') as HTMLInputElement;
+
+function recalculate() {
+	const value1 = parseFloat(num1.value);
+	const value2 = parseFloat(num2.value);
+	sum.value = add(value1, value2).toString();
+}
+
+num1.addEventListener('keyup', recalculate);
+num2.addEventListener('keyup', recalculate);
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -0,0 +1,12 @@
+{
+	"compilerOptions": {
+		"lib": ["dom", "es5"],
+		"noEmit": true,
+		"outDir": "./lib",
+		"rootDir": "./src",
+		"tsBuildInfoFile": "./lib/demo.tsbuildinfo"
+	},
+	"extends": "../tsconfig.json",
+	"include": ["src"],
+	"references": [{ "path": "../src" }]
+}
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -0,0 +1,45 @@
+/// <reference types="node" />
+const { resolve } = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = {
+	entry: './demo/src/index.ts',
+	mode: 'production',
+	plugins: [
+		new CleanWebpackPlugin(),
+		new CopyPlugin({
+			patterns: [
+				{
+					context: resolve(__dirname, 'src'),
+					from: '**/*.html',
+				},
+			],
+		}),
+	],
+	module: {
+		rules: [
+			{
+				exclude: /node_modules/,
+				test: /\.ts$/,
+				use: [
+					{
+						loader: 'ts-loader',
+						options: {
+							compilerOptions: { noEmit: false },
+							configFile: resolve(__dirname, './tsconfig.json'),
+							projectReferences: true,
+						},
+					},
+				],
+			}
+		],
+	},
+	output: {
+		filename: 'demo.js',
+		path: resolve(__dirname, './lib'),
+	},
+	resolve: {
+		extensions: ['.ts', '.js'],
+	},
+};
diff --git a/jest.config.js b/jest.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-	collectCoverageFrom: ['**/src/**/?*.(js|ts)', '!**/src/**/?*.d.ts'],
+	collectCoverageFrom: ['./src/**/?*.(js|ts)', '!**/src/**/?*.d.ts'],
 	restoreMocks: true,
 	globals: {
 		'ts-jest': {
diff --git a/package.json b/package.json
@@ -10,23 +10,32 @@
     "node": ">=14"
   },
   "scripts": {
-    "build": "tsc -b --clean && tsc -b",
+    "build": "run-s build:*",
+    "build:src": "tsc -b --clean && tsc -b",
+    "build:demo": "wp --config demo/webpack.config.js",
     "lint": "tsc -b && eslint . --report-unused-disable-directives",
+    "start": "npm run build:demo && npx http-server ./demo/lib/ -c-1 -p 80",
     "test": "jest --coverage"
   },
   "devDependencies": {
     "@types/jest": "^26.0.5",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "copy-webpack-plugin": "^9.0.0",
     "eslint": "^7.26.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-import-resolver-typescript": "^2.0.0",
     "eslint-plugin-import": "^2.23.0",
     "eslint-plugin-jest": "^23.18.0",
     "jest": "^26.6.3",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",
     "ts-jest": "^26.5.6",
-    "typescript": "^4.2.4"
+    "ts-loader": "^9.2.1",
+    "typescript": "^4.2.4",
+    "webpack": "^5.37.1",
+    "webpack-nano": "^1.1.1"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -21,6 +21,7 @@
 	},
 	"files": [],
 	"references": [
+		{ "path": "./demo" },
 		{ "path": "./src" },
 		{ "path": "./src/tsconfig.test.json" }
 	]
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@`
`21`	`21`	`},`
`22`	`22`	`"files": [],`
`23`	`23`	`"references": [`
	`24`	`+ { "path": "./demo" },`
`24`	`25`	`{ "path": "./src" },`
`25`	`26`	`{ "path": "./src/tsconfig.test.json" }`
`26`	`27`	`]`