Skip to content

Commit 53596eb

Browse files
ArnaudBarreArnaudBarre
committed
Support HMR for MDX (fixes #52)
1 parent 61f648e commit 53596eb

File tree

15 files changed

+1178
-173
lines changed

15 files changed

+1178
-173
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
## Unreleased
44

5+
- Support HMR for MDX (fixes #52)
56
- Fix: use jsxImportSource in optimizeDeps
67

78
## 3.1.0

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,22 @@
1616
"trailingComma": "all"
1717
},
1818
"dependencies": {
19-
"@swc/core": "^1.3.30"
19+
"@swc/core": "^1.3.35"
2020
},
2121
"peerDependencies": {
2222
"vite": "^4"
2323
},
2424
"devDependencies": {
2525
"@playwright/test": "^1.30.0",
2626
"@types/fs-extra": "^11.0.1",
27-
"@types/node": "^18.11.18",
27+
"@types/node": "^18.13.0",
2828
"@vitejs/release-scripts": "^1.1.0",
29-
"esbuild": "^0.17.5",
29+
"esbuild": "^0.17.7",
3030
"fs-extra": "^11.1.0",
3131
"picocolors": "^1.0.0",
32-
"prettier": "^2.8.3",
33-
"tsx": "^3.12.2",
34-
"typescript": "^4.9.4",
35-
"vite": "^4.0.4"
32+
"prettier": "^2.8.4",
33+
"tsx": "^3.12.3",
34+
"typescript": "^4.9.5",
35+
"vite": "^4.1.1"
3636
}
3737
}

‎playground/mdx/__tests__/mdx.spec.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { expect, test } from "@playwright/test";
2+
import {
3+
setupDevServer,
4+
setupBuildAndPreview,
5+
setupWaitForLogs,
6+
} from "../../utils.js";
7+
8+
test("MDX build", async ({ page }) => {
9+
const { testUrl, server } = await setupBuildAndPreview("mdx");
10+
await page.goto(testUrl);
11+
await expect(page.getByRole("heading", { name: "Hello" })).toBeVisible();
12+
await server.httpServer.close();
13+
});
14+
15+
test("MDX HMR", async ({ page }) => {
16+
const { testUrl, server, editFile } = await setupDevServer("mdx");
17+
const waitForLogs = await setupWaitForLogs(page);
18+
await page.goto(testUrl);
19+
await waitForLogs("[vite] connected.");
20+
21+
editFile("src/Counter.tsx", ["{count}", "{count}!"]);
22+
await waitForLogs("[vite] hot updated: /src/Counter.tsx");
23+
const button = await page.locator("button");
24+
await button.click();
25+
await expect(button).toHaveText("count is 1!");
26+
27+
editFile("src/hello.mdx", ["Hello", "Hello world"]);
28+
await waitForLogs("[vite] hot updated: /src/hello.mdx");
29+
await expect(
30+
page.getByRole("heading", { name: "Hello world" }),
31+
).toBeVisible();
32+
await expect(button).toHaveText("count is 1!");
33+
34+
await server.close();
35+
});

‎playground/mdx/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + MDX</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
12+
</body>
13+
</html>

‎playground/mdx/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "playground-mdx",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build"
8+
},
9+
"dependencies": {
10+
"react": "^18.2.0",
11+
"react-dom": "^18.2.0"
12+
},
13+
"devDependencies": {
14+
"@mdx-js/rollup": "^2.3.0",
15+
"@types/react": "^18.0.27",
16+
"@types/react-dom": "^18.0.10",
17+
"@vitejs/plugin-react-swc": "../../dist"
18+
}
19+
}

‎playground/mdx/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎playground/mdx/src/Counter.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { useState } from "react";
2+
3+
export const Counter = () => {
4+
const [count, setCount] = useState(0);
5+
6+
return <button onClick={() => setCount(count + 1)}>count is {count}</button>;
7+
};

‎playground/mdx/src/env.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "*.mdx" {
2+
import { JSX } from "react";
3+
export default () => JSX.Element;
4+
}

‎playground/mdx/src/hello.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Counter } from './Counter.tsx'
2+
3+
# Hello
4+
5+
This text is written in Markdown.
6+
7+
MDX allows Rich React components to be used directly in Markdown: <Counter/>

‎playground/mdx/src/index.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
import Hello from "./hello.mdx";
4+
5+
createRoot(document.getElementById("root")!).render(
6+
<StrictMode>
7+
<Hello />
8+
</StrictMode>,
9+
);

0 commit comments

Comments
 (0)