From 4ff64ba818d15a094547f845ea294c2e1ab208d4 Mon Sep 17 00:00:00 2001 From: shadcn Date: Sun, 3 Nov 2024 12:12:41 +0400 Subject: [PATCH] feat: remove npm flags (#5686) * docs: update status table and docs * feat(shadcn): remove react-19 check * chore: add changeset --- .changeset/kind-suits-wait.md | 5 ++ apps/www/content/docs/components/chart.mdx | 54 ++++++++++++++----- apps/www/content/docs/react-19.mdx | 6 ++- .../src/utils/updaters/update-dependencies.ts | 45 +--------------- 4 files changed, 52 insertions(+), 58 deletions(-) create mode 100644 .changeset/kind-suits-wait.md diff --git a/.changeset/kind-suits-wait.md b/.changeset/kind-suits-wait.md new file mode 100644 index 00000000000..cab01c1b92b --- /dev/null +++ b/.changeset/kind-suits-wait.md @@ -0,0 +1,5 @@ +--- +"shadcn": patch +--- + +remove flag for npm diff --git a/apps/www/content/docs/components/chart.mdx b/apps/www/content/docs/components/chart.mdx index 9566275e48b..907625729b9 100644 --- a/apps/www/content/docs/components/chart.mdx +++ b/apps/www/content/docs/components/chart.mdx @@ -4,12 +4,6 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap component: true --- - - -**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts). - - - - -**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts). - - - @@ -95,6 +83,27 @@ npx shadcn@latest add chart } ``` + + To use recharts with React 19 and Next.js 15, you will need to override the + `react-is` dependency.{" "} + + +Add the following to your `package.json` + +```json title="package.json" +"overrides": { + "react-is": "^19.0.0-rc-69d4b800-20241021" +} +``` + +Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example. + +Run `npm install` + +```bash +npm install +``` + @@ -135,6 +144,27 @@ npm install recharts } ``` + + To use recharts with React 19 and Next.js 15, you will need to override the + `react-is` dependency.{" "} + + +Add the following to your `package.json` + +```json title="package.json" +"overrides": { + "react-is": "^19.0.0-rc-69d4b800-20241021" +} +``` + +Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example. + +Run `npm install` + +```bash +npm install +``` + diff --git a/apps/www/content/docs/react-19.mdx b/apps/www/content/docs/react-19.mdx index 4ba6a5ec8b9..2f15ef52270 100644 --- a/apps/www/content/docs/react-19.mdx +++ b/apps/www/content/docs/react-19.mdx @@ -3,7 +3,9 @@ title: Next.js 15 + React 19 description: Using shadcn/ui with Next.js 15 and React 19. --- - +**shadcn/ui is now fully compatible with React 19!** + + **The following guide applies to any framework that supports React 19**. I titled this page "Next.js 15 + React 19" to help people upgrading to Next.js 15 find it. We are working with package maintainers to help upgrade to React @@ -143,7 +145,7 @@ To make it easy for you track the progress of the upgrade, I've created a table | [input-otp](https://www.npmjs.com/package/input-otp) | ✅ | | | [vaul](https://www.npmjs.com/package/vaul) | ✅ | | | [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons) | ✅ | | -| [cmdk](https://www.npmjs.com/package/cmdk) | 🚧 | See [PR #318](https://github.com/pacocoursey/cmdk/pull/318) | +| [cmdk](https://www.npmjs.com/package/cmdk) | ✅ | | If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub. diff --git a/packages/shadcn/src/utils/updaters/update-dependencies.ts b/packages/shadcn/src/utils/updaters/update-dependencies.ts index ad3c1af5abd..8eb53a0937a 100644 --- a/packages/shadcn/src/utils/updaters/update-dependencies.ts +++ b/packages/shadcn/src/utils/updaters/update-dependencies.ts @@ -1,11 +1,8 @@ import { Config } from "@/src/utils/get-config" -import { getPackageInfo } from "@/src/utils/get-package-info" import { getPackageManager } from "@/src/utils/get-package-manager" -import { logger } from "@/src/utils/logger" import { RegistryItem } from "@/src/utils/registry/schema" import { spinner } from "@/src/utils/spinner" import { execa } from "execa" -import prompts from "prompts" export async function updateDependencies( dependencies: RegistryItem["dependencies"], @@ -29,52 +26,12 @@ export async function updateDependencies( })?.start() const packageManager = await getPackageManager(config.resolvedPaths.cwd) - // Offer to use --force or --legacy-peer-deps if using React 19 with npm. - let flag = "" - if (isUsingReact19(config) && packageManager === "npm") { - dependenciesSpinner.stopAndPersist() - logger.warn( - "\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).\n" - ) - const confirmation = await prompts([ - { - type: "select", - name: "flag", - message: "How would you like to proceed?", - choices: [ - { title: "Use --force", value: "force" }, - { title: "Use --legacy-peer-deps", value: "legacy-peer-deps" }, - ], - }, - ]) - - if (confirmation) { - flag = confirmation.flag - } - } - - dependenciesSpinner?.start() - await execa( packageManager, - [ - packageManager === "npm" ? "install" : "add", - ...(packageManager === "npm" && flag ? [`--${flag}`] : []), - ...dependencies, - ], + [packageManager === "npm" ? "install" : "add", ...dependencies], { cwd: config.resolvedPaths.cwd, } ) dependenciesSpinner?.succeed() } - -function isUsingReact19(config: Config) { - const packageInfo = getPackageInfo(config.resolvedPaths.cwd) - - if (!packageInfo?.dependencies?.react) { - return false - } - - return /^(?:\^|~)?19(?:\.\d+)*(?:-.*)?$/.test(packageInfo.dependencies.react) -}