Merge branch 'develop'

.eslintrc.json

@@ -0,0 +1,114 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "parserOptions": {
+    "project": [
+      "./tsconfig.json",
+      "./tsconfig.test.json",
+      "./tsconfig.frontend.json"
+    ]
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "indent": [
+      "error",
+      4,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "no-trailing-spaces": "error",
+    "max-len": [
+      "error",
+      {
+        "code": 120,
+        "ignoreStrings": true,
+        "ignoreTemplateLiterals": true,
+        "ignoreRegExpLiterals": true
+      }
+    ],
+    "semi": "off",
+    "@typescript-eslint/semi": [
+      "error"
+    ],
+    "no-extra-semi": "error",
+    "eol-last": "error",
+    "comma-dangle": "off",
+    "@typescript-eslint/comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "always-multiline",
+        "exports": "always-multiline",
+        "functions": "always-multiline",
+        "enums": "always-multiline",
+        "generics": "always-multiline",
+        "tuples": "always-multiline"
+      }
+    ],
+    "no-extra-parens": "off",
+    "@typescript-eslint/no-extra-parens": [
+      "error"
+    ],
+    "no-nested-ternary": "error",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "error",
+    "@typescript-eslint/no-unnecessary-condition": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "error",
+    "no-useless-return": "error",
+    "no-useless-constructor": "off",
+    "@typescript-eslint/no-useless-constructor": [
+      "error"
+    ],
+    "no-return-await": "off",
+    "@typescript-eslint/return-await": [
+      "error",
+      "always"
+    ],
+    "@typescript-eslint/explicit-member-accessibility": [
+      "error",
+      {
+        "accessibility": "explicit"
+      }
+    ],
+    "@typescript-eslint/no-floating-promises": "error"
+  },
+  "ignorePatterns": [
+    "jest.config.js",
+    "webpack.config.js",
+    "dist/**/*",
+    "public/**/*",
+    "config/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "test/**/*"
+      ],
+      "rules": {
+        "max-len": [
+          "error",
+          {
+            "code": 120,
+            "ignoreTemplateLiterals": true,
+            "ignoreRegExpLiterals": true,
+            "ignoreStrings": true
+          }
+        ]
+      }
+    }
+  ]
+}

.gitignore

@@ -3,3 +3,5 @@ node_modules
 public
 dist
 yarn-error.log
+
+src/package.json

README.md

@@ -0,0 +1,3 @@
+# swaf boilerplate
+
+Boilerplate for a quickstart with [swaf](https://eternae.ink/arisu/swaf)

app.service

@@ -1,13 +1,16 @@
+# Please customize values i.e. paths, user, group, WorkingDirectory based on your environment. Do not use the same
+# user and group for different applications.
+
 [Unit]
-Description=WMS website
+Description=swaf based website
 After=network-online.target
 Wants=network-online.target
 
 [Service]
 Type=simple
-User=wms
+User=swaf
-Group=wms
+Group=swaf
-WorkingDirectory=/home/wms/live
+WorkingDirectory=/home/swaf/live
 Restart=on-success
 Environment=NODE_ENV=production
 ExecStart=/bin/node .

assets/config.json

@@ -1,6 +1,6 @@
 {
   "bundles": {
-    "app": "js/app.js",
+    "app": "ts/app.ts",
     "layout": "sass/layout.scss",
     "error": "sass/error.scss",
     "logo": "img/logo.svg",

assets/img/logo.svg

@@ -19,7 +19,6 @@
    id="svg6"
    sodipodi:docname="logo.svg"
    inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
-   inkscape:export-filename="/r/arisu/dev/streams/wms/assets/img/logox1024.png"
    inkscape:export-xdpi="4096"
    inkscape:export-ydpi="4096">
   <metadata

assets/js/copyable_text.js

@@ -1,12 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('.copyable-text').forEach(el => {
-        const contentEl = el.querySelector('.content');
-        contentEl.addEventListener('click', () => {
-            window.getSelection().selectAllChildren(contentEl);
-        });
-        el.querySelector('.copy-button').addEventListener('click', () => {
-            window.getSelection().selectAllChildren(contentEl);
-            document.execCommand('copy');
-        });
-    });
-});

assets/js/forms.js

@@ -1,29 +0,0 @@
-// For labels to update their state (css selectors based on the value attribute)
-document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('input').forEach(el => {
-        if (el.type !== 'checkbox') {
-            el.setAttribute('value', el.value);
-            el.addEventListener('change', () => {
-                el.setAttribute('value', el.value);
-            });
-        }
-    });
-});
-
-window.applyFormMessages = function (formElement, messages) {
-    for (const fieldName of Object.keys(messages)) {
-        const field = formElement.querySelector('#field-' + fieldName);
-        let parent = field.parentElement;
-        while (parent && !parent.classList.contains('form-field')) parent = parent.parentElement;
-
-        if (field) {
-            let err = field.querySelector('.error');
-            if (!err) {
-                err = document.createElement('div');
-                err.classList.add('error');
-                parent.insertBefore(err, parent.querySelector('.hint') || parent);
-            }
-            err.innerHTML = `<i data-feather="x-circle"></i> ${messages[fieldName].message}`;
-        }
-    }
-}

