oleks/wxt
1
0
Fork 0
Code Issues Pull Requests Actions 112 Packages Projects Releases Wiki Activity

feat: add eslint 9 config support (#762)

Browse Source 
Co-authored-by: Aaron <aaronklinker1@gmail.com>
This commit is contained in:
KnightYoshi
2024-07-02 11:32:32 -04:00
committed by GitHub
parent 48c2c07557
commit 18f8a387b0
10 changed files with 395 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guide/key-concepts/auto-imports.md
+27 -10
View File
@@ -79,24 +79,41 @@ export default defineConfig({
## ESLint
ESLint doesn't understand auto-imports; it thinks all auto-imported variables are undeclared globals and will report lint errors for each. To fix this, extend the ESLint file generated inside the `.wxt` directory:
By default, ESLint thinks auto-imported variables are not defined. You have to add them to the `globals` config so it knows these variables exist at runtime.
```js
// .eslintrc.js
module.exports = {
extends: ['./.wxt/eslintrc-auto-import.json'],
};
```
By default, this file will be generated when ESLint is a direct dependency. If ESLint is a subdependency or your project is a monorepo, it may not be generated automatically. In this case, you can tell WXT to generate it:
WXT generates a config file containing the globals you can extend! By default, WXT will attempt to detect if ESLint is installed in your project and generate the config file if so. If the config file isn't being generated automatically, you can manually tell WXT to generate it:
```ts
// wxt.config.ts
export default defineConfig({
imports: {
eslintrc: {
enabled: true,
enabled: 8, // Generate ESLint v8 compatible config
// or
enabled: 9, // Generate ESLint v9 compatible config
},
},
});
```
### ESLint 9 and above
WXT supports the new "flat config" file format. Just import the generated file and add it to the array of config to extend.
```js
// eslint.config.mjs
import autoImports from './.wxt/eslint-auto-imports.mjs';
export default [autoImports];
```
### ESLint 8 and below
Just extend the generated file:
```js
// .eslintrc.mjs
export default {
extends: ['./.wxt/eslintrc-auto-import.json'],
};
```
packages/wxt-demo/eslint.config.js
+12
View File
@@ -0,0 +1,12 @@
import autoImports from './.wxt/eslintrc-auto-import.js';
export default [
{
languageOptions: {
globals: {
...autoImports.globals,
},
sourceType: 'module',
},
},
];
packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap
+102
View File
@@ -0,0 +1,102 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Auto Imports > eslintrc > "enabled: 8" should output a JSON config file compatible with ESlint 8 1`] = `
".wxt/eslintrc-auto-import.json
----------------------------------------
{
"globals": {
"ContentScriptContext": true,
"InvalidMatchPattern": true,
"MatchPattern": true,
"browser": true,
"createIframeUi": true,
"createIntegratedUi": true,
"createShadowRootUi": true,
"defineBackground": true,
"defineConfig": true,
"defineContentScript": true,
"defineUnlistedScript": true,
"defineWxtPlugin": true,
"fakeBrowser": true,
"storage": true
}
}
"
`;
exports[`Auto Imports > eslintrc > "enabled: 9" should output a flat config file compatible with ESlint 9 1`] = `
".wxt/eslint-auto-imports.mjs
----------------------------------------
const globals = {
"ContentScriptContext": true,
"InvalidMatchPattern": true,
"MatchPattern": true,
"browser": true,
"createIframeUi": true,
"createIntegratedUi": true,
"createShadowRootUi": true,
"defineBackground": true,
"defineConfig": true,
"defineContentScript": true,
"defineUnlistedScript": true,
"defineWxtPlugin": true,
"fakeBrowser": true,
"storage": true
}
export default {
languageOptions: {
globals,
sourceType: "module",
},
};
"
`;
exports[`Auto Imports > eslintrc > "enabled: true" should output a JSON config file compatible with ESlint 8 1`] = `
".wxt/eslintrc-auto-import.json
----------------------------------------
{
"globals": {
"ContentScriptContext": true,
"InvalidMatchPattern": true,
"MatchPattern": true,
"browser": true,
"createIframeUi": true,
"createIntegratedUi": true,
"createShadowRootUi": true,
"defineBackground": true,
"defineConfig": true,
"defineContentScript": true,
"defineUnlistedScript": true,
"defineWxtPlugin": true,
"fakeBrowser": true,
"storage": true
}
}
"
`;
exports[`Auto Imports > eslintrc > should allow customizing the output 1`] = `
"example.json
----------------------------------------
{
"globals": {
"ContentScriptContext": "readonly",
"InvalidMatchPattern": "readonly",
"MatchPattern": "readonly",
"browser": "readonly",
"createIframeUi": "readonly",
"createIntegratedUi": "readonly",
"createShadowRootUi": "readonly",
"defineBackground": "readonly",
"defineConfig": "readonly",
"defineContentScript": "readonly",
"defineUnlistedScript": "readonly",
"defineWxtPlugin": "readonly",
"fakeBrowser": "readonly",
"storage": "readonly"
}
}
"
`;
packages/wxt/e2e/tests/auto-imports.test.ts
+155 -49
View File
@@ -1,5 +1,6 @@
import { describe, it, expect } from 'vitest';
import { TestProject } from '../utils';
import { execaCommand } from 'execa';
describe('Auto Imports', () => {
describe('imports: { ... }', () => {
@@ -96,7 +97,7 @@ describe('Auto Imports', () => {
});
describe('eslintrc', () => {
it('should output the globals list for ESLint to consume', async () => {
it('"enabled: true" should output a JSON config file compatible with ESlint 8', async () => {
const project = new TestProject();
project.addFile('entrypoints/popup.html', `<html></html>`);
@@ -108,30 +109,43 @@ describe('Auto Imports', () => {
},
});
expect(await project.serializeFile('.wxt/eslintrc-auto-import.json'))
.toMatchInlineSnapshot(`
".wxt/eslintrc-auto-import.json
----------------------------------------
{
"globals": {
"ContentScriptContext": true,
"InvalidMatchPattern": true,
"MatchPattern": true,
"browser": true,
"createIframeUi": true,
"createIntegratedUi": true,
"createShadowRootUi": true,
"defineBackground": true,
"defineConfig": true,
"defineContentScript": true,
"defineUnlistedScript": true,
"defineWxtPlugin": true,
"fakeBrowser": true,
"storage": true
}
}
"
`);
expect(
await project.serializeFile('.wxt/eslintrc-auto-import.json'),
).toMatchSnapshot();
});
it('"enabled: 8" should output a JSON config file compatible with ESlint 8', async () => {
const project = new TestProject();
project.addFile('entrypoints/popup.html', `<html></html>`);
await project.prepare({
imports: {
eslintrc: {
enabled: 8,
},
},
});
expect(
await project.serializeFile('.wxt/eslintrc-auto-import.json'),
).toMatchSnapshot();
});
it('"enabled: 9" should output a flat config file compatible with ESlint 9', async () => {
const project = new TestProject();
project.addFile('entrypoints/popup.html', `<html></html>`);
await project.prepare({
imports: {
eslintrc: {
enabled: 9,
},
},
});
expect(
await project.serializeFile('.wxt/eslint-auto-imports.mjs'),
).toMatchSnapshot();
});
it('should allow customizing the output', async () => {
@@ -148,30 +162,122 @@ describe('Auto Imports', () => {
},
});
expect(await project.serializeFile('example.json'))
.toMatchInlineSnapshot(`
"example.json
----------------------------------------
{
"globals": {
"ContentScriptContext": "readonly",
"InvalidMatchPattern": "readonly",
"MatchPattern": "readonly",
"browser": "readonly",
"createIframeUi": "readonly",
"createIntegratedUi": "readonly",
"createShadowRootUi": "readonly",
"defineBackground": "readonly",
"defineConfig": "readonly",
"defineContentScript": "readonly",
"defineUnlistedScript": "readonly",
"defineWxtPlugin": "readonly",
"fakeBrowser": "readonly",
"storage": "readonly"
}
}
"
`);
expect(await project.serializeFile('example.json')).toMatchSnapshot();
});
describe('Actual linting results', () => {
async function runEslint(
project: TestProject,
version: boolean | 'auto' | 8 | 9,
) {
project.addFile(
'entrypoints/background.js',
`export default defineBackground(() => {})`,
);
await project.prepare({
imports: { eslintrc: { enabled: version } },
});
return await execaCommand('pnpm eslint entrypoints/background.js', {
cwd: project.root,
});
}
describe('ESLint 9', () => {
it('should have lint errors when not extending generated config', async () => {
const project = new TestProject({
devDependencies: {
'@eslint/js': '9.5.0',
eslint: '9.5.0',
},
});
project.addFile(
'eslint.config.mjs',
`
import eslint from "@eslint/js";
export default [
eslint.configs.recommended,
];
`,
);
await expect(runEslint(project, 9)).rejects.toMatchObject({
message: expect.stringContaining(
"'defineBackground' is not defined",
),
});
});
it('should not have any lint errors when configured', async () => {
const project = new TestProject({
devDependencies: {
'@eslint/js': '9.5.0',
eslint: '9.5.0',
},
});
project.addFile(
'eslint.config.mjs',
`
import eslint from "@eslint/js";
import autoImports from "./.wxt/eslint-auto-imports.mjs";
export default [
eslint.configs.recommended,
autoImports,
];
`,
);
const res = await runEslint(project, 9);
expect(res).toBeDefined();
});
});
describe('ESLint 8', () => {
it('should have lint errors when not extending generated config', async () => {
const project = new TestProject({
devDependencies: {
eslint: '8.57.0',
},
});
project.addFile(
'.eslintrc',
JSON.stringify({
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
env: { es6: true },
extends: ['eslint:recommended'],
}),
);
await expect(runEslint(project, 8)).rejects.toMatchObject({
message: expect.stringContaining(
"'defineBackground' is not defined",
),
});
});
it('should not have any lint errors when configured', async () => {
const project = new TestProject({
devDependencies: {
eslint: '8.57.0',
},
});
project.addFile(
'.eslintrc',
JSON.stringify({
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
env: { es6: true },
extends: [
'eslint:recommended',
'./.wxt/eslintrc-auto-import.json',
],
}),
);
const res = await runEslint(project, 8);
expect(res).toBeDefined();
});
});
});
});
});
packages/wxt/src/builtin-modules/unimport.ts
+38 -11
View File
@@ -45,8 +45,10 @@ export default defineWxtModule({
entries.push(await getImportsDeclarationEntry(unimport));
if (!options.eslintrc.enabled) return;
entries.push(await getImportsEslintEntry(unimport, options));
if (options.eslintrc.enabled === false) return;
entries.push(
await getEslintConfigEntry(unimport, options.eslintrc.enabled, options),
);
});
// Add vite plugin
@@ -100,23 +102,48 @@ async function getImportsDeclarationEntry(
};
}
async function getImportsEslintEntry(
async function getEslintConfigEntry(
unimport: Unimport,
version: 8 | 9,
options: WxtResolvedUnimportOptions,
): Promise<WxtDirFileEntry> {
const globals: Record<string, EslintGlobalsPropValue> = {};
const eslintrc = { globals };
(await unimport.getImports())
const globals = (await unimport.getImports())
.map((i) => i.as ?? i.name)
.filter(Boolean)
.sort()
.forEach((name) => {
eslintrc.globals[name] = options.eslintrc.globalsPropValue;
});
.reduce<Record<string, EslintGlobalsPropValue>>((globals, name) => {
globals[name] = options.eslintrc.globalsPropValue;
return globals;
}, {});
if (version <= 8) return getEslint8ConfigEntry(options, globals);
else return getEslint9ConfigEntry(options, globals);
}
export function getEslint8ConfigEntry(
options: WxtResolvedUnimportOptions,
globals: Record<string, EslintGlobalsPropValue>,
): WxtDirFileEntry {
return {
path: options.eslintrc.filePath,
text: JSON.stringify(eslintrc, null, 2) + '\n',
text: JSON.stringify({ globals }, null, 2) + '\n',
};
}
export function getEslint9ConfigEntry(
options: WxtResolvedUnimportOptions,
globals: Record<string, EslintGlobalsPropValue>,
): WxtDirFileEntry {
return {
path: options.eslintrc.filePath,
text: `const globals = ${JSON.stringify(globals, null, 2)}
export default {
languageOptions: {
globals,
sourceType: "module",
},
};
`,
};
}
packages/wxt/src/core/utils/building/resolve-config.ts
+38 -17
View File
@@ -12,17 +12,19 @@ import {
WxtCommand,
WxtModule,
WxtModuleWithMetadata,
ResolvedEslintrc,
Eslintrc,
} from '~/types';
import path from 'node:path';
import { createFsCache } from '~/core/utils/cache';
import consola, { LogLevels } from 'consola';
import defu from 'defu';
import { NullablyRequired } from '../types';
import { isModuleInstalled } from '../package';
import fs from 'fs-extra';
import { normalizePath } from '../paths';
import glob from 'fast-glob';
import { builtinModules } from '~/builtin-modules';
import { getEslintVersion } from '../eslint';
/**
* Given an inline config, discover the config file if necessary, merge the results, resolve any
@@ -302,17 +304,6 @@ async function getUnimportOptions(
): Promise<WxtResolvedUnimportOptions | false> {
if (config.imports === false) return false;
const rawEslintEnabled = config.imports?.eslintrc?.enabled;
let eslintEnabled: boolean;
switch (rawEslintEnabled) {
case undefined:
case 'auto':
eslintEnabled = await isModuleInstalled('eslint');
break;
default:
eslintEnabled = rawEslintEnabled;
}
const defaultOptions: WxtResolvedUnimportOptions = {
debugLog: logger.debug,
imports: [
@@ -330,11 +321,7 @@ async function getUnimportOptions(
dirsScanOptions: {
cwd: srcDir,
},
eslintrc: {
enabled: eslintEnabled,
filePath: path.resolve(wxtDir, 'eslintrc-auto-import.json'),
globalsPropValue: true,
},
eslintrc: await getUnimportEslintOptions(wxtDir, config.imports?.eslintrc),
};
return defu<WxtResolvedUnimportOptions, [WxtResolvedUnimportOptions]>(
@@ -343,6 +330,40 @@ async function getUnimportOptions(
);
}
async function getUnimportEslintOptions(
wxtDir: string,
options: Eslintrc | undefined,
): Promise<ResolvedEslintrc> {
const rawEslintEnabled = options?.enabled ?? 'auto';
let eslintEnabled: ResolvedEslintrc['enabled'];
switch (rawEslintEnabled) {
case 'auto':
const version = await getEslintVersion();
let major = parseInt(version[0]);
if (major <= 8) eslintEnabled = 8;
else if (major >= 9) eslintEnabled = 9;
// NaN
else eslintEnabled = 8;
break;
case true:
eslintEnabled = 8;
break;
default:
eslintEnabled = rawEslintEnabled;
}
return {
enabled: eslintEnabled,
filePath: path.resolve(
wxtDir,
eslintEnabled === 9
? 'eslint-auto-imports.mjs'
: 'eslintrc-auto-import.json',
),
globalsPropValue: true,
};
}
/**
* Returns the path to `node_modules/wxt`.
*/
packages/wxt/src/core/utils/eslint.ts
+11
View File
@@ -0,0 +1,11 @@
export async function getEslintVersion(): Promise<string[]> {
try {
const require = (await import('node:module')).default.createRequire(
import.meta.url,
);
const { ESLint } = require('eslint');
return ESLint.version?.split('.') ?? [];
} catch (error) {
return [];
}
}
packages/wxt/src/core/utils/package.ts
-4
View File
@@ -20,7 +20,3 @@ export async function getPackageJson(): Promise<
return {};
}
}
export function isModuleInstalled(name: string) {
return import(/* @vite-ignore */ name).then(() => true).catch(() => false);
}
packages/wxt/src/core/utils/testing/fake-objects.ts
+1 -1
View File
@@ -245,7 +245,7 @@ export const fakeResolvedConfig = fakeObjectCreator<ResolvedConfig>(() => {
fsCache: mock<FsCache>(),
imports: {
eslintrc: {
enabled: faker.datatype.boolean(),
enabled: faker.helpers.arrayElement([false, 8, 9]),
filePath: fakeFile(),
globalsPropValue: faker.helpers.arrayElement([
true,
packages/wxt/src/types/index.ts
+11 -6
View File
@@ -1238,17 +1238,21 @@ export interface Eslintrc {
/**
* When true, generates a file that can be used by ESLint to know which variables are valid globals.
*
* - `'auto'`: Check if eslint is installed, and if it is, generate the helper file
* - `true`: Generate the helper file
* - `false`: Don't generate the file
* - `false`: Don't generate the file.
* - `'auto'`: Check if eslint is installed, and if it is, generate a compatible config file.
* - `true`: Same as `8`.
* - `8`: Generate a config file compatible with ESLint 8.
* - `9`: Generate a config file compatible with ESLint 9.
*
* @default 'auto'
*/
enabled?: boolean | 'auto';
enabled?: false | true | 'auto' | 8 | 9;
/**
* File path to save the generated eslint config.
*
* @default './.wxt/eslintrc-auto-import.json'
* Default depends on version of ESLint used:
* - 9 and above: './.wxt/eslint-auto-imports.mjs'
* - 8 and below: './.wxt/eslintrc-auto-import.json'
*/
filePath?: string;
/**
@@ -1258,7 +1262,8 @@ export interface Eslintrc {
}
export interface ResolvedEslintrc {
enabled: boolean;
/** False if disabled, otherwise the major version of ESLint installed */
enabled: false | 8 | 9;
/** Absolute path */
filePath: string;
globalsPropValue: EslintGlobalsPropValue;