From 49f8c41f83371b6c125360124095c44e1834a517 Mon Sep 17 00:00:00 2001
From: Benny Powers <bennypowers@users.noreply.github.com>
Date: Wed, 23 Jun 2021 21:37:52 +0300
Subject: [PATCH 01/11] feat(web-components): dynamic source

Adds dynamic source to the web-components 'framework' package.
---
 .../src/frameworks/web-components/config.js   | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js
index b931d4e826d2..9443bb2c87e2 100644
--- a/addons/docs/src/frameworks/web-components/config.js
+++ b/addons/docs/src/frameworks/web-components/config.js
@@ -2,6 +2,7 @@
 import React from 'react';
 import { render } from 'lit-html';
 import { extractArgTypes, extractComponentDescription } from './custom-elements';
+import { SNIPPET_RENDERED, SourceType } from '../../shared';
 
 export const parameters = {
   docs: {
@@ -27,3 +28,33 @@ export const parameters = {
     },
   },
 };
+
+function skipSourceRender(context) {
+  const sourceParams = context?.parameters.docs?.source;
+  const isArgsStory = context?.parameters.__isArgsStory;
+
+  // always render if the user forces it
+  if (sourceParams?.type === SourceType.DYNAMIC) {
+    return false;
+  }
+
+  // never render if the user is forcing the block to render code, or
+  // if the user provides code, or if it's not an args story.
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.code;
+}
+
+function sourceDecorator(storyFn, context) {
+  var story = storyFn();
+
+  if (!skipSourceRender(context)) {
+    const container = document.createElement('div');
+    render(story, container);
+    const source = container.innerHTML.replace(/<!---->/g, '');
+    if (source)
+      addons.getChannel().emit(SNIPPET_RENDERED, context?.id, source);
+  }
+
+  return story;
+}
+
+export const decorators = [sourceDecorator];

From 64efb2676d5ef15b15f346803291730119563140 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 23 Jun 2021 22:43:17 +0300
Subject: [PATCH 02/11] test(web-components): dynamic stories

---
 .../src/frameworks/web-components/config.js   | 35 +--------
 .../web-components/sourceDecorator.test.ts    | 72 +++++++++++++++++++
 .../web-components/sourceDecorator.ts         | 31 ++++++++
 3 files changed, 106 insertions(+), 32 deletions(-)
 create mode 100644 addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
 create mode 100644 addons/docs/src/frameworks/web-components/sourceDecorator.ts

diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js
index 9443bb2c87e2..e40070ade605 100644
--- a/addons/docs/src/frameworks/web-components/config.js
+++ b/addons/docs/src/frameworks/web-components/config.js
@@ -1,8 +1,9 @@
-/* global window */
 import React from 'react';
 import { render } from 'lit-html';
 import { extractArgTypes, extractComponentDescription } from './custom-elements';
-import { SNIPPET_RENDERED, SourceType } from '../../shared';
+import { sourceDecorator } from './sourceDecorator';
+
+export const decorators = [sourceDecorator];
 
 export const parameters = {
   docs: {
@@ -28,33 +29,3 @@ export const parameters = {
     },
   },
 };
