feat: add eslint 9 config support #762

KnightYoshi · 2024-06-21T09:15:25Z

Add ESLint 9 support: #710

With ESLint 9, the config has changed, this generates a ESLint JS file to work with the ESLint 9 config changes.

This also adds ESLint to the wxt-demo package.

There is just one issue to address.
IDE has an ESLint error
SyntaxError: The requested module './.wxt/eslintrc-auto-import.js' does not provide an export named 'default'

I think this is because it's not an index.js file and is doing a module.exports but in the demo package I'm using an import statement. If it's safe to now just use an export statement in the JS file I can update it to do that instead, or what would be the preferred approach to this?

I think everything else is correct, the Vitest was a bit of a learning curve, luckily there's plenty of other tests to learn from :)

…is not found

netlify · 2024-06-21T09:15:40Z

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	`6235ea1`
🔍 Latest deploy log	https://app.netlify.com/sites/creative-fairy-df92c4/deploys/66841cb3ac55c90008b081fd
😎 Deploy Preview	https://deploy-preview-762--creative-fairy-df92c4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

aklinker1 · 2024-06-22T19:59:45Z

Thanks for the PR, will review this today!

aklinker1

Edit: See #762 (comment) first before worrying about tests

Couple of changes requested. I'll implement a E2E test for this, can you update it so it passes?

# To run tests:
pnpm test

packages/wxt-demo/wxt.config.ts

packages/wxt-demo/package.json

packages/wxt/src/core/utils/building/generate-wxt-dir.ts

packages/wxt/src/core/utils/eslint.ts

aklinker1 · 2024-06-23T16:03:18Z

I see we're just re-exporting the JSON file in a JS file. ~~If that's all we're doing, can't we just do this instead?~~

Edit: ESLint doesn't like the with { type: 'json' }

// eslint.config.js
- import autoImports from './.wxt/eslintrc-auto-import.js';
+ import autoImports from './.wxt/eslintrc-auto-import.json' with { type: 'json' };

export default [
  {
    languageOptions: {
      globals: {
        ...autoImports.globals,
      },
      sourceType: 'module',
    },
  },
];

What about fully adopting the new file config format and do something like this?

import autoImports from './.wxt/eslint-auto-import-config.js';

export default [
  autoImports,
  {
    // User config here...
  },
];

// ./.wxt/eslint-auto-import-config.js
import { globals } from './eslintrc-auto-import.json' with { type: 'json' };

export default {
  languageOptions: {
    globals,
    sourceType: 'module',
  },
}

aklinker1 · 2024-06-23T16:33:07Z

Doing some more testing, and it appears typescript-eslint handles this automatically for you. Still a problem if you use JS though, so this PR is still important.

aklinker1 · 2024-06-23T16:40:40Z

OK, got a basic example of using the new flat file format

Screen.Recording.2024-06-23.at.11.39.04.AM.mov

wxt-eslint-9-example.zip

I think we should use this format instead.

aklinker1 · 2024-06-23T20:13:39Z

Also, I just merged #767, which will effect this PR. I knew it would cause conflicts with this PR when I merged it, but I needed it merged for some other work. So don't worry about fixing the merge conflicts yourself, I can do it since I broke it.

import('eslint') is not compatible `"type": "module"`

KnightYoshi · 2024-06-29T16:12:00Z

I see we're just re-exporting the JSON file in a JS file. ~~If that's all we're doing, can't we just do this instead?~~

Edit: ESLint doesn't like the with { type: 'json' }

// eslint.config.js
- import autoImports from './.wxt/eslintrc-auto-import.js';
+ import autoImports from './.wxt/eslintrc-auto-import.json' with { type: 'json' };

export default [
  {
    languageOptions: {
      globals: {
        ...autoImports.globals,
      },
      sourceType: 'module',
    },
  },
];

What about fully adopting the new file config format and do something like this?

import autoImports from './.wxt/eslint-auto-import-config.js';

export default [
  autoImports,
  {
    // User config here...
  },
];

// ./.wxt/eslint-auto-import-config.js
import { globals } from './eslintrc-auto-import.json' with { type: 'json' };

export default {
  languageOptions: {
    globals,
    sourceType: 'module',
  },
}

The idea I had was keeping it BC, since jumping to ESLint 9+ might be bigger hurdle for some. There was a package, ESLint import plugin I had that's not ESLint 9 compatible and hasn't been updated in 6 months, and I wasn't sure when it was going to be updated so I opted not to move to ESLint 9 for now.
I say "was" because the guy ljharb who is a big contributor insists on Node 0.4 compatibility and has caused a bit of an uproar over it, so I opted to remove it 🤣 However, that's not to say others can or will remove ESLint packages that prevent updating to the latest version.

What about splitting it so that it generates >=9+ config and <9 config depending on the ESLint version.

Edit: extended though was that eventually the ESLint 9 config would be the default and deprecate the ESLint <9 config

aklinker1 · 2024-06-30T20:16:01Z

I say "was" because the guy ljharb who is a big contributor insists on Node 0.4 compatibility and has caused a bit of an uproar over it, so I opted to remove it 🤣

... That's an interesting opinion.

What about splitting it so that it generates >=9+ config and <9 config depending on the ESLint version.

I think this is what we should do. Checking out your latest code now.

KnightYoshi · 2024-06-30T20:21:38Z

I say "was" because the guy ljharb who is a big contributor insists on Node 0.4 compatibility and has caused a bit of an uproar over it, so I opted to remove it 🤣

