Switch to esbuild & NodeJS 18

- Replace Axios with `fetch` api
- Update dependencies

Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
Knut Ahlers 2023-06-10 14:50:21 +02:00
parent ea631beeef
commit d3ca12fa35
No known key found for this signature in database
GPG Key ID: D91C3E91E4CAD6F5
16 changed files with 4517 additions and 7986 deletions

151
.eslintrc.js Normal file
View File

@ -0,0 +1,151 @@
/*
* Hack to automatically load globally installed eslint modules
* on Archlinux systems placed in /usr/lib/node_modules
*
* Source: https://github.com/eslint/eslint/issues/11914#issuecomment-569108633
*/
const Module = require('module')
const hacks = [
'babel-eslint',
'eslint-plugin-vue',
]
const ModuleFindPath = Module._findPath
Module._findPath = (request, paths, isMain) => {
const r = ModuleFindPath(request, paths, isMain)
if (!r && hacks.includes(request)) {
return require.resolve(`/usr/lib/node_modules/${request}`)
}
return r
}
/*
* ESLint configuration derived as differences from eslint:recommended
* with changes I found useful to ensure code quality and equal formatting
* https://eslint.org/docs/user-guide/configuring
*/
module.exports = {
env: {
browser: true,
node: true,
},
extends: [
'plugin:vue/recommended',
'eslint:recommended', // https://eslint.org/docs/rules/
],
globals: {
process: true,
},
parserOptions: {
ecmaVersion: 2020,
parser: '@babel/eslint-parser',
requireConfigFile: false,
},
plugins: [
// required to lint *.vue files
'vue',
],
reportUnusedDisableDirectives: true,
root: true,
rules: {
'array-bracket-newline': ['error', { multiline: true }],
'array-bracket-spacing': ['error'],
'arrow-body-style': ['error', 'as-needed'],
'arrow-parens': ['error', 'as-needed'],
'arrow-spacing': ['error', { after: true, before: true }],
'block-spacing': ['error'],
'brace-style': ['error', '1tbs'],
'comma-dangle': ['error', 'always-multiline'],
'comma-spacing': ['error'],
'comma-style': ['error', 'last'],
'curly': ['error'],
'default-case-last': ['error'],
'default-param-last': ['error'],
'dot-location': ['error', 'property'],
'dot-notation': ['error'],
'eol-last': ['error', 'always'],
'eqeqeq': ['error', 'always', { null: 'ignore' }],
'func-call-spacing': ['error', 'never'],
'function-paren-newline': ['error', 'multiline'],
'generator-star-spacing': ['off'], // allow async-await
'implicit-arrow-linebreak': ['error'],
'indent': ['error', 2],
'key-spacing': ['error', { afterColon: true, beforeColon: false, mode: 'strict' }],
'keyword-spacing': ['error'],
'linebreak-style': ['error', 'unix'],
'lines-between-class-members': ['error'],
'multiline-comment-style': ['warn'],
'newline-per-chained-call': ['error'],
'no-alert': ['error'],
'no-console': ['off'],
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow debugger during development
'no-duplicate-imports': ['error'],
'no-else-return': ['error'],
'no-empty-function': ['error'],
'no-extra-parens': ['error'],
'no-implicit-coercion': ['error'],
'no-lonely-if': ['error'],
'no-multi-spaces': ['error'],
'no-multiple-empty-lines': ['warn', { max: 2, maxBOF: 0, maxEOF: 0 }],
'no-promise-executor-return': ['error'],
'no-return-assign': ['error'],
'no-script-url': ['error'],
'no-template-curly-in-string': ['error'],
'no-trailing-spaces': ['error'],
'no-unneeded-ternary': ['error'],
'no-unreachable-loop': ['error'],
'no-unsafe-optional-chaining': ['error'],
'no-useless-return': ['error'],
'no-var': ['error'],
'no-warning-comments': ['error'],
'no-whitespace-before-property': ['error'],
'object-curly-newline': ['error', { consistent: true }],
'object-curly-spacing': ['error', 'always'],
'object-shorthand': ['error'],
'padded-blocks': ['error', 'never'],
'prefer-arrow-callback': ['error'],
'prefer-const': ['error'],
'prefer-object-spread': ['error'],
'prefer-rest-params': ['error'],
'prefer-template': ['error'],
'quote-props': ['error', 'consistent-as-needed', { keywords: false }],
'quotes': ['error', 'single', { allowTemplateLiterals: true }],
'require-atomic-updates': ['error'],
'require-await': ['error'],
'semi': ['error', 'never'],
'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: false, ignoreMemberSort: false }],
'sort-keys': ['error', 'asc', { caseSensitive: true, natural: false }],
'space-before-blocks': ['error', 'always'],
'space-before-function-paren': ['error', 'never'],
'space-in-parens': ['error', 'never'],
'space-infix-ops': ['error'],
'space-unary-ops': ['error', { nonwords: false, words: true }],
'spaced-comment': ['warn', 'always'],
'switch-colon-spacing': ['error'],
'template-curly-spacing': ['error', 'never'],
'unicode-bom': ['error', 'never'],
'vue/new-line-between-multi-line-property': ['error'],
'vue/no-empty-component-block': ['error'],
'vue/no-reserved-component-names': ['error'],
'vue/no-template-target-blank': ['error'],
'vue/no-unused-properties': ['error'],
'vue/no-unused-refs': ['error'],
'vue/no-useless-mustaches': ['error'],
'vue/order-in-components': ['off'], // Collides with sort-keys
'vue/require-name-property': ['error'],
'vue/v-for-delimiter-style': ['error'],
'vue/v-on-function-call': ['error'],
'wrap-iife': ['error'],
'yoda': ['error'],
},
}

