GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 08:22:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

account for pnp when creating main.js

Browse Source
This commit is contained in:
Yann Braga 2023-02-10 15:00:54 +01:00
parent 4fa98c1a55
commit fb022dfb8a
2 changed files with 71 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
code/lib/cli/src/generators/configure.test.ts
View File

@ -70,6 +70,46 @@ describe('configureMain', () => {
export default config;" export default config;"
`); `);
}); });
test('should handle resolved paths in pnp', async () => {
await configureMain({
language: SupportedLanguage.JAVASCRIPT,
addons: [
"%%path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json')))%%",
"%%path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json')))%%",
"%%path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json')))%%",
"%%path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))%%",
],
storybookConfigFolder: '.storybook',
framework: {
name: "%%path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))%%",
},
});
const { calls } = (fse.writeFile as unknown as jest.Mock).mock;
const [mainConfigPath, mainConfigContent] = calls[0];
expect(mainConfigPath).toEqual('./.storybook/main.js');
expect(mainConfigContent).toMatchInlineSnapshot(`
"/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
\\"stories\\": [
\\"../stories/**/*.mdx\\",
\\"../stories/**/*.stories.@(js|jsx|ts|tsx)\\"
],
\\"addons\\": [
path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json'))),
path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json'))),
path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))
],
\\"framework\\": {
\\"name\\": path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))
}
};
export default config;"
`);
});
}); });
describe('configurePreview', () => { describe('configurePreview', () => {

34
code/lib/cli/src/generators/configure.ts
View File

@ -30,6 +30,23 @@ interface ConfigurePreviewOptions {
language: SupportedLanguage; language: SupportedLanguage;
} }
const logger = console;
/**
* We need to clean up the paths in case of pnp
* input: "path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))"
* output: "@storybook/react-webpack5"
* */
const sanitizeFramework = (framework: string) => {
// extract either @storybook/<framework> or storybook-<framework>
const matches = framework.match(/(@storybook\/\w+(?:-\w+)*)|(storybook-(\w+(?:-\w+)*))/g);
if (!matches) {
return undefined;
}
return matches[0];
};
export async function configureMain({ export async function configureMain({
addons, addons,
extensions = ['js', 'jsx', 'ts', 'tsx'], extensions = ['js', 'jsx', 'ts', 'tsx'],
@ -47,18 +64,27 @@ export async function configureMain({
const isTypescript = const isTypescript =
language === SupportedLanguage.TYPESCRIPT || language === SupportedLanguage.TYPESCRIPT_LEGACY; language === SupportedLanguage.TYPESCRIPT || language === SupportedLanguage.TYPESCRIPT_LEGACY;
const mainConfigTemplate = dedent`<<import>>const config<<type>> = <<mainContents>>; let mainConfigTemplate = dedent`<<import>>const config<<type>> = <<mainContents>>;
export default config;`; export default config;`;
const frameworkPackage = sanitizeFramework(custom.framework?.name);
if (!frameworkPackage) {
mainConfigTemplate = mainConfigTemplate.replace('<<import>>', '').replace('<<type>>', '');
logger.warn('Could not find framework package name');
}
const mainJsContents = mainConfigTemplate const mainJsContents = mainConfigTemplate
.replace( .replace(
'<<import>>', '<<import>>',
isTypescript isTypescript
? `import type { StorybookConfig } from '${custom.framework.name}';\n\n` ? `import type { StorybookConfig } from '${frameworkPackage}';\n\n`
: `/** @type { import('${custom.framework.name}').StorybookConfig } */\n` : `/** @type { import('${frameworkPackage}').StorybookConfig } */\n`
) )
.replace('<<type>>', isTypescript ? ': StorybookConfig' : '') .replace('<<type>>', isTypescript ? ': StorybookConfig' : '')
.replace('<<mainContents>>', JSON.stringify(config, null, 2)); .replace('<<mainContents>>', JSON.stringify(config, null, 2))
.replace(/['"]%%/g, '')
.replace(/%%['"]/g, '');
await fse.writeFile( await fse.writeFile(
`./${storybookConfigFolder}/main.${isTypescript ? 'ts' : 'js'}`, `./${storybookConfigFolder}/main.${isTypescript ? 'ts' : 'js'}`,