fix(app-vite): bex -> portName consistency on unix & windows

app-vite/lib/modes/bex/bex-config.js

@@ -9,8 +9,7 @@ import { getBuildSystemDefine } from '../../utils/env.js'
 
 function generateDefaultEntry (quasarConf) {
   return {
-    rawName: 'file',
-    name: 'file.js',
+    name: 'file', // or subdir/file (regardless of OS)
     from: quasarConf.ctx.appPaths.resolve.bex('file.js'),
     to: join(quasarConf.build.distDir, 'file.js')
   }
@@ -34,7 +33,7 @@ export const quasarBexConfig = {
       ...cfg.define,
       ...getBuildSystemDefine({
         buildEnv: {
-          __QUASAR_BEX_SCRIPT_NAME__: entry.rawName,
+          __QUASAR_BEX_SCRIPT_NAME__: entry.name,
           __QUASAR_BEX_SERVER_PORT__: quasarConf.devServer.port || 0
         }
       })

app-vite/lib/modes/bex/bex-utils.js

@@ -82,8 +82,7 @@ function getScriptSetEntry (quasarConf, filePath) {
   const scriptName = entry.substring(0, entry.length - extension.length - 1)
 
   return {
-    rawName: scriptName,
-    name: scriptName,
+    name: scriptName.replaceAll('\\', '/'),
     from: filePath,
     to: join(quasarConf.build.distDir, `${ scriptName }.js`)
   }

app-vite/templates/bex/default/my-content-script.js

@@ -9,6 +9,13 @@ import { createBridge } from '@quasar/app-vite/bex/content'
 
 // The use of the bridge is optional.
 const bridge = createBridge({ debug: false })
+/**
+ * bridge.portName is 'content@<path>-<number>'
+ *   where <path> is the relative path of this content script
+ *   filename (without extension) from /src-bex
+ *   (eg. 'my-content-script', 'subdir/my-script')
+ *   and <number> is a unique instance number (1-10000).
+ */
 
 // Hook into the bridge to listen for events sent from the other BEX parts.
 bridge.on('some.event', message => {
@@ -115,9 +122,6 @@ bridge.on('@quasar:ports', ({ portList, added, removed }) => {
   }
 })
 
-// Current bridge port name (can be 'content@<name>-<xxxxx>')
-console.log(bridge.portName)
-
 // Dynamically set debug mode
 bridge.setDebug(true) // boolean
 

app-vite/templates/bex/ts/my-content-script.ts

@@ -9,6 +9,13 @@ import { createBridge } from '@quasar/app-vite/bex/content';
 
 // The use of the bridge is optional.
 const bridge = createBridge({ name: 'my-content-script', debug: false });
+/**
+ * bridge.portName is 'content@<path>-<number>'
+ *   where <path> is the relative path of this content script
+ *   filename (without extension) from /src-bex
+ *   (eg. 'my-content-script', 'subdir/my-script')
+ *   and <number> is a unique instance number (1-10000).
+ */
 
 declare module '@quasar/app-vite' {
   interface BexEventMap {

docs/src/pages/quasar-cli-vite/upgrade-guide.md

@@ -847,6 +847,13 @@ import { createBridge } from '@quasar/app-vite/bex/content'
 
 // The use of the bridge is optional.
 const bridge = createBridge({ name: 'my-content-script', debug: false })
+/**
+ * bridge.portName is 'content@<path>-<number>'
+ *   where <path> is the relative path of this content script
+ *   filename (without extension) from /src-bex
+ *   (eg. 'my-content-script', 'subdir/my-script')
+ *   and <number> is a unique instance number (1-10000).
+ */
 
 // Attach initial bridge listeners...
 
@@ -885,6 +892,7 @@ import { useQuasar } from 'quasar'
 const $q = useQuasar()
 
 // Use $q.bex (the bridge)
+// $q.bex.portName is "app"
 </script>
 <<| html Composition API + script |>>
 <template>
@@ -898,6 +906,7 @@ export default {
   setup () {
     const $q = useQuasar()
     // Use $q.bex (the bridge)
+    // $q.bex.portName is "app"
   }
 }
 </script>
@@ -909,10 +918,13 @@ export default {
 <script>
 export default {
   // Use this.$q.bex (the bridge)
+  // this.$q.bex.portName is "app"
 }
 </script>
 ```
 
+Please note that the popup/page portName will be `app`.
+
 #### The new BEX bridge
 
 ```js Bex Bridge messaging