Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(transform)!: meta no longer destructurable from defineMeta() call #244

Merged
merged 15 commits into from
Dec 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 2 additions & 12 deletions ERRORS.md
Original file line number Diff line number Diff line change
Expand Up @@ -218,30 +218,20 @@ You most likely forgot to destructure the return value.

### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0003`

The addon automatically adds a `meta` identifier to the return value of `defineMeta()` during compilation.
But for some reason, this couldn't be found in the compiled output.

If you see this error, please open a [bug report](https://github.com/storybookjs/addon-svelte-csf/issues/new).

While you create an issue, please provide original code of the stories file that caused this error.
It will help us investigate the occurred issue better.

### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0004`

When analysing the object passed to `defineMeta({ ... })`, invalid properties were found. The following properties must be **static string literals**, but got something else:

- `title`
- `name`

Dynamically generating these properties with functions or with template strings is not supported.

### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0005`
### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0004`

When analysing the object passed to `defineMeta({ ... })`, invalid properties were found. The `tags` property must be a **static array of static string literals**, but got something else

Dynamically generating the array or the entries with functions or with template strings is not supported.

### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0006`
### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0005`

When analysing the object passed to `defineMeta({ ... })`, invalid properties were found. The `tags` property must be a **static array of static string literals**, but got something else

Expand Down
34 changes: 0 additions & 34 deletions src/compiler/post-transform/appendix/create-export-default.test.ts

This file was deleted.

16 changes: 0 additions & 16 deletions src/compiler/post-transform/appendix/create-export-default.ts

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ describe(createNamedExportStory.name, () => {
createNamedExportStory({
exportName: 'Default',
node: createVariableFromRuntimeStoriesCall({
metaIdentifier: {
type: 'Identifier',
name: 'meta',
},
storiesFunctionDeclaration: {
type: 'FunctionDeclaration',
id: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@ describe(createVariableFromRuntimeStoriesCall.name, () => {
it('creates a variable correctly', ({ expect }) => {
const stringified = print(
createVariableFromRuntimeStoriesCall({
metaIdentifier: {
type: 'Identifier',
name: 'meta',
},
storiesFunctionDeclaration: {
type: 'FunctionDeclaration',
id: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import type { getMetaIdentifier } from '$lib/parser/analyse/define-meta/meta-identifier.js';
import type { ESTreeAST } from '$lib/parser/ast.js';
import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';

interface Params {
storiesFunctionDeclaration: ESTreeAST.FunctionDeclaration;
metaIdentifier: ReturnType<typeof getMetaIdentifier>;
filename?: string;
}

export function createVariableFromRuntimeStoriesCall(
params: Params
): ESTreeAST.VariableDeclaration {
const { storiesFunctionDeclaration, metaIdentifier } = params;
const { storiesFunctionDeclaration } = params;

return {
type: 'VariableDeclaration',
Expand All @@ -36,7 +34,7 @@ export function createVariableFromRuntimeStoriesCall(
type: 'Identifier',
name: storiesFunctionDeclaration.id.name,
},
metaIdentifier,
createASTIdentifier('meta'),
],
},
},
Expand Down
21 changes: 11 additions & 10 deletions src/compiler/post-transform/create-appendix.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import { print } from 'esrap';
import MagicString from 'magic-string';

import { createExportDefaultMeta } from './appendix/create-export-default.js';
import { createExportOrderVariable } from './appendix/create-export-order.js';
import { createRuntimeStoriesImport } from './appendix/create-import.js';
import { createVariableFromRuntimeStoriesCall } from './appendix/create-variable-from-runtime-stories-call.js';
import { createNamedExportStory } from './appendix/create-named-export-story.js';

import { getMetaIdentifier } from '$lib/parser/analyse/define-meta/meta-identifier.js';
import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';
import { getStoriesIdentifiers } from '$lib/parser/analyse/story/attributes/identifiers.js';
import type { CompiledASTNodes } from '$lib/parser/extract/compiled/nodes.js';
import type { SvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
import { getStoriesIdentifiers } from '$lib/parser/analyse/story/attributes/identifiers.js';

interface Params {
code: MagicString;
Expand All @@ -24,19 +23,14 @@ interface Params {
export async function createAppendix(params: Params) {
const { code, nodes, filename } = params;
const { compiled, svelte } = nodes;
const { defineMetaVariableDeclaration, storiesFunctionDeclaration } = compiled;
const { storiesFunctionDeclaration } = compiled;

const storyIdentifiers = getStoriesIdentifiers({
nodes: svelte,
filename,
});
const metaIdentifier = getMetaIdentifier({
node: defineMetaVariableDeclaration,
filename,
});
const variableFromRuntimeStoriesCall = createVariableFromRuntimeStoriesCall({
storiesFunctionDeclaration,
metaIdentifier,
filename,
});
const storiesExports = storyIdentifiers.map(({ exportName }) =>
Expand All @@ -53,11 +47,18 @@ export async function createAppendix(params: Params) {
body: [
createRuntimeStoriesImport(),
variableFromRuntimeStoriesCall,
createExportDefaultMeta({ metaIdentifier, filename }),
createExportDefaultMeta(),
createExportOrderVariable({ storyIdentifiers, filename }),
...storiesExports,
],
});

code.append('\n' + appendix.code);
}

function createExportDefaultMeta(): ESTreeAST.ExportDefaultDeclaration {
return {
type: 'ExportDefaultDeclaration',
declaration: createASTIdentifier('meta'),
};
}
61 changes: 0 additions & 61 deletions src/compiler/post-transform/define-meta/destructure-meta.ts

This file was deleted.

22 changes: 2 additions & 20 deletions src/compiler/post-transform/define-meta/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import MagicString from 'magic-string';
import { parseAst } from 'rollup/parseAst';
import { describe, it } from 'vitest';

import { transformDefineMeta } from '.';
import { transformDefineMeta } from './index';

import { getSvelteAST } from '$lib/parser/ast.js';
import { extractSvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
Expand Down Expand Up @@ -51,24 +51,6 @@ describe(transformDefineMeta.name, () => {
ast: parseAst(code.toString()),
});

expect(print(defineMetaVariableDeclaration).code).toMatchInlineSnapshot(`
"const { Story, meta } = defineMeta({
title: 'Example',
component: Example,
tags: ['autodocs'],
args: {
onclick: action('onclick'),
onmouseenter: action('onmouseenter'),
onmouseleave: action('onmouseleave')
},
parameters: {
docs: {
description: {
component: "Description set explicitly in the comment above \`defineMeta\`.\\n\\nMultiline supported. And also Markdown syntax:\\n\\n* **Bold**,\\n* _Italic_,\\n* \`Code\`."
}
}
}
});"
`);
expect(print(defineMetaVariableDeclaration).code).toMatchInlineSnapshot(`"const { Story } = defineMeta(meta);"`);
});
});
32 changes: 28 additions & 4 deletions src/compiler/post-transform/define-meta/index.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { print } from 'esrap';
import type MagicString from 'magic-string';

import { destructureMetaFromDefineMeta } from './destructure-meta.js';
import { replaceDefineMetaArgument } from './replace-argument';
import { insertDefineMetaJSDocCommentAsDescription } from './insert-description.js';

import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';
import type { CompiledASTNodes } from '$lib/parser/extract/compiled/nodes.js';
import type { SvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';

Expand All @@ -23,18 +24,41 @@ interface Params {
export function transformDefineMeta(params: Params): void {
const { code, nodes, filename } = params;

destructureMetaFromDefineMeta({
nodes: nodes.compiled,
insertDefineMetaJSDocCommentAsDescription({
nodes,
filename,
});
insertDefineMetaJSDocCommentAsDescription({
const metaObjectExpression = replaceDefineMetaArgument({
nodes,
filename,
});
const metaVariableDeclaration = createMetaVariableDeclaration({
init: metaObjectExpression,
});

const { compiled } = nodes;
const { defineMetaVariableDeclaration } = compiled;
const { start, end } = defineMetaVariableDeclaration;

code.update(start as number, end as number, print(defineMetaVariableDeclaration).code);
code.appendLeft(start as number, print(metaVariableDeclaration).code + '\n');
}

export function createMetaVariableDeclaration({
init,
}: {
init: ESTreeAST.ObjectExpression;
}): ESTreeAST.VariableDeclaration {
//
return {
type: 'VariableDeclaration',
kind: 'const',
declarations: [
{
type: 'VariableDeclarator',
id: createASTIdentifier('meta'),
init,
},
],
};
}
43 changes: 43 additions & 0 deletions src/compiler/post-transform/define-meta/replace-argument.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { createASTIdentifier, type ESTreeAST } from '../../../parser/ast';
import type { CompiledASTNodes } from '../../../parser/extract/compiled/nodes';
import type { SvelteASTNodes } from '../../../parser/extract/svelte/nodes';
import { getDefineMetaFirstArgumentObjectExpression } from '../../../parser/extract/svelte/define-meta';
import { NoDestructuredDefineMetaCallError } from '../../../utils/error/parser/analyse/define-meta';

interface Params {
nodes: {
compiled: CompiledASTNodes;
svelte: SvelteASTNodes;
};
filename?: string;
}

/**
* Replaces `defineMeta({ ... })` with `defineMeta(meta)`,
* and also it returns {@link ESTreeASTAST.ObjectExpression} which was replaced with {@link ESTreeAST.Identifier}
*/
export function replaceDefineMetaArgument(params: Params): ESTreeAST.ObjectExpression {
const defineMetaFirstArgumentObjectExpression = getDefineMetaFirstArgumentObjectExpression({
nodes: params.nodes.compiled,
filename: params.filename,
});

const declaration = params.nodes.compiled.defineMetaVariableDeclaration.declarations[0];

if (
!declaration ||
declaration.init?.type !== 'CallExpression' ||
declaration?.init?.callee.type !== 'Identifier' ||
declaration?.init?.callee.name !== params.nodes.compiled.defineMetaImport.local.name
) {
throw new NoDestructuredDefineMetaCallError({
defineMetaVariableDeclarator: declaration,
filename: params.filename,
});
}

declaration.init.arguments[0] = createASTIdentifier('meta');
params.nodes.compiled.defineMetaVariableDeclaration.declarations[0] = declaration;

return defineMetaFirstArgumentObjectExpression;
}
Loading
Loading