storybook [Request]: Add version checksum in main.js

gwo2fgha 于 4个月前发布在其他

关注(0)|答案(1)|浏览(45)

问题

我们无法确定Storybook用户是否使用npx storybook@latest upgrade来升级Storybook,还是手动或其他方式进行升级。如果我们能确切地知道他们是否正确升级了Storybook,我们就能提供更好的帮助来解决他们的问题。

解决方案

每次有人运行Storybook升级命令时，我们将跟踪旧版本和新版本，使用这些信息创建校验和，并将其添加到.storybook/main.ts中。这个校验和将帮助我们在遥测方面，了解用户是否在使用升级命令，我们还可以在运行时使用它来检查Storybook是否正确安装。如果某些包的版本与预期不符，我们会提示用户运行升级命令来修复问题并更新校验和。
当用户运行npx storybook@latest upgrade时，检测从版本和到版本，使用此信息创建一个带有校验和字符串的校验和。以下是使用base64编码的示例：

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 };
};

然后将其添加到.storybook/main.ts中，例如：

import { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  //...
  checksum: 'OC4xLjF8OC4yLjA=' // '8.1.1|8.2.0'
}
export default config

稍后，在运行时，校验和将被解析以提取目标版本。
提取出的版本将与已安装的Storybook包进行比较。
如果发现差异(例如，一些包的版本与另一个包的版本匹配),则会抛出错误，提示用户再次运行升级命令。

storybook

来源：https://github.com/storybookjs/storybook/issues/28600

1条答案

按热度按时间

ijxebb2r1#

免责声明
此信息可能不准确，因为它是自动生成的

实施步骤

生成校验和：
将以下函数添加到 /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 };
};

修改升级命令：
在 /code/lib/cli/src/upgrade.ts 中的 doUpgrade 函数中，在升级过程之后，生成校验和并将其添加到 .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);

3. **Validate Checksum at Runtime:**
- Add a validation step in the Storybook initialization process to decode and compare the checksum with the installed versions. This can be done in a new utility file, e.g., `/code/lib/cli/src/validateChecksum.ts`:
```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

关于 Greptile

此响应为您提供了一个研究起点，而不是精确的解决方案。
帮助我们改进！如果这有帮助，请留下一个👍，如果它无关紧要，请留下一个👎。

赞(0）回复(0）举报 4个月前

我来回答

storybook [Request]: Add version checksum in main.js

问题

解决方案

1条答案

实施步骤

参考资料

关于 Greptile

相关问题

热门标签

最新问答