} props
* Props
* @returns
* `div` element.
*/
export function Layout(props) {
return React.createElement("div", { ...props, style: { color: "red" } });
}
export default Layout;
================================================
FILE: tests/context/data.js
================================================
// the same test file taken from @mdx-js/mdx test files iot be inline with
/**
* Number.
*/
export const number = 3.14;
/**
* Object.
*/
export const object = { a: 1, b: 2 };
/**
* Array.
*/
export const array = [1, 2];
/**
* Number.
*/
export default 2 * number;
================================================
FILE: tests/test.MDXClient.spec.tsx
================================================
import { describe, expect, test } from "vitest";
import ReactDOMServer from "react-dom/server";
import { MDXClient } from "../src/csr";
import { serialize } from "../src/csr/serialize.js";
import { ErrorBoundary } from "./ErrorBoundaryForTests.js";
describe("MDXClient", () => {
test("works", async () => {
const mdxSource = await serialize({
source: "hi ",
options: {
scope: {
bar: "ipikuka",
},
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
const components = {
Test: ({ name }: { name: string }) => {name},
};
expect(
ReactDOMServer.renderToStaticMarkup(),
).toMatchInlineSnapshot(`"hi ipikuka
"`);
});
test("works with catchable errors", async () => {
const mdxSource = await serialize({
source: "import x from 'y'",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
const onError = ({ error }: { error: Error }) => {
return {error.message}
;
};
expect(() =>
ReactDOMServer.renderToStaticMarkup(),
).toThrowErrorMatchingInlineSnapshot(
`[SyntaxError: await is only valid in async functions and the top level bodies of modules]`,
);
expect(
ReactDOMServer.renderToStaticMarkup(),
).toMatchInlineSnapshot(
`"await is only valid in async functions and the top level bodies of modules
"`,
);
});
test("has problem working with uncatchable errors", async () => {
const mdxSource = await serialize({
source: "hi {bar}",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
const onError = ({ error }: { error: Error }) => {
return {error.message}
;
};
// throws error only during render
expect(() =>
ReactDOMServer.renderToStaticMarkup(),
).toThrowErrorMatchingInlineSnapshot(`[ReferenceError: bar is not defined]`);
// even the ErrorBoundary couldn't catch the error, don't know why?
expect(() =>
ReactDOMServer.renderToStaticMarkup(
Something went wrong}
onError={(error) => {
console.log(error);
}}
>
,
),
).toThrowErrorMatchingInlineSnapshot(`[ReferenceError: bar is not defined]`);
});
});
================================================
FILE: tests/test.MDXClientAsync.esm.spec.tsx
================================================
import { vi, describe, expect, test } from "vitest";
import type { ComponentProps } from "react";
import { render, screen, waitFor } from "@testing-library/react";
import { MDXClientAsync, type MDXComponents } from "../src/csr";
import { serialize } from "../src/csr/serialize.js";
import { ErrorBoundary } from "./ErrorBoundaryForTests.js";
describe("MDXClientAsync", () => {
const LoadingComponent = () => {
return loading
;
};
const ErrorComponent = ({ error }: { error: Error }) => {
return {error.message}
;
};
const mdxComponents = {
Test: ({ name }: { name: string }) => {name},
wrapper: (props: ComponentProps<"div"> & { components: MDXComponents }) => {
const { components, children, ...rest } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
return (
{children}
);
},
};
test("works as expected", async () => {
const mdxSource = await serialize({
source: "hi ",
options: {
scope: {
bar: "ipikuka",
},
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
render(
,
);
const loadingDiv = screen.queryByTestId("mdx-loading");
expect(loadingDiv?.innerHTML).toEqual("loading");
await waitFor(() => {
const layoutDiv = screen.queryByTestId("mdx-layout");
expect(layoutDiv?.innerHTML).toContain("hi ipikuka
");
});
});
test("works with catchable errors 1", async () => {
const mdxSource = await serialize({
source: "import x from 'y'",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
render(
,
);
const loadingDiv = screen.queryByTestId("mdx-loading");
expect(loadingDiv?.innerHTML).toEqual("loading");
await screen.findByTestId("mdx-error", {}, { timeout: 2000 });
expect(screen.queryByTestId("mdx-error")).toMatchInlineSnapshot(`
Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`
`);
});
test("works with catchable errors 2", async () => {
const mdxSource = await serialize({
source: "import x from 'y'",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
render(
,
);
const loadingDiv = screen.queryByTestId("mdx-loading");
expect(loadingDiv?.innerHTML).toEqual("loading");
await screen.findByTestId("mdx-error", {}, { timeout: 2000 });
expect(screen.queryByTestId("mdx-error")?.innerHTML).toContain(
"Cannot find package 'y' imported from",
);
});
test("uncatchable runtime error", async () => {
const mdxSource = await serialize({
source: "hi {bar}",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
const onError = vi.fn();
render(
Something went wrong}
onError={onError}
>
,
);
const loadingDiv = screen.queryByTestId("mdx-loading");
expect(loadingDiv).toHaveTextContent("loading");
expect(loadingDiv?.innerHTML).toEqual("loading");
await waitFor(() =>
expect(onError).toHaveBeenCalledWith(
expect.objectContaining({
name: "ReferenceError",
message: expect.stringContaining("bar is not defined"),
}),
expect.objectContaining({
componentStack: expect.stringContaining("_createMdxContent"),
}),
),
);
const errorDiv = await screen.findByTestId("mdx-error", {}, { timeout: 2000 });
expect(errorDiv).toHaveTextContent("Something went wrong");
expect(errorDiv.innerHTML).toEqual("Something went wrong");
expect(consoleErrorSpy).toHaveBeenCalled();
consoleErrorSpy.mockRestore();
});
});
================================================
FILE: tests/test.MDXClientLazy.spec.tsx
================================================
import { vi, describe, expect, test } from "vitest";
import type { ComponentProps } from "react";
import { render, screen, waitFor } from "@testing-library/react";
import { MDXClientLazy, type MDXComponents } from "../src/csr";
import { serialize } from "../src/csr/serialize.js";
import { ErrorBoundary } from "./ErrorBoundaryForTests.js";
describe("MDXClientLazy", () => {
const ErrorComponent = ({ error }: { error: Error }) => {
return {error.message}
;
};
const mdxComponents = {
Test: ({ name }: { name: string }) => {name},
wrapper: (props: ComponentProps<"div"> & { components: MDXComponents }) => {
const { components, children, ...rest } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
return (
{children}
);
},
};
test("works as expected", async () => {
const mdxSource = await serialize({
source: "hi ",
options: {
scope: {
bar: "ipikuka",
},
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
render(
,
);
await waitFor(() => {
const layoutDiv = screen.queryByTestId("mdx-layout");
expect(layoutDiv?.innerHTML).toContain("hi ipikuka
");
});
});
test("works with catchable errors", async () => {
const mdxSource = await serialize({
source: "import x from 'y'",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
render(
,
);
const errorDiv = await screen.findByTestId("mdx-error", {}, { timeout: 2000 });
expect(errorDiv).toMatchInlineSnapshot(`
await is only valid in async functions and the top level bodies of modules
`);
});
test("uncatchable runtime error", async () => {
const mdxSource = await serialize({
source: "hi {bar}",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
const onError = vi.fn();
render(
Something went wrong}
onError={onError}
>
,
);
await waitFor(() =>
expect(onError).toHaveBeenCalledWith(
expect.objectContaining({
name: "ReferenceError",
message: expect.stringContaining("bar is not defined"),
}),
expect.objectContaining({
componentStack: expect.stringContaining("_createMdxContent"),
}),
),
);
const errorDiv = await screen.findByTestId("mdx-error");
expect(errorDiv).toHaveTextContent("Something went wrong");
expect(consoleErrorSpy).toHaveBeenCalled();
consoleErrorSpy.mockRestore();
});
});
================================================
FILE: tests/test.MDXProvider.spec.tsx
================================================
import { describe, expect, test } from "vitest";
import React from "react";
import ReactDOMServer from "react-dom/server";
import { serialize } from "../src/csr/serialize.js";
import { MDXClient, MDXProvider, type MDXComponents } from "../src/csr/index.js";
// the test cases are taken from `@mdx-js/react`for reference
describe("MDXProvider", () => {
test("should support `components` with `MDXProvider`", async () => {
const mdxSource = await serialize({
source: "# hi",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(
ReactDOMServer.renderToStaticMarkup(
;
},
}}
>
,
),
'hi
',
);
});
test("should support `wrapper` in `components`", async () => {
const mdxSource = await serialize({
source: "# hi",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
const CustomWrapper = (
props: React.JSX.IntrinsicElements["div"] & { components: MDXComponents },
) => {
const { components, ...rest } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
return ;
};
expect(
ReactDOMServer.renderToStaticMarkup(
,
),
'hi
',
);
});
test("should combine components in nested `MDXProvider`s", async () => {
const mdxSource = await serialize({
source: "# hi\n## hello",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(
ReactDOMServer.renderToStaticMarkup(
;
},
h2(properties) {
return ;
},
}}
>
;
},
}}
>
,
),
'hi
\nhello
',
);
});
test("should support components as a function", async () => {
const mdxSource = await serialize({
source: "# hi\n## hello",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(
ReactDOMServer.renderToStaticMarkup(
;
},
h2(properties) {
return ;
},
}}
>
;
},
};
}}
>
,
),
'hi
\nhello
',
);
});
test("should support a `disableParentContext` prop (sandbox)", async () => {
const mdxSource = await serialize({
source: "# hi",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(
ReactDOMServer.renderToStaticMarkup(
;
},
}}
>
,
),
"hi
",
);
});
test("should support a `disableParentContext` *and* `components` as a function", async () => {
const mdxSource = await serialize({
source: "# hi\n## hello",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(
ReactDOMServer.renderToStaticMarkup(
;
},
}}
>
;
},
};
}}
>
,
),
'hi
\nhello
',
);
});
});
================================================
FILE: tests/test.MDXRemote.esm.spec.tsx
================================================
import { describe, expect, test } from "vitest";
import React from "react";
import ReactDOMServer from "react-dom/server";
import { render, screen } from "@testing-library/react";
import { MDXRemote, type MDXRemoteOptions, type MDXComponents } from "../src/rsc";
import { renderToStringFromStream } from "./utils";
describe("MDXRemote", () => {
// const LoadingComponent = () => {
// return loading
;
// };
const ErrorComponent = ({ error }: { error: Error }) => {
return {error.message}
;
};
const mdxComponents = {
Test: ({ name }: { name: string }) => {name},
wrapper: (props: React.ComponentProps<"div"> & { components: MDXComponents }) => {
const { components, children, ...rest } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
return (
{children}
);
},
};
test("works (as func)", async () => {
const source = "hi ";
const options: MDXRemoteOptions = {
scope: {
bar: "ipikuka",
},
};
const content = await MDXRemote({
source,
options,
components: mdxComponents,
onError: ErrorComponent,
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
test("works (as jsx)", async () => {
const source = "hi ";
const options: MDXRemoteOptions = {
scope: {
bar: "ipikuka",
},
};
const element = (
);
expect(await renderToStringFromStream(element)).toMatchInlineSnapshot(
`""`,
);
});
test("works with catchable error but no Error Component (as func)", async () => {
const source = "import x from 'y'";
try {
await MDXRemote({
source,
components: mdxComponents,
});
} catch (error) {
expect(error).toMatchInlineSnapshot(
`[Error: Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`]`,
);
}
// second way
await expect(
MDXRemote({
source,
components: mdxComponents,
}),
).rejects.toThrowErrorMatchingInlineSnapshot(
`[Error: Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`]`,
);
});
test("works with catchable error but no Error Component (as jsx)", async () => {
const source = "import x from 'y'";
const element = ;
try {
await renderToStringFromStream(element);
} catch (error) {
expect(error).toMatchInlineSnapshot(
`[Error: Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`]`,
);
}
// second way
await expect(renderToStringFromStream(element)).rejects.toThrowErrorMatchingInlineSnapshot(
`[Error: Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`]`,
);
});
test("works with catchable error, with Error component (as func)", async () => {
const source = "import x from 'y'";
const content = await MDXRemote({
source,
components: mdxComponents,
onError: ErrorComponent,
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`
"`,
);
});
test("works with catchable error, with Error component (as jsx)", async () => {
const source = "import x from 'y'";
const element = (
);
expect(await renderToStringFromStream(element)).toMatchInlineSnapshot(
`"Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`
"`,
);
});
test("catchable error (as func)", async () => {
const source = "import x from 'y'";
const options: MDXRemoteOptions = {
mdxOptions: {
baseUrl: import.meta.url,
},
};
const content = await MDXRemote({
source,
options,
components: mdxComponents,
onError: ErrorComponent,
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toContain("Cannot find package");
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatch(/Cannot find package/);
// just for testing it with @testing-library
render(content);
expect(screen.getByTestId("mdx-error")).toHaveTextContent("Cannot find package 'y'");
});
test("catchable error (as jsx)", async () => {
const source = "import x from 'y'";
const options: MDXRemoteOptions = {
mdxOptions: {
baseUrl: import.meta.url,
},
};
const element = (
);
const content = await renderToStringFromStream(element);
expect(content).toContain("Cannot find package");
expect(content).toMatch(/Cannot find package/);
// just for testing it with @testing-library
render();
expect(screen.getByTestId("mdx-error")).toBeInTheDocument();
expect(screen.getByTestId("mdx-error")).toHaveTextContent("Cannot find package 'y'");
});
test("uncatchable error (as func)", async () => {
const source = "hi {bar}";
const content = await MDXRemote({
source,
components: mdxComponents,
onError: ErrorComponent,
});
expect(() =>
ReactDOMServer.renderToStaticMarkup(content),
).toThrowErrorMatchingInlineSnapshot(`[ReferenceError: bar is not defined]`);
});
test("uncatchable error (as jsx)", async () => {
const source = "hi {bar}";
const element = (
);
await expect(renderToStringFromStream(element)).rejects.toThrowErrorMatchingInlineSnapshot(
`[ReferenceError: bar is not defined]`,
);
});
});
================================================
FILE: tests/test.MDXRemote.spec.tsx
================================================
import { vi, describe, test, expect } from "vitest";
import type { Plugin } from "unified";
import { VFile } from "vfile";
import dedent from "dedent";
import remarkEmoji from "remark-emoji";
import remarkFlexibleMarkers from "remark-flexible-markers";
import recmaMdxChangeProps from "recma-mdx-change-props";
import recmaMdxEscapeMissingComponents from "recma-mdx-escape-missing-components";
import { MDXRemote, type MDXRemoteOptions, type MDXComponents } from "../src/rsc";
import { compile } from "../src/lib/compile";
import { renderToStringFromStream } from "./utils";
describe("MDXRemote", () => {
test("simple", async () => {
const source = "foo **bar**";
const element = ;
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`"foo bar
"`);
});
test("with component 1", async () => {
const source = 'foo ';
const element = (
hello {name},
}}
/>
);
// React inserts a comment in streaming SSR to separate adjacent text nodes.
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`"foo hello test
"`);
const contentStrippedComments = await renderToStringFromStream(element, {
stripReactSSRComments: true,
});
expect(contentStrippedComments).toMatchInlineSnapshot(
`"foo hello test
"`,
);
});
test("with component 2", async () => {
const source = 'foo ';
const element = (
{`hello ${name}`},
}}
/>
);
// strpping comment is NOT needed because the text is concatenated into a single node.
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`"foo hello test
"`);
});
test("with some remarkPlugins in mdxOptions", async () => {
const source = "==hello :tada: Talat Kuyuk==";
const options: MDXRemoteOptions = {
mdxOptions: {
remarkPlugins: [remarkFlexibleMarkers, remarkEmoji],
},
};
const element = ;
const content = await renderToStringFromStream(element, { stripReactSSRComments: true });
expect(content).toMatchInlineSnapshot(
`"hello 🎉 Talat Kuyuk
"`,
);
});
test("with scope", async () => {
const source = "hi {bar}";
const options: MDXRemoteOptions = {
scope: {
bar: "ipikuka",
},
};
const element = ;
const content = await renderToStringFromStream(element, { stripReactSSRComments: true });
expect(content).toMatchInlineSnapshot(`"hi ipikuka
"`);
});
test("with scope and component", async () => {
const source = "hi ";
const options: MDXRemoteOptions = {
scope: {
bar: "ipikuka",
},
};
const components = {
Test: ({ name }: { name: string }) => {name},
};
const element = ;
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`"hi ipikuka
"`);
});
test("with scope in which consists props key escaped with no reason", async () => {
const source = dedent`
Hi {props.bar}
`;
const options: MDXRemoteOptions = {
scope: {
props: {
bar: "barbar",
foo: "foofoo",
},
},
};
const components = {
Test: ({ name }: { name: string }) => {name},
};
const element = ;
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`
"Hi
"
`);
});
test("with scope in which consists props key works as expected using a recma plugin", async () => {
const source = dedent`
Hi {props.bar}
`;
const options: MDXRemoteOptions = {
scope: {
props: {
bar: "barbar",
foo: "foofoo",
},
},
mdxOptions: {
recmaPlugins: [recmaMdxChangeProps],
},
};
const components = {
Test: ({ name }: { name: string }) => {name},
};
const element = ;
const content = await renderToStringFromStream(element, { stripReactSSRComments: true });
expect(content).toMatchInlineSnapshot(`
"Hi barbar
foofoo"
`);
});
test("with frontmatter supplying frontmatter's type argument", async () => {
const source = dedent`
---
title: 'My Article'
---
## {frontmatter.title}
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
};
const element = ;
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`
"My Article
"
`);
});
test("with frontmatter and scope", async () => {
const source = dedent`
---
title: 'My Article'
---
# {frontmatter.title}
Hi *{name}*
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
scope: { name: "Talat Kuyuk" },
};
const element = ;
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`
"My Article
Hi Talat Kuyuk
"
`);
});
test("strips any undefined frontmatters without giving an error", async () => {
const source = dedent`
---
title: 'My Article'
---
The title is {frontmatter.title} and {frontmatter.subtitle}.
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
};
const element = ;
const content = await renderToStringFromStream(element, { stripReactSSRComments: true });
expect(content).toMatchInlineSnapshot(`
"The title is My Article and .
"
`);
});
test("supports component names with a dot(.)", async () => {
const source = "";
const components: MDXComponents = {
// @ts-ignore no match for the signature
motion: { p: () => Hello world
},
};
const element = ;
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`
"Hello world
"
`);
});
test("renders fragments", async () => {
const source = "Renders fragments} />";
const components = {
Test: ({ content }: { content: string }) => <>{content},
};
const element = ;
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`
"Renders fragments"
`);
});
test("supports VFile", async () => {
const source = new VFile("foo **bar**");
const element = ;
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`
"foo bar
"
`);
});
test("supports Buffer", async () => {
const source = Buffer.from("foo **bar**");
const element = ;
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`
"foo bar
"
`);
});
test("debug compiled source", async () => {
const logSpy = vi.spyOn(console, "log").mockImplementation(() => {});
const result = await compile(new VFile("Hi"));
await renderToStringFromStream(
,
);
expect(logSpy).toHaveBeenCalledTimes(1);
expect(logSpy).toHaveBeenCalledWith(String(result.compiledSource));
logSpy.mockRestore(); // Restore original console.log behavior
});
});
describe("vfileDataIntoScope in MDXRemote function, no scope but vfileDataIntoScope injects data into scope", () => {
const remarkAddBarFoo: Plugin = () => (_, file) => {
file.data["bar"] = "barbar";
file.data["foo"] = "foofoo";
};
test("Throw error for missing expression in scope, no 'vfileDataIntoScope'", async () => {
const source = dedent`
---
title: 'My Article'
---
# {frontmatter.title} {bar} {foo}
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
mdxOptions: {
remarkPlugins: [remarkAddBarFoo],
},
};
const element = ;
try {
await renderToStringFromStream(element);
} catch (error) {
// Because the first non-exist expression in scope is bar in the content
expect(error).toMatchInlineSnapshot(`[ReferenceError: bar is not defined]`);
}
});
test("Throw error for missing expression in scope, no cover 'vfileDataIntoScope' - string", async () => {
const source = dedent`
---
title: 'My Article'
---
# {frontmatter.title} {bar} {foo}
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
vfileDataIntoScope: "bar",
mdxOptions: {
remarkPlugins: [remarkAddBarFoo],
},
};
const element = ;
try {
await renderToStringFromStream(element);
} catch (error) {
// Because, bar is in scope (thanks to vfileDataIntoScope), but foo
expect(error).toMatchInlineSnapshot(`[ReferenceError: foo is not defined]`);
}
});
test("works with the option 'vfileDataIntoScope' - string array", async () => {
const source = dedent`
---
title: 'My Article'
---
# {frontmatter.title} {bar} {foo}
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
vfileDataIntoScope: ["bar", "foo"],
mdxOptions: {
remarkPlugins: [remarkAddBarFoo],
},
};
const element = ;
const content = await renderToStringFromStream(element, { stripReactSSRComments: true });
expect(content).toMatchInlineSnapshot(`"My Article barbar foofoo
"`);
});
test("works with the option 'vfileDataIntoScope' - boolean true", async () => {
const source = dedent`
---
title: 'My Article'
---
# {frontmatter.title} {bar} {foo}
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
vfileDataIntoScope: true,
mdxOptions: {
remarkPlugins: [remarkAddBarFoo],
},
};
const element = ;
const content = await renderToStringFromStream(element, { stripReactSSRComments: true });
expect(content).toMatchInlineSnapshot(`"My Article barbar foofoo
"`);
});
test("works the option 'vfileDataIntoScope' - object", async () => {
const source = dedent`
---
title: 'My Article'
---
# {mymatter.title}
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
vfileDataIntoScope: { name: "matter", as: "mymatter" },
};
// file.matter is created by `parseFrontmatter: true`
// vfileDataIntoScope injects it as `mymatter` into scope
const element = ;
const content = await renderToStringFromStream(element, { stripReactSSRComments: true });
expect(content).toMatchInlineSnapshot(`"My Article
"`);
});
test("works the option 'vfileDataIntoScope' - object array", async () => {
const source = dedent`
---
title: 'My Article'
---
# {frontmatter.title} {newbar} {newfoo}
`;
const options: MDXRemoteOptions = {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: [
{ name: "bar", as: "newbar" },
{ name: "foo", as: "newfoo" },
],
mdxOptions: {
remarkPlugins: [remarkAddBarFoo],
},
};
const element = ;
const content = await renderToStringFromStream(element, { stripReactSSRComments: true });
expect(content).toMatchInlineSnapshot(`"My Article barbar foofoo
"`);
});
test("works the option 'vfileDataIntoScope' - mixed array", async () => {
const source = dedent`
---
title: 'My Article'
---
# {frontmatter.title} {bar} {newfoo}
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
vfileDataIntoScope: ["bar", { name: "foo", as: "newfoo" }],
mdxOptions: {
remarkPlugins: [remarkAddBarFoo],
},
};
const element = ;
const content = await renderToStringFromStream(element, { stripReactSSRComments: true });
expect(content).toMatchInlineSnapshot(`"My Article barbar foofoo
"`);
});
});
describe("error handling in MDXRemote", () => {
const ErrorComponent = ({ error }: { error: Error }) => {
return {error.message}
;
};
test("prints helpful message from compile MDX error, no Error component", async () => {
const source = dedent`
---
title: 'My Article'
---
This is very bad syntax
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
};
const element = ;
try {
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(); // above render throwed error, so no content
} catch (error) {
// The error is thrown as a raw Error object (not rendered to HTML)
expect(error).toMatchInlineSnapshot(`
[Error: [next-mdx-remote-client] error compiling MDX:
Expected a closing tag for \`\` (1:25-1:38) before the end of \`paragraph\`
> 1 | This is very bad syntax
| ^
More information: https://mdxjs.com/docs/troubleshooting-mdx]
`);
}
// the second way of testing
await expect(renderToStringFromStream(element)).rejects.toMatchInlineSnapshot(`
[Error: [next-mdx-remote-client] error compiling MDX:
Expected a closing tag for \`\` (1:25-1:38) before the end of \`paragraph\`
> 1 | This is very bad syntax
| ^
More information: https://mdxjs.com/docs/troubleshooting-mdx]
`);
});
test("prints helpful message from compile MDX error, with Error component", async () => {
// This test shows that MDX syntax errors are catched by `next-mdx-remote-client`
const source = dedent`
---
title: 'My Article'
---
This is very bad syntax
`;
const options: MDXRemoteOptions = {
parseFrontmatter: true,
};
const element = ;
const content = await renderToStringFromStream(element);
// The error is rendered inside a React component (ErrorComponent) and thus HTML-escaped by React
expect(content).toMatchInlineSnapshot(`
"[next-mdx-remote-client] error compiling MDX:
Expected a closing tag for \`<GITHUB_USER>\` (1:25-1:38) before the end of \`paragraph\`
> 1 | This is very bad syntax <GITHUB_USER>
| ^
More information: https://mdxjs.com/docs/troubleshooting-mdx
"
`);
});
test("missing a scope value causes runtime error during render, no Error component", async () => {
const source = "hi {bar}";
const element = ;
try {
const content = await renderToStringFromStream(element); // the render throws an error
expect(content).toMatchInlineSnapshot(); // so no content
} catch (error) {
expect(error).toMatchInlineSnapshot(`[ReferenceError: bar is not defined]`);
}
// the second way of testing
await expect(renderToStringFromStream(element)).rejects.toThrowErrorMatchingInlineSnapshot(
`[ReferenceError: bar is not defined]`,
);
});
test("missing a scope value causes runtime error during render, with Error component", async () => {
// This test shows that a runtime error can not be catched by `next-mdx-remote-client`
const source = "hi {bar}";
const element = ;
try {
const content = await renderToStringFromStream(element); // the render throws an error
expect(content).toMatchInlineSnapshot(); // so no content
} catch (error) {
expect(error).toMatchInlineSnapshot(`[ReferenceError: bar is not defined]`);
}
// the second way of testing
await expect(renderToStringFromStream(element)).rejects.toThrowErrorMatchingInlineSnapshot(
`[ReferenceError: bar is not defined]`,
);
});
test("missing a component causes runtime error during render, no Error component", async () => {
const source = "hi ";
const element = ;
try {
const content = await renderToStringFromStream(element); // the render throws an error
expect(content).toMatchInlineSnapshot(); // so no content
} catch (error) {
expect(error).toMatchInlineSnapshot(
`[Error: Expected component \`Test\` to be defined: you likely forgot to import, pass, or provide it.]`,
);
}
// the second way of testing
await expect(renderToStringFromStream(element)).rejects.toThrowErrorMatchingInlineSnapshot(
`[Error: Expected component \`Test\` to be defined: you likely forgot to import, pass, or provide it.]`,
);
});
test("missing a component causes runtime error during render, with Error component", async () => {
// This test shows that a runtime error can not be catched by `next-mdx-remote-client`
const source = "hi ";
const element = ;
try {
const content = await renderToStringFromStream(element); // the render throws an error
expect(content).toMatchInlineSnapshot(); // so no content
} catch (error) {
expect(error).toMatchInlineSnapshot(
`[Error: Expected component \`Test\` to be defined: you likely forgot to import, pass, or provide it.]`,
);
}
// the second way of testing
await expect(renderToStringFromStream(element)).rejects.toThrowErrorMatchingInlineSnapshot(
`[Error: Expected component \`Test\` to be defined: you likely forgot to import, pass, or provide it.]`,
);
});
test("missing components can be escaped via a recma plugin without giving runtime error", async () => {
const source = "hi ";
const element = (
);
const content = await renderToStringFromStream(element);
expect(content).toMatchInlineSnapshot(`"hi
"`);
});
});
================================================
FILE: tests/test.compile.spec.tsx
================================================
import { describe, test, expect } from "vitest";
import dedent from "dedent";
import { compile } from "../src/lib/compile";
import { prepare } from "../src/lib/prepare";
type Frontmatter = { title: string };
describe("the result of the compile function", () => {
test("has import statement but without enableImports option", async () => {
const source = dedent`
---
title: 'Hello World'
---
import abc from "./xxx.js"
# Hi {name}
`;
const { vfile, frontmatter } = prepare(source, true);
const result = await compile(vfile, {
disableImports: true,
});
// test the frontmatter *******************************
expect(frontmatter.title).toEqual("Hello World");
// @ts-expect-error
expect(frontmatter.blah).toBeUndefined();
// test the compiledSource ****************************
const compiledSource = dedent`
"use strict";
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
const _components = {
h1: "h1",
...props.components
};
return _jsxs(_components.h1, {
children: ["Hi ", name]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
`;
expect(String(result.compiledSource)).toContain(compiledSource);
});
test("has import statement, but baseURL is not defined", async () => {
const source = dedent`
---
title: 'Hello World'
---
import abc from "./xxx.js"
# Hi {name}
`;
const { vfile, frontmatter } = prepare(source, true);
const result = await compile(vfile, {
mdxOptions: {
// baseUrl: import.meta.url, // <---- disabling this makes happen to add const _importMetaUrl = arguments[0].baseUrl;
},
});
// test the frontmatter *******************************
expect(frontmatter.title).toEqual("Hello World");
// @ts-expect-error
expect(frontmatter.blah).toBeUndefined();
// test the compiledSource ****************************
const compiledSource = dedent`
"use strict";
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
const _importMetaUrl = arguments[0].baseUrl;
if (!_importMetaUrl) throw new Error("Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`");
const {default: abc} = await import(_resolveDynamicMdxSpecifier("./xxx.js"));
function _createMdxContent(props) {
const _components = {
h1: "h1",
...props.components
};
return _jsxs(_components.h1, {
children: ["Hi ", name]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
function _resolveDynamicMdxSpecifier(d) {
if (typeof d !== "string") return d;
try {
new URL(d);
return d;
} catch {}
if (d.startsWith("/") || d.startsWith("./") || d.startsWith("../")) return new URL(d, _importMetaUrl).href;
return d;
}
`;
expect(String(result.compiledSource)).toContain(compiledSource);
});
test("has import statement, and baseURL is defined", async () => {
const source = dedent`
---
title: 'Hello World'
---
import abc from "./xxx.js"
# Hi {name}
`;
const { vfile, frontmatter } = prepare(source, true);
const result = await compile(vfile, {
mdxOptions: {
baseUrl: import.meta.url,
},
});
// test the frontmatter *******************************
expect(frontmatter.title).toEqual("Hello World");
// @ts-expect-error
expect(frontmatter.blah).toBeUndefined();
// test the compiledSource ****************************
const compiledSource = dedent`
"use strict";
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {default: abc} = await import(_resolveDynamicMdxSpecifier("./xxx.js"));
function _createMdxContent(props) {
const _components = {
h1: "h1",
...props.components
};
return _jsxs(_components.h1, {
children: ["Hi ", name]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
function _resolveDynamicMdxSpecifier(d) {
if (typeof d !== "string") return d;
try {
new URL(d);
return d;
} catch {}
if (d.startsWith("/") || d.startsWith("./") || d.startsWith("../")) return new URL(d, "file:`;
expect(String(result.compiledSource)).toContain(compiledSource);
});
test("has NO import statement, baseURL is not defined", async () => {
const source = dedent`
---
title: 'Hello World'
---
# Hi {name}
`;
const { vfile } = prepare(source, true);
const result = await compile(vfile);
// test the compiledSource ****************************
const compiledSource = dedent`
"use strict";
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
const _components = {
h1: "h1",
...props.components
};
return _jsxs(_components.h1, {
children: ["Hi ", name]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
`;
expect(String(result.compiledSource)).toContain(compiledSource);
});
test("has NO import statement, baseURL definition does not lead to change", async () => {
const source = dedent`
---
title: 'Hello World'
---
# Hi {name}
`;
const { vfile } = prepare(source, true);
const result = await compile(vfile, {
mdxOptions: {
baseUrl: import.meta.url,
},
});
// test the compiledSource ****************************
const compiledSource = dedent`
"use strict";
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
const _components = {
h1: "h1",
...props.components
};
return _jsxs(_components.h1, {
children: ["Hi ", name]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
`;
expect(String(result.compiledSource)).toContain(compiledSource);
});
test("more paragraph needs Fragment", async () => {
const source = dedent`
---
title: 'Hello World'
---
# Hi {name}
More paragraph
`;
const { vfile } = prepare(source, true);
const result = await compile(vfile);
// test the compiledSource ****************************
const compiledSourceInitialPart = dedent`
"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
`;
expect(String(result.compiledSource)).toContain(compiledSourceInitialPart);
});
test("providerImportSource option is defined", async () => {
const source = dedent`
---
title: 'Hello World'
---
import abc from "./xxx.js"
# Hi {name}
`;
const { vfile, frontmatter } = prepare(source, true);
const result = await compile(vfile, {
mdxOptions: {
baseUrl: import.meta.url,
providerImportSource: "#", // <--- here, this makes happen to add "useMDXComponents" into the code
},
});
// test the frontmatter *******************************
expect(frontmatter.title).toEqual("Hello World");
// @ts-expect-error
expect(frontmatter.blah).toBeUndefined();
// test the compiledSource ****************************
const compiledSource = dedent`
"use strict";
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
const {default: abc} = await import(_resolveDynamicMdxSpecifier("./xxx.js"));
function _createMdxContent(props) {
const _components = {
h1: "h1",
..._provideComponents(),
...props.components
};
return _jsxs(_components.h1, {
children: ["Hi ", name]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = {
..._provideComponents(),
...props.components
};
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
function _resolveDynamicMdxSpecifier(d) {
if (typeof d !== "string") return d;
try {
new URL(d);
return d;
} catch {}
if (d.startsWith("/") || d.startsWith("./") || d.startsWith("../")) return new URL(d, "file:`;
expect(String(result.compiledSource)).toContain(compiledSource);
});
test("development option is true", async () => {
const source = dedent`
---
title: 'Hello World'
---
# Hi {name}
`;
const { vfile } = prepare(source, true);
const result = await compile(vfile, {
mdxOptions: {
development: true,
},
});
// test the compiledSource ****************************
const compiledSource = dedent`
"use strict";
const {jsxDEV: _jsxDEV} = arguments[0];
function _createMdxContent(props) {
const _components = {
h1: "h1",
...props.components
};
return _jsxDEV(_components.h1, {
children: ["Hi ", name]
}, undefined, true, {
fileName: "",
lineNumber: 1,
columnNumber: 1
}, this);
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsxDEV(MDXLayout, {
...props,
children: _jsxDEV(_createMdxContent, {
...props
}, undefined, false, {
fileName: ""
}, this)
}, undefined, false, {
fileName: ""
}, this) : _createMdxContent(props);
}
return {
default: MDXContent
};
`;
expect(String(result.compiledSource)).toContain(compiledSource);
});
test("has import statement, development option is true", async () => {
const source = dedent`
---
title: 'Hello World'
---
import abc from "./xxx.js"
# Hi {name}
More paragraph
`;
const { vfile } = prepare(source, true);
const result = await compile(vfile, {
mdxOptions: {
development: true,
},
});
// test the compiledSource ****************************
const compiledSourceInitialPart = dedent`
"use strict";
const {Fragment: _Fragment, jsxDEV: _jsxDEV} = arguments[0];
`;
expect(String(result.compiledSource)).toContain(compiledSourceInitialPart);
});
test("use {scope: {props}}", async () => {
const source = dedent`
# Hi {props.baz}
`;
const { vfile } = prepare(source);
const result = await compile(vfile);
expect(String(result.compiledSource)).toMatchInlineSnapshot(`
""use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
const _components = {
h1: "h1",
...props.components
}, {Test} = _components;
if (!Test) _missingMdxReference("Test", true);
return _jsxs(_Fragment, {
children: [_jsxs(_components.h1, {
children: ["Hi ", props.baz]
}), "\\n", _jsx(Test, {
name: props.foo
})]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
function _missingMdxReference(id, component) {
throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
}
"
`);
});
});
================================================
FILE: tests/test.core.spec.ts
================================================
import { test } from "vitest";
import assert from "node:assert/strict";
test("should expose the public apis", async function () {
assert.deepEqual(Object.keys(await import("../src/csr")).sort(), [
"MDXClient",
"MDXClientAsync",
"MDXClientLazy",
"MDXProvider",
"hydrate",
"hydrateAsync",
"hydrateLazy",
"useMDXComponents",
]);
assert.deepEqual(Object.keys(await import("../src/csr/serialize.js")).sort(), ["serialize"]);
assert.deepEqual(Object.keys(await import("../src/rsc")).sort(), ["MDXRemote", "evaluate"]);
assert.deepEqual(Object.keys(await import("../src/utils")).sort(), ["getFrontmatter"]);
});
================================================
FILE: tests/test.evaluate.esm.spec.tsx
================================================
import { describe, test, expect } from "vitest";
import ReactDOMServer from "react-dom/server";
import recmaMdxImportReact from "recma-mdx-import-react";
import dedent from "dedent";
import { evaluate } from "../src/rsc";
type Frontmatter = { title: string };
describe("evaluate function with ESM imports", () => {
test("removes imports, if there is 'disableImports: true'", async () => {
const source = dedent`
import {Pill} from "./context/components.js"
Hi {name}
`;
const { content } = await evaluate({
source,
options: {
disableImports: true,
scope: {
name: "foo",
},
},
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"Hi foo
"`,
);
});
test("works with imported modules", async () => {
const source = dedent`
import {Pill} from "./context/components.js"
Hi {name}
!
`;
const { content } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url, // should be provided, finds the 'components.js' in relative path
},
scope: {
name: "foo",
},
},
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
"Hi foo
!"
`);
});
test("should support importing data w/ ESM", async () => {
const source = dedent`
import {number} from "./context/data.js"
{number}
`;
const { content } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`"3.14"`);
});
test("should support exporting w/ ESM", async () => {
const source = dedent`
export const number = Math.PI
`;
const { content, mod } = await evaluate({ source });
expect(mod.number).toBe(Math.PI);
expect(ReactDOMServer.renderToStaticMarkup(content)).toBe("");
});
test("disabling exports is lead to 'mod' is empty object", async () => {
const source = dedent`
export const number = Math.PI
`;
const { content, mod } = await evaluate({ source, options: { disableExports: true } });
expect(mod).toStrictEqual({});
expect(ReactDOMServer.renderToStaticMarkup(content)).toBe("");
});
test("should support exporting an identifier w/o a value", async () => {
const source = dedent`
export var a
`;
const { content, mod } = await evaluate({ source });
expect(mod).toHaveProperty("a");
expect(ReactDOMServer.renderToStaticMarkup(content)).toBe("");
});
test("should support exporting an object pattern", async () => {
const source = dedent`
import {object} from "./context/data.js"
export var {a} = object
`;
const { content, mod } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(mod.a).toBe(1);
expect(ReactDOMServer.renderToStaticMarkup(content)).toBe("");
});
test("should support exporting a rest element in an object pattern", async () => {
const source = dedent`
import {object} from "./context/data.js"
export var {a, ...rest} = object
`;
const { content, mod } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(mod.a).toBe(1);
expect(mod.rest).toStrictEqual({ b: 2 });
expect(ReactDOMServer.renderToStaticMarkup(content)).toBe("");
});
test("should support exporting an assignment pattern in an object pattern", async () => {
const source = dedent`
import {object} from "./context/data.js"
export var {c = 3} = object
`;
const { content, mod } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(mod.c).toBe(3);
expect(ReactDOMServer.renderToStaticMarkup(content)).toBe("");
});
test("should support exporting an array pattern", async () => {
const source = dedent`
import {array} from "./context/data.js"
export var [a] = array
`;
const { content, mod } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(mod.a).toBe(1);
expect(ReactDOMServer.renderToStaticMarkup(content)).toBe("");
});
test("should support `export as` w/ ESM", async () => {
const source = dedent`
export const number = Math.PI
export {number as pi}
`;
const { content, mod } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(mod.pi).toBe(Math.PI);
expect(ReactDOMServer.renderToStaticMarkup(content)).toBe("");
});
test("should support default export to define a layout", async () => {
const source = dedent`
export default function Layout(props) { return }
Hi
`;
const { content } = await evaluate({ source });
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
test("should support default export from a source", async () => {
const source = dedent`
export {Layout as default} from "./context/components.js"
Hi
`;
const { content } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
test("should support rexporting something as a default export from a source", async () => {
const source = dedent`
export {default} from "./context/components.js"
Hi
`;
const { content } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
test("should support rexporting the default export, and other things, from a source", async () => {
const source = dedent`
export {default, Pill} from "./context/components.js"
!
`;
const { content } = await evaluate({
source,
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"!
"`,
);
});
});
describe("evaluate function with ESM exports", () => {
test("works with `export` statements", async () => {
const source = dedent`
---
title: 'My Article'
---
export const num = 1
export let str = 'foo';
export var bool = true
export function Component() {
return 'from component'
}
# {num} {str} {String(bool)}
export function Thing() {
return 'hello'
}
`;
const { content, mod } = await evaluate({
source,
options: {
parseFrontmatter: true,
},
});
expect(mod).toMatchObject({
Component: expect.any(Function),
Thing: expect.any(Function),
bool: true,
num: 1,
str: "foo",
});
const expected = dedent`
1 foo true from component
hello
`;
expect(ReactDOMServer.renderToStaticMarkup(content)).toEqual(expected);
});
test("remove all `export` statements", async () => {
const source = dedent`
---
title: 'My Article'
---
export const num = 1
export let str = 'foo';
export var bool = true
# Hi
export function Component() {
return 'from component'
}
`;
const { content, mod } = await evaluate({
source,
options: {
disableExports: true,
parseFrontmatter: true,
},
});
expect(mod).toStrictEqual({});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`"Hi
"`);
});
});
describe("error handling in evaluate related with ESM", () => {
test("throws an error if the imported module is used after removing imports", async () => {
const source = dedent`
import {Pill} from "./context/components.js"
Hi {name}
!
`;
const { content, error } = await evaluate({
source,
options: {
disableImports: true,
scope: {
name: "foo",
},
},
});
// The "evaluate" can't catch the error, because the missing component is not syntax error in the compiled source
expect(error).toBeUndefined();
expect(content).toMatchInlineSnapshot(`
`);
// But throws error during render
expect(() =>
ReactDOMServer.renderToStaticMarkup(content),
).toThrowErrorMatchingInlineSnapshot(
`[Error: Expected component \`Pill\` to be defined: you likely forgot to import, pass, or provide it.]`,
);
});
test("throws an error if the option 'baseURL' is not provided for imports", async () => {
const source = dedent`
import {Pill} from "./context/components.js"
Hi {name}
!
`;
const { content, error } = await evaluate({
source,
options: {
scope: {
name: "foo",
},
},
});
expect(error).toMatchInlineSnapshot(
`[Error: Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`]`,
);
expect(content).toMatchInlineSnapshot(`
`);
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
test("syntax error in compiled source can be catched in evaluate", async () => {
const { content, error } = await evaluate({
source: "import x from 'y'",
});
expect(error).toMatchInlineSnapshot(
`[Error: Unexpected missing \`options.baseUrl\` needed to support \`export … from\`, \`import\`, or \`import.meta.url\` when generating \`function-body\`]`,
);
expect(content).toMatchInlineSnapshot(`
`);
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
// don't know why this test causes an segmentation error in coverage but not in normal test
test("syntax error in compiled source can be catched in evaluate", async () => {
const { content, error } = await evaluate({
source: "import x from 'y'",
options: {
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(error?.message).toContain(`Cannot find package 'y' imported from`);
expect(content).toMatchInlineSnapshot(`
`);
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
test("import .mjs React component with jsx syntax", async () => {
const source = dedent`
import ExampleForm from "./context/ExampleForm.mjs"
Hi {name}
`;
const { content, error } = await evaluate({
source,
options: {
scope: {
name: "ipikuka",
},
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(error).toMatchInlineSnapshot(`[SyntaxError: Unexpected token '<']`);
expect(content).toMatchInlineSnapshot(`
`);
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
test("import .mjs React component transformed to classic runtime", async () => {
const source = dedent`
import ExampleForm from "./context/ExampleFormTransformedClassic.mjs"
Hi {name}
`;
const { content, error } = await evaluate({
source,
options: {
scope: {
name: "ipikuka",
},
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(error).toBeUndefined();
expect(content).toMatchInlineSnapshot(`
`);
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
"Hi ipikuka
"
`);
});
test("import .mjs React component transformed to automatic runtime", async () => {
const source = dedent`
import ExampleForm from "./context/ExampleFormTransformedAutomatic.mjs"
Hi {name}
`;
const { content, error } = await evaluate({
source,
options: {
scope: {
name: "ipikuka",
},
mdxOptions: {
baseUrl: import.meta.url,
},
},
});
expect(error).toBeUndefined();
expect(content).toMatchInlineSnapshot(`
`);
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
"Hi ipikuka
"
`);
});
test("import .mjs React component in which the React instance injected", async () => {
const source = dedent`
import HelloDave from "./context/HelloDave.mjs"
`;
const { content, error } = await evaluate({
source,
options: {
scope: {
name: "ipikuka",
},
mdxOptions: {
baseUrl: import.meta.url,
// without recma plugin, it throws an error
// TypeError: Cannot read properties of undefined (reading 'useId')
recmaPlugins: [recmaMdxImportReact],
},
},
});
expect(error).toBeUndefined();
expect(content).toMatchInlineSnapshot(`
`);
expect(ReactDOMServer.renderToStaticMarkup(content)).toBe(
"Hello, Dave! Your id is _R_0_
",
);
});
});
================================================
FILE: tests/test.evaluate.spec.tsx
================================================
import { vi, describe, test, expect } from "vitest";
import ReactDOMServer from "react-dom/server";
import { VFile } from "vfile";
import dedent from "dedent";
import remarkEmoji from "remark-emoji";
import remarkFlexibleMarkers from "remark-flexible-markers";
import recmaMdxChangeProps from "recma-mdx-change-props";
import recmaMdxEscapeMissingComponents from "recma-mdx-escape-missing-components";
import { evaluate, type EvaluateOptions } from "../src/rsc";
import { compile } from "../src/lib/compile";
type Frontmatter = { title: string };
describe("evaluate", () => {
test("simple", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "foo **bar**",
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"foo bar
"`,
);
});
test("with component", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: 'foo ',
components: {
Test: ({ name }: { name: string }) => hello {name},
},
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"foo hello test
"`,
);
});
test("with some remarkPlugins in mdxOptions", async () => {
const options: EvaluateOptions = {
mdxOptions: {
remarkPlugins: [remarkFlexibleMarkers, remarkEmoji],
},
};
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "==hello :tada: Talat Kuyuk==",
options,
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"hello 🎉 Talat Kuyuk
"`,
);
expect(options.mdxOptions?.remarkPlugins?.length).toBe(2);
});
test("with scope", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "hi {bar}",
options: {
scope: {
bar: "ipikuka",
},
},
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope.bar).toBe("ipikuka");
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"hi ipikuka
"`,
);
});
test("with scope and component", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "hi ",
options: {
scope: {
bar: "ipikuka",
},
},
components: {
Test: ({ name }: { name: string }) => {name},
},
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope.bar).toBe("ipikuka");
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"hi ipikuka
"`,
);
});
test("with scope in which consists props key escaped with no reason", async () => {
const source = dedent`
Hi {props.bar}
`;
const { content, mod, frontmatter, scope, error } = await evaluate({
source,
options: {
scope: {
props: {
bar: "barbar",
foo: "foofoo",
},
},
},
components: {
Test: ({ name }: { name: string }) => {name},
},
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope.props.bar).toBe("barbar");
expect(scope.props.foo).toBe("foofoo");
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
"Hi
"
`);
});
test("with scope in which consists props key works as expected using a recma plugin", async () => {
const source = dedent`
Hi {props.bar}
`;
const { content, mod, frontmatter, scope, error } = await evaluate({
source,
options: {
scope: {
props: {
bar: "barbar",
foo: "foofoo",
},
},
mdxOptions: {
recmaPlugins: [recmaMdxChangeProps],
},
},
components: {
Test: ({ name }: { name: string }) => {name},
},
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope.props.bar).toBe("barbar");
expect(scope.props.foo).toBe("foofoo");
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
"Hi barbar
foofoo"
`);
});
test("with frontmatter supplying frontmatter's type argument", async () => {
const source = dedent`
---
title: 'My Article'
---
## {frontmatter.title}
`;
// there is a type argument for evaluate
const { content, mod, frontmatter, scope, error } = await evaluate({
source,
options: {
parseFrontmatter: true,
},
});
expect(mod).toEqual({});
expect(frontmatter.title).toEqual("My Article");
expect(scope).toEqual({});
expect(error).toBeUndefined();
// @ts-expect-error Property 'blah' does not exist on type 'Frontmatter'.
expect(frontmatter.blah).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"My Article
"`,
);
});
test("with frontmatter without supplying frontmatter's type argument", async () => {
const source = dedent`
---
title: 'My Article'
---
## {frontmatter.title}
`;
// there is no type argument for evaluate
const { content, mod, frontmatter, scope, error } = await evaluate({
source,
options: {
parseFrontmatter: true,
},
});
expect(mod).toEqual({});
expect(frontmatter.title).toEqual("My Article");
expect(scope).toEqual({});
expect(error).toBeUndefined();
// it doesn't give any Typescript error
expect(frontmatter.blah).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"My Article
"`,
);
});
test("with frontmatter and scope", async () => {
const source = dedent`
---
title: 'My Article'
---
# {frontmatter.title}
Hi *{name}*
`;
const { content, mod, frontmatter, scope, error } = await evaluate({
source,
options: {
parseFrontmatter: true,
scope: { name: "Talat Kuyuk" },
},
});
expect(mod).toEqual({});
expect(frontmatter.title).toEqual("My Article");
expect(scope.name).toBe("Talat Kuyuk");
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
"My Article
Hi Talat Kuyuk
"
`);
});
test("strips any undefined frontmatters without giving an error", async () => {
const source = dedent`
---
title: 'My Article'
---
The title is {frontmatter.title} and {frontmatter.subtitle}.
`;
const { content, mod, frontmatter, scope, error } = await evaluate({
source,
options: {
parseFrontmatter: true,
},
});
expect(mod).toEqual({});
expect(frontmatter.title).toEqual("My Article");
expect(scope).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"The title is My Article and .
"`,
);
});
test("supports component names with a dot(.)", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "",
components: {
// @ts-expect-error (2322) -- Issue caused by React 19 removing global JSX types,
// no match for the signature which affects the type inference for nested components in this case.
// Define your global JSX (for JSX.IntrinsicElements) in your project if need to use nested components.
motion: { p: () => Hello world
},
},
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"Hello world
"`,
);
});
test("renders fragments", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "Renders fragments} />",
components: {
Test: ({ content }: { content: string }) => <>{content},
},
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"Renders fragments"`,
);
});
test("supports VFile", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: new VFile("foo **bar**"),
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"foo bar
"`,
);
});
test("supports Buffer", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: Buffer.from("foo **bar**"),
});
expect(mod).toEqual({});
expect(frontmatter).toEqual({});
expect(scope).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"foo bar
"`,
);
});
test("debug compiled source", async () => {
const logSpy = vi.spyOn(console, "log").mockImplementation(() => {});
const result = await compile(new VFile("Hi"));
await evaluate({
source: "Hi",
options: { debug: { compiledSource: true } },
});
expect(logSpy).toHaveBeenCalledTimes(1);
expect(logSpy).toHaveBeenCalledWith(String(result.compiledSource));
logSpy.mockRestore(); // Restore original console.log behavior
});
});
describe("vfileDataIntoScope in evaluate function", () => {
test("works with no option 'vfileDataIntoScope'", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await evaluate({
source,
options: {
scope: {},
parseFrontmatter: true,
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toStrictEqual({});
});
test("works the option 'vfileDataIntoScope' - true", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await evaluate({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: true,
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({
matter: { title: "My Article" },
foo: "foofoo",
bar: "barbar",
});
});
test("works the option 'vfileDataIntoScope' - string", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await evaluate({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: "foo",
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({ foo: "foofoo" });
});
test("works the option 'vfileDataIntoScope' - object", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await evaluate({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: { name: "bar", as: "zig" },
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({ zig: "barbar" });
});
test("works the option 'vfileDataIntoScope' - array", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await evaluate({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: ["foo", { name: "bar", as: "zig" }],
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({ foo: "foofoo", zig: "barbar" });
});
test("works the option 'vfileDataIntoScope' - frontmatter hack", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await evaluate({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: { name: "matter", as: "fronmatter" },
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({ fronmatter: { title: "My Article" } });
});
});
describe("error handling in evaluate", () => {
test("prints helpful message from compile MDX error", async () => {
const source = dedent`
---
title: 'My Article'
---
This is very bad syntax
`;
const { content, mod, frontmatter, scope, error } = await evaluate({
source,
options: {
parseFrontmatter: true,
scope: { foo: "foofoo" },
},
});
if (!error) throw new Error("should have an error !");
expect(frontmatter).toStrictEqual({ title: "My Article" });
expect(scope).toStrictEqual({ foo: "foofoo" });
expect(mod).toStrictEqual({});
expect(error).toMatchInlineSnapshot(`
[Error: [next-mdx-remote-client] error compiling MDX:
Expected a closing tag for \`\` (1:25-1:38) before the end of \`paragraph\`
> 1 | This is very bad syntax
| ^
More information: https://mdxjs.com/docs/troubleshooting-mdx]
`);
expect(content).toMatchInlineSnapshot(`
`);
});
test("missing a scope value causes runtime error during render", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "hi {bar}",
});
expect(frontmatter).toStrictEqual({});
expect(scope).toStrictEqual({});
expect(mod).toStrictEqual({});
expect(error).toBeUndefined();
expect(() => {
ReactDOMServer.renderToStaticMarkup(content);
}).toThrow("bar is not defined");
});
test("invalid identifier in scope causes syntax error during compile", async () => {
const myScope = { ["bar-baz"]: "ipikuka" };
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "hi {bar-baz}",
options: {
scope: myScope,
},
});
expect(frontmatter).toStrictEqual({});
expect(scope).toStrictEqual(myScope);
expect(mod).toStrictEqual({});
expect(error).toMatchInlineSnapshot(
`[SyntaxError: Arg string terminates parameters early]`,
);
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
""
`);
});
test("missing a component causes runtime error during render", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "hi ",
});
expect(frontmatter).toStrictEqual({});
expect(scope).toStrictEqual({});
expect(mod).toStrictEqual({});
expect(error).toBeUndefined();
expect(() => {
ReactDOMServer.renderToStaticMarkup(content);
}).toThrow(
"Expected component `Test` to be defined: you likely forgot to import, pass, or provide it.",
);
});
test("missing components can be escaped via a recma plugin without giving runtime error", async () => {
const { content, mod, frontmatter, scope, error } = await evaluate({
source: "hi ",
options: {
mdxOptions: {
recmaPlugins: [[recmaMdxEscapeMissingComponents, "Test"]],
},
},
});
expect(frontmatter).toStrictEqual({});
expect(scope).toStrictEqual({});
expect(mod).toStrictEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`"hi
"`);
});
});
================================================
FILE: tests/test.original.compile.spec.tsx
================================================
import { test, expect } from "vitest";
import { compile } from "@mdx-js/mdx";
import dedent from "dedent";
test("provides understanding about differences of the compiled sources", async () => {
const input = dedent`
# Hi
`;
expect(
String(
await compile(input, {
providerImportSource: undefined,
outputFormat: "function-body",
}),
),
).toMatchInlineSnapshot(`
""use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
const _components = {
h1: "h1",
...props.components
}, {Test} = _components;
if (!Test) _missingMdxReference("Test", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: "Hi"
}), "\\n", _jsx(Test, {})]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
function _missingMdxReference(id, component) {
throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
}
"
`);
expect(
String(
await compile(input, {
providerImportSource: "#",
outputFormat: "function-body",
}),
),
).toMatchInlineSnapshot(`
""use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
const _components = {
h1: "h1",
..._provideComponents(),
...props.components
}, {Test} = _components;
if (!Test) _missingMdxReference("Test", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: "Hi"
}), "\\n", _jsx(Test, {})]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = {
..._provideComponents(),
...props.components
};
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
function _missingMdxReference(id, component) {
throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
}
"
`);
expect(
String(
await compile(input, {
providerImportSource: "@mdx-js/react",
outputFormat: "function-body",
}),
),
).toMatchInlineSnapshot(`
""use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
const _components = {
h1: "h1",
..._provideComponents(),
...props.components
}, {Test} = _components;
if (!Test) _missingMdxReference("Test", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: "Hi"
}), "\\n", _jsx(Test, {})]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = {
..._provideComponents(),
...props.components
};
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
return {
default: MDXContent
};
function _missingMdxReference(id, component) {
throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
}
"
`);
expect(
String(
await compile(input, {
providerImportSource: "@mdx-js/react",
outputFormat: "program",
}),
),
).toMatchInlineSnapshot(`
"import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
import {useMDXComponents as _provideComponents} from "@mdx-js/react";
function _createMdxContent(props) {
const _components = {
h1: "h1",
..._provideComponents(),
...props.components
}, {Test} = _components;
if (!Test) _missingMdxReference("Test", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: "Hi"
}), "\\n", _jsx(Test, {})]
});
}
export default function MDXContent(props = {}) {
const {wrapper: MDXLayout} = {
..._provideComponents(),
...props.components
};
return MDXLayout ? _jsx(MDXLayout, {
...props,
children: _jsx(_createMdxContent, {
...props
})
}) : _createMdxContent(props);
}
function _missingMdxReference(id, component) {
throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
}
"
`);
});
================================================
FILE: tests/test.run.spec.tsx
================================================
import { describe, test, expect } from "vitest";
import { VFile } from "vfile";
import dedent from "dedent";
import { runSync } from "../src/lib/run.js";
import { compile } from "../src/lib/compile.js";
/**
* a rehearsal of runSync without actual jsxRuntime
*/
function runSync_(
compiledSource: string,
options?: { scope?: Record; frontmatter?: Record },
) {
const constructionScope = {
mdxOptions: { jsx: () => null }, // do nothing
frontmatter: options?.frontmatter,
...options?.scope,
};
const keys = Object.keys(constructionScope);
const values = Object.values(constructionScope);
const SyncFunction = function () {}.constructor;
const hydrateFn = Reflect.construct(SyncFunction, keys.concat(compiledSource));
return hydrateFn(...values).default ?? hydrateFn(...values);
}
describe("runSync_", () => {
test("function construction", async () => {
const compiledSource = dedent`
const Test = foo;
if (!Test) _missingMdxReference();
function _missingMdxReference() {
throw new Error("Expected Error");
}
return Test;
`;
const SyncFunction = function () {}.constructor;
const hydrateFn = Reflect.construct(SyncFunction, ["foo", compiledSource]);
const hydrateFn2 = Reflect.construct(SyncFunction, ["bar", compiledSource]);
expect(hydrateFn("foofoo")).toEqual("foofoo");
try {
hydrateFn();
} catch (error) {
expect((error as Error).message).toBe("Expected Error");
}
try {
const foo = undefined;
hydrateFn(foo);
} catch (error) {
expect((error as Error).message).toBe("Expected Error");
}
try {
const bar = "bar";
hydrateFn2(bar);
} catch (error) {
expect((error as Error).message).toBe("foo is not defined");
}
});
test("throws error when return a value", async () => {
const compiledSource = dedent`
const Test = foo;
if (!Test) _missingMdxReference();
function _missingMdxReference() {
throw new Error("Expected Error");
}
return Test;
`;
expect(runSync_(compiledSource, { scope: { foo: "foofoo" } })).toEqual("foofoo");
try {
runSync_(compiledSource);
} catch (error) {
expect((error as Error).message).toBe("foo is not defined");
}
try {
runSync_(compiledSource, { scope: { foo: undefined } });
} catch (error) {
expect((error as Error).message).toBe("Expected Error");
}
});
test("doesn't throw error when return default export with a module", async () => {
const compiledSource = dedent`
"use strict";
const {jsx: _jsx} = arguments[0];
function _createMdxContent(props) {
const _components = {}, {Test} = _components;
if (!Test) _missingMdxReference();
return _jsx(Test);
}
function _missingMdxReference() {
throw new Error("Error: missing component");
}
return {
default: _createMdxContent
}
`;
expect(runSync_(compiledSource)).toMatchInlineSnapshot(`[Function]`);
try {
runSync_(compiledSource);
} catch (error) {
// doesn't throw an error, the snapshot is empty !
expect((error as Error).message).toMatchInlineSnapshot();
}
});
test("throws error when return default export with a value", async () => {
const compiledSource = dedent`
"use strict";
const {jsx: _jsx} = arguments[0];
const _components = {}, {Test} = _components;
if (!Test) _missingMdxReference();
function _missingMdxReference() {
throw new Error("Error: missing component");
}
return {
default: Test
}
`;
try {
runSync_(compiledSource);
} catch (error) {
expect((error as Error).message).toBe("Error: missing component");
}
});
});
describe("runSync", () => {
test("errors in runSync can't be catched", async () => {
const result = await compile(new VFile("hi "));
const compiledSource = String(result.compiledSource);
try {
// it doesn't throw error, sinse runSync returns a module to be rendered
runSync(compiledSource, { frontmatter: {}, scope: {} });
} catch (error) {
// Actually, compenent is missing and "bar" is not defined but the snapshot is empty !
expect((error as Error).message).toMatchInlineSnapshot();
}
});
test("some errors (syntax error in compiled source) in runSync can be catched", async () => {
const result = await compile(new VFile("import x from 'y'"));
const compiledSource = String(result.compiledSource);
try {
runSync(compiledSource, { frontmatter: {}, scope: {} });
} catch (error) {
expect((error as Error).message).toMatchInlineSnapshot(
`"await is only valid in async functions and the top level bodies of modules"`,
);
}
});
});
================================================
FILE: tests/test.serialize-hydrate.spec.tsx
================================================
import { describe, test, expect } from "vitest";
import ReactDOMServer from "react-dom/server";
import { VFile } from "vfile";
import dedent from "dedent";
import remarkEmoji from "remark-emoji";
import remarkFlexibleMarkers from "remark-flexible-markers";
import recmaMdxChangeProps from "recma-mdx-change-props";
import recmaMdxEscapeMissingComponents from "recma-mdx-escape-missing-components";
import { hydrate } from "../src/csr";
import { serialize, type SerializeOptions } from "../src/csr/serialize.js";
type Frontmatter = { title: string };
describe("serialize & hydrate", () => {
test("simple", async () => {
const mdxSource = await serialize({
source: "foo **bar**",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"foo bar
"`,
);
});
test("with component", async () => {
const mdxSource = await serialize({
source: 'foo ',
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate({
...mdxSource,
components: {
Test: ({ name }: { name: string }) => hello {name},
},
});
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"foo hello test
"`,
);
});
test("with some remarkPlugins in mdxOptions", async () => {
const serializeOptions: SerializeOptions = {
mdxOptions: {
remarkPlugins: [remarkFlexibleMarkers, remarkEmoji],
},
};
const mdxSource = await serialize({
source: "==hello :tada: Talat Kuyuk==",
options: serializeOptions,
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"hello 🎉 Talat Kuyuk
"`,
);
});
test("with scope", async () => {
const mdxSource = await serialize({
source: "hi {bar}",
options: {
scope: {
bar: "ipikuka",
},
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({ bar: "ipikuka" });
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"hi ipikuka
"`,
);
});
test("with scope and component", async () => {
const mdxSource = await serialize({
source: "hi ",
options: {
scope: {
bar: "ipikuka",
},
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({ bar: "ipikuka" });
const { content, mod, error } = hydrate({
...mdxSource,
components: {
Test: ({ name }: { name: string }) => {name},
},
});
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"hi ipikuka
"`,
);
});
test("with scope in which consists props key escaped with no reason", async () => {
const source = dedent`
Hi {props.bar}
`;
const mdxSource = await serialize({
source,
options: {
scope: {
props: {
bar: "barbar",
foo: "foofoo",
},
},
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope.props.bar).toEqual("barbar");
expect(mdxSource.scope.props.foo).toEqual("foofoo");
const { content, mod, error } = hydrate({
...mdxSource,
components: {
Test: ({ name }: { name: string }) => {name},
},
});
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
"Hi
"
`);
});
test("with scope in which consists props key works as expected using a recma plugin", async () => {
const source = dedent`
Hi {props.bar}
`;
const mdxSource = await serialize({
source,
options: {
scope: {
props: {
bar: "barbar",
foo: "foofoo",
},
},
mdxOptions: {
recmaPlugins: [recmaMdxChangeProps],
},
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope.props.bar).toEqual("barbar");
expect(mdxSource.scope.props.foo).toEqual("foofoo");
const { content, mod, error } = hydrate({
...mdxSource,
components: {
Test: ({ name }: { name: string }) => {name},
},
});
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
"Hi barbar
foofoo"
`);
});
test("with frontmatter supplying frontmatter's type argument", async () => {
const source = dedent`
---
title: 'My Article'
---
## {frontmatter.title}
`;
// there is a type argument for serialize
const mdxSource = await serialize({
source,
options: {
parseFrontmatter: true,
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter.title).toEqual("My Article");
expect(mdxSource.scope).toEqual({});
// @ts-expect-error
expect(mdxSource.frontmatter.blah).toBeUndefined();
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"My Article
"`,
);
});
test("with frontmatter without supplying frontmatter's type argument", async () => {
const source = dedent`
---
title: 'My Article'
---
## {frontmatter.title}
`;
// there is no type argument for serialize
const mdxSource = await serialize({
source,
options: {
parseFrontmatter: true,
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter.title).toEqual("My Article");
expect(mdxSource.scope).toEqual({});
// it doesn't give any Typescript error
expect(mdxSource.frontmatter.blah).toBeUndefined();
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"My Article
"`,
);
});
test("with frontmatter and scope", async () => {
const source = dedent`
---
title: 'My Article'
---
# {frontmatter.title}
Hi *{name}*
`;
const mdxSource = await serialize({
source,
options: {
parseFrontmatter: true,
scope: { name: "Talat Kuyuk" },
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter.title).toEqual("My Article");
expect(mdxSource.scope).toEqual({ name: "Talat Kuyuk" });
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`
"My Article
Hi Talat Kuyuk
"
`);
});
test("strips any undefined frontmatters without giving an error", async () => {
const source = dedent`
---
title: 'My Article'
---
The title is {frontmatter.title} and {frontmatter.subtitle}.
`;
const mdxSource = await serialize({
source,
options: {
parseFrontmatter: true,
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter.title).toEqual("My Article");
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"The title is My Article and .
"`,
);
});
test("parsed frontmatter should be supplied on the client side", async () => {
const source = dedent`
---
title: 'My Article'
---
The title is {frontmatter.title}
`;
const mdxSource = await serialize({
source,
options: {
parseFrontmatter: true,
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter.title).toEqual("My Article");
expect(mdxSource.scope).toEqual({});
const {
content: content,
mod,
error,
} = hydrate({
compiledSource: mdxSource.compiledSource,
frontmatter: mdxSource.frontmatter,
});
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"The title is My Article
"`,
);
const {
content: content_,
mod: mod_,
error: error_,
} = hydrate({
compiledSource: mdxSource.compiledSource,
});
expect(mod_).toEqual({});
expect(error_).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content_)).toMatchInlineSnapshot(
`"The title is
"`,
);
});
test("supports component names with a dot(.)", async () => {
const mdxSource = await serialize({
source: "",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate({
...mdxSource,
components: {
// @ts-expect-error (2322) -- Issue caused by React 19 removing global JSX types,
// no match for the signature which affects the type inference for nested components in this case.
// Define your global JSX (for JSX.IntrinsicElements) in your project if need to use nested components.
motion: { p: () => Hello world
},
},
});
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"Hello world
"`,
);
});
test("renders fragments", async () => {
const mdxSource = await serialize({
source: "Renders fragments} />",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate({
...mdxSource,
components: {
Test: ({ content }: { content: string }) => <>{content},
},
});
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"Renders fragments"`,
);
});
test("supports VFile", async () => {
const mdxSource = await serialize({
source: new VFile("foo **bar**"),
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"foo bar
"`,
);
});
test("supports Buffer", async () => {
const mdxSource = await serialize({
source: Buffer.from("foo **bar**"),
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"foo bar
"`,
);
});
});
describe("serialize & hydrate function with ESM exports", () => {
test("works with `export` statements 1", async () => {
const source = dedent`
---
title: 'My Article'
---
export const name = 'world'
# Hello {name.toUpperCase()}
`;
const mdxSource = await serialize({
source,
options: {
parseFrontmatter: true,
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({ title: "My Article" });
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(error).toBeUndefined();
expect(mod).toMatchObject({
name: "world",
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"Hello WORLD
"`,
);
});
test("works with `export` statements 2", async () => {
const source = dedent`
---
title: 'My Article'
---
export const num = 1
export let str = 'foo';
export var bool = true
export function Component() {
return 'from component'
}
# {num} {str} {String(bool)}
`;
const mdxSource = await serialize({
source,
options: {
parseFrontmatter: true,
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({ title: "My Article" });
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(error).toBeUndefined();
expect(mod).toMatchObject({
Component: expect.any(Function),
bool: true,
num: 1,
str: "foo",
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"1 foo true from component
"`,
);
});
test("remove all `export` statements", async () => {
const source = dedent`
---
title: 'My Article'
---
export const num = 1
export let str = 'foo';
export var bool = true
# Hi
export function Component() {
return 'from component'
}
`;
const mdxSource = await serialize({
source,
options: {
disableExports: true,
parseFrontmatter: true,
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({ title: "My Article" });
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`"Hi
"`);
});
});
describe("vfileDataIntoScope in serialize function", () => {
test("works with no option 'vfileDataIntoScope'", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await serialize({
source,
options: {
scope: {},
parseFrontmatter: true,
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toStrictEqual({});
});
test("works the option 'vfileDataIntoScope' - true", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await serialize({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: true,
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({
matter: { title: "My Article" },
foo: "foofoo",
bar: "barbar",
});
});
test("works the option 'vfileDataIntoScope' - string", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await serialize({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: "foo",
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({ foo: "foofoo" });
});
test("works the option 'vfileDataIntoScope' - object", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await serialize({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: { name: "bar", as: "zig" },
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({ zig: "barbar" });
});
test("works the option 'vfileDataIntoScope' - array", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await serialize({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: ["foo", { name: "bar", as: "zig" }],
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({ foo: "foofoo", zig: "barbar" });
});
test("works the option 'vfileDataIntoScope' - frontmatter hack", async () => {
const source = dedent`
---
title: 'My Article'
---
Hello
`;
const { scope } = await serialize({
source,
options: {
scope: {},
parseFrontmatter: true,
vfileDataIntoScope: { name: "matter", as: "fronmatter" },
mdxOptions: {
remarkPlugins: [
() => (_, file) => {
file.data["foo"] = "foofoo";
file.data["bar"] = "barbar";
},
],
},
},
});
expect(scope).toEqual({ fronmatter: { title: "My Article" } });
});
});
describe("error handling in serialize & hydrate", () => {
test("prints helpful message from compile error", async () => {
const source = dedent`
---
title: 'My Article'
---
This is very bad
`;
const mdxSource = await serialize({
source,
options: {
parseFrontmatter: true,
scope: { foo: "foofoo" },
},
});
if ("compiledSource" in mdxSource) throw new Error("should have an error !");
expect(mdxSource.frontmatter).toStrictEqual({ title: "My Article" });
expect(mdxSource.scope).toStrictEqual({ foo: "foofoo" });
expect(mdxSource.error.message).toMatchInlineSnapshot(`
"[next-mdx-remote-client] error compiling MDX:
Expected a closing tag for \`\` (1:18-1:31) before the end of \`paragraph\`
> 1 | This is very bad
| ^
More information: https://mdxjs.com/docs/troubleshooting-mdx"
`);
});
test("missing a scope value causes runtime error during render", async () => {
const mdxSource = await serialize({
source: "hi {bar}",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(content).toMatchInlineSnapshot(``);
expect(() => {
ReactDOMServer.renderToStaticMarkup(content);
}).toThrow("bar is not defined");
});
test("invalid identifier in scope causes syntax error during compile", async () => {
const myScope = { ["bar-baz"]: "ipikuka" };
const mdxSource = await serialize({
source: "hi {bar-baz}",
options: {
scope: myScope,
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual(myScope);
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toMatchInlineSnapshot(
`[SyntaxError: Arg string terminates parameters early]`,
);
expect(content).toMatchInlineSnapshot(`
`);
});
test("missing a component causes runtime error during render", async () => {
const mdxSource = await serialize({
source: "hi ",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(content).toMatchInlineSnapshot(``);
expect(() => {
ReactDOMServer.renderToStaticMarkup(content);
}).toThrow(
"Expected component `Test` to be defined: you likely forgot to import, pass, or provide it.",
);
});
test("missing components can be escaped via a recma plugin without giving runtime error", async () => {
const mdxSource = await serialize({
source: "hi ",
options: {
mdxOptions: {
recmaPlugins: [[recmaMdxEscapeMissingComponents, "Test"]],
},
},
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toBeUndefined();
expect(content).toMatchInlineSnapshot(``);
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(`"hi
"`);
});
test("syntax error in compiled source can be catched in hydrate", async () => {
const mdxSource = await serialize({
source: "import x from 'y'",
});
if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
expect(mdxSource.frontmatter).toEqual({});
expect(mdxSource.scope).toEqual({});
const { content, mod, error } = hydrate(mdxSource);
expect(mod).toEqual({});
expect(error).toMatchInlineSnapshot(
`[SyntaxError: await is only valid in async functions and the top level bodies of modules]`,
);
expect(content).toMatchInlineSnapshot(`
`);
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
});
================================================
FILE: tests/test.utils.spec.ts
================================================
import { describe, test, expect } from "vitest";
import type { SourceLocation } from "@babel/code-frame";
import dedent from "dedent";
import { getFrontmatter } from "../src/utils";
import { createFormattedMDXError, passVfileDataIntoScope } from "../src/lib/util";
describe("getFrontmatter", () => {
type Frontmatter = { title: string };
test("works as expected without generic type", async () => {
const source = dedent`
---
title: 'my title'
---
Hi
`;
const { frontmatter, strippedSource } = getFrontmatter(source);
expect(frontmatter.title).toEqual("my title");
// don't need to put @ts-expect-error since it is Record
expect(frontmatter.blah).toBeUndefined();
expect(strippedSource).toEqual("Hi");
});
test("works as expected with generic type", async () => {
const source = dedent`
---
title: 'my title'
---
Hi
`;
const { frontmatter } = getFrontmatter(source);
// @ts-expect-error
expect(frontmatter.blah).toBeUndefined();
});
test("returns empty object if no frontmatter", async () => {
const source = "Hi";
const { frontmatter } = getFrontmatter(source);
expect(frontmatter).toStrictEqual({});
});
});
describe("passVfileDataIntoScope", () => {
test("works as expected via 'true'", () => {
const data = {
toc: [1, 2, 3],
mog: "mogmog",
};
const scope: Record = {};
passVfileDataIntoScope(data, true, scope);
expect(scope).toHaveProperty("toc");
expect(scope["toc"]).toEqual([1, 2, 3]);
expect(scope).toHaveProperty("mog");
expect(scope["mog"]).toEqual("mogmog");
(scope.toc as Array).push(4);
expect(data.toc).toEqual([1, 2, 3, 4]);
});
test("works as expected via 'string'", () => {
const data = {
toc: [1, 2, 3],
mog: "mogmog",
};
const scope: Record = {};
passVfileDataIntoScope(data, "toc", scope);
expect(scope).toHaveProperty("toc");
expect(scope["toc"]).toEqual([1, 2, 3]);
expect(scope).not.toHaveProperty("mog");
(scope.toc as Array).push(4);
expect(data.toc).toEqual([1, 2, 3, 4]);
});
test("works as expected via 'name' and 'as'", () => {
const data = {
toc: [1, 2, 3],
mog: "mogmog",
};
const scope: Record = {};
passVfileDataIntoScope(data, { name: "toc", as: "heading" }, scope);
expect(scope).not.haveOwnProperty("toc");
expect(scope).toHaveProperty("heading");
expect(scope["heading"]).toEqual([1, 2, 3]);
expect(scope).not.toHaveProperty("mog");
(scope.heading as Array).push(4);
expect(data.toc).toEqual([1, 2, 3, 4]);
});
test("works as expected via 'array'", () => {
const data = {
toc: [1, 2, 3],
mog: "mogmog",
};
const scope: Record = {};
passVfileDataIntoScope(data, ["mog", { name: "toc", as: "heading" }], scope);
expect(scope).not.haveOwnProperty("toc");
expect(scope).toHaveProperty("heading");
expect(scope["heading"]).toEqual([1, 2, 3]);
expect(scope).toHaveProperty("mog");
expect(scope["mog"]).toEqual("mogmog");
(scope.heading as Array).push(4);
expect(data.toc).toEqual([1, 2, 3, 4]);
});
});
describe("createFormattedMDXError", () => {
test("with standart error", async () => {
const source = dedent`
---
title: 'my title'
---
Hi
`;
const myError = new Error("something went wrong");
const formattedError = createFormattedMDXError(myError, source);
expect(formattedError.message).toMatchInlineSnapshot(`
"[next-mdx-remote-client] error compiling MDX:
something went wrong
More information: https://mdxjs.com/docs/troubleshooting-mdx"
`);
});
test("with implicitly positioned error", async () => {
const source = dedent`
---
title: 'my title'
---
Hi
`;
const positionedError = new Error(
"Expected a closing tag for `` (1:4-1:17) before the end of `paragraph`",
);
const strippedSource = getFrontmatter(source).strippedSource;
const formattedError = createFormattedMDXError(positionedError, strippedSource);
/*
[1:1-1:17: Expected a closing tag for `` (1:4-1:17) before the end of `paragraph`] {
ancestors: undefined,
cause: undefined,
column: 1,
fatal: undefined,
line: 1,
place: {
start: { line: 1, column: 1, offset: 0, _index: 0, _bufferIndex: 0 },
end: { line: 1, column: 17, offset: 16, _index: 1, _bufferIndex: -1 }
},
reason: 'Expected a closing tag for `` (1:4-1:17) before the end of `paragraph`',
ruleId: 'end-tag-mismatch',
source: 'mdast-util-mdx-jsx'
}
*/
expect(formattedError.message).toMatchInlineSnapshot(`
"[next-mdx-remote-client] error compiling MDX:
Expected a closing tag for \`\` (1:4-1:17) before the end of \`paragraph\`
> 1 | Hi
| ^
More information: https://mdxjs.com/docs/troubleshooting-mdx"
`);
});
test("with explicitly positioned error", async () => {
const source = dedent`
target x as error
`;
const positionedError: Error & { position?: SourceLocation } = new Error(
"The char x is targetted as error",
);
positionedError["position"] = { start: { line: 1, column: 8 } };
const formattedError = createFormattedMDXError(positionedError, source);
expect(formattedError.message).toMatchInlineSnapshot(`
"[next-mdx-remote-client] error compiling MDX:
The char x is targetted as error
> 1 | target x as error
| ^
More information: https://mdxjs.com/docs/troubleshooting-mdx"
`);
});
});
================================================
FILE: tests/test.wrapper.spec.tsx
================================================
import { describe, test, expect } from "vitest";
import React from "react";
import ReactDOMServer from "react-dom/server";
import { evaluate, type MDXComponents } from "../src/rsc";
describe("evaluate function with wrapper", () => {
test("wrapper component - 1", async () => {
const { content } = await evaluate({
source: "foo **bar**",
components: {
wrapper: "div",
},
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
test("wrapper component - 2", async () => {
const { content } = await evaluate({
source: "foo **bar**",
components: {
wrapper(props: React.ComponentProps<"div"> & { components: MDXComponents }) {
const { components, ...rest } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
return ;
},
},
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
test("wrapper component - 3 - extract the prop 'components'", async () => {
const { content } = await evaluate({
source: "foo **bar**",
components: {
wrapper(props: React.ComponentProps<"div"> & { components: MDXComponents }) {
const { components, ...rest } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
return React.createElement("article", { id: "custom-article", ...rest });
},
},
});
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`"foo bar
"`,
);
});
test("wrapper component without supplying props", async () => {
const { content } = await evaluate({
source: "foo **bar**",
components: {
wrapper() {
return ;
},
},
});
// it didn't render the mdx
expect(ReactDOMServer.renderToStaticMarkup(content)).toMatchInlineSnapshot(
`""`,
);
});
});
================================================
FILE: tests/utils/index.ts
================================================
import { act, type ReactElement } from "react";
import reactDom from "react-dom/server";
import { PassThrough } from "stream";
type RenderOptions = {
stripReactSSRComments?: boolean;
};
/**
* Render a React element to a string using streaming SSR.
* @param element React element to render
* @param options If stripReactSSRComments is true, removes or inserted by React streaming SSR
*/
export async function renderToStringFromStream(
element: ReactElement,
options: RenderOptions = {},
) {
const { stripReactSSRComments } = options;
return new Promise((resolve, reject) => {
const stream = new PassThrough();
let html = "";
stream.on("data", (chunk) => (html += chunk));
stream.on("end", () => {
if (stripReactSSRComments) {
// Remove internal markers and streaming root markers /
html = html
.replace(//g, "")
.replace(//g, "")
.replace(//g, "");
}
resolve(html);
});
stream.on("error", reject);
act(() => {
const { pipe } = reactDom.renderToPipeableStream(element, {
onAllReady() {
pipe(stream);
},
onError(error) {
reject(error);
},
});
});
});
}
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"lib": ["ESNext", "DOM"],
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Node",
"jsx": "react-jsx",
"strict": true,
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"inlineSources": true,
"outDir": "dist",
"noImplicitReturns": true,
"noImplicitThis": false
},
"include": ["./src"]
}
================================================
FILE: vite.config.js
================================================
import { defineConfig } from "vite";
import { coverageConfigDefaults } from "vitest/config";
import react from "@vitejs/plugin-react-swc";
///
export default defineConfig({
plugins: [react()],
test: {
environment: "jsdom",
setupFiles: ["./vitest-setup-tests.js"],
include: ["tests/**/*.spec.ts?(x)"],
poolOptions: {
vmThreads: {
memoryLimit: "1 MB",
},
},
coverage: {
provider: "v8",
reporter: [
["lcov", { projectRoot: "./src" }],
["json", { file: "coverage.json" }],
"text",
],
thresholds: {
lines: 100,
functions: 100,
branches: 100,
statements: 100,
},
exclude: [
"archive",
"tests",
"**/types.ts",
"**/*.d.ts",
"src/csr/idle-callback-polyfill.js",
...coverageConfigDefaults.exclude,
],
},
},
});
================================================
FILE: vitest-setup-tests.js
================================================
import "@testing-library/jest-dom/vitest";
import { afterEach } from "vitest";
import { cleanup } from "@testing-library/react";
afterEach(() => {
cleanup();
});