diff --git a/code/lib/cli/src/automigrate/fixes/mdx-1-to-2.test.ts b/code/lib/cli/src/automigrate/fixes/mdx-1-to-2.test.ts index ea82440003f6..d3f1556f42b9 100644 --- a/code/lib/cli/src/automigrate/fixes/mdx-1-to-2.test.ts +++ b/code/lib/cli/src/automigrate/fixes/mdx-1-to-2.test.ts @@ -1,19 +1,18 @@ /// ; import { dedent } from 'ts-dedent'; -import { fixMdxScript } from './mdx-1-to-2'; +import { fixMdxStyleTags, fixMdxComments } from './mdx-1-to-2'; -describe('fix', () => { - it('fixes badly-formatted style blocks', () => { - expect( - fixMdxScript(dedent` +it('fixMdxStyleTags fixes badly-formatted style blocks', () => { + expect( + fixMdxStyleTags(dedent` `) - ).toEqual(dedent` + ).toEqual(dedent` `); - }); +}); - it('fixes multiple style blocks', () => { - expect( - fixMdxScript(dedent` +it('fixMdxStyleTags fixes multiple style blocks', () => { + expect( + fixMdxStyleTags(dedent` @@ -34,7 +33,7 @@ describe('fix', () => { .bar {} \`} `) - ).toMatchInlineSnapshot(` + ).toMatchInlineSnapshot(` `); - }); +}); + +it('fixMdxComments fixes all comments', () => { + expect( + fixMdxComments(dedent` + # Hello + + + + and this is not + + + `) + ).toMatchInlineSnapshot(` + "# Hello + + {/* This is a comment */} + + and this is not + + {/* This is another comment */}" + `); +}); + +it('fixMdxComments keeps html comments in codeblocks', () => { + expect( + fixMdxComments(dedent` + # Hello + + ~~~html + + ~~~ + + ~~~html + + ~~~ + + \`\`\`html + + \`\`\` + + \`\`\`html + + \`\`\` + + and this is not + + + `) + ).toMatchInlineSnapshot(` + "# Hello + + ~~~html + + ~~~ + + ~~~html + + ~~~ + + \`\`\`html + + \`\`\` + + \`\`\`html + + \`\`\` + + and this is not + + {/* This is another comment */}" + `); }); diff --git a/code/lib/cli/src/automigrate/fixes/mdx-1-to-2.ts b/code/lib/cli/src/automigrate/fixes/mdx-1-to-2.ts index 0702d0434df1..baa316241884 100644 --- a/code/lib/cli/src/automigrate/fixes/mdx-1-to-2.ts +++ b/code/lib/cli/src/automigrate/fixes/mdx-1-to-2.ts @@ -5,11 +5,28 @@ import fse from 'fs-extra'; import globby from 'globby'; import type { Fix } from '../types'; -const MDX1_SCRIPT_START = /'); +export const fixMdxStyleTags = (mdx: string) => { + return mdx.replace(MDX1_STYLE_START, ''); +}; + +export const fixMdxComments = (mdx: string) => { + const codeblocks = mdx.matchAll(MDX1_CODEBLOCK); + + // separate the mdx into sections without codeblocks & replace html comments NOT in codeblocks + const sections = mdx + .split(MDX1_CODEBLOCK) + .map((v) => v.replace(MDX1_COMMENT, (original, group) => `{/*${group}*/}`)); + + // interleave the original codeblocks with the replaced sections + return sections.reduce((acc, item, i) => { + const next = codeblocks.next(); + return next.done ? acc + item : acc + item + next.value[0]; + }, ''); }; const logger = console; @@ -48,10 +65,10 @@ export const mdx1to2: Fix = { }, async run({ result: { storiesMdxFiles }, dryRun }) { - await Promise.all( - storiesMdxFiles.map(async (fname) => { + await Promise.all([ + ...storiesMdxFiles.map(async (fname) => { const contents = await fse.readFile(fname, 'utf-8'); - const updated = fixMdxScript(contents); + const updated = fixMdxComments(fixMdxStyleTags(contents)); if (updated === contents) { logger.info(`🆗 Unmodified ${basename(fname)}`); } else { @@ -60,7 +77,7 @@ export const mdx1to2: Fix = { await fse.writeFile(fname, updated); } } - }) - ); + }), + ]); }, };