Merge pull request #20027 from storybookjs/valentin/improve-sandbox-creation

Improve framework version specific story handling
This commit is contained in:
Valentin Palkovic 2022-12-01 08:59:35 +01:00 committed by GitHub
commit b8ff859f80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -255,12 +255,18 @@ function addStoriesEntry(mainConfig: ConfigFile, path: string) {
mainConfig.setFieldValue(['stories'], [...stories, entry]);
}
function addVariantToFolder(variant?: string, folder = 'stories') {
return variant ? `${folder}_${variant}` : folder;
}
// packageDir is eg 'renderers/react', 'addons/actions'
async function linkPackageStories(
packageDir: string,
{ mainConfig, cwd, linkInDir }: { mainConfig: ConfigFile; cwd: string; linkInDir?: string }
{ mainConfig, cwd, linkInDir }: { mainConfig: ConfigFile; cwd: string; linkInDir?: string },
frameworkVariant?: string
) {
const source = join(codeDir, packageDir, 'template', 'stories');
const storiesFolderName = frameworkVariant ? addVariantToFolder(frameworkVariant) : 'stories';
const source = join(codeDir, packageDir, 'template', storiesFolderName);
// By default we link `stories` directories
// e.g '../../../code/lib/store/template/stories' to 'template-stories/lib/store'
// if the directory <code>/lib/store/template/stories exists
@ -268,8 +274,12 @@ async function linkPackageStories(
// The files must be linked in the cwd, in order to ensure that any dependencies they
// reference are resolved in the cwd. In particular 'react' resolved by MDX files.
const target = linkInDir
? resolve(linkInDir, packageDir)
? resolve(
linkInDir,
frameworkVariant ? addVariantToFolder(frameworkVariant, packageDir) : packageDir
)
: resolve(cwd, 'template-stories', packageDir);
await ensureSymlink(source, target);
if (!linkInDir) addStoriesEntry(mainConfig, packageDir);
@ -280,11 +290,13 @@ async function linkPackageStories(
await Promise.all(
['js', 'ts'].map(async (ext) => {
const previewFile = `preview.${ext}`;
const previewPath = join(codeDir, packageDir, 'template', 'stories', previewFile);
const previewPath = join(codeDir, packageDir, 'template', storiesFolderName, previewFile);
if (await pathExists(previewPath)) {
let storiesDir = 'template-stories';
if (linkInDir) {
storiesDir = (await pathExists(join(cwd, 'src/stories'))) ? 'src/stories' : 'stories';
storiesDir = (await pathExists(join(cwd, `src/${storiesFolderName}`)))
? `src/${storiesFolderName}`
: storiesFolderName;
}
addPreviewAnnotations(mainConfig, [`./${join(storiesDir, packageDir, previewFile)}`]);
}
@ -315,7 +327,7 @@ function addExtraDependencies({
}
export const addStories: Task['run'] = async (
{ sandboxDir, template },
{ sandboxDir, template, key },
{ addon: extraAddons, dryRun, debug }
) => {
const cwd = sandboxDir;
@ -343,6 +355,7 @@ export const addStories: Task['run'] = async (
});
const frameworkPath = await workspacePath('frameworks', template.expected.framework);
// Add stories for the framework if it has one. NOTE: these *do* need to be processed by the framework build system
if (await pathExists(resolve(codeDir, frameworkPath, join('template', 'stories')))) {
await linkPackageStories(frameworkPath, {
@ -352,6 +365,21 @@ export const addStories: Task['run'] = async (
});
}
const frameworkVariant = key.split('/')[1];
const storiesVariantFolder = addVariantToFolder(frameworkVariant);
if (await pathExists(resolve(codeDir, frameworkPath, join('template', storiesVariantFolder)))) {
await linkPackageStories(
frameworkPath,
{
mainConfig,
cwd,
linkInDir: resolve(cwd, storiesPath),
},
frameworkVariant
);
}
// Add stories for lib/store (and addons below). NOTE: these stories will be in the
// template-stories folder and *not* processed by the framework build config (instead by esbuild-loader)
await linkPackageStories(await workspacePath('core package', '@storybook/store'), {