Docs: Show source of corresponding args in source block

code/addons/docs/docs/multiframework.md

@@ -129,7 +129,9 @@ export const jsxDecorator = (storyFn: any, context: StoryContext) => {
 
   const options = {}; // retrieve from story parameters
   const jsx = renderJsx(story, options);
-  channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
+
+  const { id, args } = context;
+  channel.emit(SNIPPET_RENDERED, { id, args, source: jsx });
 
   return story;
 };

code/e2e-tests/addon-docs.spec.ts

@@ -41,6 +41,42 @@ test.describe('addon-docs', () => {
     }
   });
 
+  test('source snippet should not change in stories block', async ({ page }) => {
+    // templateName is e.g. 'Vue-CLI (Default JS)'
+    test.skip(
+      // eslint-disable-next-line jest/valid-title
+      /^(vue3|vue-cli|preact)/i.test(`${templateName}`),
+      `Skipping ${templateName}, which does not support dynamic source snippets`
+    );
+
+    const sbPage = new SbPage(page);
+    await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
+    const root = sbPage.previewRoot();
+    const toggles = root.locator('.docblock-code-toggle');
+
+    // Open up the first and second code toggle (i.e the "Basic" story outside and inside the Stories block)
+    await (await toggles.nth(0)).click({ force: true });
+    await (await toggles.nth(1)).click({ force: true });
+
+    // Check they both say "Basic"
+    const codes = root.locator('pre.prismjs');
+    const primaryCode = await codes.nth(0);
+    const storiesCode = await codes.nth(1);
+    await expect(await primaryCode.innerText()).toMatch(/Basic/);
+    await expect(await storiesCode.innerText()).toMatch(/Basic/);
+
+    const labelControl = root.locator('textarea[name=label]');
+    labelControl.fill('Changed');
+    labelControl.blur();
+
+    await page.waitForTimeout(300);
+
+    // Check the Primary one has changed
+    await expect(await primaryCode.innerText()).toMatch(/Changed/);
+    // Check the stories one still says "Basic"
+    await expect(await storiesCode.innerText()).toMatch(/Basic/);
+  });
+
   test('should not run autoplay stories without parameter', async ({ page }) => {
     const sbPage = new SbPage(page);
     await sbPage.navigateToStory('addons/docs/docspage/autoplay', 'docs');

code/frameworks/angular/src/client/docs/sourceDecorator.ts

@@ -38,7 +38,8 @@ export const sourceDecorator = (
 
   useEffect(() => {
     if (toEmit) {
-      channel.emit(SNIPPET_RENDERED, context.id, toEmit, 'angular');
+      const { id, args } = context;
+      channel.emit(SNIPPET_RENDERED, { id, args, source: toEmit, format: 'angular' });
     }
   });
 

code/renderers/html/src/docs/sourceDecorator.test.ts

@@ -47,11 +47,11 @@ describe('sourceDecorator', () => {
     const context = makeContext('args', { __isArgsStory: true }, {});
     sourceDecorator(storyFn, context);
     await tick();
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'html-test--args',
-      '<div>args story</div>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'html-test--args',
+      args: {},
+      source: '<div>args story</div>',
+    });
   });
 
   it('should dedent source by default', async () => {
@@ -63,11 +63,11 @@ describe('sourceDecorator', () => {
     const context = makeContext('args', { __isArgsStory: true }, {});
     sourceDecorator(storyFn, context);
     await tick();
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'html-test--args',
-      ['<div>', '  args story', '</div>'].join('\n')
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'html-test--args',
+      args: {},
+      source: ['<div>', '  args story', '</div>'].join('\n'),
+    });
   });
 
   it('should skip dynamic rendering for no-args stories', async () => {
@@ -98,11 +98,11 @@ describe('sourceDecorator', () => {
     );
     sourceDecorator(decoratedStoryFn, context);
     await tick();
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'html-test--args',
-      '<div>args story</div>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'html-test--args',
+      args: {},
+      source: '<div>args story</div>',
+    });
   });
 
   it('allows the snippet output to be modified by transformSource', async () => {
@@ -112,11 +112,11 @@ describe('sourceDecorator', () => {
     const context = makeContext('args', { __isArgsStory: true, docs }, {});
     sourceDecorator(storyFn, context);
     await tick();
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'html-test--args',
-      '<p><div>args story</div></p>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'html-test--args',
+      args: {},
+      source: '<p><div>args story</div></p>',
+    });
   });
 
   it('provides the story context to transformSource', () => {

code/renderers/html/src/docs/sourceDecorator.ts

@@ -54,7 +54,8 @@ export function sourceDecorator(storyFn: PartialStoryFn<HtmlRenderer>, context:
     }
   }
   useEffect(() => {
-    if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
+    const { id, args } = context;
+    if (source) addons.getChannel().emit(SNIPPET_RENDERED, { id, args, source });
   });
 
   return story;

code/renderers/react/src/docs/jsxDecorator.test.tsx

@@ -203,11 +203,11 @@ describe('jsxDecorator', () => {
     const context = makeContext('args', { __isArgsStory: true }, {});
     jsxDecorator(storyFn, context);
     await new Promise((r) => setTimeout(r, 0));
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'jsx-test--args',
-      '<div>\n  args story\n</div>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'jsx-test--args',
+      args: {},
+      source: '<div>\n  args story\n</div>',
+    });
   });
 
   it('should not render decorators when provided excludeDecorators parameter', async () => {
@@ -231,11 +231,11 @@ describe('jsxDecorator', () => {
     jsxDecorator(decoratedStoryFn, context);
     await new Promise((r) => setTimeout(r, 0));
 
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'jsx-test--args',
-      '<div>\n  args story\n</div>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'jsx-test--args',
+      args: {},
+      source: '<div>\n  args story\n</div>',
+    });
   });
 
   it('should skip dynamic rendering for no-args stories', async () => {
@@ -255,11 +255,11 @@ describe('jsxDecorator', () => {
     jsxDecorator(storyFn, context);
     await new Promise((r) => setTimeout(r, 0));
 
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'jsx-test--args',
-      '<p><div>\n  args story\n</div></p>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'jsx-test--args',
+      args: {},
+      source: '<p><div>\n  args story\n</div></p>',
+    });
   });
 
   it('provides the story context to transformSource', () => {
@@ -286,11 +286,11 @@ describe('jsxDecorator', () => {
     jsxDecorator(() => mdxElement, makeContext('mdx-args', { __isArgsStory: true }, {}));
     await new Promise((r) => setTimeout(r, 0));
 
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'jsx-test--mdx-args',
-      '<div className="foo" />'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'jsx-test--mdx-args',
+      args: {},
+      source: '<div className="foo" />',
+    });
   });
 
   it('handles stories that trigger Suspense', async () => {
@@ -314,12 +314,15 @@ describe('jsxDecorator', () => {
     await new Promise((r) => setTimeout(r, 0));
 
     expect(mockChannel.emit).toHaveBeenCalledTimes(2);
-    expect(mockChannel.emit).nthCalledWith(1, SNIPPET_RENDERED, 'jsx-test--args', '');
-    expect(mockChannel.emit).nthCalledWith(
-      2,
-      SNIPPET_RENDERED,
-      'jsx-test--args',
-      '<div>\n  resolved args story\n</div>'
-    );
+    expect(mockChannel.emit).nthCalledWith(1, SNIPPET_RENDERED, {
+      id: 'jsx-test--args',
+      args: {},
+      source: '',
+    });
+    expect(mockChannel.emit).nthCalledWith(2, SNIPPET_RENDERED, {
+      id: 'jsx-test--args',
+      args: {},
+      source: '<div>\n  resolved args story\n</div>',
+    });
   });
 });

