Initial content

Chapter 11/Beginning of Chapter/part2app/data.json

@@ -0,0 +1,5 @@
+[
+    { "city": "London", "population": 8982000 },
+    { "city": "Paris", "population": 2161000 },
+    { "city": "Beijing", "population": 21540000 }
+]

Chapter 11/Beginning of Chapter/part2app/dist/server/custom_engine.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerCustomTemplateEngine = void 0;
+const fs_1 = require("fs");
+const features = __importStar(require("./custom_features"));
+const renderTemplate = (path, context, callback) => {
+    (0, fs_1.readFile)(path, (err, data) => {
+        if (err != undefined) {
+            callback("Cannot generate content", undefined);
+        }
+        else {
+            callback(undefined, parseTemplate(data.toString(), { ...context, features }));
+        }
+    });
+};
+const parseTemplate = (template, context) => {
+    const ctx = Object.keys(context)
+        .map((k) => `const ${k} = context.${k}`)
+        .join(";");
+    const expr = /{{(.*)}}/gm;
+    return template.toString().replaceAll(expr, (match, group) => {
+        const evalFunc = (expr) => {
+            return eval(`${ctx};${expr}`);
+        };
+        try {
+            if (group.trim()[0] === "@") {
+                group = `features.${group.trim().substring(1)}`;
+                group = group.replace(/\)$/m, ", context, evalFunc)");
+            }
+            let result = evalFunc(group);
+            if (expr.test(result)) {
+                result = parseTemplate(result, context);
+            }
+            return result;
+        }
+        catch (err) {
+            return err;
+        }
+    });
+};
+const registerCustomTemplateEngine = (expressApp) => expressApp.engine("custom", renderTemplate);
+exports.registerCustomTemplateEngine = registerCustomTemplateEngine;

Chapter 11/Beginning of Chapter/part2app/dist/server/custom_features.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.conditional = exports.partial = exports.style = void 0;
+const fs_1 = require("fs");
+const style = (stylesheet) => {
+    return `<link href="/css/${stylesheet}" rel="stylesheet" />`;
+};
+exports.style = style;
+const partial = (file, context) => {
+    const path = `./${context.settings.views}/${file}.custom`;
+    return (0, fs_1.readFileSync)(path, "utf-8");
+};
+exports.partial = partial;
+const conditional = (expression, trueFile, falseFile, context, evalFunc) => {
+    return (0, exports.partial)(evalFunc(expression) ? trueFile : falseFile, context);
+};
+exports.conditional = conditional;

Chapter 11/Beginning of Chapter/part2app/dist/server/forms.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerFormRoutes = exports.registerFormMiddleware = void 0;
+const registerFormMiddleware = (app) => {
+    // no middleware yet
+};
+exports.registerFormMiddleware = registerFormMiddleware;
+const registerFormRoutes = (app) => {
+    // no routes yet
+};
+exports.registerFormRoutes = registerFormRoutes;

Chapter 11/Beginning of Chapter/part2app/dist/server/server.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const http_1 = require("http");
+const express_1 = __importDefault(require("express"));
+const testHandler_1 = require("./testHandler");
+const http_proxy_1 = __importDefault(require("http-proxy"));
+const helmet_1 = __importDefault(require("helmet"));
+const express_handlebars_1 = require("express-handlebars");
+const helpers = __importStar(require("./template_helpers"));
+const forms_1 = require("./forms");
+const port = 5000;
+const expressApp = (0, express_1.default)();
+const proxy = http_proxy_1.default.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+expressApp.set("views", "templates/server");
+expressApp.engine("handlebars", (0, express_handlebars_1.engine)());
+expressApp.set("view engine", "handlebars");
+expressApp.use((0, helmet_1.default)());
+expressApp.use(express_1.default.json());
+(0, forms_1.registerFormMiddleware)(expressApp);
+(0, forms_1.registerFormRoutes)(expressApp);
+expressApp.get("/dynamic/:file", (req, resp) => {
+    resp.render(`${req.params.file}.handlebars`, { message: "Hello template", req, helpers: { ...helpers } });
+});
+expressApp.post("/test", testHandler_1.testHandler);
+expressApp.use(express_1.default.static("static"));
+expressApp.use(express_1.default.static("node_modules/bootstrap/dist"));
+expressApp.use((req, resp) => proxy.web(req, resp));
+const server = (0, http_1.createServer)(expressApp);
+server.on('upgrade', (req, socket, head) => proxy.ws(req, socket, head));
+server.listen(port, () => console.log(`HTTP Server listening on port ${port}`));

