Skip to content

Commit

Permalink
Merge pull request #19568 from storybookjs/shilman/mdx2-automigrate
Browse files Browse the repository at this point in the history
CLI: Automigrate from MDX1 to MDX2
  • Loading branch information
shilman authored Oct 21, 2022
2 parents 3f77315 + 1349eb2 commit b79e660
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 1 deletion.
5 changes: 4 additions & 1 deletion code/lib/cli/src/automigrate/fixes/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Fix } from '../types';

import { cra5 } from './cra5';
import { webpack5 } from './webpack5';
import { angular12 } from './angular12';
Expand All @@ -9,7 +11,7 @@ import { npm7 } from './npm7';
import { sbScripts } from './sb-scripts';
import { newFrameworks } from './new-frameworks';
import { removedGlobalClientAPIs } from './remove-global-client-apis';
import { Fix } from '../types';
import { mdx1to2 } from './mdx-1-to-2';

export * from '../types';

Expand All @@ -25,4 +27,5 @@ export const fixes: Fix[] = [
sbScripts,
newFrameworks,
removedGlobalClientAPIs,
mdx1to2,
];
50 changes: 50 additions & 0 deletions code/lib/cli/src/automigrate/fixes/mdx-1-to-2.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/// <reference types="@types/jest" />;

import { dedent } from 'ts-dedent';
import { fixMdxScript } from './mdx-1-to-2';

describe('fix', () => {
it('fixes badly-formatted style blocks', () => {
expect(
fixMdxScript(dedent`
<style>{\`
.foo {}
.bar {}
\`}</style>
`)
).toEqual(dedent`
<style>
{\`
.foo {}
.bar {}
\`}
</style>
`);
});

it('fixes multiple style blocks', () => {
expect(
fixMdxScript(dedent`
<style>{\`
.foo {}
\`}</style>
<style>{\`
.bar {}
\`}</style>
`)
).toMatchInlineSnapshot(`
<style>
{\`
.foo {}
\`}
</style>
<style>
{\`
.bar {}
\`}
</style>
`);
});
});
66 changes: 66 additions & 0 deletions code/lib/cli/src/automigrate/fixes/mdx-1-to-2.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import chalk from 'chalk';
import { dedent } from 'ts-dedent';
import { basename } from 'path';
import fse from 'fs-extra';
import globby from 'globby';
import type { Fix } from '../types';

const MDX1_SCRIPT_START = /<style>{`/g;
const MDX1_SCRIPT_END = /`}<\/style>/g;

export const fixMdxScript = (mdx: string) => {
return mdx.replace(MDX1_SCRIPT_START, '<style>\n {`').replace(MDX1_SCRIPT_END, ' `}\n</style>');
};

const logger = console;

interface Mdx1to2Options {
storiesMdxFiles: string[];
}

/**
* Does the user have `.stories.mdx` files?
*
* If so:
* - Assume they might be MDX1
* - Offer to help migrate to MDX2
*/
export const mdx1to2: Fix<Mdx1to2Options> = {
id: 'mdx1to2',

async check() {
const storiesMdxFiles = await globby('**/*.(story|stories).mdx');
return storiesMdxFiles.length ? { storiesMdxFiles } : undefined;
},

prompt({ storiesMdxFiles }) {
return dedent`
We've found ${chalk.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project.
Storybook has upgraded to MDX2 (https://mdxjs.com/blog/v2/), which contains breaking changes from V1.
We can try to automatically upgrade your MDX files to MDX2 format using some common patterns.
For a full guide for how to manually upgrade your files, see the MDX2 migration guide:
${chalk.cyan('https://mdxjs.com/migrating/v2/#update-mdx-files')}
`;
},

async run({ result: { storiesMdxFiles }, dryRun }) {
await Promise.all(
storiesMdxFiles.map(async (fname) => {
const contents = await fse.readFile(fname, 'utf-8');
const updated = fixMdxScript(contents);
if (updated === contents) {
logger.info(`🆗 Unmodified ${basename(fname)}`);
} else {
logger.info(`✅ Modified ${basename(fname)}`);
if (!dryRun) {
await fse.writeFile(fname, updated);
}
}
})
);
},
};

0 comments on commit b79e660

Please sign in to comment.