-
-function skipSourceRender(context) {
-  const sourceParams = context?.parameters.docs?.source;
-  const isArgsStory = context?.parameters.__isArgsStory;
-
-  // always render if the user forces it
-  if (sourceParams?.type === SourceType.DYNAMIC) {
-    return false;
-  }
-
-  // never render if the user is forcing the block to render code, or
-  // if the user provides code, or if it's not an args story.
-  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.code;
-}
-
-function sourceDecorator(storyFn, context) {
-  var story = storyFn();
-
-  if (!skipSourceRender(context)) {
-    const container = document.createElement('div');
-    render(story, container);
-    const source = container.innerHTML.replace(/<!---->/g, '');
-    if (source)
-      addons.getChannel().emit(SNIPPET_RENDERED, context?.id, source);
-  }
-
-  return story;
-}
-
-export const decorators = [sourceDecorator];
diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
new file mode 100644
index 000000000000..5beb2f7cfca1
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
@@ -0,0 +1,72 @@
+import { html } from 'lit-html';
+import { addons, StoryContext } from '@storybook/addons';
+import { sourceDecorator } from './sourceDecorator';
+import { SNIPPET_RENDERED } from '../../shared';
+
+jest.mock('@storybook/addons');
+const mockedAddons = addons as jest.Mocked<typeof addons>;
+
+expect.addSnapshotSerializer({
+  print: (val: any) => val,
+  test: (val) => typeof val === 'string',
+});
+
+// @ts-expect-error: :shrug:
+const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
+  id: `lit-test--${name}`,
+  kind: 'js-text',
+  name,
+  parameters,
+  args,
+  ...extra,
+});
+
+describe('sourceDecorator', () => {
+  let mockChannel: { on: jest.Mock; emit?: jest.Mock };
+  beforeEach(() => {
+    mockedAddons.getChannel.mockReset();
+
+    mockChannel = { on: jest.fn(), emit: jest.fn() };
+    mockedAddons.getChannel.mockReturnValue(mockChannel as any);
+  });
+
+  it('should render dynamically for args stories', () => {
+    const storyFn = (args: any) => html`<div>args story</div>`;
+    const context = makeContext('args', { __isArgsStory: true }, {});
+    sourceDecorator(storyFn, context);
+    expect(mockChannel.emit).toHaveBeenCalledWith(
+      SNIPPET_RENDERED,
+      'lit-test--args',
+      '<div>args story</div>'
+    );
+  });
+
+  it('should skip dynamic rendering for no-args stories', () => {
+    const storyFn = () => html`<div>classic story</div>`;
+    const context = makeContext('classic', {}, {});
+    sourceDecorator(storyFn, context);
+    expect(mockChannel.emit).not.toHaveBeenCalled();
+  });
+
+  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>`;
+    const jsx = { transformSource };
+    const context = makeContext('args', { __isArgsStory: true, jsx }, {});
+    sourceDecorator(storyFn, context);
+    expect(mockChannel.emit).toHaveBeenCalledWith(
+      SNIPPET_RENDERED,
+      'lit-test--args',
+      '<p><div>args story</div></p>'
+    );
+  });
+
+  it('provides the story context to transformSource', () => {
+    const storyFn = (args: any) => html`<div>args story</div>`;
+    const transformSource = jest.fn();
+    const jsx = { transformSource };
+    const context = makeContext('args', { __isArgsStory: true, jsx }, {});
+    sourceDecorator(storyFn, context);
+    expect(transformSource).toHaveBeenCalledWith('<div>args story</div>', context);
+  });
+});
diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
new file mode 100644
index 000000000000..7f1c933d85b2
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
@@ -0,0 +1,31 @@
+/* global window */
+import { render } from 'lit-html';
+import { addons, StoryContext, StoryFn } from '@storybook/addons';
+import { SNIPPET_RENDERED, SourceType } from '../../shared';
+
+function skipSourceRender(context: StoryContext) {
+  const sourceParams = context?.parameters.docs?.source;
+  const isArgsStory = context?.parameters.__isArgsStory;
+
+  // always render if the user forces it
+  if (sourceParams?.type === SourceType.DYNAMIC) {
+    return false;
+  }
+
+  // never render if the user is forcing the block to render code, or
+  // if the user provides code, or if it's not an args story.
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
+}
+
+export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
+  const story = storyFn();
+
+  if (!skipSourceRender(context)) {
+    const container = window.document.createElement('div');
+    render(story, container);
+    const source = container.innerHTML.replace(/<!---->/g, '');
+    if (source) addons.getChannel().emit(SNIPPET_RENDERED, context?.id, source);
+  }
+
+  return story;
+}

From fbacf4ec9ec91a5670bef40583f55cbe84552527 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 24 Jun 2021 09:32:20 +0300
Subject: [PATCH 03/11] style(web-components): refactor to TS

Split config functions into separate modules

Add type and language to docs.source
---
 .../src/frameworks/web-components/config.js   | 31 -------------------
 .../src/frameworks/web-components/config.ts   | 19 ++++++++++++
 .../web-components/prepareForInline.ts        | 18 +++++++++++
 3 files changed, 37 insertions(+), 31 deletions(-)
 delete mode 100644 addons/docs/src/frameworks/web-components/config.js
 create mode 100644 addons/docs/src/frameworks/web-components/config.ts
 create mode 100644 addons/docs/src/frameworks/web-components/prepareForInline.ts

diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js
deleted file mode 100644
index e40070ade605..000000000000
--- a/addons/docs/src/frameworks/web-components/config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { render } from 'lit-html';
-import { extractArgTypes, extractComponentDescription } from './custom-elements';
-import { sourceDecorator } from './sourceDecorator';
-
-export const decorators = [sourceDecorator];
-
-export const parameters = {
-  docs: {
-    extractArgTypes,
-    extractComponentDescription,
-    inlineStories: true,
-    prepareForInline: (storyFn) => {
-      class Story extends React.Component {
-        constructor(props) {
-          super(props);
-          this.wrapperRef = React.createRef();
-        }
-
-        componentDidMount() {
-          render(storyFn(), this.wrapperRef.current);
-        }
-
-        render() {
-          return React.createElement('div', { ref: this.wrapperRef });
-        }
-      }
-      return React.createElement(Story);
-    },
-  },
-};
diff --git a/addons/docs/src/frameworks/web-components/config.ts b/addons/docs/src/frameworks/web-components/config.ts
new file mode 100644
index 000000000000..30273896e170
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/config.ts
@@ -0,0 +1,19 @@
+import { extractArgTypes, extractComponentDescription } from './custom-elements';
+import { sourceDecorator } from './sourceDecorator';
+import { prepareForInline } from './prepareForInline';
+import { SourceType } from '../../shared';
+
+export const decorators = [sourceDecorator];
+
+export const parameters = {
+  docs: {
+    extractArgTypes,
+    extractComponentDescription,
+    inlineStories: true,
+    prepareForInline,
+    source: {
+      type: SourceType.DYNAMIC,
+      language: 'html',
+    },
+  },
+};
diff --git a/addons/docs/src/frameworks/web-components/prepareForInline.ts b/addons/docs/src/frameworks/web-components/prepareForInline.ts
new file mode 100644
index 000000000000..183819c5bd48
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/prepareForInline.ts
@@ -0,0 +1,18 @@
+import type { StoryFn } from '@storybook/addons';
+import React from 'react';
+import { render } from 'lit-html';
+
+export const prepareForInline = (storyFn: StoryFn) => {
+  class Story extends React.Component {
+    wrapperRef = React.createRef<HTMLElement>();
+
+    componentDidMount(): void {
+      render(storyFn(), this.wrapperRef.current);
+    }
+
+    render(): React.ReactElement {
+      return React.createElement('div', { ref: this.wrapperRef });
+    }
+  }
+  return React.createElement(Story);
+};

From e58406238f1cbd4a5fee82e2b572025c4cd5d9ed Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 24 Jun 2021 09:45:20 +0300
Subject: [PATCH 04/11] fix(web-components): types

---
 addons/docs/src/frameworks/web-components/prepareForInline.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/addons/docs/src/frameworks/web-components/prepareForInline.ts b/addons/docs/src/frameworks/web-components/prepareForInline.ts
index 183819c5bd48..715bdb8afef6 100644
--- a/addons/docs/src/frameworks/web-components/prepareForInline.ts
+++ b/addons/docs/src/frameworks/web-components/prepareForInline.ts
@@ -14,5 +14,6 @@ export const prepareForInline = (storyFn: StoryFn) => {
       return React.createElement('div', { ref: this.wrapperRef });
     }
   }
-  return React.createElement(Story);
+
+  return (React.createElement(Story) as unknown) as React.CElement<{}, React.Component>;
 };

From b66e3b28969604ee28da37ba46b315605b8c4b4a Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 24 Jun 2021 09:57:36 +0300
Subject: [PATCH 05/11] docs(web-components): add web-components to Dynamic
 Source support table

---
 docs/frameworks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/frameworks.js b/docs/frameworks.js
index 9f07c78632bb..1a12aeb18d17 100644
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@@ -111,7 +111,7 @@ module.exports = {
         },
         {
           name: 'Dynamic source',
-          supported: ['react', 'vue', 'angular', 'svelte'],
+          supported: ['react', 'vue', 'angular', 'svelte', 'web-components'],
           path: 'writing-docs/doc-blocks#source',
         },
         {

From d1039bc2e310bc97c0e5a8108227bd0ad80b6eac Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 24 Jun 2021 10:25:09 +0300
Subject: [PATCH 06/11] docs(web-components): kitchen sink dynamic source
 example

---
 .../addons/docs/dynamic-source.stories.mdx    | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx

diff --git a/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx b/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx
new file mode 100644
index 000000000000..a183a182fd8a
--- /dev/null
+++ b/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx
@@ -0,0 +1,42 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { html } from 'lit-html';
+
+<Meta
+  title="Addons / Docs / Dynamic Source"
+  component="sb-button"
+  argTypes={{
+    size: { type: 'select', options: ['large', 'small'] },
+    label: { type: 'string' },
+    primary: { type: 'boolean' },
+    backgroundColor: { type: 'color', presetColors: ['white', 'transparent', 'blue'] },
+  }}
+/>
+
+# Dynamic Source
+
+Stories can use Dynamic Source to display the result of changes to controls.
+
+<Canvas withSource="open">
+  <Story
+    name="Button"
+    component="sb-button"
+    args={{
+      size: 'large',
+      label: 'Button',
+      primary: false,
+      backgroundColor: undefined,
+    }}
+  >
+    {(args) => html`
+      <sb-button
+        ?primary="${args.primary}"
+        .size="${args.size}"
+        .label="${args.label}"
+        .backgroundColor="${args.backgroundColor}"
+      >
+      </sb-button>
+    `}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Button" />

From 65e7803c3dd0922f7304bc9eee5e2aafaf509a2c Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Tue, 6 Jul 2021 18:09:59 +0800
Subject: [PATCH 07/11] Fix jest with lit-html ESM

---
 .../web-components-kitchen-sink/yarn.lock     | 276 +++++++++---------
 jest.config.js                                |   1 +
 2 files changed, 139 insertions(+), 138 deletions(-)

diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock
index 9159d6c7b784..af5006d4572b 100644
--- a/examples/web-components-kitchen-sink/yarn.lock
+++ b/examples/web-components-kitchen-sink/yarn.lock
@@ -2084,14 +2084,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     axe-core: ^4.2.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -2115,12 +2115,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -2147,12 +2147,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -2174,12 +2174,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     ts-dedent: ^2.0.0
   peerDependencies:
@@ -2206,20 +2206,20 @@ __metadata:
     "@mdx-js/loader": ^1.6.22
     "@mdx-js/mdx": ^1.6.22
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/builder-webpack4": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/builder-webpack4": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/csf-tools": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
-    "@storybook/postinstall": 6.4.0-alpha.7
-    "@storybook/source-loader": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/csf-tools": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
+    "@storybook/postinstall": 6.4.0-alpha.11
+    "@storybook/source-loader": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     acorn: ^7.4.1
     acorn-jsx: ^5.3.1
     acorn-walk: ^7.2.0
@@ -2242,10 +2242,10 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    "@storybook/angular": 6.4.0-alpha.7
-    "@storybook/vue": 6.4.0-alpha.7
-    "@storybook/vue3": 6.4.0-alpha.7
-    "@storybook/web-components": 6.4.0-alpha.7
+    "@storybook/angular": 6.4.0-alpha.11
+    "@storybook/vue": 6.4.0-alpha.11
+    "@storybook/vue3": 6.4.0-alpha.11
+    "@storybook/web-components": 6.4.0-alpha.11
     lit: ^2.0.0-rc.1
     lit-html: ^1.4.1 || ^2.0.0-rc.3
     react: ^16.8.0 || ^17.0.0
@@ -2312,11 +2312,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/router": 6.4.0-alpha.11
     "@types/qs": ^6.9.5
     core-js: ^3.8.2
     global: ^4.4.0
@@ -2340,10 +2340,10 @@ __metadata:
   resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@jest/transform": ^26.6.2
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/core": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/core": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
     "@types/glob": ^7.1.3
     "@types/jest": ^26.0.16
     "@types/jest-specific-snapshot": ^0.5.3
@@ -2413,13 +2413,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/router": 6.4.0-alpha.7
-    "@storybook/source-loader": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/router": 6.4.0-alpha.11
+    "@storybook/source-loader": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     estraverse: ^5.2.0
     loader-utils: ^2.0.0
@@ -2442,12 +2442,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -2468,12 +2468,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/router": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/router": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     global: ^4.4.0
     regenerator-runtime: ^0.13.7
@@ -2488,13 +2488,13 @@ __metadata:
   resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@reach/router": ^1.3.4
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/router": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.11
     "@types/reach__router": ^1.3.7
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -2538,20 +2538,20 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/channel-postmessage": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
-    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/channel-postmessage": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
+    "@storybook/router": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.7
-    "@storybook/ui": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.11
+    "@storybook/ui": 6.4.0-alpha.11
     "@types/node": ^14.0.10
     "@types/webpack": ^4.41.26
     autoprefixer: ^9.8.6
@@ -2600,9 +2600,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
@@ -2624,11 +2624,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/channel-postmessage": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/channel-postmessage": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
@@ -2662,9 +2662,9 @@ __metadata:
   resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@popperjs/core": ^2.6.0
-    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.11
     "@types/color-convert": ^2.0.0
     "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
@@ -2695,13 +2695,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/channel-postmessage": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/channel-postmessage": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/ui": 6.4.0-alpha.7
+    "@storybook/ui": 6.4.0-alpha.11
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -2747,7 +2747,7 @@ __metadata:
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
     "@babel/register": ^7.12.1
-    "@storybook/node-logger": 6.4.0-alpha.7
+    "@storybook/node-logger": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
     "@types/glob-base": ^0.3.0
     "@types/micromatch": ^4.0.1
@@ -2795,12 +2795,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/builder-webpack4": 6.4.0-alpha.7
-    "@storybook/core-client": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
-    "@storybook/csf-tools": 6.4.0-alpha.7
-    "@storybook/manager-webpack4": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
+    "@storybook/builder-webpack4": 6.4.0-alpha.11
+    "@storybook/core-client": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
+    "@storybook/csf-tools": 6.4.0-alpha.11
+    "@storybook/manager-webpack4": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
     "@types/node": ^14.0.10
     "@types/node-fetch": ^2.5.7
@@ -2829,8 +2829,8 @@ __metadata:
     util-deprecate: ^1.0.2
     webpack: 4
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.0-alpha.7
-    "@storybook/manager-webpack5": 6.4.0-alpha.7
+    "@storybook/builder-webpack5": 6.4.0-alpha.11
+    "@storybook/manager-webpack5": 6.4.0-alpha.11
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -2847,10 +2847,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core@portal:../../lib/core::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/core-client": 6.4.0-alpha.7
-    "@storybook/core-server": 6.4.0-alpha.7
+    "@storybook/core-client": 6.4.0-alpha.11
+    "@storybook/core-server": 6.4.0-alpha.11
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.0-alpha.7
+    "@storybook/builder-webpack5": 6.4.0-alpha.11
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -2899,12 +2899,12 @@ __metadata:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/core-client": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
-    "@storybook/ui": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/core-client": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
+    "@storybook/ui": 6.4.0-alpha.11
     "@types/node": ^14.0.10
     "@types/webpack": ^4.41.26
     babel-loader: ^8.2.2
@@ -2967,7 +2967,7 @@ __metadata:
   resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@reach/router": ^1.3.4
-    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.11
     "@types/reach__router": ^1.3.7
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -2998,8 +2998,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
     core-js: ^3.8.2
     estraverse: ^5.2.0
@@ -3021,7 +3021,7 @@ __metadata:
     "@emotion/core": ^10.1.1
     "@emotion/is-prop-valid": ^0.8.6
     "@emotion/styled": ^10.0.27
-    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.11
     core-js: ^3.8.2
     deep-object-diff: ^1.1.0
     emotion-theming: ^10.0.27
@@ -3041,15 +3041,15 @@ __metadata:
   resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@emotion/core": ^10.1.1
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/router": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.11
     "@types/markdown-to-jsx": ^6.11.3
     copy-to-clipboard: ^3.3.1
     core-js: ^3.8.2
@@ -3082,10 +3082,10 @@ __metadata:
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-syntax-import-meta": ^7.10.4
     "@babel/preset-env": ^7.12.11
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/core": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/core": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
     "@types/webpack-env": ^1.16.0
     babel-plugin-bundled-import-meta: ^0.3.1
     core-js: ^3.8.2
diff --git a/jest.config.js b/jest.config.js
index 5f94e6a820ea..46dff93a777e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -47,6 +47,7 @@ module.exports = {
     '^.+\\.[jt]sx?$': '<rootDir>/scripts/utils/jest-transform-js.js',
     '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
   },
+  transformIgnorePatterns: ['/node_modules/(?!lit-html).+\\.js'],
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: [
     '/node_modules/',

From e395fff381027b2f3f74fc6ed25bb637dee27800 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Tue, 6 Jul 2021 15:14:31 +0300
Subject: [PATCH 08/11] fix(addons): webcomponents transformSource

---
 .../web-components/sourceDecorator.test.ts          | 13 +++++++------
 .../frameworks/web-components/sourceDecorator.ts    |  8 +++++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
index 5beb2f7cfca1..41f34a9dd6a7 100644
--- a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
+++ b/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
@@ -11,13 +11,14 @@ expect.addSnapshotSerializer({
   test: (val) => typeof val === 'string',
 });
 
-// @ts-expect-error: :shrug:
 const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
   id: `lit-test--${name}`,
   kind: 'js-text',
   name,
   parameters,
   args,
+  argTypes: {},
+  globals: {},
   ...extra,
 });
 
@@ -51,8 +52,8 @@ describe('sourceDecorator', () => {
   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>`;
-    const jsx = { transformSource };
-    const context = makeContext('args', { __isArgsStory: true, jsx }, {});
+    const docs = { transformSource };
+    const context = makeContext('args', { __isArgsStory: true, docs }, {});
     sourceDecorator(storyFn, context);
     expect(mockChannel.emit).toHaveBeenCalledWith(
       SNIPPET_RENDERED,
@@ -63,9 +64,9 @@ describe('sourceDecorator', () => {
 
   it('provides the story context to transformSource', () => {
     const storyFn = (args: any) => html`<div>args story</div>`;
-    const transformSource = jest.fn();
-    const jsx = { transformSource };
-    const context = makeContext('args', { __isArgsStory: true, jsx }, {});
+    const transformSource = jest.fn((x) => x);
+    const docs = { transformSource };
+    const context = makeContext('args', { __isArgsStory: true, docs }, {});
     sourceDecorator(storyFn, context);
     expect(transformSource).toHaveBeenCalledWith('<div>args story</div>', context);
   });
diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
index 7f1c933d85b2..f21d10e76141 100644
--- a/addons/docs/src/frameworks/web-components/sourceDecorator.ts
+++ b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
@@ -17,13 +17,19 @@ function skipSourceRender(context: StoryContext) {
   return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 }
 
+function applyTransformSource(source: string, context: StoryContext): string {
+  const { transformSource } = context.parameters.docs ?? {};
+  if (typeof transformSource !== 'function') return source;
+  return transformSource(source, context);
+}
+
 export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
   const story = storyFn();
 
   if (!skipSourceRender(context)) {
     const container = window.document.createElement('div');
     render(story, container);
-    const source = container.innerHTML.replace(/<!---->/g, '');
+    const source = applyTransformSource(container.innerHTML.replace(/<!---->/g, ''), context);
     if (source) addons.getChannel().emit(SNIPPET_RENDERED, context?.id, source);
   }
 

From e2d34eac363e13d981f52690e0b1e750d674fa64 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Tue, 6 Jul 2021 15:24:30 +0300
Subject: [PATCH 09/11] style(addons): remove null check

---
 addons/docs/src/frameworks/web-components/sourceDecorator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
index f21d10e76141..0b12575db976 100644
--- a/addons/docs/src/frameworks/web-components/sourceDecorator.ts
+++ b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
@@ -30,7 +30,7 @@ export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
     const container = window.document.createElement('div');
     render(story, container);
     const source = applyTransformSource(container.innerHTML.replace(/<!---->/g, ''), context);
-    if (source) addons.getChannel().emit(SNIPPET_RENDERED, context?.id, source);
+    if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
   }
 
   return story;

From 2c47a6e29aebdaf229c00577db6625b12c0b60a5 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 8 Jul 2021 19:34:58 +0300
Subject: [PATCH 10/11] docs(web-components): set attributes in example story

---
 .../src/components/sb-button.stories.ts                    | 7 ++++---
 .../src/components/sb-button.ts                            | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
index 487ab8f23c74..7b8797a0d714 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { SbButton } from './sb-button';
 
@@ -20,9 +21,9 @@ export default {
 const Template: Story<SbButton> = ({ primary, backgroundColor, size, label }) =>
   html`<sb-button
     ?primary="${primary}"
-    .size="${size}"
-    .label="${label}"
-    .backgroundColor="${backgroundColor}"
+    size="${ifDefined(size)}"
+    label="${ifDefined(label)}"
+    background-color="${ifDefined(backgroundColor)}"
   ></sb-button>`;
 
 export const Primary: Story<SbButton> = Template.bind({});
diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.ts b/examples/web-components-kitchen-sink/src/components/sb-button.ts
index 1a81bf443132..0c4dd313d22e 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.ts
@@ -61,7 +61,7 @@ export class SbButton extends LitElement {
       label: { type: String, reflect: true },
       primary: { type: Boolean },
       size: { type: String },
-      backgroundColor: { type: String },
+      backgroundColor: { type: String, attribute: 'background-color' },
     };
   }
 

From 9a5dccde24cfb9323b2e107d9abdef8168449e55 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sat, 10 Jul 2021 21:31:23 +0300
Subject: [PATCH 11/11] fix(addons): webcomponents excludeDecorators

---
 .../web-components/sourceDecorator.test.ts    | 27 +++++++++++++++++++
 .../web-components/sourceDecorator.ts         |  4 ++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
index 41f34a9dd6a7..4c2c49851045 100644
--- a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
+++ b/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>`;
diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
index 0b12575db976..d1ab37f8ec2e 100644
--- a/addons/docs/src/frameworks/web-components/sourceDecorator.ts
+++ b/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');