ashpie/ily.li
ashpie/ily.li
1
0
Fork 0
Code Issues 3 Pull Requests 1 Releases 2 Wiki Activity

Merge branch 'develop'

Browse Source
This commit is contained in:
Alice Gaudon 2021-01-25 13:20:25 +01:00
commit 46168c0e90
33 changed files with 665 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
.eslintrc.json Normal file
View File

@ -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
}
]
}
}
]
}

2
.gitignore vendored
View File

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

3
README.md
View File

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

11
app.service
View File

@ -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
Group=wms
WorkingDirectory=/home/wms/live
User=swaf
Group=swaf
WorkingDirectory=/home/swaf/live
Restart=on-success
Environment=NODE_ENV=production
ExecStart=/bin/node .

2
assets/config.json
View File

@ -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",

1
assets/img/logo.svg
View File

@ -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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

12
assets/js/copyable_text.js
View File

@ -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');
});
});
});

29
assets/js/forms.js
View File

@ -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}`;
}
}
}

17
assets/js/main_menu.js
View File

@ -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');
});
});

3
assets/sass/_vars.scss
View File

@ -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;

282
assets/sass/layout.scss
View File

@ -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;
}
}
.dropdown {
position: initial;
display: block;
padding-left: 32px;
}
}
}
}
}
@media (min-width: $menuLayoutSwitchTreshold) {
@media (min-width: $mobileThreshold) {
nav ul li {
a, button {
.tip {
visibility: hidden;
position: absolute;
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;
}
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%);
border-radius: 5px;
background: transparent;
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;
input[type=checkbox] {
text-align: left;
width: min-content;
height: min-content;
.control {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
& ~ label {
position: static;
display: inline;
padding-left: 8px;
font-size: 16px;
input[type=checkbox] {
width: min-content;
height: min-content;
margin: 8px;
text-align: left;
& ~ label {
position: static;
flex-grow: 1;
display: inline;
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;
margin: 0 auto;
@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;

39
assets/ts/PersistentWebSocket.ts Normal file
View File

@ -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;

5
assets/js/app.js → assets/ts/app.ts
View File

@ -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!');

15
assets/ts/copyable_text.ts Normal file
View File

@ -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');
});
}
});
});

6
assets/js/external_links.js → assets/ts/external_links.ts
View File

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

4
assets/ts/font-awesome.ts Normal file
View File

@ -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';

43
assets/ts/forms.ts Normal file
View File

@ -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}`;
}
}

21
assets/ts/main_menu.ts Normal file
View File

@ -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');
});
}
});

15
assets/js/message_icons.js → assets/ts/message_icons.ts
View File

@ -1,21 +1,26 @@
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();
});
feather.replace();
});
});

31
assets/ts/tooltips-and-dropdowns.ts Normal file
View File

@ -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();
});
});

6
config/default.ts → config/default.json5
View File

@ -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,
});
}

4
config/production.ts → config/production.json5
View File

@ -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
}
});
}

6
config/test.ts → config/test.json5
View File

@ -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
}
});
}

46
package.json
View File

@ -1,34 +1,42 @@
{
"name": "example-app",
"version": "0.1.0",
"description": "Example App based on wms-core",
"repository": "git@gitlab.com:ArisuOngaku/wms-boilerplate.git",
"description": "Example App based on swaf",
"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",
"dist": "tsc && npm run dist-webpack",
"dev": "concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"webpack --watch --mode development\" \"maildev\"",
"start": "yarn dist && node dist/main.js"
"clean": "(test ! -d dist || rm -r dist)",
"prepareSources": "cp package.json src/",
"compile": "yarn clean && tsc",
"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",
"node-sass": "^4.14.0",
"maildev": "^1.1.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",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"wms-core": "^0"
"ts-loader": "^8.0.4",
"typescript": "^4.0.2",
"webpack": "^5.3.2",
"webpack-cli": "^4.1.0"
},
"dependencies": {
"config": "^3.3.1",
"express": "^4.17.1"
"express": "^4.17.1",
"swaf": "^0.23.0"
}
}

