forgebook 0.1.8 → 0.3.0

package/dist/src/vite/pluginModules.d.ts

@@ -0,0 +1,169 @@
+/**
+ * The modules the plugin answers from what it read of the story files: a story file's component docs, a pattern's
+ * index and loaders, a group's "Used in" and what its stories reach.
+ *
+ * @remarks
+ * The modules made from a file's text (a story's code, a component's page, Markdown) are `textModules.ts`, which the
+ * plugin loads on their first query: what they need is heavy, and a story's page needs none of it.
+ *
+ * @module
+ */
+import type { DiskCache } from "./diskCache.ts";
+import type { DocsExtractor, DocsResult } from "./docsExtractor.ts";
+import type { PackJson } from "./packedModule.ts";
+import { type GroupLoaders, type IndexedStoryFile, type IsFileKept, type KeptIndex } from "./storyFilesModule.ts";
+/**
+ * The id of a group of story files' module: virtual, with the declaring module's folder and the patterns after it,
+ * whether a `?forgebook-files` import or the group's specifier (`FILES_SPECIFIER_PREFIX`) names it.
+ */
+export declare const FILES_PREFIX = "\0virtual:forgebook-files:";
+/** The resolved id of a group's "Used in" module: Rollup's mark of a virtual module, then its import's specifier. */
+export declare const USAGE_ID_PREFIX = "\0virtual:forgebook-usage:";
+/** The resolved id of a group's reach module, the same way. */
+export declare const REACH_ID_PREFIX = "\0virtual:forgebook-reach:";
+/** The resolved id of a group's texts module, a build's, the same way. */
+export declare const TEXTS_ID_PREFIX = "\0virtual:forgebook-texts:";
+/** The resolved id of a group of story files' search index. */
+export declare const SEARCH_ID_PREFIX = "\0virtual:forgebook-search:";
+/** The resolved id of a group of docs pages' search index. */
+export declare const PAGES_SEARCH_ID_PREFIX = "\0virtual:forgebook-search-pages:";
+/**
+ * A story file's component docs as the panel reads them, or `{ error }`.
+ *
+ * @param component - what the extractor read for the story file.
+ * @param watch - adds a file whose edit renews what holds them.
+ */
+export declare const docsValue: (component: DocsResult, watch: (file: string) => void) => unknown;
+/**
+ * The module that answers a `?forgebook-docs` import: the story file's component docs, or `{ error }` for the panel.
+ *
+ * @param component - what the extractor read for the story file.
+ * @param watch - adds a file whose edit renews the module.
+ */
+export declare const docsModule: (component: DocsResult, watch: (file: string) => void) => {
+    code: string;
+    moduleType: "js";
+};
+/**
+ * The module of a group of story files: every listed story file's index and loaders; with the files, indexed,
+ * which the dev server keeps to tell an edit that changes the list.
+ *
+ * @param id - the module's id (`FILES_PREFIX`, then the group: `storyFilesGroupText`).
+ * @param watch - adds a file whose edit renews the module (each story file).
+ * @param loaders - the group's loaders besides its story files'.
+ * @param cache - the pattern's index kept between starts; none reads every file.
+ * @param warm - starts reading the docs of a story file ahead of its request; none in a test run.
+ * @param startTexts - a build's: starts reading the files' docs, code and pages, which the module imports from the
+ * group's texts module (`builtTexts.ts`); none imports each from its query.
+ * @param isKept - whether a listed file may be read; every one by default.
+ * @throws when a story file cannot be indexed.
+ */
+export declare const patternModule: (id: string, watch: (file: string) => void, loaders: GroupLoaders, cache: DiskCache<KeptIndex> | undefined, warm: ((storyFile: string) => void) | undefined, startTexts?: (files: readonly IndexedStoryFile[]) => void, isKept?: IsFileKept) => {
+    code: string;
+    moduleType: "js";
+    files: readonly IndexedStoryFile[];
+};
+/**
+ * Whether a story file added or removed changes what a group of story files lists: listed now and not when its module
+ * was served, or the other way round. A file no pattern lists, or one a `!` pattern leaves out, changes nothing, so
+ * the pages need no reload for it.
+ *
+ * @param id - the group's module's id (`FILES_PREFIX`, then the group).
+ * @param listed - the files its module listed when served, absolute in Vite's form; none when it could not be made.
+ * @param file - the file added or removed.
+ * @param isKept - whether a listed file may be read; every one by default.
+ */
+export declare const isListingChanged: (id: string, listed: ReadonlySet<string> | undefined, file: string, isKept?: IsFileKept) => boolean;
+/**
+ * The modules a story file added or removed renews: the groups whose list it changes (`isListingChanged`) and, with
+ * them, the modules that read their files; none when it changes no list.
+ *
+ * @param served - the groups' modules, with the files each listed when served.
+ * @param file - the file added or removed.
+ * @param readers - the modules that read the groups' files: their "Used in" and search indexes.
+ * @param isKept - whether a listed file may be read; every one by default.
+ */
+export declare const listingRenewals: (served: ReadonlyMap<string, ReadonlySet<string> | undefined>, file: string, readers: readonly string[], isKept?: IsFileKept) => readonly string[] | undefined;
+/**
+ * A group's "Used in" module: for each component, the components that use it, packed once per title and list of
+ * stories (`packedUsage`), which a page reads.
+ *
+ * @param id - the module's id (`USAGE_ID_PREFIX`, then the group: `storyFilesGroupText`).
+ * @param watch - adds a file whose edit renews the module (each story file).
+ * @param usage - reads the facts in the docs worker.
+ * @param cache - the pattern's index kept between starts; none reads every file.
+ * @param pack - writes the module's JSON as its value: as it is on a dev server, in a gzipped file of a build's.
+ * @param isKept - whether a listed file may be read; every one by default.
+ */
+export declare const usageModule: (id: string, watch: (file: string) => void, usage: DocsExtractor["usage"], cache: DiskCache<KeptIndex> | undefined, pack: PackJson, isKept?: IsFileKept) => Promise<{
+    code: string;
+    moduleType: "js";
+}>;
+/**
+ * A group's reach module: the files each story reaches, which only the dev server's tools read (a check of what a
+ * change touches). A module of its own, since a large library's stories reach thousands of files each, which a page
+ * showing "Used in" must not download.
+ *
+ * @param id - the module's id (`REACH_ID_PREFIX`, then the group: `storyFilesGroupText`).
+ * @param watch - adds a file whose edit renews the module (each story file).
+ * @param usage - reads the facts in the docs worker.
+ * @param cache - the pattern's index kept between starts; none reads every file.
+ * @param isKept - whether a listed file may be read; every one by default.
+ */
+export declare const reachModule: (id: string, watch: (file: string) => void, usage: DocsExtractor["usage"], cache: DiskCache<KeptIndex> | undefined, isKept?: IsFileKept) => Promise<{
+    code: string;
+    moduleType: "js";
+}>;
+/** A search index, made: its module, and whether it is a group of docs pages' (renewed as pages come and go). */
+export type SearchIndexModule = {
+    /** The module. */
+    readonly module: {
+        readonly code: string;
+        readonly moduleType: "js";
+    };
+    /** Whether it indexes docs pages, not story files. */
+    readonly isPages: boolean;
+};
+/**
+ * A group's search index, when the id names one: its story files' (what their components' docs and pages say) or its
+ * docs pages'. The search's code, and the Markdown reader it needs, load with the first.
+ *
+ * @param id - the module's id.
+ * @param watch - adds a file whose edit renews the module.
+ * @param read - a story file's component docs, how the module writes its JSON, and which listed files may be read.
+ * @returns the index; none for another id.
+ */
+export declare const searchIndexModule: (id: string, watch: (file: string) => void, read: {
+    readonly docsOf: (storyFile: string) => Promise<DocsResult>;
+    readonly isServing: boolean;
+    readonly pack: PackJson;
+    readonly isKept: IsFileKept;
+}) => Promise<SearchIndexModule | undefined>;
+/** What a catalogue's search indexes read and tell: what `searchIndexes` makes. */
+export type SearchIndexes = {
+    /** A story file's component docs: a dev server reads them again each time, as they change while it runs. */
+    readonly docsOf: (storyFile: string) => Promise<DocsResult>;
+    /**
+     * A group's search index, when the id names one; none for another id.
+     *
+     * @param id - the module's id.
+     * @param watch - adds a file whose edit renews the module.
+     * @param pack - writes the index's JSON as the module's value.
+     */
+    readonly moduleOf: (id: string, watch: (file: string) => void, pack: PackJson) => Promise<{
+        code: string;
+        moduleType: "js";
+    } | undefined>;
+};
+/**
+ * The search's indexes of a plugin: a build reads each component's docs once, for its page and its index.
+ *
+ * @param read - reads a story file's component docs, says whether a dev server runs, keeps each index's id with the
+ * modules an edit renews (a docs pages' index with the docs pages'), and says which listed files may be read.
+ */
+export declare const searchIndexes: (read: {
+    readonly extract: (storyFile: string) => Promise<DocsResult>;
+    readonly isServing: () => boolean;
+    readonly track: (id: string, isPages: boolean) => void;
+    readonly isKept: IsFileKept;
+}) => SearchIndexes;

