Remove custom recma plugin, and install recma-mdx-import-react as a devDependency for test it

Author: talatkuyuk

package-lock.json

@@ -102,6 +102,7 @@
     "prettier": "^3.5.3",
     "recma-mdx-change-props": "^1.1.2",
     "recma-mdx-escape-missing-components": "^1.1.2",
+    "recma-mdx-import-react": "^1.0.0",
     "remark-emoji": "^5.0.1",
     "remark-flexible-markers": "^1.2.1",
     "remark-flexible-paragraphs": "^1.2.0",

package.json

@@ -10,7 +10,6 @@ import remarkMdxRemoveEsm, { clsx } from "remark-mdx-remove-esm";
 
 import type { CompileOptions, CompileResult } from "./types.js";
 import { createFormattedMDXError } from "./util.js";
-import { recmaMdxImportReact } from "../utils/index.js";
 
 /**
  * composes an opinionated version of CompileOptions of the "@mdx-js/mdx"
@@ -28,15 +27,9 @@ function composeCompileOptions(options: CompileOptions = {}): CompileMDXOptions
     [remarkMdxRemoveEsm, mdxRemoveEsmOptions],
   ];
 
-  const recmaPlugins: PluggableList = [
-    ...(mdxOptions.recmaPlugins || []),
-    [recmaMdxImportReact],
-  ];
-
   return {
     ...mdxOptions,
     remarkPlugins,
-    recmaPlugins,
     outputFormat: "function-body",
   };
 }

src/lib/compile.ts

@@ -5,6 +5,3 @@
 
 // for who needs to parse and get the fronmatter and stripped source
 export { getFrontmatter } from "./getFrontmatter.js";
-
-import recmaMdxImportReact from "./recma-mdx-import-react.js";
-export { recmaMdxImportReact };

src/utils/index.ts

@@ -1,5 +1,7 @@
 // the same test file taken from @mdx-js/mdx test files iot be inline with
 
+import React from "react";
+
 /**
  * @param {Readonly<React.JSX.IntrinsicElements['span']>} props
  *   Props
@@ -16,7 +18,7 @@ export function Pill({ React, ...props }) {
  * @returns
  *   `div` element.
  */
-export function Layout({ React, ...props }) {
+export function Layout(props) {
   return React.createElement("div", { ...props, style: { color: "red" } });
 }