Skip to content
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

[react] Add JSX namespace to React namespace #64464

Merged

Conversation

eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Feb 23, 2023

This allows referring to JSX namespace as React.JSX instead of assuming a global JSX namespace. Module augmentations of the global namespace flow into the scoped namespace i.e. should still work like before.

This deprecates the global JSX namespace..

In code:

-// usage of JSX.Element is deprecated
-const element: JSX.Element = <div />
+// Use `React.JSX.Element` instead.
+const element: React.JSX.Element = <div />
-// Augmenting the global namespace is deprecated
-declare global {
+// Augment the "react" module instead
+declare module "react" {
   namespace JSX {
     // your augmentations e.g. to add non-standard attributes
   } 
 }

These diffs will work on all latest major types versions e.g. freshly installed @types/react@latest, @types/react@^17.0.0 etc.

In a future major we'll drop the global namespace.

Potential breaking changes

If you added a JSX namespace to module "react" you need to make sure this augmentation passes declaration merging i.e. just adds properties to the JSX namespace.

declare module "react" {
  namespace JSX {
    // These augmentations need to be mergable with the global JSX namespace
    // This was always an implicit requirement
  } 
}

We don't consider these breaking changes under SemVer i.e. don't warrant a major release.
Otherwise each interface or type we add to React would warrant a major release.

Closes #52321

TODO:

  • test in MUI
  • test internally
  • @Andarist review

@typescript-bot typescript-bot added this to Needs Author Action in New Pull Request Status Board Feb 23, 2023
@eps1lon eps1lon force-pushed the feat/react/scoped-jsx-andarist branch from 0e1d93a to 9da1d85 Compare March 26, 2023 16:17
@eps1lon eps1lon force-pushed the feat/react/scoped-jsx-andarist branch 2 times, most recently from b53ab5c to 6607992 Compare March 26, 2023 22:01
@eps1lon eps1lon changed the title Move React JSX namespace out of the global [react] Add JSX namespace to React namespace Mar 27, 2023
@eps1lon eps1lon force-pushed the feat/react/scoped-jsx-andarist branch 10 times, most recently from 27c0b47 to 0181198 Compare April 10, 2023 12:30
@DangerBotOSS
Copy link

DangerBotOSS commented Apr 10, 2023

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 3dea057

@eps1lon eps1lon marked this pull request as ready for review April 10, 2023 16:29
@typescript-bot
Copy link
Contributor

typescript-bot commented Apr 10, 2023

@eps1lon Thank you for submitting this PR!

This is a live comment which I will keep updated.

2 packages in this PR

Code Reviews

This PR can be merged once it's reviewed.

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

Status

  • ✅ No merge conflicts
  • ✅ Continuous integration tests have passed
  • 🕐 Type definition owners or DT maintainers needs to approve changes which affect more than one package

Once every item on this list is checked, I'll ask you for permission to merge and publish the changes.

Inactive

This PR has been inactive for 7 days.


Diagnostic Information: What the bot saw about this PR
{
  "type": "info",
  "now": "-",
  "pr_number": 64464,
  "author": "eps1lon",
  "headCommitOid": "3dea0576b786da0267a9a890926d86aa62aa435f",
  "mergeBaseOid": "1e4da9b225c67b2b14ecbcaf90da63c0a193f5d2",
  "lastPushDate": "2023-04-28T18:42:03.000Z",
  "lastActivityDate": "2023-05-06T11:15:12.000Z",
  "maintainerBlessed": "Waiting for Code Reviews",
  "hasMergeConflict": false,
  "isFirstContribution": false,
  "tooManyFiles": false,
  "hugeChange": false,
  "popularityLevel": "Critical",
  "pkgInfo": [
    {
      "name": "react-blessed",
      "kind": "edit",
      "files": [
        {
          "path": "types/react-blessed/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react-blessed/react-blessed-tests.tsx",
          "kind": "test"
        }
      ],
      "owners": [
        "guoshencheng",
        "defnotrobbie"
      ],
      "addedOwners": [],
      "deletedOwners": [],
      "popularityLevel": "Well-liked by everyone"
    },
    {
      "name": "react",
      "kind": "edit",
      "files": [
        {
          "path": "types/react/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/jsx-dev-runtime.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/jsx-runtime.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/test/tsx.tsx",
          "kind": "test"
        },
        {
          "path": "types/react/ts5.0/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/ts5.0/jsx-dev-runtime.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/ts5.0/jsx-runtime.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/ts5.0/test/tsx.tsx",
          "kind": "test"
        },
        {
          "path": "types/react/v15/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/v15/test/tsx.tsx",
          "kind": "test"
        },
        {
          "path": "types/react/v16/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/v16/test/tsx.tsx",
          "kind": "test"
        },
        {
          "path": "types/react/v17/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/react/v17/test/tsx.tsx",
          "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",
        "Semigradsky"
      ],
      "addedOwners": [],
      "deletedOwners": [],
      "popularityLevel": "Critical"
    }
  ],
  "reviews": [
    {
      "type": "approved",
      "reviewer": "Andarist",
      "date": "2023-05-06T11:15:12.000Z",
      "isMaintainer": false
    }
  ],
  "mainBotCommentID": 1502029944,
  "ciResult": "pass"
}

@typescript-bot typescript-bot moved this from Needs Author Action to Needs Maintainer Review in New Pull Request Status Board Apr 10, 2023
@typescript-bot
Copy link
Contributor

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

react-blessed relied on a scoped namespace not existing. It wasn't actually using module augmentation. The changes are required to make it work with actual module augmentation since React now has a scoped JSX namespace

@RyanCavanaugh RyanCavanaugh moved this from Needs Maintainer Review to Waiting for Code Reviews in New Pull Request Status Board Apr 19, 2023
@typescript-bot typescript-bot added the Unreviewed No one showed up to review this PR, so it'll be reviewed by a DT maintainer. label Apr 21, 2023
@typescript-bot
Copy link
Contributor

Re-ping @guoshencheng, @defnotrobbie, @johnnyreilly, @bbenezech, @pzavolinsky, @ericanderson, @DovydasNavickas, @theruther4d, @guilhermehubner, @ferdaber, @jrakotoharisoa, @pascaloliv, @Hotell, @franklixuefei, @Jessidhia, @saranshkataria, @lukyth, @zieka, @dancerphil, @dimitropoulos, @disjukr, @vhfmag, @hellatan, @priyanshurav, @Semigradsky:

This PR has been out for over a week, yet I haven't seen any reviews.

Could someone please give it some attention? Thanks!

@eps1lon eps1lon force-pushed the feat/react/scoped-jsx-andarist branch from 0181198 to d6b72cf Compare April 26, 2023 07:15
typescript-bot pushed a commit that referenced this pull request Dec 6, 2023
…global JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 6, 2023
…global JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 6, 2023
…eact's global JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 6, 2023
… React's global JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 6, 2023
…lobal JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 6, 2023
typescript-bot pushed a commit that referenced this pull request Dec 6, 2023
typescript-bot pushed a commit that referenced this pull request Dec 6, 2023
… JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 6, 2023
typescript-bot pushed a commit that referenced this pull request Dec 15, 2023
typescript-bot pushed a commit that referenced this pull request Dec 15, 2023
…bal JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 15, 2023
…obal JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 15, 2023
…lobal JSX namespace with scoped JSX by @eps1lon

* [simple-react-clipboard] Replace usage of React's global JSX namespace with scoped JSX
Was deprecated in #64464

* Test and install same diff

* Discard changes to scripts/pnpm-install.sh
typescript-bot pushed a commit that referenced this pull request Dec 17, 2023
typescript-bot pushed a commit that referenced this pull request Dec 26, 2023
typescript-bot pushed a commit that referenced this pull request Dec 26, 2023
typescript-bot pushed a commit that referenced this pull request Dec 26, 2023
typescript-bot pushed a commit that referenced this pull request Dec 26, 2023
typescript-bot pushed a commit that referenced this pull request Dec 27, 2023
…bal JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 27, 2023
typescript-bot pushed a commit that referenced this pull request Dec 27, 2023
…eact's global JSX namespace with scoped JSX by @eps1lon

Was deprecated in #64464
typescript-bot pushed a commit that referenced this pull request Dec 27, 2023
typescript-bot pushed a commit that referenced this pull request Dec 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Critical package Edits multiple packages Other Approved This PR was reviewed and signed-off by a community member.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Avoid making React JSX types global, to play well with other JSX frameworks.
5 participants