Initial content

2024-05-29 18:54:49 +01:00
parent 2dbc1a8088
commit 5215a1d919
1944 changed files with 203378 additions and 0 deletions
@@ -0,0 +1,24 @@
+"use strict";
+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 port = 5000;
+const expressApp = (0, express_1.default)();
+const proxy = http_proxy_1.default.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+expressApp.use((0, helmet_1.default)());
+expressApp.use(express_1.default.json());
+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}`));
@@ -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;
@@ -0,0 +1,31 @@
+{
+  "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",
+    "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",
+    "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"
+  }
+}
@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById("btn").addEventListener("click", sendReq);
+});
+
+sendReq = async () => {
+    const response = await fetch("/test", {
+        method: "POST", body: JSON.stringify({message: "Hello, World"}), 
+        headers: { "Content-Type": "application/json" }
+    });
+    document.getElementById("msg").textContent = response.statusText;
+    document.getElementById("body").innerHTML = await response.text(); 
+};  
@@ -0,0 +1,27 @@
+import { createServer } from "http";
+import express, {Express } from "express";
+import { testHandler } from "./testHandler";
+import httpProxy from "http-proxy";
+import helmet from "helmet";
+
+const port = 5000;
+
+const expressApp: Express = express();
+
+const proxy = httpProxy.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+
+expressApp.use(helmet());
+expressApp.use(express.json());
+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}`));
@@ -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();        
+}
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="/bundle.js"></script>
+        <link href="css/bootstrap.min.css" rel="stylesheet" />
+    </head>
+    <body>
+        <button id="btn" class="btn btn-primary m-2">Send Request</button>
+        <table class="table table-striped">
+            <tbody>
+                <tr><th>Status</th><td id="msg"></td></tr>
+                <tr><th>Response</th><td id="body"></td></tr>
+            </tbody>
+       </table>
+    </body>
+</html>
@@ -0,0 +1,8 @@
+{
+    "extends": "@tsconfig/node20/tsconfig.json",
+     "compilerOptions": {                       
+         "rootDir": "src/server",   
+         "outDir": "dist/server/"
+     },
+     "include": ["src/server/**/*"]
+}
@@ -0,0 +1,19 @@
+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" }
+    }
+};
@@ -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;
@@ -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;
@@ -0,0 +1,59 @@
+"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"));
+//import { registerCustomTemplateEngine } from "./custom_engine";
+const express_handlebars_1 = require("express-handlebars");
+const helpers = __importStar(require("./template_helpers"));
+const port = 5000;
+const expressApp = (0, express_1.default)();
+const proxy = http_proxy_1.default.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+//registerCustomTemplateEngine(expressApp);
+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());
+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}`));
@@ -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;
@@ -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;
@@ -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"
+  }
+}
@@ -0,0 +1,26 @@
+//import { Counter } from "./counter_custom";
+import * as Counter from "@templates/counter_client.handlebars";
+
+const context = {
+    counter: 0
+}
+
+const actions = {
+    incrementCounter: () => {
+        context.counter++; render();
+    }
+}
+
+const render = () => {
+    document.getElementById("target").innerHTML = Counter(context);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.onclick = (ev) => {
+        const action = ev.target.getAttribute("action")
+        if (action && actions[action]) {
+            actions[action]()
+        }
+    }
+    render();
+});
@@ -0,0 +1,10 @@
+import { Odd } from "./odd_custom";
+import { Even } from "./even_custom";
+
+export const Counter = (context) => `
+    <button class="btn btn-primary m-2" action="incrementCounter">
+        Increment
+    </button>
+    <div>
+        ${ context.counter % 2 ? Odd(context) : Even(context) }
+    </div>`
@@ -0,0 +1,4 @@
+export const Even = (context) => `
+    <h4 class="bg-secondary text-white m-2 p-2">
+        Even value: ${ context.counter }
+    </h4>`
@@ -0,0 +1,4 @@
+export const Odd = (context) => `
+    <h4 class="bg-primary text-white m-2 p-2">
+        Odd value: ${ context.counter }
+    </h4>`
@@ -0,0 +1,44 @@
+import { readFile } from "fs";
+import { Express } from "express";
+import * as features from "./custom_features";
+
+const renderTemplate = (path: string, context: any, 
+    callback: (err: any, response: string | undefined) => void) => {
+
+    readFile(path, (err, data) => {
+        if (err != undefined) {
+            callback("Cannot generate content", undefined);
+        } else {
+            callback(undefined, parseTemplate(data.toString(), 
+                { ...context, features }));            
+        }
+    });
+};
+
+const parseTemplate = (template: string, context: any) => {
+    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: string) => {
+            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: any) {
+            return err;
+        }
+    });
+}
+
+export const registerCustomTemplateEngine = (expressApp: Express) => 
+    expressApp.engine("custom", renderTemplate);
@@ -0,0 +1,16 @@
+import { readFileSync } from "fs";
+
+export const style = (stylesheet: string) => {
+    return `<link href="/css/${stylesheet}" rel="stylesheet" />`;
+}
+
+export const partial = (file: string, context: any) => {
+    const path = `./${context.settings.views}/${file}.custom`;
+    return readFileSync(path, "utf-8");
+}
+
+export const conditional = (expression: string, 
+        trueFile: string, falseFile: string, context: any, 
+        evalFunc: (expr: string) => any) => {
+    return partial(evalFunc(expression) ? trueFile : falseFile, context);
+}
@@ -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 { registerCustomTemplateEngine } from "./custom_engine";
+import { engine } from "express-handlebars";
+import * as helpers from "./template_helpers";
+
+const port = 5000;
+
+const expressApp: Express = express();
+
+const proxy = httpProxy.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+
+//registerCustomTemplateEngine(expressApp);
+expressApp.set("views", "templates/server");
+
+expressApp.engine("handlebars", engine());
+expressApp.set("view engine", "handlebars");
+
+expressApp.use(helmet());
+expressApp.use(express.json());
+
+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}`));
@@ -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;
+}
@@ -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();        
+}
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="/bundle.js"></script>
+        <link href="css/bootstrap.min.css" rel="stylesheet" />
+    </head>
+    <body>
+        <div id="target"></div>
+        <!-- <button id="btn" class="btn btn-primary m-2">Send Request</button>
+        <table class="table table-striped">
+            <tbody>
+                <tr><th>Status</th><td id="msg"></td></tr>
+                <tr><th>Response</th><td id="body"></td></tr>
+            </tbody>
+       </table> -->
+    </body>
+</html>
@@ -0,0 +1,14 @@
+<button class="btn btn-primary m-2" action="incrementCounter">
+    Increment
+</button>
+<div>
+    {{#if (isOdd counter) }}
+        <h4 class="bg-primary text-white m-2 p-2">
+            Client Odd Value: {{ counter }}
+        </h4>                
+    {{else}}
+        <h4 class="bg-secondary text-white m-2 p-2">
+            Client Even Value: {{ counter }}
+        </h4>       
+    {{/if}}
+</div>
@@ -0,0 +1 @@
+export default (value) => value % 2;
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>{{ @style("bootstrap.min.css") }}</head>
+    <body>
+        {{ @partial("message") }}
+        <h3 class="m-2">Message: {{ message }}</h3>
+        <h3 class="m-2">Lower: {{ message.toLowerCase() }}</h3>
+        <h3 class="m-2">Count: {{ 2 * 3 }}</h3>
+    </body>
+</html>
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>{{ @style("bootstrap.min.css") }}</head>
+    <body>
+        <a class="btn btn-primary m-2" 
+            href="/dynamic/counter?c={{ Number(req.query.c ?? 0) + 1}}">
+                Increment
+        </a>
+        <div>
+            {{ @conditional("(req.query.c ?? 0) % 2", "odd", "even") }}        
+        </div> 
+    </body>
+</html>
@@ -0,0 +1,10 @@
+<a class="btn btn-primary m-2" 
+    href="/dynamic/counter?c={{ increment req.query.c }}">
+        Increment
+</a>
+
+{{#if (isOdd req.query.c) }}
+    {{> odd }}
+{{else}}
+    {{> even }}
+{{/if}}
@@ -0,0 +1,3 @@
+<h4 class="bg-secondary text-white m-2 p-2">
+    Even value: {{ req.query.c ?? 0}}
+</h4>
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        {{{ style "bootstrap.min.css" }}}
+    </head>
+    <body>
+        {{{ body }}}
+    </body>
+</html>
@@ -0,0 +1,3 @@
+<div class="bg-primary text-white m-2 p-2">
+    {{ message }}
+</div>
@@ -0,0 +1,3 @@
+<h4 class="bg-primary text-white m-2 p-2">
+    Odd value: {{ req.query.c ?? 0}}
+</h4>
@@ -0,0 +1,3 @@
+<h4 class="bg-secondary text-white m-2 p-2">
+    Handlebars Even value: {{ valueOrZero req.query.c }}
+</h4>
@@ -0,0 +1,3 @@
+<h4 class="bg-primary text-white m-2 p-2">
+    Handlebars Odd value: {{ valueOrZero req.query.c}}
+</h4>
@@ -0,0 +1,8 @@
+{
+    "extends": "@tsconfig/node20/tsconfig.json",
+     "compilerOptions": {                       
+         "rootDir": "src/server",   
+         "outDir": "dist/server/"
+     },
+     "include": ["src/server/**/*"]
+}
@@ -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")
+        }
+    }
+};