Docs: Fix source snippets when parameters.docs.source.type = 'code'

code/addons/docs/template/stories/docspage/basic.stories.ts

@@ -27,4 +27,14 @@ export const Disabled = {
  */
 export const Another = {
   args: { label: 'Another' },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  play: async () => {
+    await new Promise((resolve) => resolve('Play function'));
+  },
 };

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

@@ -36,6 +36,27 @@ test.describe('addon-docs', () => {
     await expect(anotherStory).toContainText('Another button, just to show multiple stories');
   });
 
+  test('should show source=code view for stories', async ({ page }) => {
+    const skipped = [
+      // SSv6 does not render stories in the correct order in our sandboxes
+      'internal\\/ssv6',
+    ];
+    test.skip(
+      new RegExp(`^${skipped.join('|')}`, 'i').test(`${templateName}`),
+      `Skipping ${templateName}, because of wrong ordering of stories on docs page`
+    );
+
+    const sbPage = new SbPage(page);
+    await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
+    const root = sbPage.previewRoot();
+
+    // Click on the third button which has the text "Show code"
+    const showCodeButton = (await root.locator('button', { hasText: 'Show Code' }).all())[2];
+    await showCodeButton.click();
+    const sourceCode = root.locator('.language-html');
+    await expect(sourceCode.textContent()).resolves.toMatchSnapshot();
+  });
+
   test('should render errors', async ({ page }) => {
     const sbPage = new SbPage(page);
     await sbPage.navigateToStory('addons/docs/docspage/error', 'docs');

code/e2e-tests/addon-docs.spec.ts-snapshots/addon-docs-should-show-source-code-view-for-stories-1-chromium-darwin.txt

@@ -0,0 +1,15 @@
+{
+  args: {
+    label: 'Another'
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  play: async () => {
+    await new Promise(resolve => resolve('Play function'));
+  }
+}

code/lib/csf-plugin/src/index.ts

@@ -1,4 +1,5 @@
 import { createUnplugin } from 'unplugin';
+import fs from 'fs/promises';
 import { loadCsf, enrichCsf, formatCsf } from '@storybook/csf-tools';
 import type { EnrichCsfOptions } from '@storybook/csf-tools';
 
@@ -11,10 +12,12 @@ const logger = console;
 export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
   return {
     name: 'unplugin-csf',
-    transformInclude(id) {
+    enforce: 'pre',
+    loadInclude(id) {
       return STORIES_REGEX.test(id);
     },
-    async transform(code) {
+    async load(fname) {
+      const code = await fs.readFile(fname, 'utf-8');
       try {
         const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
         enrichCsf(csf, options);
@@ -28,9 +31,6 @@ export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
         return code;
       }
     },
-    vite: {
-      enforce: 'pre',
-    },
   };
 });
 

scripts/tasks/sandbox-parts.ts

@@ -167,11 +167,6 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
         {
           test: [/\\/template-stories\\//],
           exclude: [/\\.mdx$/],
-          /**
-           * We need to run esbuild-loader after the csf-plugin loader, so we use the "enforce: 'post'" option.
-           * Otherwise, the csf-plugin loader does not have any effect.
-           */
-          enforce: 'post',
           loader: '${esbuildLoaderPath}',
           options: {
             loader: 'tsx',