code/renderers/react/src/docs/jsxDecorator.tsx

@@ -190,7 +190,12 @@ export const jsxDecorator = (
 
   useEffect(() => {
     if (!skip) {
-      channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
+      const { id, args } = context;
+      channel.emit(SNIPPET_RENDERED, {
+        id,
+        source: jsx,
+        args,
+      });
     }
   });
 

code/renderers/svelte/src/docs/sourceDecorator.ts

@@ -157,7 +157,8 @@ export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) =
 
   useEffect(() => {
     if (!skip && source) {
-      channel.emit(SNIPPET_RENDERED, (context || {}).id, source);
+      const { id, args } = context;
+      channel.emit(SNIPPET_RENDERED, { id, args, source });
     }
   });
 

code/renderers/vue/src/docs/sourceDecorator.ts

@@ -54,7 +54,13 @@ export const sourceDecorator = (storyFn: any, context: StoryContext) => {
         // @ts-expect-error TS says it is called $vnode
         const code = vnodeToString(storyNode._vnode);
 
-        channel.emit(SNIPPET_RENDERED, (context || {}).id, `<template>${code}</template>`, 'vue');
+        const { id, args } = context;
+        channel.emit(SNIPPET_RENDERED, {
+          id,
+          args,
+          source: `<template>${code}</template>`,
+          format: 'vue',
+        });
       } catch (e) {
         logger.warn(`Failed to generate dynamic story source: ${e}`);
       }

