Update next and mdx

packages/layouts/package.json

@@ -50,7 +50,7 @@
     "@vanilla-extract/sprinkles": "^1.3.0",
     "clsx": "^2.0.0",
     "lodash-es": "^4.17.21",
-    "next": "^13.4.1",
+    "next": "^14.0.0",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {

packages/plugins/package.json

@@ -55,14 +55,14 @@
     "memfs": "^3.4.12",
     "react-docgen-typescript": "^2.2.2",
     "reading-time": "^1.5.0",
-    "remark": "^14.0.2",
-    "remark-directive": "^2.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-mdx": "^2.1.5",
-    "remark-parse": "^10.0.1",
-    "remark-stringify": "^10.0.2",
+    "remark": "^15.0.0",
+    "remark-directive": "^3.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-mdx": "^3.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-stringify": "^11.0.0",
     "rxjs": "^7.5.5",
-    "unified": "^10.1.2",
+    "unified": "^11.0.0",
     "unist-util-visit": "^5.0.0",
     "mdast-util-directive": "^3.0.0",
     "uuid": "^7.0.3",

packages/plugins/src/FragmentPlugin.ts

@@ -3,23 +3,29 @@ import type { Page, Plugin as PluginType } from '@jpmorganchase/mosaic-types';
 import { remark } from 'remark';
 import remarkMdx from 'remark-mdx';
 import remarkDirective from 'remark-directive';
+import type { Node } from 'unist';
 import { visit } from 'unist-util-visit';
-import type { Content, Root } from 'mdast';
+import type { RootContent, Root } from 'mdast';
+import { TextDirective, LeafDirective, ContainerDirective } from 'mdast-util-directive';
 import PluginError from './utils/PluginError.js';
 import { createPageTest } from './utils/createPageTest.js';
 
+function isDirective(node: Node): node is TextDirective | LeafDirective | ContainerDirective {
+  return (
+    node.type === 'containerDirective' ||
+    node.type === 'leafDirective' ||
+    node.type === 'textDirective'
+  );
+}
+
 function processFragments(
   tree: Root,
   pages: Page[],
   isNonHiddenPage: (path: string) => boolean,
   fullPath: string
 ) {
   visit(tree, (node, index, parent) => {
-    if (
-      node.type === 'containerDirective' ||
-      node.type === 'leafDirective' ||
-      node.type === 'textDirective'
-    ) {
+    if (isDirective(node)) {
       if (node.name !== 'fragment') return;
       const attributes = node.attributes ?? {};
       const { src } = attributes;
@@ -36,7 +42,7 @@ function processFragments(
         console.warn(`Invalid file reference: '${node.attributes.src}'. Skipping.`);
       } else {
         // Create a new node with the content from fragmentPage.content
-        const newNode: Content = {
+        const newNode: RootContent = {
           type: 'html',
           value: fragmentPage.content
         };

packages/site-components/package.json

@@ -36,7 +36,7 @@
     "@types/styled-components": "^5.1.26",
     "@vanilla-extract/esbuild-plugin": "^2.0.2",
     "del-cli": "^4.0.1",
-    "next-router-mock": "^0.9.2",
+    "next-router-mock": "^0.9.13",
     "typescript": "^4.8.3"
   },
   "dependencies": {
@@ -61,14 +61,14 @@
     "https-proxy-agent": "^5.0.1",
     "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "next": "^13.4.1",
-    "next-mdx-remote": "^4.2.1",
+    "next": "^14.0.0",
+    "next-mdx-remote": "^5.0.0",
     "node-cookie": "^2.1.2",
     "react-error-boundary": "^4.0.11",
-    "rehype-slug": "^5.0.1",
+    "rehype-slug": "^6.0.0",
     "swr": "^2.1.2",
-    "unified": "^10.0.0",
-    "unist-util-visit": "^2.0.0",
+    "unified": "^11.0.0",
+    "unist-util-visit": "^5.0.0",
     "warning": "^3.0.0"
   },
   "peerDependencies": {

packages/site-components/src/DocPaginator/__tests__/DocPaginator.test.tsx

@@ -3,7 +3,7 @@ import React, { PropsWithChildren } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvents from '@testing-library/user-event';
 import mockRouter from 'next-router-mock';
-import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider';
+import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider/next-13.5';
 import NextLink from 'next/link';
 import { LinkProvider } from '@jpmorganchase/mosaic-components';
 

packages/site-middleware/package.json

@@ -43,16 +43,22 @@
     "acorn": "^8.0.0",
     "acorn-jsx": "^5.0.0",
     "deepmerge": "^4.2.2",
+    "hast-util-properties-to-mdx-jsx-attributes": "^1.0.0",
     "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "next": "^13.4.1",
-    "next-mdx-remote": "^4.2.1",
+    "mdast-util-mdx": "^3.0.0",
+    "mdast-util-mdx-jsx": "^3.0.0",
+    "mdast-util-from-markdown": "^2.0.0",
+    "micromark-extension-mdxjs":"^3.0.0",
+    "next": "^14.0.0",
+    "next-mdx-remote": "^5.0.0",
     "node-cookie": "^2.1.2",
     "react-error-boundary": "^3.1.4",
-    "remark-gfm": "3.0.1",
-    "rehype-slug": "^5.0.1",
-    "unified": "^10.0.0",
-    "unist-util-visit": "^2.0.0",
+    "remark-gfm": "^4.0.0",
+    "rehype-slug": "^6.0.0",
+    "unified": "^11.0.0",
+    "unist-util-visit": "^5.0.0",
+    "unist-util-visit-parents": "^6.0.0",
     "warning": "^3.0.0"
   },
   "peerDependencies": {

packages/site-middleware/src/plugins/codeBlocks.ts

@@ -1,10 +1,12 @@
-import { Parser } from 'acorn';
-import jsx from 'acorn-jsx';
-import type { Code, Literal } from 'mdast';
-import { Plugin, Transformer } from 'unified';
-import visit from 'unist-util-visit';
-
-const parser = Parser.extend(jsx());
+import type { Root } from 'hast';
+import type { Plugin, Transformer } from 'unified';
+import { visitParents } from 'unist-util-visit-parents';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { mdxjs } from 'micromark-extension-mdxjs';
+import { mdxFromMarkdown } from 'mdast-util-mdx';
+import { type MdxJsxFlowElementHast } from 'mdast-util-mdx-jsx';
+// @ts-ignore
+import { propertiesToMdxJsxAttributes } from 'hast-util-properties-to-mdx-jsx-attributes';
 
 /**
  * Modified from: https://github.com/remcohaszing/remark-mdx-code-meta
@@ -20,27 +22,60 @@ const parser = Parser.extend(jsx());
  * meta.data.someStringOnlyAvailableAtRuntime
  * ```
  */
-export const transformer: Transformer = ast => {
-  visit<Code>(ast, 'code', (node, index, parent) => {
-    if (!node.meta) {
+export const transformer: Transformer<Root> = ast => {
+  visitParents(ast, 'element', (node, ancestors) => {
+    if (node.tagName !== 'code' && node.tagName !== 'pre') {
       return;
     }
-    // Limit eval to just basic strings that start with "meta."
-    const isEval =
-      /(^| )eval(="true"| |$)/.test(node.meta) && /^meta\.[a-z0-9_[\].$"']+$/i.test(node.value);
-
-    let code;
-    if (!isEval) {
-      code = JSON.stringify(`${node.value}\n`);
-    } else {
-      code = node.value;
+
+    const meta = node.data?.meta;
+
+    if (typeof meta !== 'string' || !meta) {
+      return;
     }
 
-    const codeProps = node.lang ? `className="language-${node.lang}"` : '';
-    const value = `<pre ${node.meta}><code ${codeProps}>{${code}}</code></pre>`;
-    const estree = parser.parse(value, { ecmaVersion: 'latest' });
-    // eslint-disable-next-line no-param-reassign
-    parent!.children[index] = { type: 'mdxFlowExpression', value, data: { estree } } as Literal;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    let parent = ancestors.at(-1)!;
+
+    if (parent.type !== 'element') {
+      return;
+    }
+
+    if (parent.tagName !== 'pre') {
+      return;
+    }
+
+    if (parent.children.length !== 1) {
+      return;
+    }
+
+    const child = parent;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    parent = ancestors.at(-2)!;
+
+    // // Limit eval to just basic strings that start with "meta."
+    // const isEval =
+    //   /(^| )eval(="true"| |$)/.test(meta) && /^meta\.[a-z0-9_[\].$"']+$/i.test(child.value);
+    //
+    // let code;
+    // if (!isEval) {
+    //   code = JSON.stringify(`${child.value}\n`);
+    // } else {
+    //   code = child.value;
+    // }
+
+    const replacement = fromMarkdown(`<${child.tagName} ${meta} />`, {
+      extensions: [mdxjs()],
+      mdastExtensions: [mdxFromMarkdown()]
+    }).children[0] as MdxJsxFlowElementHast;
+    replacement.children = child.children;
+    replacement.data = child.data;
+    replacement.position = child.position;
+    replacement.attributes.unshift(
+      ...propertiesToMdxJsxAttributes(child.properties, { elementAttributeNameCase: 'react' })
+    );
+
+    parent.children[parent.children.indexOf(child)] = replacement;
   });
 };
 
@@ -49,4 +84,4 @@ export const transformer: Transformer = ast => {
  *
  * @returns A unified transformer.
  */
-export const codeBlocks: Plugin<[]> = () => transformer;
+export const codeBlocks: Plugin<[], Root> = () => transformer;

packages/site/package.json

@@ -45,7 +45,7 @@
     "@salt-ds/core": "^1.33.0",
     "@salt-ds/lab": "1.0.0-alpha.50",
     "@types/react": "^18.0.26",
-    "next": "^13.4.1",
+    "next": "^14.0.0",
     "next-auth": "^4.24.5"
   },
   "devDependencies": {