upgrade to quasar/vite v2 and pixi.js v8

legubiao · Nov 5, 2024 · 6d513c6 · 6d513c6
1 parent 1ee0c64
commit 6d513c6
Show file tree

Hide file tree

Showing 12 changed files with 2,068 additions and 1,540 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -3,5 +3,5 @@
 /src-cordova
 /.quasar
 /node_modules
-.eslintrc.js
+.eslintrc.cjs
 /quasar.config.*.temporary.compiled*
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -11,7 +11,6 @@ module.exports = {
   env: {
     node: true,
     browser: true,
-    'vue/setup-compiler-macros': true
   },
 
   // Rules order is important, please avoid shuffling them

diff --git a/package.json b/package.json
@@ -1,9 +1,10 @@
 {
   "name": "ros2d-quasar",
   "version": "0.0.1",
-  "description": "A Quasar Project for ROS/ROS2",
+  "description": " A Quasar frontend for ROS/ROS2",
   "productName": "ROS2D Quasar",
-  "author": "biao876990970@hotmail.com",
+  "author": "Zhenbiao Huang <biao876990970@hotmail.com>",
+  "type": "module",
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.vue ./",
@@ -12,32 +13,34 @@
     "build": "quasar build"
   },
   "dependencies": {
-    "@quasar/extras": "^1.16.11",
+    "@pixi/utils": "^7.4.2",
+    "@quasar/extras": "^1.16.4",
     "axios": "^1.2.1",
-    "nipplejs": "^0.10.1",
+    "nipplejs": "^0.10.2",
     "pinia": "^2.0.11",
     "pinia-plugin-persist": "^1.0.0",
-    "pixi.js": "^7.4.0",
-    "quasar": "^2.8.0",
-    "uuid": "^9.0.1",
-    "vue": "3",
-    "vue-i18n": "^9.9.0",
-    "vue-router": "^4.0.12"
+    "pixi.js": "^8.5.2",
+    "quasar": "^2.16.0",
+    "uuid": "^11.0.2",
+    "vue": "^3.4.18",
+    "vue-i18n": "^9.0.0",
+    "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
-    "@quasar/app-vite": "^1.4.3",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@quasar/app-vite": "^2.0.0-beta.12",
     "autoprefixer": "^10.4.2",
-    "eslint": "^8.11.0",
+    "eslint": "^8.57.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-vue": "^9.0.0",
-    "postcss": "^8.4.14"
+    "postcss": "^8.4.14",
+    "vite-plugin-checker": "^0.8.0"
   },
   "engines": {
-    "node": "^20 || ^18 || ^16",
+    "node": "^24 || ^22 || ^20 || ^18",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }

diff --git a/postcss.config.cjs → postcss.config.js b/postcss.config.cjs → postcss.config.js
@@ -1,10 +1,13 @@
 /* eslint-disable */
 // https://github.com/michael-ciniawsky/postcss-load-config
 
-module.exports = {
+import autoprefixer from 'autoprefixer'
+// import rtlcss from 'postcss-rtlcss'
+
+export default {
   plugins: [
     // https://github.com/postcss/autoprefixer
-    require('autoprefixer')({
+    autoprefixer({
       overrideBrowserslist: [
         'last 4 Chrome versions',
         'last 4 Firefox versions',
@@ -15,13 +18,13 @@ module.exports = {
         'last 4 FirefoxAndroid versions',
         'last 4 iOS versions'
       ]
-    })
+    }),
 
     // https://github.com/elchininet/postcss-rtlcss
     // If you want to support RTL css, then
-    // 1. yarn/npm install postcss-rtlcss
+    // 1. yarn/pnpm/bun/npm install postcss-rtlcss
     // 2. optionally set quasar.config.js > framework > lang to an RTL language
-    // 3. uncomment the following line:
-    // require('postcss-rtlcss')
+    // 3. uncomment the following line (and its import statement above):
+    // rtlcss()
   ]
 }
diff --git a/quasar.config.js b/quasar.config.js
@@ -1,27 +1,13 @@
 /* eslint-env node */
 
-/*
- * This file runs in a Node context (it's NOT transpiled by Babel), so use only
- * the ES6 features that are supported by your Node version. https://node.green/
- */
-
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
-const { configure } = require('quasar/wrappers')
-const path = require('path')
+import { configure } from 'quasar/wrappers'
+import { fileURLToPath } from 'node:url'
 
-module.exports = configure(function (/* ctx */) {
+export default configure((ctx) => {
   return {
-    eslint: {
-      // fix: true,
-      // include: [],
-      // exclude: [],
-      // rawOptions: {},
-      warnings: true,
-      errors: true
-    },
-
     // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
     // preFetch: true,
 
@@ -41,7 +27,7 @@ module.exports = configure(function (/* ctx */) {
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
       // 'ionicons-v4',
-      // 'mdi-v5',
+      // 'mdi-v7',
       // 'fontawesome-v6',
       // 'eva-icons',
       // 'themify',
@@ -55,7 +41,7 @@ module.exports = configure(function (/* ctx */) {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
     build: {
       target: {
-        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
+        browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],
         node: 'node20'
       },
 
@@ -79,17 +65,24 @@ module.exports = configure(function (/* ctx */) {
       // viteVuePluginOptions: {},
 
       vitePlugins: [
-        ['@intlify/vite-plugin-vue-i18n', {
+        ['@intlify/unplugin-vue-i18n/vite', {
           // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
           // compositionOnly: false,
 
           // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
           // you need to set `runtimeOnly: false`
           // runtimeOnly: false,
 
+          ssr: ctx.modeName === 'ssr',
+
           // you need to set i18n resource including paths !
-          include: path.resolve(__dirname, './src/i18n/**')
-        }]
+          include: [fileURLToPath(new URL('./src/i18n', import.meta.url))]
+        }],
+        ['vite-plugin-checker', {
+          eslint: {
+            lintCommand: 'eslint "./**/*.{js,mjs,cjs,vue}"'
+          }
+        }, { server: false }]
       ]
     },
 
@@ -101,11 +94,7 @@ module.exports = configure(function (/* ctx */) {
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
-      config: {
-        notify: {
-          timeout: 750
-        }
-      },
+      config: {},
 
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
@@ -121,55 +110,60 @@ module.exports = configure(function (/* ctx */) {
       plugins: ['Notify', 'Dialog', 'AppFullscreen', 'Loading']
     },
 
-    // animations: 'all', // --- includes all animations
+    animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
-    animations: 'all',
+    // animations: [],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles
     // sourceFiles: {
     //   rootComponent: 'src/App.vue',
     //   router: 'src/router/index',
     //   store: 'src/store/index',
-    //   registerServiceWorker: 'src-pwa/register-service-worker',
-    //   serviceWorker: 'src-pwa/custom-service-worker',
+    //   pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
+    //   pwaServiceWorker: 'src-pwa/custom-service-worker',
     //   pwaManifestFile: 'src-pwa/manifest.json',
     //   electronMain: 'src-electron/electron-main',
     //   electronPreload: 'src-electron/electron-preload'
+    //   bexManifestFile: 'src-bex/manifest.json
     // },
 
     // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
     ssr: {
-      // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
-      // will mess up SSR
+      prodPort: 3000, // The default port that the production server should use
+      // (gets superseded if process.env.PORT is specified at runtime)
 
-      // extendSSRWebserverConf (esbuildConf) {},
-      // extendPackageJson (json) {},
+      middlewares: [
+        'render' // keep this as last one
+      ],
 
-      pwa: false,
+      // extendPackageJson (json) {},
+      // extendSSRWebserverConf (esbuildConf) {},
 
+      // manualStoreSerialization: true,
+      // manualStoreSsrContextInjection: true,
       // manualStoreHydration: true,
       // manualPostHydrationTrigger: true,
 
-      prodPort: 3000, // The default port that the production server should use
-      // (gets superseded if process.env.PORT is specified at runtime)
+      pwa: false
 
-      middlewares: [
-        'render' // keep this as last one
-      ]
+      // pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name!
+      // will mess up SSR
+
+      // pwaExtendGenerateSWOptions (cfg) {},
+      // pwaExtendInjectManifestOptions (cfg) {}
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
     pwa: {
-      workboxMode: 'generateSW', // or 'injectManifest'
-      injectPwaMetaTags: true,
-      swFilename: 'sw.js',
-      manifestFilename: 'manifest.json',
-      useCredentialsForManifestTag: false
-      // useFilenameHashes: true,
-      // extendGenerateSWOptions (cfg) {}
-      // extendInjectManifestOptions (cfg) {},
-      // extendManifestJson (json) {}
-      // extendPWACustomSWConf (esbuildConf) {}
+      workboxMode: 'GenerateSW' // 'GenerateSW' or 'InjectManifest'
+      // swFilename: 'sw.js',
+      // manifestFilename: 'manifest.json'
+      // extendManifestJson (json) {},
+      // useCredentialsForManifestTag: true,
+      // injectPwaMetaTags: false,
+      // extendPWACustomSWConf (esbuildConf) {},
+      // extendGenerateSWOptions (cfg) {},
+      // extendInjectManifestOptions (cfg) {}
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
@@ -184,8 +178,13 @@ module.exports = configure(function (/* ctx */) {
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
     electron: {
-      // extendElectronMainConf (esbuildConf)
-      // extendElectronPreloadConf (esbuildConf)
+      // extendElectronMainConf (esbuildConf) {},
+      // extendElectronPreloadConf (esbuildConf) {},
+
+      // extendPackageJson (json) {},
+
+      // Electron preload scripts (if any) from /src-electron, WITHOUT file extension
+      preloadScripts: ['electron-preload'],
 
       // specify the debugging port to use for the Electron app when running in development mode
       inspectPort: 5858,
@@ -214,12 +213,12 @@ module.exports = configure(function (/* ctx */) {
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
     bex: {
+      // extendBexScriptsConf (esbuildConf) {},
+      // extendBexManifestJson (json) {},
+
       contentScripts: [
         'my-content-script'
       ]
-
-      // extendBexScriptsConf (esbuildConf) {}
-      // extendBexManifestJson (json) {}
     }
   }
 })
diff --git a/src/App.vue b/src/App.vue
@@ -2,35 +2,34 @@
   <router-view />
 </template>
 
-<script>
-import { defineComponent, onBeforeMount } from 'vue'
+<script setup>
+import { onBeforeMount } from 'vue'
+import { useControlParams } from 'stores/control-params.js'
 import { useI18n } from 'vue-i18n'
-import { useControlParams } from 'stores/control-params'
 
-export default defineComponent({
-  name: 'App',
-  setup () {
-    const { locale } = useI18n({ useScope: 'global' })
-    const params = useControlParams()
-    locale.value = params.locale
+defineOptions({
+  name: 'App'
+})
+
+const { locale } = useI18n({ useScope: 'global' })
+const params = useControlParams()
+locale.value = params.locale
 
-    onBeforeMount(() => {
-      if (params.ip === 'localhost') {
-        let pos = window.location.href.indexOf('://')
-        let deviceIP
-        if (pos >= 0) {
-          pos += 3
-          deviceIP = window.location.href.slice(pos)
-          deviceIP = deviceIP.split(':')[0]
-          deviceIP = deviceIP.split('/')[0]
-          params.ip = deviceIP
-        }
-      }
-    })
+onBeforeMount(() => {
+  if (params.ip === 'localhost') {
+    let pos = window.location.href.indexOf('://')
+    let deviceIP
+    if (pos >= 0) {
+      pos += 3
+      deviceIP = window.location.href.slice(pos)
+      deviceIP = deviceIP.split(':')[0]
+      deviceIP = deviceIP.split('/')[0]
+      params.ip = deviceIP
+    }
   }
 })
-</script>
 
+</script>
 <style>
 #q-app {
   overflow: hidden;