Merge pull request #22048 from storybookjs/valentin/fix-csf-plugin

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

@@ -3,6 +3,7 @@
 /* eslint-disable no-await-in-loop */
 import { test, expect } from '@playwright/test';
 import process from 'process';
+import dedent from 'ts-dedent';
 import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
@@ -36,6 +37,42 @@ 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('pre.prismjs');
+    const expectedSource = dedent`{
+      args: {
+        label: 'Another'
+      },
+      parameters: {
+        docs: {
+          source: {
+            type: 'code'
+          }
+        }
+      },
+      play: async () => {
+        await new Promise(resolve => resolve('Play function'));
+      }
+    }`;
+    await expect(sourceCode.textContent()).resolves.toContain(expectedSource);
+  });
+
   test('should render errors', async ({ page }) => {
     const sbPage = new SbPage(page);
     await sbPage.navigateToStory('addons/docs/docspage/error', 'docs');

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',
-    },
   };
 });
 

code/package.json

@@ -253,6 +253,7 @@
     "semver": "^7.3.7",
     "serve-static": "^1.14.1",
     "trash": "^7.0.0",
+    "ts-dedent": "^2.0.0",
     "ts-node": "^10.9.1",
     "typescript": "~4.9.3",
     "util": "^0.12.4",

code/yarn.lock

@@ -7061,6 +7061,7 @@ __metadata:
     semver: ^7.3.7
     serve-static: ^1.14.1
     trash: ^7.0.0
+    ts-dedent: ^2.0.0
     ts-node: ^10.9.1
     typescript: ~4.9.3
     util: ^0.12.4

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',