add ability to get info from sb main file
MODIFY
bin-src/lib/getPrebuiltStorybookMetadata.ts
bin-src/lib/getPrebuiltStorybookMetadata.ts
@@ -30,7 +30,14 @@ export const getStorybookMetadataFromProjectJson = async (
return {
viewLayer: sbProjectJson.framework.name ?? '',
version: sbProjectJson.storybookPackages[viewLayerPackage].version,
- builder: sbProjectJson.builder.name ?? 'webpack4',
+ builder: sbProjectJson?.builder
+ ? {
+ name:
+ typeof sbProjectJson.builder === 'string'
+ ? sbProjectJson.builder
+ : sbProjectJson?.builder.name,
+ }
+ : { name: 'webpack4' },
addons: Object.keys(sbProjectJson.addons).map((addon) => ({
name: supportedAddons[addon],
packageName: addon,

MODIFY
bin-src/lib/getStorybookInfo.test.ts
bin-src/lib/getStorybookInfo.test.ts
@@ -18,7 +18,7 @@ jest.mock('./getPrebuiltStorybookMetadata', () => {
packageVersion: '6.5.5',
},
],
- builder: 'webpack5',
+ builder: { name: 'webpack5' },
version: '6.5.5',
viewLayer: 'react',
})),
@@ -49,7 +49,11 @@ describe('getStorybookInfo', () => {
const ctx = getContext({ packageJson: { dependencies: REACT } });
await expect(getStorybookInfo(ctx)).resolves.toEqual(
// We're getting the result of tracing chromatic-cli's node_modules here.
- expect.objectContaining({ viewLayer: 'react', version: expect.any(String) })
+ expect.objectContaining({
+ viewLayer: 'react',
+ version: expect.any(String),
+ builder: { name: 'webpack5', version: '6.5.6' },
+ })
);
});
@@ -84,7 +88,11 @@ describe('getStorybookInfo', () => {
it('looks up package in node_modules on missing dependency', async () => {
await expect(getStorybookInfo(context)).resolves.toEqual(
// We're getting the result of tracing chromatic-cli's node_modules here.
- expect.objectContaining({ viewLayer: 'react', version: expect.any(String) })
+ expect.objectContaining({
+ viewLayer: 'react',
+ version: expect.any(String),
+ builder: { name: 'webpack5', version: '6.5.6' },
+ })
);
expect(log.info).toHaveBeenCalledWith(
expect.stringContaining('No viewlayer package listed in dependencies')
@@ -97,14 +105,22 @@ describe('getStorybookInfo', () => {
env: { CHROMATIC_STORYBOOK_VERSION: '@storybook/react@3.2.1' },
});
await expect(getStorybookInfo(ctx)).resolves.toEqual(
- expect.objectContaining({ viewLayer: 'react', version: '3.2.1' })
+ expect.objectContaining({
+ viewLayer: 'react',
+ version: '3.2.1',
+ builder: { name: 'webpack5', version: '6.5.6' },
+ })
);
});
it('supports unscoped package name', async () => {
const ctx = getContext({ env: { CHROMATIC_STORYBOOK_VERSION: 'react@3.2.1' } });
await expect(getStorybookInfo(ctx)).resolves.toEqual(
- expect.objectContaining({ viewLayer: 'react', version: '3.2.1' })
+ expect.objectContaining({
+ viewLayer: 'react',
+ version: '3.2.1',
+ builder: { name: 'webpack5', version: '6.5.6' },
+ })
);
});
@@ -156,7 +172,7 @@ describe('getStorybookInfo', () => {
packageVersion: '6.5.5',
},
],
- builder: 'webpack5',
+ builder: { name: 'webpack5' },
version: '6.5.5',
viewLayer: 'react',
});

MODIFY
bin-src/lib/getStorybookMetadata.ts
bin-src/lib/getStorybookMetadata.ts
@@ -2,11 +2,14 @@ import fs from 'fs-extra';
import meow from 'meow';
import { parseArgsStringToArgv } from 'string-argv';
import semver from 'semver';
-import { loadMainConfig } from '@storybook/core-common';
+
+import path from 'path';
import { Context } from '../types';
-import noViewLayerPackage from '../ui/messages/errors/noViewLayerPackage';
+import packageDoesNotExist from '../ui/messages/errors/noViewLayerPackage';
import { viewLayers } from './viewLayers';
import { timeout, raceFulfilled } from './promises';
+import { supportedAddons } from './supportedAddons';
+import { builders } from './builders';
const resolvePackageJson = (pkg: string) => {
try {
@@ -82,7 +85,7 @@ const findViewlayer = async ({ env, log, options, packageJson }) => {
return Promise.race([
resolvePackageJson(pkg)
.then((json) => ({ viewLayer, version: json.version }))
- .catch(() => Promise.reject(new Error(noViewLayerPackage(pkg)))),
+ .catch(() => Promise.reject(new Error(packageDoesNotExist(pkg)))),
timeout(10000),
]);
}
@@ -100,27 +103,25 @@ const findViewlayer = async ({ env, log, options, packageJson }) => {
const json = await resolvePackageJson(key);
return { viewLayer: value, version: json.version };
})
- ).catch(() => Promise.reject(new Error(noViewLayerPackage(pkg)))),
+ ).catch(() => Promise.reject(new Error(packageDoesNotExist(pkg)))),
timeout(10000),
]);
};
const findAddons = async (deps, mainConfig) => {
- if (mainConfig.addons) {
+ if (mainConfig?.addons) {
return {
addons: mainConfig.addons.map((addon) => {
let name: string;
- let options: any;
if (typeof addon === 'string') {
name = addon.replace('/register', '');
} else {
- options = addon.options;
name = addon.name;
}
return {
- name,
- options,
+ name: supportedAddons[name],
+ packageName: name,
version: deps[name],
};
}),
@@ -150,25 +151,26 @@ const findConfigFlags = async ({ options, packageJson }) => {
};
const findBuilder = async (mainConfig) => {
- if (mainConfig.core?.builder) {
+ let name: string;
+ if (mainConfig?.core.builder) {
const { builder } = mainConfig.core;
-
- return {
- name: typeof builder === 'string' ? builder : builder.name,
- options: typeof builder === 'string' ? undefined : builder?.options ?? undefined,
- };
+ name = typeof builder === 'string' ? builder : builder.name;
+ } else {
+ name = 'webpack4';
}
- return {
- builder: {
- name: 'webpack4',
- options: undefined,
- },
- };
+
+ return Promise.race([
+ resolvePackageJson(builders[name])
+ .then((json) => ({ builder: { name, version: json.version } }))
+ .catch(() => Promise.reject(new Error(packageDoesNotExist(builders[name])))),
+ timeout(10000),
+ ]);
};
export const getStorybookMetadata = async (ctx: Context) => {
const configDir = ctx.options.storybookConfigDir ?? '.storybook';
- const mainConfig = loadMainConfig({ configDir });
+ const r = typeof __non_webpack_require__ !== 'undefined' ? __non_webpack_require__ : require;
+ const mainConfig = await r(path.resolve(configDir, 'main'));
const allDependencies = {
...ctx.packageJson?.dependencies,
...ctx.packageJson?.devDependencies,

MODIFY
bin-src/types.ts
bin-src/types.ts
@@ -170,7 +170,9 @@ export interface Context {
packageName?: string;
packageVersion?: string;
}[];
- builder: string;
+ builder: {
+ name: string;
+ };
};
spawnParams: {
client: 'yarn' | 'npm';

MODIFY
bin-src/ui/tasks/storybookInfo.ts
bin-src/ui/tasks/storybookInfo.ts
@@ -8,8 +8,8 @@ const capitalize = (string: string) =>
const infoMessage = ({ addons, version, viewLayer, builder }: Context['storybook']) => {
const info = version && viewLayer ? `Storybook ${version} for ${capitalize(viewLayer)}` : '';
- const builderInfo = builder ? `${info}; using the ${builder} builder` : info;
- return addons.length
+ const builderInfo = builder ? `${info}; using the ${builder.name} builder` : info;
+ return addons?.length
? `${builderInfo}; supported addons found: ${addons
.map((addon) => capitalize(addon.name))
.join(', ')}`

add ability to get info from sb main file