diff --git a/MIGRATION.md b/MIGRATION.md index 0b0475d293fe..32e98c598b26 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -18,6 +18,7 @@ - [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default) - [Babel mode v7 by default](#babel-mode-v7-by-default) - [7.0 feature flags removed](#70-feature-flags-removed) + - [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated) - [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically) - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters) @@ -522,6 +523,10 @@ In 7.0 we've removed the following feature flags: | `emotionAlias` | This flag is no longer needed and should be deleted. | | `breakingChangesV7` | This flag is no longer needed and should be deleted. | +#### CLI option `--use-npm` deprecated + +With increased support for more package managers (pnpm), we have introduced the `--package-manager` CLI option. Please use `--package-manager=npm` to force NPM to be used to install dependencies when running Storybook CLI commands. Other valid options are `pnpm`, `yarn1`, and `yarn2` (`yarn2` is for versions 2 and higher). + #### Vite builder uses vite config automatically When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0. diff --git a/code/lib/cli/README.md b/code/lib/cli/README.md index fd5d25472c48..0152be4e6aef 100644 --- a/code/lib/cli/README.md +++ b/code/lib/cli/README.md @@ -23,12 +23,26 @@ See the command-line help with `-h` for details. ## [Yarn](https://github.com/yarnpkg/yarn) support -The CLI supports yarn. If you have installed yarn in your system and your project has `yarn.lock` file, it'll detect it and use `yarn` instead of `npm`. +The CLI supports yarn. If you have installed yarn in your system and your project has a `yarn.lock` file, it'll detect it and use `yarn` to install dependencies. -If you don't want to use `yarn` always you can use the `--use-npm` option like this: +If you don't want to use `yarn` always you can use the `--package-manager` option like this: ```sh -npx sb init --use-npm +npx sb init --package-manager=npm +``` + +If you would like to force a particular version of yarn, you can use the `--package-manager` flag with a value of `yarn1` or `yarn2`. + +--- + +## [PNPM](https://pnpm.io/) support + +The CLI supports pnpm. If you have installed pnpm in your system and your project has a `pnpm-lock.yaml` file, it'll detect it and use `pnpm` to install dependencies. + +If you don't have a lock file and would like to force pnpm to be used, you can use the `--package-manager` option like this: + +```sh +npx sb init --package-manager=pnpm ``` --- diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 1984c5b7402a..c3c52a67c28c 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -71,7 +71,8 @@ "shelljs": "^0.8.5", "strip-json-comments": "^3.0.1", "ts-dedent": "^2.0.0", - "update-notifier": "^5.0.1" + "update-notifier": "^5.0.1", + "util-deprecate": "^1.0.2" }, "devDependencies": { "@storybook/client-api": "7.0.0-alpha.38", @@ -82,6 +83,7 @@ "@types/semver": "^7.3.4", "@types/shelljs": "^0.8.7", "@types/update-notifier": "^5.0.0", + "@types/util-deprecate": "^1.0.0", "strip-json-comments": "^3.1.1", "typescript": "~4.6.3", "update-notifier": "^5.0.1" diff --git a/code/lib/cli/src/add.ts b/code/lib/cli/src/add.ts index bd7b88246996..669ae857f90d 100644 --- a/code/lib/cli/src/add.ts +++ b/code/lib/cli/src/add.ts @@ -6,7 +6,11 @@ import { getStorybookInfo } from '@storybook/core-common'; import { readConfig, writeConfig } from '@storybook/csf-tools'; import { commandLog } from './helpers'; -import { JsPackageManagerFactory } from './js-package-manager'; +import { + JsPackageManagerFactory, + useNpmWarning, + type PackageManagerName, +} from './js-package-manager'; const logger = console; @@ -68,10 +72,13 @@ const getVersionSpecifier = (addon: string) => { */ export async function add( addon: string, - options: { useNpm: boolean; usePnpm: boolean; skipPostinstall: boolean } + options: { useNpm: boolean; packageManager: PackageManagerName; skipPostinstall: boolean } ) { - const { useNpm, usePnpm } = options; - const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, usePnpm }); + const { useNpm, packageManager: pkgMgr } = options; + if (useNpm) { + useNpmWarning(); + } + const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, force: pkgMgr }); const packageJson = packageManager.retrievePackageJson(); const [addonName, versionSpecifier] = getVersionSpecifier(addon); diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index 04f49483a6c6..23fe787cfe1e 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -2,7 +2,7 @@ import prompts from 'prompts'; import chalk from 'chalk'; import boxen from 'boxen'; -import { JsPackageManagerFactory } from '../js-package-manager'; +import { JsPackageManagerFactory, type PackageManagerName } from '../js-package-manager'; import { fixes, Fix } from './fixes'; @@ -13,11 +13,11 @@ interface FixOptions { yes?: boolean; dryRun?: boolean; useNpm?: boolean; - usePnpm?: boolean; + force?: PackageManagerName; } -export const automigrate = async ({ fixId, dryRun, yes, useNpm, usePnpm }: FixOptions = {}) => { - const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, usePnpm }); +export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOptions = {}) => { + const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, force }); const filtered = fixId ? fixes.filter((f) => f.id === fixId) : fixes; logger.info('🔎 checking possible migrations..'); diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index 0234791a9c4a..921cc8574d98 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -12,7 +12,7 @@ import { initiate } from './initiate'; import { add } from './add'; import { migrate } from './migrate'; import { extract } from './extract'; -import { upgrade } from './upgrade'; +import { upgrade, type UpgradeOptions } from './upgrade'; import { repro } from './repro'; import { reproNext } from './repro-next'; import { link } from './link'; @@ -39,9 +39,9 @@ program .description('Initialize Storybook into your project.') .option('-f --force', 'Force add Storybook') .option('-s --skip-install', 'Skip installing deps') - .option('-N --use-npm', 'Use npm to install deps') - .option('--use-pnpm', 'Use pnpm to install deps') - .option('--use-pnp', 'Enable pnp mode') + .option('--package-manager ', 'Force package manager for installing deps') + .option('-N --use-npm', 'Use npm to install deps (deprecated)') + .option('--use-pnp', 'Enable pnp mode for Yarn 2+') .option('-p --parser ', 'jscodeshift parser') .option('-t --type ', 'Add Storybook for a specific project type') .option('-y --yes', 'Answer yes to all prompts') @@ -57,10 +57,13 @@ program program .command('add ') .description('Add an addon to your Storybook') - .option('-N --use-npm', 'Use NPM to build the Storybook server') - .option('--use-pnpm', 'Use PNPM to build the Storybook server') + .option( + '--package-manager ', + 'Force package manager for installing dependencies' + ) + .option('-N --use-npm', 'Use NPM to install dependencies (deprecated)') .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications') - .action((addonName, options) => add(addonName, options)); + .action((addonName: string, options: any) => add(addonName, options)); program .command('babelrc') @@ -70,13 +73,16 @@ program program .command('upgrade') .description('Upgrade your Storybook packages to the latest') - .option('-N --use-npm', 'Use NPM to build the Storybook server') - .option('--use-pnpm', 'Use PNPM to build the Storybook server') + .option( + '--package-manager ', + 'Force package manager for installing dependencies' + ) + .option('-N --use-npm', 'Use NPM to install dependencies (deprecated)') .option('-y --yes', 'Skip prompting the user') .option('-n --dry-run', 'Only check for upgrades, do not install') .option('-p --prerelease', 'Upgrade to the pre-release packages') .option('-s --skip-check', 'Skip postinstall version and automigration checks') - .action((options) => upgrade(options)); + .action((options: UpgradeOptions) => upgrade(options)); program .command('info') @@ -181,8 +187,8 @@ program .description('Check storybook for known problems or migrations and apply fixes') .option('-y --yes', 'Skip prompting the user') .option('-n --dry-run', 'Only check for fixes, do not actually run them') - .option('-N --use-npm', 'Use npm as package manager') - .option('--use-pnpm', 'Use pnpm as package manager') + .option('--package-manager ', 'Force package manager') + .option('-N --use-npm', 'Use npm as package manager (deprecated)') .action((fixId, options) => automigrate({ fixId, ...options }).catch((e) => { logger.error(e); diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index 4f8abe421b07..d96729c0ceba 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -1,6 +1,6 @@ import { NpmOptions } from '../NpmOptions'; import { SupportedLanguage, Builder, ProjectType } from '../project_types'; -import { JsPackageManager } from '../js-package-manager/JsPackageManager'; +import { JsPackageManager, type PackageManagerName } from '../js-package-manager/JsPackageManager'; export type GeneratorOptions = { language: SupportedLanguage; @@ -31,8 +31,8 @@ export type Generator = ( ) => Promise; export type CommandOptions = { + packageManager: PackageManagerName; useNpm?: boolean; - usePnpm?: boolean; usePnp?: boolean; type?: ProjectType; force?: any; diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 006e4bb49678..cf6fb76ae0a9 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -25,7 +25,7 @@ import preactGenerator from './generators/PREACT'; import svelteGenerator from './generators/SVELTE'; import raxGenerator from './generators/RAX'; import serverGenerator from './generators/SERVER'; -import { JsPackageManagerFactory, JsPackageManager } from './js-package-manager'; +import { JsPackageManagerFactory, JsPackageManager, useNpmWarning } from './js-package-manager'; import { NpmOptions } from './NpmOptions'; import { automigrate } from './automigrate'; import { CommandOptions } from './generators/types'; @@ -251,8 +251,11 @@ const projectTypeInquirer = async ( }; export async function initiate(options: CommandOptions, pkg: Package): Promise { - const { useNpm, usePnpm } = options; - const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, usePnpm }); + const { useNpm, packageManager: pkgMgr } = options; + if (useNpm) { + useNpmWarning(); + } + const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, force: pkgMgr }); const welcomeMessage = 'storybook init - the simplest way to add a Storybook to your project.'; logger.log(chalk.inverse(`\n ${welcomeMessage} \n`)); @@ -308,7 +311,7 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise { ); }); + it('when `force` option is `npm`', () => { + expect(JsPackageManagerFactory.getPackageManager({ force: 'npm' })).toBeInstanceOf( + NPMProxy + ); + }); + it('when all package managers are ok, but only a `package-lock.json` file', () => { spawnSyncMock.mockImplementation((command) => { // Yarn is ok @@ -61,8 +67,8 @@ describe('JsPackageManagerFactory', () => { }); describe('return a PNPM proxy', () => { - it('when `usePnpm` option is used', () => { - expect(JsPackageManagerFactory.getPackageManager({ usePnpm: true })).toBeInstanceOf( + it('when `force` option is `pnpm`', () => { + expect(JsPackageManagerFactory.getPackageManager({ force: 'pnpm' })).toBeInstanceOf( PNPMProxy ); }); @@ -109,6 +115,12 @@ describe('JsPackageManagerFactory', () => { }); describe('return a Yarn 1 proxy', () => { + it('when `force` option is `yarn1`', () => { + expect(JsPackageManagerFactory.getPackageManager({ force: 'yarn1' })).toBeInstanceOf( + Yarn1Proxy + ); + }); + it('when Yarn command is ok, Yarn version is <2, NPM is ko, PNPM is ko', () => { spawnSyncMock.mockImplementation((command) => { // Yarn is ok @@ -181,6 +193,12 @@ describe('JsPackageManagerFactory', () => { }); describe('return a Yarn 2 proxy', () => { + it('when `force` option is `yarn2`', () => { + expect(JsPackageManagerFactory.getPackageManager({ force: 'yarn2' })).toBeInstanceOf( + Yarn2Proxy + ); + }); + it('when Yarn command is ok, Yarn version is >=2, NPM is ko, PNPM is ko', () => { spawnSyncMock.mockImplementation((command) => { // Yarn is ok diff --git a/code/lib/cli/src/js-package-manager/JsPackageManagerFactory.ts b/code/lib/cli/src/js-package-manager/JsPackageManagerFactory.ts index 473f251fb8c9..379e1cc24540 100644 --- a/code/lib/cli/src/js-package-manager/JsPackageManagerFactory.ts +++ b/code/lib/cli/src/js-package-manager/JsPackageManagerFactory.ts @@ -2,21 +2,27 @@ import { sync as spawnSync } from 'cross-spawn'; import { sync as findUpSync } from 'find-up'; import { NPMProxy } from './NPMProxy'; import { PNPMProxy } from './PNPMProxy'; -import { JsPackageManager } from './JsPackageManager'; +import { JsPackageManager, type PackageManagerName } from './JsPackageManager'; import { Yarn2Proxy } from './Yarn2Proxy'; import { Yarn1Proxy } from './Yarn1Proxy'; export class JsPackageManagerFactory { public static getPackageManager( - { usePnpm, useNpm }: { usePnpm?: boolean; useNpm?: boolean } = {}, + { force, useNpm }: { force?: PackageManagerName; useNpm?: boolean } = {}, cwd?: string ): JsPackageManager { - if (useNpm) { + if (useNpm || force === 'npm') { return new NPMProxy({ cwd }); } - if (usePnpm) { + if (force === 'pnpm') { return new PNPMProxy({ cwd }); } + if (force === 'yarn1') { + return new Yarn1Proxy({ cwd }); + } + if (force === 'yarn2') { + return new Yarn2Proxy({ cwd }); + } const yarnVersion = getYarnVersion(cwd); const hasYarnLockFile = Boolean(findUpSync('yarn.lock', { cwd })); diff --git a/code/lib/cli/src/js-package-manager/deprecations.ts b/code/lib/cli/src/js-package-manager/deprecations.ts new file mode 100644 index 000000000000..5883fad3a294 --- /dev/null +++ b/code/lib/cli/src/js-package-manager/deprecations.ts @@ -0,0 +1,8 @@ +import deprecate from 'util-deprecate'; + +export const useNpmWarning = deprecate( + () => {}, + `\`--use-npm\` is deprecated and will be removed in Storybook 8.0. +Please use the \`--package-manager=npm\` option instead. +Read more at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cli-option---use-npm-deprecated` +); diff --git a/code/lib/cli/src/js-package-manager/index.ts b/code/lib/cli/src/js-package-manager/index.ts index 3a2b877d5030..2e29cb8e15f4 100644 --- a/code/lib/cli/src/js-package-manager/index.ts +++ b/code/lib/cli/src/js-package-manager/index.ts @@ -1,3 +1,4 @@ +export * from './deprecations'; export * from './JsPackageManagerFactory'; export * from './JsPackageManager'; export * from './PackageJson'; diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index 3ab806a6d670..e9dc68079901 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -6,6 +6,8 @@ import { getPackageDetails, JsPackageManagerFactory, PackageJsonWithMaybeDeps, + PackageManagerName, + useNpmWarning, } from './js-package-manager'; import { commandLog } from './helpers'; import { automigrate } from './automigrate'; @@ -136,11 +138,11 @@ export const addExtraFlags = ( ); }; -interface UpgradeOptions { +export interface UpgradeOptions { prerelease: boolean; skipCheck: boolean; useNpm: boolean; - usePnpm: boolean; + packageManager: PackageManagerName; dryRun: boolean; yes: boolean; disableTelemetry: boolean; @@ -150,12 +152,15 @@ export const upgrade = async ({ prerelease, skipCheck, useNpm, - usePnpm, + packageManager: pkgMgr, dryRun, yes, ...options }: UpgradeOptions) => { - const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, usePnpm }); + if (useNpm) { + useNpmWarning(); + } + const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, force: pkgMgr }); commandLog(`Checking for latest versions of '@storybook/*' packages`); if (!options.disableTelemetry) { @@ -180,6 +185,6 @@ export const upgrade = async ({ if (!skipCheck) { checkVersionConsistency(); - await automigrate({ dryRun, yes, useNpm, usePnpm }); + await automigrate({ dryRun, yes, useNpm, force: pkgMgr }); } }; diff --git a/code/yarn.lock b/code/yarn.lock index c288ac22dc3b..e69989cfcb12 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7319,6 +7319,7 @@ __metadata: "@types/semver": ^7.3.4 "@types/shelljs": ^0.8.7 "@types/update-notifier": ^5.0.0 + "@types/util-deprecate": ^1.0.0 boxen: ^5.1.2 chalk: ^4.1.0 commander: ^6.2.1 @@ -7342,6 +7343,7 @@ __metadata: ts-dedent: ^2.0.0 typescript: ~4.6.3 update-notifier: ^5.0.1 + util-deprecate: ^1.0.2 bin: getstorybook: ./bin/index.js sb: ./bin/index.js diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx index 8113277199e3..af6939fe2e9c 100644 --- a/docs/get-started/installation-problems/angular.mdx +++ b/docs/get-started/installation-problems/angular.mdx @@ -4,10 +4,10 @@ npx storybook init --type angular ``` -- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: +- Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --use-npm + npx storybook init --package-manager=npm ``` - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it: @@ -42,4 +42,4 @@ | `"styles"` | Provide the location of the [application's styles](../configure/styling-and-css.md#importing-css-files) to be used with Storybook.
`"styles": ["src/styles.css", "src/styles.scss"]`
| | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root.
`"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` | -- For other installation issues, check the [Angular README](../../app/angular/README.md) for additional instructions. \ No newline at end of file +- For other installation issues, check the [Angular README](../../app/angular/README.md) for additional instructions. diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx index 04920a346755..f1d494f05860 100644 --- a/docs/get-started/installation-problems/ember.mdx +++ b/docs/get-started/installation-problems/ember.mdx @@ -14,10 +14,10 @@ Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@storybook/ember-cli-storybook) package to the latest version to fix it. -- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: +- Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --use-npm + npx storybook init --package-manager=npm ``` - -- For other installation issues, check the [Ember README](../../app/ember/README.md) for additional instructions. \ No newline at end of file + +- For other installation issues, check the [Ember README](../../app/ember/README.md) for additional instructions. diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx index d3c98c8a2f38..10db561f96ce 100644 --- a/docs/get-started/installation-problems/preact.mdx +++ b/docs/get-started/installation-problems/preact.mdx @@ -3,11 +3,11 @@ ```shell npx storybook init --type preact ``` - - - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: + +- Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --use-npm + npx storybook init --package-manager=npm ``` -- For other installation issues, check the [Preact README](../../app/preact/README.md) for additional instructions. \ No newline at end of file +- For other installation issues, check the [Preact README](../../app/preact/README.md) for additional instructions. diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx index 6f2853b02b41..7993718555bf 100644 --- a/docs/get-started/installation-problems/react.mdx +++ b/docs/get-started/installation-problems/react.mdx @@ -4,10 +4,10 @@ npx storybook init --type react ``` - - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: +- Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --use-npm + npx storybook init --package-manager=npm ``` - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it: @@ -18,4 +18,4 @@ Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade) for more information on how to set up Webpack 5. -- For other installation issues, check the [React README](../../app/react/README.md) for additional instructions. \ No newline at end of file +- For other installation issues, check the [React README](../../app/react/README.md) for additional instructions. diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx index 0fa6d9782b37..fc13ced5eea6 100644 --- a/docs/get-started/installation-problems/svelte.mdx +++ b/docs/get-started/installation-problems/svelte.mdx @@ -3,12 +3,12 @@ ```shell npx storybook init --type svelte ``` - - - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: + +- Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --use-npm + npx storybook init --package-manager=npm ``` - For issues with Svelte Native Story Format, check the [Svelte Story Format addon repository](https://github.com/storybookjs/addon-svelte-csf) for instructions. -- For other installation issues, check the [Svelte README](../../app/svelte/README.md) for additional instructions. \ No newline at end of file +- For other installation issues, check the [Svelte README](../../app/svelte/README.md) for additional instructions. diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx index 3caa0a56199e..cfd752e0f8b7 100644 --- a/docs/get-started/installation-problems/vue.mdx +++ b/docs/get-started/installation-problems/vue.mdx @@ -8,11 +8,11 @@ npx storybook init --type vue3 ``` - - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: +- Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --use-npm + npx storybook init --package-manager=npm ``` - For other installation issues, check the [Vue 2 README](../../app/vue/README.md), or the [Vue 3 README](../../app/vue3/README.md) for additional instructions. -- Vue 3 support is under active development, and we encourage feedback and improvements. Check the [contribution guidelines to help us improve it](../../CONTRIBUTING.md). \ No newline at end of file +- Vue 3 support is under active development, and we encourage feedback and improvements. Check the [contribution guidelines to help us improve it](../../CONTRIBUTING.md).