Chapter 11/Beginning of Chapter/part2app/dist/server/template_helpers.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOdd = exports.increment = exports.valueOrZero = exports.style = void 0;
+const style = (stylesheet) => {
+    return `<link href="/css/${stylesheet}" rel="stylesheet" />`;
+};
+exports.style = style;
+const valueOrZero = (value) => {
+    return value !== undefined ? value : 0;
+};
+exports.valueOrZero = valueOrZero;
+const increment = (value) => {
+    return Number((0, exports.valueOrZero)(value)) + 1;
+};
+exports.increment = increment;
+const isOdd = (value) => {
+    return Number((0, exports.valueOrZero)(value)) % 2;
+};
+exports.isOdd = isOdd;

Chapter 11/Beginning of Chapter/part2app/dist/server/testHandler.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testHandler = void 0;
+const testHandler = async (req, resp) => {
+    resp.setHeader("Content-Type", "application/json");
+    resp.json(req.body);
+    resp.end();
+};
+exports.testHandler = testHandler;

Chapter 11/Beginning of Chapter/part2app/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "part2app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "server": "tsc-watch --noClear --onsuccess \"node dist/server/server.js\"",
+    "client": "webpack serve",
+    "start": "npm-run-all --parallel server client"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bootstrap": "^5.3.2",
+    "express": "^4.18.2",
+    "express-handlebars": "^7.1.2",
+    "handlebars": "^4.7.8",
+    "helmet": "^7.1.0",
+    "http-proxy": "^1.18.1"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.2",
+    "@types/express": "^4.17.20",
+    "@types/node": "^20.6.1",
+    "handlebars-loader": "^1.7.3",
+    "npm-run-all": "^4.1.5",
+    "tsc-watch": "^6.0.4",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

Chapter 11/Beginning of Chapter/part2app/src/client/client.js

@@ -0,0 +1,3 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // do nothing
+});

Chapter 11/Beginning of Chapter/part2app/src/server/forms.ts

@@ -0,0 +1,9 @@
+import { Express } from "express";
+
+export const registerFormMiddleware = (app: Express) => {
+    // no middleware yet
+}
+
+export const registerFormRoutes = (app: Express) => {
+    // no routes yet
+}

Chapter 11/Beginning of Chapter/part2app/src/server/server.ts

@@ -0,0 +1,44 @@
+import { createServer } from "http";
+import express, {Express } from "express";
+import { testHandler } from "./testHandler";
+import httpProxy from "http-proxy";
+import helmet from "helmet";
+import { engine } from "express-handlebars";
+import * as helpers from "./template_helpers";
+import { registerFormMiddleware, registerFormRoutes } from "./forms";
+
+const port = 5000;
+
+const expressApp: Express = express();
+
+const proxy = httpProxy.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+
+expressApp.set("views", "templates/server");
+
+expressApp.engine("handlebars", engine());
+expressApp.set("view engine", "handlebars");
+
+expressApp.use(helmet());
+expressApp.use(express.json());
+
+registerFormMiddleware(expressApp);
+registerFormRoutes(expressApp);
+
+expressApp.get("/dynamic/:file", (req, resp) => {
+    resp.render(`${req.params.file}.handlebars`, 
+        { message: "Hello template", req, helpers: { ...helpers } });
+});
+
+expressApp.post("/test", testHandler);
+expressApp.use(express.static("static"));
+expressApp.use(express.static("node_modules/bootstrap/dist"));
+expressApp.use((req, resp) => proxy.web(req, resp));
+
+const server = createServer(expressApp);
+
+server.on('upgrade', (req, socket, head) => proxy.ws(req, socket, head));
+
+server.listen(port, 
+    () => console.log(`HTTP Server listening on port ${port}`));

