Skip to content

Commit

Permalink
feat: remove npm flags (shadcn-ui#5686)
Browse files Browse the repository at this point in the history
* docs: update status table and docs

* feat(shadcn): remove react-19 check

* chore: add changeset
  • Loading branch information
shadcn authored Nov 3, 2024
1 parent 3f2da3b commit 550953d
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 58 deletions.
5 changes: 5 additions & 0 deletions .changeset/kind-suits-wait.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"shadcn": patch
---

remove flag for npm
54 changes: 42 additions & 12 deletions apps/www/content/docs/components/chart.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,6 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap
component: true
---

<Callout className="mb-6">

**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).

</Callout>

<ComponentPreview
name="chart-bar-interactive"
className="-mt-4 [&_.preview]:p-0 [&_.preview]:border-t [&_.preview>div]:shadow-none [&_.preview>div]:border-none [&_.preview>div]:w-full [&_.preview]:lg:min-h-[404px]"
Expand Down Expand Up @@ -51,12 +45,6 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When

## Installation

<Callout className="mt-4">

**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).

</Callout>

<Tabs defaultValue="cli">

<TabsList>
Expand Down Expand Up @@ -95,6 +83,27 @@ npx shadcn@latest add chart
}
```

<Step>
To use recharts with React 19 and Next.js 15, you will need to override the
`react-is` dependency.{" "}
</Step>

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.

<Step>Run `npm install`</Step>

```bash
npm install
```

</Steps>

</TabsContent>
Expand Down Expand Up @@ -135,6 +144,27 @@ npm install recharts
}
```

<Step>
To use recharts with React 19 and Next.js 15, you will need to override the
`react-is` dependency.{" "}
</Step>

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.

<Step>Run `npm install`</Step>

```bash
npm install
```

</Steps>

</TabsContent>
Expand Down
6 changes: 4 additions & 2 deletions apps/www/content/docs/react-19.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ title: Next.js 15 + React 19
description: Using shadcn/ui with Next.js 15 and React 19.
---

<Callout>
**shadcn/ui is now fully compatible with React 19!**

<Callout className="mt-6">
**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
Expand Down Expand Up @@ -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.

Expand Down
45 changes: 1 addition & 44 deletions packages/shadcn/src/utils/updaters/update-dependencies.ts
Original file line number Diff line number Diff line change
@@ -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"],
Expand All @@ -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)
}

0 comments on commit 550953d

Please sign in to comment.