Switch to esbuild & NodeJS 18

- Replace Axios with `fetch` api
- Update dependencies

Signed-off-by: Knut Ahlers <knut@ahlers.me>

.eslintrc.js

@@ -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'],
+  },
+}

.github/workflows/test-and-build.yml

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

.gitignore

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

Dockerfile

@@ -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-inner generate-apidocs \
- && make download_libs generate-apidocs \
  && go install \
       -ldflags "-X main.version=$(git describe --tags --always || echo dev)" \
       -mod=readonly

Dockerfile.minimal

@@ -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-inner generate-apidocs \
- && make download_libs generate-apidocs \
  && go install \
       -ldflags "-X main.version=$(git describe --tags --always || echo dev)" \
       -mod=readonly

Makefile

@@ -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 \
+	docker run --rm -i -v $(CURDIR):$(CURDIR) -w $(CURDIR) node:18-alpine \
-		sh -exc "apk add make && make -C src -f ../Makefile generate-inner && chown -R $(shell id -u) frontend src/node_modules"
+		sh -exc "apk add make && make generate-inner generate-apidocs && chown -R $(shell id -u) frontend 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"
 
 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
+publish: download_libs generate-inner generate-apidocs
-	$(MAKE) -C src -f ../Makefile generate-inner
 	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

ci/build.mjs

@@ -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',
+  ],
+})

frontend/index.html

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

package.json

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

src/.eslintrc.js

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

src/app.vue

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

src/package.json

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

src/style.scss

@@ -6,9 +6,9 @@ $web-font-path: '';
 :root {
 
   &[mode="dark"] {
-    @import "node_modules/bootswatch/dist/darkly/_variables";
+    @import "../node_modules/bootswatch/dist/darkly/_variables";
-    @import "node_modules/bootstrap/scss/bootstrap";
+    @import "../node_modules/bootstrap/scss/bootstrap";
-    @import "node_modules/bootswatch/dist/darkly/_bootswatch";
+    @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/bootswatch/dist/flatly/_variables";
-    @import "node_modules/bootstrap/scss/bootstrap";
+    @import "../node_modules/bootstrap/scss/bootstrap";
-    @import "node_modules/bootswatch/dist/flatly/_bootswatch";
+    @import "../node_modules/bootswatch/dist/flatly/_bootswatch";
 
     .footer {
       color: #2f2f2f;

src/webpack.config.js

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