code/renderers/vue3/src/docs/sourceDecorator.ts

@@ -289,7 +289,8 @@ export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) =
 
   useEffect(() => {
     if (!skip && source) {
-      channel.emit(SNIPPET_RENDERED, (context || {}).id, source, 'vue');
+      const { id, args } = context;
+      channel.emit(SNIPPET_RENDERED, { id, args, source, format: 'vue' });
     }
   });
 

code/renderers/web-components/src/docs/sourceDecorator.test.ts

@@ -43,11 +43,11 @@ describe('sourceDecorator', () => {
     const context = makeContext('args', { __isArgsStory: true }, {});
     sourceDecorator(storyFn, context);
     await tick();
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'lit-test--args',
-      '<div>args story</div>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'lit-test--args',
+      args: {},
+      source: '<div>args story</div>',
+    });
   });
 
   it('should skip dynamic rendering for no-args stories', async () => {
@@ -78,11 +78,11 @@ describe('sourceDecorator', () => {
     );
     sourceDecorator(decoratedStoryFn, context);
     await tick();
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'lit-test--args',
-      '<div>args story</div>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'lit-test--args',
+      args: {},
+      source: '<div>args story</div>',
+    });
   });
 
   it('allows the snippet output to be modified by transformSource', async () => {
@@ -92,11 +92,11 @@ describe('sourceDecorator', () => {
     const context = makeContext('args', { __isArgsStory: true, docs }, {});
     sourceDecorator(storyFn, context);
     await tick();
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'lit-test--args',
-      '<p><div>args story</div></p>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'lit-test--args',
+      args: {},
+      source: '<p><div>args story</div></p>',
+    });
   });
 
   it('provides the story context to transformSource', () => {
@@ -120,10 +120,10 @@ describe('sourceDecorator', () => {
     const boundStoryFn = storyFn.bind(null, context.args);
     sourceDecorator(boundStoryFn, context);
     await tick();
-    expect(mockChannel.emit).toHaveBeenCalledWith(
-      SNIPPET_RENDERED,
-      'lit-test--args',
-      '<div>some content</div>'
-    );
+    expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
+      id: 'lit-test--args',
+      args: { slot: 'some content' },
+      source: '<div>some content</div>',
+    });
   });
 });

code/renderers/web-components/src/docs/sourceDecorator.ts

@@ -43,7 +43,8 @@ export function sourceDecorator(
   let source: string;
 
   useEffect(() => {
-    if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
+    const { id, args } = context;
+    if (source) addons.getChannel().emit(SNIPPET_RENDERED, { id, source, args });
   });
   if (!skipSourceRender(context)) {
     const container = window.document.createElement('div');

code/ui/blocks/package.json

@@ -62,6 +62,7 @@
     "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
     "react-colorful": "^5.1.2",
+    "telejson": "^7.0.3",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
   },