assets/js/main_menu.js

@@ -1,17 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const menuButton = document.getElementById('menu-button');
-    const mainMenu = document.getElementById('main-menu');
-
-    menuButton.addEventListener('click', (e) => {
-        e.stopPropagation();
-        mainMenu.classList.toggle('open');
-    });
-
-    mainMenu.addEventListener('click', (e) => {
-        e.stopPropagation();
-    });
-
-    document.addEventListener('click', () => {
-        mainMenu.classList.remove('open');
-    });
-});

assets/sass/_vars.scss

@@ -9,6 +9,7 @@ $defaultTextColor: #ffffff;
 $headerBackground: darken($primary, 7.5%);
 $footerBackground: lighten($headerBackground, 1%);
 $panelBackground: lighten($headerBackground, 1%);
+$inputBackground: darken($panelBackground, 4%);
 
 $info: #4499ff;
 $infoText: darken($info, 42%);
@@ -27,4 +28,4 @@ $errorText: darken($error, 30%);
 $errorColor: desaturate($errorText, 50%);
 
 // Responsivity
-$menuLayoutSwitchTreshold: 700px;
+$mobileThreshold: 632px;

assets/sass/layout.scss

@@ -21,7 +21,53 @@ body {
 	background-color: $backgroundColor;
 }
 
