Merge branch 'dev' into feat-auto-generate-base-tsconfig-and-types

.github/ISSUE_TEMPLATE/bug-report--quasar-v2.yml

@@ -42,8 +42,8 @@ body:
         Fork one of the following, hit save then copy-paste the URL here:
           - [Codepen](https://codepen.quasar.dev)
           - [jsFiddle](https://jsfiddle.quasar.dev)
-          - [StackBlitz - app-vite](https://stackblitz.com/fork/quasarframework)
-          - [StackBlitz - app-webpack](https://stackblitz.com/fork/quasarframework-webpack)
+          - [StackBlitz - app-vite](https://stackblitz-vite.quasar.dev)
+          - [StackBlitz - app-webpack](https://stackblitz-webpack.quasar.dev)
           - [Codesandbox](https://codesandbox.quasar.dev)
         _You can provide a GitHub repo only as a last resort. Keep in mind that it will be prioritized less as it makes the reproduction process slower._
       placeholder: https://codepen.io/rstoenescu/pen/xxEvBLR - DO NOT use this example value or a random URL

.github/workflows/build-types.yml

@@ -79,6 +79,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: types-build
+          include-hidden-files: true # to include the .pr-number file
           path: |
             ui/dist/api
             ui/dist/types

app-vite/lib/app-extension/api-classes/IndexAPI.js

@@ -145,7 +145,7 @@ export class IndexAPI extends BaseAPI {
   }
 
   /**
-   * Extend Bex scripts (background/content/dom) Esbuild config
+   * Extend Bex scripts (background/content-script) Esbuild config
    *
    * @param {function} fn
    *   (cfg: Object, api) => undefined

app-vite/lib/cmd/build.js

@@ -7,7 +7,7 @@ import parseArgs from 'minimist'
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
     m: 'mode',
-    T: 'target',
+    T: 'target', // cordova/capacitor/bex mode only
     A: 'arch',
     b: 'bundler',
     s: 'skip-pkg',
@@ -84,6 +84,9 @@ if (argv.help) {
     --publish, -P  Publish options [onTag|onTagOrDraft|always|never]
                      - see https://www.electron.build/configuration/publish
 
+    Only for BEX mode:
+    --target, -T     (required) Browser family target [chrome|firefox]
+
   `)
   process.exit(0)
 }

app-vite/lib/cmd/dev.js

@@ -9,7 +9,7 @@ import { log } from '../utils/logger.js'
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
     m: 'mode',
-    T: 'target', // cordova/capacitor mode only
+    T: 'target', // cordova/capacitor/bex mode only
     e: 'emulator', // cordova-mode only
     p: 'port',
     H: 'hostname',
@@ -69,6 +69,9 @@ if (argv.help) {
 
     Only for Capacitor mode:
     --target, -T     (required) App target [android|ios]
+
+    Only for BEX mode:
+    --target, -T     (required) Browser family target [chrome|firefox]
   `)
   process.exit(0)
 }

app-vite/lib/cmd/inspect.js

@@ -53,7 +53,7 @@ const ctx = getCtx({
   mode: argv.mode,
   target: argv.mode === 'cordova' || argv.mode === 'capacitor'
     ? 'android'
-    : void 0,
+    : (argv.mode === 'bex' ? 'chrome' : void 0),
   debug: argv.debug,
   dev: argv.cmd === 'dev',
   prod: argv.cmd === 'build'

app-vite/lib/config-tools.js

@@ -121,6 +121,9 @@ export async function createViteConfig (quasarConf, { compileId }) {
     build.viteVuePluginOptions
   )
 
+  /**
+   * @type {import('vite').UserConfig}
+   */
   const viteConf = {
     configFile: false,
     root: appPaths.appDir,
@@ -142,6 +145,20 @@ export async function createViteConfig (quasarConf, { compileId }) {
       alias: build.alias
     },
 
+    css: {
+      preprocessorOptions: {
+        // Use sass-embedded for better stability and performance
+        sass: {
+          api: 'modern-compiler',
+          silenceDeprecations: [ 'import', 'global-builtin' ]
+        },
+        scss: {
+          api: 'modern-compiler',
+          silenceDeprecations: [ 'import', 'global-builtin' ]
+        }
+      }
+    },
+
     build: {
       target: compileId === 'vite-ssr-server'
         ? build.target.node

app-vite/lib/entry-files-generator.js

@@ -24,10 +24,8 @@ export class EntryFilesGenerator {
     }
     else if (ctx.mode.bex) {
       regularFiles.push(
-        'bex-bridge.js',
-        'bex-entry-background.js',
-        'bex-entry-dom.js',
-        'bex-window-event-listener.js'
+        'bex-app.js',
+        'bex-bridge.js'
       )
     }
 

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

@@ -5,31 +5,34 @@ import archiver from 'archiver'
 import { AppBuilder } from '../../app-builder.js'
 import { progress } from '../../utils/logger.js'
 import { quasarBexConfig } from './bex-config.js'
-import { createManifest, copyBexAssets } from './utils.js'
+import { createManifest, copyBexAssets } from './bex-utils.js'
 
 export class QuasarModeBuilder extends AppBuilder {
   async build () {
     const viteConfig = await quasarBexConfig.vite(this.quasarConf)
     await this.buildWithVite('BEX UI', viteConfig)
 
-    const { err } = createManifest(this.quasarConf)
-    if (err !== void 0) { process.exit(1) }
+    const { err, bexBackgroundScript, bexContentScriptList, bexOtherScriptList } = createManifest(this.quasarConf)
+    if (err !== void 0) process.exit(1)
 
-    const backgroundConfig = await quasarBexConfig.backgroundScript(this.quasarConf)
-    await this.buildWithEsbuild('Background Script', backgroundConfig)
+    if (bexBackgroundScript !== null) {
+      const bgConfig = await quasarBexConfig.backgroundScript(this.quasarConf, bexBackgroundScript)
+      await this.buildWithEsbuild(`Background Script (${ bexBackgroundScript.name })`, bgConfig)
+    }
 
-    for (const name of this.quasarConf.bex.contentScripts) {
-      const contentConfig = await quasarBexConfig.contentScript(this.quasarConf, name)
-      await this.buildWithEsbuild('Content Script', contentConfig)
+    for (const entry of bexContentScriptList) {
+      const contentConfig = await quasarBexConfig.contentScript(this.quasarConf, entry)
+      await this.buildWithEsbuild(`Content Script (${ entry.name })`, contentConfig)
     }
 
-    const domConfig = await quasarBexConfig.domScript(this.quasarConf)
-    await this.buildWithEsbuild('Dom Script', domConfig)
+    for (const entry of bexOtherScriptList) {
+      const contentConfig = await quasarBexConfig.otherScript(this.quasarConf, entry)
+      await this.buildWithEsbuild(`Other Script (${ entry.name })`, contentConfig)
+    }
 
     copyBexAssets(this.quasarConf)
 
     this.printSummary(this.quasarConf.build.distDir)
-
     this.#bundlePackage(this.quasarConf.build.distDir)
   }
 

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

@@ -1,5 +1,6 @@
-import { join } from 'node:path'
+import { join, sep } from 'node:path'
 import { readFileSync, writeFileSync } from 'node:fs'
+import compileTemplate from 'lodash/template.js'
 
 import {
   createViteConfig, extendViteConfig,
@@ -8,20 +9,53 @@ import {
 
 import { resolveToCliDir } from '../../utils/cli-runtime.js'
 
-const contentScriptTemplate = readFileSync(
-  resolveToCliDir('templates/bex/entry-content-script.js'),
-  'utf-8'
-)
+const jsExtRE = /\.js$/
+const templateInterpolateRE = /<%=([\s\S]+?)%>/g
+
+const scriptTemplates = {
+  background: compileTemplate(
+    readFileSync(
+      resolveToCliDir('templates/entry/bex-background.js'),
+      'utf-8'
+    ),
+    { interpolate: templateInterpolateRE }
+  ),
+
+  'content-script': compileTemplate(
+    readFileSync(
+      resolveToCliDir('templates/entry/bex-content-script.js'),
+      'utf-8'
+    ),
+    { interpolate: templateInterpolateRE }
+  )
+}
+
+function generateDefaultEntry (quasarConf) {
+  return {
+    name: 'file.js',
+    from: quasarConf.ctx.appPaths.resolve.bex('file.js'),
+    to: join(quasarConf.build.distDir, 'file.js')
+  }
+}
 
 // returns a Promise
-function createScript (quasarConf, scriptName, entry) {
-  const cfg = createBrowserEsbuildConfig(quasarConf, { compileId: `browser-bex-${ scriptName }` })
+function createScript ({ quasarConf, type, entry }) {
+  const filename = entry.name.replaceAll(sep, '_').replace(jsExtRE, '')
+  const entryPath = quasarConf.ctx.appPaths.resolve.entry(`bex-entry-${ type }-${ filename }.js`)
 
-  cfg.entryPoints = [
-    entry || quasarConf.ctx.appPaths.resolve.entry(`bex-entry-${ scriptName }.js`)
-  ]
+  const content = scriptTemplates[ type ]({
+    importName: entry.name.replaceAll('\\', '/').replace(jsExtRE, ''),
+    isDev: quasarConf.ctx.dev,
+    isChrome: quasarConf.ctx.target.chrome,
+    devServerPort: quasarConf.devServer.port
+  })
 
-  cfg.outfile = join(quasarConf.build.distDir, `${ scriptName }.js`)
+  writeFileSync(entryPath, content, 'utf-8')
+
+  const cfg = createBrowserEsbuildConfig(quasarConf, { compileId: `bex:${ type }:${ entry.name }` })
+
+  cfg.entryPoints = [ entryPath ]
+  cfg.outfile = join(quasarConf.build.distDir, entry.name)
 
   return extendEsbuildConfig(cfg, quasarConf.bex, quasarConf.ctx, 'extendBexScriptsConf')
 }
@@ -30,25 +64,29 @@ export const quasarBexConfig = {
   vite: async quasarConf => {
     const cfg = await createViteConfig(quasarConf, { compileId: 'vite-bex' })
 
-    cfg.build.outDir = join(quasarConf.build.distDir, 'www')
+    if (quasarConf.ctx.target.firefox) {
+      cfg.build.outDir = join(quasarConf.build.distDir, 'www')
+    }
 
     return extendViteConfig(cfg, quasarConf, { isClient: true })
   },
 
-  contentScript: (quasarConf, name) => {
-    const entry = quasarConf.ctx.appPaths.resolve.entry(`bex-entry-content-script-${ name }.js`)
-
-    writeFileSync(
-      entry,
-      contentScriptTemplate.replace('__NAME__', name),
-      'utf-8'
-    )
+  backgroundScript: (quasarConf, entry = generateDefaultEntry(quasarConf)) => {
+    return createScript({ quasarConf, type: 'background', entry })
+  },
 
-    return createScript(quasarConf, name, entry)
+  contentScript: (quasarConf, entry = generateDefaultEntry(quasarConf)) => {
+    return createScript({ quasarConf, type: 'content-script', entry })
   },
 
-  backgroundScript: quasarConf => createScript(quasarConf, 'background'),
-  domScript: quasarConf => createScript(quasarConf, 'dom')
+  otherScript: (quasarConf, entry = generateDefaultEntry(quasarConf)) => {
+    const cfg = createBrowserEsbuildConfig(quasarConf, { compileId: `bex:other-script:${ entry.name }` })
+
+    cfg.entryPoints = [ entry.from ]
+    cfg.outfile = entry.to
+
+    return extendEsbuildConfig(cfg, quasarConf.bex, quasarConf.ctx, 'extendBexScriptsConf')
+  }
 }
 
 export const modeConfig = quasarBexConfig