react-cosmos 6.0.0-canary.fdbaa56.0 → 6.0.0

package/README.md

@@ -1,7 +1,41 @@
 <p align="center">
-  <a href="https://reactcosmos.org"><img alt="Cosmos" width="150" height="150" src="https://raw.githubusercontent.com/react-cosmos/react-cosmos/main/cosmos.png"></a>
+  <a href="https://reactcosmos.org"><img alt="Cosmos" width="150" height="150" src="cosmos.png"></a>
+  <h1 align="center">React Cosmos</h1>
 </p>
 
-# React Cosmos
+<p align="center">
+  <a aria-label="npm version" href="https://www.npmjs.com/package/react-cosmos"><img src="https://img.shields.io/npm/v/react-cosmos/next.svg?style=flat&colorA=000000&colorB=000000" alt="" /></a>
+  <a aria-label="CI Status" href="https://github.com/react-cosmos/react-cosmos/actions/workflows/test.yml"><img src="https://img.shields.io/github/actions/workflow/status/react-cosmos/react-cosmos/test.yml?branch=main&style=flat&colorA=000000&colorB=000000" alt="" /></a>
+  <a aria-label="Codecov" href="https://app.codecov.io/gh/react-cosmos/react-cosmos"><img src="https://img.shields.io/codecov/c/github/react-cosmos/react-cosmos?colorA=000000&colorB=000000" alt="" /></a>
+  <a aria-label="Twitter" href="https://twitter.com/ReactCosmos"><img src="https://img.shields.io/badge/twitter-follow-%2300acee?colorA=000000&colorB=000000" alt="" /></a>
+  <a aria-label="Discord" href="https://discord.gg/3X95VgfnW5"><img src="https://img.shields.io/discord/620737684859781150?label=discord&logo=discord&logoColor=ffffff&colorA=000000&colorB=000000" alt="" /></a>
+  <a aria-label="PRs Welcome" href="https://github.com/react-cosmos/react-cosmos/blob/main/CONTRIBUTING.md#how-to-contribute"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?colorA=000000&colorB=000000" alt="" /></a>
+</p>
+
+## Getting Started
+
+Choose one of the [Getting Started](https://reactcosmos.org/docs/getting-started) guides to dive into React Cosmos.
+
+> Check out the [Next.js integration](https://reactcosmos.org/docs/getting-started/next) to get started with React Server Components.
+
+Visit [reactcosmos.org/docs](https://reactcosmos.org/docs) to view the full documentation.
+
+## Community
+
+To chat with other community members you can join the [React Cosmos Discord](https://discord.gg/3X95VgfnW5).
+
+You can also ask questions, voice ideas, and share your projects on [GitHub Discussions](https://github.com/react-cosmos/react-cosmos/discussions).
+
+Our [Code of Conduct](/CODE_OF_CONDUCT.md) applies to all React Cosmos community channels.
+
+## Contributing
+
+Please see our [CONTRIBUTING.md](/CONTRIBUTING.md).
+
+[Become a Sponsor](https://github.com/users/skidding/sponsorship) to support the ongoing development of React Cosmos.
+
+## Live Demo
+
+Visit [reactcosmos.org/demo/](https://reactcosmos.org/demo/) for a live demo of React Cosmos.
 
-Sandbox for developing and testing UI components in isolation.
+[![React Cosmos](/docs/public/demo.png)](https://reactcosmos.org/demo/)

package/config.schema.json

@@ -11,16 +11,16 @@
       "minLength": 1
     },
     "exportPath": {
-      "description": "Where to generate static exports on disk. [default: \"cosmos-export\"]",
+      "description": "Output directory for static exports. [default: \"cosmos-export\"]",
       "type": "string",
       "minLength": 1
     },
     "detectLocalPlugins": {
-      "description": "Automatically detect and load local plugins",
+      "description": "Automatically detect and load local plugins. [default: true]",
       "type": "boolean"
     },
     "disablePlugins": {
-      "description": "Disable plugins",
+      "description": "Disable plugins. [default: false]",
       "type": "boolean"
     },
     "staticPath": {
@@ -39,7 +39,7 @@
       "type": "string"
     },
     "fixturesDir": {
-      "description": "Name for directories that contain fixtures (eg. __fixtures__/example.jsx). [default: \"__fixtures__\"]",
+      "description": "Name for directories that contain fixture files (eg. __fixtures__/example.jsx). [default: \"__fixtures__\"]",
       "type": "string",
       "minLength": 1
     },
@@ -49,7 +49,7 @@
       "minLength": 1
     },
     "ignore": {
-      "description": "Patterns for ignoring fixture and decorator files (eg. [\"**/dist/**\"]]).",
+      "description": "Patterns for ignoring fixture and decorator files (eg. [\"**/dist/**\"]).",
       "type": "array",
       "items": { "type": "string", "minLength": 1 },
       "uniqueItems": true
@@ -93,17 +93,17 @@
       "additionalProperties": false,
       "properties": {
         "certPath": {
-          "description": "Path of a certificate file",
+          "description": "Path of a certificate file.",
           "type": "string"
         },
         "keyPath": {
-          "description": "Path of a certificate's key file",
+          "description": "Path of a certificate's key file.",
           "type": "string"
         }
       }
     },
     "httpProxy": {
-      "description": "Proxy some URLs to a different HTTP server (eg. an API backend dev server). Similar to devServer.proxy in webpack config.",
+      "description": "Proxy some URLs to a different HTTP server (eg. an API backend dev server).",
       "type": "object",
       "additionalProperties": true,
       "patternProperties": {
@@ -171,11 +171,11 @@
       "additionalProperties": false,
       "properties": {
         "configPath": {
-          "description": "Path to Vite config. Set to false to disable reading it from the default path. [default: \"vite.config.js\"]",
+          "description": "Path to Vite config. Set to false to disable reading it from the default path. [default: \"vite.config.js\" or \"vite.config.ts\"]",
           "anyOf": [{ "type": "string", "minLength": 1 }, { "enum": [false] }]
         },
         "indexPath": {
-          "description": "Path to index module (eg. \"src/my-index.tsx\"). [default: matches common index/main module paths]",
+          "description": "Path to index module (eg. \"src/my-index.tsx\"). [default: detects common index/main module paths]",
           "anyOf": [{ "type": "string", "minLength": 1 }, { "type": "null" }]
         },
         "port": {

package/dist/cjsMocks/requireModule.d.ts

@@ -0,0 +1,2 @@
+export declare function requireModule(moduleId: string): any;
+export declare function requireFrom(fromDirectory: string, moduleId: string): any;

package/dist/cjsMocks/requireModule.js

@@ -0,0 +1,7 @@
+// CJS mock for packages/react-cosmos/src/utils/requireModule.ts
+export function requireModule(moduleId) {
+    return require(moduleId);
+}
+export function requireFrom(fromDirectory, moduleId) {
+    return require(require.resolve(moduleId, { paths: [fromDirectory] }));
+}

package/dist/cjsMocks/resolve.d.ts

@@ -0,0 +1,2 @@
+export declare function resolve(moduleId: string): string;
+export declare function resolveFrom(fromDirectory: string, moduleId: string): string;

package/dist/cjsMocks/resolve.js

@@ -0,0 +1,7 @@
+// CJS mock for packages/react-cosmos/src/utils/resolve.ts
+export function resolve(moduleId) {
+    return require.resolve(moduleId);
+}
+export function resolveFrom(fromDirectory, moduleId) {
+    return require.resolve(moduleId, { paths: [fromDirectory] });
+}

package/dist/cjsMocks/staticPath.d.ts

@@ -0,0 +1 @@
+export declare function getStaticPath(relPath: string): string;

package/dist/cjsMocks/staticPath.js

@@ -0,0 +1,4 @@
+// CJS mock for packages/react-cosmos/src/shared/staticPath.ts
+export function getStaticPath(relPath) {
+    return require.resolve(`../static/${relPath}`);
+}

package/dist/client.d.ts

@@ -1 +1 @@
-export { Viewport, useSelect, useValue } from 'react-cosmos-renderer/client';
+export { FixtureContext, Viewport, useFixtureState, useSelect, useValue, } from 'react-cosmos-renderer/client';

package/dist/client.js

@@ -1 +1 @@
-export { Viewport, useSelect, useValue } from 'react-cosmos-renderer/client';
+export { FixtureContext, Viewport, useFixtureState, useSelect, useValue, } from 'react-cosmos-renderer/client';

package/dist/corePlugins/{openFile.d.ts → fixtureWatcherPlugin.d.ts}

@@ -1,2 +1,2 @@
 import { CosmosServerPlugin } from '../cosmosPlugin/types.js';
-export declare const openFileServerPlugin: CosmosServerPlugin;
+export declare const fixtureWatcherPlugin: CosmosServerPlugin;

package/dist/corePlugins/{exposeImports.js → fixtureWatcherPlugin.js}

@@ -1,27 +1,42 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
+import { pickRendererUrl, } from 'react-cosmos-core';
 import { getPlaygroundUrl } from '../shared/playgroundUrl.js';
+import { updateFixtureListCache } from '../shared/serverFixtureList.js';
+import { findUserModulePaths } from '../userModules/findUserModulePaths.js';
 import { startFixtureWatcher } from '../userModules/fixtureWatcher.js';
 import { generateUserImports } from '../userModules/generateUserImports.js';
 import { moduleExists } from '../utils/fs.js';
-export const exposeImportsServerPlugin = {
-    name: 'exposeImports',
+export const fixtureWatcherPlugin = {
+    name: 'fixtureWatcher',
     async devServer({ cosmosConfig, platform }) {
-        if (!shouldExposeImports(platform, cosmosConfig))
-            return;
-        await generateImportsFile(cosmosConfig);
+        const exposeImports = shouldExposeImports(platform, cosmosConfig);
+        if (exposeImports) {
+            const modulePaths = findUserModulePaths(cosmosConfig);
+            await generateImportsFile(cosmosConfig, 'dev', modulePaths);
+        }
         const watcher = await startFixtureWatcher(cosmosConfig, 'all', () => {
-            generateImportsFile(cosmosConfig);
+            const modulePaths = findUserModulePaths(cosmosConfig);
+            updateFixtureListCache(cosmosConfig.rootDir, modulePaths.fixturePaths);
+            if (exposeImports) {
+                generateImportsFile(cosmosConfig, 'dev', modulePaths);
+            }
         });
-        return () => {
-            watcher.close();
+        return async () => {
+            await watcher.close();
         };
     },
+    async export({ cosmosConfig }) {
+        if (shouldExposeImports('web', cosmosConfig)) {
+            const modulePaths = findUserModulePaths(cosmosConfig);
+            await generateImportsFile(cosmosConfig, 'export', modulePaths);
+        }
+    },
 };
 function shouldExposeImports(platform, cosmosConfig) {
     return platform === 'native' || Boolean(cosmosConfig.exposeImports);
 }
-async function generateImportsFile(cosmosConfig) {
+async function generateImportsFile(cosmosConfig, command, modulePaths) {
     const { exposeImports } = cosmosConfig;
     const filePath = typeof exposeImports === 'string'
         ? exposeImports
@@ -29,10 +44,11 @@ async function generateImportsFile(cosmosConfig) {
     const typeScript = /\.tsx?$/.test(filePath);
     const rendererConfig = {
         playgroundUrl: getPlaygroundUrl(cosmosConfig),
-        rendererUrl: cosmosConfig.rendererUrl,
+        rendererUrl: pickRendererUrl(cosmosConfig.rendererUrl, command),
     };
     const fileSource = generateUserImports({
         cosmosConfig,
+        modulePaths,
         rendererConfig,
         relativeToDir: path.dirname(filePath),
         typeScript,

package/dist/corePlugins/httpProxyPlugin.d.ts

@@ -0,0 +1,2 @@
+import { CosmosServerPlugin } from '../cosmosPlugin/types.js';
+export declare const httpProxyPlugin: CosmosServerPlugin;

package/dist/corePlugins/{httpProxy.js → httpProxyPlugin.js}

@@ -1,5 +1,5 @@
 import { createProxyMiddleware } from 'http-proxy-middleware';
-export const httpProxyServerPlugin = {
+export const httpProxyPlugin = {
     name: 'httpProxy',
     devServer({ cosmosConfig, platform, expressApp }) {
         if (platform !== 'web')

package/dist/corePlugins/index.js

@@ -1,12 +1,15 @@
-import { exposeImportsServerPlugin } from './exposeImports.js';
-import { httpProxyServerPlugin } from './httpProxy.js';
-import { openFileServerPlugin } from './openFile.js';
-import { pluginEndpointServerPlugin } from './pluginEndpoint.js';
-import { portRetryServerPlugin } from './portRetry.js';
+import { fixtureWatcherPlugin } from './fixtureWatcherPlugin.js';
+import { httpProxyPlugin } from './httpProxyPlugin.js';
+import { openFilePlugin } from './openFilePlugin.js';
+import { pluginEndpointPlugin } from './pluginEndpointPlugin.js';
+import { portRetryPlugin } from './portRetryPlugin.js';
 export const coreServerPlugins = [
-    portRetryServerPlugin,
-    exposeImportsServerPlugin,
-    httpProxyServerPlugin,
-    openFileServerPlugin,
-    pluginEndpointServerPlugin,
+    portRetryPlugin,
+    httpProxyPlugin,
+    openFilePlugin,
+    pluginEndpointPlugin,
 ];
+// Omit starting chokidar in Jest tests for performance reasons
+if (process.env.JEST_WORKER_ID === undefined) {
+    coreServerPlugins.push(fixtureWatcherPlugin);
+}

package/dist/corePlugins/openFilePlugin.d.ts

@@ -0,0 +1,2 @@
+import { CosmosServerPlugin } from '../cosmosPlugin/types.js';
+export declare const openFilePlugin: CosmosServerPlugin;

package/dist/corePlugins/{openFile.js → openFilePlugin.js}

@@ -2,7 +2,7 @@ import launchEditor from '@skidding/launch-editor';
 import fs from 'fs';
 import open from 'open';
 import path from 'path';
-export const openFileServerPlugin = {
+export const openFilePlugin = {
     name: 'openFile',
     devServer({ cosmosConfig, expressApp }) {
         expressApp.get('/_open', (req, res) => {

package/dist/corePlugins/pluginEndpointPlugin.d.ts

@@ -0,0 +1,2 @@
+import { CosmosServerPlugin } from '../cosmosPlugin/types.js';
+export declare const pluginEndpointPlugin: CosmosServerPlugin;

package/dist/corePlugins/{pluginEndpoint.js → pluginEndpointPlugin.js}

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import { resolveSilent } from '../utils/resolveSilent.js';
-export const pluginEndpointServerPlugin = {
+export const pluginEndpointPlugin = {
     name: 'pluginEndpoint',
     devServer({ expressApp }) {
         expressApp.get('/_plugin/*.js', (req, res) => {

package/dist/corePlugins/portRetryPlugin.d.ts

@@ -0,0 +1,2 @@
+import { CosmosServerPlugin } from '../cosmosPlugin/types.js';
+export declare const portRetryPlugin: CosmosServerPlugin;

package/dist/corePlugins/{portRetry.js → portRetryPlugin.js}

@@ -1,5 +1,5 @@
 import { findNextAvailablePort } from '../shared/findNextAvailablePort.js';
-export const portRetryServerPlugin = {
+export const portRetryPlugin = {
     name: 'portRetry',
     async config({ cosmosConfig, command }) {
         if (command === 'export') {

package/dist/devServer/expressApp.js

@@ -4,9 +4,8 @@ import { getStaticPath } from '../shared/staticPath.js';
 import { resolve } from '../utils/resolve.js';
 export async function createExpressApp(platform, cosmosConfig, pluginConfigs) {
     const app = express();
-    const playgroundHtml = await getDevPlaygroundHtml(platform, cosmosConfig, pluginConfigs);
-    app.get('/', (req, res) => {
-        res.send(playgroundHtml);
+    app.get('/', async (req, res) => {
+        res.send(await getDevPlaygroundHtml(platform, cosmosConfig, pluginConfigs));
     });
     app.get('/playground.bundle.js', (req, res) => {
         res.sendFile(resolve('react-cosmos-ui/dist/playground.bundle.js'));

package/dist/devServer/startDevServer.js

@@ -1,8 +1,8 @@
 import path from 'path';
-import { coreServerPlugins } from '../corePlugins/index.js';
 import { detectCosmosConfig, detectCosmosConfigPath, } from '../cosmosConfig/detectCosmosConfig.js';
 import { getPluginConfigs } from '../cosmosPlugin/pluginConfigs.js';
-import { importServerPlugins } from '../shared/importServerPlugins.js';
+import { applyServerConfigPlugins } from '../shared/applyServerConfigPlugins.js';
+import { getServerPlugins } from '../shared/getServerPlugins.js';
 import { logPluginInfo } from '../shared/logPluginInfo.js';
 import { serveStaticDir } from '../shared/staticServer.js';
 import { createExpressApp } from './expressApp.js';
@@ -19,23 +19,13 @@ export async function startDevServer(platform) {
         relativePaths: false,
     });
     logPluginInfo(pluginConfigs);
-    const userPlugins = await importServerPlugins(pluginConfigs, cosmosConfig.rootDir);
-    const plugins = [...coreServerPlugins, ...userPlugins];
-    for (const plugin of plugins) {
-        if (plugin.config) {
-            try {
-                cosmosConfig = await plugin.config({
-                    cosmosConfig,
-                    command: 'dev',
-                    platform,
-                });
-            }
-            catch (err) {
-                console.log(`[Cosmos][plugin:${plugin.name}] Config hook failed`);
-                throw err;
-            }
-        }
-    }
+    const serverPlugins = await getServerPlugins(pluginConfigs, cosmosConfig.rootDir);
+    cosmosConfig = await applyServerConfigPlugins({
+        cosmosConfig,
+        serverPlugins,
+        command: 'dev',
+        platform,
+    });
     const app = await createExpressApp(platform, cosmosConfig, pluginConfigs);
     const httpServer = await createHttpServer(cosmosConfig, app);
     const msgHandler = createMessageHandler(httpServer.server);
@@ -51,7 +41,7 @@ export async function startDevServer(platform) {
         msgHandler.close();
         await httpServer.stop();
     }
-    for (const plugin of plugins) {
+    for (const plugin of serverPlugins) {
         try {
             if (!plugin.devServer)
                 continue;
@@ -63,9 +53,9 @@ export async function startDevServer(platform) {
                 sendMessage: msgHandler.sendMessage,
             });
             if (typeof pluginReturn === 'function') {
-                pluginCleanupCallbacks.push(() => {
+                pluginCleanupCallbacks.push(async () => {
                     try {
-                        pluginReturn();
+                        await pluginReturn();
                     }
                     catch (err) {
                         // Log when a plugin fails to clean up, but continue to attempt

package/dist/export/generateExport.js

@@ -1,9 +1,9 @@
 import fs from 'fs/promises';
 import path from 'path';
-import { coreServerPlugins } from '../corePlugins/index.js';
 import { detectCosmosConfig } from '../cosmosConfig/detectCosmosConfig.js';
 import { getPluginConfigs } from '../cosmosPlugin/pluginConfigs.js';
-import { importServerPlugins } from '../shared/importServerPlugins.js';
+import { applyServerConfigPlugins } from '../shared/applyServerConfigPlugins.js';
+import { getServerPlugins } from '../shared/getServerPlugins.js';
 import { logPluginInfo } from '../shared/logPluginInfo.js';
 import { getExportPlaygroundHtml } from '../shared/playgroundHtml.js';
 import { getStaticPath } from '../shared/staticPath.js';
@@ -17,23 +17,13 @@ export async function generateExport() {
         relativePaths: true,
     });
     logPluginInfo(pluginConfigs);
-    const userPlugins = await importServerPlugins(pluginConfigs, cosmosConfig.rootDir);
-    const plugins = [...coreServerPlugins, ...userPlugins];
-    for (const plugin of plugins) {
-        if (plugin.config) {
-            try {
-                cosmosConfig = await plugin.config({
-                    cosmosConfig,
-                    command: 'export',
-                    platform: 'web',
-                });
-            }
-            catch (err) {
-                console.log(`[Cosmos][plugin:${plugin.name}] Config hook failed`);
-                throw err;
-            }
-        }
-    }
+    const serverPlugins = await getServerPlugins(pluginConfigs, cosmosConfig.rootDir);
+    cosmosConfig = await applyServerConfigPlugins({
+        cosmosConfig,
+        serverPlugins,
+        command: 'export',
+        platform: 'web',
+    });
     // Clear previous export (or other files at export path)
     const { exportPath } = cosmosConfig;
     await fs.rm(exportPath, { recursive: true, force: true });
@@ -41,7 +31,7 @@ export async function generateExport() {
     // Copy static assets first, so that the built index.html overrides the its
     // template file (in case the static assets are served from the root path)
     await copyStaticAssets(cosmosConfig);
-    for (const plugin of plugins) {
+    for (const plugin of serverPlugins) {
         if (!plugin.export)
             continue;
         try {

package/dist/getFixtures/getFixtures.d.ts

@@ -11,4 +11,8 @@ export type FixtureApi = {
     rendererUrl: string | null;
     treePath: string[];
 };
-export declare function getFixtures(cosmosConfig: CosmosConfig): FixtureApi[];
+type Options = {
+    rendererUrl?: string;
+};
+export declare function getFixtures(cosmosConfig: CosmosConfig, options?: Options): FixtureApi[];
+export {};

package/dist/getFixtures/getFixtures.js

@@ -1,21 +1,16 @@
+import { mapValues } from 'lodash-es';
 import path from 'path';
-import { buildPlaygroundQueryString, createFixtureTree, createRendererUrl, flattenFixtureTree, getFixtureFromExport, getFixtureListFromExports, getSortedDecoratorsForFixturePath, pickRendererUrl, } from 'react-cosmos-core';
+import { buildPlaygroundQueryString, createFixtureTree, createRendererUrl, flattenFixtureTree, getFixtureFromExport, getFixtureListFromExports, getSortedDecoratorsForFixturePath, } from 'react-cosmos-core';
 import { createFixtureNode, decorateFixture } from 'react-cosmos-renderer';
-import { importUserModules } from '../userModules/importUserModules.js';
-export function getFixtures(cosmosConfig) {
-    const { fixturesDir, fixtureFileSuffix, rootDir } = cosmosConfig;
-    const rendererUrl = pickRendererUrl(cosmosConfig.rendererUrl, 'dev');
-    const fixtureInfo = [];
+import { getPlaygroundUrl } from '../shared/playgroundUrl.js';
+import { importUserModules } from './importUserModules.js';
+export function getFixtures(cosmosConfig, options = {}) {
     const { fixtures, decorators } = importUserModules(cosmosConfig);
-    const fixtureList = getFixtureListFromExports(fixtures);
-    const fixtureTree = createFixtureTree({
-        fixtures: fixtureList,
-        fixturesDir,
-        fixtureFileSuffix,
-    });
-    const flatFixtureTree = flattenFixtureTree(fixtureTree);
-    flatFixtureTree.forEach(({ fileName, fixtureId, name, parents }) => {
-        const fixtureExport = fixtures[fixtureId.path];
+    const fixtureExports = mapValues(fixtures, f => f.default);
+    const decoratorExports = mapValues(decorators, f => f.default);
+    const result = [];
+    getFlatFixtureTree(cosmosConfig, fixtureExports).forEach(({ fileName, fixtureId, name, parents }) => {
+        const fixtureExport = fixtures[fixtureId.path].default;
         const fixture = getFixtureFromExport(fixtureExport, fixtureId.name);
         if (!fixture) {
             throw new Error(`Could not read fixture: ${JSON.stringify(fixtureId)}`);
@@ -23,27 +18,34 @@ export function getFixtures(cosmosConfig) {
         const treePath = [...parents, fileName];
         if (name)
             treePath.push(name);
-        fixtureInfo.push({
-            absoluteFilePath: path.join(rootDir, fixtureId.path),
+        result.push({
+            absoluteFilePath: path.join(cosmosConfig.rootDir, fixtureId.path),
             fileName,
-            getElement: createFixtureElementGetter(fixture, fixtureId.path, decorators),
+            getElement: createFixtureElementGetter(fixture, fixtureId.path, decoratorExports),
             name,
             parents,
-            playgroundUrl: getPlaygroundUrl(cosmosConfig, fixtureId),
+            playgroundUrl: getPlaygroundFixtureUrl(cosmosConfig, fixtureId),
             relativeFilePath: fixtureId.path,
-            rendererUrl: rendererUrl && createRendererUrl(rendererUrl, fixtureId),
+            rendererUrl: options.rendererUrl
+                ? createRendererUrl(options.rendererUrl, fixtureId)
+                : null,
             treePath,
         });
     });
-    return fixtureInfo;
+    return result;
 }
-function getPlaygroundUrl(cosmosConfig, fixtureId) {
-    const host = getPlaygroundHost(cosmosConfig);
-    const query = buildPlaygroundQueryString({ fixtureId });
-    return `${host}/${query}`;
+function getFlatFixtureTree(cosmosConfig, fixtures) {
+    const { fixturesDir, fixtureFileSuffix } = cosmosConfig;
+    return flattenFixtureTree(createFixtureTree({
+        fixtures: getFixtureListFromExports(fixtures),
+        fixturesDir,
+        fixtureFileSuffix,
+    }));
 }
-function getPlaygroundHost({ hostname, port, https }) {
-    return `${https ? 'https' : 'http'}://${hostname || 'localhost'}:${port}`;
+function getPlaygroundFixtureUrl(cosmosConfig, fixtureId) {
+    const baseUrl = getPlaygroundUrl(cosmosConfig);
+    const query = buildPlaygroundQueryString({ fixtureId });
+    return `${baseUrl}/${query}`;
 }
 function createFixtureElementGetter(fixture, fixturePath, decoratorsByPath) {
     const decorators = getSortedDecoratorsForFixturePath(fixturePath, decoratorsByPath);

package/dist/{userModules → getFixtures}/importUserModules.d.ts

@@ -1,8 +1,8 @@
-import { ByPath, ReactDecorator, ReactFixtureExport } from 'react-cosmos-core';
+import { ByPath, ReactDecoratorModule, ReactFixtureModule } from 'react-cosmos-core';
 import { CosmosConfig } from '../cosmosConfig/types.js';
 type UserModules = {
-    fixtures: ByPath<ReactFixtureExport>;
-    decorators: ByPath<ReactDecorator>;
+    fixtures: ByPath<ReactFixtureModule>;
+    decorators: ByPath<ReactDecoratorModule>;
 };
 export declare function importUserModules({ rootDir, fixturesDir, fixtureFileSuffix, ignore, }: CosmosConfig): UserModules;
 export {};

package/dist/{userModules → getFixtures}/importUserModules.js

@@ -1,6 +1,6 @@
 import path from 'path';
+import { findUserModulePaths } from '../userModules/findUserModulePaths.js';
 import { slash } from '../utils/slash.js';
-import { findUserModulePaths } from './findUserModulePaths.js';
 export function importUserModules({ rootDir, fixturesDir, fixtureFileSuffix, ignore, }) {
     const { fixturePaths, decoratorPaths } = findUserModulePaths({
         rootDir,
@@ -9,18 +9,20 @@ export function importUserModules({ rootDir, fixturesDir, fixtureFileSuffix, ign
         ignore,
     });
     return {
-        fixtures: getDefaultExports(fixturePaths, rootDir),
-        decorators: getDefaultExports(decoratorPaths, rootDir),
+        fixtures: importModules(fixturePaths, rootDir),
+        decorators: importModules(decoratorPaths, rootDir),
     };
 }
-function getDefaultExports(paths, rootDir) {
-    const exportsByPath = {};
-    paths.forEach(p => {
+function importModules(paths, rootDir) {
+    const modules = paths.map(p => {
         // Converting to forward slashes on Windows is important because the
         // slashes are used for generating a sorted list of fixtures and
         // decorators.
         const relPath = slash(path.relative(rootDir, p));
-        exportsByPath[relPath] = require(p).default;
+        return { relPath, module: require(p) };
     });
-    return exportsByPath;
+    return modules.reduce((acc, { relPath, module }) => ({
+        ...acc,
+        [relPath]: module,
+    }), {});
 }

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './shared/findNextAvailablePort.js';
 export * from './shared/playgroundUrl.js';
 export * from './shared/staticServer.js';
 export * from './testHelpers/cwd.js';
+export * from './userModules/findUserModulePaths.js';
 export * from './userModules/fixtureWatcher.js';
 export * from './userModules/generateUserImports.js';
 export * from './utils/cli.js';
@@ -18,3 +19,4 @@ export * from './utils/requireSilent.js';
 export * from './utils/resolve.js';
 export * from './utils/resolveLoose.js';
 export * from './utils/resolveSilent.js';
+export * from './utils/slash.js';

package/dist/index.js

@@ -10,6 +10,7 @@ export * from './shared/findNextAvailablePort.js';
 export * from './shared/playgroundUrl.js';
 export * from './shared/staticServer.js';
 export * from './testHelpers/cwd.js';
+export * from './userModules/findUserModulePaths.js';
 export * from './userModules/fixtureWatcher.js';
 export * from './userModules/generateUserImports.js';
 export * from './utils/cli.js';
@@ -18,3 +19,4 @@ export * from './utils/requireSilent.js';
 export * from './utils/resolve.js';
 export * from './utils/resolveLoose.js';
 export * from './utils/resolveSilent.js';
+export * from './utils/slash.js';

package/dist/jest.d.ts

@@ -1,7 +1,4 @@
 export * from './testHelpers/mockConsole.js';
-export * from './testHelpers/mockEsmRequire.js';
-export * from './testHelpers/mockEsmResolve.js';
-export * from './testHelpers/mockEsmStaticPath.js';
 export * from './testHelpers/mockFetch.js';
 export * from './testHelpers/mockFs.js';
 export * from './testHelpers/mockYargs.js';

package/dist/jest.js

@@ -1,7 +1,4 @@
 export * from './testHelpers/mockConsole.js';
-export * from './testHelpers/mockEsmRequire.js';
-export * from './testHelpers/mockEsmResolve.js';
-export * from './testHelpers/mockEsmStaticPath.js';
 export * from './testHelpers/mockFetch.js';
 export * from './testHelpers/mockFs.js';
 export * from './testHelpers/mockYargs.js';

package/dist/shared/applyServerConfigPlugins.d.ts

@@ -0,0 +1,11 @@
+import { CosmosCommand } from 'react-cosmos-core';
+import { CosmosConfig } from '../cosmosConfig/types.js';
+import { CosmosPlatform, CosmosServerPlugin } from '../cosmosPlugin/types.js';
+type Args = {
+    cosmosConfig: CosmosConfig;
+    serverPlugins: CosmosServerPlugin[];
+    command: CosmosCommand;
+    platform: CosmosPlatform;
+};
+export declare function applyServerConfigPlugins({ cosmosConfig, serverPlugins, command, platform, }: Args): Promise<CosmosConfig>;
+export {};

package/dist/shared/applyServerConfigPlugins.js

@@ -0,0 +1,14 @@
+export async function applyServerConfigPlugins({ cosmosConfig, serverPlugins, command, platform, }) {
+    for (const plugin of serverPlugins) {
+        if (plugin.config) {
+            try {
+                cosmosConfig = await plugin.config({ cosmosConfig, command, platform });
+            }
+            catch (err) {
+                console.log(`[Cosmos][plugin:${plugin.name}] Config hook failed`);
+                throw err;
+            }
+        }
+    }
+    return cosmosConfig;
+}

package/dist/shared/getServerPlugins.d.ts

@@ -0,0 +1,2 @@
+import { CosmosPluginConfig } from 'react-cosmos-core';
+export declare function getServerPlugins(pluginConfigs: CosmosPluginConfig[], rootDir: string): Promise<import("../index.js").CosmosServerPlugin[]>;

package/dist/shared/getServerPlugins.js

@@ -0,0 +1,6 @@
+import { coreServerPlugins } from '../corePlugins/index.js';
+import { importServerPlugins } from './importServerPlugins.js';
+export async function getServerPlugins(pluginConfigs, rootDir) {
+    const userPlugins = await importServerPlugins(pluginConfigs, rootDir);
+    return [...coreServerPlugins, ...userPlugins];
+}

package/dist/shared/playgroundHtml.js

@@ -1,10 +1,9 @@
 import fs from 'fs';
 import { readFile } from 'fs/promises';
 import path from 'path';
-import { pkgUpSync } from 'pkg-up';
 import { pickRendererUrl, replaceKeys, } from 'react-cosmos-core';
-import { findUserModulePaths } from '../userModules/findUserModulePaths.js';
-import { importKeyPath } from '../userModules/shared.js';
+import { findUp } from '../utils/findUp.js';
+import { getServerFixtureList } from './serverFixtureList.js';
 import { getStaticPath } from './staticPath.js';
 export async function getDevPlaygroundHtml(platform, cosmosConfig, pluginConfigs) {
     const { ui } = cosmosConfig;
@@ -13,7 +12,7 @@ export async function getDevPlaygroundHtml(platform, cosmosConfig, pluginConfigs
             ...ui,
             core: await getCoreConfig(cosmosConfig, true),
             rendererCore: {
-                fixtures: getFixtureList(cosmosConfig),
+                fixtures: getServerFixtureList(cosmosConfig),
                 rendererUrl: platform === 'web'
                     ? pickRendererUrl(cosmosConfig.rendererUrl, 'dev')
                     : null,
@@ -29,7 +28,7 @@ export async function getExportPlaygroundHtml(cosmosConfig, pluginConfigs) {
             ...ui,
             core: await getCoreConfig(cosmosConfig, false),
             rendererCore: {
-                fixtures: getFixtureList(cosmosConfig),
+                fixtures: getServerFixtureList(cosmosConfig),
                 rendererUrl: pickRendererUrl(cosmosConfig.rendererUrl, 'export'),
             },
         },
@@ -46,7 +45,7 @@ async function getCoreConfig(cosmosConfig, devServerOn) {
     };
 }
 async function getProjectId(rootDir) {
-    const pkgPath = pkgUpSync({ cwd: rootDir });
+    const pkgPath = await findUp('package.json', rootDir);
     if (!pkgPath) {
         return rootDir.split(path.sep).pop();
     }
@@ -68,10 +67,3 @@ function getPlaygroundHtml(playgroundArgs) {
 function getPlaygroundHtmlTemplate() {
     return fs.readFileSync(getStaticPath('index.html'), 'utf8');
 }
-function getFixtureList(cosmosConfig) {
-    const { fixturePaths } = findUserModulePaths(cosmosConfig);
-    return fixturePaths.reduce((acc, fixturePath) => ({
-        ...acc,
-        [importKeyPath(fixturePath, cosmosConfig.rootDir)]: { type: 'single' },
-    }), {});
-}

package/dist/shared/serverFixtureList.d.ts

@@ -0,0 +1,4 @@
+import { FixtureList } from 'react-cosmos-core';
+import { CosmosConfig } from '../cosmosConfig/types.js';
+export declare function getServerFixtureList(cosmosConfig: CosmosConfig): FixtureList;
+export declare function updateFixtureListCache(rootDir: string, fixturePaths: string[]): void;

package/dist/shared/serverFixtureList.js

@@ -0,0 +1,19 @@
+import { findUserModulePaths } from '../userModules/findUserModulePaths.js';
+import { importKeyPath } from '../userModules/shared.js';
+let fixtureListCache = null;
+export function getServerFixtureList(cosmosConfig) {
+    if (!fixtureListCache) {
+        const { fixturePaths } = findUserModulePaths(cosmosConfig);
+        fixtureListCache = createFixtureList(cosmosConfig.rootDir, fixturePaths);
+    }
+    return fixtureListCache;
+}
+export function updateFixtureListCache(rootDir, fixturePaths) {
+    fixtureListCache = createFixtureList(rootDir, fixturePaths);
+}
+function createFixtureList(rootDir, fixturePaths) {
+    return fixturePaths.reduce((acc, fixturePath) => ({
+        ...acc,
+        [importKeyPath(fixturePath, rootDir)]: { type: 'single' },
+    }), {});
+}

package/dist/userModules/findUserModulePaths.d.ts

@@ -1,12 +1,9 @@
+import { UserModulePaths } from './shared.js';
 type FindUserModulePathsArgs = {
     rootDir: string;
     fixturesDir: string;
     fixtureFileSuffix: string;
     ignore: string[];
 };
-type UserModulePaths = {
-    fixturePaths: string[];
-    decoratorPaths: string[];
-};
 export declare function findUserModulePaths({ rootDir, fixturesDir, fixtureFileSuffix, ignore, }: FindUserModulePathsArgs): UserModulePaths;
 export {};

package/dist/userModules/findUserModulePaths.js

@@ -1,6 +1,6 @@
 import { globSync } from 'glob';
 import micromatch from 'micromatch';
-import { getDecoratorPatterns, getFixturePatterns } from './shared.js';
+import { getDecoratorPatterns, getFixturePatterns, } from './shared.js';
 export function findUserModulePaths({ rootDir, fixturesDir, fixtureFileSuffix, ignore, }) {
     const paths = globSync('**/*', {
         cwd: rootDir,

package/dist/userModules/generateUserImports.d.ts

@@ -1,10 +1,12 @@
 import { RendererConfig } from 'react-cosmos-core';
 import { CosmosConfig } from '../cosmosConfig/types.js';
+import { UserModulePaths } from './shared.js';
 type Args<T extends RendererConfig> = {
     cosmosConfig: CosmosConfig;
+    modulePaths: UserModulePaths;
     rendererConfig: T;
     relativeToDir: string | null;
     typeScript: boolean;
 };
-export declare function generateUserImports<T extends RendererConfig>({ cosmosConfig, rendererConfig, relativeToDir, typeScript, }: Args<T>): string;
+export declare function generateUserImports<T extends RendererConfig>({ cosmosConfig, modulePaths, rendererConfig, relativeToDir, typeScript, }: Args<T>): string;
 export {};

package/dist/userModules/generateUserImports.js

@@ -1,23 +1,15 @@
-import { findUserModulePaths } from './findUserModulePaths.js';
 import { userImportsLazyTemplate } from './userImportsLazyTemplate.js';
 import { userImportsTemplate } from './userImportsTemplate.js';
-export function generateUserImports({ cosmosConfig, rendererConfig, relativeToDir, typeScript, }) {
-    const { rootDir, fixturesDir, fixtureFileSuffix, globalImports, ignore } = cosmosConfig;
-    const { fixturePaths, decoratorPaths } = findUserModulePaths({
-        rootDir,
-        fixturesDir,
-        fixtureFileSuffix,
-        ignore,
-    });
+export function generateUserImports({ cosmosConfig, modulePaths, rendererConfig, relativeToDir, typeScript, }) {
+    const { rootDir, globalImports } = cosmosConfig;
     const template = cosmosConfig.lazy
         ? userImportsLazyTemplate
         : userImportsTemplate;
     return template({
+        rootDir,
+        modulePaths,
         globalImports,
-        fixturePaths,
-        decoratorPaths,
         rendererConfig,
-        rootDir,
         relativeToDir,
         typeScript,
     });

package/dist/userModules/shared.d.ts

@@ -1,10 +1,13 @@
 import { RendererConfig } from 'react-cosmos-core';
-export type UserImportsTemplateArgs = {
-    globalImports: string[];
+export type UserModulePaths = {
     fixturePaths: string[];
     decoratorPaths: string[];
-    rendererConfig: RendererConfig;
+};
+export type UserImportsTemplateArgs = {
     rootDir: string;
+    modulePaths: UserModulePaths;
+    globalImports: string[];
+    rendererConfig: RendererConfig;
     relativeToDir: string | null;
     typeScript: boolean;
 };

package/dist/userModules/shared.js

@@ -1,10 +1,10 @@
 import path from 'path';
 import { replaceKeys } from 'react-cosmos-core';
 import { slash } from '../utils/slash.js';
-// NODE: These can be made configurable if a proper need arises
+// NOTE: These can be made configurable if a proper need arises
 const FIXTURE_PATTERNS = [
-    '**/<fixturesDir>/**/*.{js,jsx,ts,tsx}',
-    '**/*.<fixtureFileSuffix>.{js,jsx,ts,tsx}',
+    '**/<fixturesDir>/**/*.{js,jsx,ts,tsx,md,mdx}',
+    '**/{*.,}<fixtureFileSuffix>.{js,jsx,ts,tsx,md,mdx}',
 ];
 const DECORATOR_PATTERNS = ['**/cosmos.decorator.{js,jsx,ts,tsx}'];
 export function getFixturePatterns(fixturesDir, fixtureFileSuffix) {

package/dist/userModules/userImportsLazyTemplate.d.ts

@@ -1,2 +1,2 @@
 import { UserImportsTemplateArgs } from './shared.js';
-export declare function userImportsLazyTemplate({ globalImports, fixturePaths, decoratorPaths, rendererConfig, rootDir, relativeToDir, typeScript, }: UserImportsTemplateArgs): string;
+export declare function userImportsLazyTemplate({ globalImports, modulePaths: { fixturePaths, decoratorPaths }, rendererConfig, rootDir, relativeToDir, typeScript, }: UserImportsTemplateArgs): string;

package/dist/userModules/userImportsLazyTemplate.js

@@ -1,6 +1,6 @@
 import { flatten } from 'lodash-es';
 import { createImportMap, importPath, } from './shared.js';
-export function userImportsLazyTemplate({ globalImports, fixturePaths, decoratorPaths, rendererConfig, rootDir, relativeToDir, typeScript, }) {
+export function userImportsLazyTemplate({ globalImports, modulePaths: { fixturePaths, decoratorPaths }, rendererConfig, rootDir, relativeToDir, typeScript, }) {
     function ext(filePath) {
         // Add compat with projects where allowImportingTsExtensions isn't enabled
         return typeScript ? filePath.replace(/\.tsx?$/, '') : filePath;

package/dist/userModules/userImportsTemplate.d.ts

@@ -1,2 +1,2 @@
 import { UserImportsTemplateArgs } from './shared.js';
-export declare function userImportsTemplate({ globalImports, fixturePaths, decoratorPaths, rendererConfig, rootDir, relativeToDir, typeScript, }: UserImportsTemplateArgs): string;
+export declare function userImportsTemplate({ globalImports, modulePaths: { fixturePaths, decoratorPaths }, rendererConfig, rootDir, relativeToDir, typeScript, }: UserImportsTemplateArgs): string;

package/dist/userModules/userImportsTemplate.js

@@ -1,6 +1,6 @@
 import { flatten } from 'lodash-es';
 import { createImportMap, importPath, } from './shared.js';
-export function userImportsTemplate({ globalImports, fixturePaths, decoratorPaths, rendererConfig, rootDir, relativeToDir, typeScript, }) {
+export function userImportsTemplate({ globalImports, modulePaths: { fixturePaths, decoratorPaths }, rendererConfig, rootDir, relativeToDir, typeScript, }) {
     function ext(filePath) {
         // Add compat with projects where allowImportingTsExtensions isn't enabled
         return typeScript ? filePath.replace(/\.tsx?$/, '') : filePath;

package/dist/utils/findUp.d.ts

@@ -0,0 +1 @@
+export declare function findUp(fileName: string, fromDir: string): Promise<string | null>;

package/dist/utils/findUp.js

@@ -0,0 +1,19 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+// Code inspired from https://github.com/sindresorhus/find-up-simple/
+export async function findUp(fileName, fromDir) {
+    const { root: rootDir } = path.parse(fromDir);
+    let currentDir = fromDir;
+    while (currentDir && currentDir !== rootDir) {
+        const filePath = path.join(currentDir, fileName);
+        try {
+            const stats = await fs.stat(filePath);
+            if (stats.isFile()) {
+                return filePath;
+            }
+        }
+        catch { }
+        currentDir = path.dirname(currentDir);
+    }
+    return null;
+}

package/jest.js

@@ -1 +1 @@
-module.exports = require('./dist/jest.js');
+export * from './dist/jest.js';

package/package.json

@@ -1,32 +1,31 @@
 {
   "name": "react-cosmos",
-  "version": "6.0.0-canary.fdbaa56.0+fdbaa56",
+  "version": "6.0.0",
   "description": "Sandbox for developing and testing UI components in isolation",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos",
   "license": "MIT",
   "type": "module",
   "main": "./index.js",
   "dependencies": {
-    "@skidding/launch-editor": "^2.2.3",
-    "chokidar": "^3.5.3",
-    "express": "^4.18.2",
-    "glob": "^10.2.2",
-    "http-proxy-middleware": "^2.0.6",
-    "lodash-es": "^4.17.21",
-    "micromatch": "^4.0.5",
-    "open": "^8.4.2",
-    "pem": "^1.14.7",
-    "pkg-up": "^4.0.0",
-    "react-cosmos-core": "6.0.0-canary.fdbaa56.0+fdbaa56",
-    "react-cosmos-renderer": "6.0.0-canary.fdbaa56.0+fdbaa56",
-    "react-cosmos-ui": "6.0.0-canary.fdbaa56.0+fdbaa56",
-    "ws": "^8.13.0",
-    "yargs": "^17.7.2"
+    "@skidding/launch-editor": "2.2.3",
+    "chokidar": "3.5.3",
+    "express": "4.18.2",
+    "glob": "10.3.10",
+    "http-proxy-middleware": "2.0.6",
+    "lodash-es": "4.17.21",
+    "micromatch": "4.0.5",
+    "open": "8.4.2",
+    "pem": "1.14.8",
+    "react-cosmos-core": "^6.0.0",
+    "react-cosmos-renderer": "^6.0.0",
+    "react-cosmos-ui": "^6.0.0",
+    "ws": "8.16.0",
+    "yargs": "17.7.2"
   },
   "bin": {
     "cosmos": "./bin/cosmos.js",
     "cosmos-export": "./bin/cosmos-export.js",
     "cosmos-native": "./bin/cosmos-native.js"
   },
-  "gitHead": "fdbaa565382e2685f7ac21aecec25f2d78c7b8ab"
+  "gitHead": "db4fd8fd917598f1f16d4c291be76217436422ee"
 }

package/dist/corePlugins/exposeImports.d.ts

@@ -1,2 +0,0 @@
-import { CosmosServerPlugin } from '../cosmosPlugin/types.js';
-export declare const exposeImportsServerPlugin: CosmosServerPlugin;

package/dist/corePlugins/httpProxy.d.ts

@@ -1,2 +0,0 @@
-import { CosmosServerPlugin } from '../cosmosPlugin/types.js';
-export declare const httpProxyServerPlugin: CosmosServerPlugin;

package/dist/corePlugins/pluginEndpoint.d.ts

@@ -1,2 +0,0 @@
-import { CosmosServerPlugin } from '../cosmosPlugin/types.js';
-export declare const pluginEndpointServerPlugin: CosmosServerPlugin;

package/dist/corePlugins/portRetry.d.ts

@@ -1,2 +0,0 @@
-import { CosmosServerPlugin } from '../cosmosPlugin/types.js';
-export declare const portRetryServerPlugin: CosmosServerPlugin;

package/dist/testHelpers/mockEsmRequire.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/testHelpers/mockEsmRequire.js

@@ -1,13 +0,0 @@
-jest.mock('../utils/requireModule.js', () => {
-    function requireModule(moduleId) {
-        return require(moduleId);
-    }
-    function requireFrom(fromDirectory, moduleId) {
-        return require(require.resolve(moduleId, { paths: [fromDirectory] }));
-    }
-    return {
-        requireModule,
-        requireFrom,
-    };
-});
-export {};

package/dist/testHelpers/mockEsmResolve.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/testHelpers/mockEsmResolve.js

@@ -1,13 +0,0 @@
-jest.mock('../utils/resolve.js', () => {
-    function resolve(moduleId) {
-        return require.resolve(moduleId);
-    }
-    function resolveFrom(fromDirectory, moduleId) {
-        return require.resolve(moduleId, { paths: [fromDirectory] });
-    }
-    return {
-        resolve,
-        resolveFrom,
-    };
-});
-export {};

package/dist/testHelpers/mockEsmStaticPath.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/testHelpers/mockEsmStaticPath.js

@@ -1,7 +0,0 @@
-jest.mock('../shared/staticPath.js', () => {
-    function getStaticPath(relPath) {
-        return require.resolve(`../static/${relPath}`);
-    }
-    return { getStaticPath };
-});
-export {};