Rebuild web client using npm, ts and vuejs (#1)

.github/workflows/format.yml

@@ -27,4 +27,22 @@ jobs:
         run: |
           git status --porcelain
           git diff
-          git status --porcelain | xargs -I {} -0 test -z \"{}\"
+          git status --porcelain | xargs -I {} -0 test -z \"{}\"
+
+  linting:
+    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
+
+      - name: Run Stylelint
+        run: npm run lint:stylelint --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
           buildcache -s
 

CMakeLists.txt

@@ -150,8 +150,7 @@ endif ()
 
 # Gets us the soro-server-client target
 set(SORO_SERVER_DIR ${CMAKE_CURRENT_BINARY_DIR})
-add_subdirectory(web/server)
-add_subdirectory(web/client)
+add_subdirectory(web)
 
 # Generate file_paths.h for locating the test resources
 configure_file(test/include/test/file_paths.h.in

web/CMakeLists.txt

@@ -0,0 +1,6 @@
+add_subdirectory(server)
+add_subdirectory(client)
+
+add_custom_target(soro-server-client)
+add_dependencies(soro-server-client soro-server)
+add_dependencies(soro-server-client soro-client-production)

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/.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-recommended-vue"
+  ],
+  "ignoreFiles": ["**/*.js", "**/*.ts"],
+  "rules": {
+    "indentation": 4
+  }
+}

web/client/CMakeLists.txt

@@ -1,19 +1,7 @@
 cmake_minimum_required(VERSION 3.18)
 project(soro)
 
-file(GLOB_RECURSE soro-client-files
-        *.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} OUTPUT_VARIABLE relative-path)
-    configure_file(${file} ${SORO_SERVER_DIR}/server_resources/${relative-path} COPYONLY)
-endforeach ()
-
-
+add_custom_target(soro-client-production COMMAND npm run build WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR})
+add_custom_command(TARGET soro-client-production POST_BUILD COMMAND ${CMAKE_COMMAND} -E copy_directory
+        ${CMAKE_CURRENT_SOURCE_DIR}/dist
+        ${SORO_SERVER_DIR}/server_resources)

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.