@quasar/app-webpack/lib/utils/banner.js

Quasar Framework App CLI with Webpack

const { green, gray, underline, dim } = require('kolorist')
const { join } = require('node:path')

const { cliPkg } = require('../utils/cli-runtime.js')
const { getIPs } = require('../utils/net.js')

function getPackager (argv, cmd) {
  if (argv.ide || (argv.mode === 'capacitor' && cmd === 'dev')) {
    return 'IDE (manual)'
  }

  if (argv.mode === 'cordova') {
    return 'cordova'
  }

  return argv.target === 'ios'
    ? 'xcodebuild'
    : 'gradle'
}

function getCompilationTarget (target) {
  return green(
    Array.isArray(target) === true
      ? green(target.join('|'))
      : target
  )
}

module.exports.displayBanner = async function displayBanner ({ argv, ctx, cmd, details }) {
  let banner = ''

  if (details?.buildOutputFolder) {
    banner += ` ${ underline('Build succeeded') }\n`
  }

  banner += `
 ${ cmd === 'dev' ? 'Dev mode..................' : 'Build mode................' } ${ green(argv.mode) }
 Pkg quasar................ ${ green('v' + ctx.pkg.quasarPkg.version) }
 Pkg @quasar/app-webpack... ${ green('v' + cliPkg.version) }
 Pkg webpack............... ${ green('v' + ctx.pkg.webpackPkg.version) }
 Debugging................. ${ cmd === 'dev' || argv.debug ? green('enabled') : gray('no') }`

  if (cmd === 'build') {
    banner += `\n Publishing................ ${ argv.publish !== void 0 ? green('yes') : gray('no') }`
  }

  if ([ 'cordova', 'capacitor' ].includes(argv.mode)) {
    const packaging = argv[ 'skip-pkg' ]
      ? gray('skip')
      : green(getPackager(argv, cmd))

    banner += cmd === 'build'
      ? `\n Packaging mode............ ${ packaging }`
      : `\n Running mode.............. ${ packaging }`
  }

  if (details?.webpackTranspileBanner) {
    banner += `\n Webpack transpiled JS..... ${ details.webpackTranspileBanner }`
  }

  if (details?.esbuildTarget) {
    if ([ 'bex', 'pwa' ].includes(argv.mode) || (argv.mode === 'ssr' && ctx.mode.pwa)) {
      banner += `\n Esbuild browser target.... ${ getCompilationTarget(details.esbuildTarget.browser) }`
    }

    if ([ 'electron', 'ssr' ].includes(argv.mode)) {
      banner += `\n Esbuild Node target....... ${ getCompilationTarget(details.esbuildTarget.node) }`
    }
  }

  if (details?.buildOutputFolder) {
    if (argv[ 'skip-pkg' ] !== true) {
      banner += `
 ==========================
 Output folder............. ${ green(details.buildOutputFolder) }`
    }

    if (argv.mode === 'ssr') {
      const packager = await ctx.cacheProxy.getModule('nodePackager')
      banner += `

 Tip: The dependencies must be installed before running the app. You can do
      this by running "$ ${ packager.name } install" inside the output folder.
      If you are running the app from your project folder where dependencies
      are already installed, then you can skip this step.

 Tip: Notice the package.json generated, where there's a script defined:
        "start": "node index.mjs"
      Running "$ ${ packager.name === 'npm' ? 'npm run' : packager.name } start" from the output folder will
      start the webserver. Alternatively you can call "$ node index.mjs"
      yourself.`
    }
    else if (argv.mode === 'cordova') {
      banner += `

 Tip: "src-cordova" is a Cordova project folder, so everything you know
      about Cordova applies to it. Quasar CLI only generates UI the content
      for "src-cordova/www" folder and then Cordova takes over and builds
      the final packaged file.

 Tip: Feel free to use Cordova CLI ("cordova <params>") or change any files
      in "src-cordova", except for "www" folder which must be built by Quasar CLI.`
    }
    else if (argv.mode === 'capacitor') {
      const packager = await ctx.cacheProxy.getModule('nodePackager')
      banner += `

 Tip: "src-capacitor" is a Capacitor project folder, so everything you know
      about Capacitor applies to it. Quasar CLI generates the UI content
      for "src-capacitor/www" folder and then either opens the IDE or calls
      the platform's build commands to generate the final packaged file.

 Tip: Feel free to use Capacitor CLI ("${ packager.name === 'npm' ? 'npx' : packager.name } capacitor <params>") or change
      any files in "src-capacitor", except for the "www" folder which must
      be built by Quasar CLI.`
    }
    else if ([ 'spa', 'pwa' ].includes(argv.mode)) {
      banner += `

 Tip: Built files are meant to be served over an HTTP server
      Opening index.html over file:// won't work

 Tip: You can use "$ quasar serve" command to create a web server,
      both for testing or production. Type "$ quasar serve -h" for
      parameters. Also, an npm script (usually named "start") can
      be added for deployment environments.
      If you're using Vue Router "history" mode, don't forget to
      specify the "--history" parameter: "$ quasar serve --history"`
    }
  }

  console.log(banner + '\n')
}