package/dist/src/vite/pluginModules.js

@@ -0,0 +1,221 @@
+/**
+ * The modules the plugin answers from what it read of the story files: a story file's component docs, a pattern's
+ * index and loaders, a group's "Used in" and what its stories reach.
+ *
+ * @remarks
+ * The modules made from a file's text (a story's code, a component's page, Markdown) are `textModules.ts`, which the
+ * plugin loads on their first query: what they need is heavy, and a story's page needs none of it.
+ *
+ * @module
+ */
+import { codeLiteral } from "../codeLiteral.js";
+import { packedUsage } from "../usedIn.js";
+import { EVERY_FILE, FILES_SPECIFIER_PREFIX, indexedStoryFiles, PAGES_SEARCH_PREFIX, REACH_PREFIX, SEARCH_PREFIX, storyFileKeys, storyFilesCode, storyFilesGroupOf, TEXTS_PREFIX, USAGE_PREFIX } from "./storyFilesModule.js";
+import { storyReach } from "./storyReach.js";
+import { joinedUsage } from "./usageModule.js";
+import { VITE_PATHS } from "./vitePaths.js";
+/**
+ * The id of a group of story files' module: virtual, with the declaring module's folder and the patterns after it,
+ * whether a `?forgebook-files` import or the group's specifier (`FILES_SPECIFIER_PREFIX`) names it.
+ */
+export const FILES_PREFIX = `\0${FILES_SPECIFIER_PREFIX}`;
+/** The resolved id of a group's "Used in" module: Rollup's mark of a virtual module, then its import's specifier. */
+export const USAGE_ID_PREFIX = `\0${USAGE_PREFIX}`;
+/** The resolved id of a group's reach module, the same way. */
+export const REACH_ID_PREFIX = `\0${REACH_PREFIX}`;
+/** The resolved id of a group's texts module, a build's, the same way. */
+export const TEXTS_ID_PREFIX = `\0${TEXTS_PREFIX}`;
+/** The resolved id of a group of story files' search index. */
+export const SEARCH_ID_PREFIX = `\0${SEARCH_PREFIX}`;
+/** The resolved id of a group of docs pages' search index. */
+export const PAGES_SEARCH_ID_PREFIX = `\0${PAGES_SEARCH_PREFIX}`;
+/**
+ * A story file's component docs as the panel reads them, or `{ error }`.
+ *
+ * @param component - what the extractor read for the story file.
+ * @param watch - adds a file whose edit renews what holds them.
+ */
+export const docsValue = (component, watch) => {
+    // the docs come from the component's files, not the story file the id names: Vite renews them on an edit only if
+    // it watches those files too
+    if (typeof component !== "string" && "sources" in component) {
+        for (const file of component.sources)
+            watch(file);
+    }
+    return typeof component === "string" ? { error: component } : component.docs;
+};
+/**
+ * The module that answers a `?forgebook-docs` import: the story file's component docs, or `{ error }` for the panel.
+ *
+ * @param component - what the extractor read for the story file.
+ * @param watch - adds a file whose edit renews the module.
+ */
+export const docsModule = (component, watch) => ({
+    code: `export default ${codeLiteral(docsValue(component, watch))};`,
+    moduleType: "js"
+});
+/**
+ * The module of a group of story files: every listed story file's index and loaders; with the files, indexed,
+ * which the dev server keeps to tell an edit that changes the list.
+ *
+ * @param id - the module's id (`FILES_PREFIX`, then the group: `storyFilesGroupText`).
+ * @param watch - adds a file whose edit renews the module (each story file).
+ * @param loaders - the group's loaders besides its story files'.
+ * @param cache - the pattern's index kept between starts; none reads every file.
+ * @param warm - starts reading the docs of a story file ahead of its request; none in a test run.
+ * @param startTexts - a build's: starts reading the files' docs, code and pages, which the module imports from the
+ * group's texts module (`builtTexts.ts`); none imports each from its query.
+ * @param isKept - whether a listed file may be read; every one by default.
+ * @throws when a story file cannot be indexed.
+ */
+export const patternModule = (id, watch, loaders, cache, warm, startTexts, isKept = EVERY_FILE) => {
+    const { root, patterns } = storyFilesGroupOf(id.slice(FILES_PREFIX.length));
+    const files = indexedStoryFiles(root, patterns, watch, cache, isKept);
+    const [first] = files;
+    if (first !== undefined)
+        warm?.(first.file);
+    startTexts?.(files);
+    const code = storyFilesCode(root, patterns, files, loaders, startTexts !== undefined);
+    return { code, moduleType: "js", files };
+};
+/**
+ * Whether a story file added or removed changes what a group of story files lists: listed now and not when its module
+ * was served, or the other way round. A file no pattern lists, or one a `!` pattern leaves out, changes nothing, so
+ * the pages need no reload for it.
+ *
+ * @param id - the group's module's id (`FILES_PREFIX`, then the group).
+ * @param listed - the files its module listed when served, absolute in Vite's form; none when it could not be made.
+ * @param file - the file added or removed.
+ * @param isKept - whether a listed file may be read; every one by default.
+ */
+export const isListingChanged = (id, listed, file, isKept = EVERY_FILE) => {
+    if (listed === undefined)
+        return true;
+    const { root, patterns } = storyFilesGroupOf(id.slice(FILES_PREFIX.length));
+    const isListed = storyFileKeys(root, patterns, isKept).includes(VITE_PATHS.relativeKey(root, file));
+    return isListed !== listed.has(VITE_PATHS.normalize(file));
+};
+/**
+ * The modules a story file added or removed renews: the groups whose list it changes (`isListingChanged`) and, with
+ * them, the modules that read their files; none when it changes no list.
+ *
+ * @param served - the groups' modules, with the files each listed when served.
+ * @param file - the file added or removed.
+ * @param readers - the modules that read the groups' files: their "Used in" and search indexes.
+ * @param isKept - whether a listed file may be read; every one by default.
+ */
+export const listingRenewals = (served, file, readers, isKept = EVERY_FILE) => {
+    const changed = [...served]
+        .filter(([id, listed]) => isListingChanged(id, listed, file, isKept))
+        .map(([id]) => id);
+    return changed.length === 0 ? undefined : [...changed, ...readers];
+};
+/**
+ * A group's facts: its story files indexed, what their stories render read in the docs worker.
+ *
+ * @param group - the group (`storyFilesGroupText`).
+ * @param watch - adds a file whose edit renews the module (each story file).
+ * @param usage - reads the facts in the docs worker.
+ * @param cache - the pattern's index kept between starts; none reads every file.
+ * @param isKept - whether a listed file may be read.
+ */
+const groupUsage = async (group, watch, usage, cache, isKept) => {
+    const { root, patterns } = storyFilesGroupOf(group);
+    const files = indexedStoryFiles(root, patterns, watch, cache, isKept);
+    const graph = await usage(files.map((file) => ({
+        storyFile: file.file,
+        exports: file.index.stories.map((story) => story.exportName)
+    })));
+    return { files, graph };
+};
+/**
+ * A group's "Used in" module: for each component, the components that use it, packed once per title and list of
+ * stories (`packedUsage`), which a page reads.
+ *
+ * @param id - the module's id (`USAGE_ID_PREFIX`, then the group: `storyFilesGroupText`).
+ * @param watch - adds a file whose edit renews the module (each story file).
+ * @param usage - reads the facts in the docs worker.
+ * @param cache - the pattern's index kept between starts; none reads every file.
+ * @param pack - writes the module's JSON as its value: as it is on a dev server, in a gzipped file of a build's.
+ * @param isKept - whether a listed file may be read; every one by default.
+ */
+export const usageModule = async (id, watch, usage, cache, pack, isKept = EVERY_FILE) => {
+    const { files, graph } = await groupUsage(id.slice(USAGE_ID_PREFIX.length), watch, usage, cache, isKept);
+    const answer = typeof graph === "string"
+        ? { error: graph }
+        : packedUsage(joinedUsage(graph, files.map((file) => ({
+            storyFile: file.file,
+            title: file.index.title,
+            related: file.index.related ?? []
+        }))));
+    return { code: `export default ${pack(JSON.stringify(answer))};`, moduleType: "js" };
+};
+/**
+ * A group's reach module: the files each story reaches, which only the dev server's tools read (a check of what a
+ * change touches). A module of its own, since a large library's stories reach thousands of files each, which a page
+ * showing "Used in" must not download.
+ *
+ * @param id - the module's id (`REACH_ID_PREFIX`, then the group: `storyFilesGroupText`).
+ * @param watch - adds a file whose edit renews the module (each story file).
+ * @param usage - reads the facts in the docs worker.
+ * @param cache - the pattern's index kept between starts; none reads every file.
+ * @param isKept - whether a listed file may be read; every one by default.
+ */
+export const reachModule = async (id, watch, usage, cache, isKept = EVERY_FILE) => {
+    const { files, graph } = await groupUsage(id.slice(REACH_ID_PREFIX.length), watch, usage, cache, isKept);
+    const reach = typeof graph === "string"
+        ? []
+        : storyReach(graph, files.map((file) => ({ storyFile: file.file, title: file.index.title })));
+    return { code: `export default ${codeLiteral(reach)};`, moduleType: "js" };
+};
+/**
+ * A group's search index, when the id names one: its story files' (what their components' docs and pages say) or its
+ * docs pages'. The search's code, and the Markdown reader it needs, load with the first.
+ *
+ * @param id - the module's id.
+ * @param watch - adds a file whose edit renews the module.
+ * @param read - a story file's component docs, how the module writes its JSON, and which listed files may be read.
+ * @returns the index; none for another id.
+ */
+export const searchIndexModule = async (id, watch, read) => {
+    const isPages = id.startsWith(PAGES_SEARCH_ID_PREFIX);
+    if (!isPages && !id.startsWith(SEARCH_ID_PREFIX))
+        return undefined;
+    const { storySearchModule, pagesSearchModule } = await import("./searchModule.js");
+    const { root, patterns } = storyFilesGroupOf(id.slice((isPages ? PAGES_SEARCH_ID_PREFIX : SEARCH_ID_PREFIX).length));
+    const code = isPages
+        ? pagesSearchModule(root, patterns, watch, read.pack, read.isKept)
+        : await storySearchModule(root, patterns, watch, read.docsOf, read.isServing, read.pack, read.isKept);
+    return { module: { code, moduleType: "js" }, isPages };
+};
+/**
+ * The search's indexes of a plugin: a build reads each component's docs once, for its page and its index.
+ *
+ * @param read - reads a story file's component docs, says whether a dev server runs, keeps each index's id with the
+ * modules an edit renews (a docs pages' index with the docs pages'), and says which listed files may be read.
+ */
+export const searchIndexes = (read) => {
+    const built = new Map();
+    const docsOf = (storyFile) => {
+        if (read.isServing())
+            return read.extract(storyFile);
+        const docs = built.get(storyFile) ?? read.extract(storyFile);
+        built.set(storyFile, docs);
+        return docs;
+    };
+    return {
+        docsOf,
+        moduleOf: async (id, watch, pack) => {
+            const search = await searchIndexModule(id, watch, {
+                docsOf,
+                isServing: read.isServing(),
+                pack,
+                isKept: read.isKept
+            });
+            if (search === undefined)
+                return undefined;
+            read.track(id, search.isPages);
+            return search.module;
+        }
+    };
+};

