Merge pull request #21722 from storybookjs/tom/21649-change-excludeDe…

…corators-true
storybookjs · Mar 28, 2023 · d5c8238 · d5c8238
2 parents fe8e646 + dbbcafc
commit d5c8238
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -77,6 +77,7 @@
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
     - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
+    - [parameters.docs.source.excludeDecorators defaults to true](#parametersdocssourceexcludedecorators-defaults-to-true)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
     - [`Story` type deprecated](#story-type-deprecated)
@@ -1425,6 +1426,11 @@ If your story depends on a play function to render correctly, _and_ you are conf
 
 This was a legacy global variable from the early days of react docgen. If you were using this variable, you can instead use docgen information which is added directly to components using `.__docgenInfo`.
 
+#### parameters.docs.source.excludeDecorators defaults to true
+
+By default we don't render decorators in the Source/Canvas blocks. If you want to render decorators, you can set the parameter to `false`.
+
+
 ### 7.0 Deprecations and default changes
 
 #### storyStoreV7 enabled by default

diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts
@@ -4,5 +4,8 @@ export const parameters: any = {
       const { DocsRenderer } = (await import('./DocsRenderer')) as any;
       return new DocsRenderer();
     },
+    source: {
+      excludeDecorators: true,
+    },
   },
 };
diff --git a/code/renderers/html/src/docs/sourceDecorator.ts b/code/renderers/html/src/docs/sourceDecorator.ts
@@ -23,16 +23,17 @@ function skipSourceRender(context: StoryContext) {
 }
 
 export function sourceDecorator(storyFn: PartialStoryFn<HtmlRenderer>, context: StoryContext) {
-  const story = context?.parameters.docs?.source?.excludeDecorators
+  const story = storyFn();
+  const renderedForSource = context?.parameters.docs?.source?.excludeDecorators
     ? (context.originalStoryFn as StoryFn)(context.args, context)
-    : storyFn();
+    : story;
 
   let source: string | undefined;
   if (!skipSourceRender(context)) {
-    if (typeof story === 'string') {
-      source = story;
-    } else if (story instanceof Element) {
-      source = story.outerHTML;
+    if (typeof renderedForSource === 'string') {
+      source = renderedForSource;
+    } else if (renderedForSource instanceof Element) {
+      source = renderedForSource.outerHTML;
     }
   }
   useEffect(() => {

diff --git a/code/renderers/web-components/src/docs/sourceDecorator.ts b/code/renderers/web-components/src/docs/sourceDecorator.ts
@@ -27,9 +27,10 @@ export function sourceDecorator(
   storyFn: PartialStoryFn<WebComponentsRenderer>,
   context: StoryContext<WebComponentsRenderer>
 ): WebComponentsRenderer['storyResult'] {
-  const story = context?.parameters.docs?.source?.excludeDecorators
+  const story = storyFn();
+  const renderedForSource = context?.parameters.docs?.source?.excludeDecorators
     ? (context.originalStoryFn as ArgsStoryFn<WebComponentsRenderer>)(context.args, context)
-    : storyFn();
+    : story;
 
   let source: string;
 
@@ -39,7 +40,7 @@ export function sourceDecorator(
   });
   if (!skipSourceRender(context)) {
     const container = window.document.createElement('div');
-    render(story, container);
+    render(renderedForSource, container);
     source = container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, '');
   }