Chapter 11/Beginning of Chapter/part2app/src/server/template_helpers.ts

@@ -0,0 +1,15 @@
+export const style = (stylesheet: any) => {
+    return `<link href="/css/${stylesheet}" rel="stylesheet" />`;
+}
+
+export const valueOrZero = (value: any) => {
+    return value !== undefined ? value : 0;
+}
+
+export const increment = (value: any) =>  {
+    return Number(valueOrZero(value)) + 1;
+}
+
+export const isOdd = (value: any) => {
+    return Number(valueOrZero(value)) % 2;
+}

Chapter 11/Beginning of Chapter/part2app/src/server/testHandler.ts

@@ -0,0 +1,7 @@
+import { Request, Response } from "express";
+
+export const testHandler = async (req: Request, resp: Response) => {    
+    resp.setHeader("Content-Type", "application/json")
+    resp.json(req.body);
+    resp.end();        
+}

Chapter 11/Beginning of Chapter/part2app/static/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="/bundle.js"></script>
+        <link href="css/bootstrap.min.css" rel="stylesheet" />
+    </head>
+    <body>
+        <form>
+            <div class="m-2">
+                <label class="form-label">Name</label>
+                <input name="name" class="form-control" />
+            </div>
+            <div class="m-2">
+                <label class="form-label">City</label>
+                <input name="city" class="form-control" />
+            </div>                                            
+        </form>
+    </body>
+</html>

Chapter 11/Beginning of Chapter/part2app/templates/client/isOdd.js

@@ -0,0 +1 @@
+export default (value) => value % 2;

Chapter 11/Beginning of Chapter/part2app/templates/server/layouts/main.handlebars

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="/bundle.js"></script>        
+        <link href="css/bootstrap.min.css" rel="stylesheet" />
+    </head>
+    <body>
+        {{{ body }}}
+    </body>
+</html>

Chapter 11/Beginning of Chapter/part2app/templates/server/partials/even.handlebars

@@ -0,0 +1,3 @@
+<h4 class="bg-secondary text-white m-2 p-2">
+    Handlebars Even value: {{ valueOrZero req.query.c }}
+</h4>

Chapter 11/Beginning of Chapter/part2app/templates/server/partials/odd.handlebars

@@ -0,0 +1,3 @@
+<h4 class="bg-primary text-white m-2 p-2">
+    Handlebars Odd value: {{ valueOrZero req.query.c}}
+</h4>

Chapter 11/Beginning of Chapter/part2app/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "@tsconfig/node20/tsconfig.json",
+     "compilerOptions": {                       
+         "rootDir": "src/server",   
+         "outDir": "dist/server/"
+     },
+     "include": ["src/server/**/*"]
+}

Chapter 11/Beginning of Chapter/part2app/webpack.config.mjs

@@ -0,0 +1,29 @@
+import path from "path";
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default  {
+    mode: "development",
+    entry: "./src/client/client.js",
+    devtool: "source-map",    
+    output: {
+        path: path.resolve(__dirname, "dist/client"),
+        filename: "bundle.js"
+    },
+    devServer: {
+        static: ["./static"],         
+        port: 5100,
+        client: { webSocketURL: "http://localhost:5000/ws" }
+    },
+    module: {
+        rules: [
+            { test: /\.handlebars$/, loader: "handlebars-loader" }
+          ]
+    },
+    resolve: {
+        alias: {
+            "@templates": path.resolve(__dirname, "templates/client")
+        }
+    }
+};

Chapter 11/End of Chapter/part2app/data.json

@@ -0,0 +1,5 @@
+[
+    { "city": "London", "population": 8982000 },
+    { "city": "Paris", "population": 2161000 },
+    { "city": "Beijing", "population": 21540000 }
+]

