这是indexloc提供的服务，不要输入任何密码
Skip to content

docs: list pnpm as first package manager #10293

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Apr 7, 2025
Merged

docs: list pnpm as first package manager #10293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a9b91d
docs: list pnpm as first package manager
anthonyshew Apr 5, 2025
e449154
WIP 2d75f
anthonyshew Apr 5, 2025
9289edc
WIP 759bf
anthonyshew Apr 5, 2025
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
27 changes: 23 additions & 4 deletions docs/site/components/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,16 @@ export function Tabs({
);
}

const packageManagers = ["pnpm", "yarn", "npm"];

const checkPackageManagerIndex = (index: number, provided: string) => {
if (provided !== packageManagers[index]) {
throw new Error(
`Package manager at index ${index} must be ${packageManagers[index]}.`
);
}
};

/** Use <Tab /> component to create the tabs. They will automatically be assigned their values in the order ["npm", "yarn", "pnpm"]. */
export function PackageManagerTabs({
storageKey = "package-manager-tabs",
Expand All @@ -31,17 +41,26 @@ export function PackageManagerTabs({
storageKey?: string;
children: ReactNode;
}): JSX.Element {
const items = ["npm", "yarn", "pnpm"];

if (!Array.isArray(children)) {
throw new Error("Children must be an array.");
}

children.forEach((packageManager, index) => {
if (!packageManager.props.value) {
throw new Error(`Package manager tab is missing a value.`);
}

checkPackageManagerIndex(index, packageManager.props.value);
});

return (
<FumaTabs id={storageKey} items={items} {...props}>
<FumaTabs id={storageKey} items={packageManagers} {...props}>
{children.map((child, index) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment
return { ...child, props: { ...child.props, value: items[index] } };
return {
...child,
props: { ...child.props, value: packageManagers[index] },
};
})}
</FumaTabs>
);
Expand Down
11 changes: 6 additions & 5 deletions docs/site/content/repo-docs/core-concepts/internal-packages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,18 @@ Internal Packages are libraries whose source code is inside your Workspace. You
Internal Packages are used in your repository by installing them in `package.json` similar to an external package coming from the npm registry. However, instead of marking a version to install, you can reference the package using your package manager's workspace installation syntax:

<PackageManagerTabs>
<Tab>

<Tab value="pnpm">
```json title="./apps/web/package.json"
{
"dependencies": {
"@repo/ui": "*" // [!code highlight]
"@repo/ui": "workspace:*" // [!code highlight]
}
}
```
</Tab>

<Tab>
<Tab value="yarn">
```json title="./apps/web/package.json"
{
"dependencies": {
Expand All @@ -30,11 +31,11 @@ Internal Packages are used in your repository by installing them in `package.jso
```
</Tab>

<Tab>
<Tab value="npm">
```json title="./apps/web/package.json"
{
"dependencies": {
"@repo/ui": "workspace:*" // [!code highlight]
"@repo/ui": "*" // [!code highlight]
}
}
```
Expand Down
11 changes: 6 additions & 5 deletions docs/site/content/repo-docs/core-concepts/remote-caching.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,26 +89,27 @@ turbo login
You can also use your package manager if you do not have [global `turbo`](/docs/getting-started/installation#global-installation) installed:

<PackageManagerTabs>
<Tab>

<Tab value="pnpm">

```bash title="Terminal"
npx turbo login
pnpm dlx turbo login
```

</Tab>

<Tab>
<Tab value="yarn">

```bash title="Terminal"
yarn dlx turbo login
```

</Tab>

<Tab>
<Tab value="npm">

```bash title="Terminal"
pnpm dlx turbo login
npx turbo login
```

</Tab>
Expand Down
14 changes: 9 additions & 5 deletions docs/site/content/repo-docs/crafting-your-repository/caching.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,27 @@ If you have [`turbo` installed globally](/docs/getting-started/installation#glob
Alternatively, you can run the `build` script in `package.json` using your package manager.

<PackageManagerTabs>
<Tab>

<Tab value="pnpm">
```bash title="Terminal"
npm run build
pnpm run build
```

</Tab>
<Tab>

<Tab value="yarn">
```bash title="Terminal"
yarn build
```

</Tab>
<Tab>

<Tab value="npm">

```bash title="Terminal"
pnpm run build
npm run build
```

</Tab>
</PackageManagerTabs>

Expand Down
32 changes: 19 additions & 13 deletions ...ite/content/repo-docs/crafting-your-repository/creating-an-internal-package.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ You'll need a directory to put the package in. Let's create one at `./packages/m
Next, create the `package.json` for the package. By adding this file, you'll fulfill [the two requirements for an Internal Package](/docs/crafting-your-repository/structuring-a-repository#specifying-packages-in-a-monorepo), making it discoverable to Turborepo and the rest of your Workspace:

<PackageManagerTabs>
<Tab>

<Tab value="pnpm">
```json title="./packages/math/package.json"
{
"name": "@repo/math",
Expand All @@ -65,14 +66,14 @@ Next, create the `package.json` for the package. By adding this file, you'll ful
}
},
"devDependencies": {
"@repo/typescript-config": "*",
"@repo/typescript-config": "workspace:*",
"typescript": "latest"
}
}
````

```
</Tab>
<Tab>

<Tab value="yarn">
```json title="./packages/math/package.json"
{
"name": "@repo/math",
Expand All @@ -98,7 +99,8 @@ Next, create the `package.json` for the package. By adding this file, you'll ful
}
```
</Tab>
<Tab>

<Tab value="npm">
```json title="./packages/math/package.json"
{
"name": "@repo/math",
Expand All @@ -118,11 +120,12 @@ Next, create the `package.json` for the package. By adding this file, you'll ful
}
},
"devDependencies": {
"@repo/typescript-config": "workspace:*",
"@repo/typescript-config": "*",
"typescript": "latest"
}
}
```
````

</Tab>
</PackageManagerTabs>

Expand Down Expand Up @@ -201,17 +204,19 @@ These files map to the outputs that will be created by `tsc` when you run `turbo
You're ready to use your new package in an application. Let's add it to the `web` application.

<PackageManagerTabs>
<Tab>

<Tab value="pnpm">
```diff title="apps/web/package.json"
"dependencies": {
+ "@repo/math": "*",
+ "@repo/math": "workspace:*",
"next": "latest",
"react": "latest",
"react-dom": "latest"
},
```
</Tab>
<Tab>

<Tab value="yarn">
```diff title="apps/web/package.json"
"dependencies": {
+ "@repo/math": "*",
Expand All @@ -221,10 +226,11 @@ You're ready to use your new package in an application. Let's add it to the `web
},
```
</Tab>
<Tab>

<Tab value="npm">
```diff title="apps/web/package.json"
"dependencies": {
+ "@repo/math": "workspace:*",
+ "@repo/math": "*",
"next": "latest",
"react": "latest",
"react-dom": "latest"
Expand Down
43 changes: 24 additions & 19 deletions docs/site/content/repo-docs/crafting-your-repository/managing-dependencies.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,19 @@ import { LinkToDocumentation } from '#/components/link-to-documentation';
- **Internal dependencies** let you share functionality within your repository, dramatically improving discoverability and usability of shared code. We will discuss how to build an Internal Package in [the next guide](/docs/crafting-your-repository/creating-an-internal-package).

<PackageManagerTabs>
<Tab>

<Tab value="pnpm">
```json title="./apps/web/package.json"
{
"dependencies": {
"next": "latest", // External dependency
"@repo/ui": "*" // Internal dependency
"@repo/ui": "workspace:*" // Internal dependency
}
}
```
</Tab>
<Tab>

<Tab value="yarn">
```json title="./apps/web/package.json"
{
"dependencies": {
Expand All @@ -31,12 +33,13 @@ import { LinkToDocumentation } from '#/components/link-to-documentation';
}
```
</Tab>
<Tab>

<Tab value="npm">
```json title="./apps/web/package.json"
{
"dependencies": {
"next": "latest", // External dependency
"@repo/ui": "workspace:*" // Internal dependency
"@repo/ui": "*" // Internal dependency
}
}
```
Expand All @@ -57,16 +60,17 @@ When you install a dependency in your repository, you should install it directly
To quickly install dependencies in multiple packages, you can use your package manager:

<PackageManagerTabs>
<Tab>

<Tab value="pnpm">

```bash title="Terminal"
npm install jest --workspace=web --workspace=@repo/ui --save-dev
pnpm install jest --save-dev --recursive --filter=web --filter=@repo/ui --filter=@repo/web
```

<LinkToDocumentation href="https://docs.npmjs.com/cli/v7/using-npm/config#workspace">npm documentation</LinkToDocumentation>
<LinkToDocumentation href="https://pnpm.io/cli/recursive">pnpm documentation</LinkToDocumentation>
</Tab>

<Tab>
<Tab value="yarn">
Yarn 1:

```bash title="Terminal"
Expand All @@ -89,13 +93,13 @@ yarn workspaces foreach -R --from '{web,@repo/ui}' add jest --dev
</LinkToDocumentation>
</Tab>

<Tab>
<Tab value="npm">

```bash title="Terminal"
pnpm install jest --save-dev --recursive --filter=web --filter=@repo/ui --filter=@repo/web
npm install jest --workspace=web --workspace=@repo/ui --save-dev
```

<LinkToDocumentation href="https://pnpm.io/cli/recursive">pnpm documentation</LinkToDocumentation>
<LinkToDocumentation href="https://docs.npmjs.com/cli/v7/using-npm/config#workspace">npm documentation</LinkToDocumentation>
</Tab>
</PackageManagerTabs>

Expand Down Expand Up @@ -154,15 +158,16 @@ Tools like [`syncpack`](https://www.npmjs.com/package/syncpack), [`manypkg`](htt
You can use your package manager to update dependency versions in one command.

<PackageManagerTabs>
<Tab>

<Tab value="pnpm">
```bash title="Terminal"
npm install typescript@latest --workspaces
pnpm up --recursive typescript@latest
```
<small>[→ npm documentation](https://docs.npmjs.com/cli/v7/using-npm/config#workspaces)</small>
<small>[→ pnpm documentation](https://pnpm.io/cli/update#--recursive--r)</small>

</Tab>

<Tab>
<Tab value="yarn">
Yarn 1:
```bash title="Terminal"
yarn upgrade-interactive --latest
Expand All @@ -179,11 +184,11 @@ yarn upgrade typescript@latest --upgrade

</Tab>

<Tab>
<Tab value="npm">
```bash title="Terminal"
pnpm up --recursive typescript@latest
npm install typescript@latest --workspaces
```
<small>[→ pnpm documentation](https://pnpm.io/cli/update#--recursive--r)</small>
<small>[→ npm documentation](https://docs.npmjs.com/cli/v7/using-npm/config#workspaces)</small>

</Tab>
</PackageManagerTabs>
Expand Down
22 changes: 13 additions & 9 deletions docs/site/content/repo-docs/crafting-your-repository/running-tasks.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,24 +40,28 @@ For tasks that you run frequently, you can write your `turbo` commands directly
These scripts can then be run using your package manager.

<PackageManagerTabs>
<Tab>

```bash title="Terminal"
npm run dev
```
<Tab value="pnpm">
```bash title="Terminal"
pnpm dev
```

</Tab>
<Tab>

<Tab value="yarn">

```bash title="Terminal"
yarn dev
```

</Tab>
<Tab>
```bash title="Terminal"
pnpm dev
```

<Tab value="npm">

```bash title="Terminal"
npm run dev
```

</Tab>
</PackageManagerTabs>

Expand Down
Loading
Loading