[rule] Disallow `__html`

[Daniel15]

Problem Description

There's an existing no-dangerously-set-innerhtml rule to prevent the usage of dangerouslySetInnerHTML.

However, the actual issue is construction of the __html object. The original idea with __html is that the server-side (or a client-side HTML sanitization library) would sanitize the content, then return it as a __html object. You'd then use this directly in the React component.

Essentially, the __html object is a JSON-serializable way for the server (or a library) to communicate to the client that the string of HTML is safe to use directly. It's never supposed to be used directly in product code.

Alternative Solutions

N/A

Rule Documentation Template

Rule Details

__html is an implementation detail used by server-side code (and client-side HTML sanitization libraries) to mark HTML text as safe to directly use in a React component. It should never appear in product code.

Invalid

// Bad: Inline creation of __html objects
<Foo dangerouslySetInnerHTML={{__html: bar}} />
const myHTML = {__html: bar};

Valid

// Good: Using HTML that was passed in as a __html object (e.g. from a 
// network response)
<Foo dangerouslySetInnerHTML={sanitizedContent} />

Evaluation Checklist

• I have had problems with the pattern I want to forbid
• I could not find a way to solve the problem by changing the API of the problematic code or introducing a new API
• I have thought very hard about what the corner cases could be and what kinds of patterns this would forbid that are actually okay, and they are acceptable
• I think the rule explains well enough how to solve the issue to make sure beginners are not blocked by it
• I have discussed this rule with team members, and they all find it valuable

[Rel1cx]

Thanks for the detailed proposal!

Before a built-in rule is officially added, you can achieve this now with an anonymous rule via @eslint-react/kit:

// eslint.config.ts
import eslintReact from "@eslint-react/eslint-plugin";
import eslintReactKit from "@eslint-react/kit";
import { defineConfig } from "eslint/config";

export default defineConfig({
  files: ["**/*.{ts,tsx}"],
  extends: [
    // ...your other configs
    eslintReact.configs["strict-typescript"],
    eslintReactKit()
      .use(() => (context) => ({
        Property(node) {
          if (node.key.type === "Identifier" && node.key.name === "__html") {
            context.report({
              node,
              message: "Do not construct '__html' objects directly. Use a sanitization library or receive them from server-side code.",
            });
          }
        },
      }))
      .getConfig(),
  ],
  rules: {
    "@eslint-react/dom-no-dangerously-set-innerhtml": "off", // disable the existing rule
  },
});