package/dist/src/vite/prebundled.d.ts

@@ -1,3 +1,18 @@
+/**
+ * The packages Vite pre-bundles, and the story files it scans, before the catalogue's first page opens, so the pages
+ * never reload while they load.
+ *
+ * @remarks
+ * Vite finds what to pre-bundle by scanning the app's HTML and entries on disk; a catalogue's pages and their entries
+ * are generated (`pages.ts`), so without this list Vite discovers each package as a page imports it, pre-bundles it
+ * then, and reloads the page, more than once on a first start. The list is the shell's and the frame's packages (the
+ * shell is React), the framework's, Testing Library's when the project installs it, what the plugins name, and
+ * Forgebook's own modules and the plugins' when they come from an installed package (a linked one is source, which Vite
+ * does not pre-bundle). axe is not among them: the frame loads it as a script (`axeScript.ts`). A package the project
+ * cannot resolve is left out, since Vite fails on one it cannot find. Pure: a resolver in, names out.
+ *
+ * @module
+ */
 import { type ResolvedConfig } from "./configFile.ts";
 /**
  * Resolves a package as Node would from the catalogue's folder: its file's real path, or none when it is not there.
@@ -10,13 +25,12 @@ export type Resolve = (name: string) => string | undefined;
  *
  * @param config - the catalogue's configuration.
  * @param resolve - resolves a package from the catalogue's folder.
- * @param resolveOwn - resolves a package from the core's own folder.
  */
