Skip to content

Commit 2fcd379

Browse files
xeho91xeho91
committed
fix: improve appendix to avoid naming collisions with story names
1 parent 8819de4 commit 2fcd379

File tree

6 files changed

+127
-137
lines changed

6 files changed

+127
-137
lines changed

‎src/compiler/post-transform/appendix/create-export-order.ts‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,38 @@
11
import type { getStoriesIdentifiers } from '$lib/parser/analyse/story/attributes/identifiers.js';
2-
import type { ESTreeAST } from '$lib/parser/ast.js';
2+
import {
3+
type ESTreeAST,
4+
createASTArrayExpression,
5+
createASTExportSpecifier,
6+
} from '$lib/parser/ast.js';
37

4-
interface Params {
5-
storyIdentifiers: ReturnType<typeof getStoriesIdentifiers>;
8+
interface ExportOrderVariableDeclarationParams {
9+
storiesIdentifiers: ReturnType<typeof getStoriesIdentifiers>;
610
filename?: string;
711
}
812

9-
export function createExportOrderVariable(params: Params): ESTreeAST.ExportNamedDeclaration {
10-
const { storyIdentifiers } = params;
13+
export function createExportOrderVariableDeclaration(
14+
params: ExportOrderVariableDeclarationParams
15+
): ESTreeAST.ExportNamedDeclaration {
16+
const { storiesIdentifiers: storyIdentifiers } = params;
1117

12-
const exported = {
13-
type: 'Identifier',
14-
name: '__namedExportsOrder',
15-
} as const;
18+
const specifier = createASTExportSpecifier({ local: '__namedExportsOrder' });
1619

1720
return {
1821
type: 'ExportNamedDeclaration',
19-
specifiers: [
20-
{
21-
type: 'ExportSpecifier',
22-
local: exported,
23-
exported,
24-
},
25-
],
22+
specifiers: [specifier],
2623
declaration: {
2724
type: 'VariableDeclaration',
2825
kind: 'const',
2926
declarations: [
3027
{
3128
type: 'VariableDeclarator',
32-
id: exported,
33-
init: {
34-
type: 'ArrayExpression',
35-
elements: storyIdentifiers.map(({ exportName }) => ({
29+
id: specifier.local as ESTreeAST.Identifier,
30+
init: createASTArrayExpression(
31+
storyIdentifiers.map(({ exportName }) => ({
3632
type: 'Literal',
3733
value: exportName,
38-
})),
39-
},
34+
}))
35+
),
4036
},
4137
],
4238
},

‎src/compiler/post-transform/appendix/create-named-export-stories.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { STORYBOOK_INTERNAL_PREFIX } from '$lib/constants.js';
2+
import type { getStoriesIdentifiers } from '$lib/parser/analyse/story/attributes/identifiers.js';
3+
import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';
4+
5+
interface NamedExportStoriesParams {
6+
storiesIdentifiers: ReturnType<typeof getStoriesIdentifiers>;
7+
}
8+
9+
export function createNamedExportStories(
10+
params: NamedExportStoriesParams
11+
): ESTreeAST.ExportNamedDeclaration {
12+
return {
13+
type: 'ExportNamedDeclaration',
14+
specifiers: params.storiesIdentifiers.map(createExportSpecifier),
15+
declaration: null,
16+
};
17+
}
18+
19+
function createExportSpecifier(
20+
storyIdentifier: ReturnType<typeof getStoriesIdentifiers>[number]
21+
): ESTreeAST.ExportSpecifier {
22+
return {
23+
type: 'ExportSpecifier',
24+
local: createASTIdentifier(`${STORYBOOK_INTERNAL_PREFIX}${storyIdentifier.exportName}`),
25+
exported: createASTIdentifier(storyIdentifier.exportName),
26+
};
27+
}

‎src/compiler/post-transform/appendix/create-named-export-story.ts‎

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎src/compiler/post-transform/appendix/create-runtime-story-variable-declaration.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {
2+
STORYBOOK_INTERNAL_PREFIX,
3+
SVELTE_CSF_TAG_PREFIX,
4+
SVELTE_CSF_V5_TAG,
5+
} from '$lib/constants.js';
6+
import {
7+
createASTArrayExpression,
8+
createASTIdentifier,
9+
createASTObjectExpression,
10+
createASTProperty,
11+
type ESTreeAST,
12+
} from '$lib/parser/ast.js';
13+
14+
import type { createVariableFromRuntimeStoriesCall } from './create-variable-from-runtime-stories-call.js';
15+
16+
interface RuntimeStoryVariableDeclarationParams {
17+
exportName: string;
18+
filename?: string;
19+
nodes: {
20+
variable: ReturnType<typeof createVariableFromRuntimeStoriesCall>;
21+
tags?: ESTreeAST.ArrayExpression;
22+
};
23+
}
24+
25+
export function createRuntimeStoryVariableDeclaration(
26+
params: RuntimeStoryVariableDeclarationParams
27+
): ESTreeAST.VariableDeclaration {
28+
const tags = createASTArrayExpression(params.nodes.tags?.elements);
29+
30+
// In legacy stories, the pre-transform will add a SVELTE_CSF_V4_TAG tag.
31+
// if it is not present, we add the SVELTE_CSF_V5_TAG tag.
32+
const hasSvelteCsfTag = tags.elements.some(
33+
(element) =>
34+
element?.type === 'Literal' && element.value?.toString().startsWith(SVELTE_CSF_TAG_PREFIX)
35+
);
36+
37+
if (!hasSvelteCsfTag) {
38+
tags.elements.push({
39+
type: 'Literal',
40+
value: SVELTE_CSF_V5_TAG,
41+
});
42+
}
43+
44+
return {
45+
type: 'VariableDeclaration',
46+
kind: 'const',
47+
declarations: [
48+
{
49+
type: 'VariableDeclarator',
50+
id: createASTIdentifier(`${STORYBOOK_INTERNAL_PREFIX}${params.exportName}`),
51+
init: createASTObjectExpression([
52+
{
53+
type: 'SpreadElement',
54+
argument: {
55+
type: 'MemberExpression',
56+
computed: true,
57+
optional: false,
58+
object: params.nodes.variable.declarations[0].id as ESTreeAST.Identifier,
59+
property: { type: 'Literal', value: params.exportName },
60+
},
61+
},
62+
createASTProperty('tags', tags),
63+
]),
64+
},
65+
],
66+
};
67+
}

‎src/compiler/post-transform/appendix/create-variable-from-runtime-stories-call.ts‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { STORYBOOK_META_IDENTIFIER } from '$lib/constants.js';
1+
import { RUNTIME_STORIES_IDENTIFIER, STORYBOOK_META_IDENTIFIER } from '$lib/constants.js';
22
import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';
33

44
interface Params {
@@ -17,24 +17,15 @@ export function createVariableFromRuntimeStoriesCall(
1717
declarations: [
1818
{
1919
type: 'VariableDeclarator',
20-
id: {
21-
type: 'Identifier',
22-
name: '__stories',
23-
},
20+
id: createASTIdentifier(RUNTIME_STORIES_IDENTIFIER),
2421
init: {
2522
type: 'CallExpression',
2623
optional: false,
27-
callee: {
28-
type: 'Identifier',
29-
// WARN: Tempting to use `createRuntimeStories.name` here.
30-
// It will break, because this function imports `*.svelte` files.
31-
name: 'createRuntimeStories',
32-
},
24+
// WARN: Tempting to use `createRuntimeStories.name` here.
25+
// It will break, because this function imports `*.svelte` files.
26+
callee: createASTIdentifier('createRuntimeStories'),
3327
arguments: [
34-
{
35-
type: 'Identifier',
36-
name: storiesFunctionDeclaration.id.name,
37-
},
28+
createASTIdentifier(storiesFunctionDeclaration.id.name),
3829
createASTIdentifier(STORYBOOK_META_IDENTIFIER),
3930
],
4031
},

‎src/compiler/post-transform/create-appendix.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import { print } from 'esrap';
22
import MagicString from 'magic-string';
33

4-
import { createExportOrderVariable } from './appendix/create-export-order.js';
4+
import { createExportOrderVariableDeclaration } from './appendix/create-export-order.js';
55
import { createRuntimeStoriesImport } from './appendix/create-import.js';
66
import { createVariableFromRuntimeStoriesCall } from './appendix/create-variable-from-runtime-stories-call.js';
7-
import { createNamedExportStory } from './appendix/create-named-export-story.js';
7+
import { createNamedExportStories } from './appendix/create-named-export-stories.js';
88

99
import { STORYBOOK_META_IDENTIFIER } from '$lib/constants.js';
1010
import { createASTIdentifier, type ESTreeAST, type SvelteAST } from '$lib/parser/ast.js';
1111
import { getStoriesIdentifiers } from '$lib/parser/analyse/story/attributes/identifiers.js';
1212
import type { CompiledASTNodes } from '$lib/parser/extract/compiled/nodes.js';
1313
import type { SvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
14+
import { createRuntimeStoryVariableDeclaration } from './appendix/create-runtime-story-variable-declaration.js';
1415

1516
interface Params {
1617
code: MagicString;
@@ -26,16 +27,16 @@ export async function createAppendix(params: Params) {
2627
const { compiled, svelte } = nodes;
2728
const { storiesFunctionDeclaration } = compiled;
2829

29-
const storyIdentifiers = getStoriesIdentifiers({
30+
const storiesIdentifiers = getStoriesIdentifiers({
3031
nodes: svelte,
3132
filename,
3233
});
3334
const variableFromRuntimeStoriesCall = createVariableFromRuntimeStoriesCall({
3435
storiesFunctionDeclaration,
3536
filename,
3637
});
37-
const storiesExports = storyIdentifiers.map(({ exportName }, idx) =>
38-
createNamedExportStory({
38+
const storiesVariableDeclarations = storiesIdentifiers.map(({ exportName }, idx) =>
39+
createRuntimeStoryVariableDeclaration({
3940
exportName,
4041
filename,
4142
nodes: {
@@ -55,8 +56,9 @@ export async function createAppendix(params: Params) {
5556
createRuntimeStoriesImport(),
5657
variableFromRuntimeStoriesCall,
5758
createExportDefaultMeta(),
58-
createExportOrderVariable({ storyIdentifiers, filename }),
59-
...storiesExports,
59+
createExportOrderVariableDeclaration({ storiesIdentifiers, filename }),
60+
...storiesVariableDeclarations,
61+
createNamedExportStories({ storiesIdentifiers }),
6062
],
6163
});
6264

0 commit comments

Comments
 (0)