MT#63046 Update @quasar/app-webpack and relevant libs

This update introduced many breaking changes. Listed here the most important ones: * quasar.conf.js file has been renamed quasar.config.js. * Quasar v4 replaced the old /src/index.template.html with a new /index.html at the root of the project. The special comment  is used to inject scripts/styles automatically. * Use setupMiddlewares instead of onBeforeSetupMiddleware. * proxy is now an array of proxy config objects. * Dropped support for Vuex. We can still use Vuex as any Vue plugin, but we have to manage everything (installing the store, no store parameter in boot files, etc.). We'll migrate to Pinia asap. * Updated postcssrc according to docs Change-Id: I585a3e2d17f666d9ca2773fa446d644f0fc201a2
5 months ago · 72d36d22ab
parent 2b46170467
commit 72d36d22ab
19 changed files with 1965 additions and 1417 deletions
--- a/.gitignore
+++ b/.gitignore
@ -40,4 +40,4 @@ yarn-error.log*
 /junit.xml
 /test/jest/coverage

-quasar.conf.dev.js
+quasar.config.dev.js
--- a/.postcssrc.js
+++ b/.postcssrc.js
@ -1,8 +0,0 @@
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-    plugins: [
-        // to edit target browsers: use "browserslist" field in package.json
-        require('autoprefixer')
-    ]
-}
--- a/bin/config-create.js
+++ b/bin/config-create.js
@ -1,9 +1,13 @@
-/* eslint-disable */
-const path = require('path')
-const fs = require('fs')
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'

-const filePathTemplate = path.resolve(__dirname + '/../src/config/app.template.root.js')
-const filePathConfig = path.resolve(__dirname + '/../src/config/app.js')
+// In ES modules, __dirname is not available, so we create it from import.meta.url
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const filePathTemplate = path.resolve(path.join(__dirname, '..', 'src', 'config', 'app.template.root.js'))
+const filePathConfig = path.resolve(path.join(__dirname, '..', 'src', 'config', 'app.js'))
 const template = fs.readFileSync(filePathTemplate, 'utf8')
 const rendered = template.split('{{host}}').join(process.argv[2])
 fs.writeFileSync(filePathConfig, rendered)
--- a/src/index.template.html
+++ b/src/index.template.html
@ -19,7 +19,6 @@
    <link rel="icon" type="image/ico" href="favicon.ico">
  </head>
  <body>
-    <!-- DO NOT touch the following DIV -->
-    <div id="q-app"></div>
+    <!-- quasar:entry-point -->
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -33,11 +33,11 @@
    "async": "^3.2.2",
    "axios": "1.11.0",
    "content-disposition": "^0.5.4",
-    "core-js": "^3.6.5",
+    "core-js": "^3.45.1",
    "crypto-browserify": "3.12.1",
    "decode-uri-component": "^0.4.0",
    "eslint-plugin-no-relative-import-paths": "1.6.1",
-    "eslint-plugin-unused-imports": "4.1.4",
+    "eslint-plugin-unused-imports": "4.2.0",
    "file-saver": "^2.0.2",
    "jest-junit": "^16.0.0",
    "jssip": "3.10.1",
@ -45,14 +45,14 @@
    "loader-utils": "^3.2.1",
    "lodash": "4.17.21",
    "moment": "^2.29.4",
-    "npm": "^11.5.1",
+    "npm": "^11.5.2",
    "path": "0.12.7",
    "qrcode": "1.5.4",
    "quasar": "2.18.2",
    "stream-browserify": "^3.0.0",
    "terser": "^5.14.2",
    "tiny-emitter": "2.1.0",
-    "vue": "3.5.18",
+    "vue": "3.5.20",
    "vue-eslint-parser": "10.2.0",
    "vue-i18n": "11.1.11",
    "vue-resource": "^1.5.1",