Chapter 11/End of Chapter/part2app/dist/server/custom_engine.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerCustomTemplateEngine = void 0;
+const fs_1 = require("fs");
+const features = __importStar(require("./custom_features"));
+const renderTemplate = (path, context, callback) => {
+    (0, fs_1.readFile)(path, (err, data) => {
+        if (err != undefined) {
+            callback("Cannot generate content", undefined);
+        }
+        else {
+            callback(undefined, parseTemplate(data.toString(), { ...context, features }));
+        }
+    });
+};
+const parseTemplate = (template, context) => {
+    const ctx = Object.keys(context)
+        .map((k) => `const ${k} = context.${k}`)
+        .join(";");
+    const expr = /{{(.*)}}/gm;
+    return template.toString().replaceAll(expr, (match, group) => {
+        const evalFunc = (expr) => {
+            return eval(`${ctx};${expr}`);
+        };
+        try {
+            if (group.trim()[0] === "@") {
+                group = `features.${group.trim().substring(1)}`;
+                group = group.replace(/\)$/m, ", context, evalFunc)");
+            }
+            let result = evalFunc(group);
+            if (expr.test(result)) {
+                result = parseTemplate(result, context);
+            }
+            return result;
+        }
+        catch (err) {
+            return err;
+        }
+    });
+};
+const registerCustomTemplateEngine = (expressApp) => expressApp.engine("custom", renderTemplate);
+exports.registerCustomTemplateEngine = registerCustomTemplateEngine;

Chapter 11/End of Chapter/part2app/dist/server/custom_features.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.conditional = exports.partial = exports.style = void 0;
+const fs_1 = require("fs");
+const style = (stylesheet) => {
+    return `<link href="/css/${stylesheet}" rel="stylesheet" />`;
+};
+exports.style = style;
+const partial = (file, context) => {
+    const path = `./${context.settings.views}/${file}.custom`;
+    return (0, fs_1.readFileSync)(path, "utf-8");
+};
+exports.partial = partial;
+const conditional = (expression, trueFile, falseFile, context, evalFunc) => {
+    return (0, exports.partial)(evalFunc(expression) ? trueFile : falseFile, context);
+};
+exports.conditional = conditional;

Chapter 11/End of Chapter/part2app/dist/server/forms.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerFormRoutes = exports.registerFormMiddleware = void 0;
+const express_1 = __importDefault(require("express"));
+const validation_1 = require("./validation");
+const registerFormMiddleware = (app) => {
+    app.use(express_1.default.urlencoded({ extended: true }));
+};
+exports.registerFormMiddleware = registerFormMiddleware;
+const registerFormRoutes = (app) => {
+    app.get("/form", (req, resp) => {
+        resp.render("age", { helpers: { pass } });
+    });
+    app.post("/form", (0, validation_1.validate)("name").required().minLength(5), (0, validation_1.validate)("age").isInteger(), (req, resp) => {
+        const validation = (0, validation_1.getValidationResults)(req);
+        const context = { ...req.body, validation,
+            helpers: { pass }
+        };
+        if (validation.valid) {
+            context.nextage = Number.parseInt(req.body.age) + 1;
+        }
+        resp.render("age", context);
+    });
+};
+exports.registerFormRoutes = registerFormRoutes;
+const pass = (valid, propname, test) => {
+    let propResult = valid?.results?.[propname];
+    return `display:${!propResult || propResult[test] ? "none" : "block"}`;
+};

Chapter 11/End of Chapter/part2app/dist/server/sanitize.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.santizeValue = void 0;
+const matchPattern = /[&<>="'`]/g;
+const characterMappings = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    "\"": "&quot;",
+    "=": "&#x3D;",
+    "'": "&#x27;",
+    "`": "&#x60;"
+};
+const santizeValue = (value) => value?.replace(matchPattern, match => characterMappings[match]);
+exports.santizeValue = santizeValue;

