☁️ Nx Cloud Report

CI is running/has finished running commands for commit ff80b53. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Sent with 💌 from NxCloud.

Thanks for the PR, @Josh-Cena!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!

🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint. As a thank you, your profile/company logo will be added to our main README which receives thousands of unique visitors per day.

✅ Deploy Preview for typescript-eslint ready!

Name	Link
🔨 Latest commit	ff80b53
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/6295cd520581c60009c95108
😎 Deploy Preview	https://deploy-preview-5099--typescript-eslint.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 settings.

We can, absolutely. but it would still mean showing two competing lines and when users copy, they have to delete the "-" line. Using highlighted lines makes it quite clear as well.

I don't know what's going on with the Netlify preview, though—it's not showing the latest content😕

I personally like diffs as it clearly shows what changes should be made which helps tell the story of how to configure things

i do agree with that, if we want to make file copyable, maybe user-select: none; could be used instead? for + and -

https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/website/src/css/prism.css

.token.prefix {
    user-select: none;
}

Codecov Report

Merging #5099 (ff80b53) into main (c9c0569) will decrease coverage by 0.38%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #5099      +/-   ##
==========================================
- Coverage   91.70%   91.32%   -0.39%     
==========================================
  Files         362      132     -230     
  Lines       12181     1487   -10694     
  Branches     3530      224    -3306     
==========================================
- Hits        11171     1358    -9813     
+ Misses        661       65     -596     
+ Partials      349       64     -285     

Flags with carried forward coverage won't be shown. Click here to find out more.

https://jsfiddle.net/fp2jrnmv/
Just to show a quick-and-dirty POC of this working in a fiddle.
There is one small issue - we can't prevent copying empty newlines[1] - but it's otherwise perfect.

[1] copying the above example yields:

  module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: [
      '@typescript-eslint',
    ],
    extends: [


     'airbnb-typescript',
    ],
  };

Another option (or an additional option) could be to use JS to add a copy button which completely deletes the deleted lines from the copied contents.

There is one small issue - we can't prevent copying empty newlines[1]

.language-diff .token-line > .prefix, /* you want to remove all prefixes, as non modifed lines have extra space */
.language-diff .token-line > .deleted, /* remove deleted elements */
.language-diff .token-line > .deleted + br { /* remove new line after deleted elements */
  user-select: none;
}

@armano2 - ah I missed the brs!

  module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: [
      '@typescript-eslint',
    ],
    extends: [
     'airbnb-typescript',
    ],
  }

This is exactly what we want - you can copy paste the true snipped AND we get to show the changes to tell a story.
I love it!

Great, I'll implement this and you can see the effect (hopefully—if the deploy preview updates)

Also, what do we do about the copy button? Should we hide it entirely, or do you want it to have custom behavior as well?

Also, what do we do about the copy button? Should we hide it entirely, or do you want it to have custom behavior as well?

If it's not too difficult - having it do the same thing (copy the "intended" code) would be great!
Otherwise I'm happy for it to be hidden if it's too hard to customise.

Ahhh... Customizing the copy button, even hiding it, is a bit hard at this stage. This would need some refactors in Docusaurus, but I'm not sure how. I hope the current solution is good enough.

Current UI/UX is quite good IMO. We have syntax highlighting which is missed in diff code blocks. It's also more obvious that the +/- are non-text tokens because they are shifted left.

Cross-posting from facebook/react-native-website#2984 — we'll probably consider making this the default behavior in Docusaurus.