Skip to content

Commit

Permalink
Deprecate --use-npm, add --package-manager
Browse files Browse the repository at this point in the history
  • Loading branch information
IanVS committed Oct 17, 2022
1 parent db23556 commit 5dd62f3
Show file tree
Hide file tree
Showing 21 changed files with 143 additions and 63 deletions.
5 changes: 5 additions & 0 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
Expand Down
20 changes: 17 additions & 3 deletions code/lib/cli/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

---
Expand Down
4 changes: 3 additions & 1 deletion code/lib/cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
Expand Down
15 changes: 11 additions & 4 deletions code/lib/cli/src/add.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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);

Expand Down
8 changes: 4 additions & 4 deletions code/lib/cli/src/automigrate/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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..');
Expand Down
31 changes: 19 additions & 12 deletions code/lib/cli/src/generate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 <npm|pnpm|yarn1|yarn2>', '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 <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
.option('-t --type <type>', 'Add Storybook for a specific project type')
.option('-y --yes', 'Answer yes to all prompts')
Expand All @@ -57,10 +57,14 @@ program
program
.command('add <addon>')
.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')
.addOption()
.option(
'--package-manager <npm|pnpm|yarn1|yarn2>',
'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')
Expand All @@ -70,13 +74,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 <npm|pnpm|yarn1|yarn2>',
'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')
Expand Down Expand Up @@ -181,8 +188,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 <npm|pnpm|yarn1|yarn2>', 'Force package manager')
.option('-N --use-npm', 'Use npm as package manager (deprecated)')
.action((fixId, options) =>
automigrate({ fixId, ...options }).catch((e) => {
logger.error(e);
Expand Down
4 changes: 2 additions & 2 deletions code/lib/cli/src/generators/types.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -31,8 +31,8 @@ export type Generator = (
) => Promise<void>;

export type CommandOptions = {
packageManager: PackageManagerName;
useNpm?: boolean;
usePnpm?: boolean;
usePnp?: boolean;
type?: ProjectType;
force?: any;
Expand Down
11 changes: 7 additions & 4 deletions code/lib/cli/src/initiate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -251,8 +251,11 @@ const projectTypeInquirer = async (
};

export async function initiate(options: CommandOptions, pkg: Package): Promise<void> {
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`));

Expand Down Expand Up @@ -308,7 +311,7 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise<v
packageManager.installDependencies();
}

await automigrate({ yes: options.yes || process.env.CI === 'true', useNpm, usePnpm });
await automigrate({ yes: options.yes || process.env.CI === 'true', useNpm, force: pkgMgr });

logger.log('\nTo run your Storybook, type:\n');
codeLog([packageManager.getRunStorybookCommand()]);
Expand Down
4 changes: 3 additions & 1 deletion code/lib/cli/src/js-package-manager/JsPackageManager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import storybookPackagesVersions from '../versions';

const logger = console;

export type PackageManagerName = 'npm' | 'yarn1' | 'yarn2' | 'pnpm';

/**
* Extract package name and version from input
*
Expand All @@ -31,7 +33,7 @@ interface JsPackageManagerOptions {
cwd?: string;
}
export abstract class JsPackageManager {
public abstract readonly type: 'npm' | 'yarn1' | 'yarn2' | 'pnpm';
public abstract readonly type: PackageManagerName;

public abstract initPackageJson(): void;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ describe('JsPackageManagerFactory', () => {
);
});

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
Expand Down Expand Up @@ -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
);
});
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
14 changes: 10 additions & 4 deletions code/lib/cli/src/js-package-manager/JsPackageManagerFactory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 }));
Expand Down
8 changes: 8 additions & 0 deletions code/lib/cli/src/js-package-manager/deprecations.ts
Original file line number Diff line number Diff line change
@@ -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`
);
1 change: 1 addition & 0 deletions code/lib/cli/src/js-package-manager/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './deprecations';
export * from './JsPackageManagerFactory';
export * from './JsPackageManager';
export * from './PackageJson';
Loading

0 comments on commit 5dd62f3

Please sign in to comment.