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.

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

Jump to bottom

Upgrade: Install/Add Storybook dependencies the default way #28572

Draft
wants to merge 1 commit into
base: next
Choose a base branch
from
Draft

Upgrade: Install/Add Storybook dependencies the default way #28572

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 3 additions & 15 deletions code/lib/cli/src/upgrade.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,18 +229,7 @@ export const doUpgrade = async ({
// only upgrade packages that are in the monorepo
return dependency in versions;
}) as Array<keyof typeof versions>;
return monorepoDependencies.map((dependency) => {
let char = '^';
if (isCLIOutdated) {
char = '';
}
if (isCanary) {
char = '';
}
/* add ^ modifier to the version if this is the latest stable or prerelease version
example outputs: @storybook/react@^8.0.0 */
return `${dependency}@${char}${versions[dependency]}`;
});
Comment on lines -232 to -243
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See here:
#28579 (review)

When @yannbf was testing the behavior on his machine we observed yarn behave very differently from when we tested a similar command on your machine with npm.

The problem is that package managers do different things.
npm will install the exact version, in the lockfile, but add a caret in the package.json file
yarn however, will add the exact version to the package.json`.

The industry standard is to have ^ ranges in package.json and ensure versions do not drift unexpectedly using lockfiles.
We want to ensure this behavior is held true, for all package managers.

Here's why me and @JReinhold ended up with the code above:

  • In the case of @latest isCLIOutdated will be false, and isCanary will be false too.
    Meaning we add the ^ and manually write that to the package.json
    We can safely do this, because latest is latest, the subsequent install command will install the same version, because nothing higher can exist.
  • In the case of someone installing @next, both will be false again. Actually that behavior might be wrong. The caret will be added, meaning you might get a later alpha then you asked for.
  • In the case of a canary, the isCanary will be true, and no caret will be added.
    Due to this being manually written to package.json, the behavior from all the package manager will be consistent.
  • In the case of an specific version, the isCLIOutdated will be true, and cause the ^ not to be printed.

I hope this explains a bit why it was chosen to manually write to package.json, instead of letting them do as they do... their behavior is inconsistent, and the upgrade experience would be different between using npm and yarn.

If we're going to fix the bug here: #28569
..then we need to make absolutely sure, that the upgrade behavior is as is expected in every package manager we support.

The code below will not do that.

return monorepoDependencies.map((dependency) => `${dependency}@${versions[dependency]}`);
};

const upgradedDependencies = toUpgradedDependencies(packageJson.dependencies);
Expand All @@ -249,17 +238,16 @@ export const doUpgrade = async ({
logger.info(`Updating dependencies in ${chalk.cyan('package.json')}..`);
if (upgradedDependencies.length > 0) {
await packageManager.addDependencies(
{ installAsDevDependencies: false, skipInstall: true, packageJson },
{ installAsDevDependencies: false, packageJson },
upgradedDependencies
);
}
if (upgradedDevDependencies.length > 0) {
await packageManager.addDependencies(
{ installAsDevDependencies: true, skipInstall: true, packageJson },
{ installAsDevDependencies: true, packageJson },
upgradedDevDependencies
);
}
await packageManager.installDependencies();
}

// AUTOMIGRATIONS
Expand Down
Loading