chore(deps): update dependency @vitejs/plugin-react to v4

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@vitejs/plugin-react (source)	3.0.1 -> 4.3.0

---

Release Notes

vitejs/vite-plugin-react (@​vitejs/plugin-react)

v4.3.0

Compare Source

Fix support for React compiler

Don't set retainLines: true when the React compiler is used. This creates whitespace issues and the compiler is modifying the JSX too much to get correct line numbers after that. If you want to use the React compiler and get back correct line numbers for tools like vite-plugin-react-click-to-component to work, you should update your config to something like:

export default defineConfig(({ command }) => {
  const babelPlugins = [['babel-plugin-react-compiler', {}]]
  if (command === 'serve') {
    babelPlugins.push(['@​babel/plugin-transform-react-jsx-development', {}])
  }

  return {
    plugins: [react({ babel: { plugins: babelPlugins } })],
  }
})

Support HMR for class components

This is a long overdue and should fix some issues people had with HMR when migrating from CRA.

v4.2.1

Compare Source

Remove generic parameter on Plugin to avoid type error with Rollup 4/Vite 5 and skipLibCheck: false.

I expect very few people to currently use this feature, but if you are extending the React plugin via api object, you can get back the typing of the hook by importing ViteReactPluginApi:

import type { Plugin } from 'vite'
import type { ViteReactPluginApi } from '@​vitejs/plugin-react'

export const somePlugin: Plugin = {
  name: 'some-plugin',
  api: {
    reactBabel: (babelConfig) => {
      babelConfig.plugins.push('some-babel-plugin')
    },
  } satisfies ViteReactPluginApi,
}

v4.2.0

Compare Source

Update peer dependency range to target Vite 5

There were no breaking change that impacted this plugin, so any combination of React plugins and Vite core version will work.

Align jsx runtime for optimized dependencies

This will only affect people using internal libraries that contains untranspiled JSX. This change aligns the optimizer with the source code and avoid issues when the published source don't have React in the scope.

Reminder: While being partially supported in Vite, publishing TS & JSX outside of internal libraries is highly discouraged.

v4.1.1

Compare Source

• Enable retainLines to get correct line numbers for jsxDev (fix #​235)

v4.1.0

Compare Source

• Add @types/babel__cores to dependencies (fix #​211)
• Improve build perf when not using Babel plugins by lazy loading @babel/core #​212
• Better invalidation message when an export is added & fix HMR for export of nullish values #​215
• Include non-dev jsx runtime in optimizeDeps & support HMR for JS files using the non dev runtime #​224
• The build output now contains a index.d.cts file so you don't get types errors when setting moduleResolution to node16 or nodenext in your tsconfig (we recommend using bundler which is more close to how Vite works)

v4.0.4

Compare Source

• Fix #​198: Enable Babel if presets list is not empty

v4.0.3

Compare Source

• Revert #​108: Remove throw when refresh runtime is loaded twice to enable usage in micro frontend apps. This was added to help fix setup usage, and this is not worth an annoying warning for others or a config parameter.

v4.0.2

Compare Source

• Fix fast-refresh for files that are transformed into jsx (#​188)

v4.0.1

Compare Source

• Support Vitest deps.experimentalOptimizer
• Support using components inside web workers (#​181)

v4.0.0

Compare Source

This major version include a revamp of options:

• include/exclude now allow to completely override the files processed by the plugin (#​122). This is more in line with other Rollup/Vite plugins and simplify the setup of enabling Fast Refresh for .mdx files. This can be done like this:

export default defineConfig({
  plugins: [
    { enforce: 'pre', ...mdx() },
    react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
  ],
})

These changes also allow to apply Babel plugins on files outside Vite root (expect in node_modules), which improve support for monorepo (fix #​16).

With these changes, only the file extensions is used for filtering processed files and the query param fallback is removed.

• fastRefresh is removed (#​122). This should be correctly activated by plugin without configuration.
• jsxPure is removed. This is a niche use case that was just passing down the boolean to esbuild.jsxSideEffects. (#​129)

The support for React auto import whe using classic runtime is removed. This was prone to errors and added complexity for no good reason given the very wide support of automatic runtime nowadays. This migration path should be as simple as removing the runtime option from the config.

This release goes in hand with the upcoming Vite 4.3 release focusing on performances:

• Cache plugin load (#​141)
• Wrap dynamic import to speedup analysis (#​143)

Other notable changes:

• Silence "use client" warning (#​144, fix #​137)
• Fast Refresh is applied on JS files using automatic runtime (#​122, fix #​83)
• Vite 4.2 is required as a peer dependency (#​128)
• Avoid key collision in React refresh registration (a74dfef, fix #​116)
• Throw when refresh runtime is loaded twice (#​108, fix #​101)
• Don't force optimization of jsx-runtime (#​132)

v3.1.0

Compare Source

• doc: add jsxImportSource option (38d71f6)
• chore: bump release-scripts, typecheck package in CI, remove cache for eslint (9af763d)
• fix: fast-refresh explain link (#​97) (6097795), closes #​97

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
typechain-demo-app	❌ Failed (Inspect)			May 22, 2024 7:39pm
typechain-ethers-app	❌ Failed (Inspect)			May 22, 2024 7:39pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: 800675b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@babel/helper-plugin-utils@7.24.5	None	0	130 kB	nicolo-ribaudo
npm/@vitejs/plugin-react@4.3.0	Transitive: environment, filesystem, unsafe	+35	8.12 MB
npm/node-releases@2.0.14	None	0	34 kB	chicoxyzzy
npm/update-browserslist-db@1.0.13	filesystem, shell Transitive: environment	+2	30.9 kB	ai

🚮 Removed packages: npm/@babel/helper-plugin-utils@7.20.2, npm/@types/send@0.17.4, npm/@vitejs/plugin-react@3.0.1, npm/define-data-property@1.1.1, npm/node-releases@2.0.8, npm/set-function-length@1.1.1, npm/undici-types@5.26.5, npm/update-browserslist-db@1.0.10

View full report↗︎

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 5 minutes (more than 100, code: "api-deployments-free-per-day").

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 9 minutes (more than 100, code: "api-deployments-free-per-day").

[coderabbitai]

Important

Review Skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.