Skip to content

Commit

Permalink
Merge branch 'load-ts-vite-config'
Browse files Browse the repository at this point in the history
  • Loading branch information
tajo committed Jun 12, 2022
2 parents 42e3cf9 + bc0edae commit 3ec163f
Showing 14 changed files with 220 additions and 120 deletions.
19 changes: 19 additions & 0 deletions .changeset/giant-shirts-remain.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
"test-config-ts": major
"@ladle/react": minor
---

Load vite.config.ts the same way as Vite

## WHAT the breaking change is

(Only for the package maintainers) a new E2E packages is added.

## WHY the change was made

Ladle was not able to handle `vite.config.ts` the way Vite does.
For example, Ladle was not able to load `vite.config.ts` which imported other TS modules.

## HOW a consumer should update their code

(Only for the package maintainers) recognize a new e2e workspace with `pnpm install`.
3 changes: 3 additions & 0 deletions e2e/config-ts/.ladle/config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default {
stories: "src/**/*.show.{js,jsx,ts,tsx}",
};
36 changes: 36 additions & 0 deletions e2e/config-ts/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# test-provider

## 0.2.30

### Patch Changes

- Updated dependencies [[`a53c25a`](https://github.com/tajo/ladle/commit/a53c25abc20d18068bc9a404dfb0bf6c47ca428e)]:
- @ladle/react@1.0.1

## 0.2.29

### Patch Changes

- Updated dependencies [[`f9a4965`](https://github.com/tajo/ladle/commit/f9a4965e8a7940f9aa41df2c2c8418d37f9f0d35), [`05bee5d`](https://github.com/tajo/ladle/commit/05bee5d155703fdbd57e4984e21eae6e20a24184)]:
- @ladle/react@1.0.0

## 0.2.28

### Patch Changes

- Updated dependencies [[`daa717d`](https://github.com/tajo/ladle/commit/daa717dd680cf55da5afbc53809109212555fc3c), [`8568de6`](https://github.com/tajo/ladle/commit/8568de64640823bb0e66797195288a3b4e81fdb6)]:
- @ladle/react@0.16.0

## 0.2.27

### Patch Changes

- Updated dependencies [[`421a0c3`](https://github.com/tajo/ladle/commit/421a0c3ef1b97ec2db416c49cadcdd422398ec06)]:
- @ladle/react@0.15.2

## 0.2.26

### Patch Changes

- Updated dependencies [[`2351356`](https://github.com/tajo/ladle/commit/235135613503255bf0e1bf0af5332b7b08d00f2b), [`f0a42ad`](https://github.com/tajo/ladle/commit/f0a42ad7123e30c8ab71d63d843bf0d9670b4931), [`515d069`](https://github.com/tajo/ladle/commit/515d0696665df786e45b5c76aed88239c68cdf24), [`c027c8c`](https://github.com/tajo/ladle/commit/c027c8c0a8a2442317b068787c039a580bf2c502), [`fa8db60`](https://github.com/tajo/ladle/commit/fa8db60ceba04e9d0fab519ad4b3b84e88ba412d), [`e2069f4`](https://github.com/tajo/ladle/commit/e2069f4b3d2b0b69a034c28e508a171ce011c45a), [`0a44aa2`](https://github.com/tajo/ladle/commit/0a44aa2a1b40f392db3163cddfdae7633771edec)]:
- @ladle/react@0.15.1
23 changes: 23 additions & 0 deletions e2e/config-ts/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "test-config-ts",
"version": "0.2.30",
"license": "MIT",
"private": true,
"scripts": {
"serve": "ladle serve --port=61108",
"serve-prod": "http-server build -c-1 -s -p 61108",
"build": "ladle build",
"lint": "echo 'no lint'",
"test-dev": "start-server-and-test serve 61108 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
"test-prod": "start-server-and-test serve-prod 61108 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
"test": "npm run test-dev && npm run test-prod"
},
"dependencies": {
"@ladle/react": "workspace:*",
"@playwright/test": "1.19.2",
"http-server": "^14.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"start-server-and-test": "^1.14.0"
}
}
26 changes: 26 additions & 0 deletions e2e/config-ts/src/hello.show.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
declare const __filename_root: string;
declare const __dirname_root: string;
declare const __filename_myPlugin: string;
declare const __dirname_myPlugin: string;

export const World = () => {
return (
<div>
<h1>Hello World</h1>

<dl>
<dt>filename root</dt>
<dd data-test="filename_root">{__filename_root}</dd>

<dt>dirname root</dt>
<dd data-test="dirname_root">{__dirname_root}</dd>

<dt>filename myPlugin</dt>
<dd data-test="filename_myPlugin">{__filename_myPlugin}</dd>

<dt>dirname myPlugin</dt>
<dd data-test="dirname_myPlugin">{__dirname_myPlugin}</dd>
</dl>
</div>
);
};
24 changes: 24 additions & 0 deletions e2e/config-ts/tests/hello.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { expect, test } from "@playwright/test";

test("default story is rendered", async ({ page }) => {
await page.goto("http://localhost:61108");
await expect(page.locator("h1")).toHaveText("Hello World");
});

test("__filename and __dirname are replaced", async ({ page }) => {
await page.goto("http://localhost:61108");

await expect(page.locator("[data-test=filename_root]")).toHaveText(
/e2e\/config-ts\/vite\.config\.ts/,
);
await expect(page.locator("[data-test=dirname_root]")).toHaveText(
/e2e\/config-ts/,
);

await expect(page.locator("[data-test=filename_myPlugin]")).toHaveText(
/e2e\/config-ts\/vite-my-plugin\.ts/,
);
await expect(page.locator("[data-test=dirname_myPlugin]")).toHaveText(
/e2e\/config-ts/,
);
});
16 changes: 16 additions & 0 deletions e2e/config-ts/vite-my-plugin.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export default function myPlugin() {
return {
name: "vite-my-plugin",

config() {
return {
define: {
// @ts-ignore
__filename_myPlugin: JSON.stringify(__filename),
// @ts-ignore
__dirname_myPlugin: JSON.stringify(__dirname),
},
};
},
};
}
15 changes: 15 additions & 0 deletions e2e/config-ts/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import myPlugin from "./vite-my-plugin";

export default {
server: {
open: "none",
},

define: {
// @ts-ignore
__filename_root: JSON.stringify(__filename),
// @ts-ignore
__dirname_root: JSON.stringify(__dirname),
},
plugins: [myPlugin()],
};
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@
"e2e/addons",
"e2e/commonjs",
"e2e/config",
"e2e/config-ts",
"e2e/css",
"e2e/decorators",
"e2e/flow",
1 change: 0 additions & 1 deletion packages/ladle/build-cjs.js
Original file line number Diff line number Diff line change
@@ -41,7 +41,6 @@ filesWithDirname.forEach((file) => {
fs.writeFile(
file,
content
.replace("load-user-vite-config.cjs", "load-user-vite-config.js")
.replace(
`const __dirname = (0, _path.dirname)((0, _url.fileURLToPath)(import.meta.url));`,
"",
22 changes: 6 additions & 16 deletions packages/ladle/lib/cli/get-user-vite-config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { isAbsolute, join } from "path";
import { loadConfigFromFile } from "vite";
import debug from "./debug.js";
import loadUserViteConfig from "./load-user-vite-config.js";

// vite.config.js paths are relative to the project root
// but for ladle, the root is in a different package, so
@@ -40,27 +40,17 @@ const getCacheDir = (cacheDir) => {
* @return {Promise<import('../shared/types').GetUserViteConfig>}
*/
export default async (command, mode, viteConfig) => {
/**
* @type {import('vite').UserConfigExport}
*/
//@ts-ignore
let rawUserViteConfig = await loadUserViteConfig(viteConfig);
if (!rawUserViteConfig) {
const userViteConfig = await loadConfigFromFile(
{ command, mode },
viteConfig,
).then((loaded) => loaded?.config);
if (!userViteConfig) {
return {
userViteConfig: {},
hasReactPlugin: false,
hasTSConfigPathPlugin: false,
};
}
/** @type {import('vite').UserConfig} */
let userViteConfig;
if (typeof rawUserViteConfig === "function") {
userViteConfig = await rawUserViteConfig({ command, mode });
} else {
userViteConfig = /** @type {import('vite').UserConfig} */ (
rawUserViteConfig
);
}

debug(`user vite config loaded:`);
debug(userViteConfig);
93 changes: 0 additions & 93 deletions packages/ladle/lib/cli/load-user-vite-config.js

This file was deleted.

Loading

0 comments on commit 3ec163f

Please sign in to comment.