Given we use React pretty extensively for integrating BlockNote, and React is full of footguns, I propose we add an ESLint plugin for linting React code exclusively: eslint-plugin-react-hooks.
This plugin ensures some of React’s rules are followed, the most important being exhaustive-deps, which checks if all required dependencies have been specified when using useEffect and useCallback.
All lints in this plugin are useful in various ways, but I believe this one alone justifies its use in the codebase.
There shouldn’t be many (if any) change to our current code given the best practices have theoretically been followed for all the code we’ve written so far. But this will allow us to ensure we haven’t messed up, and more importantly that we don’t ever when the codebase grows.
What do you think?
EDIT: See my clarifications below ; TL;DR the rules would only apply to the blocknote-react package which acts as an isolation layer for 100% of the React code we use.
Didn’t we decide to use Vue.js and not React in XWiki? I’m really worried that introducing more complex frontend technologies in XWiki will make it much harder to maintain and contribute to XWiki’s UI as every developer will not only need to know about and understand Prototype, jQuery and Vue.js but now also React. I understand that it’s unavoidable with BlockNote from what you have found. However, I think the use of React in XWiki still needs a proper proposal that also defines rules where we’re allowed to use React such that we limit its use to places where it’s really unavoidable. Btw., we’re also missing a proper proposal for introducing BlockNote in XWiki, from what I know there hasn’t been any formal decision that we intend to make BlockNote the default WYSIWYG editor.
In any case, +1 for adding linting.
1 Like
Indeed, BlockNote is React-only, and there is no way around that (as we saw with the failed Reactivue experiment). But we do actually only use Vue in XS, as the blocknote-headless package used to integrate BlockNote in both XS and Cristal rely on React under-the-hood through the blocknote-react package that is basically a wrapper around BlockNote.
So React usage has been strictly limited to that package ; and while there is no “official” guidance on this, the idea is to never write a single line of React code outside of blocknote-react. Everything that requires interacting with React should be put in that package and exposed in the form of a framework-agnostic API, which can then be used in Vue or jQuery.
The goal of my proposal is that, given the editor is one of the most critical places of both XS and Cristal in my opinion, I believe adding rules to avoid problems in this package is very important 
The rules would only apply to blocknote-react.
1 Like