const greenBanner = green('»')
const line = dim('   ———————————————————————')
const cache = {}

function getIPList () {
  // expensive operation, so cache the response
  if (cache.ipList === void 0) {
    cache.ipList = getIPs().map(ip => (ip === '127.0.0.1' ? 'localhost' : ip))
  }

  return cache.ipList
}

function capitalize (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}

module.exports.printDevRunningBanner = function printDevRunningBanner (quasarConf) {
  const { ctx } = quasarConf

  const banner = [
    ` ${ greenBanner } Reported at............... ${ dim(new Date().toLocaleDateString()) } ${ dim(new Date().toLocaleTimeString()) }`,
    ` ${ greenBanner } App dir................... ${ green(ctx.appPaths.appDir) }`
  ]

  if (ctx.mode.bex !== true) {
    const urlList = quasarConf.devServer.host === '0.0.0.0'
      ? getIPList().map(ip => green(quasarConf.metaConf.getUrl(ip))).join('\n                              ')
      : green(quasarConf.metaConf.APP_URL)

    banner.push(` ${ greenBanner } App URL................... ${ urlList }`)
  }

  banner.push(
    ` ${ greenBanner } Dev mode.................. ${ green(ctx.modeName + (ctx.mode.ssr && ctx.mode.pwa ? ' + pwa' : '')) }`,
    ` ${ greenBanner } Pkg quasar................ ${ green('v' + ctx.pkg.quasarPkg.version) }`,
    ` ${ greenBanner } Pkg @quasar/app-webpack... ${ green('v' + cliPkg.version) }`,
    ` ${ greenBanner } Webpack transpiled JS..... ${ quasarConf.metaConf.webpackTranspileBanner }`
  )

  if ([ 'bex', 'pwa' ].includes(ctx.modeName) || (ctx.mode.ssr && ctx.mode.pwa)) {
    banner.push(
      ` ${ greenBanner } Esbuild browser target.... ${ getCompilationTarget(quasarConf.build.esbuildTarget.browser) }`
    )
  }

  if ([ 'electron', 'ssr' ].includes(ctx.modeName) === true) {
    banner.push(
      ` ${ greenBanner } Esbuild Node target....... ${ getCompilationTarget(quasarConf.build.esbuildTarget.node) }`
    )
  }

  if (ctx.mode.bex === true) {
    const folder = ctx.targetName === 'chrome'
      ? quasarConf.build.distDir
      : join(quasarConf.build.distDir, 'manifest.json')

    banner.push(
      line,
      ` ${ greenBanner } Load the dev extension in ${ capitalize(ctx.targetName) } from:`,
      `   ${ green(folder) }`
    )
  }

  console.log()
  console.log(banner.join('\n'))
  console.log()
}