react-cosmos 5.7.2 → 6.0.0-alpha.0

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

@@ -0,0 +1,37 @@
+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();
+    };
+}
+function shouldGenerateUserDepsFile(platformType) {
+    return (platformType === 'native' ||
+        // CLI support for --external-userdeps flag (useful with react-native-web)
+        Boolean(getCliArgs().externalUserdeps));
+}
+async function generateUserDepsFile(cosmosConfig) {
+    const { userDepsFilePath } = cosmosConfig;
+    const rendererConfig = {
+        playgroundUrl: getPlaygroundUrl(cosmosConfig),
+    };
+    const userDepsModule = generateUserDepsModule({
+        cosmosConfig,
+        rendererConfig,
+        relativeToDir: path.dirname(userDepsFilePath),
+    });
+    await fs.writeFile(userDepsFilePath, userDepsModule, 'utf8');
+    const relUserDepsFilePath = path.relative(process.cwd(), userDepsFilePath);
+    console.log(`[Cosmos] Generated ${relUserDepsFilePath}`);
+}

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

@@ -0,0 +1,5 @@
+import express from 'express';
+import { CosmosPluginConfig } from 'react-cosmos-core';
+import { CosmosConfig } from '../cosmosConfig/types.js';
+import { PlatformType } from '../cosmosPlugin/types.js';
+export declare function createExpressApp(platformType: PlatformType, cosmosConfig: CosmosConfig, pluginConfigs: CosmosPluginConfig[]): Promise<express.Express>;

package/dist/server/devServer/expressApp.js

