feat(app): one source of truth for browser support (package.json > br…

…owserslist); transpile by default (based on requested browser support); auto-detect if building for IE11

app/bin/quasar-build

@@ -18,7 +18,7 @@ const argv = parseArgs(process.argv.slice(2), {
     h: 'help',
     P: 'publish'
   },
-  boolean: ['h', 'd', 'u', 'i', 'legacy'],
+  boolean: ['h', 'd', 'u', 'i'],
   string: ['m', 'T', 'P'],
   default: {
     m: 'spa'
@@ -57,7 +57,6 @@ if (argv.help) {
                         [darwin|win32|linux|mas|all]
                       - Electron with "electron-builder" bundler (default: yours)
                         [darwin|mac|win32|win|linux|all]
-    --legacy        Support for older browsers, like IE11; JS is transpiled to ES5
     --publish, -P   Also trigger publishing hooks (if any are specified)
                       - Has special meaning when building with Electron mode and using
                         electron-builder as bundler
@@ -266,7 +265,7 @@ async function build () {
         ? path.join(outputFolder, '..')
         : outputFolder
 
-      banner(argv, 'build', { outputFolder, legacy: buildConfig.build.legacy })
+      banner(argv, 'build', { outputFolder, transpileBanner: buildConfig.__transpileBanner })
 
       if (typeof buildConfig.build.afterBuild === 'function') {
         await buildConfig.build.afterBuild({ quasarConf: buildConfig })

app/bin/quasar-dev

@@ -19,7 +19,7 @@ const argv = parseArgs(process.argv.slice(2), {
     h: 'help',
     d: 'devtools'
   },
-  boolean: ['h', 'i', 'd', 'legacy'],
+  boolean: ['h', 'i', 'd'],
   string: ['m', 'T', 'H'],
   default: {
     m: 'spa'
@@ -53,7 +53,6 @@ if (argv.help) {
     --mode, -m       App mode [spa|ssr|pwa|cordova|capacitor|electron|bex] (default: spa)
     --port, -p       A port number on which to start the application
     --hostname, -H   A hostname to use for serving the application
-    --legacy         Support for older browsers, like IE11; JS is transpiled to ES5
     --help, -h       Displays this message
 
     Only for Cordova mode:
@@ -199,7 +198,6 @@ async function goLive () {
   await extensionRunner.registerExtensions(ctx)
 
   const quasarConfig = new QuasarConfig(ctx, {
-    legacy: argv.legacy,
     port: argv.port,
     host: argv.hostname,
     onAddress: parseAddress,

app/bin/quasar-inspect

@@ -12,7 +12,7 @@ const argv = parseArgs(process.argv.slice(2), {
 
     h: 'help'
   },
-  boolean: ['h', 'legacy'],
+  boolean: ['h'],
   string: ['c', 'm', 'p'],
   default: {
     c: 'dev',
@@ -34,7 +34,6 @@ if (argv.help) {
   Options
     --cmd, -c        Quasar command [dev|build] (default: dev)
     --mode, -m       App mode [spa|ssr|pwa|bex|cordova|capacitor|electron] (default: spa)
-    --legacy         Support for older browsers, like IE11; JS is transpiled to ES5
     --depth, -d      Number of levels deep (default: 5)
     --path, -p       Path of config in dot notation
                         Examples:
@@ -96,7 +95,7 @@ async function inspect () {
   // register app extensions
   await extensionRunner.registerExtensions(ctx)
 
-  const quasarConfig = new QuasarConfig(ctx, { legacy: argv.legacy })
+  const quasarConfig = new QuasarConfig(ctx)
 
   try {
     await quasarConfig.prepare()

app/lib/helpers/banner.js

@@ -44,7 +44,7 @@ module.exports = function (argv, cmd, details) {
   }
 
   if (details) {
-    banner += `\n Modern build...... ${details.legacy === true ? 'no (legacy ES5)' : green('yes (ES6+)') }`
+    banner += `\n Transpiled JS..... ${details.transpileBanner}`
     if (argv['skip-pkg'] !== true) {
       banner += `
  ==================
@@ -104,12 +104,12 @@ module.exports = function (argv, cmd, details) {
   console.log(banner + '\n')
 }
 
-module.exports.devCompilationSuccess = function (ctx, url, appDir, legacy) {
+module.exports.devCompilationSuccess = function (ctx, url, appDir, transpileBanner) {
   return `App dir........... ${green(appDir)}
     App URL........... ${green(url)}
     Dev mode.......... ${green(ctx.modeName + (ctx.mode.ssr && ctx.mode.pwa ? ' + pwa' : ''))}
     Pkg quasar........ ${green('v' + quasarVersion)}
     Pkg @quasar/app... ${green('v' + cliAppVersion)}
-    Modern build...... ${legacy === true ? 'no (legacy ES5)' : green('yes (ES6+)') }
+    Transpiled JS..... ${transpileBanner}
   `
 }

app/lib/helpers/browsers-support.js

@@ -0,0 +1,28 @@
+const browserslist = require('browserslist')
+const appPaths = require('../app-paths')
+
+function getBrowsersList () {
+  return browserslist(void 0, { path: appPaths.appDir })
+}
+
+function supportsIE () {
+  const browsers = getBrowsersList()
+  return browsers.includes('ie 11')
+}
+
+function needsAdditionalPolyfills (ctx) {
+  if (
+    ctx.mode.electron ||
+    ctx.mode.cordova ||
+    ctx.mode.capacitor ||
+    ctx.mode.capacitor
+  ) {
+    return false
+  }
+
+  return supportsIE()
+}
+
+module.exports.getBrowsersList = getBrowsersList
+module.exports.supportsIE = supportsIE
+module.exports.needsAdditionalPolyfills = needsAdditionalPolyfills

app/lib/quasar-config.js

@@ -3,12 +3,12 @@ const fs = require('fs')
 const merge = require('webpack-merge')
 const chokidar = require('chokidar')
 const debounce = require('lodash.debounce')
-const { underline } = require('chalk')
+const { underline, green } = require('chalk')
 
 const appPaths = require('./app-paths')
 const { log, warn, fatal } = require('./helpers/logger')
 const extensionRunner = require('./app-extension/extensions-runner')
-const useAdditionalPolyfills = require('./helpers/use-additional-polyfills')
+const { needsAdditionalPolyfills } = require('./helpers/browsers-support')
 const cssVariables = require('./helpers/css-variables')
 const getDevlandFile = require('./helpers/get-devland-file')
 
@@ -326,7 +326,6 @@ class QuasarConfig {
     cfg.__rootDefines = {}
     cfg.__needsAppMountHook = false
     cfg.__vueDevtools = false
-    cfg.__needsAdditionalPolyfills = useAdditionalPolyfills(cfg.build.legacy, this.ctx)
     cfg.supportTS = cfg.supportTS || false
 
     if (cfg.vendor.disable !== true) {
@@ -371,7 +370,6 @@ class QuasarConfig {
     cfg.framework.plugins = getUniqueArray(cfg.framework.plugins)
 
     cfg.build = merge({
-      legacy: false,
       transformAssetUrls: Object.assign({
         video: ['src', 'poster'],
         source: 'src',
@@ -394,6 +392,7 @@ class QuasarConfig {
       vueRouterMode: 'hash',
       preloadChunks: false,
       forceDevPublicPath: false,
+      transpile: true,
       // transpileDependencies: [], // leaving here for completeness
       devtool: this.ctx.dev
         ? '#cheap-module-eval-source-map'
@@ -437,18 +436,21 @@ class QuasarConfig {
       }
     }, cfg.build)
 
-    if (this.opts.legacy === true) {
-      cfg.build.legacy = true
-    }
+    if (cfg.build.transpile === true) {
+      cfg.build.transpileDependencies = cfg.build.transpileDependencies.filter(uniqueRegexFilter)
+      cfg.__supportsIE = cfg.build.transpile === true && needsAdditionalPolyfills(this.ctx)
 
-    log(underline(
-      cfg.build.legacy === true
-        ? 'Generating legacy js code (ES5)'
-        : 'Using MODERN build (ES6+)'
-    ))
+      const type = cfg.__supportsIE === true
+        ? 'includes IE11 support'
+        : 'modern'
 
-    if (cfg.build.legacy === true) {
-      cfg.build.transpileDependencies = cfg.build.transpileDependencies.filter(uniqueRegexFilter)
+      cfg.__transpileBanner = green(`yes (Babel) - ${type}`)
+      log(`Transpiling JS (Babel active) - ${underline(type)}`)
+    }
+    else {
+      cfg.__supportsIE = false
+      cfg.__transpileBanner = 'no'
+      log(underline('Not transpiling JS'))
     }
 
     cfg.htmlVariables = merge({

app/lib/webpack/create-chain.js

@@ -108,7 +108,7 @@ module.exports = function (cfg, configName) {
         .loader(path.join(__dirname, 'loader.transform-quasar-imports.js'))
   }
 
-  if (cfg.build.legacy === true) {
+  if (cfg.build.transpile === true) {
     const vueRegex = /\.vue\.jsx?$/
     const nodeModulesRegex = /[\\/]node_modules[\\/]/
     const quasarRegex = configName !== 'Server'
@@ -285,7 +285,7 @@ module.exports = function (cfg, configName) {
       .use(FriendlyErrorsPlugin, [{
         clearConsole: true,
         compilationSuccessInfo: ['spa', 'pwa', 'ssr'].includes(cfg.ctx.modeName)
-          ? { notes: [ devCompilationSuccess(cfg.ctx, cfg.build.APP_URL, appPaths.appDir, cfg.build.legacy) ] }
+          ? { notes: [ devCompilationSuccess(cfg.ctx, cfg.build.APP_URL, appPaths.appDir, cfg.__transpileBanner) ] }
           : undefined
       }])
   }

app/lib/webpack/electron/main.js

@@ -48,7 +48,7 @@ module.exports = function (cfg, configName) {
   chain.plugin('expression-dependency')
     .use(ExpressionDependency)
 
-  if (cfg.build.legacy === true) {
+  if (cfg.build.transpile === true) {
     chain.module.rule('babel')
       .test(/\.js$/)
       .exclude

app/lib/webpack/ssr/plugin.ssr-prod-artifacts.js

@@ -42,7 +42,7 @@ module.exports = class SsrProdArtifacts {
           start: 'node index.js'
         },
         dependencies: Object.assign(appDeps,
-          this.cfg.build.legacy === true ? { '@quasar/babel-preset-app': cliDeps['@quasar/babel-preset-app'] } : {},
+          this.cfg.build.transpile === true ? { '@quasar/babel-preset-app': cliDeps['@quasar/babel-preset-app'] } : {},
           {
             'compression': '^1.0.0',
             'express': '^4.0.0',

app/package.json

@@ -55,6 +55,7 @@
     "@vue/preload-webpack-plugin": "1.1.1",
     "archiver": "4.0.1",
     "autoprefixer": "9.8.0",
+    "browserslist": "^4.12.0",
     "chalk": "4.0.0",
     "chokidar": "3.4.0",
     "ci-info": "2.0.0",

app/templates/entry/client-entry.js

@@ -9,7 +9,7 @@
  *
  * Boot files are your "main.js"
  **/
-<% if (__needsAdditionalPolyfills) { %>
+<% if (__supportsIE) { %>
 import 'quasar/dist/quasar.ie.polyfills.js'
 <% } %>
 

app/types/configuration/build.d.ts

@@ -6,19 +6,20 @@ import "./conf";
 import "../ts-helpers";
 
 interface QuasarStaticBuildConfiguration {
+  /**
+   * @version `@quasar/app` 2.0+
+   *
+   * Transpile JS code with Babel
+   *
+   * @default true
+   */
+  transpile: boolean;
   /**
    * Add dependencies for transpiling with Babel (from node_modules, which are by default not transpiled).
+   * It is ignored if "transpile" is not set to true.
    * @example [ /my-dependency/, ...]
    */
   transpileDependencies: RegExp[];
-  /**
-   * @version `@quasar/app` 1.9+
-   *
-   * Run legacy build (ES5).
-   *
-   * @default false
-   */
-  legacy: boolean;
   /**
    * @version `@quasar/app` 1.3.4+
    *