... That's an interesting opinion.

What about splitting it so that it generates >=9+ config and <9 config depending on the ESLint version.

I think this is what we should do. Checking out your latest code now.

Cool, if I have some time today I'll work on splitting it into separate dedicated configs based on the ESLint version, otherwise probably next weekend.

I already liked what the WXT framework has to offer. Working on this small part, and digging into the the internals of how it works has made me appreciate even more all the effort that has gone into it. It's non-trivial effort, so well done

codecov · 2024-06-30T21:32:49Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 87.15%. Comparing base (faffe20) to head (6235ea1).
Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #762      +/-   ##
==========================================
+ Coverage   87.08%   87.15%   +0.07%     
==========================================
  Files         116      117       +1     
  Lines        9939    10007      +68     
  Branches      973      976       +3     
==========================================
+ Hits         8655     8722      +67     
- Misses       1271     1272       +1     
  Partials       13       13

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

aklinker1

OK, this is looking good. Fixed the merge conflicts, so the code has moved.

I need to test if this actually creates a valid config file, and I'll add an E2E test for that later today maybe...

aklinker1 · 2024-06-30T21:32:37Z

packages/wxt/src/core/utils/building/resolve-config.ts

-  switch (rawEslintEnabled) {
-    case undefined:
-    case 'auto':
-      eslintEnabled = await isModuleInstalled('eslint');


Seems like "auto" was not working. Using your code though, it's working now!

aklinker1 · 2024-06-30T21:33:30Z

packages/wxt/src/core/utils/building/resolve-config.ts

+      eslintEnabled === 9
+        ? 'eslint-auto-imports.mjs'
+        : 'eslintrc-auto-import.json',


Needed to change the default file path for this file based on the version, so I moved the version detection code into the config resolution.

KnightYoshi added 5 commits June 21, 2024 05:01

build: add eslint to wxt-demo

5082b0e

feat: add method to get eslint version

1e494c2

chore: return empty array instead of throwing an exception if ESLint …

9c46542

…is not found

feat: write eslint 9 JS file if eslint version is >= 9

9c41545

build: add eslint to wxt-demo

6bcfb9d

aklinker1 requested changes Jun 23, 2024

View reviewed changes

KnightYoshi added 6 commits June 29, 2024 10:51

build: remove eslint from demo config

55f8666

feat: move eslint version arg into eslint 9 func

50be03b

build: remove eslint dependency

33cf786

refactor: move if condition to only call func if necessary

42f4fbf

build: add eslint types

529436b

feat: import eslint

a36cc64

import('eslint') is not compatible `"type": "module"`

aklinker1 added 4 commits June 30, 2024 16:08

Merge remote-tracking branch 'origin/main' into eslint-9-config

5cc8c19

Refactor into internal module, add E2E tests

9a9a6a7

Update lockfile

b455d44

Fix type errors

6246268

aklinker1 approved these changes Jun 30, 2024

View reviewed changes

aklinker1 added 3 commits July 2, 2024 10:12

Add E2E tests

297f40b

cleanup

16bb20c

Update docs

6235ea1

aklinker1 merged commit 18f8a38 into wxt-dev:main Jul 2, 2024
16 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add eslint 9 config support #762

feat: add eslint 9 config support #762

KnightYoshi commented Jun 21, 2024

netlify bot commented Jun 21, 2024 •

edited

Loading

aklinker1 commented Jun 22, 2024

aklinker1 left a comment •

edited

Loading

aklinker1 commented Jun 23, 2024 •

edited

Loading

aklinker1 commented Jun 23, 2024

aklinker1 commented Jun 23, 2024

aklinker1 commented Jun 23, 2024 •

edited

Loading

KnightYoshi commented Jun 29, 2024 •

edited

Loading

aklinker1 commented Jun 30, 2024

KnightYoshi commented Jun 30, 2024

codecov bot commented Jun 30, 2024 •

edited

Loading

aklinker1 left a comment •

edited

Loading

aklinker1 Jun 30, 2024

aklinker1 Jun 30, 2024

feat: add eslint 9 config support #762

feat: add eslint 9 config support #762

Conversation

KnightYoshi commented Jun 21, 2024

netlify bot commented Jun 21, 2024 • edited Loading

✅ Deploy Preview for creative-fairy-df92c4 ready!

aklinker1 commented Jun 22, 2024

aklinker1 left a comment • edited Loading

Choose a reason for hiding this comment

aklinker1 commented Jun 23, 2024 • edited Loading

aklinker1 commented Jun 23, 2024

aklinker1 commented Jun 23, 2024

aklinker1 commented Jun 23, 2024 • edited Loading

KnightYoshi commented Jun 29, 2024 • edited Loading

aklinker1 commented Jun 30, 2024

KnightYoshi commented Jun 30, 2024

codecov bot commented Jun 30, 2024 • edited Loading

Codecov Report

aklinker1 left a comment • edited Loading

Choose a reason for hiding this comment

aklinker1 Jun 30, 2024

Choose a reason for hiding this comment

aklinker1 Jun 30, 2024

Choose a reason for hiding this comment

netlify bot commented Jun 21, 2024 •

edited

Loading

aklinker1 left a comment •

edited

Loading

aklinker1 commented Jun 23, 2024 •

edited

Loading

aklinker1 commented Jun 23, 2024 •

edited

Loading

KnightYoshi commented Jun 29, 2024 •

edited

Loading

codecov bot commented Jun 30, 2024 •

edited

Loading

aklinker1 left a comment •

edited

Loading