Chapter 11/End of Chapter/part2app/dist/server/server.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const http_1 = require("http");
+const express_1 = __importDefault(require("express"));
+const testHandler_1 = require("./testHandler");
+const http_proxy_1 = __importDefault(require("http-proxy"));
+const helmet_1 = __importDefault(require("helmet"));
+const express_handlebars_1 = require("express-handlebars");
+const helpers = __importStar(require("./template_helpers"));
+const forms_1 = require("./forms");
+const port = 5000;
+const expressApp = (0, express_1.default)();
+const proxy = http_proxy_1.default.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+expressApp.set("views", "templates/server");
+expressApp.engine("handlebars", (0, express_handlebars_1.engine)());
+expressApp.set("view engine", "handlebars");
+expressApp.use((0, helmet_1.default)());
+expressApp.use(express_1.default.json());
+(0, forms_1.registerFormMiddleware)(expressApp);
+(0, forms_1.registerFormRoutes)(expressApp);
+expressApp.get("/dynamic/:file", (req, resp) => {
+    resp.render(`${req.params.file}.handlebars`, { message: "Hello template", req, helpers: { ...helpers } });
+});
+expressApp.post("/test", testHandler_1.testHandler);
+expressApp.use(express_1.default.static("static"));
+expressApp.use(express_1.default.static("node_modules/bootstrap/dist"));
+expressApp.use((req, resp) => proxy.web(req, resp));
+const server = (0, http_1.createServer)(expressApp);
+server.on('upgrade', (req, socket, head) => proxy.ws(req, socket, head));
+server.listen(port, () => console.log(`HTTP Server listening on port ${port}`));

Chapter 11/End of Chapter/part2app/dist/server/template_helpers.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOdd = exports.increment = exports.valueOrZero = exports.style = void 0;
+const style = (stylesheet) => {
+    return `<link href="/css/${stylesheet}" rel="stylesheet" />`;
+};
+exports.style = style;
+const valueOrZero = (value) => {
+    return value !== undefined ? value : 0;
+};
+exports.valueOrZero = valueOrZero;
+const increment = (value) => {
+    return Number((0, exports.valueOrZero)(value)) + 1;
+};
+exports.increment = increment;
+const isOdd = (value) => {
+    return Number((0, exports.valueOrZero)(value)) % 2;
+};
+exports.isOdd = isOdd;

Chapter 11/End of Chapter/part2app/dist/server/testHandler.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testHandler = void 0;
+const testHandler = async (req, resp) => {
+    resp.setHeader("Content-Type", "application/json");
+    resp.json(req.body);
+    resp.end();
+};
+exports.testHandler = testHandler;

Chapter 11/End of Chapter/part2app/dist/server/validation.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getValidationResults = exports.validate = void 0;
+const validator_1 = __importDefault(require("validator"));
+const validate = (propName) => {
+    const tests = {};
+    const handler = (req, resp, next) => {
+        const vreq = req;
+        if (!vreq.validation) {
+            vreq.validation = { results: {}, valid: true };
+        }
+        vreq.validation.results[propName] = { valid: true };
+        Object.keys(tests).forEach(k => {
+            let valid = vreq.validation.results[propName][k]
+                = tests[k](req.body?.[propName]);
+            if (!valid) {
+                vreq.validation.results[propName].valid = false;
+                vreq.validation.valid = false;
+            }
+        });
+        next();
+    };
+    handler.required = () => {
+        tests.required = (val) => !validator_1.default.isEmpty(val, { ignore_whitespace: true });
+        return handler;
+    };
+    handler.minLength = (min) => {
+        tests.minLength = (val) => validator_1.default.isLength(val, { min });
+        return handler;
+    };
+    handler.isInteger = () => {
+        tests.isInteger = (val) => validator_1.default.isInt(val);
+        return handler;
+    };
+    return handler;
+};
+exports.validate = validate;
+const getValidationResults = (req) => {
+    return req.validation || { valid: true };
+};
+exports.getValidationResults = getValidationResults;

Chapter 11/End of Chapter/part2app/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "part2app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "server": "tsc-watch --noClear --onsuccess \"node dist/server/server.js\"",
+    "client": "webpack serve",
+    "start": "npm-run-all --parallel server client"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bootstrap": "^5.3.2",
+    "express": "^4.18.2",
+    "express-handlebars": "^7.1.2",
+    "handlebars": "^4.7.8",
+    "helmet": "^7.1.0",
+    "http-proxy": "^1.18.1",
+    "multer": "^1.4.5-lts.1",
+    "validator": "^13.11.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.2",
+    "@types/express": "^4.17.20",
+    "@types/multer": "^1.4.11",
+    "@types/node": "^20.6.1",
+    "@types/validator": "^13.11.5",
+    "handlebars-loader": "^1.7.3",
+    "npm-run-all": "^4.1.5",
+    "tsc-watch": "^6.0.4",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