View File

@ -37,7 +37,7 @@ jobs:
go \
golangci-lint-bin \
make \
nodejs-lts-fermium \
nodejs-lts-hydrogen \
npm \
tar \
unzip \

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
frontend/app.css
frontend/app.js
frontend/app.js.LICENSE.txt
frontend/css

View File

@ -12,12 +12,11 @@ RUN set -ex \
git \
go \
make \
nodejs-lts-fermium \
nodejs-lts-hydrogen \
npm \
tar \
unzip \
&& make -C src -f ../Makefile generate-inner \
&& make download_libs generate-apidocs \
&& make download_libs generate-inner generate-apidocs \
&& go install \
-ldflags "-X main.version=$(git describe --tags --always || echo dev)" \
-mod=readonly

View File

@ -12,12 +12,11 @@ RUN set -ex \
git \
go \
make \
nodejs-lts-fermium \
nodejs-lts-hydrogen \
npm \
tar \
unzip \
&& make -C src -f ../Makefile generate-inner \
&& make download_libs generate-apidocs \
&& make download_libs generate-inner generate-apidocs \
&& go install \
-ldflags "-X main.version=$(git describe --tags --always || echo dev)" \
-mod=readonly

View File

@ -1,13 +1,11 @@
VER_FONTAWESOME=5.14.0
VER_FONTAWESOME=6.4.0
default: generate download_libs
generate:
docker run --rm -i -v $(CURDIR):$(CURDIR) -w $(CURDIR) node:14-alpine \
sh -exc "apk add make && make -C src -f ../Makefile generate-inner && chown -R $(shell id -u) frontend src/node_modules"
docker run --rm -ti -v $(CURDIR):$(CURDIR) -w $(CURDIR) node:14-alpine \
sh -exc "apk add make && make generate-apidocs && chown -R $(shell id -u) frontend"
docker run --rm -i -v $(CURDIR):$(CURDIR) -w $(CURDIR) node:18-alpine \
sh -exc "apk add make && make generate-inner generate-apidocs && chown -R $(shell id -u) frontend node_modules"
generate-apidocs:
npx @redocly/cli build-docs docs/openapi.yaml --disableGoogleFont true -o /tmp/api.html
@ -15,10 +13,9 @@ generate-apidocs:
generate-inner:
npx npm@latest ci
npx npm@latest run build
node ./ci/build.mjs
publish: download_libs generate-apidocs
$(MAKE) -C src -f ../Makefile generate-inner
publish: download_libs generate-inner generate-apidocs
curl -sSLo golang.sh https://raw.githubusercontent.com/Luzifer/github-publish/master/golang.sh
bash golang.sh
@ -28,7 +25,6 @@ clean_libs:
rm -rf \
frontend/css \
frontend/js \
frontend/openssl \
frontend/webfonts
download_libs: clean_libs

