Merge pull request #20349 from storybookjs/norbert/mdx2-comments-migr…

…ation

add auto-migration for MDX html-type comments to JS-type comments

code/lib/cli/src/automigrate/fixes/mdx-1-to-2.test.ts

@@ -1,19 +1,18 @@
 /// <reference types="@types/jest" />;
 
 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`
         <style>{\`
           .foo {}
         
           .bar {}
         \`}</style>
       `)
-    ).toEqual(dedent`
+  ).toEqual(dedent`
       <style>
         {\`
         .foo {}
@@ -22,19 +21,19 @@ describe('fix', () => {
         \`}
       </style>
     `);
-  });
+});
 
-  it('fixes multiple style blocks', () => {
-    expect(
-      fixMdxScript(dedent`
+it('fixMdxStyleTags fixes multiple style blocks', () => {
+  expect(
+    fixMdxStyleTags(dedent`
         <style>{\`
           .foo {}
         \`}</style>
         <style>{\`
           .bar {}
         \`}</style>
       `)
-    ).toMatchInlineSnapshot(`
+  ).toMatchInlineSnapshot(`
       <style>
         {\`
         .foo {}
@@ -46,5 +45,76 @@ describe('fix', () => {
         \`}
       </style>
     `);
-  });
+});
+
+it('fixMdxComments fixes all comments', () => {
+  expect(
+    fixMdxComments(dedent`
+      # Hello
+      
+      <!-- This is a comment -->
+
+      and this is not
+
+      <!-- This is another comment -->
+    `)
+  ).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
+      <!-- This is a comment -->
+      ~~~
+
+      ~~~html
+      <!-- This is a comment -->
+      ~~~
+
+      \`\`\`html
+      <!-- This is a comment -->
+      \`\`\`
+
+      \`\`\`html
+      <!-- This is a comment -->
+      \`\`\`
+
+      and this is not
+
+      <!-- This is another comment -->
+    `)
+  ).toMatchInlineSnapshot(`
+    "# Hello
+
+    ~~~html
+    <!-- This is a comment -->
+    ~~~
+
+    ~~~html
+    <!-- This is a comment -->
+    ~~~
+
+    \`\`\`html
+    <!-- This is a comment -->
+    \`\`\`
+
+    \`\`\`html
+    <!-- This is a comment -->
+    \`\`\`
+
+    and this is not
+
+    {/* This is another comment */}"
+  `);
 });

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 = /<style>{`/g;
-const MDX1_SCRIPT_END = /`}<\/style>/g;
+const MDX1_STYLE_START = /<style>{`/g;
+const MDX1_STYLE_END = /`}<\/style>/g;
+const MDX1_COMMENT = /<!--(.+)-->/g;
+const MDX1_CODEBLOCK = /(?:\n~~~(?:\n|.)*?\n~~~)|(?:\n```(?:\n|.)*?\n```)/g;
 
-export const fixMdxScript = (mdx: string) => {
-  return mdx.replace(MDX1_SCRIPT_START, '<style>\n  {`').replace(MDX1_SCRIPT_END, '  `}\n</style>');
+export const fixMdxStyleTags = (mdx: string) => {
+  return mdx.replace(MDX1_STYLE_START, '<style>\n  {`').replace(MDX1_STYLE_END, '  `}\n</style>');
+};
+
+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<Mdx1to2Options> = {
   },
 
   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<Mdx1to2Options> = {
             await fse.writeFile(fname, updated);
           }
         }
-      })
-    );
+      }),
+    ]);
   },
 };