fix(addons): webcomponents excludeDecorators

addons/docs/src/frameworks/web-components/sourceDecorator.test.ts

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { styleMap } from 'lit-html/directives/style-map';
 import { addons, StoryContext } from '@storybook/addons';
 import { sourceDecorator } from './sourceDecorator';
 import { SNIPPET_RENDERED } from '../../shared';
@@ -49,6 +50,32 @@ describe('sourceDecorator', () => {
     expect(mockChannel.emit).not.toHaveBeenCalled();
   });
 
+  it('should use the originalStoryFn if excludeDecorators is set', () => {
+    const storyFn = (args: any) => html`<div>args story</div>`;
+    const decoratedStoryFn = (args: any) => html`
+      <div style=${styleMap({ padding: `${25}px`, border: '3px solid red' })}>${storyFn(args)}</div>
+    `;
+    const context = makeContext(
+      'args',
+      {
+        __isArgsStory: true,
+        docs: {
+          source: {
+            excludeDecorators: true,
+          },
+        },
+      },
+      {},
+      { originalStoryFn: storyFn }
+    );
+    sourceDecorator(decoratedStoryFn, context);
+    expect(mockChannel.emit).toHaveBeenCalledWith(
+      SNIPPET_RENDERED,
+      'lit-test--args',
+      '<div>args story</div>'
+    );
+  });
+
   it('allows the snippet output to be modified by transformSource', () => {
     const storyFn = (args: any) => html`<div>args story</div>`;
     const transformSource = (dom: string) => `<p>${dom}</p>`;

addons/docs/src/frameworks/web-components/sourceDecorator.ts

@@ -24,7 +24,9 @@ function applyTransformSource(source: string, context: StoryContext): string {
 }
 
 export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
-  const story = storyFn();
+  const story = context?.parameters.docs?.source?.excludeDecorators
+    ? context.originalStoryFn(context.args)
+    : storyFn();
 
   if (!skipSourceRender(context)) {
     const container = window.document.createElement('div');