Merge pull request #25098 from storybookjs/valentin/fix-csf-loader-fo…

…r-angular-second-attempt

Angular: Fix CSF Plugin
(cherry picked from commit 96bcc58)

code/addons/storysource/package.json

@@ -47,6 +47,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
+    "@storybook/source-loader": "workspace:*",
     "estraverse": "^5.2.0",
     "tiny-invariant": "^1.3.1"
   },
@@ -56,7 +57,6 @@
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/router": "workspace:*",
-    "@storybook/source-loader": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@types/react": "^16.14.34",
     "@types/react-syntax-highlighter": "11.0.5",

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

@@ -12,15 +12,18 @@ 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, id) {
+      const sourceCode = await fs.readFile(id, 'utf-8');
       try {
-        const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
-        enrichCsf(csf, options);
+        const makeTitle = (userTitle: string) => userTitle || 'default';
+        const csf = loadCsf(code, { makeTitle }).parse();
+        const csfSource = loadCsf(sourceCode, {
+          makeTitle,
+        }).parse();
+        enrichCsf(csf, csfSource, options);
         return formatCsf(csf, { sourceMaps: true });
       } catch (err: any) {
         // This can be called on legacy storiesOf files, so just ignore