Chapter 11/End of Chapter/part2app/src/client/client.js

@@ -0,0 +1,27 @@
+import { validate } from "./client_validation";
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById("age_form").onsubmit = (ev => {
+        const data = new FormData(ev.target);
+
+        const nameValid = validate("name", data)
+            .required()
+            .minLength(5);
+
+        const ageValid = validate("age", data)
+            .isInteger();
+
+        const allValid = [nameValid, ageValid].flatMap(v_result =>
+            Object.entries(v_result.results).map(([test, valid]) => {
+                const e = document.getElementById(
+                        `err_${v_result.propertyName}_${test}`);
+                e.classList.add("bg-dark-subtle");
+                e.style.display = valid ? "none" : "block";                       
+                return valid
+            })).every(v => v === true);
+
+        if (!allValid) {
+            ev.preventDefault();
+        } 
+    });
+});

Chapter 11/End of Chapter/part2app/src/client/client_validation.js

@@ -0,0 +1,25 @@
+import validator from "validator";
+
+export const validate = (propName, formdata) => {
+
+    const val = formdata.get(propName);
+    const results = { };
+    
+    const validationChain = {
+        get propertyName() { return propName},
+        get results () { return results }
+    };
+    validationChain.required = () => {
+        results.required = !validator.isEmpty(val, { ignore_whitespace: true});
+        return validationChain;
+    }
+    validationChain.minLength = (min) => {
+        results.minLength = validator.isLength(val, { min});
+        return validationChain;
+    };
+    validationChain.isInteger = () => {
+        results.isInteger = validator.isInt(val);
+        return validationChain;
+    }
+    return validationChain;
+}

Chapter 11/End of Chapter/part2app/src/server/forms.ts

@@ -0,0 +1,32 @@
+import express, { Express } from "express";
+import { getValidationResults, validate } from "./validation";
+
+export const registerFormMiddleware = (app: Express) => {
+    app.use(express.urlencoded({extended: true}))
+}
+
+export const registerFormRoutes = (app: Express) => {
+
+    app.get("/form", (req, resp) => {
+        resp.render("age", { helpers: { pass }});
+    });
+
+    app.post("/form", 
+            validate("name").required().minLength(5),
+            validate("age").isInteger(),
+        (req, resp) => {
+            const validation = getValidationResults(req);
+            const context = { ...req.body, validation, 
+                helpers: { pass }
+            };
+            if (validation.valid) {
+                context.nextage = Number.parseInt(req.body.age) + 1;
+            }
+            resp.render("age", context);   
+        });
+}
+
+const pass = (valid: any, propname: string, test: string ) => {
+    let propResult = valid?.results?.[propname];
+    return `display:${!propResult || propResult[test] ? "none" : "block" }`;
+}

Chapter 11/End of Chapter/part2app/src/server/sanitize.ts

@@ -0,0 +1,14 @@
+const matchPattern = /[&<>="'`]/g;
+
+const characterMappings: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    "\"": "&quot;",
+    "=": "&#x3D;",    
+    "'": "&#x27;",
+    "`": "&#x60;"
+};
+
+export const santizeValue = (value: string) => 
+    value?.replace(matchPattern, match => characterMappings[match]);

Chapter 11/End of Chapter/part2app/src/server/server.ts

