react-cosmos 6.2.3 → 6.2.4-canary.0ff5b03.0

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": {
@@ -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,8 +1,8 @@
 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';
@@ -13,13 +13,13 @@ export const fixtureWatcherPlugin = {
         const exposeImports = shouldExposeImports(platform, cosmosConfig);
         if (exposeImports) {
             const modulePaths = await findUserModulePaths(cosmosConfig);
-            await generateImportsFile(cosmosConfig, 'dev', modulePaths);
+            await generateImportsFile(platform, cosmosConfig, 'dev', modulePaths);
         }
         const watcher = await startFixtureWatcher(cosmosConfig, 'all', async () => {
             const modulePaths = await findUserModulePaths(cosmosConfig);
             updateFixtureListCache(cosmosConfig.rootDir, modulePaths.fixturePaths);
             if (exposeImports) {
-                generateImportsFile(cosmosConfig, 'dev', modulePaths);
+                generateImportsFile(platform, cosmosConfig, 'dev', modulePaths);
             }
         });
         return async () => {
@@ -29,22 +29,26 @@ export const fixtureWatcherPlugin = {
     async export({ cosmosConfig }) {
         if (shouldExposeImports('web', cosmosConfig)) {
             const modulePaths = await findUserModulePaths(cosmosConfig);
-            await generateImportsFile(cosmosConfig, 'export', modulePaths);
+            await generateImportsFile('web', cosmosConfig, 'export', modulePaths);
         }
     },
 };
 function shouldExposeImports(platform, cosmosConfig) {
     return platform === 'native' || Boolean(cosmosConfig.exposeImports);
 }
-async function generateImportsFile(cosmosConfig, command, modulePaths) {
+async function generateImportsFile(platform, cosmosConfig, mode, modulePaths) {
     const { exposeImports } = cosmosConfig;
     const filePath = typeof exposeImports === 'string'
         ? exposeImports
         : getDefaultFilePath(cosmosConfig.rootDir);
     const typeScript = /\.tsx?$/.test(filePath);
     const rendererConfig = {
-        playgroundUrl: getPlaygroundUrl(cosmosConfig),
-        rendererUrl: pickRendererUrl(cosmosConfig.rendererUrl, command),
+        webSocketUrl: mode === 'dev'
+            ? getWebSocketUrl(cosmosConfig, platform === 'native')
+            : null,
+        rendererUrl: platform === 'web'
+            ? pickRendererUrl(cosmosConfig.rendererUrl, mode)
+            : null,
     };
     const fileSource = generateUserImports({
         cosmosConfig,

package/dist/corePlugins/fixturesJsonPlugin.js

@@ -17,8 +17,8 @@ export const fixturesJsonPlugin = {
         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(cosmosConfig, mode) {
+    const rendererUrl = pickRendererUrl(cosmosConfig.rendererUrl, mode);
     if (!rendererUrl) {
         return {
             rendererUrl: null,

package/dist/corePlugins/portRetryPlugin.js

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

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/types.d.ts

@@ -1,11 +1,11 @@
 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;
+    mode: CosmosMode;
     platform: CosmosPlatform;
 };
 export type CosmosConfigPlugin = (args: CosmosConfigPluginArgs) => Promise<CosmosConfig> | CosmosConfig;

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

@@ -3,21 +3,20 @@ 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)
+export async function createHttpServer(config, requestListener) {
+    const server = config.https
+        ? https.createServer(await getHttpsOpts(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)}`);
+        console.log(`[Cosmos] See you at ${getPlaygroundUrl(config)}`);
     }
     async function stop() {
         await new Promise(resolve => server.close(resolve));

package/dist/devServer/startDevServer.js

@@ -23,7 +23,7 @@ export async function startDevServer(platform) {
     cosmosConfig = await applyServerConfigPlugins({
         cosmosConfig,
         serverPlugins,
-        command: 'dev',
+        mode: 'dev',
         platform,
     });
     const app = await createExpressApp(platform, cosmosConfig, pluginConfigs);

package/dist/export/generateExport.js

@@ -21,7 +21,7 @@ export async function generateExport() {
     cosmosConfig = await applyServerConfigPlugins({
         cosmosConfig,
         serverPlugins,
-        command: 'export',
+        mode: 'export',
         platform: 'web',
     });
     // Clear previous export (or other files at export path)

package/dist/getFixtures/getFixtures.js

@@ -45,7 +45,7 @@ function getFlatFixtureTree(cosmosConfig, fixtures) {
 }
 function getPlaygroundFixtureUrl(cosmosConfig, fixtureId) {
     const baseUrl = getPlaygroundUrl(cosmosConfig);
-    const query = buildPlaygroundQueryString({ fixtureId });
+    const query = buildPlaygroundQueryString({ fixture: fixtureId });
     return `${baseUrl}/${query}`;
 }
 function createFixtureElementGetter(fixture, fixtureOptions, fixturePath, decoratorsByPath) {

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './getFixtures/getFixtures.js';
 export * from './shared/findNextAvailablePort.js';
 export * from './shared/playgroundUrl.js';
 export * from './shared/staticServer.js';
+export * from './shared/webSocketUrl.js';
 export * from './testHelpers/cwd.js';
 export * from './userModules/findUserModulePaths.js';
 export * from './userModules/fixtureWatcher.js';

package/dist/index.js

@@ -9,6 +9,7 @@ export * from './getFixtures/getFixtures.js';
 export * from './shared/findNextAvailablePort.js';
 export * from './shared/playgroundUrl.js';
 export * from './shared/staticServer.js';
+export * from './shared/webSocketUrl.js';
 export * from './testHelpers/cwd.js';
 export * from './userModules/findUserModulePaths.js';
 export * from './userModules/fixtureWatcher.js';

package/dist/shared/applyServerConfigPlugins.d.ts

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

package/dist/shared/applyServerConfigPlugins.js

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

package/dist/shared/playgroundUrl.js

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

package/dist/shared/webSocketUrl.d.ts

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

package/dist/shared/webSocketUrl.js

@@ -0,0 +1,22 @@
+import * as os from 'node:os';
+export function getWebSocketUrl(config, ipAddress) {
+    const protocol = config.https ? 'wss' : 'ws';
+    const host = config.host ?? (ipAddress ? getIpAddress() : 'localhost');
+    return `${protocol}://${host}:${config.port}`;
+}
+function getIpAddress() {
+    const nets = os.networkInterfaces();
+    for (const name of Object.keys(nets)) {
+        if (nets[name]) {
+            for (const net of nets[name]) {
+                // Skip over non-IPv4 and internal (i.e. 127.0.0.1) addresses
+                // 'IPv4' is in Node <= 17, from 18 it's a number 4 or 6
+                const familyV4Value = typeof net.family === 'string' ? 'IPv4' : 4;
+                if (net.family === familyV4Value && !net.internal) {
+                    return net.address;
+                }
+            }
+        }
+    }
+    return '127.0.0.1';
+}

package/dist/static/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <title>React Cosmos</title>
     <link rel="icon" href="_cosmos.ico" />

package/dist/tsconfig.build.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/client.ts","../src/index.ts","../src/vitest.ts","../src/@types/launch-editor.d.ts","../src/@types/mdx.d.ts","../src/@types/yargs.d.ts","../src/coreplugins/fixturewatcherplugin.ts","../src/coreplugins/fixturesjsonplugin.ts","../src/coreplugins/httpproxyplugin.ts","../src/coreplugins/index.ts","../src/coreplugins/openfileplugin.ts","../src/coreplugins/pluginendpointplugin.ts","../src/coreplugins/portretryplugin.ts","../src/cosmosconfig/createcosmosconfig.ts","../src/cosmosconfig/detectcosmosconfig.ts","../src/cosmosconfig/getcosmosconfigatpath.ts","../src/cosmosconfig/shared.ts","../src/cosmosconfig/types.ts","../src/cosmosplugin/findcosmospluginconfigs.ts","../src/cosmosplugin/pluginconfigs.ts","../src/cosmosplugin/readcosmospluginconfig.ts","../src/cosmosplugin/types.ts","../src/devserver/expressapp.ts","../src/devserver/httpserver.ts","../src/devserver/messagehandler.ts","../src/devserver/startdevserver.ts","../src/export/generateexport.ts","../src/getfixtures/getfixtures.ts","../src/getfixtures/importusermodules.ts","../src/shared/applyserverconfigplugins.ts","../src/shared/findnextavailableport.ts","../src/shared/getserverplugins.ts","../src/shared/importserverplugins.ts","../src/shared/logplugininfo.ts","../src/shared/playgroundhtml.ts","../src/shared/playgroundurl.ts","../src/shared/serverfixturelist.ts","../src/shared/staticpath.ts","../src/shared/staticserver.ts","../src/usermodules/findusermodulepaths.ts","../src/usermodules/fixturewatcher.ts","../src/usermodules/generateuserimports.ts","../src/usermodules/shared.ts","../src/usermodules/userimportslazytemplate.ts","../src/usermodules/userimportstemplate.ts","../src/utils/cli.ts","../src/utils/findup.ts","../src/utils/fs.ts","../src/utils/isnodeerror.ts","../src/utils/json.ts","../src/utils/requiremodule.ts","../src/utils/resolve.ts","../src/utils/resolveloose.ts","../src/utils/resolvesilent.ts","../src/utils/slash.ts"],"version":"5.7.2"}
+{"root":["../src/client.ts","../src/index.ts","../src/vitest.ts","../src/@types/launch-editor.d.ts","../src/@types/mdx.d.ts","../src/@types/yargs.d.ts","../src/corePlugins/fixtureWatcherPlugin.ts","../src/corePlugins/fixturesJsonPlugin.ts","../src/corePlugins/httpProxyPlugin.ts","../src/corePlugins/index.ts","../src/corePlugins/openFilePlugin.ts","../src/corePlugins/pluginEndpointPlugin.ts","../src/corePlugins/portRetryPlugin.ts","../src/cosmosConfig/createCosmosConfig.ts","../src/cosmosConfig/detectCosmosConfig.ts","../src/cosmosConfig/getCosmosConfigAtPath.ts","../src/cosmosConfig/shared.ts","../src/cosmosConfig/types.ts","../src/cosmosPlugin/findCosmosPluginConfigs.ts","../src/cosmosPlugin/pluginConfigs.ts","../src/cosmosPlugin/readCosmosPluginConfig.ts","../src/cosmosPlugin/types.ts","../src/devServer/expressApp.ts","../src/devServer/httpServer.ts","../src/devServer/messageHandler.ts","../src/devServer/startDevServer.ts","../src/export/generateExport.ts","../src/getFixtures/getFixtures.ts","../src/getFixtures/importUserModules.ts","../src/shared/applyServerConfigPlugins.ts","../src/shared/findNextAvailablePort.ts","../src/shared/getServerPlugins.ts","../src/shared/importServerPlugins.ts","../src/shared/logPluginInfo.ts","../src/shared/playgroundHtml.ts","../src/shared/playgroundUrl.ts","../src/shared/serverFixtureList.ts","../src/shared/staticPath.ts","../src/shared/staticServer.ts","../src/shared/webSocketUrl.ts","../src/userModules/findUserModulePaths.ts","../src/userModules/fixtureWatcher.ts","../src/userModules/generateUserImports.ts","../src/userModules/shared.ts","../src/userModules/userImportsLazyTemplate.ts","../src/userModules/userImportsTemplate.ts","../src/utils/cli.ts","../src/utils/findUp.ts","../src/utils/fs.ts","../src/utils/isNodeError.ts","../src/utils/json.ts","../src/utils/requireModule.ts","../src/utils/resolve.ts","../src/utils/resolveLoose.ts","../src/utils/resolveSilent.ts","../src/utils/slash.ts"],"version":"5.7.3"}

package/dist/userModules/userImportsLazyTemplate.js

@@ -19,12 +19,13 @@ export function userImportsLazyTemplate({ globalImports, modulePaths: { fixtureP
     let importGroups = [globalImportItems];
     if (typeScript) {
         importGroups.unshift([
-            `import { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';`,
+            `import type { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';`,
         ]);
     }
     return `
-// This file is automatically generated by Cosmos. Add it to .gitignore and
-// only edit if you know what you're doing.
+// NOTE: This file is auto-generated by React Cosmos.
+// It imports all fixture and decorator modules, making them available to the
+// React Cosmos renderer along with the renderer config.
 ${importsStr(importGroups)}
 export const rendererConfig${ts(': RendererConfig')} = ${rendererConfigStr};
 

package/dist/userModules/userImportsTemplate.js

@@ -21,12 +21,13 @@ export function userImportsTemplate({ globalImports, modulePaths: { fixturePaths
     let importGroups = [globalImportItems, fixtureImports, decoratorImports];
     if (typeScript) {
         importGroups.unshift([
-            `import { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';`,
+            `import type { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';`,
         ]);
     }
     return `
-// This file is automatically generated by Cosmos. Add it to .gitignore and
-// only edit if you know what you're doing.
+// NOTE: This file is auto-generated by React Cosmos.
+// It imports all fixture and decorator modules, making them available to the
+// React Cosmos renderer along with the renderer config.
 ${importsStr(importGroups)}
 export const rendererConfig${ts(': RendererConfig')} = ${rendererConfigStr};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos",
-  "version": "6.2.3",
+  "version": "6.2.4-canary.0ff5b03.0+0ff5b03",
   "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",
@@ -16,9 +16,9 @@
     "micromatch": "4.0.8",
     "open": "10.1.0",
     "pem": "1.15.1",
-    "react-cosmos-core": "^6.2.0",
-    "react-cosmos-renderer": "^6.2.0",
-    "react-cosmos-ui": "^6.2.3",
+    "react-cosmos-core": "6.2.4-canary.0ff5b03.0+0ff5b03",
+    "react-cosmos-renderer": "6.2.4-canary.0ff5b03.0+0ff5b03",
+    "react-cosmos-ui": "6.2.4-canary.0ff5b03.0+0ff5b03",
     "ws": "8.18.0",
     "yargs": "17.7.2"
   },
@@ -27,5 +27,5 @@
     "cosmos-export": "./bin/cosmos-export.js",
     "cosmos-native": "./bin/cosmos-native.js"
   },
-  "gitHead": "3fd36c822e406c3fd1973c20b13ae182973493fa"
+  "gitHead": "0ff5b03e72a598aa75d858fe01b5e9d7a89fbdc4"
 }