Switch to esbuild & NodeJS 18

- Replace Axios with `fetch` api - Update dependencies Signed-off-by: Knut Ahlers <knut@ahlers.me>
2023-06-10 14:50:21 +02:00 · 2023-06-10 14:50:21 +02:00 · d3ca12fa35
commit d3ca12fa35
parent ea631beeef
16 changed files with 4517 additions and 7986 deletions
--- a/.eslintrc.js
+++ b/.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'],
+  },
+}
--- a/.github/workflows/test-and-build.yml
+++ b/.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 \
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
+frontend/app.css
 frontend/app.js
 frontend/app.js.LICENSE.txt
 frontend/css
--- a/5
+++ b/5
@ -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
--- a/Dockerfile.minimal
+++ b/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-apidocs \
+ && make download_libs generate-inner generate-apidocs \
 && go install \
      -ldflags "-X main.version=$(git describe --tags --always || echo dev)" \
      -mod=readonly
--- a/14
+++ b/14
@ -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
--- a/ci/build.mjs
+++ b/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',
+  ],
+})
--- a/frontend/index.html
+++ b/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"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
+  }
+}
--- a/src/.eslintrc.js
+++ b/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'],
-  },
-}
--- a/src/app.vue
+++ b/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) {
--- a/src/package-lock.json
+++ b/src/package-lock.json
--- a/src/package.json
+++ b/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"
-  }
-}
--- a/src/style.scss
+++ b/src/style.scss
@ -3,12 +3,12 @@ $web-font-path: '';

@import "lato";

-:root { 
+: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;
--- a/src/webpack.config.js
+++ b/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]',
-        },
-      },
-
-    ],
-  },
-}