From b0db8ac16afa37ff38e8f4a1281fafec1bb05892 Mon Sep 17 00:00:00 2001 From: Razvan Stoenescu Date: Fri, 29 Nov 2024 19:37:24 +0200 Subject: [PATCH] feat(app-webpack): support ESLint v9 --- app-webpack/lib/cache/module.eslint.js | 6 ++- app-webpack/lib/utils/inject-eslint-plugin.js | 16 +++++- .../pages/quasar-cli-vite/supporting-ts.md | 10 ++-- .../pages/quasar-cli-webpack/supporting-ts.md | 10 ++-- .../pages/quasar-cli-webpack/upgrade-guide.md | 50 +++++++++++++++---- 5 files changed, 65 insertions(+), 27 deletions(-) diff --git a/app-webpack/lib/cache/module.eslint.js b/app-webpack/lib/cache/module.eslint.js index 2f3197c66d4..bc3d7617f35 100644 --- 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 index 6e053cbaab1..be3dd2436ae 100644 --- 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 index f71fd1786e2..83cdf58a913 100644 --- 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 index a822897c855..7d7e5f3f96d 100644 --- 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 index aeaf0ecc257..b449387151b 100644 --- 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" + } + ``` +
+ + 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 + ] + } + ``` +
+ + 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' } } + : {} + ] + ] + } + } + ``` +
+ * 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 @@ -211,15 +252,6 @@ Preparations: ```
-* (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 | - -
- * 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