Addon Remark-GFM: Upgrade remark-gfm

code/addons/gfm/package.json

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@storybook/node-logger": "workspace:*",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

code/addons/gfm/src/index.ts

@@ -11,7 +11,7 @@ export const mdxLoaderOptions = async (config: any) => {
 };
 
 deprecate(dedent`
-  The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 7.0; and will likely be removed in a future version.
+  The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 8.0; and will likely be removed in a future version.
   It's recommended you read this document:
   https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
 

code/lib/codemod/package.json

@@ -71,15 +71,15 @@
   "devDependencies": {
     "@types/jscodeshift": "^0.11.10",
     "ansi-regex": "^5.0.1",
-    "mdast-util-mdx-jsx": "^2.1.2",
-    "mdast-util-mdxjs-esm": "^1.3.1",
-    "remark": "^14.0.2",
-    "remark-mdx": "^2.3.0",
+    "mdast-util-mdx-jsx": "^3.0.0",
+    "mdast-util-mdxjs-esm": "^2.0.1",
+    "remark": "^15.0.1",
+    "remark-mdx": "^3.0.0",
     "ts-dedent": "^2.2.0",
     "typescript": "^5.3.2",
-    "unist-util-is": "^5.2.0",
-    "unist-util-select": "^4.0.3",
-    "unist-util-visit": "^4.1.2",
+    "unist-util-is": "^6.0.0",
+    "unist-util-select": "^5.1.0",
+    "unist-util-visit": "^5.0.0",
     "util": "^0.12.4",
     "vfile": "^5.3.7"
   },

code/lib/codemod/src/transforms/mdx-to-csf.ts

@@ -2,7 +2,6 @@
 import type { FileInfo } from 'jscodeshift';
 import { babelParse, babelParseExpression } from '@storybook/csf-tools';
 import { remark } from 'remark';
-import type { Root } from 'remark-mdx';
 import remarkMdx from 'remark-mdx';
 import { SKIP, visit } from 'unist-util-visit';
 import { is } from 'unist-util-is';
@@ -79,11 +78,8 @@ export function transform(source: string, baseName: string): [string, string] {
 
   const file = getEsmAst(root);
 
-  // @ts-ignore
-  visit(
-    root,
-    ['mdxJsxFlowElement', 'mdxJsxTextElement'],
-    (node: MdxJsxFlowElement | MdxJsxTextElement, index, parent) => {
+  visit(root, ['mdxJsxFlowElement', 'mdxJsxTextElement'], (node, index, parent) => {
+    if (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') {
       if (is(node, { name: 'Meta' })) {
         metaAttributes.push(...node.attributes);
         node.attributes = [
@@ -136,7 +132,6 @@ export function transform(source: string, baseName: string): [string, string] {
             value: `/* ${nodeString} is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */`,
           };
           storiesMap.set(idAttribute.value as string, { type: 'id' });
-          // @ts-expect-error issue with mdast types
           parent?.children.splice(index as number, 0, newNode);
           // current index is the new comment, and index + 1 is current node
           // SKIP traversing current node, and continue with the node after that
@@ -168,9 +163,9 @@ export function transform(source: string, baseName: string): [string, string] {
           return [SKIP, index];
         }
       }
-      return undefined;
     }
-  );
+    return undefined;
+  });
 
   const metaProperties = metaAttributes.flatMap((attribute) => {
     if (attribute.type === 'mdxJsxAttribute') {
@@ -309,10 +304,9 @@ export function transform(source: string, baseName: string): [string, string] {
   return [newMdx, output];
 }
 
-function getEsmAst(root: Root) {
+function getEsmAst(root: ReturnType<typeof mdxProcessor.parse>) {
   const esm: string[] = [];
-  // @ts-expect-error (not valid BuildVisitor)
-  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+  visit(root, 'mdxjsEsm', (node) => {
     esm.push(node.value);
   });
   const esmSource = `${esm.join('\n\n')}`;
@@ -325,10 +319,13 @@ function getEsmAst(root: Root) {
   return file;
 }
 
-function addStoriesImport(root: Root, baseName: string, storyNamespaceName: string): void {
+function addStoriesImport(
+  root: ReturnType<typeof mdxProcessor.parse>,
+  baseName: string,
+  storyNamespaceName: string
+): void {
   let found = false;
-  // @ts-expect-error (not valid BuildVisitor)
-  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+  visit(root, 'mdxjsEsm', (node) => {
     if (!found) {
       node.value += `\nimport * as ${storyNamespaceName} from './${baseName}.stories';`;
       found = true;