Using MDXContent with remark-gfm

[PaulRBerg]

I am rendering a component that contains GitHub-flavored Markdown (specifically, tables):

import MDXContent from "@theme/MDXContent";

<MDXContent>{markdownTables}</MDXContent>

I added this to my Docusaurus config:

import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";

presets: [
    [
      "classic",
      {
        docs: {
          remarkPlugins: [remarkGfm, remarkMath],

But the result is that the GFT doesn't work. Why? What did I do wrong?

    "@docusaurus/core": "^3.7.0",
    "@docusaurus/plugin-client-redirects": "^3.7.0",
    "@docusaurus/plugin-vercel-analytics": "^3.7.0",
    "@docusaurus/preset-classic": "^3.7.0",
    "@docusaurus/theme-classic": "^3.7.0",
    "@docusaurus/theme-mermaid": "^3.7.0",
    "@mdx-js/react": "~3.0.1",
    "remark-gfm": "^4.0.1",

[PaulRBerg]

The fix was to use evaluate/evaluateSync from @mdx-js like this:

import * as runtime from "react/jsx-runtime";
import { evaluateSync } from "@mdx-js/mdx";

  const { default: Tables } = useMemo(() => {
    return evaluateSync(tables, { ...runtime, remarkPlugins: [remarkGfm] });
  }, [tables]);
  
  return <Tables />;

I think this is one area where the Docusaurus docs could be improved. There's little guidance on how to generate MDX content dynamically.

[PaulRBerg]

Providing a component like this would be helpful:

import { useMemo } from "react";
import * as runtime from "react/jsx-runtime";
import { evaluateSync } from "@mdx-js/mdx";
import remarkGfm from "remark-gfm";

interface GFMContentProps {
  content: string;
}

export default function GFMContent({ content }: GFMContentProps) {
  const { default: Content } = useMemo(() => {
    return evaluateSync(content, { ...runtime, remarkPlugins: [remarkGfm] });
  }, [content]);

  return <Content />;
}

[slorber]

Your solution looks weird to me, there's probably a better option.

It's not possible for me to judge if providing such a component could be useful because I don't understand what you want to do.

Remember Docusaurus also has a plugin system, and you can also use and publish npm packages. We'll only include something in our core package if there's enough traction for a feature, which remains to be proved.

[slorber]

You don't need to provide remark-gfm because it's already included by Docusaurus automatically

It's difficult to help you because I don't understand what markdownTables contains, and what the desired HTML or visual output you want.

Please provide a runnable docusaurus.new repro with all the code, that shows the problem, and what you want instead.

[PaulRBerg]

Hey @slorber thanks for your answer and for offering to help! Here's my full code — I am generating some Markdown tables. You can see the live output here.

Details

DeploymentTables.tsx

import { useMemo } from "react";
import type { Sablier } from "@sablier/deployments";
import { getChain, getChainName, getRelease } from "@sablier/deployments";
import GFMContent from "../atoms/GFMContent";
import DeploymentTable from "../molecules/DeploymentTable";

interface DeploymentTablesProps {
  protocol: Sablier.Protocol;
  type: "mainnets" | "testnets";
  version: Sablier.Version;
}

export default function DeploymentTables({ protocol, type, version }: DeploymentTablesProps) {
  const release = useMemo(() => getRelease(protocol, version), [protocol, version]);

  const filteredDeployments = useMemo(() => {
    const release = getRelease(protocol, version);
    if (!release) {
      return [];
    }
    const shouldLookForTestnets = type === "testnets";
    return release.deployments.filter((deployment) => {
      const chain: Sablier.Chain = getChain(deployment.chainId);
      return chain.isTestnet === shouldLookForTestnets;
    });
  }, [protocol, version, type]);

  if (!release) {
    return null;
  }

  return filteredDeployments.map((deployment) => {
    const chainName = getChainName(deployment.chainId);
    return (
      <div key={deployment.chainId}>
        <GFMContent content={`### ${chainName}\n\n`} />
        <DeploymentTable deployment={deployment} protocol={protocol} version={version} />
      </div>
    );
  });
}

DeploymentTable.tsx

import { useMemo } from "react";
import type { Sablier } from "@sablier/deployments";
import GFMContent from "../atoms/GFMContent";
import { BENCHMARKS_COMMIT, GITHUB_ORG, Links } from "../../constants";

interface DeploymentTableProps {
  deployment: Sablier.Deployment;
  protocol: Sablier.Protocol;
  version: Sablier.Version;
}

function generateDeploymentTable(deployment: Sablier.Deployment, protocol: string, version: string): string {
  let table = `| Contract | Address | Deployment |\n`;
  table += `| :------- | :------ | :--------- |\n`;

  for (const contract of deployment.contracts) {
    let address: string;
    if (contract.explorerURL) {
      address = `[\`${contract.address}\`](${contract.explorerURL})`;
    } else {
      address = `\`${contract.address}\``;
    }
    const link = `[\`${protocol}-${version}\`](${Links.GitHub.DEPLOYMENTS}/blob/main/data/${protocol}/${version})`;
    table += `| ${contract.name} | ${address} | ${link} |\n`;
  }

  return table;
}


export default function DeploymentTable({ deployment, protocol, version }: DeploymentTableProps) {
  const table = useMemo(() => {
    return generateDeploymentTable(deployment, protocol, version);
  }, [deployment, protocol, version]);

  return <GFMContent content={table} />;
}

[slorber]

I'm not sure to totally understand, because the page you linked to has this MDX source:

https://github.com/sablier-labs/docs/blob/main/docs/guides/lockup/02-deployments.mdx

And this source doesn't use any of your code above. Please give me the all the code references to look at so I understand how they all integrate together. If you have a WIP branch/PR, give me the link.

---

From my understanding, you are creating a dynamic markdown table string, and then trying to compile it with MDX inside a React component.

This is non-ideal for multiple reasons

• Your transformation is data -> md table -> React/JSX -> HTML while it could just be data -> React/JSX -> HTML
• You are shipping a full MDX parser/compiler in your frontend app, significantly increasing the bundle size

Is there any good reason to have this intermediate md table representation?

Why not simply use React/JSX to render the HTML table directly?

[PaulRBerg]

Sorry, I've shared a newer version of the DeploymentTables component that no longer corresponds to the design I employed when I started the discussion. I no longer have that version as I haven't kept it in version control.

At any rate. Your understanding of what I was doing is correct (dynamic MD table string, compiled with MDX inside React).

I guess I could just use an HTML table directly. That will definitely be more efficient (although the implementation will be slightly more verbose).

I'll do that! Thanks for your feedback.