Skip to content

Commit

Permalink
refactor all webpack5 related migrations
Browse files Browse the repository at this point in the history
  • Loading branch information
@yannbf
yannbf committed Feb 20, 2023
1 parent b5778a0 commit 1f27f57
Show file tree
Hide file tree
Showing 9 changed files with 159 additions and 169 deletions.
48 changes: 23 additions & 25 deletions code/lib/cli/src/automigrate/fixes/angular12.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,44 @@
/* eslint-disable no-underscore-dangle */
import * as path from 'path';
import type { StorybookConfig } from '@storybook/types';
import type { JsPackageManager, PackageJson } from '../../js-package-manager';
import type { PackageJson } from '../../js-package-manager';
import { makePackageManager, mockStorybookData } from '../helpers/testing-helpers';
import { angular12 } from './angular12';

// eslint-disable-next-line global-require, jest/no-mocks-import
jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));

const checkAngular12 = async ({
packageJson,
main,
main: mainConfig = {},
storybookVersion = '7.0.0',
}: {
packageJson: PackageJson;
main: Partial<StorybookConfig>;
main?: Partial<StorybookConfig> & Record<string, unknown>;
storybookVersion?: string;
}) => {
// eslint-disable-next-line global-require
require('fs-extra').__setMockFiles({
[path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`,
mockStorybookData({ mainConfig, storybookVersion });

return angular12.check({
packageManager: makePackageManager(packageJson),
configDir: '',
});
const packageManager = {
retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
} as JsPackageManager;
return angular12.check({ packageManager });
};

describe('angular12 fix', () => {
afterEach(jest.restoreAllMocks);

describe('sb < 6.3', () => {
describe('angular12 dependency', () => {
const packageJson = {
dependencies: { '@storybook/react': '^6.2.0', '@angular/core': '^12.0.0' },
dependencies: { '@storybook/angular': '^6.2.0', '@angular/core': '^12.0.0' },
};
it('should fail', async () => {
await expect(
checkAngular12({
packageJson,
main: {},
storybookVersion: '6.2.0',
})
).rejects.toThrow();
});
});
describe('no angular dependency', () => {
const packageJson = { dependencies: { '@storybook/react': '^6.2.0' } };
const packageJson = { dependencies: { '@storybook/angular': '^6.2.0' } };
it('should no-op', async () => {
await expect(
checkAngular12({
Expand All @@ -54,14 +52,15 @@ describe('angular12 fix', () => {
describe('sb 6.3 - 7.0', () => {
describe('angular12 dependency', () => {
const packageJson = {
dependencies: { '@storybook/react': '^6.3.0', '@angular/core': '^12.0.0' },
dependencies: { '@storybook/angular': '^6.3.0', '@angular/core': '^12.0.0' },
};
describe('webpack5 builder', () => {
it('should no-op', async () => {
await expect(
checkAngular12({
packageJson,
main: { core: { builder: 'webpack5' } },
storybookVersion: '6.3.0',
})
).resolves.toBeFalsy();
});
Expand All @@ -82,10 +81,11 @@ describe('angular12 fix', () => {
checkAngular12({
packageJson,
main: { core: { builder: 'webpack4' } },
storybookVersion: '6.3.0',
})
).resolves.toMatchObject({
angularVersion: '^12.0.0',
storybookVersion: '^6.3.0',
storybookVersion: '6.3.0',
});
});
});
Expand All @@ -94,11 +94,11 @@ describe('angular12 fix', () => {
await expect(
checkAngular12({
packageJson,
main: {},
storybookVersion: '6.3.0',
})
).resolves.toMatchObject({
angularVersion: '^12.0.0',
storybookVersion: '^6.3.0',
storybookVersion: '6.3.0',
});
});
});
Expand All @@ -108,7 +108,6 @@ describe('angular12 fix', () => {
await expect(
checkAngular12({
packageJson: {},
main: {},
})
).resolves.toBeFalsy();
});
Expand All @@ -117,13 +116,12 @@ describe('angular12 fix', () => {
describe('sb 7.0+', () => {
describe('angular12 dependency', () => {
const packageJson = {
dependencies: { '@storybook/react': '^7.0.0-alpha.0', '@angular/core': '^12.0.0' },
dependencies: { '@storybook/angular': '^7.0.0-alpha.0', '@angular/core': '^12.0.0' },
};
it('should no-op', async () => {
await expect(
checkAngular12({
packageJson,
main: {},
})
).resolves.toBeFalsy();
});
Expand Down
12 changes: 5 additions & 7 deletions code/lib/cli/src/automigrate/fixes/angular12.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import chalk from 'chalk';
import { dedent } from 'ts-dedent';
import semver from 'semver';
import type { ConfigFile } from '@storybook/csf-tools';
import type { Fix } from '../types';
import { webpack5 } from './webpack5';
import { checkWebpack5Builder } from '../helpers/checkWebpack5Builder';

interface Angular12RunOptions {
angularVersion: string;
// FIXME angularPresetVersion: string;
storybookVersion: string;
main: ConfigFile;
}

/**
Expand All @@ -21,17 +20,16 @@ interface Angular12RunOptions {
export const angular12: Fix<Angular12RunOptions> = {
id: 'angular12',

async check({ packageManager }) {
const packageJson = packageManager.retrievePackageJson();
const { dependencies, devDependencies } = packageJson;
const angularVersion = dependencies['@angular/core'] || devDependencies['@angular/core'];
async check({ packageManager, configDir }) {
const allDependencies = packageManager.getAllDependencies();
const angularVersion = allDependencies['@angular/core'];
const angularCoerced = semver.coerce(angularVersion)?.version;

if (!angularCoerced || semver.lt(angularCoerced, '12.0.0')) {
return null;
}

const builderInfo = await webpack5.checkWebpack5Builder(packageJson);
const builderInfo = await checkWebpack5Builder({ packageManager, configDir });
return builderInfo ? { angularVersion, ...builderInfo } : null;
},

Expand Down
35 changes: 17 additions & 18 deletions code/lib/cli/src/automigrate/fixes/cra5.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,27 @@
/* eslint-disable no-underscore-dangle */
import * as path from 'path';
import type { StorybookConfig } from '@storybook/types';
import type { JsPackageManager, PackageJson } from '../../js-package-manager';
import type { PackageJson } from '../../js-package-manager';
import { cra5 } from './cra5';

// eslint-disable-next-line global-require, jest/no-mocks-import
jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));
import { makePackageManager, mockStorybookData } from '../helpers/testing-helpers';

const checkCra5 = async ({
packageJson,
main,
main: mainConfig,
storybookVersion = '7.0.0',
}: {
packageJson: PackageJson;
main: Partial<StorybookConfig>;
main?: Partial<StorybookConfig> & Record<string, unknown>;
storybookVersion?: string;
}) => {
// eslint-disable-next-line global-require
require('fs-extra').__setMockFiles({
[path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`,
mockStorybookData({ mainConfig, storybookVersion });

return cra5.check({
packageManager: makePackageManager(packageJson),
});
const packageManager = {
retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
} as JsPackageManager;
return cra5.check({ packageManager });
};

describe('cra5 fix', () => {
afterEach(jest.restoreAllMocks);

describe('sb < 6.3', () => {
describe('cra5 dependency', () => {
const packageJson = {
Expand All @@ -34,7 +31,7 @@ describe('cra5 fix', () => {
await expect(
checkCra5({
packageJson,
main: {},
storybookVersion: '6.2.0',
})
).rejects.toThrow();
});
Expand Down Expand Up @@ -82,10 +79,11 @@ describe('cra5 fix', () => {
checkCra5({
packageJson,
main: { core: { builder: 'webpack4' } },
storybookVersion: '6.3.0',
})
).resolves.toMatchObject({
craVersion: '^5.0.0',
storybookVersion: '^6.3.0',
storybookVersion: '6.3.0',
});
});
});
Expand All @@ -95,10 +93,11 @@ describe('cra5 fix', () => {
checkCra5({
packageJson,
main: {},
storybookVersion: '6.3.0',
})
).resolves.toMatchObject({
craVersion: '^5.0.0',
storybookVersion: '^6.3.0',
storybookVersion: '6.3.0',
});
});
});
Expand Down
16 changes: 6 additions & 10 deletions code/lib/cli/src/automigrate/fixes/cra5.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import chalk from 'chalk';
import { dedent } from 'ts-dedent';
import semver from 'semver';
import type { ConfigFile } from '@storybook/csf-tools';
import type { Fix } from '../types';
import { webpack5 } from './webpack5';
import { checkWebpack5Builder } from '../helpers/checkWebpack5Builder';

interface CRA5RunOptions {
craVersion: string;
// FIXME craPresetVersion: string;
storybookVersion: string;
main: ConfigFile;
}

/**
Expand All @@ -21,25 +20,22 @@ interface CRA5RunOptions {
export const cra5: Fix<CRA5RunOptions> = {
id: 'cra5',

async check({ packageManager }) {
const packageJson = packageManager.retrievePackageJson();
const { dependencies, devDependencies } = packageJson;
const craVersion = dependencies['react-scripts'] || devDependencies['react-scripts'];
async check({ packageManager, configDir }) {
const allDependencies = packageManager.getAllDependencies();
const craVersion = allDependencies['react-scripts'];
const craCoerced = semver.coerce(craVersion)?.version;

if (!craCoerced || semver.lt(craCoerced, '5.0.0')) {
return null;
}

const builderInfo = await webpack5.checkWebpack5Builder(packageJson);
const builderInfo = await checkWebpack5Builder({ configDir, packageManager });
return builderInfo ? { craVersion, ...builderInfo } : null;
},

prompt({ craVersion, ...rest }) {
prompt({ craVersion }) {
const craFormatted = chalk.cyan(`Create React App (CRA) ${craVersion}`);

console.log({ ...rest });

return dedent`
We've detected you are running ${craFormatted} which is powered by webpack5.
Your Storybook's main.js files specifies webpack4, which is incompatible.
Expand Down
40 changes: 23 additions & 17 deletions code/lib/cli/src/automigrate/fixes/vue3.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
/* eslint-disable no-underscore-dangle */
import * as path from 'path';
import type { JsPackageManager, PackageJson } from '../../js-package-manager';
import type { StorybookConfig } from '@storybook/types';
import type { PackageJson } from '../../js-package-manager';
import { vue3 } from './vue3';
import { makePackageManager, mockStorybookData } from '../helpers/testing-helpers';

// eslint-disable-next-line global-require, jest/no-mocks-import
jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));
const checkVue3 = async ({
packageJson,
main: mainConfig = {},
storybookVersion = '7.0.0',
}: {
packageJson: PackageJson;
main?: Partial<StorybookConfig> & Record<string, unknown>;
storybookVersion?: string;
}) => {
mockStorybookData({ mainConfig, storybookVersion });

const checkVue3 = async ({ packageJson, main }: { packageJson: PackageJson; main: unknown }) => {
// eslint-disable-next-line global-require
require('fs-extra').__setMockFiles({
[path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`,
return vue3.check({
packageManager: makePackageManager(packageJson),
});
const packageManager = {
retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
} as JsPackageManager;
return vue3.check({ packageManager });
};

describe('vue3 fix', () => {
afterEach(jest.restoreAllMocks);

describe('sb < 6.3', () => {
describe('vue3 dependency', () => {
const packageJson = {
Expand All @@ -27,7 +31,7 @@ describe('vue3 fix', () => {
await expect(
checkVue3({
packageJson,
main: {},
storybookVersion: '6.2.0',
})
).rejects.toThrow();
});
Expand All @@ -38,7 +42,7 @@ describe('vue3 fix', () => {
await expect(
checkVue3({
packageJson,
main: {},
storybookVersion: '6.2.0',
})
).resolves.toBeFalsy();
});
Expand Down Expand Up @@ -75,10 +79,11 @@ describe('vue3 fix', () => {
checkVue3({
packageJson,
main: { core: { builder: 'webpack4' } },
storybookVersion: '6.3.0',
})
).resolves.toMatchObject({
vueVersion: '^3.0.0',
storybookVersion: '^6.3.0',
storybookVersion: '6.3.0',
});
});
});
Expand All @@ -88,10 +93,11 @@ describe('vue3 fix', () => {
checkVue3({
packageJson,
main: {},
storybookVersion: '6.3.0',
})
).resolves.toMatchObject({
vueVersion: '^3.0.0',
storybookVersion: '^6.3.0',
storybookVersion: '6.3.0',
});
});
});
Expand Down
Loading

0 comments on commit 1f27f57

Please sign in to comment.