@@ -0,0 +1,21 @@
+import express from 'express';
+import { getDevPlaygroundHtml } from '../shared/playgroundHtml.js';
+import { getStaticPath } from '../shared/staticPath.js';
+import { resolve } from '../utils/resolve.js';
+export async function createExpressApp(platformType, cosmosConfig, pluginConfigs) {
+    const app = express();
+    const playgroundHtml = await getDevPlaygroundHtml(platformType, cosmosConfig, pluginConfigs);
+    app.get('/', (req, res) => {
+        res.send(playgroundHtml);
+    });
+    app.get('/playground.bundle.js', (req, res) => {
+        res.sendFile(resolve('react-cosmos-ui/dist/playground.bundle.js'));
+    });
+    app.get('/playground.bundle.js.map', (req, res) => {
+        res.sendFile(resolve('react-cosmos-ui/dist/playground.bundle.js.map'));
+    });
+    app.get('/_cosmos.ico', (req, res) => {
+        res.sendFile(getStaticPath('favicon.ico'));
+    });
+    return app;
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="node" />
+/// <reference types="node" />
+import http from 'http';
+import https from 'https';
+import { CosmosConfig } from '../cosmosConfig/types.js';
+type RequestListener = (request: http.IncomingMessage, response: http.ServerResponse) => void;
+export declare function createHttpServer(cosmosConfig: CosmosConfig, requestListener: RequestListener): Promise<{
+    server: http.Server<typeof http.IncomingMessage, typeof http.ServerResponse> | https.Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
+    start: () => Promise<void>;
+    stop: () => Promise<void>;
+}>;
+export {};

package/dist/server/devServer/httpServer.js

@@ -0,0 +1,42 @@
+import fs from 'fs';
+import http from 'http';
+import https from 'https';
+import pem from 'pem';
+import { getPlaygroundUrl } from '../shared/playgroundUrl.js';
+export async function createHttpServer(cosmosConfig, requestListener) {
+    const { port, hostname, https: httpsEnabled } = cosmosConfig;
+    const server = httpsEnabled
+        ? https.createServer(await getHttpsOpts(cosmosConfig), requestListener)
+        : http.createServer(requestListener);
+    async function start() {
+        await new Promise(resolve => {
+            if (hostname === null) {
+                server.listen(port, resolve);
+            }
+            else {
+                server.listen(port, hostname, resolve);
+            }
+        });
+        console.log(`[Cosmos] See you at ${getPlaygroundUrl(cosmosConfig)}`);
+    }
+    async function stop() {
+        await new Promise(resolve => server.close(resolve));
+    }
+    return { server, start, stop };
+}
+async function getHttpsOpts(cosmosConfig) {
+    const { httpsOptions } = cosmosConfig;
+    if (httpsOptions)
+        return {
+            key: fs.readFileSync(httpsOptions.keyPath, 'utf8'),
+            cert: fs.readFileSync(httpsOptions.certPath, 'utf8'),
+        };
+    console.log('[Cosmos] Generating HTTPS certificate');
+    return await new Promise((resolve, reject) => {
+        pem.createCertificate({ days: 1000, selfSigned: true }, (err, keys) => {
+            if (err)
+                return reject(err);
+            return resolve({ key: keys.serviceKey, cert: keys.certificate });
+        });
+    });
+}

package/dist/{devServer → server/devServer}/messageHandler.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="node" />
 import http from 'http';
-import { BuildMessage } from 'react-cosmos-shared2/build';
+import { ServerMessage } from 'react-cosmos-core';
 export declare function createMessageHandler(httpServer: http.Server): {
-    sendMessage: (msg: BuildMessage) => void;
+    sendMessage: (msg: ServerMessage) => void;
     cleanUp: () => void;
 };

package/dist/server/devServer/messageHandler.js

@@ -0,0 +1,29 @@
+import { serverSocketMessage } from 'react-cosmos-core';
+import WebSocket, { WebSocketServer } from 'ws';
+export function createMessageHandler(httpServer) {
+    const wss = new WebSocketServer({ server: httpServer });
+    wss.on('connection', ws => {
+        // Forward commands between connected clients. Parties involved can be the
+        // - The Cosmos UI, which acts as a remote control
+        // - The web iframe or the React Native component renderers
+        ws.on('message', msg => {
+            wss.clients.forEach(client => {
+                if (client !== ws && client.readyState === WebSocket.OPEN) {
+                    client.send(msg.toString());
+                }
+            });
+        });
+    });
+    function sendMessage(msg) {
+        wss.clients.forEach(client => {
+            if (client.readyState === WebSocket.OPEN) {
+                client.send(JSON.stringify(serverSocketMessage(msg)));
+            }
+        });
+    }
+    function cleanUp() {
+        wss.clients.forEach(client => client.close());
+        wss.close();
+    }
+    return { sendMessage, cleanUp };
+}

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

@@ -0,0 +1,2 @@
+import { PlatformType } from '../cosmosPlugin/types.js';
+export declare function startDevServer(platformType: PlatformType): Promise<() => Promise<void>>;

package/dist/server/devServer/startDevServer.js

@@ -0,0 +1,91 @@
+import path from 'path';
+import { detectCosmosConfig, detectCosmosConfigPath, } from '../cosmosConfig/detectCosmosConfig.js';
+import { getPluginConfigs } from '../cosmosPlugin/pluginConfigs.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();
+    logCosmosConfigInfo();
+    const pluginConfigs = await getPluginConfigs({
+        cosmosConfig,
+        // Absolute paths are required in dev mode because the dev server could
+        // run in a monorepo package that's not the root of the project and plugins
+        // could be installed in the root
+        relativePaths: false,
+    });
+    logPluginInfo(pluginConfigs);
+    const app = await createExpressApp(platformType, cosmosConfig, pluginConfigs);
+    const httpServer = await createHttpServer(cosmosConfig, app);
+    const msgHandler = createMessageHandler(httpServer.server);
+    const pluginCleanupCallbacks = [];
+    async function cleanUp() {
+        await Promise.all(pluginCleanupCallbacks.map(cleanup => cleanup()));
+        await httpServer.stop();
+        msgHandler.cleanUp();
+    }
+    const userPlugins = await getDevServerPlugins(pluginConfigs, cosmosConfig.rootDir);
+    for (const plugin of [...builtInPlugins, ...userPlugins]) {
+        try {
+            const pluginReturn = await plugin({
+                cosmosConfig,
+                platformType,
+                httpServer: httpServer.server,
+                expressApp: app,
+                sendMessage: msgHandler.sendMessage,
+            });
+            if (typeof pluginReturn === 'function') {
+                pluginCleanupCallbacks.push(() => {
+                    try {
+                        pluginReturn();
+                    }
+                    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(err);
+                    }
+                });
+            }
+        }
+        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`);
+            cleanUp();
+            throw err;
+        }
+    }
+    if (cosmosConfig.staticPath) {
+        serveStaticDir(app, cosmosConfig.staticPath, cosmosConfig.publicUrl);
+    }
+    await httpServer.start();
+    return cleanUp;
+}
+function logCosmosConfigInfo() {
+    const cosmosConfigPath = detectCosmosConfigPath();
+    if (!cosmosConfigPath) {
+        console.log(`[Cosmos] Using default cosmos config`);
+        return;
+    }
+    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.d.ts

@@ -0,0 +1 @@
+export declare function generateExport(): Promise<void>;

package/dist/server/export/generateExport.js

@@ -0,0 +1,97 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { removeLeadingSlash, } from 'react-cosmos-core';
+import { detectCosmosConfig } from '../cosmosConfig/detectCosmosConfig.js';
+import { getPluginConfigs } from '../cosmosPlugin/pluginConfigs.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 pluginConfigs = await getPluginConfigs({
+        cosmosConfig,
+        // Relative paths work in exports because all plugin modules are copied
+        // inside the export path
+        relativePaths: true,
+    });
+    logPluginInfo(pluginConfigs);
+    // Clear previous export (or other files at export path)
+    const { exportPath } = cosmosConfig;
+    await fs.rm(exportPath, { recursive: true, force: 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]) {
+        try {
+            await plugin({ cosmosConfig });
+        }
+        catch (err) {
+            console.log(`[Cosmos][${plugin.name}] Export plugin failed`);
+            throw err;
+        }
+    }
+    await exportPlaygroundFiles(cosmosConfig, pluginConfigs);
+    console.log('[Cosmos] Export complete!');
+    console.log(`Export path: ${cosmosConfig.exportPath}`);
+}
+async function copyStaticAssets(cosmosConfig) {
+    const { staticPath } = cosmosConfig;
+    if (!staticPath) {
+        return;
+    }
+    const { exportPath } = cosmosConfig;
+    if (exportPath.indexOf(staticPath) !== -1) {
+        console.warn(`[Cosmos] Warning: Can't export static path because it contains the export path! (avoiding infinite loop)`);
+        console.warn('Public path:', staticPath);
+        console.warn('Export path:', exportPath);
+        return;
+    }
+    const staticStat = await fs.stat(staticPath);
+    if (!staticStat.isDirectory()) {
+        console.log(`[Cosmos] Warning: config.staticPath doesn't point to a valid dir`, staticPath);
+        return;
+    }
+    const { publicUrl } = 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
+    // with updated paths
+    const uiPlugins = pluginConfigs.filter(isUiPlugin);
+    const copiedUiPlugins = await Promise.all(uiPlugins.map(p => exportUiPlugin(cosmosConfig, p)));
+    await fs.copyFile(resolve('react-cosmos-ui/dist/playground.bundle.js'), path.resolve(exportPath, 'playground.bundle.js'));
+    await fs.copyFile(resolve('react-cosmos-ui/dist/playground.bundle.js.map'), path.resolve(exportPath, 'playground.bundle.js.map'));
+    await fs.copyFile(getStaticPath('favicon.ico'), path.resolve(exportPath, '_cosmos.ico'));
+    const playgroundHtml = await getExportPlaygroundHtml(cosmosConfig, copiedUiPlugins);
+    await fs.writeFile(path.resolve(exportPath, 'index.html'), playgroundHtml);
+}
+async function exportUiPlugin(cosmosConfig, pluginConfig) {
+    const { rootDir, exportPath } = cosmosConfig;
+    const pluginPath = path.join(exportPath, '_plugin');
+    const pluginRootDir = path.resolve(rootDir, pluginConfig.rootDir);
+    const srcUiPath = path.resolve(rootDir, pluginConfig.ui);
+    const relUiPath = path.relative(pluginRootDir, srcUiPath);
+    const pluginDirName = pluginRootDir.split(path.sep).pop();
+    const targetUiPath = path.resolve(pluginPath, pluginDirName, relUiPath);
+    await fs.mkdir(path.dirname(targetUiPath), { recursive: true });
+    await fs.copyFile(srcUiPath, targetUiPath);
+    return {
+        name: pluginConfig.name,
+        rootDir: pluginDirName,
+        ui: path.relative(pluginPath, targetUiPath),
+    };
+}
+function isUiPlugin(pluginConfig) {
+    return Boolean(pluginConfig.ui);
+}

