Use the unmapped args in the source container

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

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

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

@@ -15,6 +15,7 @@ expect.addSnapshotSerializer({
 const tick = () => new Promise((r) => setTimeout(r, 0));
 
 const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext =>
+  // @ts-expect-error haven't added unmapped args to StoryContext yet
   ({
     id: `html-test--${name}`,
     kind: 'js-text',
@@ -23,6 +24,7 @@ const makeContext = (name: string, parameters: any, args: any, extra?: object):
     componentId: '',
     title: '',
     story: '',
+    unmappedArgs: args,
     args,
     argTypes: {},
     globals: {},

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

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

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

@@ -183,6 +183,7 @@ const makeContext = (name: string, parameters: any, args: any, extra?: object):
   kind: 'js-text',
   name,
   parameters,
+  unmappedArgs: args,
   args,
   ...extra,
 });

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

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

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

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

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

@@ -54,10 +54,10 @@ export const sourceDecorator = (storyFn: any, context: StoryContext) => {
         // @ts-expect-error TS says it is called $vnode
         const code = vnodeToString(storyNode._vnode);
 
-        const { id, args } = context;
+        const { id, unmappedArgs } = context;
         channel.emit(SNIPPET_RENDERED, {
           id,
-          args,
+          args: unmappedArgs,
           source: `<template>${code}</template>`,
           format: 'vue',
         });

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

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

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

@@ -22,6 +22,7 @@ const makeContext = (name: string, parameters: any, args: any, extra?: Partial<S
     kind: 'js-text',
     name,
     parameters,
+    unmappedArgs: args,
     args,
     argTypes: {},
     globals: {},

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

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

code/ui/blocks/src/blocks/Source.tsx

@@ -19,7 +19,6 @@ import type { SourceContextProps, SourceItem } from './SourceContainer';
 import { UNKNOWN_ARGS_HASH, argsHash, SourceContext } from './SourceContainer';
 
 import { useStories } from './useStory';
-import { useArgsList } from './useArgs';
 
 export enum SourceState {
   OPEN = 'open',
@@ -186,8 +185,6 @@ export const useSourceProps = (
       // You are allowed to use <Source code="..." /> and <Canvas /> unattached.
     }
   }
-  const argsFromStories = useArgsList(stories, docsContext);
-
   if (!storiesFromIds.every(Boolean)) {
     return { error: SourceError.SOURCE_UNAVAILABLE, state: SourceState.NONE };
   }
@@ -204,12 +201,12 @@ export const useSourceProps = (
         // In theory you can use a storyId from a different CSF file that hasn't loaded yet.
         if (!story) return '';
 
-        // NOTE: args *does* have to be defined here due to the null check on story above
-        const [args] = argsFromStories[index] || [];
         const storyContext = docsContext.getStoryContext(story);
 
         // eslint-disable-next-line no-underscore-dangle
-        const argsForSource = props.__forceInitialArgs ? storyContext.initialArgs : args;
+        const argsForSource = props.__forceInitialArgs
+          ? storyContext.initialArgs
+          : storyContext.unmappedArgs;
 
         const source = getStorySource(story.id, argsForSource, sourceContext);
         if (index === 0) {

code/ui/blocks/src/blocks/useArgs.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import type { Args, DocsContextProps, PreparedStory, Renderer } from '@storybook/types';
+import type { Args, DocsContextProps, PreparedStory } from '@storybook/types';
 import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events';
 
 export const useArgs = (
@@ -38,10 +38,3 @@ export const useArgsIfDefined = (
   );
   return story && [args, updateArgs, resetArgs];
 };
-
-export function useArgsList<TRenderer extends Renderer = Renderer>(
-  stories: (PreparedStory<TRenderer> | void)[],
-  context: DocsContextProps<TRenderer>
-) {
-  return stories.map((story) => useArgsIfDefined(story, context));
-}