@quasar/app-webpack/lib/modes/bex/bex-devserver.js

Quasar Framework App CLI with Webpack

const { join } = require('node:path')
const fse = require('fs-extra')
const cloneDeep = require('lodash/cloneDeep.js')
const debounce = require('lodash/debounce.js')
const chokidar = require('chokidar')
const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')

const { AppDevserver } = require('../../app-devserver.js')
const { quasarBexConfig } = require('./bex-config.js')
const { createManifest, copyBexAssets } = require('./bex-utils.js')

const reloadPayload = JSON.stringify({ type: 'custom', event: 'qbex:hmr:reload' })

module.exports.QuasarModeDevserver = class QuasarModeDevserver extends AppDevserver {
  #webpackWatcherList = []
  #manifestWatcher = null
  #scriptWatcherList = []

  #webpackServer = null
  #scriptList = []

  #reloadExtension = () => {}

  constructor (opts) {
    super(opts)

    this.#reloadExtension = debounce(() => {
      this.#webpackServer?.webSocketServer.clients.forEach(client => {
        client.send(reloadPayload)
      })
    }, 200)

    this.registerDiff('distDir', quasarConf => [
      quasarConf.build.distDir
    ])

    this.registerDiff('bexManifest', quasarConf => [
      quasarConf.sourceFiles.bexManifestFile,
      quasarConf.bex.extendBexManifestJson,
      quasarConf.build.distDir
    ])

    this.registerDiff('bexScripts', (quasarConf, diffMap) => [
      quasarConf.build.distDir,
      quasarConf.devServer.port,

      quasarConf.bex.extraScripts,
      quasarConf.bex.extendBexScriptsConf,

      // extends 'esbuild' diff
      ...diffMap.esbuild(quasarConf)
    ])
  }

  run (quasarConf, __isRetry) {
    const { diff, queue } = super.run(quasarConf, __isRetry)

    if (diff('distDir', quasarConf)) {
      return queue(() => this.#onDistDir(quasarConf))
    }

    if (diff('bexManifest', quasarConf)) {
      return queue(() => this.#compileBexManifest(quasarConf, queue))
    }

    if (diff('bexScripts', quasarConf)) {
      return queue(() => this.#compileBexScripts(quasarConf))
    }

    if (diff('webpack', quasarConf)) {
      return queue(() => this.#runWebpack(quasarConf))
    }
  }

  async #onDistDir (quasarConf) {
    if (this.#manifestWatcher !== null) {
      this.#manifestWatcher.close()
      this.#manifestWatcher = null
    }

    await this.clearWatcherList(this.#webpackWatcherList, () => { this.#webpackWatcherList = [] })
    await this.clearWatcherList(this.#scriptWatcherList, () => { this.#scriptWatcherList = [] })

    this.cleanArtifacts(quasarConf.build.distDir)

    // ensure we have a stub www/index.html file otherwise the browser
    // will complain about it not being found
    const indexHtmlDir = join(quasarConf.build.distDir, 'www')
    fse.ensureDirSync(indexHtmlDir)
    fse.writeFileSync(join(indexHtmlDir, 'index.html'), '', 'utf-8')
  }

  async #compileBexManifest (quasarConf, queue) {
    if (this.#manifestWatcher !== null) {
      this.#manifestWatcher.close()
    }

    const { err, scriptList } = createManifest(quasarConf)
    if (err !== void 0) process.exit(1)

    const setScripts = jsList => {
      this.#scriptList = jsList
      return JSON.stringify(jsList)
    }

    let scriptSnapshot = setScripts(scriptList)
    const updateClient = () => {
      this.printBanner(quasarConf)
      this.#reloadExtension()
    }

    this.#manifestWatcher = chokidar.watch(quasarConf.metaConf.bexManifestFile, { ignoreInitial: true })
    this.#manifestWatcher.on('change', debounce(() => {
      const { err, scriptList } = createManifest(quasarConf)
      if (err !== void 0) return

      const newSnapshot = setScripts(scriptList)

      if (newSnapshot === scriptSnapshot) {
        updateClient()
        return
      }

      scriptSnapshot = newSnapshot
      queue(() => this.#compileBexScripts(quasarConf).then(updateClient))
    }, 500))
  }

  async #compileBexScripts (quasarConf) {
    await this.clearWatcherList(this.#scriptWatcherList, () => { this.#scriptWatcherList = [] })

    const onRebuild = () => {
      this.printBanner(quasarConf)
      this.#reloadExtension()
    }

    for (const entry of this.#scriptList) {
      const contentConfig = await quasarBexConfig.bexScript(quasarConf, entry)

      await this.watchWithEsbuild(`Bex Script (${ entry.name })`, contentConfig, onRebuild)
        .then(esbuildCtx => { this.#scriptWatcherList.push({ close: esbuildCtx.dispose }) })
    }
  }

  async #runWebpack (quasarConf, queue) {
    await this.clearWatcherList(this.#webpackWatcherList, () => { this.#webpackWatcherList = [] })

    const webpackConf = await quasarBexConfig.webpack(quasarConf)

    if (this.ctx.target.firefox) {
      await this.buildWithWebpack('BEX UI', webpackConf)

      this.#webpackWatcherList.push(
        this.#getAppSourceWatcher(quasarConf, webpackConf, queue),
        this.#getPublicDirWatcher(quasarConf)
      )
    }
    else {
      let started = false

      return new Promise(resolve => {
        const compiler = webpack(webpackConf)

        compiler.hooks.done.tap('done-compiling', stats => {
          if (started === true) return

          // start dev server if there are no errors
          if (stats.hasErrors() === true) return

          started = true
          resolve()

          this.printBanner(quasarConf)
        })

        // start building & launch server
        // deep clone to avoid webpack-dev-server mutating the original config which causes double compilation
        this.#webpackServer = new WebpackDevServer(cloneDeep(quasarConf.devServer), compiler)
        this.#webpackServer.start()

        this.#webpackWatcherList.push({
          close: () => {
            const server = this.#webpackServer
            this.#webpackServer = null
            return server.stop()
          }
        })
      })
    }

    this.#webpackWatcherList.push(
      this.#getBexAssetsDirWatcher(quasarConf)
    )
  }

  // chrome & firefox
  #getBexAssetsDirWatcher (quasarConf) {
    const folders = copyBexAssets(quasarConf)
    const watcher = chokidar.watch(folders, { ignoreInitial: true })

    const copy = debounce(() => {
      copyBexAssets(quasarConf)
      this.printBanner(quasarConf)

      if (this.ctx.target.chrome) {
        this.#reloadExtension()
      }
    }, 500)

    watcher.on('add', copy)
    watcher.on('change', copy)

    return watcher
  }

  // firefox only
  #getAppSourceWatcher (quasarConf, webpackConf, queue) {
    const watcher = chokidar.watch([
      this.ctx.appPaths.srcDir,
      this.ctx.appPaths.resolve.app(quasarConf.sourceFiles.indexHtmlTemplate)
    ], {
      ignoreInitial: true
    })

    const rebuild = debounce(() => {
      queue(() => {
        return this.buildWithWebpack('BEX UI', webpackConf)
          .then(() => { this.printBanner(quasarConf) })
      })
    }, 500)

    watcher.on('add', rebuild)
    watcher.on('change', rebuild)
    watcher.on('unlink', rebuild)

    return watcher
  }

  // firefox only
  #getPublicDirWatcher (quasarConf) {
    const watcher = chokidar.watch(this.ctx.appPaths.publicDir, { ignoreInitial: true })

    const copy = debounce(() => {
      fse.copySync(this.ctx.appPaths.publicDir, quasarConf.build.distDir)
      this.printBanner(quasarConf)
    }, 500)

    watcher.on('add', copy)
    watcher.on('change', copy)

    return watcher
  }
}