Storybook: Make description-loader more reliable (#40616)

* Storybook: Fix deprecated description path * Don't overwrite existing parameter config * Edit for readability * Prioritize explicit story description
WordPress · Apr 28, 2022 · 198b34f · 198b34f
1 parent b99e668
commit 198b34f
Showing 1 changed file with 39 additions and 64 deletions.
diff --git a/storybook/webpack/description-loader.js b/storybook/webpack/description-loader.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+const babel = require( '@babel/core' );
+
 /**
  * Allows a story description to be written as a doc comment above the exported story.
  *
@@ -9,76 +14,46 @@
  * export const MyStory = Template.bind({});
  * ```
  */
-
-/**
- * External dependencies
- */
-const babel = require( '@babel/core' );
-
-function createDescriptionNode( name, description ) {
-	return babel.types.expressionStatement(
-		babel.types.assignmentExpression(
-			'=',
-			babel.types.memberExpression(
-				babel.types.identifier( name ),
-				babel.types.identifier( 'story' )
-			),
-			babel.types.objectExpression( [
-				babel.types.objectProperty(
-					babel.types.identifier( 'parameters' ),
-					babel.types.objectExpression( [
-						babel.types.objectProperty(
-							babel.types.identifier( 'docs' ),
-							babel.types.objectExpression( [
-								babel.types.objectProperty(
-									babel.types.identifier(
-										'storyDescription'
-									),
-									babel.types.stringLiteral( description )
-								),
-							] )
-						),
-					] )
-				),
-			] )
-		)
-	);
-}
-
 function annotateDescriptionPlugin() {
 	return {
 		visitor: {
 			ExportNamedDeclaration( path ) {
-				if ( path.node.leadingComments ) {
-					const commentValues = path.node.leadingComments.map(
-						( node ) => {
-							if ( node.type === 'CommentLine' ) {
-								return node.value.trimLeft();
-							}
-							// else, node.type === 'CommentBlock'
-							return node.value
-								.split( '\n' )
-								.map( ( line ) => {
-									// stripping out the whitespace and * from comment blocks
-									return line.replace(
-										/^(\s+)?(\*+)?(\s+)?/,
-										''
-									);
-								} )
-								.join( '\n' )
-								.trim();
+				if ( ! path.node.leadingComments ) {
+					return;
+				}
+
+				const commentValues = path.node.leadingComments.map(
+					( node ) => {
+						if ( node.type === 'CommentLine' ) {
+							return node.value.trimLeft();
 						}
-					);
-					const description = commentValues.join( '\n' );
-					const declaration = path.node.declaration.declarations[ 0 ];
+						// else, node.type === 'CommentBlock'
+						return node.value
+							.split( '\n' )
+							.map( ( line ) => {
+								// stripping out the whitespace and * from comment blocks
+								return line.replace(
+									/^(\s+)?(\*+)?(\s+)?/,
+									''
+								);
+							} )
+							.join( '\n' )
+							.trim();
+					}
+				);
+				const description = commentValues.join( '\n' );
+				const storyId = path.node.declaration.declarations[ 0 ].id.name;
 
-					path.insertAfter(
-						createDescriptionNode(
-							declaration.id.name,
-							description
-						)
-					);
-				}
+				path.container.push(
+					...babel.template.ast`
+							${ storyId }.parameters ??= {};
+							${ storyId }.parameters.docs ??= {};
+							${ storyId }.parameters.docs.description ??= {};
+							${ storyId }.parameters.docs.description.story ??= ${ JSON.stringify(
+						description
+					) };
+					`
+				);
 			},
 		},
 	};