react-cosmos 6.2.4-canary.fb62804e.18 → 7.0.0-beta.1

package/README.md

@@ -4,7 +4,7 @@
 </p>
 
 <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.svg?style=flat&colorA=000000&colorB=000000" alt="" /></a>
+  <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>

package/config.schema.json

@@ -71,8 +71,8 @@
       "description": "Expose user imports and config required for the Cosmos renderer. Used with React Native and in custom integrations. When a path is specified it requires a file extension (eg. \"src/cosmos.imports.ts\"). [default: false]",
       "anyOf": [{ "type": "string", "minLength": 1 }, { "type": "boolean" }]
     },
-    "hostname": {
-      "description": "Dev server hostname. Set to null to accept connections with any hostname. [default: null]",
+    "host": {
+      "description": "Dev server host. Set to null to accept connections from any address that reaches the server. [default: null]",
       "anyOf": [{ "type": "string", "minLength": 1 }, { "type": "null" }]
     },
     "port": {
@@ -174,8 +174,8 @@
           "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: detects common index/main module paths]",
+        "mainScriptUrl": {
+          "description": "URL to custom main script (eg. \"/src/my-main.tsx\"). [default: detect main script URL]",
           "anyOf": [{ "type": "string", "minLength": 1 }, { "type": "null" }]
         },
         "port": {
@@ -216,12 +216,23 @@
       "type": "object",
       "additionalProperties": true,
       "properties": {
+        "rendererPreview": {
+          "description": "Options for the renderer preview UI plugin.",
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "backgroundColor": {
+              "description": "Background color of the iframe preview. [default: \"#fff\"]",
+              "type": "string"
+            }
+          }
+        },
         "responsivePreview": {
           "type": "object",
           "additionalProperties": false,
           "properties": {
             "devices": {
-              "description": "List of device viewports",
+              "description": "List of device viewports.",
               "type": "array",
               "items": {
                 "type": "object",

package/dist/corePlugins/fixtureWatcherPlugin.js

@@ -1,53 +1,53 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { pickRendererUrl, } from 'react-cosmos-core';
-import { getPlaygroundUrl } from '../shared/playgroundUrl.js';
+import { pickRendererUrl } from 'react-cosmos-core';
 import { updateFixtureListCache } from '../shared/serverFixtureList.js';
+import { getWebSocketUrl } from '../shared/webSocketUrl.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 fixtureWatcherPlugin = {
     name: 'fixtureWatcher',
-    async devServer({ cosmosConfig, platform }) {
-        const exposeImports = shouldExposeImports(platform, cosmosConfig);
+    async devServer({ config, platform }) {
+        const exposeImports = shouldExposeImports(platform, config);
         if (exposeImports) {
-            const modulePaths = await findUserModulePaths(cosmosConfig);
-            await generateImportsFile(cosmosConfig, 'dev', modulePaths);
+            const modulePaths = await findUserModulePaths(config);
+            await generateImportsFile(platform, config, 'dev', modulePaths);
         }
-        const watcher = await startFixtureWatcher(cosmosConfig, 'all', async () => {
-            const modulePaths = await findUserModulePaths(cosmosConfig);
-            updateFixtureListCache(cosmosConfig.rootDir, modulePaths.fixturePaths);
+        const watcher = await startFixtureWatcher(config, 'all', async () => {
+            const modulePaths = await findUserModulePaths(config);
+            updateFixtureListCache(config.rootDir, modulePaths.fixturePaths);
             if (exposeImports) {
-                generateImportsFile(cosmosConfig, 'dev', modulePaths);
+                generateImportsFile(platform, config, 'dev', modulePaths);
             }
         });
         return async () => {
             await watcher.close();
         };
     },
-    async export({ cosmosConfig }) {
-        if (shouldExposeImports('web', cosmosConfig)) {
-            const modulePaths = await findUserModulePaths(cosmosConfig);
-            await generateImportsFile(cosmosConfig, 'export', modulePaths);
+    async export({ config }) {
+        if (shouldExposeImports('web', config)) {
+            const modulePaths = await findUserModulePaths(config);
+            await generateImportsFile('web', config, 'export', modulePaths);
         }
     },
 };
-function shouldExposeImports(platform, cosmosConfig) {
-    return platform === 'native' || Boolean(cosmosConfig.exposeImports);
+function shouldExposeImports(platform, config) {
+    return platform === 'native' || Boolean(config.exposeImports);
 }
-async function generateImportsFile(cosmosConfig, command, modulePaths) {
-    const { exposeImports } = cosmosConfig;
+async function generateImportsFile(platform, config, mode, modulePaths) {
+    const { exposeImports } = config;
     const filePath = typeof exposeImports === 'string'
         ? exposeImports
-        : getDefaultFilePath(cosmosConfig.rootDir);
+        : getDefaultFilePath(config.rootDir);
     const typeScript = /\.tsx?$/.test(filePath);
     const rendererConfig = {
-        playgroundUrl: getPlaygroundUrl(cosmosConfig),
-        rendererUrl: pickRendererUrl(cosmosConfig.rendererUrl, command),
+        webSocketUrl: mode === 'dev' ? getWebSocketUrl(config) : null,
+        rendererUrl: platform === 'web' ? pickRendererUrl(config.rendererUrl, mode) : null,
     };
     const fileSource = generateUserImports({
-        cosmosConfig,
+        config,
         modulePaths,
         rendererConfig,
         relativeToDir: path.dirname(filePath),

package/dist/corePlugins/fixturesJsonPlugin.js

@@ -6,29 +6,29 @@ import { findUserModulePaths } from '../userModules/findUserModulePaths.js';
 import { importKeyPath } from '../userModules/shared.js';
 export const fixturesJsonPlugin = {
     name: 'fixturesJson',
-    devServer({ cosmosConfig, expressApp }) {
-        expressApp.get('/cosmos.fixtures.json', async (req, res) => {
-            res.json(await createFixtureItems(cosmosConfig, 'dev'));
+    devServer({ config, app }) {
+        app.get('/cosmos.fixtures.json', async (_, res) => {
+            res.json(await createFixtureItems(config, 'dev'));
         });
     },
-    async export({ cosmosConfig }) {
-        const { exportPath } = cosmosConfig;
-        const json = await createFixtureItems(cosmosConfig, 'export');
+    async export({ config }) {
+        const { exportPath } = config;
+        const json = await createFixtureItems(config, 'export');
         await fs.writeFile(path.join(exportPath, 'cosmos.fixtures.json'), JSON.stringify(json, null, 2));
     },
 };
-async function createFixtureItems(cosmosConfig, command) {
-    const rendererUrl = pickRendererUrl(cosmosConfig.rendererUrl, command);
+async function createFixtureItems(config, mode) {
+    const rendererUrl = pickRendererUrl(config.rendererUrl, mode);
     if (!rendererUrl) {
         return {
             rendererUrl: null,
             fixtures: [],
         };
     }
-    const { fixturesDir, fixtureFileSuffix } = cosmosConfig;
-    const { fixturePaths } = await findUserModulePaths(cosmosConfig);
+    const { fixturesDir, fixtureFileSuffix } = config;
+    const { fixturePaths } = await findUserModulePaths(config);
     const fixtures = fixturePaths.map(filePath => {
-        const relPath = importKeyPath(filePath, cosmosConfig.rootDir);
+        const relPath = importKeyPath(filePath, config.rootDir);
         const fixtureId = { path: relPath };
         return {
             filePath: relPath,

package/dist/corePlugins/httpProxyPlugin.js

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

package/dist/corePlugins/index.js

@@ -4,12 +4,14 @@ import { httpProxyPlugin } from './httpProxyPlugin.js';
 import { openFilePlugin } from './openFilePlugin.js';
 import { pluginEndpointPlugin } from './pluginEndpointPlugin.js';
 import { portRetryPlugin } from './portRetryPlugin.js';
+import { remoteRendererUrlPlugin } from './remoteRendererUrlPlugin.js';
 export const coreServerPlugins = [
     portRetryPlugin,
     fixturesJsonPlugin,
     httpProxyPlugin,
     openFilePlugin,
     pluginEndpointPlugin,
+    remoteRendererUrlPlugin,
 ];
 // Omit starting chokidar in unit tests for performance reasons
 if (process.env.VITEST_WORKER_ID === undefined) {

package/dist/corePlugins/openFilePlugin.js

@@ -4,14 +4,14 @@ import open from 'open';
 import path from 'path';
 export const openFilePlugin = {
     name: 'openFile',
-    devServer({ cosmosConfig, expressApp }) {
-        expressApp.get('/_open', (req, res) => {
+    devServer({ config, app }) {
+        app.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);
+            const absFilePath = resolveFilePath(config.rootDir, filePath);
             if (!fs.existsSync(absFilePath)) {
                 res.status(404).send(`File not found at path: ${absFilePath}`);
                 return;

package/dist/corePlugins/pluginEndpointPlugin.js

@@ -2,8 +2,8 @@ import path from 'node:path';
 import { resolveSilent } from '../utils/resolveSilent.js';
 export const pluginEndpointPlugin = {
     name: 'pluginEndpoint',
-    devServer({ expressApp }) {
-        expressApp.get('/_plugin/*.js', (req, res) => {
+    devServer({ app }) {
+        app.get('/_plugin/*.js', (req, res) => {
             const modulePath = req.params['0'];
             if (!modulePath) {
                 res.sendStatus(404);

package/dist/corePlugins/portRetryPlugin.js

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

package/dist/corePlugins/remoteRendererUrlPlugin.d.ts

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

package/dist/corePlugins/remoteRendererUrlPlugin.js

@@ -0,0 +1,9 @@
+import { getRemoteRendererUrl } from '../shared/remoteRendererUrl.js';
+export const remoteRendererUrlPlugin = {
+    name: 'remoteRendererUrlPlugin',
+    devServer({ config, app }) {
+        app.get('/_cosmos/remote-renderer-url', (_, res) => {
+            res.send({ url: getRemoteRendererUrl(config) });
+        });
+    },
+};

package/dist/cosmosConfig/createCosmosConfig.js

@@ -12,7 +12,7 @@ export function createCosmosConfig(rootDir, cosmosConfigInput = {}) {
         fixtureFileSuffix: getFixtureFileSuffix(cosmosConfigInput),
         fixturesDir: getFixturesDir(cosmosConfigInput),
         globalImports: getGlobalImports(cosmosConfigInput, rootDir),
-        hostname: getHostname(cosmosConfigInput),
+        host: getHost(cosmosConfigInput),
         https: getHttps(cosmosConfigInput),
         httpsOptions: getHttpsOptions(cosmosConfigInput, rootDir),
         ignore: getIgnore(cosmosConfigInput),
@@ -76,8 +76,8 @@ function getExposeImports(cosmosConfigInput, rootDir) {
         ? path.resolve(rootDir, exposeImports)
         : exposeImports;
 }
-function getHostname({ hostname = null }) {
-    return hostname;
+function getHost({ host = null, hostname = null }) {
+    return host ?? hostname;
 }
 function getPort(cosmosConfigInput) {
     const cliArgs = getCliArgs();

package/dist/cosmosConfig/shared.d.ts

@@ -1,2 +1,4 @@
 export declare function getCurrentDir(): string;
-export declare function importConfigFile(cosmosConfigPath: string): Promise<Partial<import("./types.js").CosmosConfig>>;
+export declare function importConfigFile(cosmosConfigPath: string): Promise<Partial<import("./types.js").CosmosConfig & {
+    hostname: null | string;
+}>>;

package/dist/cosmosConfig/types.d.ts

@@ -15,7 +15,7 @@ export type CosmosConfig = {
     fixtureFileSuffix: string;
     fixturesDir: string;
     globalImports: string[];
-    hostname: null | string;
+    host: null | string;
     https: boolean;
     httpsOptions: null | HttpsOptions;
     ignore: string[];
@@ -34,5 +34,7 @@ export type CosmosConfig = {
     };
 };
 export type CosmosDomConfigInput = Partial<CosmosDomConfig>;
-export type CosmosConfigInput = Partial<CosmosConfig>;
+export type CosmosConfigInput = Partial<CosmosConfig & {
+    hostname: null | string;
+}>;
 export {};

package/dist/cosmosPlugin/pluginConfigs.d.ts

@@ -1,8 +1,8 @@
 import { CosmosPluginConfig } from 'react-cosmos-core';
 import { CosmosConfig } from '../cosmosConfig/types.js';
 type GetPluginConfigArgs = {
-    cosmosConfig: CosmosConfig;
+    config: CosmosConfig;
     relativePaths: boolean;
 };
-export declare function getPluginConfigs({ cosmosConfig, relativePaths, }: GetPluginConfigArgs): Promise<CosmosPluginConfig[]>;
+export declare function getPluginConfigs({ config, relativePaths, }: GetPluginConfigArgs): Promise<CosmosPluginConfig[]>;
 export {};

package/dist/cosmosPlugin/pluginConfigs.js

@@ -1,7 +1,7 @@
 import { findCosmosPluginConfigs } from './findCosmosPluginConfigs.js';
 import { readCosmosPluginConfig } from './readCosmosPluginConfig.js';
-export async function getPluginConfigs({ cosmosConfig, relativePaths, }) {
-    const { rootDir, detectLocalPlugins, disablePlugins, plugins, exportPath } = cosmosConfig;
+export async function getPluginConfigs({ config, relativePaths, }) {
+    const { rootDir, detectLocalPlugins, disablePlugins, plugins, exportPath } = config;
     if (disablePlugins)
         return [];
     const moduleConfigs = await Promise.all(plugins.map(configPath => readCosmosPluginConfig({ rootDir, configPath, relativePaths })));

package/dist/cosmosPlugin/types.d.ts

@@ -1,19 +1,19 @@
-import express from 'express';
+import { Express } from 'express';
 import http from 'http';
-import { CosmosCommand, MessageType } from 'react-cosmos-core';
+import { CosmosMode, MessageType } from 'react-cosmos-core';
 import { CosmosConfig } from '../cosmosConfig/types.js';
 export type CosmosPlatform = 'web' | 'native';
 export type CosmosConfigPluginArgs = {
-    cosmosConfig: CosmosConfig;
-    command: CosmosCommand;
+    config: CosmosConfig;
+    mode: CosmosMode;
     platform: CosmosPlatform;
 };
 export type CosmosConfigPlugin = (args: CosmosConfigPluginArgs) => Promise<CosmosConfig> | CosmosConfig;
 export type DevServerPluginArgs = {
-    cosmosConfig: CosmosConfig;
+    config: CosmosConfig;
     platform: CosmosPlatform;
     httpServer: http.Server;
-    expressApp: express.Express;
+    app: Express;
     sendMessage(msg: MessageType): unknown;
 };
 export type DevServerPluginCleanupCallback = () => unknown;
@@ -21,7 +21,7 @@ export type DevServerPluginReturnValue = void | null | DevServerPluginCleanupCal
 export type DevServerPluginReturn = DevServerPluginReturnValue | Promise<DevServerPluginReturnValue>;
 export type DevServerPlugin = (args: DevServerPluginArgs) => DevServerPluginReturn;
 export type ExportPluginArgs = {
-    cosmosConfig: CosmosConfig;
+    config: CosmosConfig;
 };
 export type ExportPlugin = (args: ExportPluginArgs) => unknown;
 export type CosmosServerPlugin = {

package/dist/devServer/expressApp.d.ts

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

package/dist/devServer/expressApp.js

@@ -2,18 +2,18 @@ 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(platform, cosmosConfig, pluginConfigs) {
+export async function createExpressApp(platform, config, pluginConfigs) {
     const app = express();
-    app.get('/', async (req, res) => {
-        res.send(await getDevPlaygroundHtml(platform, cosmosConfig, pluginConfigs));
+    app.get('/', async (_, res) => {
+        res.send(await getDevPlaygroundHtml(platform, config, pluginConfigs));
     });
-    app.get('/playground.bundle.js', (req, res) => {
+    app.get('/playground.bundle.js', (_, res) => {
         res.sendFile(resolve('react-cosmos-ui/dist/playground.bundle.js'));
     });
-    app.get('/playground.bundle.js.map', (req, res) => {
+    app.get('/playground.bundle.js.map', (_, res) => {
         res.sendFile(resolve('react-cosmos-ui/dist/playground.bundle.js.map'));
     });
-    app.get('/_cosmos.ico', (req, res) => {
+    app.get('/_cosmos.ico', (_, res) => {
         res.sendFile(getStaticPath('favicon.ico'));
     });
     return app;

package/dist/devServer/httpServer.d.ts

@@ -2,7 +2,7 @@ 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<{
+export declare function createHttpServer(config: 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>;

package/dist/devServer/httpServer.js

@@ -1,42 +1,22 @@
-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)
+import { getHttpsCreds } from './httpsCreds.js';
+export async function createHttpServer(config, requestListener) {
+    const server = config.https
+        ? https.createServer(await getHttpsCreds(config), requestListener)
         : http.createServer(requestListener);
     async function start() {
         await new Promise(resolve => {
-            if (hostname === null) {
-                server.listen(port, resolve);
+            if (config.host === null) {
+                server.listen(config.port, resolve);
             }
             else {
-                server.listen(port, hostname, resolve);
+                server.listen(config.port, config.host, 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/httpsCreds.d.ts

@@ -0,0 +1,7 @@
+import { CosmosConfig } from '../cosmosConfig/types.js';
+type HttpsCreds = {
+    key: string;
+    cert: string;
+};
+export declare function getHttpsCreds(config: CosmosConfig): Promise<HttpsCreds>;
+export {};

package/dist/devServer/httpsCreds.js

@@ -0,0 +1,24 @@
+import fs from 'fs';
+import pem from 'pem';
+let _cache;
+export async function getHttpsCreds(config) {
+    const { httpsOptions } = config;
+    if (httpsOptions)
+        return {
+            key: fs.readFileSync(httpsOptions.keyPath, 'utf8'),
+            cert: fs.readFileSync(httpsOptions.certPath, 'utf8'),
+        };
+    if (_cache)
+        return _cache;
+    console.log('[Cosmos] Generating HTTPS certificate');
+    return await new Promise((resolve, reject) => {
+        pem.createCertificate({ days: 1000, selfSigned: true }, (err, keys) => {
+            if (err)
+                reject(err);
+            else {
+                _cache = { key: keys.serviceKey, cert: keys.certificate };
+                resolve(_cache);
+            }
+        });
+    });
+}

package/dist/devServer/startDevServer.js

@@ -4,33 +4,34 @@ import { getPluginConfigs } from '../cosmosPlugin/pluginConfigs.js';
 import { applyServerConfigPlugins } from '../shared/applyServerConfigPlugins.js';
 import { getServerPlugins } from '../shared/getServerPlugins.js';
 import { logPluginInfo } from '../shared/logPluginInfo.js';
+import { logPlaygroundUrls } from '../shared/playgroundUrl.js';
 import { serveStaticDir } from '../shared/staticServer.js';
 import { createExpressApp } from './expressApp.js';
 import { createHttpServer } from './httpServer.js';
 import { createMessageHandler } from './messageHandler.js';
 export async function startDevServer(platform) {
-    let cosmosConfig = await detectCosmosConfig();
+    let config = await detectCosmosConfig();
     logCosmosConfigInfo();
     const pluginConfigs = await getPluginConfigs({
-        cosmosConfig,
+        config,
         // 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 serverPlugins = await getServerPlugins(pluginConfigs, cosmosConfig.rootDir);
-    cosmosConfig = await applyServerConfigPlugins({
-        cosmosConfig,
+    const serverPlugins = await getServerPlugins(pluginConfigs, config.rootDir);
+    config = await applyServerConfigPlugins({
+        config,
         serverPlugins,
-        command: 'dev',
+        mode: 'dev',
         platform,
     });
-    const app = await createExpressApp(platform, cosmosConfig, pluginConfigs);
-    const httpServer = await createHttpServer(cosmosConfig, app);
+    const app = await createExpressApp(platform, config, pluginConfigs);
+    const httpServer = await createHttpServer(config, app);
     const msgHandler = createMessageHandler(httpServer.server);
-    if (cosmosConfig.staticPath) {
-        serveStaticDir(app, cosmosConfig.staticPath, cosmosConfig.publicUrl);
+    if (config.staticPath) {
+        serveStaticDir(app, config.staticPath, config.publicUrl);
     }
     // Make Playground available as soon as possible and show a loading screen
     // while plugins are initializing
@@ -46,10 +47,10 @@ export async function startDevServer(platform) {
             if (!plugin.devServer)
                 continue;
             const pluginReturn = await plugin.devServer({
-                cosmosConfig,
+                config,
                 platform,
                 httpServer: httpServer.server,
-                expressApp: app,
+                app,
                 sendMessage: msgHandler.sendMessage,
             });
             if (typeof pluginReturn === 'function') {
@@ -60,7 +61,7 @@ export async function startDevServer(platform) {
                     catch (err) {
                         // Log when a plugin fails to clean up, but continue to attempt
                         // to clean up the remaining plugins
-                        console.log(`[Cosmos][plugin:${plugin.name}] Dev server cleanup failed`);
+                        console.log(`[Cosmos][${plugin.name}] Dev server cleanup failed`);
                         console.log(err);
                     }
                 });
@@ -69,19 +70,20 @@ export async function startDevServer(platform) {
         catch (err) {
             // Abort starting server if a plugin init fails and attempt cleanup of all
             // plugins that have already initialized
-            console.log(`[Cosmos][plugin:${plugin.name}] Dev server init failed`);
+            console.log(`[Cosmos][${plugin.name}] Dev server init failed`);
             cleanUp();
             throw err;
         }
     }
+    logPlaygroundUrls(config);
     return cleanUp;
 }
 function logCosmosConfigInfo() {
     const cosmosConfigPath = detectCosmosConfigPath();
     if (!cosmosConfigPath) {
-        console.log(`[Cosmos] Using default cosmos config`);
+        console.log(`[Cosmos] Using default Cosmos config`);
         return;
     }
     const relConfigPath = path.relative(process.cwd(), cosmosConfigPath);
-    console.log(`[Cosmos] Using cosmos config found at ${relConfigPath}`);
+    console.log(`[Cosmos] Using config found at ${relConfigPath}`);
 }