package/dist/server/getFixtures/getFixtures.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { CosmosConfig } from '../cosmosConfig/types.js';
+export type FixtureApi = {
+    absoluteFilePath: string;
+    fileName: string;
+    getElement: () => ReactElement;
+    name: string | null;
+    parents: string[];
+    playgroundUrl: string;
+    relativeFilePath: string;
+    rendererUrl: string;
+    treePath: string[];
+};
+export declare function getFixtures(cosmosConfig: CosmosConfig): FixtureApi[];

package/dist/server/getFixtures/getFixtures.js

@@ -0,0 +1,63 @@
+import path from 'path';
+import { createFixtureTree, flattenFixtureTree, getDecoratedFixtureElement, getFixtureListFromExports, getSortedDecoratorsForFixturePath, stringifyPlaygroundUrlQuery, stringifyRendererUrlQuery, } from 'react-cosmos-core';
+import { RENDERER_FILENAME } from '../shared/playgroundHtml.js';
+import { resolveUrlPath } from '../shared/resolveUrlPath.js';
+import { getUserModules } from '../userDeps/getUserModules.js';
+export function getFixtures(cosmosConfig) {
+    const { fixturesDir, fixtureFileSuffix, rootDir } = cosmosConfig;
+    const fixtureInfo = [];
+    const { fixtures, decorators } = getUserModules(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 fixture = fixtureId.name === undefined
+            ? fixtureExport
+            : fixtureExport[fixtureId.name];
+        const treePath = [...parents, fileName];
+        if (name)
+            treePath.push(name);
+        fixtureInfo.push({
+            absoluteFilePath: path.join(rootDir, fixtureId.path),
+            fileName,
+            getElement: createFixtureElementGetter(fixture, fixtureId.path, decorators),
+            name,
+            parents,
+            playgroundUrl: getPlaygroundUrl(cosmosConfig, fixtureId),
+            relativeFilePath: fixtureId.path,
+            rendererUrl: getRendererUrl(cosmosConfig, fixtureId),
+            treePath,
+        });
+    });
+    return fixtureInfo;
+}
+function getPlaygroundUrl(cosmosConfig, fixtureId) {
+    const host = getPlaygroundHost(cosmosConfig);
+    const query = stringifyPlaygroundUrlQuery({ fixtureId });
+    return `${host}/?${query}`;
+}
+function getRendererUrl(cosmosConfig, fixtureId) {
+    const { publicUrl, rendererUrl } = cosmosConfig;
+    const query = stringifyRendererUrlQuery({ _fixtureId: fixtureId });
+    if (rendererUrl)
+        return `${rendererUrl}?${query}`;
+    const host = getPlaygroundHost(cosmosConfig);
+    const urlPath = resolveUrlPath(publicUrl, RENDERER_FILENAME);
+    return `${host}${urlPath}?${query}`;
+}
+function getPlaygroundHost({ hostname, port, https }) {
+    return `${https ? 'https' : 'http'}://${hostname || 'localhost'}:${port}`;
+}
+function createFixtureElementGetter(fixture, fixturePath, decoratorsByPath) {
+    const decorators = getSortedDecoratorsForFixturePath(fixturePath, decoratorsByPath);
+    return () => getDecoratedFixtureElement(fixture, decorators, {
+        fixtureState: {},
+        setFixtureState: () => { },
+        onErrorReset: () => { },
+    });
+}

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

