Skip to content

Commit c9be1d7

Browse files
Export meta (#528)
* export meta with named exports * export rest of files to export meta * add in msw export * add types * review changes * fix hello.spec.ts test * export getEntryData as api * change exports * make getMeta public * add test and remove viteProd * remove viteProd * rename to better test case name for getMeta export * Create shy-vans-punch.md * remove getMetaJson from exports --------- Co-authored-by: Vojtech Miksu <[email protected]>
1 parent 4660f28 commit c9be1d7

File tree

11 files changed

+205
-14
lines changed

11 files changed

+205
-14
lines changed

.changeset/shy-vans-punch.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@ladle/react": patch
3+
"test-decorators": patch
4+
"test-programmatic": patch
5+
---
6+
7+
Export programmatic meta API

e2e/decorators/tests/params.spec.ts

+7
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ test("meta.json is correctly using defaults and overrides", async ({
2929
locStart: 44,
3030
meta: {},
3131
name: "Card hello",
32+
namedExport: "CardHello",
3233
},
3334
"hello--world": {
3435
filePath: "src/hello.stories.tsx",
@@ -37,6 +38,7 @@ test("meta.json is correctly using defaults and overrides", async ({
3738
locStart: 18,
3839
meta: {},
3940
name: "World",
41+
namedExport: "World",
4042
},
4143
"legacy-params--world": {
4244
filePath: "src/legacy-params.stories.tsx",
@@ -45,6 +47,7 @@ test("meta.json is correctly using defaults and overrides", async ({
4547
locStart: 37,
4648
meta: {},
4749
name: "World",
50+
namedExport: "World",
4851
},
4952
"mock-date--active": {
5053
filePath: "src/mock-date.stories.tsx",
@@ -55,6 +58,7 @@ test("meta.json is correctly using defaults and overrides", async ({
5558
mockDate: "1995-12-17T03:24:00",
5659
},
5760
name: "Active",
61+
namedExport: "Active",
5862
},
5963
"mock-date--inactive": {
6064
filePath: "src/mock-date.stories.tsx",
@@ -63,6 +67,7 @@ test("meta.json is correctly using defaults and overrides", async ({
6367
locStart: 21,
6468
meta: {},
6569
name: "Inactive",
70+
namedExport: "Inactive",
6671
},
6772
"root--examples--first": {
6873
filePath: "src/params.stories.tsx",
@@ -71,6 +76,7 @@ test("meta.json is correctly using defaults and overrides", async ({
7176
locStart: 11,
7277
meta: { drink: "coke", food: "burger" },
7378
name: "First",
79+
namedExport: "First",
7480
},
7581
"root--examples--second-renamed": {
7682
filePath: "src/params.stories.tsx",
@@ -79,6 +85,7 @@ test("meta.json is correctly using defaults and overrides", async ({
7985
locStart: 15,
8086
meta: { drink: "water", food: "burger" },
8187
name: "Second renamed",
88+
namedExport: "Second",
8289
},
8390
},
8491
}),

e2e/programmatic/get-meta.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import getMeta from "@ladle/react/meta";
2+
3+
getMeta();

e2e/programmatic/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"scripts": {
88
"serve": "node serve.js",
99
"serve-prod": "node preview.js",
10+
"meta": "node get-meta.js",
1011
"build": "node build.js",
1112
"lint": "echo 'no lint'",
1213
"test-dev": "cross-env TYPE=dev pnpm exec playwright test",

e2e/programmatic/tests/hello.spec.ts

+38
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,46 @@
11
import { test, expect } from "@playwright/test";
22

3+
// @ts-ignore Cannot find module '@ladle/react/meta' or its corresponding type declarations.
4+
import getMeta from "@ladle/react/meta";
5+
36
test("provider passes context and renders wrapper", async ({ page }) => {
47
await page.goto("/");
58
await expect(page.locator("h1")).toHaveText("Hello World");
69
});
710

11+
test("getMeta export returns JS object identical to `meta.json` ", async () => {
12+
const meta = await getMeta();
13+
expect(await meta).toEqual(
14+
expect.objectContaining({
15+
about: {
16+
homepage: "https://www.ladle.dev",
17+
github: "https://github.com/tajo/ladle",
18+
version: 1,
19+
},
20+
stories: {
21+
"hello--world": {
22+
name: "World",
23+
levels: ["Hello"],
24+
locStart: 3,
25+
locEnd: 5,
26+
filePath: "src/hello.stories.tsx",
27+
meta: {},
28+
namedExport: "World",
29+
},
30+
"hello--ayo": {
31+
filePath: "src/hello.stories.tsx",
32+
levels: ["Hello"],
33+
locEnd: 9,
34+
locStart: 7,
35+
meta: {},
36+
name: "Ayo",
37+
namedExport: "Ayo",
38+
},
39+
},
40+
}),
41+
);
42+
});
43+
844
test("meta.json has a single story ok", async ({ request }) => {
945
const meta = await request.get("http://127.0.0.1:61105/meta.json");
1046
expect(await meta.json()).toEqual(
@@ -22,6 +58,7 @@ test("meta.json has a single story ok", async ({ request }) => {
2258
locEnd: 5,
2359
filePath: "src/hello.stories.tsx",
2460
meta: {},
61+
namedExport: "World",
2562
},
2663
"hello--ayo": {
2764
filePath: "src/hello.stories.tsx",
@@ -30,6 +67,7 @@ test("meta.json has a single story ok", async ({ request }) => {
3067
locStart: 7,
3168
meta: {},
3269
name: "Ayo",
70+
namedExport: "Ayo",
3371
},
3472
},
3573
}),

packages/ladle/api/meta.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import getMeta from "../lib/cli/get-meta.js";
2+
3+
export default getMeta;

packages/ladle/lib/cli/get-meta.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
#!/usr/bin/env node
2+
3+
import { getEntryData } from "./vite-plugin/parse/get-entry-data.js";
4+
import { getMetaJson } from "./vite-plugin/generate/get-meta-json.js";
5+
import { globby } from "globby";
6+
import applyCLIConfig from "./apply-cli-config.js";
7+
8+
const getMeta = async (params = {}) => {
9+
const { config } = await applyCLIConfig(params);
10+
const entryData = await getEntryData(
11+
await globby(
12+
Array.isArray(config.stories) ? config.stories : [config.stories],
13+
),
14+
);
15+
const meta = getMetaJson(entryData);
16+
return meta;
17+
};
18+
19+
export default getMeta;

packages/ladle/lib/cli/vite-plugin/generate/get-meta-json.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { storyIdToMeta } from "../naming-utils.js";
33
/**
44
* @param entryData {import('../../../shared/types').EntryData}
55
*/
6-
const getMetaJson = (entryData) => {
6+
export const getMetaJson = (entryData) => {
77
/** @type {string[]} */
88
let storyIds = [];
99
/** @type {{[key: string]: any}} */
@@ -12,10 +12,12 @@ const getMetaJson = (entryData) => {
1212
let storyMeta = {};
1313

1414
Object.keys(entryData).forEach((entry) => {
15-
entryData[entry].stories.forEach(({ storyId, locStart, locEnd }) => {
16-
storyMeta[storyId] = { locStart, locEnd, filePath: entry };
17-
storyIds.push(storyId);
18-
});
15+
entryData[entry].stories.forEach(
16+
({ storyId, locStart, locEnd, namedExport }) => {
17+
storyMeta[storyId] = { locStart, locEnd, filePath: entry, namedExport };
18+
storyIds.push(storyId);
19+
},
20+
);
1921
storyParams = { ...storyParams, ...entryData[entry].storyParams };
2022
});
2123
const result = {

packages/ladle/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
".": "./lib/app/exports.ts",
1111
"./serve": "./api/serve.js",
1212
"./preview": "./api/preview.js",
13-
"./build": "./api/build.js"
13+
"./build": "./api/build.js",
14+
"./meta": "./api/meta.js"
1415
},
1516
"packageManager": "[email protected]",
1617
"publishConfig": {

packages/ladle/tests/__snapshots__/get-meta-json.test.ts.snap

+98
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ exports[`Capital letters in story names converted into delimiters 1`] = `
1616
\\"locStart\\": 8,
1717
\\"locEnd\\": 10,
1818
\\"filePath\\": \\"tests/fixtures/capitalization.stories.tsx\\",
19+
\\"namedExport\\": \\"BigBarkingDog\\",
1920
\\"meta\\": {}
2021
},
2122
\\"capitalization--blue-tiny-cat\\": {
@@ -26,6 +27,7 @@ exports[`Capital letters in story names converted into delimiters 1`] = `
2627
\\"locStart\\": 4,
2728
\\"locEnd\\": 6,
2829
\\"filePath\\": \\"tests/fixtures/capitalization.stories.tsx\\",
30+
\\"namedExport\\": \\"BlueTinyCat\\",
2931
\\"meta\\": {}
3032
}
3133
}
@@ -48,6 +50,7 @@ exports[`Capital letters in the filename converted into delimiters 1`] = `
4850
\\"locStart\\": 4,
4951
\\"locEnd\\": 6,
5052
\\"filePath\\": \\"tests/fixtures/filenameCapitalization.stories.tsx\\",
53+
\\"namedExport\\": \\"Test\\",
5154
\\"meta\\": {}
5255
}
5356
}
@@ -70,6 +73,7 @@ exports[`Default title is used instead of the file name 1`] = `
7073
\\"locStart\\": 8,
7174
\\"locEnd\\": 10,
7275
\\"filePath\\": \\"tests/fixtures/default-title.stories.tsx\\",
76+
\\"namedExport\\": \\"Cat\\",
7377
\\"meta\\": {}
7478
}
7579
}
@@ -92,6 +96,7 @@ exports[`Extract and merge story meta 1`] = `
9296
\\"locStart\\": 14,
9397
\\"locEnd\\": 16,
9498
\\"filePath\\": \\"tests/fixtures/story-meta.stories.tsx\\",
99+
\\"namedExport\\": \\"Cat\\",
95100
\\"meta\\": {
96101
\\"baseweb\\": {
97102
\\"theme\\": \\"dark\\",
@@ -112,6 +117,7 @@ exports[`Extract and merge story meta 1`] = `
112117
\\"locStart\\": 26,
113118
\\"locEnd\\": 28,
114119
\\"filePath\\": \\"tests/fixtures/story-meta.stories.tsx\\",
120+
\\"namedExport\\": \\"Dog\\",
115121
\\"meta\\": {
116122
\\"baseweb\\": {
117123
\\"theme\\": \\"dark\\",
@@ -142,6 +148,7 @@ exports[`Extract default meta 1`] = `
142148
\\"locStart\\": 13,
143149
\\"locEnd\\": 15,
144150
\\"filePath\\": \\"tests/fixtures/default-meta.stories.tsx\\",
151+
\\"namedExport\\": \\"Cat\\",
145152
\\"meta\\": {
146153
\\"baseweb\\": {
147154
\\"foo\\": \\"title\\"
@@ -168,6 +175,7 @@ exports[`Single file with two stories 1`] = `
168175
\\"locStart\\": 4,
169176
\\"locEnd\\": 6,
170177
\\"filePath\\": \\"tests/fixtures/animals.stories.tsx\\",
178+
\\"namedExport\\": \\"Cat\\",
171179
\\"meta\\": {}
172180
},
173181
\\"animals--dog\\": {
@@ -178,6 +186,7 @@ exports[`Single file with two stories 1`] = `
178186
\\"locStart\\": 8,
179187
\\"locEnd\\": 10,
180188
\\"filePath\\": \\"tests/fixtures/animals.stories.tsx\\",
189+
\\"namedExport\\": \\"Dog\\",
181190
\\"meta\\": {}
182191
}
183192
}
@@ -200,6 +209,7 @@ exports[`Story name replaces named export as a story name 1`] = `
200209
\\"locStart\\": 15,
201210
\\"locEnd\\": 17,
202211
\\"filePath\\": \\"tests/fixtures/storyname.stories.tsx\\",
212+
\\"namedExport\\": \\"CapitalCity\\",
203213
\\"meta\\": {}
204214
},
205215
\\"storyname--champs-élysées\\": {
@@ -210,6 +220,7 @@ exports[`Story name replaces named export as a story name 1`] = `
210220
\\"locStart\\": 19,
211221
\\"locEnd\\": 21,
212222
\\"filePath\\": \\"tests/fixtures/storyname.stories.tsx\\",
223+
\\"namedExport\\": \\"CapitalReplaced\\",
213224
\\"meta\\": {}
214225
},
215226
\\"storyname--doggo\\": {
@@ -220,12 +231,98 @@ exports[`Story name replaces named export as a story name 1`] = `
220231
\\"locStart\\": 4,
221232
\\"locEnd\\": 9,
222233
\\"filePath\\": \\"tests/fixtures/storyname.stories.tsx\\",
234+
\\"namedExport\\": \\"Cat\\",
223235
\\"meta\\": {}
224236
}
225237
}
226238
}"
227239
`;
228240

241+
exports[`Test multiple stories 1`] = `
242+
{
243+
"about": {
244+
"github": "https://github.com/tajo/ladle",
245+
"homepage": "https://www.ladle.dev",
246+
"version": 1,
247+
},
248+
"stories": {
249+
"storyname--capital-city": {
250+
"filePath": "tests/fixtures/storyname.stories.tsx",
251+
"levels": [
252+
"Storyname",
253+
],
254+
"locEnd": 17,
255+
"locStart": 15,
256+
"meta": {},
257+
"name": "Capital city",
258+
"namedExport": "CapitalCity",
259+
},
260+
"storyname--champs-élysées": {
261+
"filePath": "tests/fixtures/storyname.stories.tsx",
262+
"levels": [
263+
"Storyname",
264+
],
265+
"locEnd": 21,
266+
"locStart": 19,
267+
"meta": {},
268+
"name": "Champs élysées",
269+
"namedExport": "CapitalReplaced",
270+
},
271+
"storyname--doggo": {
272+
"filePath": "tests/fixtures/storyname.stories.tsx",
273+
"levels": [
274+
"Storyname",
275+
],
276+
"locEnd": 9,
277+
"locStart": 4,
278+
"meta": {},
279+
"name": "Doggo",
280+
"namedExport": "Cat",
281+
},
282+
"title--cat": {
283+
"filePath": "tests/fixtures/story-meta.stories.tsx",
284+
"levels": [
285+
"Title",
286+
],
287+
"locEnd": 16,
288+
"locStart": 14,
289+
"meta": {
290+
"baseweb": {
291+
"browsers": [
292+
"chrome",
293+
"firefox",
294+
],
295+
"theme": "dark",
296+
"width": "500px",
297+
},
298+
"links": true,
299+
},
300+
"name": "Cat",
301+
"namedExport": "Cat",
302+
},
303+
"title--dog": {
304+
"filePath": "tests/fixtures/story-meta.stories.tsx",
305+
"levels": [
306+
"Title",
307+
],
308+
"locEnd": 28,
309+
"locStart": 26,
310+
"meta": {
311+
"baseweb": {
312+
"browsers": [
313+
"chrome",
314+
"webkit",
315+
],
316+
"theme": "dark",
317+
},
318+
},
319+
"name": "Dog",
320+
"namedExport": "Dog",
321+
},
322+
},
323+
}
324+
`;
325+
229326
exports[`Turn file name delimiters into spaces and levels correctly 1`] = `
230327
"{
231328
\\"about\\": {
@@ -243,6 +340,7 @@ exports[`Turn file name delimiters into spaces and levels correctly 1`] = `
243340
\\"locStart\\": 4,
244341
\\"locEnd\\": 6,
245342
\\"filePath\\": \\"tests/fixtures/our-animals--mammals.stories.tsx\\",
343+
\\"namedExport\\": \\"Cat\\",
246344
\\"meta\\": {}
247345
}
248346
}

0 commit comments

Comments
 (0)