-export declare const prebundled: (config: ResolvedConfig, resolve: Resolve, resolveOwn: Resolve) => string[];
+export declare const prebundled: (config: ResolvedConfig, resolve: Resolve) => string[];
 /**
  * The story files Vite scans for what their components import, before the first page opens: the project's own
- * patterns, and each source's, read from its module's `?forgebook-files` imports (relative to the module). A source
- * the project cannot resolve, or read, adds none.
+ * patterns, each source's, read from its module's `?forgebook-files` imports (relative to the module), and the
+ * previews. A source the project cannot resolve, or read, adds none.
  *
  * @remarks
  * Without the sources' files, a package a source's stories import (`storybook/test`, a component's own dependency) is
@@ -27,4 +41,3 @@ export declare const prebundled: (config: ResolvedConfig, resolve: Resolve, reso
  * @param readText - reads a file's text; none when it cannot.
  */
 export declare const scannedEntries: (config: ResolvedConfig, resolve: Resolve, readText: (file: string) => string | undefined) => string[];
-//# sourceMappingURL=prebundled.d.ts.map

package/dist/src/vite/prebundled.js

@@ -6,14 +6,17 @@
  * Vite finds what to pre-bundle by scanning the app's HTML and entries on disk; a catalogue's pages and their entries
  * are generated (`pages.ts`), so without this list Vite discovers each package as a page imports it, pre-bundles it
  * then, and reloads the page, more than once on a first start. The list is the shell's and the frame's packages (the
- * shell is React), the framework's, Testing Library's when the project installs it, and Forgebook's own modules when
- * they come from an installed package (a linked one is source, which Vite does not pre-bundle). A package the project
+ * shell is React), the framework's, Testing Library's when the project installs it, what the plugins name, and
+ * Forgebook's own modules and the plugins' when they come from an installed package (a linked one is source, which Vite
+ * does not pre-bundle). axe is not among them: the frame loads it as a script (`axeScript.ts`). A package the project
  * cannot resolve is left out, since Vite fails on one it cannot find. Pure: a resolver in, names out.
  *
  * @module
  */