@ -65,16 +65,17 @@
  "devDependencies": {
    "@babel/eslint-parser": "^7.25.7",
    "@babel/plugin-transform-private-methods": "7.27.1",
-    "@quasar/app-webpack": "3.15.1",
+    "@quasar/app-webpack": "4.3.0",
    "@quasar/cli": "2.5.0",
    "@quasar/quasar-app-extension-testing": "2.2.0",
    "@quasar/quasar-app-extension-testing-unit-jest": "3.0.3",
    "@stylistic/eslint-plugin-js": "4.4.1",
    "@vue/test-utils": "2.4.6",
+    "autoprefixer": "10.4.21",
    "commander": "14.0.0",
    "decomment": "0.9.5",
    "dot-object": "2.1.5",
-    "eslint": "9.32.0",
+    "eslint": "9.34.0",
    "eslint-config-standard": "17.1.0",
    "eslint-plugin-import": "2.32.0",
    "eslint-plugin-jest": "29.0.1",
@ -82,8 +83,8 @@
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-promise": "7.2.1",
    "eslint-plugin-quasar": "1.1.0",
-    "eslint-plugin-vue": "10.3.0",
-    "eslint-webpack-plugin": "4.2.0",
+    "eslint-plugin-vue": "10.4.0",
+    "eslint-webpack-plugin": "5.0.2",
    "glob": "11.0.3",
    "globals": "16.3.0",
    "is-valid-glob": "1.0.0",
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -0,0 +1,8 @@
+import autoprefixer from 'autoprefixer'
+
+export default {
+    plugins: [
+        // to edit target browsers: use "browserslist" field in package.json
+        autoprefixer
+    ]
+}
--- a/quasar.config.dev.proxy.js
+++ b/quasar.config.dev.proxy.js
@ -2,5 +2,5 @@ module.exports = {
    public: '',
    publicPath: '/v2/',
    proxyAPI2localhost: true,
-    proxyAPIFromURL: 'https://{{sipwiseVoipPlatformIPorFDQN}}'
+    proxyAPIFromURL: 'https://{{sipwiseVoipPlatformIPorFDQN}}:1443'
 }
--- a/quasar.config.js
+++ b/quasar.config.js
@ -5,17 +5,21 @@
 */

 // Configuration for your app
-// https://quasar.dev/quasar-cli/quasar-conf-js
+// https://quasar.dev/quasar-cli-webpack/quasar-config-file

-const ESLintPlugin = require('eslint-webpack-plugin')
-const webpack = require('webpack')
+import ESLintPlugin from 'eslint-webpack-plugin'
+import webpack from 'webpack'

-module.exports = function (ctx) {
+export default async function (ctx) {
    let devServerConfig = {}
    try {
-        devServerConfig = (ctx.dev) ? require('./quasar.conf.dev') : {}
+        if (ctx.dev) {
+            // Use dynamic import for the dev config
+            const devConfig = await import('./quasar.config.dev.proxy')
+            devServerConfig = devConfig
+        }
    } catch (e) {
-        if (e.code === 'MODULE_NOT_FOUND') {
+        if (e.code === 'MODULE_NOT_FOUND' || e.code === 'ERR_MODULE_NOT_FOUND') {
            devServerConfig = {}
        } else {
            throw e
@ -30,6 +34,7 @@ module.exports = function (ctx) {
        // --> boot files are part of "main.js"
        // https://quasar.dev/quasar-cli/boot-files
        boot: [
+            'store',
            'appConfig',
            'i18n',
            'api',
@ -105,7 +110,11 @@ module.exports = function (ctx) {
                ...process.env
            },
            vueRouterMode: 'hash', // available values: 'hash', 'history'
-
+            // It affects how URLs for bundled assets are generated in the final build.
+            // This determines the base path where the bundled JavaScript, CSS, and other assets will be served from.
+            publicPath: process.env.NODE_ENV === 'production'
+                ? '/'
+                : (devServerConfig.publicPath || '/v2/'),
            // transpile: false,

            // Add dependencies for transpiling with Babel (Array of string/regex)
@ -152,8 +161,9 @@ module.exports = function (ctx) {
        devServer: {
            https: false,
            port: 8080,
-            open: true, // opens browser window automatically,
+            open: true,
            devMiddleware: {
+                // It determines the URL path where the webpack-dev-server will serve the development version of the application.
                publicPath: devServerConfig.publicPath,
                ...(!devServerConfig.proxyAPI2localhost
                    ? {}
@ -166,19 +176,24 @@ module.exports = function (ctx) {
                ? {}
                : {
                    https: true,
-                    proxy: {
-                        [`!${devServerConfig.publicPath || '/v2/'}`]: {
+                    proxy: [
+                        {
+                            context: [`!${devServerConfig.publicPath || '/v2/'}`],
                            target: devServerConfig.proxyAPIFromURL,
                            secure: false
                        }
-                    },
-                    onBeforeSetupMiddleware: (devServer) => {
+                    ],
+                    setupMiddlewares: (middlewares, devServer) => {
+                        // Create a constant path value to prevent reactivity issues
+                        const basePath = devServerConfig.publicPath || '/v2/'
+
+                        // Use once-only redirect handler
                        devServer.app.get('/', (req, res) => {
-                            res.redirect(301, devServerConfig.publicPath || '/v2/')
+                            res.redirect(301, basePath)
                        })
+                        return middlewares
                    }
-                }
-            )
+                })
        },

        // animations: 'all', // --- includes all animations
--- a/src/boot/appConfig.js
+++ b/src/boot/appConfig.js
@ -1,6 +1,7 @@
+import { store } from 'src/boot/store'
 import appConfig from 'src/config/app'

-export default async ({ app, store }) => {
+export default async ({ app }) => {
    app.config.globalProperties.$appConfig = appConfig
    store.$appConfig = appConfig
 }
--- a/src/boot/branding.js
+++ b/src/boot/branding.js
@ -1,6 +1,7 @@
 import { getCssVar } from 'quasar'
+import { store } from 'src/boot/store'

-export default async ({ Vue, store, app }) => {
+export default async ({ Vue, app }) => {
    await store.dispatch('user/setDefaultBranding', {
        primaryColor: getCssVar('primary'),
        secondaryColor: getCssVar('secondary')
--- a/src/boot/event-bus.js
+++ b/src/boot/event-bus.js
@ -1,6 +1,6 @@
 import emitter from 'tiny-emitter/instance'

-export default async ({ app, store }) => {
+export default async ({ app }) => {
    app.config.globalProperties.emitter = {
        $on: (...args) => emitter.on(...args),
        $once: (...args) => emitter.once(...args),
--- a/src/boot/i18n.js
+++ b/src/boot/i18n.js
@ -1,3 +1,4 @@
+import { store } from 'src/boot/store'
 import messages, {
    getLangFromBrowserDefaults,
    setLanguage
@ -18,7 +19,7 @@ export const i18n = createI18n({
    messages: messageLoaded
 })

-export default async ({ app, store }) => {
+export default async ({ app }) => {
    app.use(i18n)
    app.i18n = i18n
    await setLanguage(currentLocale)
--- a/src/boot/ngcp-call.js
+++ b/src/boot/ngcp-call.js
@ -12,8 +12,9 @@ import {
    callUnMute,
    callUnMuteRemote
 } from 'src/api/ngcp-call'
+import { store } from 'src/boot/store'

-export default async ({ app, store }) => {
+export default async ({ app }) => {
    callConfigure({
        baseWebSocketUrl: `${app.config.globalProperties.$appConfig.baseWsUrl}/wss/sip`
    })
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@ -3,8 +3,9 @@ import {
    getJwt, getSubscriberId,
    hasJwt
 } from 'src/auth'
+import { store } from 'src/boot/store'

-export default ({ app, router, store }) => {
+export default ({ app, router }) => {
    router.beforeEach((to, from, next) => {
        const publicUrls = ['/login', '/recoverpassword', '/changepassword']
        // not authorized user
--- a/src/boot/store.js
+++ b/src/boot/store.js
@ -0,0 +1,12 @@
+import storeFactory from 'src/store'
+
+// Create store instance
+const _store = storeFactory()
+
+export default ({ app }) => {
+    // Register store with the app so components can access it
+    app.use(_store)
+    return { store: _store }
+}
+
+export { _store as store }
--- a/src/boot/user.js
+++ b/src/boot/user.js
@ -1,7 +1,8 @@
 import { loginByExchangeToken } from 'src/api/user'
 import { hasJwt, setJwt, setSubscriberId } from 'src/auth'
+import { store } from 'src/boot/store'

-export default async ({ store }) => {
+export default async () => {
    // Todo: Use "URL" shim to hide workaround
    const linkDomNode = document.createElement('a')
    linkDomNode.href = document.location.href
--- a/src/store/communication.js
+++ b/src/store/communication.js
@ -17,7 +17,7 @@ export default {
        },
        createFaxError (state) {
            return state.createFaxError ||
-                i18n.global.t('An error occured while trying to send the fax. Please try again')
+                i18n.global.t('An error occurred while trying to send the fax. Please try again')
        }
    },
    mutations: {
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,11 +1,11 @@
 import { date } from 'quasar'
+import CommunicationModule from 'src/communication'
 import { INTERNAL_DATE_FORMAT_DASH, INTERNAL_DATE_FORMAT_DASH_HOUR, INTERNAL_DATE_FORMAT_SLASH } from 'src/constants'
 import CallModule from 'src/store/call'
 import CallBlockingModule from 'src/store/call-blocking'
 import CallForwardingModule from 'src/store/call-forwarding'
 import CallRecordingsModule from 'src/store/call-recordings'
 import CallSettingsModule from 'src/store/call-settings'
-import CommunicationModule from 'src/store/communication'
 import ConversationsModule from 'src/store/conversations'
 import Customer from 'src/store/customer'
 import DashboardModule from 'src/store/dashboard'
--- a/yarn.lock
+++ b/yarn.lock