28
ci/build.mjs Normal file
View File

@ -0,0 +1,28 @@
import { sassPlugin } from 'esbuild-sass-plugin'
import vuePlugin from 'esbuild-vue'
import esbuild from 'esbuild'
esbuild.build({
assetNames: '[name]',
bundle: true,
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'dev'),
},
entryPoints: ['src/main.js'],
loader: {
'.woff2': 'file',
},
minify: true,
outfile: 'frontend/app.js',
plugins: [
sassPlugin(),
vuePlugin(),
],
target: [
'chrome87',
'edge87',
'es2020',
'firefox84',
'safari14',
],
})

View File

@ -16,6 +16,13 @@
>
{{ end }}
<link
crossorigin="anonymous"
href="app.css"
integrity="{{ assetSRI `app.css` }}"
rel="stylesheet"
>
<link
crossorigin="anonymous"
href="css/all.min.css"

4280
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

20
package.json Normal file
View File

@ -0,0 +1,20 @@
{
"devDependencies": {
"@babel/eslint-parser": "^7.22.5",
"esbuild": "^0.17.17",
"esbuild-vue": "^1.2.2",
"eslint": "^8.42.0",
"esbuild-sass-plugin": "^2.9.0",
"eslint-plugin-vue": "^9.14.1",
"vue-template-compiler": "^2.7.14"
},
"name": "ots",
"private": true,
"dependencies": {
"bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1",
"bootswatch": "^4.6.2",
"vue": "^2.7.14",
"vue-i18n": "^8.28.2"
}
}

View File

@ -1,89 +0,0 @@
// https://eslint.org/docs/user-guide/configuring
module.exports = {
'root': true,
'parserOptions': {
parser: 'babel-eslint',
sourceType: 'module',
},
'env': {
node: true,
},
'extends': [
/*
* https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
* consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
*/
'plugin:vue/recommended',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'eslint:recommended',
],
// required to lint *.vue files
'plugins': ['vue'],
'globals': {
locale: true,
process: true,
version: true,
},
// add your custom rules here
'rules': {
'array-bracket-newline': ['error', { multiline: true }],
'array-bracket-spacing': ['error'],
'arrow-body-style': ['error', 'as-needed'],
'arrow-parens': ['error', 'as-needed'],
'arrow-spacing': ['error', { before: true, after: true }],
'block-spacing': ['error'],
'brace-style': ['error', '1tbs'],
'comma-dangle': ['error', 'always-multiline'], // Apply Contentflow rules
'comma-spacing': ['error'],
'comma-style': ['error', 'last'],
'curly': ['error'],
'dot-location': ['error', 'property'],
'dot-notation': ['error'],
'eol-last': ['error', 'always'],
'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
'func-call-spacing': ['error', 'never'],
'function-paren-newline': ['error', 'multiline'],
'generator-star-spacing': ['off'], // allow async-await
'implicit-arrow-linebreak': ['error'],
'indent': ['error', 2],
'key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
'keyword-spacing': ['error'],
'linebreak-style': ['error', 'unix'],
'lines-between-class-members': ['error'],
'multiline-comment-style': ['warn'],
'newline-per-chained-call': ['error'],
'no-console': ['off'],
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow debugger during development
'no-else-return': ['error'],
'no-extra-parens': ['error'],
'no-implicit-coercion': ['error'],
'no-lonely-if': ['error'],
'no-multiple-empty-lines': ['warn', { max: 2, maxEOF: 0, maxBOF: 0 }],
'no-multi-spaces': ['error'],
'no-trailing-spaces': ['error'],
'no-unneeded-ternary': ['error'],
'no-useless-return': ['error'],
'no-whitespace-before-property': ['error'],
'object-curly-newline': ['error', { consistent: true }],
'object-curly-spacing': ['error', 'always'],
'object-shorthand': ['error'],
'padded-blocks': ['error', 'never'],
'prefer-arrow-callback': ['error'],
'prefer-const': ['error'],
'prefer-object-spread': ['error'],
'prefer-template': ['error'],
'quote-props': ['error', 'consistent-as-needed', { keywords: true }],
'quotes': ['error', 'single', { allowTemplateLiterals: true }],
'semi': ['error', 'never'],
'space-before-blocks': ['error', 'always'],
'spaced-comment': ['warn', 'always'],
'space-infix-ops': ['error'],
'space-in-parens': ['error', 'never'],
'space-unary-ops': ['error', { words: true, nonwords: false }],
'switch-colon-spacing': ['error'],
'unicode-bom': ['error', 'never'],
'wrap-iife': ['error'],
'yoda': ['error'],
},
}

