Fix csf-plugin loader

The CSF-Plugin loader was not applying the necessary transformations in Angular projects.

Co-authored-by: Norbert de Langen <ndelangen@me.com>

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

@@ -14,6 +14,28 @@ test.describe('addon-docs', () => {
     await new SbPage(page).waitUntilLoaded();
   });
 
+  test('should show descriptions 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();
+
+    const basicStories = root.locator('#anchor--addons-docs-docspage-basic--basic');
+    const secondBasicStory = (await basicStories.all())[1];
+    await expect(secondBasicStory).toContainText('A basic button');
+
+    const anotherStory = root.locator('#anchor--addons-docs-docspage-basic--another');
+    await expect(anotherStory).toContainText('Another button, just to show multiple stories');
+  });
+
   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,5 +1,4 @@
 import { createUnplugin } from 'unplugin';
-import fs from 'fs/promises';
 import { loadCsf, enrichCsf, formatCsf } from '@storybook/csf-tools';
 import type { EnrichCsfOptions } from '@storybook/csf-tools';
 
@@ -12,12 +11,10 @@ const logger = console;
 export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
   return {
     name: 'unplugin-csf',
-    enforce: 'pre',
-    loadInclude(id) {
+    transformInclude(id) {
       return STORIES_REGEX.test(id);
     },
-    async load(fname) {
-      const code = await fs.readFile(fname, 'utf-8');
+    async transform(code) {
       try {
         const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
         enrichCsf(csf, options);
@@ -31,6 +28,9 @@ export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
         return code;
       }
     },
+    vite: {
+      enforce: 'pre',
+    },
   };
 });
 

scripts/tasks/sandbox-parts.ts

@@ -168,6 +168,11 @@ 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',