-header {
+@mixin tip {
+	position: relative;
+
+	.tip {
+		visibility: hidden;
+		position: absolute;
+		z-index: 10000;
+		pointer-events: none;
+		display: block;
+		width: max-content;
+		height: 30px;
+		padding: 4px 8px;
+		line-height: 22px;
+		top: calc(100% + 8px);
+		left: 50%;
+		transform: translateX(-50%);
+
+		text-align: center;
+		font-size: 18px;
+		color: $defaultTextColor;
+		opacity: 0;
+		transition: opacity ease-out 100ms, visibility step-end 150ms;
+		transition-delay: 0ms;
+		background-color: #000;
+		border-radius: 5px;
+
+		text-transform: initial;
+		font-weight: initial;
+
+		&.top {
+			top: auto;
+			bottom: calc(100% + 8px);
+		}
+	}
+
+	&:hover, &:active {
+		.tip {
+			visibility: visible;
+			opacity: 1;
+			transition: opacity ease-out 100ms;
+			transition-delay: 150ms;
+		}
+	}
+}
+
+body > header {
+	z-index: 50;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -61,6 +107,7 @@ header {
 			font-size: 20px;
 
 			li {
+				position: relative;
 				list-style: none;
 
 				a, button {
@@ -77,13 +124,6 @@ header {
 						&:not(button) {
 							background-color: rgba(255, 255, 255, 0.07);
 						}
-
-						.tip {
-							visibility: visible;
-							opacity: 1;
-							transition: opacity ease-out 100ms;
-							transition-delay: 150ms;
-						}
 					}
 
 					.feather {
@@ -108,11 +148,6 @@ header {
 					.feather {
 						margin-right: 0;
 					}
-
-					.tip {
-						text-transform: initial;
-						font-weight: initial;
-					}
 				}
 
 				form {
@@ -121,6 +156,34 @@ header {
 					align-items: center;
 					padding: 0;
 				}
+
+				&.auth-user {
+					img {
+						width: 48px;
+						height: 48px;
+						border-radius: 3px;
+						margin-right: 8px;
+					}
+				}
+
+				.dropdown {
+					position: absolute;
+					z-index: -1;
+					top: 100%;
+					right: 0;
+
+					white-space: nowrap;
+					background: $headerBackground;
+					border-radius: 0 0 3px 3px;
+
+					a {
+						padding: 0 8px;
+					}
+				}
+
+				&:hover .dropdown {
+					display: block;
+				}
 			}
 		}
 
@@ -129,7 +192,7 @@ header {
 		}
 	}
 
-	@media (max-width: $menuLayoutSwitchTreshold) {
+	@media (max-width: $mobileThreshold) {
 		flex-direction: row-reverse;
 
 		.logo {
@@ -158,7 +221,7 @@ header {
 				}
 			}
 
-			ul {
+			> ul {
 				flex-direction: column;
 				position: absolute;
 				z-index: 10;
@@ -181,39 +244,25 @@ header {
 							font-weight: inherit;
 						}
 					}
-				}
-			}
-		}
-	}
 
-	@media (min-width: $menuLayoutSwitchTreshold) {
+					.dropdown {
-		nav ul li {
+						position: initial;
-			a, button {
-				.tip {
-					visibility: hidden;
-					position: absolute;
 						display: block;
-					width: max-content;
+						padding-left: 32px;
-					height: 30px;
-					padding: 4px 8px;
-					line-height: 22px;
-					top: calc(100% + 8px);
-					left: 50%;
-					transform: translateX(-50%);
-
-					text-align: center;
-					font-size: 18px;
-					color: $defaultTextColor;
-					opacity: 0;
-					transition: opacity ease-out 100ms, visibility step-end 150ms;
-					transition-delay: 0ms;
-					background-color: #000;
-					border-radius: 5px;
 					}
 				}
+			}
+		}
+	}
+
+	@media (min-width: $mobileThreshold) {
+		nav ul li {
+			a, button, .button {
+				@include tip;
+			}
 
 			&:last-child {
-				a, button {
+				a, button, .button {
 					.tip {
 						left: unset;
 						right: 4px;
@@ -234,7 +283,11 @@ footer {
 
 main {
 	flex: 1;
-	padding: 8px;
+	padding: 8px 0;
+
+	button, .button {
+		@include tip;
+	}
 }
 
 h1 {
@@ -261,15 +314,23 @@ section > h2, .panel > h2 {
 	align-items: center;
 	position: relative;
 	text-align: center;
-	margin-top: 16px;
+	margin-top: 4px;
 
-	&::before, &::after {
+	font-size: 24px;
+	line-height: 1;
+
+	.feather {
+		margin: 0 16px 0 0;
+		opacity: 0.1;
+	}
+
+	&::after {
 		content: "";
 		flex: 1;
-		margin: 0 32px;
+		margin: 0 16px;
 		height: 0;
 		border-bottom: 1px solid $defaultTextColor;
-		opacity: 0.2;
+		opacity: 0.1;
 	}
 }
 
@@ -286,7 +347,7 @@ a {
 	text-decoration: none;
 
 	&:hover {
-		color: lighten($secondary, 5%);
+		color: lighten($secondary, 10%);
 	}
 
 	.feather.feather-external-link {
@@ -301,11 +362,27 @@ form {
 	text-align: center;
 
 	.form-field {
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		margin: 16px auto;
 
+		.control {
+			position: relative;
+			background: $inputBackground;
+			border-radius: 5px;
+		}
+
+		.feather.icon {
+			position: absolute;
+			top: 50%;
+			right: 8px;
+			transform: translateY(-50%);
+			z-index: 0;
+
+			--icon-size: 24px;
+			opacity: 0.75;
+		}
+
 		label {
 			position: absolute;
 			left: 8px;
@@ -330,11 +407,11 @@ form {
 			}
 		}
 
-		input, select, .input-group {
+		input, select, textarea, .input-group {
+			z-index: 1;
 			border: 0;
 			color: $defaultTextColor;
-			background: lighten($panelBackground, 4%);
+			background: transparent;
-			border-radius: 5px;
 			font-size: 16px;
 
 			&:focus, &:not([value=""]), &[type="file"] {
@@ -345,10 +422,11 @@ form {
 			}
 		}
 
-		input, select, .form-display {
+		input, select, textarea, .form-display {
 			display: block;
 			padding: 32px 8px 8px 8px;
 			width: 100%;
+			height: 60px;
 		}
 
 		select {
@@ -362,9 +440,9 @@ form {
 
 			& + .feather {
 				position: absolute;
-				z-index: -1;
+				pointer-events: none;
 				right: 8px;
-				bottom: 8px;
+				top: 30px;
 
 				transition: transform 150ms ease-out;
 			}
@@ -375,30 +453,48 @@ form {
 			}
 		}
 
+		textarea {
+			resize: vertical;
+			min-height: 100px;
+			font-family: inherit;
+		}
+
 		input[type=color] {
 			height: calc(32px + 8px + 32px);
 		}
 
 		&.inline {
+			display: flex;
 			flex-direction: row;
 
+			.control {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				flex-grow: 1;
+
 				input[type=checkbox] {
-				text-align: left;
 					width: min-content;
 					height: min-content;
+					margin: 8px;
+					text-align: left;
 
 					& ~ label {
 						position: static;
+						flex-grow: 1;
 						display: inline;
-					padding-left: 8px;
+						padding: 8px;
+
 						font-size: 16px;
+						text-align: left;
+					}
 				}
 			}
 		}
 
 		.input-group {
 			display: flex;
-			flex-shrink: 1;
+			flex-grow: 1;
 			flex-direction: row;
 
 			div {
@@ -407,19 +503,9 @@ form {
 
 				input {
 					width: 100%;
-					margin-top: 24px;
-					padding-top: 8px;
 					border: 0;
 					background: transparent;
 				}
-
-				> input + * {
-					position: absolute;
-					top: 32px;
-					right: 28px;
-					user-select: none;
-					text-align: right;
-				}
 			}
 		}
 	}
@@ -427,7 +513,7 @@ form {
 	.inline-fields {
 		display: flex;
 		flex-direction: row;
-		align-items: center;
+		align-items: start;
 		margin: 16px auto;
 
 		.form-field {
@@ -552,6 +638,19 @@ button, .button {
 	}
 }
 
+.breadcrumb {
+	list-style: none;
+	display: flex;
+	flex-direction: row;
+	margin: 0;
+	padding: 8px;
+
+	> *:not(:first-child)::before {
+		content: '›';
+		padding: 0 8px;
+	}
+}
+
 // ---
 // --- Layout helpers
 // ---
@@ -559,14 +658,27 @@ button, .button {
 	text-align: center;
 }
 
-.container {
+@mixin container {
+	width: $mobileThreshold;
 	padding: 0 16px;
-	max-width: 632px;
+
+	@media (min-width: $mobileThreshold) {
 		margin: 0 auto;
 	}
 
+	@media (max-width: $mobileThreshold) {
+		width: 100%;
+		padding: 0 8px;
+	}
+}
+
+.container {
+	@include container;
+}
+
 .panel {
-	margin: 16px 0;
+	position: relative;
+	margin: 16px 0 48px;
 	padding: 8px;
 	background-color: $panelBackground;
 	border-radius: 5px;
@@ -574,6 +686,14 @@ button, .button {
 	p {
 		margin: 16px 8px;
 	}
+
+	> .feather:first-child {
+		position: absolute;
+		--icon-size: 24px;
+		opacity: 0.1;
+		top: 8px;
+		left: 8px;
+	}
 }
 
 .sub-panel {
@@ -588,10 +708,16 @@ button, .button {
 // --- Feather
 // ---
 .feather {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
 	flex-shrink: 0;
-	--icon-size: 24px;
 	width: var(--icon-size);
 	height: var(--icon-size);
+
+	--icon-size: 16px;
+	font-size: var(--icon-size);
 	stroke: currentColor;
 	stroke-width: 2;
 	stroke-linecap: square;

assets/ts/PersistentWebSocket.ts

@@ -0,0 +1,39 @@
+export default class PersistentWebsocket {
+    private webSocket?: WebSocket;
+
+    public constructor(
+        protected readonly url: string,
+        private readonly handler: MessageHandler,
+        protected readonly reconnectOnClose: boolean = true,
+    ) {
+    }
+
+    public run(): void {
+        const _webSocket = this.webSocket = new WebSocket(this.url);
+        this.webSocket.addEventListener('open', () => {
+            console.debug('Websocket connected');
+        });
+        this.webSocket.addEventListener('message', (e) => {
+            this.handler(_webSocket, e);
+        });
+        this.webSocket.addEventListener('error', (e) => {
+            console.error('Websocket error', e);
+        });
+        this.webSocket.addEventListener('close', (e) => {
+            this.webSocket = undefined;
+            console.debug('Websocket closed', e.code, e.reason);
+
+            if (this.reconnectOnClose) {
+                setTimeout(() => this.run(), 1000);
+            }
+        });
+    }
+
+    public send(data: string): void {
+        if (!this.webSocket) throw new Error('WebSocket not connected');
+
+        this.webSocket.send(data);
+    }
+}
+
+export type MessageHandler = (webSocket: WebSocket, e: MessageEvent) => void;

assets/ts/app.ts

@@ -2,8 +2,9 @@ import './external_links';
 import './message_icons';
 import './forms';
 import './copyable_text';
+import './tooltips-and-dropdowns';
 import './main_menu';
+import './font-awesome';
 
+// css
 import '../sass/app.scss';
-
-console.log('Hello world!');

assets/ts/copyable_text.ts

@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.copyable-text').forEach(el => {
+        const contentEl = el.querySelector('.content');
+        const selection = window.getSelection();
+        if (contentEl && selection) {
+            contentEl.addEventListener('click', () => {
+                selection.selectAllChildren(contentEl);
+            });
+            el.querySelector('.copy-button')?.addEventListener('click', () => {
+                selection.selectAllChildren(contentEl);
+                document.execCommand('copy');
+            });
+        }
+    });
+});

assets/ts/external_links.ts

@@ -2,7 +2,9 @@ import feather from "feather-icons";
 
 document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('a[target="_blank"]').forEach(el => {
+        if (!el.classList.contains('no-icon')) {
             el.innerHTML += `<i data-feather="external-link"></i>`;
+        }
     });
 
     feather.replace();

assets/ts/font-awesome.ts

@@ -0,0 +1,4 @@
+import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
+import '../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss';
+import '../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
+import '../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';

assets/ts/forms.ts

@@ -0,0 +1,43 @@
+/*
+ * For labels to update their state (css selectors based on the value attribute)
+ */
+import {ValidationError} from "swaf/db/Validator";
+
+export function updateInputs(): void {
+    document.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>('input, textarea').forEach(el => {
+        if (!el.dataset.inputSetup) {
+            el.dataset.inputSetup = 'true';
+            if (el.type !== 'checkbox') {
+                el.setAttribute('value', el.value);
+                el.addEventListener('change', () => {
+                    el.setAttribute('value', el.value);
+                });
+            }
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    updateInputs();
+});
+
+export function applyFormMessages(
+    formElement: HTMLFormElement,
+    messages: { [p: string]: ValidationError<unknown> },
+): void {
+    for (const fieldName of Object.keys(messages)) {
+        const field = formElement.querySelector('#field-' + fieldName);
+        if (!field) continue;
+
+        let parent = field.parentElement;
+        while (parent && !parent.classList.contains('form-field')) parent = parent.parentElement;
+
+        let err = field.querySelector('.error');
+        if (!err) {
+            err = document.createElement('div');
+            err.classList.add('error');
+            parent?.insertBefore(err, parent.querySelector('.hint') || parent);
+        }
+        err.innerHTML = `<i data-feather="x-circle"></i> ${messages[fieldName].message}`;
+    }
+}

assets/ts/main_menu.ts

@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const menuButton = document.getElementById('menu-button');
+    const mainMenu = document.getElementById('main-menu');
+
+    if (menuButton) {
+        menuButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            mainMenu?.classList.toggle('open');
+        });
+    }
+
+    if (mainMenu) {
+        mainMenu.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+
+        document.addEventListener('click', () => {
+            mainMenu.classList.remove('open');
+        });
+    }
+});

assets/ts/message_icons.ts

@@ -1,19 +1,24 @@
 import feather from "feather-icons";
 
 document.addEventListener('DOMContentLoaded', () => {
-    const messageTypeToIcon = {
+    const messageTypeToIcon: { [p: string]: string } = {
         info: 'info',
         success: 'check',
         warning: 'alert-triangle',
         error: 'x-circle',
         question: 'help-circle',
     };
-    document.querySelectorAll('.message').forEach(el => {
+
-        const type = el.dataset['type'];
+    document.querySelectorAll<HTMLElement>('.message').forEach(el => {
         const icon = el.querySelector('.icon');
+        const type = el.dataset['type'];
+        if (!icon || !type) return;
+        if (!messageTypeToIcon[type]) throw new Error(`No icon for type ${type}`);
+
         const svgContainer = document.createElement('div');
         svgContainer.innerHTML = feather.icons[messageTypeToIcon[type]].toSvg();
-        el.insertBefore(svgContainer.firstChild, icon);
+
+        if (svgContainer.firstChild) el.insertBefore(svgContainer.firstChild, icon);
         icon.remove();
     });
 

assets/ts/tooltips-and-dropdowns.ts

@@ -0,0 +1,31 @@
+export function updateTooltips(): void {
+    console.debug('Updating tooltips');
+    const elements = document.querySelectorAll<HTMLElement>('.tip, .dropdown');
+
+    // Calculate max potential displacement
+    let max = 0;
+    elements.forEach(el => {
+        const box = el.getBoundingClientRect();
+        if (max < box.height) max = box.height;
+    });
+
+    // Prevent displacement
+    elements.forEach(el => {
+        if (!el.dataset.tooltipSetup) {
+            el.dataset.tooltipSetup = 'true';
+            const box = el.getBoundingClientRect();
+            if (box.bottom >= document.body.clientHeight - (max + 32)) {
+                el.classList.add('top');
+            }
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    window.addEventListener('popstate', () => {
+        updateTooltips();
+    });
+    window.requestAnimationFrame(() => {
+        updateTooltips();
+    });
+});

config/default.json5

@@ -1,4 +1,4 @@
-export default Object.assign(require("wms-core/config/default").default, {
+{
     app: {
         name: 'Example App',
         contact_email: 'contact@example.net'
@@ -8,7 +8,6 @@ export default Object.assign(require("wms-core/config/default").default, {
     public_url: "http://localhost:4899",
     public_websocket_url: "ws://localhost:4899",
     port: 4899,
-    gitlab_webhook_token: 'secret',
     mysql: {
         connectionLimit: 10,
         host: "localhost",
@@ -23,7 +22,6 @@ export default Object.assign(require("wms-core/config/default").default, {
         prefix: 'example_app'
     },
     session: {
-        secret: "very_secret_not_known",
         cookie: {
             secure: false
         }
@@ -42,4 +40,4 @@ export default Object.assign(require("wms-core/config/default").default, {
         cache: false
     },
     approval_mode: false,
-});
+}

config/production.json5

@@ -1,4 +1,4 @@
-export default Object.assign(require("wms-core/config/production").default, {
+{
     log_level: "DEBUG",
     db_log_level: "ERROR",
     public_url: "https://watch-my.stream",
@@ -12,4 +12,4 @@ export default Object.assign(require("wms-core/config/production").default, {
         secure: true,
         allow_invalid_tls: false
     }
-});
+}

config/test.json5

@@ -1,9 +1,9 @@
-export default Object.assign(require("wms-core/config/test").default, {
+{
     mysql: {
         host: "localhost",
         user: "root",
         password: "",
-        database: "wms2_test",
+        database: "swaf_test",
         create_database_automatically: true
     }
-});
+}

package.json

@@ -1,34 +1,42 @@
 {
   "name": "example-app",
   "version": "0.1.0",
-  "description": "Example App based on wms-core",
+  "description": "Example App based on swaf",
-  "repository": "git@gitlab.com:ArisuOngaku/wms-boilerplate.git",
+  "repository": "https://eternae.ink/arisu/swaf-boilerplate",
   "author": "Alice Gaudon <alice@gaudon.pro>",
   "private": true,
   "main": "dist/main.js",
   "scripts": {
     "test": "jest --verbose --runInBand",
-    "dist-webpack": "webpack --mode production",
+    "clean": "(test ! -d dist || rm -r dist)",
-    "dist": "tsc && npm run dist-webpack",
+    "prepareSources": "cp package.json src/",
-    "dev": "concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"webpack --watch --mode development\" \"maildev\"",
+    "compile": "yarn clean && tsc",
-    "start": "yarn dist && node dist/main.js"
+    "build": "yarn prepareSources && yarn compile && webpack --mode production",
+    "dev": "yarn prepareSources && concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"webpack --watch --mode development\" \"maildev\"",
+    "start": "yarn build && node",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
-    "@types/config": "^0.0.36",
+    "@fortawesome/fontawesome-free": "^5.14.0",
+    "@types/config": "^0.0.38",
     "@types/express": "^4.17.6",
     "@types/express-session": "^1.17.0",
+    "@types/feather-icons": "^4.7.0",
     "@types/formidable": "^1.0.31",
     "@types/jest": "^26.0.4",
     "@types/mysql": "^2.15.15",
-    "@types/node": "^13.13.2",
+    "@types/node": "^14.6.3",
     "@types/nodemailer": "^6.4.0",
     "@types/nunjucks": "^3.1.3",
     "@types/ws": "^7.2.6",
+    "@typescript-eslint/eslint-plugin": "^4.3.0",
+    "@typescript-eslint/parser": "^4.3.0",
     "babel-loader": "^8.1.0",
     "concurrently": "^5.1.0",
-    "css-loader": "^3.5.2",
+    "css-loader": "^5.0.0",
+    "eslint": "^7.10.0",
     "feather-icons": "^4.28.0",
     "file-loader": "^6.0.0",
     "imagemin": "^7.0.1",
@@ -38,19 +46,21 @@
     "imagemin-svgo": "^8.0.0",
     "img-loader": "^3.0.1",
     "jest": "^26.1.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "maildev": "^1.1.0",
-    "node-sass": "^4.14.0",
+    "mini-css-extract-plugin": "^1.2.1",
+    "node-sass": "^5.0.0",
     "nodemon": "^2.0.3",
-    "sass-loader": "^9.0.2",
+    "sass-loader": "^10.0.1",
+    "terser-webpack-plugin": "^5.0.3",
     "ts-jest": "^26.1.1",
-    "typescript": "^3.8.3",
+    "ts-loader": "^8.0.4",
-    "uglifyjs-webpack-plugin": "^2.2.0",
+    "typescript": "^4.0.2",
-    "webpack": "^4.43.0",
+    "webpack": "^5.3.2",
-    "webpack-cli": "^3.3.11",
+    "webpack-cli": "^4.1.0"
-    "wms-core": "^0"
   },
   "dependencies": {
     "config": "^3.3.1",
-    "express": "^4.17.1"
+    "express": "^4.17.1",
+    "swaf": "^0.23.0"
   }
 }

src/App.ts

@@ -1,36 +1,38 @@
-import Application from "wms-core/Application";
+import Application from "swaf/Application";
-import {Type} from "wms-core/Utils";
+import Migration, {MigrationType} from "swaf/db/Migration";
-import Migration from "wms-core/db/Migration";
+import CreateMigrationsTable from "swaf/migrations/CreateMigrationsTable";
-import CreateMigrationsTable from "wms-core/migrations/CreateMigrationsTable";
+import ExpressAppComponent from "swaf/components/ExpressAppComponent";
-import CreateLogsTable from "wms-core/migrations/CreateLogsTable";
+import NunjucksComponent from "swaf/components/NunjucksComponent";
-import ExpressAppComponent from "wms-core/components/ExpressAppComponent";
+import MysqlComponent from "swaf/components/MysqlComponent";
-import NunjucksComponent from "wms-core/components/NunjucksComponent";
+import LogRequestsComponent from "swaf/components/LogRequestsComponent";
-import MysqlComponent from "wms-core/components/MysqlComponent";
+import RedisComponent from "swaf/components/RedisComponent";
-import LogRequestsComponent from "wms-core/components/LogRequestsComponent";
+import ServeStaticDirectoryComponent from "swaf/components/ServeStaticDirectoryComponent";
-import RedisComponent from "wms-core/components/RedisComponent";
+import MaintenanceComponent from "swaf/components/MaintenanceComponent";
-import ServeStaticDirectoryComponent from "wms-core/components/ServeStaticDirectoryComponent";
+import MailComponent from "swaf/components/MailComponent";
-import MaintenanceComponent from "wms-core/components/MaintenanceComponent";
+import SessionComponent from "swaf/components/SessionComponent";
-import MailComponent from "wms-core/components/MailComponent";
+import FormHelperComponent from "swaf/components/FormHelperComponent";
-import SessionComponent from "wms-core/components/SessionComponent";
+import CsrfProtectionComponent from "swaf/components/CsrfProtectionComponent";
-import RedirectBackComponent from "wms-core/components/RedirectBackComponent";
+import WebSocketServerComponent from "swaf/components/WebSocketServerComponent";
-import FormHelperComponent from "wms-core/components/FormHelperComponent";
-import CsrfProtectionComponent from "wms-core/components/CsrfProtectionComponent";
-import WebSocketServerComponent from "wms-core/components/WebSocketServerComponent";
 import HomeController from "./controllers/HomeController";
-import AutoUpdateComponent from "wms-core/components/AutoUpdateComponent";
+import AutoUpdateComponent from "swaf/components/AutoUpdateComponent";
+import DummyMigration from "swaf/migrations/DummyMigration";
+import DropLegacyLogsTable from "swaf/migrations/DropLegacyLogsTable";
+import PreviousUrlComponent from "swaf/components/PreviousUrlComponent";
+import packageJson = require('./package.json');
 
 export default class App extends Application {
-    private readonly port: number;
+    public constructor(
-
+        private readonly addr: string,
-    constructor(port: number) {
+        private readonly port: number,
-        super(require('../package.json').version);
+    ) {
-        this.port = port;
+        super(packageJson.version);
     }
 
-    protected getMigrations(): Type<Migration>[] {
+    protected getMigrations(): MigrationType<Migration>[] {
         return [
             CreateMigrationsTable,
-            CreateLogsTable,
+            DummyMigration,
+            DropLegacyLogsTable,
         ];
     }
 
@@ -41,44 +43,44 @@ export default class App extends Application {
     }
 
     private registerComponents() {
-        const redisComponent = new RedisComponent();
+        // Base
-        const mysqlComponent = new MysqlComponent();
+        this.use(new ExpressAppComponent(this.addr, this.port));
-
-        const expressAppComponent = new ExpressAppComponent(this.port);
-        this.use(expressAppComponent);
-        this.use(new NunjucksComponent());
         this.use(new LogRequestsComponent());
 
         // Static files
         this.use(new ServeStaticDirectoryComponent('public'));
         this.use(new ServeStaticDirectoryComponent('node_modules/feather-icons/dist', '/icons'));
 
+        // Dynamic views and routes
+        this.use(new NunjucksComponent());
+        this.use(new PreviousUrlComponent());
+
         // Maintenance
         this.use(new MaintenanceComponent(this, () => {
-            return redisComponent.canServe() && mysqlComponent.canServe();
+            return this.as(RedisComponent).canServe() && this.as(MysqlComponent).canServe();
         }));
         this.use(new AutoUpdateComponent());
 
         // Services
-        this.use(mysqlComponent);
+        this.use(new MysqlComponent());
         this.use(new MailComponent());
 
         // Session
-        this.use(redisComponent);
+        this.use(new RedisComponent());
-        this.use(new SessionComponent(redisComponent));
+        this.use(new SessionComponent(this.as(RedisComponent)));
 
         // Utils
-        this.use(new RedirectBackComponent());
         this.use(new FormHelperComponent());
 
         // Middlewares
         this.use(new CsrfProtectionComponent());
 
         // WebSocket server
-        this.use(new WebSocketServerComponent(this, expressAppComponent, redisComponent));
+        this.use(new WebSocketServerComponent(this, this.as(ExpressAppComponent), this.as(RedisComponent)));
     }
 
     private registerWebSocketListeners() {
+        // WebSocket listeners
     }
 
     private registerControllers() {

src/controllers/HomeController.ts

@@ -1,17 +1,25 @@
-import Controller from "wms-core/Controller";
+import Controller from "swaf/Controller";
 import {Request, Response} from "express";
 
 export default class HomeController extends Controller {
-    routes(): void {
+    public routes(): void {
         this.get('/', this.getHome, 'home');
         this.get('/about', this.getAbout, 'about');
+        this.get('/back', this.goBack, 'about');
     }
 
-    private async getHome(req: Request, res: Response) {
+    protected async getHome(req: Request, res: Response): Promise<void> {
         res.render('home');
     }
 
-    private async getAbout(req: Request, res: Response) {
+    protected async getAbout(req: Request, res: Response): Promise<void> {
         res.render('about');
     }
+
+    /**
+     * This is to test and assert that swaf extended types are available
+     */
+    protected async goBack(req: Request, res: Response): Promise<void> {
+        res.redirect(req.getPreviousUrl() || Controller.route('home'));
+    }
 }

src/main.ts

@@ -1,10 +1,20 @@
-import Logger from "wms-core/Logger";
+import {delimiter} from "path";
+
+// Load config from specified path or default + swaf/config (default defaults)
+process.env['NODE_CONFIG_DIR'] =
+    __dirname + '/../node_modules/swaf/config/'
+    + delimiter
+    + (process.env['NODE_CONFIG_DIR'] || __dirname + '/../config/');
+
+import {logger} from "swaf/Logger";
 import App from "./App";
 import config from "config";
 
 (async () => {
-    const app = new App(config.get<number>('port'));
+    logger.debug('Config path:', process.env['NODE_CONFIG_DIR']);
+
+    const app = new App(config.get<string>('listen_addr'), config.get<number>('port'));
     await app.start();
 })().catch(err => {
-    Logger.error(err);
+    logger.error(err);
 });

tsconfig.frontend.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "public/js",
+    "rootDir": "./assets",
+    "target": "ES6",
+    "strict": true,
+    "lib": [
+      "es2020",
+      "DOM"
+    ],
+    "typeRoots": [
+      "./node_modules/@types"
+    ]
+  },
+  "include": [
+    "assets/ts/**/*"
+  ]
+}

tsconfig.json

@@ -3,17 +3,20 @@
     "module": "CommonJS",
     "esModuleInterop": true,
     "outDir": "dist",
+    "rootDir": "./src",
     "target": "ES6",
     "strict": true,
     "lib": [
-      "es2020"
+      "es2020",
+      "DOM"
     ],
     "typeRoots": [
       "./node_modules/@types"
-    ]
+    ],
+    "resolveJsonModule": true
   },
   "include": [
     "src/**/*",
-    "node_modules/wms-core"
+    "node_modules/swaf/types"
   ]
 }

tsconfig.test.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "typeRoots": [
+      "node_modules/@types",
+      "src/types",
+      "test/types"
+    ]
+  },
+  "include": [
+    "src/types/**/*",
+    "test/**/*"
+  ]
+}

views/about.njk

@@ -8,7 +8,7 @@
     <div class="container">
         <section class="panel">
             <h2>This is us</h2>
-            <p class="center">And we like wms!</p>
+            <p class="center">And we like swaf!</p>
         </section>
     </div>
 {% endblock %}

webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const dev = process.env.NODE_ENV === 'development';
 
@@ -48,6 +48,16 @@ const config = {
                 test: /\.(woff2?|eot|ttf|otf)$/i,
                 use: 'file-loader?name=../fonts/[name].[ext]',
             },
+            {
+                test: /\.tsx?$/i,
+                use: {
+                    loader: 'ts-loader',
+                    options: {
+                        configFile: 'tsconfig.frontend.json',
+                    }
+                },
+                exclude: '/node_modules/'
+            },
             {
                 test: /\.(png|jpe?g|gif|svg)$/i,
                 use: [
@@ -68,6 +78,9 @@ const config = {
             }
         ],
     },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
     plugins: [
         new MiniCssExtractPlugin({
             filename: '../css/[name].css',
@@ -77,8 +90,9 @@ const config = {
 
 if (!dev) {
     config.optimization = {
+        minimize: true,
         minimizer: [
-            new UglifyJSPlugin(),
+            new TerserPlugin(),
         ]
     };
 }