Core: Update index generation to use tags to detect MDX stories

code/addons/docs/jest-transform-mdx.js

@@ -2,11 +2,11 @@ const path = require('path');
 const { ScriptTransformer } = require('@jest/transform');
 const { dedent } = require('ts-dedent');
 
-const { compileAsync } = require('@storybook/mdx2-csf');
+const { compile } = require('@storybook/mdx2-csf');
 
 module.exports = {
   async processAsync(src, filename, config, { instrument }) {
-    const code = await compileAsync(src, { skipCsf: false });
+    const code = await compile(src, { skipCsf: false });
     const result = dedent`
       /* @jsx mdx */
       import React from 'react'

code/addons/docs/src/preset.ts

@@ -160,10 +160,9 @@ export async function webpack(
   return result;
 }
 
-export const storyIndexers = async (indexers: CoreCommon_StoryIndexer[] | null) => {
+export const storyIndexers = (indexers: CoreCommon_StoryIndexer[] | null) => {
   const mdxIndexer = async (fileName: string, opts: CoreCommon_IndexerOptions) => {
     let code = (await fs.readFile(fileName, 'utf-8')).toString();
-    // @ts-expect-error (Converted from ts-ignore)
     const { compile } = await import('@storybook/mdx2-csf');
     code = await compile(code, {});
     return loadCsf(code, { ...opts, fileName }).parse();
@@ -172,7 +171,6 @@ export const storyIndexers = async (indexers: CoreCommon_StoryIndexer[] | null)
     {
       test: /(stories|story)\.mdx$/,
       indexer: mdxIndexer,
-      addDocsTemplate: true,
     },
     ...(indexers || []),
   ];

code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import globalThis from 'global';
 import * as Csf from './csf-in-mdx.stories.js';
 

code/lib/builder-vite/src/plugins/mdx-plugin.ts

@@ -44,7 +44,6 @@ export function mdxPlugin(): Plugin {
     async transform(src, id, options) {
       if (!filter(id)) return undefined;
 
-      // @ts-expect-error typescript doesn't think compile exists, but it does.
       const { compile } = await import('@storybook/mdx2-csf');
 
       const mdxCode = String(await compile(src, { skipCsf: !isStorybookMdx(id) }));

code/lib/client-api/src/StoryStoreFacade.ts

@@ -195,8 +195,7 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
       docsOptions.docsPage === 'automatic' ||
       (docsOptions.docsPage && componentTags.includes('docsPage'));
     if (docsOptions.enabled && storyExports.length) {
-      // We will use tags soon and this crappy filename test will go away
-      if (fileName.match(/\.mdx$/) || docsPageOptedIn) {
+      if (componentTags.includes('mdx') || docsPageOptedIn) {
         const name = docsOptions.defaultName;
         const docsId = toId(componentId || title, name);
         this.entries[docsId] = {

code/lib/core-client/src/start.test.ts

@@ -961,7 +961,7 @@ describe('start', () => {
           'test',
           makeRequireContext({
             './Introduction.stories.mdx': {
-              default: { title: 'Introduction' },
+              default: { title: 'Introduction', tags: ['mdx'] },
               _Page: { name: 'Page', parameters: { docsOnly: true } },
             },
           })
@@ -979,6 +979,7 @@ describe('start', () => {
                 "standalone": false,
                 "storiesImports": Array [],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "Introduction",

code/lib/core-server/src/utils/StoryIndexGenerator.test.ts

@@ -33,7 +33,8 @@ jest.mock('@storybook/docs-mdx', async () => ({
     const name = content.match(/name=['"](.*)['"]/)?.[1];
     const ofMatch = content.match(/of=\{(.*)\}/)?.[1];
     const isTemplate = content.match(/isTemplate/);
-    return { title, name, imports, of: ofMatch && imports.length && imports[0], isTemplate };
+    const tags = ['mdx'];
+    return { title, name, tags, imports, of: ofMatch && imports.length && imports[0], isTemplate };
   },
 }));
 
@@ -50,12 +51,20 @@ const csfIndexer = async (fileName: string, opts: any) => {
   return loadCsf(code, { ...opts, fileName }).parse();
 };
 
+const storiesMdxIndexer = async (fileName: string, opts: any) => {
+  let code = (await fs.readFile(fileName, 'utf-8')).toString();
+  const { compile } = await import('@storybook/mdx2-csf');
+  code = await compile(code, {});
+  return loadCsf(code, { ...opts, fileName }).parse();
+};
+
 const options = {
   configDir: path.join(__dirname, '__mockdata__'),
   workingDir: path.join(__dirname, '__mockdata__'),
   storyIndexers: [
-    { test: /\.stories\..*$/, indexer: csfIndexer as any as CoreCommon_StoryIndexer['indexer'] },
-  ],
+    { test: /\.stories\.mdx$/, indexer: storiesMdxIndexer },
+    { test: /\.stories\.(js|ts)x?$/, indexer: csfIndexer },
+  ] as CoreCommon_StoryIndexer[],
   storiesV2Compatibility: false,
   storyStoreV7: true,
   docs: { enabled: true, defaultName: 'docs', docsPage: false },
@@ -232,47 +241,43 @@ describe('StoryIndexGenerator', () => {
       });
     });
 
-    describe('addDocsTemplate indexer', () => {
-      const templateIndexer = { ...options.storyIndexers[0], addDocsTemplate: true };
-
+    describe('mdx tagged components', () => {
       it('adds docs entry with docs enabled', async () => {
         const specifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/A.stories.js',
+          './src/nested/Page.stories.mdx',
           options
         );
 
         const generator = new StoryIndexGenerator([specifier], {
           ...options,
-          storyIndexers: [templateIndexer],
         });
         await generator.initialize();
 
         expect(await generator.getIndex()).toMatchInlineSnapshot(`
           Object {
             "entries": Object {
-              "a--docs": Object {
-                "id": "a--docs",
-                "importPath": "./src/A.stories.js",
+              "page--docs": Object {
+                "id": "page--docs",
+                "importPath": "./src/nested/Page.stories.mdx",
                 "name": "docs",
                 "standalone": false,
                 "storiesImports": Array [],
                 "tags": Array [
-                  "component-tag",
-                  "docsPage",
+                  "mdx",
                   "docs",
                 ],
-                "title": "A",
+                "title": "Page",
                 "type": "docs",
               },
-              "a--story-one": Object {
-                "id": "a--story-one",
-                "importPath": "./src/A.stories.js",
-                "name": "Story One",
+              "page--story-one": Object {
+                "id": "page--story-one",
+                "importPath": "./src/nested/Page.stories.mdx",
+                "name": "StoryOne",
                 "tags": Array [
-                  "story-tag",
+                  "mdx",
                   "story",
                 ],
-                "title": "A",
+                "title": "Page",
                 "type": "story",
               },
             },
@@ -288,7 +293,6 @@ describe('StoryIndexGenerator', () => {
 
         const generator = new StoryIndexGenerator([specifier], {
           ...options,
-          storyIndexers: [templateIndexer],
           docs: { enabled: false },
         });
         await generator.initialize();
@@ -500,6 +504,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -613,6 +618,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -627,6 +633,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -650,6 +657,7 @@ describe('StoryIndexGenerator', () => {
                 "standalone": true,
                 "storiesImports": Array [],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "docs2/Yabbadabbadooo",
@@ -662,6 +670,7 @@ describe('StoryIndexGenerator', () => {
                 "standalone": true,
                 "storiesImports": Array [],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "NoTitle",
@@ -752,6 +761,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -766,6 +776,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -789,6 +800,7 @@ describe('StoryIndexGenerator', () => {
                 "standalone": true,
                 "storiesImports": Array [],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "docs2/Yabbadabbadooo",
@@ -801,6 +813,7 @@ describe('StoryIndexGenerator', () => {
                 "standalone": true,
                 "storiesImports": Array [],
                 "tags": Array [
+                  "mdx",
                   "docs",
                 ],
                 "title": "NoTitle",

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -227,9 +227,10 @@ export class StoryIndexGenerator {
         const { docsPage } = this.options.docs;
         const docsPageOptedIn =
           docsPage === 'automatic' || (docsPage && componentTags.includes('docsPage'));
-        // We always add a template for *.stories.mdx, but only if docs page is enabled for
-        // regular CSF files
-        if (storyIndexer.addDocsTemplate || docsPageOptedIn) {
+        // We need a docs entry attached to the CSF file if either:
+        //  a) it is a stories.mdx transpiled to CSF, OR
+        //  b) we have docs page enabled for this file
+        if (componentTags.includes('mdx') || docsPageOptedIn) {
           const name = this.options.docs.defaultName;
           const id = toId(csf.meta.title, name);
           entries.unshift({

code/lib/core-server/src/utils/__mockdata__/src/nested/Page.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/addon-docs';
 
-<Meta component={{}} />;
+<Meta component={{}} />
 
 <Story name="StoryOne" />