- {tokens.map((line, i) => (
-
- {line.map((token, key) => (
-
- ))}
-
- ))}
+ {tokens.map((line, i) => {
+ const { key: lineKey, ...lineProps } = getLineProps({ line, key: i });
+ return (
+
+ {line.map((token, key) => {
+ const { key: tokenKey, ...tokenProps } = getTokenProps({ token, key });
+ return ;
+ })}
+
+ );
+ })}
)}
diff --git a/src/docs/main.tsx b/src/docs/main.tsx
index 01ff2f9..8385c93 100644
--- a/src/docs/main.tsx
+++ b/src/docs/main.tsx
@@ -1,10 +1,12 @@
import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
import { App } from "./app";
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+root.render(
,
- document.getElementById("root")
);
diff --git a/src/docs/utils/mdx-setup.tsx b/src/docs/utils/mdx-setup.tsx
index e30669f..53db6c6 100644
--- a/src/docs/utils/mdx-setup.tsx
+++ b/src/docs/utils/mdx-setup.tsx
@@ -21,6 +21,7 @@ const getHeading = (level: number) => {
if (!anchor) {
if (isValidElement(props.children)) {
const elProps = props.children.props;
+ // @ts-expect-error children exists on elProps
const children = elProps["children"];
if (typeof children === "string") {
anchor = getAnchor(children);
diff --git a/vite-for-docs.config.js b/vite-for-docs.config.js
new file mode 100644
index 0000000..261e4e0
--- /dev/null
+++ b/vite-for-docs.config.js
@@ -0,0 +1,29 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import macrosPlugin from "vite-plugin-babel-macros";
+import mdx from "@mdx-js/rollup";
+import remarkGfm from "remark-gfm";
+
+export default defineConfig({
+ plugins: [
+ react({
+ babel: {
+ plugins: ["babel-plugin-react-compiler"],
+ },
+ }),
+ mdx({
+ providerImportSource: "@mdx-js/react",
+ remarkPlugins: [remarkGfm],
+ }),
+ macrosPlugin(),
+ tailwindcss(),
+ ],
+ define: {
+ // this is required for macrosPlugin to work
+ "process.env": {},
+ },
+ optimizeDeps: {
+ include: ["react", "react-dom"],
+ },
+});
diff --git a/vite-for-docs.config.ts b/vite-for-docs.config.ts
deleted file mode 100644
index 6e64d3c..0000000
--- a/vite-for-docs.config.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { defineConfig } from "vite";
-import reactRefresh from "@vitejs/plugin-react-refresh";
-import macrosPlugin from "vite-plugin-babel-macros";
-
-export default defineConfig(async () => {
- // changes would be needed if you upgrade to React v18, see
- // https://github.com/brillout/vite-plugin-mdx/issues/44#issuecomment-974540152
- const mdx = await import("@mdx-js/rollup").then((mod) => mod.default);
- const remarkGfm = await import("remark-gfm").then((mod) => mod.default);
-
- return {
- plugins: [
- reactRefresh(),
- mdx({
- providerImportSource: "@mdx-js/react",
- remarkPlugins: [remarkGfm],
- }),
- macrosPlugin(),
- ],
- define: {
- // this is required for macrosPlugin to work
- "process.env": {},
- },
- };
-});
diff --git a/vite-legacy.config.ts b/vite-legacy.config.js
similarity index 100%
rename from vite-legacy.config.ts
rename to vite-legacy.config.js