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

feat: remove npm flags #5686

Merged
merged 3 commits into from
Nov 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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)
}
Loading