80
src/App.ts
View File

@ -1,36 +1,38 @@
import Application from "wms-core/Application";
import {Type} from "wms-core/Utils";
import Migration from "wms-core/db/Migration";
import CreateMigrationsTable from "wms-core/migrations/CreateMigrationsTable";
import CreateLogsTable from "wms-core/migrations/CreateLogsTable";
import ExpressAppComponent from "wms-core/components/ExpressAppComponent";
import NunjucksComponent from "wms-core/components/NunjucksComponent";
import MysqlComponent from "wms-core/components/MysqlComponent";
import LogRequestsComponent from "wms-core/components/LogRequestsComponent";
import RedisComponent from "wms-core/components/RedisComponent";
import ServeStaticDirectoryComponent from "wms-core/components/ServeStaticDirectoryComponent";
import MaintenanceComponent from "wms-core/components/MaintenanceComponent";
import MailComponent from "wms-core/components/MailComponent";
import SessionComponent from "wms-core/components/SessionComponent";
import RedirectBackComponent from "wms-core/components/RedirectBackComponent";
import FormHelperComponent from "wms-core/components/FormHelperComponent";
import CsrfProtectionComponent from "wms-core/components/CsrfProtectionComponent";
import WebSocketServerComponent from "wms-core/components/WebSocketServerComponent";
import Application from "swaf/Application";
import Migration, {MigrationType} from "swaf/db/Migration";
import CreateMigrationsTable from "swaf/migrations/CreateMigrationsTable";
import ExpressAppComponent from "swaf/components/ExpressAppComponent";
import NunjucksComponent from "swaf/components/NunjucksComponent";
import MysqlComponent from "swaf/components/MysqlComponent";
import LogRequestsComponent from "swaf/components/LogRequestsComponent";
import RedisComponent from "swaf/components/RedisComponent";
import ServeStaticDirectoryComponent from "swaf/components/ServeStaticDirectoryComponent";
import MaintenanceComponent from "swaf/components/MaintenanceComponent";
import MailComponent from "swaf/components/MailComponent";
import SessionComponent from "swaf/components/SessionComponent";
import FormHelperComponent from "swaf/components/FormHelperComponent";
import CsrfProtectionComponent from "swaf/components/CsrfProtectionComponent";
import WebSocketServerComponent from "swaf/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;
constructor(port: number) {
super(require('../package.json').version);
this.port = port;
public constructor(
private readonly addr: string,
private readonly port: number,
) {
super(packageJson.version);
}
protected getMigrations(): Type<Migration>[] {
protected getMigrations(): MigrationType<Migration>[] {
return [
CreateMigrationsTable,
CreateLogsTable,
DummyMigration,
DropLegacyLogsTable,
];
}
@ -41,47 +43,47 @@ export default class App extends Application {
}
private registerComponents() {
const redisComponent = new RedisComponent();
const mysqlComponent = new MysqlComponent();
const expressAppComponent = new ExpressAppComponent(this.port);
this.use(expressAppComponent);
this.use(new NunjucksComponent());
// Base
this.use(new ExpressAppComponent(this.addr, this.port));
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 SessionComponent(redisComponent));
this.use(new 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() {
this.use(new HomeController());
}
}
}

18
src/controllers/HomeController.ts
View File

@ -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'));
}
}

18
src/main.ts
View File

@ -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);
});

2
test/App.test.ts
View File

@ -2,4 +2,4 @@ describe('Write your tests', () => {
test('Remove this when you have some tests', () => {
expect(false).toBe(true);
});
});
});

19
tsconfig.frontend.json Normal file
View File

@ -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/**/*"
]
}

11
tsconfig.json
View File

@ -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"
]
}
}

14
tsconfig.test.json Normal file
View File

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

4
views/about.njk
View File

@ -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 %}
{% endblock %}

18
webpack.config.js
View File

@ -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(),
]
};
}