@@ -0,0 +1,44 @@
+import { createServer } from "http";
+import express, {Express } from "express";
+import { testHandler } from "./testHandler";
+import httpProxy from "http-proxy";
+import helmet from "helmet";
+import { engine } from "express-handlebars";
+import * as helpers from "./template_helpers";
+import { registerFormMiddleware, registerFormRoutes } from "./forms";
+
+const port = 5000;
+
+const expressApp: Express = express();
+
+const proxy = httpProxy.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+
+expressApp.set("views", "templates/server");
+
+expressApp.engine("handlebars", engine());
+expressApp.set("view engine", "handlebars");
+
+expressApp.use(helmet());
+expressApp.use(express.json());
+
+registerFormMiddleware(expressApp);
+registerFormRoutes(expressApp);
+
+expressApp.get("/dynamic/:file", (req, resp) => {
+    resp.render(`${req.params.file}.handlebars`, 
+        { message: "Hello template", req, helpers: { ...helpers } });
+});
+
+expressApp.post("/test", testHandler);
+expressApp.use(express.static("static"));
+expressApp.use(express.static("node_modules/bootstrap/dist"));
+expressApp.use((req, resp) => proxy.web(req, resp));
+
+const server = createServer(expressApp);
+
+server.on('upgrade', (req, socket, head) => proxy.ws(req, socket, head));
+
+server.listen(port, 
+    () => console.log(`HTTP Server listening on port ${port}`));

Chapter 11/End of Chapter/part2app/src/server/template_helpers.ts

@@ -0,0 +1,15 @@
+export const style = (stylesheet: any) => {
+    return `<link href="/css/${stylesheet}" rel="stylesheet" />`;
+}
+
+export const valueOrZero = (value: any) => {
+    return value !== undefined ? value : 0;
+}
+
+export const increment = (value: any) =>  {
+    return Number(valueOrZero(value)) + 1;
+}
+
+export const isOdd = (value: any) => {
+    return Number(valueOrZero(value)) % 2;
+}

Chapter 11/End of Chapter/part2app/src/server/testHandler.ts

@@ -0,0 +1,7 @@
+import { Request, Response } from "express";
+
+export const testHandler = async (req: Request, resp: Response) => {    
+    resp.setHeader("Content-Type", "application/json")
+    resp.json(req.body);
+    resp.end();        
+}

Chapter 11/End of Chapter/part2app/src/server/validation.ts

@@ -0,0 +1,52 @@
+import { NextFunction, Request, Response } from "express";
+import validator from "validator";
+
+type ValidatedRequest = Request & {
+    validation: { 
+        results:  { [key: string]: { 
+            [key: string]: boolean, valid: boolean 
+        } }, 
+        valid: boolean 
+    }
+}
+
+export const validate = (propName: string) => {
+    const tests: Record<string, (val: string) => boolean> = {};
+    const handler = (req: Request, resp: Response, next: NextFunction ) => {
+
+        const vreq = req as ValidatedRequest;
+        if (!vreq.validation) {
+            vreq.validation = { results: {}, valid: true };
+        }
+        vreq.validation.results[propName] = { valid: true };
+
+        Object.keys(tests).forEach(k => {
+            let valid = vreq.validation.results[propName][k]
+                = tests[k](req.body?.[propName]);
+            if (!valid) {
+                vreq.validation.results[propName].valid = false;
+                vreq.validation.valid = false;
+            }
+        });
+
+        next();
+    }
+    handler.required = () => {
+        tests.required = (val: string) => 
+            !validator.isEmpty(val, { ignore_whitespace: true});
+        return handler;
+    };
+    handler.minLength = (min: number) => {
+        tests.minLength = (val:string) => validator.isLength(val, { min});
+        return handler;
+    };
+    handler.isInteger = () => {
+        tests.isInteger = (val: string) => validator.isInt(val);
+        return handler;
+    }
+    return handler;
+}
+
+export const getValidationResults = (req: Request) => {
+    return (req as ValidatedRequest).validation || { valid : true }
+}

Chapter 11/End of Chapter/part2app/static/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="/bundle.js"></script>
+        <link href="css/bootstrap.min.css" rel="stylesheet" />
+    </head>
+    <body>
+        <form action="/form">
+            <div class="m-2">
+                <label class="form-label">Name</label>
+                <input name="name" class="form-control" />
+            </div>
+            <div class="m-2">
+                <label class="form-label">City</label>
+                <input name="city" class="form-control" />
+            </div>                   
+            <div class="m-2">
+                <label class="form-label">File</label>
+                <input name="datafile" type="file" class="form-control" />
+            </div>                                                 
+            <div class="m-2">
+                <button class="btn btn-primary" formmethod="get">
+                    Submit (GET)
+                </button>
+                <button class="btn btn-primary" formmethod="post">
+                    Submit (POST)
+                </button>
+                <button class="btn btn-primary" formmethod="post" 
+                        formenctype="multipart/form-data">
+                    Submit (POST/MIME)
+                </button>                                
+            </div>
+        </form>
+    </body>
+</html>

