react-cosmos 6.0.0-alpha.9 → 6.0.0-canary.0d1dbd5.0

package/config.schema.json

@@ -78,6 +78,10 @@
       "description": "Dev server port. [default: 5000]",
       "type": "number"
     },
+    "portRetries": {
+      "description": "Max number of port retries. [default: 10]",
+      "type": "number"
+    },
     "https": {
       "description": "Server will be served over HTTPS",
       "type": "boolean"

package/dist/server/corePlugins/httpProxy.d.ts

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

package/dist/server/corePlugins/httpProxy.js

@@ -0,0 +1,21 @@
+import { createProxyMiddleware } from 'http-proxy-middleware';
+export const httpProxyServerPlugin = {
+    name: 'httpProxy',
+    devServer({ platformType, cosmosConfig, expressApp }) {
+        if (platformType !== 'web')
+            return;
+        const httpProxyConfig = getHttpProxyCosmosConfig(cosmosConfig);
+        Object.keys(httpProxyConfig).forEach(context => {
+            const config = httpProxyConfig[context];
+            if (typeof config === 'string') {
+                expressApp.use(context, createProxyMiddleware(context, { target: config }));
+            }
+            else if (typeof config === 'object') {
+                expressApp.use(context, createProxyMiddleware(context, config));
+            }
+        });
+    },
+};
+function getHttpProxyCosmosConfig(cosmosConfig) {
+    return (cosmosConfig.httpProxy || {});
+}

package/dist/server/corePlugins/index.d.ts

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

package/dist/server/corePlugins/index.js

@@ -0,0 +1,12 @@
+import { httpProxyServerPlugin } from './httpProxy.js';
+import { openFileServerPlugin } from './openFile.js';
+import { pluginEndpointServerPlugin } from './pluginEndpoint.js';
+import { portRetryServerPlugin } from './portRetry.js';
+import { userDepsFileServerPlugin } from './userDepsFile.js';
+export const coreServerPlugins = [
+    portRetryServerPlugin,
+    userDepsFileServerPlugin,
+    httpProxyServerPlugin,
+    openFileServerPlugin,
+    pluginEndpointServerPlugin,
+];

package/dist/server/corePlugins/openFile.d.ts

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

package/dist/server/corePlugins/openFile.js

@@ -0,0 +1,56 @@
+import launchEditor from '@skidding/launch-editor';
+import fs from 'fs';
+import open from 'open';
+import path from 'path';
+export const openFileServerPlugin = {
+    name: 'openFile',
+    devServer({ cosmosConfig, expressApp }) {
+        expressApp.get('/_open', (req, res) => {
+            const { filePath, line, column } = getReqQuery(req);
+            if (!filePath) {
+                res.status(400).send(`File path missing`);
+                return;
+            }
+            const absFilePath = resolveFilePath(cosmosConfig.rootDir, filePath);
+            if (!fs.existsSync(absFilePath)) {
+                res.status(404).send(`File not found at path: ${absFilePath}`);
+                return;
+            }
+            new Promise((resolve, reject) => {
+                const file = `${absFilePath}:${line}:${column}`;
+                launchEditor(file, (fileName, errorMsg) => reject(errorMsg));
+                // If launchEditor doesn't report error within 500ms we assume it worked
+                setTimeout(resolve, 500);
+            })
+                // Fall back to open in case launchEditor fails. launchEditor only works
+                // when the editor app is already open, but is favorable because it can
+                // open a code file on a specific line & column.
+                .catch(err => open(absFilePath))
+                .catch(err => res.status(500).send('Failed to open file'))
+                .then(() => res.send());
+        });
+    },
+};
+function getReqQuery(req) {
+    const { filePath, line, column } = req.query;
+    if (typeof filePath !== 'string')
+        throw new Error('filePath missing');
+    return {
+        filePath,
+        line: typeof line === 'string' ? parseInt(line, 10) : 1,
+        column: typeof column === 'string' ? parseInt(column, 10) : 1,
+    };
+}
+function resolveFilePath(rootDir, filePath) {
+    // This heuristic is needed because the open file endpoint is used for
+    // multiple applications, which provide different file path types:
+    // 1. Edit fixture button: Sends path relative to Cosmos rootDir
+    // 2. react-error-overlay runtime error: Sends absolute path
+    // 3. react-error-overlay compile error: Sends path relative to CWD
+    if (path.isAbsolute(filePath)) {
+        return filePath;
+    }
+    const cosmosRelPath = path.join(rootDir, filePath);
+    const cwdRelPath = path.join(process.cwd(), filePath);
+    return fs.existsSync(cosmosRelPath) ? cosmosRelPath : cwdRelPath;
+}

package/dist/server/corePlugins/pluginEndpoint.d.ts

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

package/dist/server/corePlugins/pluginEndpoint.js

@@ -0,0 +1,22 @@
+import path from 'node:path';
+import { resolveSilent } from '../utils/resolveSilent.js';
+export const pluginEndpointServerPlugin = {
+    name: 'pluginEndpoint',
+    devServer({ cosmosConfig, expressApp }) {
+        expressApp.get('/_plugin/*.js', (req, res) => {
+            const modulePath = req.params['0'];
+            if (!modulePath) {
+                res.sendStatus(404);
+                return;
+            }
+            // The module path is always absolute, but Windows paths don't start
+            // with a slash (e.g. C:\foo\bar.js)
+            const resolvedPath = resolveSilent(path.isAbsolute(modulePath) ? modulePath : `/${modulePath}`);
+            if (!resolvedPath) {
+                res.sendStatus(404);
+                return;
+            }
+            res.sendFile(resolvedPath);
+        });
+    },
+};

package/dist/server/corePlugins/portRetry.d.ts

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

package/dist/server/corePlugins/portRetry.js

@@ -0,0 +1,11 @@
+import { findNextAvailablePort } from '../shared/findNextAvailablePort.js';
+export const portRetryServerPlugin = {
+    name: 'portRetry',
+    async config({ cosmosConfig }) {
+        const { port, portRetries } = cosmosConfig;
+        return {
+            ...cosmosConfig,
+            port: portRetries ? await findNextAvailablePort(port, portRetries) : port,
+        };
+    },
+};

package/dist/server/corePlugins/userDepsFile.d.ts

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

package/dist/server/{devServer/corePlugins → corePlugins}/userDepsFile.js

@@ -1,21 +1,24 @@
 import fs from 'fs/promises';
 import path from 'path';
-import { startFixtureWatcher } from '../../userDeps/fixtureWatcher.js';
-import { getPlaygroundUrl } from '../../shared/playgroundUrl.js';
-import { generateUserDepsModule } from '../../userDeps/generateUserDepsModule.js';
-import { getCliArgs } from '../../utils/cli.js';
-export async function userDepsFileDevServerPlugin(args) {
-    if (!shouldGenerateUserDepsFile(args.platformType))
-        return;
-    const { cosmosConfig } = args;
-    await generateUserDepsFile(cosmosConfig);
-    const watcher = await startFixtureWatcher(cosmosConfig, 'all', () => {
-        generateUserDepsFile(cosmosConfig);
-    });
-    return () => {
-        watcher.close();
-    };
-}
+import { getPlaygroundUrl } from '../shared/playgroundUrl.js';
+import { startFixtureWatcher } from '../userDeps/fixtureWatcher.js';
+import { generateUserDepsModule } from '../userDeps/generateUserDepsModule.js';
+import { getCliArgs } from '../utils/cli.js';
+export const userDepsFileServerPlugin = {
+    name: 'userDepsFile',
+    async devServer(args) {
+        if (!shouldGenerateUserDepsFile(args.platformType))
+            return;
+        const { cosmosConfig } = args;
+        await generateUserDepsFile(cosmosConfig);
+        const watcher = await startFixtureWatcher(cosmosConfig, 'all', () => {
+            generateUserDepsFile(cosmosConfig);
+        });
+        return () => {
+            watcher.close();
+        };
+    },
+};
 function shouldGenerateUserDepsFile(platformType) {
     return (platformType === 'native' ||
         // CLI support for --external-userdeps flag (useful with react-native-web)

package/dist/server/cosmosConfig/createCosmosConfig.js

@@ -16,12 +16,14 @@ export function createCosmosConfig(rootDir, cosmosConfigInput = {}) {
         httpsOptions: getHttpsOptions(cosmosConfigInput, rootDir),
         ignore: getIgnore(cosmosConfigInput),
         port: getPort(cosmosConfigInput),
+        portRetries: getPortRetries(cosmosConfigInput),
         plugins: getPlugins(cosmosConfigInput, rootDir),
         publicUrl: getPublicUrl(cosmosConfigInput),
         staticPath: getStaticPath(cosmosConfigInput, rootDir),
         userDepsFilePath: getUserDepsFilePath(cosmosConfigInput, rootDir),
         watchDirs: getWatchDirs(cosmosConfigInput, rootDir),
         rendererUrl: cosmosConfigInput.rendererUrl ?? null,
+        dom: getDomConfig(cosmosConfigInput.dom || {}),
         ui: cosmosConfigInput.ui || {},
     };
 }
@@ -78,6 +80,9 @@ function getPort(cosmosConfigInput) {
     const { port = 5000 } = cosmosConfigInput;
     return port;
 }
+function getPortRetries({ portRetries = 10 }) {
+    return portRetries;
+}
 function getGlobalImports(cosmosConfigInput, rootDir) {
     const { globalImports = [] } = cosmosConfigInput;
     return globalImports.map(globalImport => resolveLoose(rootDir, globalImport));
@@ -86,3 +91,9 @@ function getPlugins(cosmosConfigInput, rootDir) {
     const { plugins = [] } = cosmosConfigInput;
     return plugins.map(plugin => resolveLoose(rootDir, plugin));
 }
+function getDomConfig(cosmosConfigInput) {
+    const { containerQuerySelector = null } = cosmosConfigInput;
+    return {
+        containerQuerySelector,
+    };
+}

package/dist/server/cosmosConfig/shared.js

@@ -1,7 +1,7 @@
-import { importModule } from '../utils/fs.js';
+import { importJson } from '../utils/fs.js';
 export function getCurrentDir() {
     return process.cwd();
 }
 export async function importConfigFile(cosmosConfigPath) {
-    return importModule(cosmosConfigPath);
+    return importJson(cosmosConfigPath);
 }

package/dist/server/cosmosConfig/types.d.ts

@@ -2,10 +2,14 @@ interface HttpsOptions {
     keyPath: string;
     certPath: string;
 }
+export type CosmosDomConfig = {
+    containerQuerySelector: null | string;
+};
 export type CosmosConfig = {
     exportPath: string;
     detectLocalPlugins: boolean;
     disablePlugins: boolean;
+    dom: CosmosDomConfig;
     fixtureFileSuffix: string;
     fixturesDir: string;
     globalImports: string[];
@@ -14,6 +18,7 @@ export type CosmosConfig = {
     httpsOptions: null | HttpsOptions;
     ignore: string[];
     port: number;
+    portRetries: number;
     plugins: string[];
     publicUrl: string;
     rendererUrl: string | null;
@@ -26,5 +31,6 @@ export type CosmosConfig = {
         [pluginName: string]: {};
     };
 };
+export type CosmosDomConfigInput = Partial<CosmosDomConfig>;
 export type CosmosConfigInput = Partial<CosmosConfig>;
 export {};

package/dist/server/cosmosPlugin/readCosmosPluginConfig.js

@@ -1,8 +1,8 @@
 import path from 'path';
-import { importModule } from '../utils/fs.js';
+import { importJson } from '../utils/fs.js';
 import { resolveSilent } from '../utils/resolveSilent.js';
 export async function readCosmosPluginConfig({ rootDir, configPath, relativePaths, }) {
-    const rawConfig = await importModule(configPath);
+    const rawConfig = await importJson(configPath);
     const pluginRootDir = path.dirname(configPath);
     const config = {
         name: rawConfig.name,
@@ -13,11 +13,8 @@ export async function readCosmosPluginConfig({ rootDir, configPath, relativePath
     if (rawConfig.ui) {
         config.ui = resolvePluginPath(config.name, rootDir, pluginRootDir, rawConfig.ui, relativePaths);
     }
-    if (rawConfig.devServer) {
-        config.devServer = resolvePluginPath(config.name, rootDir, pluginRootDir, rawConfig.devServer, relativePaths);
-    }
-    if (rawConfig.export) {
-        config.export = resolvePluginPath(config.name, rootDir, pluginRootDir, rawConfig.export, relativePaths);
+    if (rawConfig.server) {
+        config.server = resolvePluginPath(config.name, rootDir, pluginRootDir, rawConfig.server, relativePaths);
     }
     return config;
 }

package/dist/server/cosmosPlugin/types.d.ts

@@ -4,6 +4,11 @@ import http from 'http';
 import { MessageType } from 'react-cosmos-core';
 import { CosmosConfig } from '../cosmosConfig/types.js';
 export type PlatformType = 'web' | 'native';
+export type CosmosConfigPluginArgs = {
+    cosmosConfig: CosmosConfig;
+    platformType: PlatformType;
+};
+export type CosmosConfigPlugin = (args: CosmosConfigPluginArgs) => Promise<CosmosConfig> | CosmosConfig;
 export type DevServerPluginArgs = {
     cosmosConfig: CosmosConfig;
     platformType: PlatformType;
@@ -19,3 +24,9 @@ export type ExportPluginArgs = {
     cosmosConfig: CosmosConfig;
 };
 export type ExportPlugin = (args: ExportPluginArgs) => unknown;
+export type CosmosServerPlugin = {
+    name: string;
+    config?: CosmosConfigPlugin;
+    devServer?: DevServerPlugin;
+    export?: ExportPlugin;
+};

package/dist/server/devServer/messageHandler.d.ts

@@ -3,5 +3,5 @@ import http from 'http';
 import { ServerMessage } from 'react-cosmos-core';
 export declare function createMessageHandler(httpServer: http.Server): {
     sendMessage: (msg: ServerMessage) => void;
-    cleanUp: () => void;
+    close: () => void;
 };

package/dist/server/devServer/messageHandler.js

@@ -21,9 +21,9 @@ export function createMessageHandler(httpServer) {
             }
         });
     }
-    function cleanUp() {
+    function close() {
         wss.clients.forEach(client => client.close());
         wss.close();
     }
-    return { sendMessage, cleanUp };
+    return { sendMessage, close };
 }

package/dist/server/devServer/startDevServer.js

@@ -1,24 +1,15 @@
 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 { logPluginInfo } from '../shared/logPluginInfo.js';
-import { requirePluginModule } from '../shared/requirePluginModule.js';
 import { serveStaticDir } from '../shared/staticServer.js';
-import { httpProxyDevServerPlugin } from './corePlugins/httpProxy.js';
-import openFileDevServerPlugin from './corePlugins/openFile.js';
-import pluginEndpointDevServerPlugin from './corePlugins/pluginEndpoint.js';
-import { userDepsFileDevServerPlugin } from './corePlugins/userDepsFile.js';
 import { createExpressApp } from './expressApp.js';
 import { createHttpServer } from './httpServer.js';
 import { createMessageHandler } from './messageHandler.js';
-const builtInPlugins = [
-    userDepsFileDevServerPlugin,
-    httpProxyDevServerPlugin,
-    openFileDevServerPlugin,
-    pluginEndpointDevServerPlugin,
-];
 export async function startDevServer(platformType) {
-    const cosmosConfig = await detectCosmosConfig();
+    let cosmosConfig = await detectCosmosConfig();
     logCosmosConfigInfo();
     const pluginConfigs = await getPluginConfigs({
         cosmosConfig,
@@ -28,6 +19,19 @@ export async function startDevServer(platformType) {
         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, platformType });
+            }
+            catch (err) {
+                console.log(`[Cosmos][plugin:${plugin.name}] Config hook failed`);
+                throw err;
+            }
+        }
+    }
     const app = await createExpressApp(platformType, cosmosConfig, pluginConfigs);
     const httpServer = await createHttpServer(cosmosConfig, app);
     const msgHandler = createMessageHandler(httpServer.server);
@@ -37,13 +41,14 @@ export async function startDevServer(platformType) {
     const pluginCleanupCallbacks = [];
     async function cleanUp() {
         await Promise.all(pluginCleanupCallbacks.map(cleanup => cleanup()));
+        msgHandler.close();
         await httpServer.stop();
-        msgHandler.cleanUp();
     }
-    const userPlugins = await getDevServerPlugins(pluginConfigs, cosmosConfig.rootDir);
-    for (const plugin of [...builtInPlugins, ...userPlugins]) {
+    for (const plugin of plugins) {
         try {
-            const pluginReturn = await plugin({
+            if (!plugin.devServer)
+                continue;
+            const pluginReturn = await plugin.devServer({
                 cosmosConfig,
                 platformType,
                 httpServer: httpServer.server,
@@ -58,7 +63,7 @@ export async function startDevServer(platformType) {
                     catch (err) {
                         // Log when a plugin fails to clean up, but continue to attempt
                         // to clean up the remaining plugins
-                        console.log(`[Cosmos][${plugin.name}] Dev server plugin cleanup failed`);
+                        console.log(`[Cosmos][plugin:${plugin.name}] Dev server cleanup failed`);
                         console.log(err);
                     }
                 });
@@ -67,7 +72,7 @@ export async function startDevServer(platformType) {
         catch (err) {
             // Abort starting server if a plugin init fails and attempt cleanup of all
             // plugins that have already initialized
-            console.log(`[Cosmos][${plugin.name}] Dev server plugin init failed`);
+            console.log(`[Cosmos][plugin:${plugin.name}] Dev server init failed`);
             cleanUp();
             throw err;
         }
@@ -86,8 +91,3 @@ function logCosmosConfigInfo() {
     const relConfigPath = path.relative(process.cwd(), cosmosConfigPath);
     console.log(`[Cosmos] Using cosmos config found at ${relConfigPath}`);
 }
-async function getDevServerPlugins(pluginConfigs, rootDir) {
-    return Promise.all(pluginConfigs
-        .filter(pluginConfig => pluginConfig.devServer)
-        .map(pluginConfig => requirePluginModule(rootDir, pluginConfig, 'devServer')));
-}

package/dist/server/export/generateExport.js

@@ -1,16 +1,17 @@
 import fs from 'fs/promises';
 import path from 'path';
 import { removeLeadingSlash, } from 'react-cosmos-core';
+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 { logPluginInfo } from '../shared/logPluginInfo.js';
 import { getExportPlaygroundHtml } from '../shared/playgroundHtml.js';
-import { requirePluginModule } from '../shared/requirePluginModule.js';
 import { getStaticPath } from '../shared/staticPath.js';
 import { resolve } from '../utils/resolve.js';
-const builtInPlugins = [];
 export async function generateExport() {
-    const cosmosConfig = await detectCosmosConfig();
+    const platformType = 'web';
+    let cosmosConfig = await detectCosmosConfig();
     const pluginConfigs = await getPluginConfigs({
         cosmosConfig,
         // Relative paths work in exports because all plugin modules are copied
@@ -18,19 +19,34 @@ 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, platformType });
+            }
+            catch (err) {
+                console.log(`[Cosmos][plugin:${plugin.name}] Config hook failed`);
+                throw err;
+            }
+        }
+    }
     // Clear previous export (or other files at export path)
     const { exportPath } = cosmosConfig;
     await fs.rm(exportPath, { recursive: true, force: true });
+    await fs.mkdir(exportPath, { recursive: true });
     // 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);
-    const userPlugins = await getExportPlugins(pluginConfigs, cosmosConfig.rootDir);
-    for (const plugin of [...builtInPlugins, ...userPlugins]) {
+    for (const plugin of plugins) {
+        if (!plugin.export)
+            continue;
         try {
-            await plugin({ cosmosConfig });
+            await plugin.export({ cosmosConfig });
         }
         catch (err) {
-            console.log(`[Cosmos][${plugin.name}] Export plugin failed`);
+            console.log(`[Cosmos][plugin:${plugin.name}] Export failed`);
             throw err;
         }
     }
@@ -59,11 +75,6 @@ async function copyStaticAssets(cosmosConfig) {
     const exportStaticPath = path.resolve(exportPath, removeLeadingSlash(publicUrl));
     fs.cp(staticPath, exportStaticPath, { recursive: true });
 }
-async function getExportPlugins(pluginConfigs, rootDir) {
-    return Promise.all(pluginConfigs
-        .filter(pluginConfig => pluginConfig.export)
-        .map(pluginConfig => requirePluginModule(rootDir, pluginConfig, 'export')));
-}
 async function exportPlaygroundFiles(cosmosConfig, pluginConfigs) {
     const { exportPath } = cosmosConfig;
     // Copy UI plugins to export path and embed them in the playground HTML

package/dist/server/shared/findNextAvailablePort.d.ts

@@ -0,0 +1 @@
+export declare function findNextAvailablePort(port: number, retries: number, retriesLeft?: number): Promise<number>;

package/dist/server/shared/findNextAvailablePort.js

@@ -0,0 +1,29 @@
+import net from 'net';
+// Inspired by https://stackoverflow.com/q/19129570
+export async function findNextAvailablePort(port, retries, retriesLeft = retries) {
+    return new Promise((resolve, reject) => {
+        const socket = new net.Socket();
+        socket.on('connect', () => {
+            console.log(`[Cosmos] Port ${port} already in use, trying next...`);
+            if (retriesLeft > 0) {
+                socket.destroy();
+                resolve(findNextAvailablePort(port + 1, retries, retriesLeft - 1));
+            }
+            else {
+                reject(`No available port found after ${retries} retries.`);
+            }
+        });
+        socket.on('error', (error) => {
+            if (error.code === 'ECONNREFUSED')
+                resolve(port);
+            else
+                reject(error);
+        });
+        socket.setTimeout(400);
+        socket.on('timeout', () => {
+            socket.destroy();
+            resolve(port);
+        });
+        socket.connect(port, '0.0.0.0');
+    });
+}

package/dist/server/shared/importServerPlugins.d.ts

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

package/dist/server/shared/importServerPlugins.js

@@ -0,0 +1,16 @@
+import path from 'node:path';
+import { importModule } from '../utils/fs.js';
+export async function importServerPlugins(pluginConfigs, rootDir) {
+    return Promise.all(pluginConfigs
+        .filter(pluginConfig => pluginConfig.server)
+        .map(pluginConfig => importServerModule(pluginConfig, rootDir)));
+}
+async function importServerModule(pluginConfig, rootDir) {
+    const modulePath = pluginConfig.server;
+    if (!modulePath) {
+        throw new Error(`Server module missing in plugin "${pluginConfig.name}"`);
+    }
+    const absPath = path.resolve(rootDir, modulePath);
+    const module = await importModule(absPath);
+    return module.default;
+}

package/dist/server/testHelpers/mockConsole.js

@@ -1,11 +1,15 @@
 export async function mockConsole(cb) {
-    const origConsoleLog = console.log;
-    console.log = jest.fn();
     const expectedLogs = [];
-    const ret = await cb({
+    const origConsoleLog = console.log;
+    console.log = jest.fn((...args) => {
+        if (typeof args[0] !== 'string' || !expectedLogs.includes(args[0])) {
+            origConsoleLog(...args);
+        }
+    });
+    const cbReturn = await cb({
         expectLog: (msg) => expectedLogs.push(msg),
     });
     expectedLogs.forEach(msg => expect(console.log).toBeCalledWith(msg));
     console.log = origConsoleLog;
-    return ret;
+    return cbReturn;
 }

package/dist/server/testHelpers/mockFs.d.ts

@@ -1,5 +1,5 @@
 import { CosmosConfig } from '../cosmosConfig/types.js';
+export declare function mockFile(filePath: string, fileMock: {}): void;
 export declare function mockCosmosConfig(cosmosConfigPath: string, cosmosConfig: Partial<CosmosConfig>): void;
-export declare function mockFile(filePath: string, fileContent: {}): void;
-export declare function mockDir(dirPath: string): void;
+export declare function mockCwdModuleDefault(filePath: string, fileMock: {}): void;
 export declare function resetFsMock(): void;

package/dist/server/testHelpers/mockFs.js

@@ -1,4 +1,4 @@
-import path from 'path';
+import path from 'node:path';
 import { getCwdPath } from './cwd.js';
 jest.mock('../utils/fs', () => {
     const actual = jest.requireActual('../utils/fs');
@@ -8,8 +8,20 @@ jest.mock('../utils/fs', () => {
     async function importModule(moduleId) {
         if (!mocked)
             return actual.importModule(moduleId);
+        if (!fileMocks.hasOwnProperty(moduleId) &&
+            !fileMocks.hasOwnProperty(`${moduleId}.js`)) {
+            throw new Error(`Cannot find module '${moduleId}'`);
+        }
         return fileMocks[moduleId] || fileMocks[`${moduleId}.js`];
     }
+    async function importJson(filePath) {
+        if (!mocked)
+            return actual.importJson(filePath);
+        if (!fileMocks.hasOwnProperty(filePath)) {
+            throw new Error(`Cannot find JSON '${filePath}'`);
+        }
+        return fileMocks[filePath];
+    }
     function moduleExists(moduleId) {
         if (!mocked)
             return actual.moduleExists(moduleId);
@@ -28,6 +40,7 @@ jest.mock('../utils/fs', () => {
     }
     return {
         importModule,
+        importJson,
         moduleExists,
         fileExists,
         dirExists,
@@ -35,6 +48,10 @@ jest.mock('../utils/fs', () => {
             mocked = true;
             fileMocks = { ...fileMocks, [filePath]: fileMock };
         },
+        __mockJson(filePath, jsonMock) {
+            mocked = true;
+            fileMocks = { ...fileMocks, [filePath]: jsonMock };
+        },
         __mockDir(dirPath) {
             mocked = true;
             dirMocks = [...dirMocks, dirPath];
@@ -45,16 +62,17 @@ jest.mock('../utils/fs', () => {
         },
     };
 });
+export function mockFile(filePath, fileMock) {
+    requireMocked().__mockFile(filePath, fileMock);
+    requireMocked().__mockDir(path.dirname(filePath));
+}
 export function mockCosmosConfig(cosmosConfigPath, cosmosConfig) {
-    mockFile(cosmosConfigPath, cosmosConfig);
+    const absPath = getCwdPath(cosmosConfigPath);
+    mockFile(absPath, cosmosConfig);
 }
-export function mockFile(filePath, fileContent) {
+export function mockCwdModuleDefault(filePath, fileMock) {
     const absPath = getCwdPath(filePath);
-    requireMocked().__mockFile(absPath, fileContent);
-    requireMocked().__mockDir(path.dirname(absPath));
-}
-export function mockDir(dirPath) {
-    requireMocked().__mockDir(getCwdPath(dirPath));
+    mockFile(absPath, { default: fileMock });
 }
 export function resetFsMock() {
     requireMocked().__resetMock();

package/dist/server/utils/fs.d.ts

@@ -1,4 +1,5 @@
-export declare function importModule<T>(moduleId: string): Promise<T>;
+export declare function importModule<T>(filePath: string): Promise<T>;
+export declare function importJson<T>(filePath: string): Promise<T>;
 export declare function moduleExists(moduleId: string): boolean | "";
 export declare function fileExists(filePath: string): boolean;
 export declare function dirExists(dirPath: string): boolean;

package/dist/server/utils/fs.js

@@ -1,11 +1,14 @@
 // NOTE: This API has been extracted to easily mock the file system in tests
-import fs from 'fs';
+import fs from 'node:fs';
+import url from 'node:url';
 import { requireModule } from './requireModule.js';
 import { resolve } from './resolve.js';
-export async function importModule(moduleId) {
-    return moduleId.endsWith('.json')
-        ? requireModule(moduleId)
-        : import(moduleId);
+export async function importModule(filePath) {
+    const fileUrl = url.pathToFileURL(filePath).href;
+    return import(fileUrl);
+}
+export async function importJson(filePath) {
+    return requireModule(filePath);
 }
 // Better than fs.exists because it works for module paths without an extension
 export function moduleExists(moduleId) {

package/dist/server.d.ts

@@ -6,6 +6,7 @@ export * from './server/cosmosPlugin/findCosmosPluginConfigs.js';
 export * from './server/cosmosPlugin/pluginConfigs.js';
 export * from './server/cosmosPlugin/types.js';
 export * from './server/getFixtures/getFixtures.js';
+export * from './server/shared/findNextAvailablePort.js';
 export { RENDERER_FILENAME } from './server/shared/playgroundHtml.js';
 export * from './server/shared/playgroundUrl.js';
 export * from './server/shared/staticServer.js';

package/dist/server.js

@@ -6,6 +6,7 @@ export * from './server/cosmosPlugin/findCosmosPluginConfigs.js';
 export * from './server/cosmosPlugin/pluginConfigs.js';
 export * from './server/cosmosPlugin/types.js';
 export * from './server/getFixtures/getFixtures.js';
+export * from './server/shared/findNextAvailablePort.js';
 export { RENDERER_FILENAME } from './server/shared/playgroundHtml.js';
 export * from './server/shared/playgroundUrl.js';
 export * from './server/shared/staticServer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-canary.0d1dbd5.0+0d1dbd5",
   "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",
@@ -17,8 +17,8 @@
     "open": "^8.4.2",
     "pem": "^1.14.6",
     "pkg-up": "^4.0.0",
-    "react-cosmos-core": "^6.0.0-alpha.9",
-    "react-cosmos-ui": "^6.0.0-alpha.9",
+    "react-cosmos-core": "^6.0.0-canary.0d1dbd5.0+0d1dbd5",
+    "react-cosmos-ui": "^6.0.0-canary.0d1dbd5.0+0d1dbd5",
     "ws": "^8.12.1",
     "yargs": "^17.7.1"
   },
@@ -27,5 +27,5 @@
     "cosmos-export": "./bin/cosmos-export.js",
     "cosmos-native": "./bin/cosmos-native.js"
   },
-  "gitHead": "b155b223f904f5cc29e2f13ac79ab7c4b302ed2b"
+  "gitHead": "0d1dbd57a7e2e495a9a60741b3908c353482fcf7"
 }

package/dist/server/devServer/corePlugins/httpProxy.d.ts

@@ -1,2 +0,0 @@
-import { DevServerPluginArgs } from '../../cosmosPlugin/types.js';
-export declare function httpProxyDevServerPlugin({ platformType, cosmosConfig, expressApp, }: DevServerPluginArgs): void;

package/dist/server/devServer/corePlugins/httpProxy.js

@@ -1,18 +0,0 @@
-import { createProxyMiddleware } from 'http-proxy-middleware';
-export function httpProxyDevServerPlugin({ platformType, cosmosConfig, expressApp, }) {
-    if (platformType !== 'web')
-        return;
-    const httpProxyConfig = getHttpProxyCosmosConfig(cosmosConfig);
-    Object.keys(httpProxyConfig).forEach(context => {
-        const config = httpProxyConfig[context];
-        if (typeof config === 'string') {
-            expressApp.use(context, createProxyMiddleware(context, { target: config }));
-        }
-        else if (typeof config === 'object') {
-            expressApp.use(context, createProxyMiddleware(context, config));
-        }
-    });
-}
-function getHttpProxyCosmosConfig(cosmosConfig) {
-    return (cosmosConfig.httpProxy || {});
-}

package/dist/server/devServer/corePlugins/openFile.d.ts

@@ -1,2 +0,0 @@
-import { DevServerPluginArgs } from '../../cosmosPlugin/types.js';
-export default function openFileDevServerPlugin({ cosmosConfig, expressApp, }: DevServerPluginArgs): void;

package/dist/server/devServer/corePlugins/openFile.js

@@ -1,53 +0,0 @@
-import launchEditor from '@skidding/launch-editor';
-import fs from 'fs';
-import open from 'open';
-import path from 'path';
-export default function openFileDevServerPlugin({ cosmosConfig, expressApp, }) {
-    expressApp.get('/_open', (req, res) => {
-        const { filePath, line, column } = getReqQuery(req);
-        if (!filePath) {
-            res.status(400).send(`File path missing`);
-            return;
-        }
-        const absFilePath = resolveFilePath(cosmosConfig.rootDir, filePath);
-        if (!fs.existsSync(absFilePath)) {
-            res.status(404).send(`File not found at path: ${absFilePath}`);
-            return;
-        }
-        new Promise((resolve, reject) => {
-            const file = `${absFilePath}:${line}:${column}`;
-            launchEditor(file, (fileName, errorMsg) => reject(errorMsg));
-            // If launchEditor doesn't report error within 500ms we assume it worked
-            setTimeout(resolve, 500);
-        })
-            // Fall back to open in case launchEditor fails. launchEditor only works
-            // when the editor app is already open, but is favorable because it can
-            // open a code file on a specific line & column.
-            .catch(err => open(absFilePath))
-            .catch(err => res.status(500).send('Failed to open file'))
-            .then(() => res.send());
-    });
-}
-function getReqQuery(req) {
-    const { filePath, line, column } = req.query;
-    if (typeof filePath !== 'string')
-        throw new Error('filePath missing');
-    return {
-        filePath,
-        line: typeof line === 'string' ? parseInt(line, 10) : 1,
-        column: typeof column === 'string' ? parseInt(column, 10) : 1,
-    };
-}
-function resolveFilePath(rootDir, filePath) {
-    // This heuristic is needed because the open file endpoint is used for
-    // multiple applications, which provide different file path types:
-    // 1. Edit fixture button: Sends path relative to Cosmos rootDir
-    // 2. react-error-overlay runtime error: Sends absolute path
-    // 3. react-error-overlay compile error: Sends path relative to CWD
-    if (path.isAbsolute(filePath)) {
-        return filePath;
-    }
-    const cosmosRelPath = path.join(rootDir, filePath);
-    const cwdRelPath = path.join(process.cwd(), filePath);
-    return fs.existsSync(cosmosRelPath) ? cosmosRelPath : cwdRelPath;
-}

package/dist/server/devServer/corePlugins/pluginEndpoint.d.ts

@@ -1,2 +0,0 @@
-import { DevServerPluginArgs } from '../../cosmosPlugin/types.js';
-export default function pluginEndpointDevServerPlugin({ cosmosConfig, expressApp, }: DevServerPluginArgs): void;

package/dist/server/devServer/corePlugins/pluginEndpoint.js

@@ -1,17 +0,0 @@
-import { resolveFromSilent, resolveSilent } from '../../utils/resolveSilent.js';
-export default function pluginEndpointDevServerPlugin({ cosmosConfig, expressApp, }) {
-    expressApp.get('/_plugin/*.js', (req, res) => {
-        const moduleId = req.params['0'];
-        if (!moduleId) {
-            res.sendStatus(404);
-            return;
-        }
-        const resolvedPath = resolveSilent(`/${moduleId}`) ||
-            resolveFromSilent(cosmosConfig.rootDir, moduleId);
-        if (!resolvedPath) {
-            res.sendStatus(404);
-            return;
-        }
-        res.sendFile(resolvedPath);
-    });
-}

package/dist/server/devServer/corePlugins/userDepsFile.d.ts

@@ -1,2 +0,0 @@
-import { DevServerPluginArgs } from '../../cosmosPlugin/types.js';
-export declare function userDepsFileDevServerPlugin(args: DevServerPluginArgs): Promise<(() => void) | undefined>;

package/dist/server/shared/requirePluginModule.d.ts

@@ -1,2 +0,0 @@
-import { CosmosPluginConfig } from 'react-cosmos-core';
-export declare function requirePluginModule<T>(rootDir: string, pluginConfig: CosmosPluginConfig, configKey: 'ui' | 'devServer' | 'export'): Promise<T>;

package/dist/server/shared/requirePluginModule.js

@@ -1,10 +0,0 @@
-import path from 'path';
-import { pathToFileURL } from 'url';
-export async function requirePluginModule(rootDir, pluginConfig, configKey) {
-    const moduleId = pluginConfig[configKey];
-    if (!moduleId) {
-        throw new Error(`Module missing in plugin "${pluginConfig.name}": ${configKey}`);
-    }
-    const esModule = await import(pathToFileURL(path.resolve(rootDir, moduleId)).href);
-    return esModule.default;
-}