Switch from vue-cli to Vite for building

.drone.yml

@@ -78,7 +78,6 @@ steps:
     commands:
       - apt-get update && apt-get install -y dialog php7.4 php7.4-curl php7.4-dom php7.4-intl php7.4-json php7.4-mbstring php7.4-mysql php7.4-zip
       - cd src/frontend
-      - npm ci
       - node_modules/cypress/bin/cypress install
       - npm run test:e2e:ci
 
@@ -90,7 +89,6 @@ steps:
       event: cron
     commands:
       - cd src/frontend
-      - npm ci
       - node_modules/cypress/bin/cypress install
       - npm run test:e2e:nightly
 

release.Dockerfile

@@ -12,7 +12,7 @@ ENV RELEASE_FILENAME=$RELEASE_FILENAME
 ENV RELEASE_VERSION=$RELEASE_VERSION
 COPY --from=backend /var/app /var/app
 WORKDIR /var/app/src/frontend
-RUN npm install -g npm@7 && npm install && npm run build && npm run release
+RUN npm install && npm run build && npm run release
 WORKDIR /var/app/
 RUN find *.tar.gz -type f -exec sh -c "eval sha1sum {} > {}.sha1" \;
 

src/SuplaBundle/Tests/Integration/Controller/UserIconControllerIntegrationTest.php

@@ -117,7 +117,7 @@ public function testCreatingIconForLightSwitch() {
         $this->markTestSkipped('libpng warning: Interlace handling should be turned on when using png_read_image');
         $client = $this->createAuthenticatedClient($this->user);
         $image1 = new UploadedFile(self::SAMPLE_PNG_FILEPATH, 'devices.png');
-        $image2 = new UploadedFile(\AppKernel::ROOT_PATH . '/../web/assets/img/user.png', 'user.png');
+        $image2 = new UploadedFile(\AppKernel::ROOT_PATH . '/../web/assets/img/digiglass/opaque.png', 'user.png');
         $client->apiRequestV24(
             'POST',
             '/api/user-icons',

src/frontend/.eslintrc.js

@@ -2,16 +2,14 @@ module.exports = {
     root: true,
     env: {
         node: true,
-        jest: true
+        jest: true,
+        es2022: true
     },
     'extends': [
         'plugin:vue/essential',
         'eslint:recommended',
         "plugin:cypress/recommended",
     ],
-    parserOptions: {
-        parser: '@babel/eslint-parser'
-    },
     rules: {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

src/frontend/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+    presets: ['@babel/preset-env'],
 }

src/frontend/cypress.config.js

@@ -8,8 +8,8 @@ module.exports = defineConfig({
         DATABASE: "mysql://root:php@localhost/supla_e2e",
     },
     e2e: {
-        baseUrl: 'http://localhost:8080',
-        defaultCommandTimeout: 5000,
+        baseUrl: 'http://localhost:5173',
+        defaultCommandTimeout: 6000,
         taskTimeout: 10000,
         pageLoadTimeout: 10000,
         setupNodeEvents(on, config) {

src/frontend/public/index.html → src/frontend/index.html

@@ -43,6 +43,6 @@ <h3>SUPLA-Cloud will not work without Javascript</h3>
         }
     }, 8000);
 </script>
-<!-- built files will be auto injected -->
+<script type="module" src="/src/main.js"></script>
 </body>
 </html>

src/frontend/jest.config.js

@@ -1,9 +1,15 @@
 module.exports = {
     moduleNameMapper: {
-        '^.+\\.(css|scss)$': '<rootDir>/tests/unit/setup/css-stub.js'
+        '^.+\\.(css|scss)$': '<rootDir>/tests/unit/setup/css-stub.js',
+        "@/(.*)": "<rootDir>/src/$1",
     },
-    preset: '@vue/cli-plugin-unit-jest',
+    moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
+    testEnvironment: "jsdom",
     setupFiles: [
         '<rootDir>/tests/unit/setup/setup-mocks.js',
     ],
+    transform: {
+        '.*\\.js$': 'babel-jest',
+        ".*\\.(vue)$": "@vue/vue2-jest"
+    },
 }