feat(cli): Use and recommend pnpm instead of yarn (#3016)

robinheinze · web-flow · commit 2acacd304ef4 · 2025-12-17T09:02:35.000-08:00
* wip: pnpm default

* allow sharp to run scripts

* formatting fixes

* upgrade circle ci node version

* force cache clean

* PR feedback

* add yes

* add back gitignore items, fix typos, remove yarn4 recommend

* shhhh linter
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -6,7 +6,7 @@
 defaults: &defaults
   docker:
     # Choose the version of Node you want here
-    - image: cimg/node:20.17.0
+    - image: cimg/node:20.19.4
   working_directory: /mnt/ramdisk/repo
 
 version: 2.1
@@ -33,12 +33,12 @@ jobs:
       - restore_cache:
           name: Restore node modules
           keys:
-            - v1-dependencies-{{ checksum "package.json" }}-{{ arch }}
+            - v2-dependencies-{{ checksum "package.json" }}-{{ arch }}
             # fallback to using the latest cache if no exact match is found
-            - v1-dependencies-
+            - v2-dependencies-
       - run:
           name: Install dependencies
-          command: yarn install
+          command: pnpm install
       - save_cache:
           name: Save node modules
           paths:
@@ -59,10 +59,10 @@ jobs:
           key: ignite-deps-cache-{{ .Environment.IGNITE_DEPS_PACKAGER }}-{{ checksum "boilerplate/package.json" }}-{{ arch }}-{{ .Environment.IGNITE_DEPS_KEY_SUFFIX }}
       - run:
           name: Run static tests
-          command: yarn format:check && yarn lint && yarn typecheck && yarn depcruise
+          command: pnpm run format:check && pnpm run lint && pnpm run typecheck && pnpm run depcruise
       - run:
           name: Run jest tests
-          command: yarn test
+          command: pnpm run test
           no_output_timeout: 10m
       - save_cache:
           name: Save ignite dependency cache
@@ -83,11 +83,11 @@ jobs:
             - v1-dependencies-
       - run:
           name: Build package
-          command: yarn build
+          command: pnpm run build
       # Run semantic-release after all the above is set.
       - run:
           name: Publish to npm
-          command: yarn ci:publish # this will be added to your package.json scripts
+          command: pnpm run ci:publish # this will be added to your package.json scripts
 
 # Publishing docs details
 publish-details: &publish-details
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -4,26 +4,26 @@ We welcome all contributors to Ignite CLI! This contributing guide will help you
 
 Before submitting a pull request, you will want to make sure that your branch meets the following requirements:
 
-_Working on Ignite CLI requires Yarn v1._
+\_Working on Ignite CLI requires pnpm 10.9.0
 
 - Everything works on iOS/Android
-- Jest tests pass in the root folder (`yarn test`)
+- Jest tests pass in the root folder (`pnpm run test`)
 - New tests are included for any new functionality
-- Code is compliant with our linter and prettier (`yarn format:write && yarn lint`)
+- Code is compliant with our linter and prettier (`pnpm run format:write && pnpm run lint`)
 - Branch has already been [synced with the upstream repo](https://help.github.com/articles/syncing-a-fork/) and any merge-conflicts have been resolved.
 
 ## Requirements
 
 - Node (reasonably recent version)
-- Yarn (while you can use Ignite CLI without Yarn, we require it for contributors)
+- pnpm (while you can use Ignite CLI without pnpm, we require it for contributors)
 
 ## Getting Started
 
 1. Fork and then clone the repo (`git clone git@github.com:<YOURGITHUBUSER>/ignite.git`)
 2. CD into the directory (`cd ignite`)
-3. Uninstall npm version (`yarn global remove ignite-cli`)
-4. Pull all package dependencies (`yarn`)
-5. Link the local binary (`yarn link`)
+3. Uninstall npm version (`pnpm remove ignite-cli -g`)
+4. Pull all package dependencies (`pnpm install`)
+5. Link the local binary (`pnpm link`)
 
 Test it out:
 
@@ -56,11 +56,11 @@ We use Jest for testing.
 To run tests from the ignite folder:
 
 ```sh
-$ yarn test
+$ pnpm run test
 ```
 
 **To Run Lint** from ignite:
 
 ```sh
-$ yarn lint
+$ pnpm run lint
 ```
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,6 @@ yarn-error.log
 lerna-debug.log
 node_modules
 .vscode/*
-package-lock.json
 
 # TS build
 /build
@@ -20,6 +19,7 @@ coverage
 boilerplate/yarn.lock
 boilerplate/bun.lockb
 boilerplate/bun.lock
+boilerplate/pnpm-lock.yaml
 boilerplate/.gitignore.template
 
 # Test artifacts
@@ -43,6 +43,7 @@ test/artifacts/*
 .yarn/build-state.yml
 .yarn/install-state.gz
 
+
 # Dependency graph visualizations
 ignite-cli-dependency-graph.svg
 ignite-cli-dependency-graph.png
diff --git a/.yarn/releases/yarn-4.9.1.cjs b/.yarn/releases/yarn-4.9.1.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -3,3 +3,5 @@ enableGlobalCache: false
 nodeLinker: node-modules
 
 yarnPath: .yarn/releases/yarn-4.9.1.cjs
+
+enableScripts: false
diff --git a/boilerplate/.gitignore b/boilerplate/.gitignore
@@ -36,7 +36,6 @@ local.properties
 #
 node_modules/
 npm-debug.log
-yarn-error.log
 
 # BUCK
 buck-out/
@@ -88,14 +87,6 @@ web-build/
 
 /coverage
 
-# Yarn
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-
 # Dependency Graph Visualizations
 app-dependency-graph.svg
 app-dependency-graph.png
diff --git a/boilerplate/README.md b/boilerplate/README.md
@@ -10,19 +10,19 @@ This is the boilerplate that [Infinite Red](https://infinite.red) uses as a way
 ## Getting Started
 
 ```bash
-yarn
-yarn start
+pnpm run
+pnpm run start
 ```
 
 To make things work on your local simulator, or on your phone, you need first to [run `eas build`](https://github.com/infinitered/ignite/blob/master/docs/expo/EAS.md). We have many shortcuts on `package.json` to make it easier:
 
 ```bash
-yarn build:ios:sim # build for ios simulator
-yarn build:ios:device # build for ios device
-yarn build:ios:prod # build for ios device
+pnpm run build:ios:sim # build for ios simulator
+pnpm run build:ios:device # build for ios device
+pnpm run build:ios:prod # build for ios device
 ```
 
-### `./assets` directory
+### `./assets`
 
 This directory is designed to organize and store various assets, making it easy for you to manage and use them in your application. The assets are further categorized into subdirectories, including `icons` and `images`:
 
diff --git a/boilerplate/app/navigators/navigationTypes.ts b/boilerplate/app/navigators/navigationTypes.ts
@@ -34,5 +34,6 @@ export type DemoTabScreenProps<T extends keyof DemoTabParamList> = CompositeScre
   AppStackScreenProps<keyof AppStackParamList>
 >
 
-export interface NavigationProps
-  extends Partial<ComponentProps<typeof NavigationContainer<AppStackParamList>>> {}
+export interface NavigationProps extends Partial<
+  ComponentProps<typeof NavigationContainer<AppStackParamList>>
+> {}
diff --git a/docs/Guide.md b/docs/Guide.md
@@ -114,8 +114,6 @@ The react-native ecosystem moves quickly and sometimes, you may need to patch a
 Igniting an app allows you to choose `npm`, `yarn`, `pnpm`, or `bun` as a package manager, so we don't have configuration in the boilerplate for patches. If you find that you need to patch a library in your app, we recommend the following:
 
 - `npm` - use [`patch-package`](https://www.npmjs.com/package/patch-package).
-- `yarn@1` - use [`patch-package`](https://www.npmjs.com/package/patch-package).
-- `yarn@3` - use [`yarn patch` tool](https://v3.yarnpkg.com/features/protocols#patch).
 - `yarn@4` - use [`yarn patch` tool](https://yarnpkg.com/features/patching).
 - `pnpm` - use [`pnpm patch <package>`](https://pnpm.io/cli/patch).
 - `bun` - use [`bun patch <package>`](https://bun.sh/docs/install/patch).
diff --git a/docs/QuickStart.md b/docs/QuickStart.md
@@ -43,9 +43,9 @@ Once the app has been created, change to the project directory and fire it up vi
 # first
 cd MyFirstApp
 # then one of the following
-yarn run android
-yarn run ios
-yarn run web
+pnpm run android
+pnpm run ios
+pnpm run web
 ```
 
 Android and iOS will take a few moments to build depending on your machine's hardware.
@@ -60,9 +60,9 @@ Ignite uses EAS Build to make the proper binaries for App Store and Google Play
 
 ```bash
 # Running a local Android build
-yarn run build:android:prod
+pnpm run build:android:prod
 # or a local iOS build
-yarn build:ios:prod
+pnpm build:ios:prod
 ```
 
 Follow the instructions in your terminal upon running these commands. With a successful build you'll end up with binaries in the AAB or IPA format (depending on which platform you're building for). Those can be submitted to the appropriate app stores.
diff --git a/docs/boilerplate/android.md b/docs/boilerplate/android.md
@@ -5,7 +5,7 @@ sidebar_position: 5
 
 # `android`
 
-If you choose the `manual` workflow option when spinning up a new app (or you run `yarn prebuild:clean`) you'll get an `android` (and probably [`ios`](./ios.md)) folder in your project root. This folder contains your native Android / Android Studio project, which has been pre-configured to work with React Native.
+If you choose the `manual` workflow option when spinning up a new app (or you run `pnpm prebuild:clean`) you'll get an `android` (and probably [`ios`](./ios.md)) folder in your project root. This folder contains your native Android / Android Studio project, which has been pre-configured to work with React Native.
 
 We generally recommend using the [Expo CNG (continuous native generation)](../expo/CNG.md) workflow, but if you need to customize your native code manually, you can do so here.
 
diff --git a/docs/boilerplate/ios.md b/docs/boilerplate/ios.md
@@ -5,7 +5,7 @@ sidebar_position: 30
 
 # `ios` folder
 
-If you choose the `manual` workflow option when spinning up a new app (or you run `yarn prebuild:clean`) you'll get an `ios` (and probably [`android`](./android.md)) folder in your project root. This folder contains your native iOS / Xcode project, which has been pre-configured to work with React Native.
+If you choose the `manual` workflow option when spinning up a new app (or you run `pnpm run prebuild:clean`) you'll get an `ios` (and probably [`android`](./android.md)) folder in your project root. This folder contains your native iOS / Xcode project, which has been pre-configured to work with React Native.
 
 We generally recommend using the [Expo CNG (continuous native generation)](../expo/CNG.md) workflow, but if you need to customize your native code manually, you can do so here.
 
diff --git a/docs/boilerplate/maestro.md b/docs/boilerplate/maestro.md
@@ -16,7 +16,7 @@ maestro test .maestro/MyTestFile.yaml
 This command is also setup as a npm script in `package.json`, which you can customize to your liking:
 
 ```bash
-yarn run test:maestro
+pnpm run test:maestro
 ```
 
 You can learn how to run and create Maestro tests by following the [Ignite Cookbook Recipe](https://ignitecookbook.com/docs/recipes/MaestroSetup) or by visiting [Maestro's Documentation](https://maestro.mobile.dev/)
diff --git a/docs/cli/Troubleshooting.md b/docs/cli/Troubleshooting.md
@@ -26,4 +26,6 @@ You can uninstall previous versions of the cli with:
 npm uninstall --global ignite-cli
 # or
 yarn global remove ignite-cli
+#or
+pnpm remove ignite-cli -g
 ```
diff --git a/docs/concept/Generators.md b/docs/concept/Generators.md
@@ -51,24 +51,20 @@ This is a special kind of generator - "special" in that it modifies the native p
 The following files will be found in your templates folder (`ignite/templates/app-icon`) which can be customized:
 
 - `android-adaptive-background.png`:
-
   - The generator will use this file to create all required adaptive launcher-icon background layers for Android 8.0 and above.
   - Updates same directories as the legacy icon.
 
 - `android-adaptive-foreground.png`:
-
   - The generator will use this file to create all required adaptive launcher-icon foreground layers for Android 8.0 and above.
   - Updates same directories as the legacy icon.
 
 - `android-legacy.png`:
-
   - The generator will use this file to create all required legacy launcher-icons for Android 7.1 and below.
   - Automatically transforms the icon to add necessary padding and radius. Note, when creating your custom input file, do not include the padding or radius.
   - (vanilla) Updates `./android/app/src/main/res/` including the `mipmap-anydpi-v26/ic_launcher.xml`.
   - (expo) Updates `./assets/images/` including the root file `./app.json`.
 
 - `ios-universal.png`:
-
   - The generator will use this file to create all required app-icons for iOS.
   - (vanilla) Updates `./ios/**/Images.xcassets/AppIcon.appiconset/` including `Content.json`.
   - (expo) Updates `./assets/images/` including the root file `./app.json`.
diff --git a/docs/concept/Testing.md b/docs/concept/Testing.md
@@ -58,9 +58,9 @@ You can read more about how to best practices for creating tests in the [Structu
 
 To write your own tests, create a `.test.ts` file within the `app` or `test` directory.
 
-Then run `yarn test` to run all unit tests using Jest.
+Then run `pnpm run test` to run all unit tests using Jest.
 
-When writing tests, you can also run Jest in watch mode by running `yarn test:watch`. This will start a long running Jest process, that re-runs your tests on save in your editor. This is useful for iterating on values and getting quick feedback about whether your changes were successful or not.
+When writing tests, you can also run Jest in watch mode by running `pnpm run test:watch`. This will start a long running Jest process, that re-runs your tests on save in your editor. This is useful for iterating on values and getting quick feedback about whether your changes were successful or not.
 
 ### When to write Unit Tests
 
diff --git a/docs/contributing/Contributing-To-Ignite.md b/docs/contributing/Contributing-To-Ignite.md
@@ -22,7 +22,7 @@ node your-ignite-repo-clone/bin/ignite new PizzaApp
 node your-ignite-repo-clone/bin/ignite generate component OrderButton
 ```
 
-In addition, we have automated tests you can run with `yarn test`.
+In addition, we have automated tests you can run with `pnpm run test`.
 
 ### Making PRs
 
diff --git a/docs/contributing/Releasing-Ignite.md b/docs/contributing/Releasing-Ignite.md
@@ -75,8 +75,8 @@ Then run the author list command again to ensure you are listed.
 Run these commands from the Ignite root to clean & build the CLI:
 
 ```bash
-yarn clean
-yarn build
+pnpm run clean
+pnpm run build
 ```
 
 ### 3. Update the version manually
@@ -106,7 +106,7 @@ npm publish --tag=next
 
 This will publish a new version and set the @next tag to it. Note that `--tag=latest` is the same as not providing a tag and will publish as the main package version.
 
-Check that the size of the newly published package is on the order of 3MB or less. If it's much more than that, you forgot to run `yarn clean`.
+Check that the size of the newly published package is on the order of 3MB or less. If it's much more than that, you forgot to run `pnpm run clean`.
 
 ### 5. Test
 
diff --git a/docs/contributing/Tour-of-Ignite.md b/docs/contributing/Tour-of-Ignite.md
@@ -84,7 +84,7 @@ In the root is another folder called `boilerplate`. This used to be called `Igni
 
 However, we now include the boilerplate in the main CLI for convenience (as of version 6.0). We used to support multiple boilerplates with Ignite CLI, but that was a fairly underutilized feature, so this made sense for maintainability. You can read more here: https://shift.infinite.red/introducing-ignite-4-0-flame-1dfc891f9966.
 
-Inside the boilerplate is a functioning React Native app! That's right, you can actually _run_ the boilerplate app when you clone Ignite down to your machine. Just `cd` into the `boilerplate` folder, run `yarn` and `npx pod-install`, and then `npx react-native run-ios` or `npx react-native run-android`.
+Inside the boilerplate is a functioning React Native app! That's right, you can actually _run_ the boilerplate app when you clone Ignite down to your machine. Just `cd` into the `boilerplate` folder, run `pnpm install` and `npx pod-install`, and then `npx react-native run-ios` or `npx react-native run-android`.
 
 This is one of the best changes from the previous system, as you can now work on the boilerplate in realtime and not have to make changes, spin up a new app, test, repeat, which was such a slowwww process before.
 
diff --git a/docs/expo/Expo-and-Ignite.md b/docs/expo/Expo-and-Ignite.md
@@ -25,10 +25,10 @@ Now in version 10 (or Ignite X), we no longer support the option for the Expo Go
 
 ```
 # Spin up a new app
-npx ignite-cli new PizzaApp
+npx ignite-cli new PizzaApp --yes
 cd PizzaApp
-yarn ios
-yarn android
+pnpm run ios
+pnpm run android
 ```
 
 ### How it works
diff --git a/package.json b/package.json
@@ -25,20 +25,20 @@
   "scripts": {
     "compile": "tsc -p .",
     "typecheck": "tsc -p . --noEmit",
-    "build": "yarn clean && yarn compile && yarn build:assets",
+    "build": "pnpm run clean && pnpm run compile && pnpm run build:assets",
     "build:assets": "cp ./boilerplate/.gitignore ./boilerplate/.gitignore.template && cp ./src/assets/*.txt ./build/assets/",
-    "build:watch": "yarn build && yarn compile --watch",
+    "build:watch": "pnpm run build && pnpm run compile --watch",
     "format": "prettier '**/*{.js,.ts,.tsx,.json,.md}'",
-    "format:write": "yarn format --write",
-    "format:check": "yarn format --check",
+    "format:write": "pnpm run format --write",
+    "format:check": "pnpm run format --check",
     "lint": "eslint 'src/**' 'test/**'",
     "depcruise": "depcruise src --config .dependency-cruiser.js",
     "depcruise:graph": "depcruise src --include-only \"^src\" --config .dependency-cruiser.js --output-type dot | dot -T svg > ignite-cli-dependency-graph.svg && dot -T png ignite-cli-dependency-graph.svg -o ignite-cli-dependency-graph.png",
     "test": "TS_JEST_DISABLE_VER_CHECKER=true jest",
     "watch": "jest --watch",
-    "watch:debug": "yarn watch --runInBand --verbose",
+    "watch:debug": "pnpm run watch --runInBand --verbose",
     "coverage": "jest --coverage",
-    "ci:publish": "yarn build && yarn semantic-release && yarn clean",
+    "ci:publish": "pnpm run build && pnpm run semantic-release && pnpm run clean",
     "semantic-release": "semantic-release",
     "clean": "rm -drf ./build ./boilerplate/.gitignore.template ./boilerplate/node_modules ./boilerplate/ios/build/ ./boilerplate/ios/Pods/ ./boilerplate/android/app/build ./boilerplate/ios/.xcode.env.local",
     "ignite-cli:dev": "node bin/ignite",
@@ -96,5 +96,10 @@
       ]
     ]
   },
-  "packageManager": "yarn@4.9.1"
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp"
+    ]
+  },
+  "packageManager": "pnpm@10.9.0"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/commands/new.ts b/src/commands/new.ts
diff --git a/src/tools/packager.ts b/src/tools/packager.ts
diff --git a/src/tools/react-native.test.ts b/src/tools/react-native.test.ts
diff --git a/src/tools/react-native.ts b/src/tools/react-native.ts
diff --git a/test/vanilla/ignite-new.test.ts b/test/vanilla/ignite-new.test.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -34,5 +34,6 @@ export type DemoTabScreenProps<T extends keyof DemoTabParamList> = CompositeScre`
`34`	`34`	`AppStackScreenProps<keyof AppStackParamList>`
`35`	`35`	`>`
`36`	`36`
`37`		`-export interface NavigationProps`
`38`		`- extends Partial<ComponentProps<typeof NavigationContainer<AppStackParamList>>> {}`
	`37`	`+export interface NavigationProps extends Partial<`
	`38`	`+ ComponentProps<typeof NavigationContainer<AppStackParamList>>`
	`39`	`+> {}`