Open yannbf opened 3 months ago
Disclaimer This information might be inaccurate, due to it being generated automatically
Generate the Checksum:
/code/lib/cli/src/upgrade.ts
:
const encodeChecksum = (fromVersion: string, toVersion: string): string => {
return Buffer.from(`${fromVersion}|${toVersion}`).toString('base64');
};
const decodeChecksum = (checksum: string): { fromVersion: string, toVersion: string } => { const [fromVersion, toVersion] = Buffer.from(checksum, 'base64').toString('utf8').split('|'); return { fromVersion, toVersion }; };
Modify the Upgrade Command:
doUpgrade
function in /code/lib/cli/src/upgrade.ts
, after the upgrade process, generate the checksum and add it to .storybook/main.ts
:
const checksum = encodeChecksum(beforeVersion, currentCLIVersion);
const mainConfigPath = path.resolve(configDir, 'main.ts');
const mainConfigContent = await fs.promises.readFile(mainConfigPath, 'utf8');
const updatedMainConfigContent = mainConfigContent.replace(/(export default config;)/, `config.checksum = '${checksum}';
$1`);
await fs.promises.writeFile(mainConfigPath, updatedMainConfigContent);
Validate Checksum at Runtime:
/code/lib/cli/src/validateChecksum.ts
:
import { decodeChecksum } from './upgrade';
import { getInstalledStorybookVersion } from './helpers';
export const validateChecksum = async (configDir: string) => {
const mainConfigPath = path.resolve(configDir, 'main.ts');
const mainConfigContent = await fs.promises.readFile(mainConfigPath, 'utf8');
const checksumMatch = mainConfigContent.match(/checksum: '([^']+)'/);
if (checksumMatch) {
const { fromVersion, toVersion } = decodeChecksum(checksumMatch[1]);
const installedVersion = await getInstalledStorybookVersion();
if (installedVersion !== toVersion) {
throw new Error(Storybook version mismatch. Expected: ${toVersion}, Found: ${installedVersion}. Please run 'npx storybook@latest upgrade'.
);
}
}
};
/code/lib/cli/src/upgrade.ts /code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts /code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts /code/core/src/core-server/utils/update-check.ts
Problem
We're having trouble figuring out if Storybook users are using the
npx storybook@latest upgrade
to upgrade Storybook, or if they do it manually or via other ways. If we could know for sure whether they've upgraded Storybook correctly, we could provide much better help to fix their issues.Solution
Every time someone runs the Storybook upgrade command, we'll track the old and new versions, create a checksum with that info, and add it to
.storybook/main.ts
. This checksum will help us with telemetry so we know if users are using the upgrade command, and we can also use it to check at runtime if Storybook is installed correctly. If some packages don't match the expected version, we'll prompt users to run the upgrade command to fix the issue and update the checksum.When users run
npx storybook@latest upgrade
, detect the from and to versions, create a checksum string with this info. Here's an example with base64 encoding:Then add it to
.storybook/main.ts
e.g.:Later on, at runtime, the checksum will be parsed to extract the target version. The extracted version will be compared against the installed Storybook packages. If discrepancies are found (e.g., some packages match the version while others do not), an error will be thrown, prompting users to run the upgrade command again.