@@ -0,0 +1,2 @@
+import { CosmosPluginConfig } from 'react-cosmos-core';
+export declare function logPluginInfo(pluginConfigs: CosmosPluginConfig[]): void;

package/dist/server/shared/logPluginInfo.js

@@ -0,0 +1,8 @@
+export function logPluginInfo(pluginConfigs) {
+    const pluginCount = pluginConfigs.length;
+    if (pluginCount > 0) {
+        const pluginLabel = pluginCount === 1 ? 'plugin' : 'plugins';
+        const pluginNames = pluginConfigs.map(p => p.name).join(', ');
+        console.log(`[Cosmos] Found ${pluginCount} ${pluginLabel}: ${pluginNames}`);
+    }
+}

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

@@ -0,0 +1,6 @@
+import { CosmosPluginConfig } from 'react-cosmos-core';
+import { CosmosConfig } from '../cosmosConfig/types.js';
+import { PlatformType } from '../cosmosPlugin/types.js';
+export declare const RENDERER_FILENAME = "_renderer.html";
+export declare function getDevPlaygroundHtml(platformType: PlatformType, cosmosConfig: CosmosConfig, pluginConfigs: CosmosPluginConfig[]): Promise<string>;
+export declare function getExportPlaygroundHtml(cosmosConfig: CosmosConfig, pluginConfigs: CosmosPluginConfig[]): Promise<string>;

