Skip to content

Commit 5b9f4ef

Browse files
tajotajo
authored
Upgrade to Vite5, MDX3 and all other deps as well (#533)
* Upgrade to Vite5, MDX3 and all other deps as well * Fix MSW * Fix msw/browser mock * FIx snapshot test
1 parent dc2e1c0 commit 5b9f4ef

30 files changed

+3616
-3939
lines changed

‎.changeset/fifty-crews-live.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@ladle/react": major
3+
---
4+
5+
Upgrade to Vite5, MSW2, MDX3 and all other deps as well.
6+
7+
**BREAKING changes**
8+
9+
- The biggest breaking change is upgrading [MSW](https://mswjs.io/) to v2. Ladle ships its [own copy of msw](https://ladle.dev/docs/msw/). You will need to update your existing MSW handlers. There are [codemods and migration gudie](https://mswjs.io/docs/migrations/1.x-to-2.x) that should ease the transition. If you don't use this addon, you can ignore this.
10+
- Ladle v3 has already dropped support for older Node versions. However, there are more Ladle v4 dependencies following the suit (including Vite) to support only Node v18+. So now it's really time to upgrade your Node.
11+
- Vite v5 should not really break anything for you unless you were using some more exotic rollup plugins. Check Vite 4 to Vite 5 [migration guide](https://vitejs.dev/guide/migration) if you run into any issues.

‎e2e/addons/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"dependencies": {
1717
"@ladle/playwright-config": "workspace:*",
1818
"@ladle/react": "workspace:*",
19-
"@playwright/test": "^1.38.0",
19+
"@playwright/test": "^1.40.0",
2020
"axe-playwright": "^1.2.3",
2121
"cross-env": "^7.0.3",
2222
"query-string": "^8.1.0",

‎e2e/babel/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"dependencies": {
1616
"@ladle/playwright-config": "workspace:*",
1717
"@ladle/react": "workspace:*",
18-
"@playwright/test": "^1.38.0",
19-
"@vitejs/plugin-react": "^4.0.4",
18+
"@playwright/test": "^1.40.0",
19+
"@vitejs/plugin-react": "^4.2.0",
2020
"cross-env": "^7.0.3",
2121
"react": "^18.2.0",
2222
"react-dom": "^18.2.0"

‎e2e/baseweb/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@
1515
"dependencies": {
1616
"@ladle/playwright-config": "workspace:*",
1717
"@ladle/react": "workspace:*",
18-
"@playwright/test": "^1.38.0",
19-
"autoprefixer": "^10.4.15",
18+
"@playwright/test": "^1.40.0",
19+
"autoprefixer": "^10.4.16",
2020
"baseui": "^13.0.0",
2121
"cross-env": "^7.0.3",
22-
"postcss": "^8.4.29",
22+
"postcss": "^8.4.31",
2323
"react": "^18.2.0",
2424
"react-dom": "^18.2.0",
2525
"styletron-engine-monolithic": "^1.0.0",
26-
"styletron-react": "^6.1.0",
27-
"tailwindcss": "^3.3.3"
26+
"styletron-react": "^6.1.1",
27+
"tailwindcss": "^3.3.5"
2828
}
2929
}

‎e2e/config-ts/package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,9 @@
1515
"dependencies": {
1616
"@ladle/playwright-config": "workspace:*",
1717
"@ladle/react": "workspace:*",
18-
"@playwright/test": "^1.38.0",
18+
"@playwright/test": "^1.40.0",
1919
"cross-env": "^7.0.3",
2020
"react": "^18.2.0",
21-
"react-dom": "^18.2.0",
22-
"start-server-and-test": "^2.0.0"
21+
"react-dom": "^18.2.0"
2322
}
2423
}

‎e2e/config/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"dependencies": {
1616
"@ladle/playwright-config": "workspace:*",
1717
"@ladle/react": "workspace:*",
18-
"@playwright/test": "^1.38.0",
18+
"@playwright/test": "^1.40.0",
1919
"cross-env": "^7.0.3",
2020
"react": "^18.2.0",
2121
"react-dom": "^18.2.0"

‎e2e/css/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
"dependencies": {
1616
"@ladle/playwright-config": "workspace:*",
1717
"@ladle/react": "workspace:*",
18-
"@playwright/test": "^1.38.0",
19-
"autoprefixer": "^10.4.15",
18+
"@playwright/test": "^1.40.0",
19+
"autoprefixer": "^10.4.16",
2020
"cross-env": "^7.0.3",
21-
"postcss": "^8.4.29",
21+
"postcss": "^8.4.31",
2222
"react": "^18.2.0",
2323
"react-dom": "^18.2.0",
24-
"tailwindcss": "^3.3.3"
24+
"tailwindcss": "^3.3.5"
2525
}
2626
}

‎e2e/decorators/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"dependencies": {
1616
"@ladle/playwright-config": "workspace:*",
1717
"@ladle/react": "workspace:*",
18-
"@playwright/test": "^1.38.0",
18+
"@playwright/test": "^1.40.0",
1919
"cross-env": "^7.0.3",
2020
"react": "^18.2.0",
2121
"react-dom": "^18.2.0"

‎e2e/msw/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@
1515
"dependencies": {
1616
"@ladle/playwright-config": "workspace:*",
1717
"@ladle/react": "workspace:*",
18-
"@playwright/test": "^1.38.0",
19-
"autoprefixer": "^10.4.15",
18+
"@playwright/test": "^1.40.0",
19+
"autoprefixer": "^10.4.16",
2020
"baseui": "^13.0.0",
2121
"cross-env": "^7.0.3",
22-
"postcss": "^8.4.29",
22+
"postcss": "^8.4.31",
2323
"react": "^18.2.0",
2424
"react-dom": "^18.2.0",
2525
"styletron-engine-monolithic": "^1.0.0",
26-
"styletron-react": "^6.1.0",
27-
"tailwindcss": "^3.3.3"
26+
"styletron-react": "^6.1.1",
27+
"tailwindcss": "^3.3.5"
2828
}
2929
}

‎e2e/msw/src/posts.stories.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,16 @@ export const Live: Story = () => {
5959
// Set default handlers for all stories
6060
export default {
6161
msw: [
62-
msw.rest.get(FETCH_URL, (_, res, ctx) => {
63-
return res(ctx.json([{ id: 1, title: "msw post default" }]));
62+
msw.http.get(FETCH_URL, () => {
63+
return msw.HttpResponse.json([{ id: 1, title: "msw post default" }]);
6464
}),
6565
],
6666
};
6767

6868
// Replace handlers
6969
Replaced.msw = [
70-
msw.rest.get(FETCH_URL, (_, res, ctx) => {
71-
return res(ctx.json([{ id: 1, title: "msw post replaced" }]));
70+
msw.http.get(FETCH_URL, () => {
71+
return msw.HttpResponse.json([{ id: 1, title: "msw post replaced" }]);
7272
}),
7373
];
7474

‎e2e/msw/src/todos.stories.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,12 @@ export const Live: Story = () => {
4040
};
4141

4242
Mocked.msw = [
43-
msw.rest.get(FETCH_URL, (_, res, ctx) => {
44-
return res(ctx.json([{ id: 1, title: "msw todo" }]));
43+
msw.http.get(FETCH_URL, () => {
44+
return new Response(JSON.stringify([{ id: 1, title: "msw todo" }]), {
45+
headers: {
46+
"Content-Type": "application/json",
47+
"x-msw-bypass": "true",
48+
},
49+
});
4550
}),
4651
];

‎e2e/playwright-config/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
"test": "echo 'no test'"
1111
},
1212
"dependencies": {
13-
"@playwright/test": "^1.38.0"
13+
"@playwright/test": "^1.40.0"
1414
}
1515
}

‎e2e/playwright/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717
"dependencies": {
1818
"@ladle/playwright-config": "workspace:*",
1919
"@ladle/react": "workspace:*",
20-
"@playwright/test": "^1.38.0",
21-
"@types/sync-fetch": "^0.4.0",
20+
"@playwright/test": "^1.40.0",
21+
"@types/sync-fetch": "^0.4.3",
2222
"cross-env": "^7.0.3",
2323
"react": "^18.2.0",
2424
"react-dom": "^18.2.0",
25-
"start-server-and-test": "^2.0.0",
25+
"start-server-and-test": "^2.0.3",
2626
"sync-fetch": "^0.5.2"
2727
}
2828
}

‎e2e/programmatic/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"dependencies": {
1818
"@ladle/playwright-config": "workspace:*",
1919
"@ladle/react": "workspace:*",
20-
"@playwright/test": "^1.38.0",
20+
"@playwright/test": "^1.40.0",
2121
"cross-env": "^7.0.3",
2222
"react": "^18.2.0",
2323
"react-dom": "^18.2.0"

‎e2e/provider/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"dependencies": {
1616
"@ladle/playwright-config": "workspace:*",
1717
"@ladle/react": "workspace:*",
18-
"@playwright/test": "^1.38.0",
18+
"@playwright/test": "^1.40.0",
1919
"cross-env": "^7.0.3",
2020
"react": "^18.2.0",
2121
"react-dom": "^18.2.0"

‎package.json

+12-12
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,21 @@
3636
"devDependencies": {
3737
"@changesets/changelog-github": "^0.4.8",
3838
"@changesets/cli": "^2.26.2",
39-
"@commitlint/cli": "^17.7.1",
40-
"@commitlint/config-conventional": "^17.7.0",
41-
"@playwright/test": "^1.38.0",
42-
"@types/react": "^18.2.21",
43-
"@types/react-dom": "^18.2.7",
44-
"@typescript-eslint/eslint-plugin": "^6.7.0",
45-
"@typescript-eslint/parser": "^6.7.0",
46-
"eslint": "^8.49.0",
39+
"@commitlint/cli": "^18.4.2",
40+
"@commitlint/config-conventional": "^18.4.2",
41+
"@playwright/test": "^1.40.0",
42+
"@types/react": "^18.2.37",
43+
"@types/react-dom": "^18.2.15",
44+
"@typescript-eslint/eslint-plugin": "^6.11.0",
45+
"@typescript-eslint/parser": "^6.11.0",
46+
"eslint": "^8.54.0",
4747
"eslint-config-prettier": "^9.0.0",
48-
"eslint-plugin-prettier": "^5.0.0",
48+
"eslint-plugin-prettier": "^5.0.1",
4949
"eslint-plugin-react": "^7.33.2",
5050
"husky": "^8.0.3",
51-
"lint-staged": "^14.0.1",
52-
"prettier": "^3.0.3",
53-
"turbo": "^1.10.14",
51+
"lint-staged": "^15.1.0",
52+
"prettier": "^3.1.0",
53+
"turbo": "^1.10.16",
5454
"typescript": "^5.2.2"
5555
},
5656
"engines": {

‎packages/ladle/lib/app/src/msw.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Msw = ({
1212
React.useEffect(() => {
1313
const initMsw = async () => {
1414
if (msw.length > 0) {
15-
const { setupWorker } = await import("msw");
15+
const { setupWorker } = await import("msw/browser");
1616
if (!window.__ladle_msw) {
1717
window.__ladle_msw = setupWorker();
1818
window.__ladle_msw.use(...msw);

‎packages/ladle/lib/app/window.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { SetupWorker } from "msw";
1+
import type { SetupWorker } from "msw/browser";
22

33
declare global {
44
interface Window {

‎packages/ladle/lib/cli/copy-msw-worker.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,7 @@ const copyMswWorker = async (publicDir) => {
2828
await ensureDirectoryExists(publicDir);
2929
const mswWorkerPath = join(publicDir, "mockServiceWorker.js");
3030
const mswPath = require.resolve("msw");
31-
const mswWorkerPathOrigin = mswPath.replace(
32-
"index.js",
33-
"mockServiceWorker.js",
34-
);
35-
await copyFile(mswWorkerPathOrigin, mswWorkerPath);
31+
await copyFile(join(mswPath, "../../mockServiceWorker.js"), mswWorkerPath);
3632
};
3733

3834
export default copyMswWorker;

‎packages/ladle/lib/cli/vite-base.js

+10
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,12 @@ const getBaseViteConfig = async (ladleConfig, configFolder, viteConfig) => {
7070
const resolve = {};
7171
if (Array.isArray(userViteConfig.resolve?.alias)) {
7272
resolve.alias = [
73+
{
74+
find: "msw/browser",
75+
replacement: ladleConfig.addons.msw.enabled
76+
? "msw/browser"
77+
: path.join(__dirname, "./empty-module.js"),
78+
},
7379
{
7480
find: "msw",
7581
replacement: ladleConfig.addons.msw.enabled
@@ -85,6 +91,9 @@ const getBaseViteConfig = async (ladleConfig, configFolder, viteConfig) => {
8591
];
8692
} else {
8793
resolve.alias = {
94+
["msw/browser"]: ladleConfig.addons.msw.enabled
95+
? "msw/browser"
96+
: path.join(__dirname, "./empty-module.js"),
8897
msw: ladleConfig.addons.msw.enabled
8998
? "msw"
9099
: path.join(__dirname, "./empty-module.js"),
@@ -144,6 +153,7 @@ const getBaseViteConfig = async (ladleConfig, configFolder, viteConfig) => {
144153
"@ladle/react-context",
145154
...(ladleConfig.addons.a11y.enabled ? ["axe-core"] : []),
146155
...(ladleConfig.addons.msw.enabled ? ["msw"] : []),
156+
...(ladleConfig.addons.msw.enabled ? ["msw/browser"] : []),
147157
...(inladleMonorepo ? [] : ["@ladle/react"]),
148158
...(!!resolve.alias ? [] : ["react-dom/client"]),
149159
],

‎packages/ladle/lib/cli/vite-plugin/mdx-plugin.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { VFile } from "vfile";
55
import remarkGfm from "remark-gfm";
66
import rehypeRaw from "rehype-raw";
77
import rehypeAddClasses from "rehype-class-names";
8-
import { createFormatAwareProcessors } from "@mdx-js/mdx/lib/util/create-format-aware-processors.js";
8+
import { createFormatAwareProcessors } from "@mdx-js/mdx/internal-create-format-aware-processors";
99
import mdxToStories from "./mdx-to-stories.js";
1010

1111
/**

‎packages/ladle/lib/cli/vite-plugin/mdx-to-stories.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -170,9 +170,10 @@ const prepare = async (code, filename, transformMdx = false) => {
170170
const output = await transformFromAstAsync(ast, inputCode, {
171171
plugins: [transformPlugin],
172172
});
173-
let result = output?.code
174-
?.replace("export default MDXContent;", "")
175-
.replace("function MDXContent(", "export function MDXContent(");
173+
let result = output?.code?.replace(
174+
"export default function MDXContent(",
175+
"export function MDXContent(",
176+
);
176177

177178
if (!result.includes("MDXContent.storyName")) {
178179
result = `${result}\nMDXContent.storyName = 'Readme';`;

‎packages/ladle/lib/cli/vite-plugin/vite-plugin.js

+14-16
Original file line numberDiff line numberDiff line change
@@ -45,23 +45,21 @@ function ladlePlugin(config, configFolder, mode) {
4545
}
4646
return null;
4747
},
48-
transformIndexHtml: {
49-
/**
50-
* @param {string} html
51-
* @param {any} ctx
52-
*/
53-
transform(html, ctx) {
54-
if (ctx.path === "/index.html") {
55-
if (fs.existsSync(headHtmlPath)) {
56-
const headHtml = fs.readFileSync(headHtmlPath, "utf8");
57-
html = html.replace("</head>", `${headHtml}</head>`);
58-
}
59-
if (config.appendToHead !== "") {
60-
html = html.replace("</head>", `${config.appendToHead}</head>`);
61-
}
48+
/**
49+
* @param {string} html
50+
* @param {any} ctx
51+
*/
52+
transformIndexHtml(html, ctx) {
53+
if (ctx.path === "/index.html") {
54+
if (fs.existsSync(headHtmlPath)) {
55+
const headHtml = fs.readFileSync(headHtmlPath, "utf8");
56+
html = html.replace("</head>", `${headHtml}</head>`);
57+
}
58+
if (config.appendToHead !== "") {
59+
html = html.replace("</head>", `${config.appendToHead}</head>`);
6260
}
63-
return html;
64-
},
61+
}
62+
return html;
6563
},
6664
/**
6765
* @param {string} code

0 commit comments

Comments
 (0)