Rebuild web client using npm, ts and vuejs

.github/workflows/format.yml

@@ -27,4 +27,19 @@ jobs:
         run: |
           git status --porcelain
           git diff
-          git status --porcelain | xargs -I {} -0 test -z \"{}\"
+          git status --porcelain | xargs -I {} -0 test -z \"{}\"
+
+  eslint:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 19.1
+
+      # ==== WEB LINT ====
+      - name: Install deps
+        run: npm clean-install --prefix web/client
+
+      - name: Run ESLint
+        run: npm run lint:eslint --prefix web/client

.github/workflows/linux.yml

@@ -37,6 +37,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 19.1
 
       - name: Get deps
         run: ln -s /deps deps
@@ -59,6 +62,7 @@ jobs:
       - name: Build
         run: |
           buildcache -z
+          npm clean-install --prefix web/client
           cmake --build build/${{ matrix.config.preset }} --target soro-server-client
           buildcache -s
 

cmake/soro-server-client.cmake

@@ -18,13 +18,12 @@ else ()
     set(SORO_SERVER_DIR ${CMAKE_CURRENT_BINARY_DIR})
     file(MAKE_DIRECTORY ${SORO_SERVER_DIR})
 
+    add_custom_target(soro-client-production COMMAND npm run build WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/web/client/)
+    add_custom_command(TARGET soro-client-production POST_BUILD COMMAND ${CMAKE_COMMAND} -E copy_directory
+            ${CMAKE_CURRENT_SOURCE_DIR}/web/client/dist
+            ${SORO_SERVER_DIR}/server_resources)
+
     add_subdirectory(web/server/)
     add_dependencies(soro-server-client soro-server)
-
-    file(GLOB_RECURSE soro-client-files web/client/ *.html *.css *.js *.ico *.png *.svg *.map)
-    foreach (file ${soro-client-files})
-        set(path ${file})
-        cmake_path(RELATIVE_PATH path BASE_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/web/client OUTPUT_VARIABLE relative-path)
-        configure_file(${file} ${SORO_SERVER_DIR}/server_resources/${relative-path} COPYONLY)
-    endforeach ()
+    add_dependencies(soro-server-client soro-client-production)
 endif ()

web/client/.eslintrc.cjs

@@ -0,0 +1,74 @@
+module.exports = {
+	root: true,
+	env: {
+		browser: true,
+		es2021: true
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:vue/vue3-essential',
+		'plugin:vue/vue3-recommended',
+		'@vue/eslint-config-typescript',
+		'@vue/eslint-config-typescript/recommended',
+	],
+	overrides: [],
+	parser: "vue-eslint-parser",
+	parserOptions: {
+		parser: "@typescript-eslint/parser",
+		ecmaVersion: 'latest',
+		sourceType: 'module'
+	},
+	plugins: [
+		'vue',
+		'@typescript-eslint'
+	],
+	rules: {
+		'indent': [
+			'error',
+			4
+		],
+		'curly': [
+			'error',
+			'all'
+		],
+		'brace-style': [
+			'error',
+			'1tbs'
+		],
+		'function-paren-newline': [
+			'error',
+			'multiline'
+		],
+		'linebreak-style': [
+			'error',
+			'unix'
+		],
+		'quotes': [
+			'error',
+			'single'
+		],
+		'semi': [
+			'error',
+			'always'
+		],
+		'comma-dangle': [
+			'error',
+			'only-multiline',
+		],
+		'object-curly-spacing': [
+			'error',
+			'always',
+		],
+		'object-shorthand': [
+			'error',
+			'properties',
+			{ avoidQuotes: true }
+		],
+		'vue/html-indent': [
+			'error',
+			4,
+		],
+		'@typescript-eslint/no-explicit-any': 0,
+		'@typescript-eslint/ban-ts-comment': 0,
+	}
+};

web/client/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

web/client/README.md

@@ -0,0 +1,32 @@
+## SORO-S Webclient
+
+### Tools:
+- Node.js (preferably install via [nvm](https://github.com/nvm-sh/nvm))
+
+### Setup:
+
+Have nodejs installed with npm available globally (enabled by default). Execute the following in this directory:
+
+```shell
+npm install
+```
+
+### Development
+
+```shell
+npm run dev
+```
+You can access the client with hmr now on the port shown in the console (usually [5173](http://localhost:5173)).
+
+### Building the web interface for production
+
+If you never ran ninja before, run it now in your `build/{clang,gcc}-release` directory.
+```shell
+ninja 
+```
+
+Then simply execute
+```shell
+ninja soro-client-production
+```
+This target has also been added to the `soro-server-client` target for convenience.