package/dist/server/shared/playgroundHtml.js

@@ -0,0 +1,85 @@
+import fs from 'fs';
+import { readFile } from 'fs/promises';
+import path from 'path';
+import { pkgUpSync } from 'pkg-up';
+import { replaceKeys } from 'react-cosmos-core';
+import { resolveUrlPath } from './resolveUrlPath.js';
+import { getStaticPath } from './staticPath.js';
+export const RENDERER_FILENAME = '_renderer.html';
+export async function getDevPlaygroundHtml(platformType, cosmosConfig, pluginConfigs) {
+    const { ui } = cosmosConfig;
+    return getPlaygroundHtml({
+        playgroundConfig: {
+            ...ui,
+            core: await getDevCoreConfig(platformType, cosmosConfig),
+        },
+        pluginConfigs,
+    });
+}
+export async function getExportPlaygroundHtml(cosmosConfig, pluginConfigs) {
+    const { ui } = cosmosConfig;
+    return getPlaygroundHtml({
+        playgroundConfig: {
+            ...ui,
+            core: await getExportCoreConfig(cosmosConfig),
+        },
+        pluginConfigs,
+    });
+}
+async function getDevCoreConfig(platformType, cosmosConfig) {
+    switch (platformType) {
+        case 'native':
+            return {
+                ...(await getSharedCoreConfig(cosmosConfig)),
+                devServerOn: true,
+                webRendererUrl: null,
+            };
+        case 'web':
+            return {
+                ...(await getSharedCoreConfig(cosmosConfig)),
+                devServerOn: true,
+                webRendererUrl: cosmosConfig.rendererUrl ||
+                    resolveUrlPath(cosmosConfig.publicUrl, RENDERER_FILENAME),
+            };
+        default:
+            throw new Error(`Invalid platform type: ${platformType}`);
+    }
+}
+async function getExportCoreConfig(cosmosConfig) {
+    return {
+        ...(await getSharedCoreConfig(cosmosConfig)),
+        devServerOn: false,
+        webRendererUrl: resolveUrlPath(cosmosConfig.publicUrl, RENDERER_FILENAME),
+    };
+}
+async function getSharedCoreConfig(cosmosConfig) {
+    const { rootDir, fixturesDir, fixtureFileSuffix } = cosmosConfig;
+    return {
+        projectId: await getProjectId(rootDir),
+        fixturesDir,
+        fixtureFileSuffix,
+    };
+}
+async function getProjectId(rootDir) {
+    const pkgPath = pkgUpSync({ cwd: rootDir });
+    if (!pkgPath) {
+        return rootDir.split(path.sep).pop();
+    }
+    try {
+        const pkg = JSON.parse(await readFile(pkgPath, 'utf8'));
+        return pkg.name || 'new-project';
+    }
+    catch (err) {
+        console.log('Failed to read package.json');
+        console.log(err);
+        return 'new-project';
+    }
+}
+function getPlaygroundHtml(playgroundArgs) {
+    return replaceKeys(getPlaygroundHtmlTemplate(), {
+        __PLAYGROUND_ARGS: JSON.stringify(playgroundArgs),
+    });
+}
+function getPlaygroundHtmlTemplate() {
+    return fs.readFileSync(getStaticPath('index.html'), 'utf8');
+}

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

