ESLint Plugin: Bundle CSF helpers so the plugin loads without storybook

code/core/src/csf/export-story.ts

@@ -0,0 +1,31 @@
+import { toStartCaseStr } from './toStartCaseStr.ts';
+
+type StoryDescriptor = string[] | RegExp;
+
+export interface IncludeExcludeOptions {
+  includeStories?: StoryDescriptor;
+  excludeStories?: StoryDescriptor;
+}
+
+function matches(storyKey: string, arrayOrRegex: StoryDescriptor) {
+  if (Array.isArray(arrayOrRegex)) {
+    return arrayOrRegex.includes(storyKey);
+  }
+  return storyKey.match(arrayOrRegex);
+}
+
+/** Transform a CSF named export into a readable story name */
+export const storyNameFromExport = (key: string) => toStartCaseStr(key);
+
+/** Does a named export match CSF inclusion/exclusion options? */
+export function isExportStory(
+  key: string,
+  { includeStories, excludeStories }: IncludeExcludeOptions
+) {
+  return (
+    // Babel's CommonJS interop adds __esModule; it is not a CSF story export.
+    key !== '__esModule' &&
+    (!includeStories || matches(key, includeStories)) &&
+    (!excludeStories || !matches(key, excludeStories))
+  );
+}

code/core/src/csf/index.ts

@@ -1,5 +1,3 @@
-import { toStartCaseStr } from './toStartCaseStr.ts';
-
 /**
  * Remove punctuation and illegal characters from a story ID.
  *
@@ -31,34 +29,7 @@ export const toId = (kind: string, name?: string) =>
 export const toTestId = (parentId: string, testName: string) =>
   `${parentId}:${sanitizeSafe(testName, 'test')}`;
 
-/** Transform a CSF named export into a readable story name */
-export const storyNameFromExport = (key: string) => toStartCaseStr(key);
-
-type StoryDescriptor = string[] | RegExp;
-export interface IncludeExcludeOptions {
-  includeStories?: StoryDescriptor;
-  excludeStories?: StoryDescriptor;
-}
-
-function matches(storyKey: string, arrayOrRegex: StoryDescriptor) {
-  if (Array.isArray(arrayOrRegex)) {
-    return arrayOrRegex.includes(storyKey);
-  }
-  return storyKey.match(arrayOrRegex);
-}
-
-/** Does a named export match CSF inclusion/exclusion options? */
-export function isExportStory(
-  key: string,
-  { includeStories, excludeStories }: IncludeExcludeOptions
-) {
-  return (
-    // https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs
-    key !== '__esModule' &&
-    (!includeStories || matches(key, includeStories)) &&
-    (!excludeStories || !matches(key, excludeStories))
-  );
-}
+export { isExportStory, storyNameFromExport, type IncludeExcludeOptions } from './export-story.ts';
 
 export interface SeparatorOptions {
   rootSeparator: string | RegExp;

code/lib/eslint-plugin/README.md

@@ -48,6 +48,8 @@ npm install eslint-plugin-storybook --save-dev
 yarn add eslint-plugin-storybook --dev
 ```
 
+The plugin bundles the CSF helpers it needs, so you do **not** need to install `storybook` just to load the ESLint plugin (for example in a shared monorepo ESLint preset).
+
 And finally, add this to your `.eslintignore` file:
 
 ```

code/lib/eslint-plugin/package.json

@@ -59,12 +59,12 @@
     "eslint-plugin-node": "^11.1.0",
     "oxfmt": "^0.41.0",
     "prompts": "^2.4.0",
+    "storybook": "workspace:*",
     "ts-dedent": "^2.0.0",
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "eslint": ">=8",
-    "storybook": "workspace:^"
+    "eslint": ">=8"
   },
   "publishConfig": {
     "access": "public"

code/lib/eslint-plugin/src/rules/no-redundant-story-name.ts

@@ -3,7 +3,7 @@
  *   be generated by the export name
  * @author Yann Braga
  */
-import { storyNameFromExport } from 'storybook/internal/csf';
+import { storyNameFromExport } from '../utils/csf-helpers.ts';
 
 import {
   isExpressionStatement,

code/lib/eslint-plugin/src/rules/prefer-pascal-case.ts

@@ -2,8 +2,8 @@
  * @file Prefer pascal case
  * @author Yann Braga
  */
-import type { IncludeExcludeOptions } from 'storybook/internal/csf';
-import { isExportStory } from 'storybook/internal/csf';
+import type { IncludeExcludeOptions } from '../utils/csf-helpers.ts';
+import { isExportStory } from '../utils/csf-helpers.ts';
 
 import type { TSESTree } from '@typescript-eslint/types';
 import type { TSESLint } from '@typescript-eslint/utils';

code/lib/eslint-plugin/src/rules/story-exports.ts

@@ -2,7 +2,7 @@
  * @file A story file must contain at least one story export
  * @author Yann Braga
  */
-import type { IncludeExcludeOptions } from 'storybook/internal/csf';
+import type { IncludeExcludeOptions } from '../utils/csf-helpers.ts';
 
 import type { TSESTree } from '@typescript-eslint/types';
 

code/lib/eslint-plugin/src/utils/csf-helpers.ts

@@ -0,0 +1,2 @@
+export type { IncludeExcludeOptions } from '../../../../core/src/csf/export-story.ts';
+export { isExportStory, storyNameFromExport } from '../../../../core/src/csf/export-story.ts';

code/lib/eslint-plugin/src/utils/index.ts

@@ -1,5 +1,5 @@
-import type { IncludeExcludeOptions } from 'storybook/internal/csf';
-import { isExportStory } from 'storybook/internal/csf';
+import type { IncludeExcludeOptions } from './csf-helpers.ts';
+import { isExportStory } from './csf-helpers.ts';
 
 import type { TSESTree } from '@typescript-eslint/types';
 import type { TSESLint } from '@typescript-eslint/utils';

code/lib/eslint-plugin/tests/bundled-csf.spec.ts

@@ -0,0 +1,20 @@
+import { readFileSync, statSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { describe, expect, it } from 'vitest';
+
+const distFile = join(dirname(fileURLToPath(import.meta.url)), '../dist/index.js');
+const MAX_BUNDLE_BYTES = 150_000;
+
+describe('eslint-plugin-storybook bundle', () => {
+  it('inlines CSF helpers instead of importing storybook/internal/csf', () => {
+    const bundle = readFileSync(distFile, 'utf8');
+
+    expect(bundle).not.toMatch(/storybook\/internal\/csf/);
+  });
+
+  it('bundles only the minimal CSF export helpers', () => {
+    expect(statSync(distFile).size).toBeLessThan(MAX_BUNDLE_BYTES);
+  });
+});

code/lib/eslint-plugin/tsconfig.json

@@ -1,5 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {},
+  "compilerOptions": {
+    "types": ["node"]
+  },
   "include": ["src/**/*"]
 }

yarn.lock

@@ -22569,11 +22569,11 @@ __metadata:
     eslint-plugin-node: "npm:^11.1.0"
     oxfmt: "npm:^0.41.0"
     prompts: "npm:^2.4.0"
+    storybook: "workspace:*"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^6.0.3"
   peerDependencies:
     eslint: ">=8"
-    storybook: "workspace:^"
   languageName: unknown
   linkType: soft