From 06ec2b8b14e3f2ce4436ef91927256e28e6ab9cc Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 17 Apr 2023 14:35:08 +1000 Subject: [PATCH 1/2] Add new tags `(un)attached-mdx` to distinguish attachment --- .../src/utils/StoryIndexGenerator.test.ts | 13 +++++++++++++ .../core-server/src/utils/StoryIndexGenerator.ts | 8 +++++++- code/lib/core-server/src/utils/stories-json.test.ts | 10 ++++++++++ 3 files changed, 30 insertions(+), 1 deletion(-) diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts index 6011e1c0d1ce..f9da363711fa 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts @@ -508,6 +508,7 @@ describe('StoryIndexGenerator', () => { "./src/B.stories.ts", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "B", @@ -566,6 +567,7 @@ describe('StoryIndexGenerator', () => { "./src/B.stories.ts", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "B", @@ -616,6 +618,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -727,6 +730,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -740,6 +744,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -762,6 +767,7 @@ describe('StoryIndexGenerator', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "ComponentReference", @@ -773,6 +779,7 @@ describe('StoryIndexGenerator', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/Yabbadabbadooo", @@ -784,6 +791,7 @@ describe('StoryIndexGenerator', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "NoTitle", @@ -844,6 +852,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -857,6 +866,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -879,6 +889,7 @@ describe('StoryIndexGenerator', () => { "name": "Info", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "ComponentReference", @@ -890,6 +901,7 @@ describe('StoryIndexGenerator', () => { "name": "Info", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/Yabbadabbadooo", @@ -901,6 +913,7 @@ describe('StoryIndexGenerator', () => { "name": "Info", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "NoTitle", diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index d80c705ca752..c7054c75fb6c 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -325,6 +325,10 @@ export class StoryIndexGenerator { // are invalidated.f const dependencies = this.findDependencies(absoluteImports); + // To ensure the `` import is always first in the list, we'll bring the dependency + // that contains it to the front of the list. + let sortedDependencies = dependencies; + // Also, if `result.of` is set, it means that we're using the `` syntax, // so find the `title` defined the file that `meta` points to. let csfEntry: StoryIndexEntry; @@ -342,6 +346,8 @@ export class StoryIndexGenerator { csfEntry = first; } } + + sortedDependencies = [dep, ...dependencies.filter((d) => d !== dep)]; }); if (!csfEntry) @@ -374,7 +380,7 @@ export class StoryIndexGenerator { importPath, storiesImports: dependencies.map((dep) => dep.entries[0].importPath), type: 'docs', - tags: [...(result.tags || []), 'docs'], + tags: [...(result.tags || []), csfEntry ? 'attached-mdx' : 'unattached-mdx', 'docs'], }; return docsEntry; } catch (err) { diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts index bbc0e920c8d1..a36c0bc5c46d 100644 --- a/code/lib/core-server/src/utils/stories-json.test.ts +++ b/code/lib/core-server/src/utils/stories-json.test.ts @@ -126,6 +126,7 @@ describe('useStoriesJson', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -139,6 +140,7 @@ describe('useStoriesJson', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -183,6 +185,7 @@ describe('useStoriesJson', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/ComponentReference", @@ -194,6 +197,7 @@ describe('useStoriesJson', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/NoTitle", @@ -205,6 +209,7 @@ describe('useStoriesJson', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/Yabbadabbadooo", @@ -304,6 +309,7 @@ describe('useStoriesJson', () => { ], "story": "MetaOf", "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -323,6 +329,7 @@ describe('useStoriesJson', () => { ], "story": "Second Docs", "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -391,6 +398,7 @@ describe('useStoriesJson', () => { "storiesImports": Array [], "story": "docs", "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/ComponentReference", @@ -408,6 +416,7 @@ describe('useStoriesJson', () => { "storiesImports": Array [], "story": "docs", "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/NoTitle", @@ -425,6 +434,7 @@ describe('useStoriesJson', () => { "storiesImports": Array [], "story": "docs", "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/Yabbadabbadooo", From e7b6a5b22d9e5e1dabe8e4f90a5d3a1d800fe8e4 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 17 Apr 2023 14:36:30 +1000 Subject: [PATCH 2/2] Ensure the attached stories file is always first --- .../src/utils/StoryIndexGenerator.test.ts | 56 +++++++++++++++++++ .../src/utils/StoryIndexGenerator.ts | 2 +- .../complex/TwoStoryReferences.mdx | 9 +++ 3 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 code/lib/core-server/src/utils/__mockdata__/complex/TwoStoryReferences.mdx diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts index f9da363711fa..dda39482fa5d 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts @@ -924,6 +924,62 @@ describe('StoryIndexGenerator', () => { } `); }); + + it('pulls the attached story file to the front of the list', async () => { + const generator = new StoryIndexGenerator( + [ + normalizeStoriesEntry('./src/A.stories.js', options), + normalizeStoriesEntry('./src/B.stories.ts', options), + normalizeStoriesEntry('./complex/TwoStoryReferences.mdx', options), + ], + options + ); + await generator.initialize(); + expect(await generator.getIndex()).toMatchInlineSnapshot(` + Object { + "entries": Object { + "a--story-one": Object { + "id": "a--story-one", + "importPath": "./src/A.stories.js", + "name": "Story One", + "tags": Array [ + "story-tag", + "story", + ], + "title": "A", + "type": "story", + }, + "b--story-one": Object { + "id": "b--story-one", + "importPath": "./src/B.stories.ts", + "name": "Story One", + "tags": Array [ + "autodocs", + "story", + ], + "title": "B", + "type": "story", + }, + "b--twostoryreferences": Object { + "id": "b--twostoryreferences", + "importPath": "./complex/TwoStoryReferences.mdx", + "name": "TwoStoryReferences", + "storiesImports": Array [ + "./src/B.stories.ts", + "./src/A.stories.js", + ], + "tags": Array [ + "attached-mdx", + "docs", + ], + "title": "B", + "type": "docs", + }, + }, + "v": 4, + } + `); + }); }); describe('errors', () => { diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index c7054c75fb6c..7043c39bc991 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -378,7 +378,7 @@ export class StoryIndexGenerator { title, name, importPath, - storiesImports: dependencies.map((dep) => dep.entries[0].importPath), + storiesImports: sortedDependencies.map((dep) => dep.entries[0].importPath), type: 'docs', tags: [...(result.tags || []), csfEntry ? 'attached-mdx' : 'unattached-mdx', 'docs'], }; diff --git a/code/lib/core-server/src/utils/__mockdata__/complex/TwoStoryReferences.mdx b/code/lib/core-server/src/utils/__mockdata__/complex/TwoStoryReferences.mdx new file mode 100644 index 000000000000..c70caf598e6d --- /dev/null +++ b/code/lib/core-server/src/utils/__mockdata__/complex/TwoStoryReferences.mdx @@ -0,0 +1,9 @@ +{/* References AStories first, but is attached to B */} +import * as AStories from '../src/A.stories'; +import * as BStories from '../src/B.stories'; + + + +# This file references two story files + +It is important that B.stories is the first listed in `storiesImports` (so we can tell what it is attached to)