-import { dirname, join } from "node:path";
 import { PLAY_TOOLS_PACKAGES } from "./configFile.js";
+import { hasPluginViews, PLUGIN_HOSTS_MODULE, WRITTEN_HOME_MODULE } from "./pages.js";
+import { pluginModules } from "./pluginConfig.js";
+import { VITE_PATHS } from "./vitePaths.js";
 /** What the shell and the frame import in the browser from the project's packages (React is a peer of the core). */
 const CORE_BROWSER_DEPENDENCIES = [
     "react",
@@ -21,11 +24,6 @@ const CORE_BROWSER_DEPENDENCIES = [
     "react/jsx-dev-runtime",
     "react-dom/client"
 ];
-/**
- * What the frame imports in the browser from the core's own dependencies: named through the core, as
- * `forgebook > axe-core`, since a project need not be able to resolve them itself.
- */
-const CORE_OWN_DEPENDENCIES = ["axe-core"];
 /** Forgebook's modules the generated pages import, besides the framework's. */
 const PAGE_MODULES = ["forgebook/shell"];
 /** Whether a resolved file comes from an installed package rather than a linked one. */
@@ -35,30 +33,42 @@ const isInstalled = (file) => file.split(/[\\/]/).includes("node_modules");
  *
  * @param config - the catalogue's configuration.
  * @param resolve - resolves a package from the catalogue's folder.
- * @param resolveOwn - resolves a package from the core's own folder.
  */
-export const prebundled = (config, resolve, resolveOwn) => {
-    const pageModules = [...PAGE_MODULES, config.framework.pages.frame, config.framework.pages.code];
+export const prebundled = (config, resolve) => {
+    const pageModules = [
+        ...PAGE_MODULES,
+        // imported on first use, so the scanner never sees it: named, or the first home would wait for the optimizer
+        ...(config.home === undefined ? [] : [WRITTEN_HOME_MODULE]),
+        ...(hasPluginViews(config) ? [PLUGIN_HOSTS_MODULE] : []),
+        config.framework.pages.frame,
+        config.framework.pages.code,
+        ...pluginModules(config.plugins, config.framework.name)
+    ];
     const candidates = [
         ...CORE_BROWSER_DEPENDENCIES,
         ...(config.framework.browserDependencies ?? []),
         ...(config.hasPlayTools ? PLAY_TOOLS_PACKAGES : [])
     ];
+    // named without resolving them: a browser-only module (`msw/browser`) cannot be resolved by Node though it is installed
+    const pluginDependencies = config.plugins.flatMap((plugin) => plugin.browserDependencies ?? []);
     const installedPages = pageModules.filter((name) => {
         const file = resolve(name);
         return file !== undefined && isInstalled(file);
     });
-    const own = CORE_OWN_DEPENDENCIES.filter((name) => resolveOwn(name) !== undefined).map((name) => `forgebook > ${name}`);
     return [
-        ...new Set([...candidates.filter((name) => resolve(name) !== undefined), ...own, ...installedPages])
+        ...new Set([
+            ...candidates.filter((name) => resolve(name) !== undefined),
+            ...pluginDependencies,
+            ...installedPages
+        ])
     ];
 };
 /** A `?forgebook-files` import of a source module: its pattern, before the query. */
 const FILES_IMPORT = /["']([^"']+)\?forgebook-files["']/g;
 /**
  * The story files Vite scans for what their components import, before the first page opens: the project's own
- * patterns, and each source's, read from its module's `?forgebook-files` imports (relative to the module). A source
- * the project cannot resolve, or read, adds none.
+ * patterns, each source's, read from its module's `?forgebook-files` imports (relative to the module), and the
+ * previews. A source the project cannot resolve, or read, adds none.
  *
  * @remarks
  * Without the sources' files, a package a source's stories import (`storybook/test`, a component's own dependency) is
@@ -74,8 +84,9 @@ export const scannedEntries = (config, resolve, readText) => {
         const text = file === undefined ? undefined : readText(file);
         if (file === undefined || text === undefined)
             return [];
-        return [...text.matchAll(FILES_IMPORT)].flatMap((match) => match[1] === undefined ? [] : [join(dirname(file), match[1]).split("\\").join("/")]);
+        return [...text.matchAll(FILES_IMPORT)].flatMap((match) => match[1] === undefined ? [] : [VITE_PATHS.join(VITE_PATHS.dirname(file), match[1])]);
     });
-    return [...config.stories, ...fromSources];
+    // the previews too: what they import loads with the first story, and found then it reloads the page; the project's
+    // `!` patterns stay as they are, which Vite's scanner reads as fast-glob does, from the same folder
+    return [...config.stories, ...fromSources, ...config.previews];
 };
-//# sourceMappingURL=prebundled.js.map

package/dist/src/vite/previewPages.d.ts

@@ -0,0 +1,14 @@
+import { type PreviewViewOptions } from "../previewView.ts";
+/**
+ * The app's page, one HTML5 document.
+ *
+ * @param options - what its script is given.
+ */
+export declare const previewViewPage: (options: Omit<PreviewViewOptions, "loadingClass">) => string;
+/**
+ * The relay's page.
+ *
+ * @param frameAddress - the story's frame.
+ * @param title - the frame's name for a screen reader.
+ */
+export declare const previewRelayPage: (frameAddress: string, title: string) => string;

package/dist/src/vite/previewPages.js

@@ -0,0 +1,81 @@
+/**
+ * The two pages of a story's preview in a client that renders apps, as text: the app's own (`previewView.ts`), which the
+ * MCP server gives as a resource, and the relay (`previewRelay.ts`), which the dev server serves.
+ *
+ * @remarks
+ * Each page's script is the source of a typed function that takes no import, the way `page.evaluate` runs one, so it is
+ * checked as the rest of the code is and needs no bundling step: what Node runs and what `dist` holds both print as
+ * JavaScript. Loaded only when a preview is asked for.
+ *
+ * @module
+ */
+import { codeLiteral } from "../codeLiteral.js";
+import { previewRelay } from "../previewRelay.js";
+import { PREVIEW_ELEMENTS, previewView } from "../previewView.js";
+/** The class of a frame still loading. */
+const LOADING_CLASS = "loading";
+/** The app's look: the host's variables, with defaults for a host that gives none, in its appearance. */
+const VIEW_STYLE = `
+:root { color-scheme: light dark; }
+html, body { margin: 0; }
+body {
+  display: flex; flex-direction: column; min-height: 0;
+  color: var(--color-text-primary, CanvasText);
+  background: var(--color-background-primary, Canvas);
+  font: 14px/1.4 var(--font-sans, system-ui, sans-serif);
+}
+header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
+#${PREVIEW_ELEMENTS.title} { font-family: var(--font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
+#${PREVIEW_ELEMENTS.status} { margin: 0; padding: 8px 12px; color: var(--color-text-secondary, GrayText); }
+#${PREVIEW_ELEMENTS.open} {
+  flex: none; padding: 4px 10px; font: inherit; color: inherit; background: transparent;
+  border: 1px solid var(--color-border-primary, GrayText); border-radius: var(--border-radius-sm, 6px); cursor: pointer;
+}
+#${PREVIEW_ELEMENTS.open}:focus-visible { outline: 2px solid var(--color-ring-primary, Highlight); outline-offset: 2px; }
+#${PREVIEW_ELEMENTS.frame} { display: block; width: 100%; height: 240px; border: 0; }
+#${PREVIEW_ELEMENTS.picture} { display: block; max-width: 100%; height: auto; }
+.${LOADING_CLASS} { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
+[hidden] { display: none !important; }
+`;
+/**
+ * The app's page, one HTML5 document.
+ *
+ * @param options - what its script is given.
+ */
+export const previewViewPage = (options) => `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Forgebook</title>
+<style>${VIEW_STYLE}</style>
+</head>
+<body>
+<header>
+<span id="${PREVIEW_ELEMENTS.title}"></span>
+<button id="${PREVIEW_ELEMENTS.open}" type="button" hidden></button>
+</header>
+<p id="${PREVIEW_ELEMENTS.status}" role="status"></p>
+<iframe id="${PREVIEW_ELEMENTS.frame}" hidden></iframe>
+<img id="${PREVIEW_ELEMENTS.picture}" alt="" hidden>
+<script>(${previewView.toString()})(${codeLiteral({ ...options, loadingClass: LOADING_CLASS })}, ${codeLiteral(PREVIEW_ELEMENTS)});</script>
+</body>
+</html>
+`;
+/**
+ * The relay's page.
+ *
+ * @param frameAddress - the story's frame.
+ * @param title - the frame's name for a screen reader.
+ */
+export const previewRelayPage = (frameAddress, title) => `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Forgebook</title>
+<style>html, body { margin: 0; background: transparent; }</style>
+</head>
+<body>
+<script>(${previewRelay.toString()})(${codeLiteral(frameAddress)}, ${codeLiteral(title)});</script>
+</body>
+</html>
+`;

package/dist/src/vite/previewRoute.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The name of the dev server's preview page under its answers' path, apart from the page's code so that the plugin can
+ * know the route without loading it.
+ *
+ * @module
+ */
+/** The path of a story's preview page under `AGENT_API`. */
+export declare const PREVIEW_ROUTE = "preview";

package/dist/src/vite/previewRoute.js

@@ -0,0 +1,8 @@
+/**
+ * The name of the dev server's preview page under its answers' path, apart from the page's code so that the plugin can
+ * know the route without loading it.
+ *
+ * @module
+ */
+/** The path of a story's preview page under `AGENT_API`. */
+export const PREVIEW_ROUTE = "preview";