View File

@ -166,7 +166,6 @@
</template>
<script>
import axios from 'axios'
import crypto from './crypto.js'
const passwordCharset = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
@ -224,8 +223,17 @@ export default {
.map(n => passwordCharset[n % passwordCharset.length])
.join('')
crypto.enc(this.secret, this.securePassword)
.then(secret => axios.post('api/create', { secret })
.then(secret => fetch('api/create', {
body: JSON.stringify({ secret }),
headers: {
'content-type': 'application/json',
},
method: 'POST',
})
.then(resp => resp.json())
.then(data => ({ data }))
.then(resp => {
console.warn(resp)
this.secretId = resp.data.secret_id
this.secret = ''
@ -269,7 +277,9 @@ export default {
// requestSecret requests the encrypted secret from the backend
requestSecret() {
axios.get(`api/get/${this.secretId}`)
fetch(`api/get/${this.secretId}`)
.then(resp => resp.json())
.then(data => ({ data }))
.then(resp => {
const secret = resp.data.secret
if (!this.securePassword) {

7776
src/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,34 +0,0 @@
{
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"eslint": "^6.0.0",
"eslint-plugin-vue": "^7.17.0",
"node-sass": "^7.0.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.52.0",
"webpack-cli": "^4.8.0",
"webpack-dev-middleware": "^5.0.0",
"webpack-hot-middleware": "^2.25.0"
},
"name": "ots",
"private": true,
"scripts": {
"build": "webpack --mode=production"
},
"dependencies": {
"axios": "^0.21.4",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"bootswatch": "^4.6.0",
"popper.js": "^1.16.1",
"vue": "^2.6.14",
"vue-i18n": "^8.25.0"
}
}

View File

@ -6,9 +6,9 @@ $web-font-path: '';
:root {
&[mode="dark"] {
@import "node_modules/bootswatch/dist/darkly/_variables";
@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootswatch/dist/darkly/_bootswatch";
@import "../node_modules/bootswatch/dist/darkly/_variables";
@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/bootswatch/dist/darkly/_bootswatch";
.custom-control-input:checked ~ .custom-control-label::before {
border-color: #333;
@ -38,9 +38,9 @@ $web-font-path: '';
}
&[mode="light"] {
@import "node_modules/bootswatch/dist/flatly/_variables";
@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootswatch/dist/flatly/_bootswatch";
@import "../node_modules/bootswatch/dist/flatly/_variables";
@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/bootswatch/dist/flatly/_bootswatch";
.footer {
color: #2f2f2f;

View File

@ -1,61 +0,0 @@
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './main.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, '..', 'frontend'),
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
new VueLoaderPlugin(),
],
optimization: {
minimize: true,
},
module: {
rules: [
{
test: /\.(s?)css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', { targets: { browsers: ['>0.25%', 'not ie 11', 'not op_mini all'] } }]],
},
},
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.woff2/,
type: 'asset/resource',
generator: {
filename: '[name][ext]',
},
},
],
},
}