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