@@ -0,0 +1,2 @@
+import { CosmosConfig } from '../cosmosConfig/types.js';
+export declare function getPlaygroundUrl(cosmosConfig: CosmosConfig): string;

package/dist/server/shared/playgroundUrl.js

@@ -0,0 +1,6 @@
+export function getPlaygroundUrl(cosmosConfig) {
+    const { hostname, port, https: httpsEnabled } = cosmosConfig;
+    const protocol = httpsEnabled ? 'https' : 'http';
+    const hostnameDisplay = hostname || 'localhost';
+    return `${protocol}://${hostnameDisplay}:${port}`;
+}

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,10 @@
+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;
+}

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

@@ -0,0 +1 @@
+export declare function resolveUrlPath(base: string, urlPath: string): string;

package/dist/server/shared/resolveUrlPath.js

@@ -0,0 +1,12 @@
+// resolveUrlPath('/', '_renderer.html') => '/_renderer.html'
+// resolveUrlPath('./', '_renderer.html') => '/_renderer.html'
+// resolveUrlPath('http://localhost:5000', '_renderer.html') => 'http://localhost:5000/_renderer.html'
+export function resolveUrlPath(base, urlPath) {
+    // The 'resolve://' protocol is only added when base is a relative URL.
+    const resolvedUrl = new URL(urlPath, new URL(base, 'resolve://'));
+    if (resolvedUrl.protocol === 'resolve:') {
+        const { pathname, search, hash } = resolvedUrl;
+        return pathname + search + hash;
+    }
+    return resolvedUrl.toString();
+}

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

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

package/dist/server/shared/staticPath.js

@@ -0,0 +1,4 @@
+import { fileURLToPath } from 'url';
+export function getStaticPath(relPath) {
+    return fileURLToPath(new URL(`../static/${relPath}`, import.meta.url));
+}

package/dist/{shared/static.d.ts → server/shared/staticServer.d.ts}

@@ -1,3 +1,2 @@
 import express from 'express';
-export declare function getStaticPath(relPath: string): string;
 export declare function serveStaticDir(app: express.Application, staticPath: string, publicUrl: string): void;

package/dist/server/shared/staticServer.js

@@ -0,0 +1,12 @@
+import express from 'express';
+import path from 'path';
+import { removeLeadingDot } from 'react-cosmos-core';
+export function serveStaticDir(app, staticPath, publicUrl) {
+    const relStaticPath = path.relative(process.cwd(), staticPath);
+    console.log(`[Cosmos] Serving static files from ${relStaticPath}`);
+    app.use(removeLeadingDot(publicUrl), express.static(staticPath, {
+        // Ensure Playground index loads instead an index.html found in the
+        // static path
+        index: false,
+    }));
+}

package/dist/{shared → server}/static/index.html

@@ -11,7 +11,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="_playground.js"></script>
+    <script src="playground.bundle.js"></script>
     <script>
       mountPlayground(__PLAYGROUND_ARGS);
     </script>

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

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

package/dist/server/testHelpers/cwd.js

@@ -0,0 +1,4 @@
+import path from 'path';
+export function getCwdPath(relPath = '.') {
+    return path.resolve(process.cwd(), relPath);
+}

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

@@ -0,0 +1,5 @@
+type ConsoleMockApi = {
+    expectLog: (msg: string) => void;
+};
+export declare function mockConsole<R>(cb: (api: ConsoleMockApi) => Promise<R>): Promise<R>;
+export {};