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);
}
}
- })
- );
+ }),
+ ]);
},
};