Chapter 11/End of Chapter/part2app/templates/client/isOdd.js

@@ -0,0 +1 @@
+export default (value) => value % 2;

Chapter 11/End of Chapter/part2app/templates/server/age.handlebars

@@ -0,0 +1,32 @@
+<div class="m-2">
+    {{#if validation.valid }}
+        <h4>Hello {{name}}. You will be {{nextage}} next year.</h4>
+    {{/if }}
+</div>
+<div>
+    <form id="age_form" action="/form" method="post">
+        <div class="m-2">
+            <label class="form-label">Name</label>
+            <input name="name" class="form-control" value="{{name}}"/>
+            <div class="text-danger" id="err_name_required"
+                    style="{{ pass validation 'name' 'required' }}">
+                Please enter your name
+            </div>
+            <div class="text-danger" id="err_name_minLength"
+                    style="{{ pass validation 'name' 'minLength' }}">
+                Enter at least 5 characters
+            </div>            
+        </div>
+        <div class="m-2">
+            <label class="form-label">Current Age</label>
+            <input name="age" class="form-control" value="{{age}}" />
+            <div class="text-danger" id="err_age_isInteger"
+                    style="{{ pass validation 'age' 'isInteger' }}">
+                Please enter your age in whole years
+            </div>            
+        </div>                   
+        <div class="m-2">
+            <button class="btn btn-primary">Submit</button>                                
+        </div>
+    </form>
+</div>

Chapter 11/End of Chapter/part2app/templates/server/formData.handlebars

@@ -0,0 +1,10 @@
+<table class="table table-sm table-striped">
+    <thead>
+        <tr><th>Field</th><th>Value</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>Name:</td><td>{{ name }} </td></tr>
+        <tr><td>City:</td><td>{{ city }} </td></tr>
+        <tr><td>File:</td><td>{{ fileData }} </td></tr>
+    </tbody>
+</table>

Chapter 11/End of Chapter/part2app/templates/server/layouts/main.handlebars

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="/bundle.js"></script>        
+        <link href="css/bootstrap.min.css" rel="stylesheet" />
+    </head>
+    <body>
+        {{{ body }}}
+    </body>
+</html>

Chapter 11/End of Chapter/part2app/templates/server/partials/even.handlebars

@@ -0,0 +1,3 @@
+<h4 class="bg-secondary text-white m-2 p-2">
+    Handlebars Even value: {{ valueOrZero req.query.c }}
+</h4>

Chapter 11/End of Chapter/part2app/templates/server/partials/odd.handlebars

@@ -0,0 +1,3 @@
+<h4 class="bg-primary text-white m-2 p-2">
+    Handlebars Odd value: {{ valueOrZero req.query.c}}
+</h4>

Chapter 11/End of Chapter/part2app/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "@tsconfig/node20/tsconfig.json",
+     "compilerOptions": {                       
+         "rootDir": "src/server",   
+         "outDir": "dist/server/"
+     },
+     "include": ["src/server/**/*"]
+}

Chapter 11/End of Chapter/part2app/webpack.config.mjs

@@ -0,0 +1,29 @@
+import path from "path";
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default  {
+    mode: "development",
+    entry: "./src/client/client.js",
+    devtool: "source-map",    
+    output: {
+        path: path.resolve(__dirname, "dist/client"),
+        filename: "bundle.js"
+    },
+    devServer: {
+        static: ["./static"],         
+        port: 5100,
+        client: { webSocketURL: "http://localhost:5000/ws" }
+    },
+    module: {
+        rules: [
+            { test: /\.handlebars$/, loader: "handlebars-loader" }
+          ]
+    },
+    resolve: {
+        alias: {
+            "@templates": path.resolve(__dirname, "templates/client")
+        }
+    }
+};