feat(app-webpack): support ESLint v9

quasarframework · Nov 29, 2024 · b0db8ac · b0db8ac
1 parent a573db6
commit b0db8ac
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 27 deletions.
diff --git a/app-webpack/lib/cache/module.eslint.js b/app-webpack/lib/cache/module.eslint.js
@@ -4,12 +4,12 @@ const { getPackage } = require('../utils/get-package.js')
 
 module.exports.createInstance = function createInstance ({ appPaths }) {
   const eslintConfigFile = [
+    'eslint.config.js',
     '.eslintrc.cjs',
     '.eslintrc.js',
     '.eslintrc.yaml',
     '.eslintrc.yml',
-    '.eslintrc.json',
-    'eslint.config.js'
+    '.eslintrc.json'
   ].find(path => existsSync(appPaths.resolve.app(path)))
 
   const acc = {
@@ -18,6 +18,8 @@ module.exports.createInstance = function createInstance ({ appPaths }) {
   }
 
   if (acc.hasEslint === true) {
+    acc.configType = eslintConfigFile === 'eslint.config.js' ? 'flat' : 'eslintrc'
+
     const linter = getPackage('eslint', appPaths.appDir)
 
     if (linter !== void 0 && linter.ESLint !== void 0) {

diff --git a/app-webpack/lib/utils/inject-eslint-plugin.js b/app-webpack/lib/utils/inject-eslint-plugin.js
@@ -3,6 +3,9 @@ const fse = require('fs-extra')
 const { encodeForDiff } = require('./encode-for-diff.js')
 
 function extractPluginConfig ({
+  cwd, // injected by us
+  configType, // injected by us
+
   cache,
   cacheLocation, // injected by us
 
@@ -14,7 +17,8 @@ function extractPluginConfig ({
 
   rawWebpackEslintPluginOptions = {}
 }) {
-  return {
+  const acc = {
+    cwd,
     cache,
     cacheLocation,
     formatter,
@@ -28,6 +32,12 @@ function extractPluginConfig ({
     fix,
     ...rawWebpackEslintPluginOptions
   }
+
+  if (configType === 'flat') {
+    acc.configType = 'flat'
+  }
+
+  return acc
 }
 
 module.exports.injectESLintPlugin = function injectESLintPlugin (webpackChain, quasarConf, compileId) {
@@ -36,9 +46,12 @@ module.exports.injectESLintPlugin = function injectESLintPlugin (webpackChain, q
   const cacheId = `eslint-${ compileId }`
   const cacheLocation = appPaths.resolve.cache(cacheId)
   const { rawEsbuildEslintOptions, ...eslintOptions } = quasarConf.eslint
+  const { configType, EslintWebpackPlugin } = cacheProxy.getModule('eslint')
 
   const config = {
     ...eslintOptions,
+    cwd: appPaths.appDir,
+    configType,
     cacheLocation
   }
 
@@ -57,7 +70,6 @@ module.exports.injectESLintPlugin = function injectESLintPlugin (webpackChain, q
     }
   }
 
-  const { EslintWebpackPlugin } = cacheProxy.getModule('eslint')
   webpackChain.plugin('eslint-webpack-plugin')
     .use(EslintWebpackPlugin, [ extractPluginConfig(config) ])
 }
diff --git a/docs/src/pages/quasar-cli-vite/supporting-ts.md b/docs/src/pages/quasar-cli-vite/supporting-ts.md
@@ -125,15 +125,11 @@ module.exports = {
 
   globals: {
     ga: 'readonly', // Google Analytics
-    cordova: 'readonly',
-    __statics: 'readonly',
-    __QUASAR_SSR__: 'readonly',
-    __QUASAR_SSR_SERVER__: 'readonly',
-    __QUASAR_SSR_CLIENT__: 'readonly',
-    __QUASAR_SSR_PWA__: 'readonly',
     process: 'readonly',
+    cordova: 'readonly',
     Capacitor: 'readonly',
-    chrome: 'readonly'
+    chrome: 'readonly', // BEX related
+    browser: 'readonly' // BEX related
   },
 
   // add your custom rules here

diff --git a/docs/src/pages/quasar-cli-webpack/supporting-ts.md b/docs/src/pages/quasar-cli-webpack/supporting-ts.md
@@ -126,15 +126,11 @@ module.exports = {
 
   globals: {
     ga: 'readonly', // Google Analytics
-    cordova: 'readonly',
-    __statics: 'readonly',
-    __QUASAR_SSR__: 'readonly',
-    __QUASAR_SSR_SERVER__: 'readonly',
-    __QUASAR_SSR_CLIENT__: 'readonly',
-    __QUASAR_SSR_PWA__: 'readonly',
     process: 'readonly',
+    cordova: 'readonly',
     Capacitor: 'readonly',
-    chrome: 'readonly',
+    chrome: 'readonly', // BEX related
+    browser: 'readonly' // BEX related
   },
 
   // add your custom rules here

diff --git a/docs/src/pages/quasar-cli-webpack/upgrade-guide.md b/docs/src/pages/quasar-cli-webpack/upgrade-guide.md
@@ -201,6 +201,47 @@ Preparations:
   You can now write this file in TS too should you wish (rename `/quasar.config.js` to `/quasar.config.ts` -- notice the `.ts` file extension).
   :::
 
+* Set `type` to `module` in your `/package.json`. Do not overlook this step!
+  ```diff /package.json
+  {
+  + "type": "module"
+  }
+  ```
+  <br>
+
+  Convert `postcss.config.js` to ESM format:
+
+  ```js /postcss.config.js
+  // https://github.com/michael-ciniawsky/postcss-load-config
+  import autoprefixer from 'autoprefixer'
+
+  export default {
+    plugins: [
+      // to edit target browsers: use "browserslist" field in package.json
+      autoprefixer
+    ]
+  }
+  ```
+  <br>
+
+  Convert `babel.config.cjs` to ESM format:
+
+  ```js /babel.config.js
+  export default api => {
+    return {
+      presets: [
+        [
+          '@quasar/babel-preset-app',
+          api.caller(caller => caller && caller.target === 'node')
+            ? { targets: { node: 'current' } }
+            : {}
+        ]
+      ]
+    }
+  }
+  ```
+  <br>
+
 * For consistency with `@quasar/app-vite` (and easy switch between `@quasar/app-webpack` and it) move `/src/index.template.html` to `/index.html` and do the following changes:
   ```diff /index.html
   <body>
@@ -211,15 +252,6 @@ Preparations:
   ```
   <br>
 
-* (Optional, but recommended) For future-proofing some tools config files, rename the following files (in the root project folder):
-  | Old name | New name |
-  | -------- | -------- |
-  | postcss.config.js | postcss.config.cjs |
-  | .eslintrc.js | .eslintrc.cjs |
-  | babel.config.js | babel.config.cjs |
-
-  <br>
-
 * You might want to add the following to your `/.gitignore` file. These kind of files are left for inspection purposes when something fails with your `/quasar.config` file (and can be removed by the `quasar clean` command):
 
   ```bash [highlight=8,11] /.gitignore