Skip to content

[New]: forbid-dom-props: support React Strict Dom elements (html.div, etc) #3946

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

mdjastrzebski
Copy link

Summary

Add suport for React Strict DOM notation of DOM nodes: html.div, html.span, h.h1, etc

Details

The code is based on forbid-component-props rule that already supported Namespace.Component notation.

Testing

Added pass/fail tests for html.div, h.span, etc

Copy link

codecov bot commented Aug 19, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.72%. Comparing base (f2869fd) to head (48b582a).

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3946      +/-   ##
==========================================
- Coverage   97.84%   97.72%   -0.12%     
==========================================
  Files         136      133       -3     
  Lines       10008     9999       -9     
  Branches     3717     3720       +3     
==========================================
- Hits         9792     9772      -20     
- Misses        216      227      +11     

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@mdjastrzebski
Copy link
Author

Note: the failing checks seems to be related to other rules this PR is not chaning: jsx-indent, jsx-tag-spacing

@ljharb
Copy link
Member

ljharb commented Aug 19, 2025

interesting, i'd never heard of this before. seems like an evolution of react-native-web?

Copy link
Member

@ljharb ljharb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like something that needs to be behind an option - i assume that the lowercase only works because of the .? (meaning that const { div } = html; <div /> wouldn't work?

@mdjastrzebski
Copy link
Author

@ljharb re RSD: RSD is alternative approach for React Native + Web codesharing. RN Web took RN-first approach, while RSD takes. web-first approach.

re impl: Since RSD closely resembles regular DOM elements, I though that forget-dom-props is the right rule to modify. Alternatively we could modify forget-component-props but that would require dropping requirement for first uppercase letter in the name. Wdyt?

@ljharb
Copy link
Member

ljharb commented Aug 20, 2025

I think either one is fine as long as it's behind an option, since this is an official react offering (if it was unofficial, then it should go in the component rule for sure)

@mdjastrzebski
Copy link
Author

@ljharb how should I implement such option? Is it an extra param for the rule, like supportReactStrictDom: true or something other?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants