storybook-addon-dependency-previews 0.6.0 → 0.8.0

package/README.md

@@ -97,6 +97,17 @@ The wizard supports React (`@storybook/react-vite`), Svelte (`@storybook/sveltek
 - [Manual setup — Vite (React, Svelte, Vue 3)](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-vite.md)
 - [Manual setup — webpack (`@storybook/angular`, `@storybook/nextjs`)](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-webpack.md)
 
+## Auto-scaffolding new components and stories
+
+While `sb-deps` is watching (`npm run sb`), creating an **empty** source file fills it in from a template — and creates its matching sibling too. It works from either side:
+
+- **Create a component file** (`Button.tsx`, `Button.svelte`, `Button.vue`, `Button.component.ts`) → the component body is scaffolded **and** a matching story file is generated next to it.
+- **Create a story file** (`Button.stories.tsx`, or the singular `Button.story.tsx`) → the story is scaffolded into that exact file, and if the sibling component doesn't exist yet it is created and scaffolded too.
+
+Either way you end up with a working component + story pair. Only empty files are touched, so existing files are never overwritten. A `.stories.ts` with no component beside it is resolved to React, Vue, or Angular from your project's framework (Svelte stories use a `.svelte` file, so `.ts` isn't scaffolded for Svelte).
+
+**Tip — if a brand-new story shows `importers[path] is not a function` in Storybook**, just reload the browser tab. This is an occasional Storybook dev-server timing quirk when a story file is added while the dev server is running (the preview's internal module map briefly lags behind); a refresh clears it and the scaffolded files themselves are correct. Creating the **component** first (and letting the story auto-generate) avoids the hiccup entirely.
+
 ## Configuration file (optional)
 
 The `sb-deps` CLI can be customized via a `sb-deps.config.mjs` file in your project root (alongside `package.json`). Supported formats: `.mjs`, `.js`, or `.cjs`.
@@ -154,6 +165,26 @@ export default defineSbDepsConfig({
 })
 ```
 
+### `storybookFileExtension`
+
+The extension `sb-deps` uses when it auto-scaffolds a story file for a new component — `'stories'` (Storybook's convention) or `'story'`. The setup wizard asks for this preference.
+
+**Default:** `'stories'`
+
+| Value                | Generated story file |
+| -------------------- | -------------------- |
+| `'stories'` (default) | `ButtonAtom.stories.tsx` |
+| `'story'`             | `ButtonAtom.story.tsx`   |
+
+```js
+// sb-deps.config.mjs
+import { defineSbDepsConfig } from 'storybook-addon-dependency-previews/config'
+
+export default defineSbDepsConfig({
+	storybookFileExtension: 'story',
+})
+```
+
 ### `scaffold`
 
 Override the templates used when `sb-deps` auto-scaffolds new component and story files. Each template function receives a context object with relevant variables and must return the full file content as a string.

package/dist/cli/sb-deps.cjs

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_cli_setup_detect = require('./setup/detect.cjs');
 const require_cli_setup_index = require('./setup/index.cjs');
 let node_fs = require("node:fs");
 node_fs = require_rolldown_runtime.__toESM(node_fs);
@@ -84,6 +85,12 @@ async function loadSbDepsConfig() {
 let ANGULAR_SELECTOR_PREFIX = "app-";
 let SCAFFOLD_CONFIG = {};
 let SRC_DIR = "src";
+let STORYBOOK_FILE_EXTENSION = "stories";
+let cachedProjectFramework = null;
+function getProjectFramework() {
+	if (cachedProjectFramework === null) cachedProjectFramework = require_cli_setup_detect.detectProject(projectRoot).framework;
+	return cachedProjectFramework;
+}
 const IS_WIN = process.platform === "win32";
 /**
 * Locate the `dependency-cruiser` CLI binary in the user's `node_modules/.bin`.
@@ -214,7 +221,11 @@ function srcSubpathRegex(suffixPattern) {
 * `.js`, `.jsx`, `.mdx`, …). Used by the scaffolding-trigger helpers to make
 * sure they don't try to auto-scaffold a story file for an existing story.
 */
-const STORY_FILE_REGEX = /\.stories?\.\w+$/i;
+const STORY_FILE_REGEX = /\.stor(?:y|ies)\.\w+$/i;
+function isStoryFileUnderSrc(absPath) {
+	const norm = absPath.replace(/\\/g, "/");
+	return srcSubpathRegex(STORY_FILE_REGEX.source).test(norm);
+}
 function isComponentsTsx(absPath) {
 	const norm = absPath.replace(/\\/g, "/");
 	return srcSubpathRegex("\\.tsx$").test(norm) && !STORY_FILE_REGEX.test(norm);
@@ -278,17 +289,17 @@ function detectAtomicTag(absPath) {
 function storyPathForComponent(absCompPath) {
 	const dir = (0, node_path.dirname)(absCompPath);
 	const base = componentBaseFromComponent(absCompPath);
-	return (0, node_path.join)(dir, `${base}.stories.tsx`);
+	return (0, node_path.join)(dir, `${base}.${STORYBOOK_FILE_EXTENSION}.tsx`);
 }
 function storyPathForSvelteComponent(absCompPath) {
 	const dir = (0, node_path.dirname)(absCompPath);
 	const base = componentBaseFromSvelteComponent(absCompPath);
-	return (0, node_path.join)(dir, `${base}.stories.svelte`);
+	return (0, node_path.join)(dir, `${base}.${STORYBOOK_FILE_EXTENSION}.svelte`);
 }
 function storyPathForVueComponent(absCompPath) {
 	const dir = (0, node_path.dirname)(absCompPath);
 	const base = componentBaseFromVueComponent(absCompPath);
-	return (0, node_path.join)(dir, `${base}.stories.ts`);
+	return (0, node_path.join)(dir, `${base}.${STORYBOOK_FILE_EXTENSION}.ts`);
 }
 function makeTitleFromComponent(absCompPath) {
 	const srcRoot = (0, node_path.join)(projectRoot, SRC_DIR) + node_path.sep;
@@ -327,9 +338,9 @@ export function ${componentName}({ children }: ${propsName}) {
 }
 `;
 	(0, node_fs.writeFileSync)(absCompPath, tpl, "utf8");
-	info(`scaffolded component → \${rel(absCompPath)}`);
+	info(`scaffolded component → ${rel(absCompPath)}`);
 }
-function scaffoldStoryForComponent(absCompPath) {
+function scaffoldStoryForComponent(absCompPath, targetStoryPath = storyPathForComponent(absCompPath)) {
 	const base = componentBaseFromComponent(absCompPath);
 	const componentName = toPascalCase(base);
 	const propsName = `PropsFor${componentName}`;
@@ -345,7 +356,7 @@ function scaffoldStoryForComponent(absCompPath) {
 		base
 	}) ?? `import type { Meta, StoryObj } from '@storybook/react-vite'
 import type { StoryParameters } from 'storybook-addon-dependency-previews'
-import { ${componentName}, type ${propsName} } from './${componentName}'
+import { ${componentName}, type ${propsName} } from './${base}'
 
 const meta: Meta<typeof ${componentName}> = {
   title: '${title}',
@@ -364,15 +375,31 @@ export const Primary: Story = {
   args: {} satisfies ${propsName},
 }
 `;
-	const storyPath = storyPathForComponent(absCompPath);
-	(0, node_fs.writeFileSync)(storyPath, storyTpl, "utf8");
-	info(`scaffolded story → \${rel(storyPath)}`);
-	return storyPath;
+	(0, node_fs.writeFileSync)(targetStoryPath, storyTpl, "utf8");
+	info(`scaffolded story → ${rel(targetStoryPath)}`);
+	return targetStoryPath;
 }
-function ensureStoryForComponent(absCompPath) {
-	const sPath = storyPathForComponent(absCompPath);
-	if ((0, node_fs.existsSync)(sPath)) return null;
-	return scaffoldStoryForComponent(absCompPath);
+/**
+* Return the on-disk story file for `canonicalStoryPath` if one already exists —
+* under either `.story.` / `.stories.` naming AND, for React, either extension
+* (canonical `.tsx`, or a JSX-free `.ts`). The canonical path is built from
+* `STORYBOOK_FILE_EXTENSION` and the component's own extension, so it may not
+* match the exact file the user authored; checking every variant is what stops
+* `ensureStoryFor` emitting a duplicate story when the sibling was created under
+* a different naming or extension.
+*/
+function findExistingStory(canonicalStoryPath) {
+	const namingVariants = [canonicalStoryPath];
+	const alternateStoryPath = getAlternateStoryNaming(canonicalStoryPath);
+	if (alternateStoryPath) namingVariants.push(alternateStoryPath);
+	const allVariants = namingVariants.flatMap((path) => path.endsWith(".tsx") ? [path, path.replace(/\.tsx$/, ".ts")] : [path]);
+	return allVariants.find((path) => (0, node_fs.existsSync)(path)) ?? null;
+}
+/** Swap a story path between its `.story.<ext>` and `.stories.<ext>` naming. */
+function getAlternateStoryNaming(storyPath) {
+	if (/\.story\.\w+$/i.test(storyPath)) return storyPath.replace(/\.story\.(\w+)$/i, ".stories.$1");
+	if (/\.stories\.\w+$/i.test(storyPath)) return storyPath.replace(/\.stories\.(\w+)$/i, ".story.$1");
+	return null;
 }
 function scaffoldSvelteComponent(absCompPath) {
 	const base = componentBaseFromSvelteComponent(absCompPath);
@@ -435,7 +462,7 @@ function makeTitleFromSvelteComponent(absCompPath) {
 	const dedupedStoryPath = [...new Set(fullStoryPath)];
 	return dedupedStoryPath.join(" / ");
 }
-function scaffoldStoryForSvelteComponent(absCompPath) {
+function scaffoldStoryForSvelteComponent(absCompPath, targetStoryPath = storyPathForSvelteComponent(absCompPath)) {
 	const base = componentBaseFromSvelteComponent(absCompPath);
 	const componentName = toPascalCase(base);
 	const title = makeTitleFromSvelteComponent(absCompPath);
@@ -448,7 +475,7 @@ function scaffoldStoryForSvelteComponent(absCompPath) {
 		tags
 	}) ?? `<script lang="ts" module>
 	import type { StoryParameters } from 'storybook-addon-dependency-previews'
-	import ${componentName}, { type PropsFor${componentName} } from './${componentName}.svelte'
+	import ${componentName}, { type PropsFor${componentName} } from './${base}.svelte'
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
@@ -466,15 +493,9 @@ function scaffoldStoryForSvelteComponent(absCompPath) {
 	<p>${title}</p>
 </Story>
 `;
-	const storyPath = storyPathForSvelteComponent(absCompPath);
-	(0, node_fs.writeFileSync)(storyPath, storyTpl, "utf8");
-	info(`scaffolded svelte story → ${rel(storyPath)}`);
-	return storyPath;
-}
-function ensureStoryForSvelteComponent(absCompPath) {
-	const sPath = storyPathForSvelteComponent(absCompPath);
-	if ((0, node_fs.existsSync)(sPath)) return null;
-	return scaffoldStoryForSvelteComponent(absCompPath);
+	(0, node_fs.writeFileSync)(targetStoryPath, storyTpl, "utf8");
+	info(`scaffolded svelte story → ${rel(targetStoryPath)}`);
+	return targetStoryPath;
 }
 function scaffoldVueComponent(absCompPath) {
 	const base = componentBaseFromVueComponent(absCompPath);
@@ -509,7 +530,7 @@ function makeTitleFromVueComponent(absCompPath) {
 	const dedupedStoryPath = [...new Set(fullStoryPath)];
 	return dedupedStoryPath.join(" / ");
 }
-function scaffoldStoryForVueComponent(absCompPath) {
+function scaffoldStoryForVueComponent(absCompPath, targetStoryPath = storyPathForVueComponent(absCompPath)) {
 	const base = componentBaseFromVueComponent(absCompPath);
 	const componentName = toPascalCase(base);
 	const title = makeTitleFromVueComponent(absCompPath);
@@ -522,7 +543,7 @@ function scaffoldStoryForVueComponent(absCompPath) {
 		tags
 	}) ?? `import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import type { StoryParameters } from 'storybook-addon-dependency-previews'
-import ${componentName}, { type PropsFor${componentName} } from './${componentName}.vue'
+import ${componentName}, { type PropsFor${componentName} } from './${base}.vue'
 
 const meta: Meta<typeof ${componentName}> = {
 	title: '${title}',
@@ -551,20 +572,14 @@ export const Primary: Story = {
 	}),
 }
 `;
-	const storyPath = storyPathForVueComponent(absCompPath);
-	(0, node_fs.writeFileSync)(storyPath, storyTpl, "utf8");
-	info(`scaffolded vue story → ${rel(storyPath)}`);
-	return storyPath;
-}
-function ensureStoryForVueComponent(absCompPath) {
-	const sPath = storyPathForVueComponent(absCompPath);
-	if ((0, node_fs.existsSync)(sPath)) return null;
-	return scaffoldStoryForVueComponent(absCompPath);
+	(0, node_fs.writeFileSync)(targetStoryPath, storyTpl, "utf8");
+	info(`scaffolded vue story → ${rel(targetStoryPath)}`);
+	return targetStoryPath;
 }
 function storyPathForAngularComponent(absCompPath) {
 	const dir = (0, node_path.dirname)(absCompPath);
 	const base = componentBaseFromAngularComponent(absCompPath);
-	return (0, node_path.join)(dir, `${base}.stories.ts`);
+	return (0, node_path.join)(dir, `${base}.${STORYBOOK_FILE_EXTENSION}.ts`);
 }
 function makeTitleFromAngularComponent(absCompPath) {
 	const srcRoot = (0, node_path.join)(projectRoot, SRC_DIR) + node_path.sep;
@@ -717,7 +732,7 @@ function scaffoldAngularHtmlFromTs(absHtmlPath, absTsPath) {
 	(0, node_fs.writeFileSync)(absHtmlPath, htmlContent, "utf8");
 	info(`scaffolded angular template → ${rel(absHtmlPath)}`);
 }
-function scaffoldStoryForAngularComponent(absCompPath) {
+function scaffoldStoryForAngularComponent(absCompPath, targetStoryPath = storyPathForAngularComponent(absCompPath)) {
 	const base = componentBaseFromAngularComponent(absCompPath);
 	const componentName = toPascalCase(base);
 	const className = `${componentName}Component`;
@@ -752,15 +767,132 @@ export const Primary: Story = {
 	args: {},
 }
 `;
-	const storyPath = storyPathForAngularComponent(absCompPath);
-	(0, node_fs.writeFileSync)(storyPath, storyTpl, "utf8");
-	info(`scaffolded angular story → ${rel(storyPath)}`);
-	return storyPath;
+	(0, node_fs.writeFileSync)(targetStoryPath, storyTpl, "utf8");
+	info(`scaffolded angular story → ${rel(targetStoryPath)}`);
+	return targetStoryPath;
 }
-function ensureStoryForAngularComponent(absCompPath) {
-	const sPath = storyPathForAngularComponent(absCompPath);
-	if ((0, node_fs.existsSync)(sPath)) return null;
-	return scaffoldStoryForAngularComponent(absCompPath);
+/**
+* Per-framework scaffolders + story-path helper, keyed by `StoryFramework`. Lets
+* `ensureStoryFor` and `scaffoldStoryFromCreatedStoryFile` pick the right trio
+* without four near-identical branches per operation. Angular's component
+* scaffolder takes a template-style arg, wrapped here to `'internal'` (inline
+* template) to match the signature.
+*/
+const STORY_SCAFFOLDERS = {
+	react: {
+		component: scaffoldComponent,
+		story: scaffoldStoryForComponent,
+		storyPath: storyPathForComponent
+	},
+	svelte: {
+		component: scaffoldSvelteComponent,
+		story: scaffoldStoryForSvelteComponent,
+		storyPath: storyPathForSvelteComponent
+	},
+	vue: {
+		component: scaffoldVueComponent,
+		story: scaffoldStoryForVueComponent,
+		storyPath: storyPathForVueComponent
+	},
+	angular: {
+		component: (compPath) => scaffoldAngularComponent(compPath, "internal"),
+		story: scaffoldStoryForAngularComponent,
+		storyPath: storyPathForAngularComponent
+	}
+};
+/**
+* Ensure the component at `absCompPath` has a story file, scaffolding one if it
+* doesn't already exist under either naming variant. The component-side mirror
+* of `scaffoldStoryFromCreatedStoryFile`; called when a component file is
+* created. Returns the scaffolded story path, or `null` if one already existed.
+*/
+function ensureStoryFor(framework, absCompPath) {
+	const { storyPath, story } = STORY_SCAFFOLDERS[framework];
+	if (findExistingStory(storyPath(absCompPath))) return null;
+	return story(absCompPath);
+}
+/**
+* Work out the component a created story file belongs to, and which framework's
+* scaffolders to use. `.tsx` → React, `.svelte` → Svelte, `.ts` → React, Vue,
+* or Angular (disambiguated in `resolveTsStoryComponent`). Any other extension
+* (`.js`, `.jsx`, `.mdx`) returns `null` — not something we scaffold.
+*/
+function resolveComponentForStory(absStoryPath) {
+	const storyBase = absStoryPath.replace(STORY_FILE_REGEX, "");
+	const ext = (0, node_path.extname)(absStoryPath).toLowerCase();
+	if (ext === ".tsx") return {
+		compPath: `${storyBase}.tsx`,
+		framework: "react"
+	};
+	if (ext === ".svelte") return {
+		compPath: `${storyBase}.svelte`,
+		framework: "svelte"
+	};
+	if (ext === ".ts") return resolveTsStoryComponent(storyBase);
+	return null;
+}
+/**
+* A `.stories.ts` story can be React, Vue, or Angular — all three use `.ts`
+* story files (React's scaffolded template is JSX-free, so it's valid as `.ts`
+* even though React stories are `.tsx` by convention). Prefer an existing
+* sibling component to decide (`<base>.tsx` → React, `<base>.vue` → Vue,
+* `<base>.component.ts` → Angular); with none present, fall back to the
+* project's detected framework. Svelte is intentionally excluded: its story
+* template is `.svelte`-specific, so a `.ts` Svelte story can't be scaffolded
+* from it.
+*/
+function resolveTsStoryComponent(storyBase) {
+	const reactPath = `${storyBase}.tsx`;
+	if ((0, node_fs.existsSync)(reactPath)) return {
+		compPath: reactPath,
+		framework: "react"
+	};
+	const vuePath = `${storyBase}.vue`;
+	if ((0, node_fs.existsSync)(vuePath)) return {
+		compPath: vuePath,
+		framework: "vue"
+	};
+	const angularPath = `${storyBase}.component.ts`;
+	if ((0, node_fs.existsSync)(angularPath)) return {
+		compPath: angularPath,
+		framework: "angular"
+	};
+	const projectFramework = getProjectFramework();
+	const isReactFramework = projectFramework === "react-vite" || projectFramework === "nextjs-webpack";
+	if (isReactFramework) return {
+		compPath: reactPath,
+		framework: "react"
+	};
+	if (projectFramework === "vue3-vite") return {
+		compPath: vuePath,
+		framework: "vue"
+	};
+	if (projectFramework === "angular-webpack") return {
+		compPath: angularPath,
+		framework: "angular"
+	};
+	return null;
+}
+/**
+* Fill a directly-created story file (the mirror of component creation). Skips
+* non-empty files (an existing story is never clobbered) and stories whose
+* framework/extension we don't scaffold. When the sibling component is missing,
+* the story is filled first and the component backfilled after — the story
+* scaffolder needs the component's path, never its contents — so the
+* component's own watcher event then no-ops on its `ensureStoryFor` guard
+* (the story already exists). Returns the filled story path, or `null` if
+* nothing was scaffolded.
+*/
+function scaffoldStoryFromCreatedStoryFile(absStoryPath) {
+	if (!isEmptyOrWhitespace(absStoryPath)) return null;
+	const resolved = resolveComponentForStory(absStoryPath);
+	if (!resolved) return null;
+	const { compPath, framework } = resolved;
+	const { component: scaffoldFrameworkComponent, story: scaffoldFrameworkStory } = STORY_SCAFFOLDERS[framework];
+	const isComponentMissing = !(0, node_fs.existsSync)(compPath) || isEmptyOrWhitespace(compPath);
+	const createdStory = scaffoldFrameworkStory(compPath, absStoryPath);
+	if (isComponentMissing) scaffoldFrameworkComponent(compPath);
+	return createdStory;
 }
 function startWatcher() {
 	const root = projectRoot;
@@ -809,6 +941,9 @@ function startWatcher() {
 				kick("unlink", abs);
 				continue;
 			}
+			if (isStoryFileUnderSrc(abs) && ev.type === "create") {
+				if (handleStoryCreation(abs)) continue;
+			}
 			if (isComponentsTsx(abs) && ev.type === "create") {
 				await handleComponentCreation(abs, relPath);
 				continue;
@@ -832,7 +967,7 @@ function startWatcher() {
 						scaffoldAngularHtmlFromTs(abs, tsPath);
 					}
 					console.log("Angular component creation detected:", rel(abs));
-					const createdStory = ensureStoryForAngularComponent(tsPath);
+					const createdStory = ensureStoryFor("angular", tsPath);
 					if (createdStory) {
 						kick("create:story", createdStory);
 					}
@@ -847,12 +982,20 @@ function startWatcher() {
 		info("watching… (ready)");
 		return result;
 	}).catch((e) => error(`watch init failed ${e?.message || e}`));
+	function handleStoryCreation(abs) {
+		const createdStory = scaffoldStoryFromCreatedStoryFile(abs);
+		if (createdStory) {
+			kick("create:story", createdStory);
+			return true;
+		}
+		return false;
+	}
 	async function handleComponentCreation(abs, relPath) {
 		if (isEmptyOrWhitespace(abs)) {
 			scaffoldComponent(abs);
 		}
 		console.log("Component creation detected:", relPath);
-		const createdStory = ensureStoryForComponent(abs);
+		const createdStory = ensureStoryFor("react", abs);
 		if (createdStory) {
 			kick("create:story", createdStory);
 		}
@@ -867,7 +1010,7 @@ function startWatcher() {
 		if (isEmptyOrWhitespace(abs)) {
 			scaffoldSvelteComponent(abs);
 		}
-		const createdStory = ensureStoryForSvelteComponent(abs);
+		const createdStory = ensureStoryFor("svelte", abs);
 		if (createdStory) {
 			kick("create:story", createdStory);
 		}
@@ -877,7 +1020,7 @@ function startWatcher() {
 			scaffoldVueComponent(abs);
 		}
 		console.log("Vue component creation detected:", relPath);
-		const createdStory = ensureStoryForVueComponent(abs);
+		const createdStory = ensureStoryFor("vue", abs);
 		if (createdStory) {
 			kick("create:story", createdStory);
 		}
@@ -887,7 +1030,7 @@ function startWatcher() {
 			scaffoldAngularComponent(abs, templateStyle);
 		}
 		console.log("Angular component creation detected:", relPath);
-		const createdStory = ensureStoryForAngularComponent(abs);
+		const createdStory = ensureStoryFor("angular", abs);
 		if (createdStory) {
 			kick("create:story", createdStory);
 		}
@@ -955,6 +1098,15 @@ async function startStorybook() {
 			SRC_DIR = "src";
 		}
 	}
+	const configuredStorybookFileExtension = cfg.storybookFileExtension;
+	if (configuredStorybookFileExtension === undefined) {
+		STORYBOOK_FILE_EXTENSION = "stories";
+	} else if (configuredStorybookFileExtension === "story" || configuredStorybookFileExtension === "stories") {
+		STORYBOOK_FILE_EXTENSION = configuredStorybookFileExtension;
+	} else {
+		error(`storybookFileExtension "${configuredStorybookFileExtension}" is invalid — must be 'story' or 'stories'. Falling back to 'stories'.`);
+		STORYBOOK_FILE_EXTENSION = "stories";
+	}
 	banner("sb-deps");
 	info(`outDir: ${rel(outDir)}`);
 	info(configPath ? `config: ${rel(configPath)}` : "config: (none)");