[react] Allow TrustedHTML in dangerouslySetInnerHTML

[eps1lon]

Closes #60417

Please fill in this template.

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code. (Compile and run.)
• Add or edit tests to reflect the change.
• Follow the advice from the readme.
• Avoid common mistakes.
• Run npm test <package to test>.

Select one of these and delete the others:

If changing an existing definition:

• Provide a URL to documentation or source code which provides context for the suggested changes:
  • https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML
  • https://codesandbox.io/s/trustedhtml-kfxbhz
• [ ] If this PR brings the type definitions up to date with a new version of the JS library, update the version number in the header.

/cc @lgarron

[typescript-bot]

@eps1lon Thank you for submitting this PR!

This is a live comment which I will keep updated.

1 package in this PR

• react — on npm, on unpkg (author is owner)

Code Reviews

Because you edited one package and updated the tests (👏), I can help you merge this PR once someone else signs off on it.

You can test the changes of this PR in the Playground.

Status

• ✅ No merge conflicts
• ✅ Continuous integration tests have passed
• ✅ Most recent commit is approved by type definition owners or DT maintainers

All of the items on the list are green. To merge, you need to post a comment including the string "Ready to merge" to bring in your changes.

---

Diagnostic Information: What the bot saw about this PR

{
  "type": "info",
  "now": "-",
  "pr_number": 60691,
  "author": "eps1lon",
  "headCommitOid": "88ac29b42910d0988cd0450a7be0ea7a410b9a36",
  "mergeBaseOid": "595c471bd4aefa44a5d0ee49c4d73f373c319d18",
  "lastPushDate": "2022-06-06T18:08:54.000Z",
  "lastActivityDate": "2022-06-16T08:59:45.000Z",
  "maintainerBlessed": "Waiting for Code Reviews",
  "mergeOfferDate": "2022-06-15T20:50:07.000Z",
  "mergeRequestDate": "2022-06-16T08:59:45.000Z",
  "mergeRequestUser": "eps1lon",
  "hasMergeConflict": false,
  "isFirstContribution": false,
  "tooManyFiles": false,
  "hugeChange": false,
  "popularityLevel": "Critical",
  "pkgInfo": [
    {
      "name": "react",
      "kind": "edit",
      "files": [
        {
          "path": "types/react/global.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/test/index.ts",
          "kind": "test"
        },
        {
          "path": "types/react/v16/global.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/v16/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/v16/test/index.ts",
          "kind": "test"
        },
        {
          "path": "types/react/v17/global.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/v17/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/v17/test/index.ts",
          "kind": "test"
        }
      ],
      "owners": [
        "johnnyreilly",
        "bbenezech",
        "pzavolinsky",
        "ericanderson",
        "DovydasNavickas",
        "theruther4d",
        "guilhermehubner",
        "ferdaber",
        "jrakotoharisoa",
        "pascaloliv",
        "hotell",
        "franklixuefei",
        "Jessidhia",
        "saranshkataria",
        "lukyth",
        "eps1lon",
        "zieka",
        "dancerphil",
        "dimitropoulos",
        "disjukr",
        "vhfmag",
        "hellatan",
        "priyanshurav"
      ],
      "addedOwners": [],
      "deletedOwners": [],
      "popularityLevel": "Critical"
    }
  ],
  "reviews": [
    {
      "type": "approved",
      "reviewer": "peterblazejewicz",
      "date": "2022-06-15T20:49:24.000Z",
      "isMaintainer": true
    }
  ],
  "mainBotCommentID": 1147755504,
  "ciResult": "pass"
}

[typescript-bot]

🔔 @johnnyreilly @bbenezech @pzavolinsky @ericanderson @DovydasNavickas @theruther4d @guilhermehubner @ferdaber @jrakotoharisoa @pascaloliv @Hotell @franklixuefei @Jessidhia @saranshkataria @lukyth @zieka @dancerphil @dimitropoulos @disjukr @vhfmag @hellatan @priyanshurav — please review this PR in the next few days. Be sure to explicitly select Approve or Request Changes in the GitHub UI so I know what's going on.

[DangerBotOSS]

Inspecting the JavaScript source for this package found some properties that are not in the .d.ts files.
The check for missing properties isn't always right, so take this list as advice, not a requirement.

react (unpkg)

was missing the following properties:

1. unstable_act

Generated by 🚫 dangerJS against 88ac29b

[peterblazejewicz]

Sebastian, thanks!
At your discretion, LGTM!

[eps1lon]

Ready to merge

[rschaufler]

I just updated to @types/react 18.0.13 and get the following error in my app where i also use @types/trusted-types:

[ ERROR ]  TypeScript: ./node_modules/@types/trusted-types/index.d.ts:14:11
           Cannot redeclare block-scoped variable 'TrustedHTML'.

     L13:  declare global {
     L14:      const TrustedHTML: typeof lib.TrustedHTML;
     L15:      type TrustedHTML = lib.TrustedHTML;

[ ERROR ]  TypeScript: ./node_modules/@types/react/global.d.ts:157:11
           Cannot redeclare block-scoped variable 'TrustedHTML'.

    L157:  interface TrustedHTML { }

It seems to be related to the change in this PR.

[GenesisAtMac]

I just updated to @types/react 18.0.13 and get the following error in my app where i also use @types/trusted-types:

[ ERROR ]  TypeScript: ./node_modules/@types/trusted-types/index.d.ts:14:11
           Cannot redeclare block-scoped variable 'TrustedHTML'.

     L13:  declare global {
     L14:      const TrustedHTML: typeof lib.TrustedHTML;
     L15:      type TrustedHTML = lib.TrustedHTML;

[ ERROR ]  TypeScript: ./node_modules/@types/react/global.d.ts:157:11
           Cannot redeclare block-scoped variable 'TrustedHTML'.

    L157:  interface TrustedHTML { }

It seems to be related to the change in this PR.

I have the same thing with 17.0.46. I have forced 17.0.45 for the time being.

[peterblazejewicz]

@eppsilon sorry, I've missed this one is global. You've folks discussed this in the linked thread (impact of global symbols from trusted-types)

[eps1lon]

Shouldn't TrustedHTML be part of lib.dom.d.ts? Alternatively check out how lib.dom.d.ts works. Because @types/react creates a bunch of empty interfaces for DOM compat and these don't clash with lib.dom.d.ts

[peterblazejewicz]

IMO 'lib.dom.d.ts' uses this combos for class/interface to allow merging, this is why it works with others, say:

interface TouchList {
    readonly length: number;
    item(index: number): Touch | null;
    [index: number]: Touch;
}

declare var TouchList: {
    prototype: TouchList;
    new(): TouchList;
};

we could ask to make a change in trusted-types to allow same (if I'm correct)

[peterblazejewicz]

@rschaufler @GenesisAtMac this change was reverted, sorry for the fuss. We've missed fragmentation problem with dom-like types within TS ecosystem. Thanks!

[eps1lon]

Proposed #61160 in the hopes we can reland this PR.