Expose custom renderer URL (#1495)

* Move pickRendererUrl helper to core package

* Update viteDevServerPlugin.ts

* Add rendererUrl to custom renderer config

* Make test less flaky

packages/react-cosmos-core/src/index.ts

@@ -17,6 +17,7 @@ export * from './renderer/rendererConfig.js';
 export * from './renderer/rendererConnect.js';
 export * from './renderer/rendererQueryString.js';
 export * from './renderer/rendererUrl.js';
+export * from './server/serverTypes.js';
 export * from './userModules/fixtureTypes.js';
 export * from './userModules/getFixtureFromExport.js';
 export * from './userModules/getFixtureList.js';

packages/react-cosmos-core/src/renderer/rendererConfig.ts

@@ -1,3 +1,7 @@
 export type RendererConfig = {
   playgroundUrl: string;
 };
+
+export type CustomRendererConfig = RendererConfig & {
+  rendererUrl: null | string | { dev: string; export: string };
+};

packages/react-cosmos-core/src/renderer/rendererUrl.ts

@@ -1,4 +1,5 @@
 import { Base64 } from 'js-base64';
+import { CosmosCommand } from '../server/serverTypes.js';
 import { FixtureId } from '../userModules/fixtureTypes.js';
 import { buildRendererQueryString } from './rendererQueryString.js';
 
@@ -11,7 +12,7 @@ export function createRendererUrl(
     if (!fixtureId) return replaceFixtureVar(rendererUrl, 'index');
 
     return (
-      replaceFixtureVar(rendererUrl, encodeFixtureId(fixtureId)) +
+      replaceFixtureVar(rendererUrl, encodeRendererUrlFixture(fixtureId)) +
       buildRendererQueryString({ locked })
     );
   } else {
@@ -22,7 +23,16 @@ export function createRendererUrl(
   }
 }
 
-export function encodeFixtureId(fixtureId: FixtureId) {
+export function pickRendererUrl(
+  rendererUrl: null | string | { dev: string; export: string },
+  command: CosmosCommand
+) {
+  return rendererUrl && typeof rendererUrl === 'object'
+    ? rendererUrl[command]
+    : rendererUrl;
+}
+
+export function encodeRendererUrlFixture(fixtureId: FixtureId) {
   return Base64.encode(JSON.stringify(fixtureId));
 }
 

packages/react-cosmos-core/src/server/serverTypes.ts

@@ -0,0 +1 @@
+export type CosmosCommand = 'dev' | 'export';

packages/react-cosmos-plugin-vite/src/viteDevServerPlugin.ts

@@ -1,8 +1,5 @@
-import {
-  DevServerPluginArgs,
-  pickRendererUrl,
-  startFixtureWatcher,
-} from 'react-cosmos';
+import { DevServerPluginArgs, startFixtureWatcher } from 'react-cosmos';
+import { pickRendererUrl } from 'react-cosmos-core';
 import { createServer } from 'vite';
 import { createCosmosViteConfig } from './createCosmosViteConfig.js';
 import {

packages/react-cosmos-renderer/src/testHelpers/mountTestRenderer.tsx

@@ -131,7 +131,7 @@ function createModuleWrappers(
 function dynamicImportWrapper<T>(module: T) {
   return new Promise<T>(async resolve => {
     // Simulate module download time
-    await delay(Math.round(Math.random() * 50));
+    await delay(25 + Math.round(Math.random() * 25));
     await act(() => {
       resolve(module);
     });

packages/react-cosmos/src/corePlugins/exposeImports.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
+import { CustomRendererConfig } from 'react-cosmos-core';
 import { CosmosConfig } from '../cosmosConfig/types.js';
 import { CosmosPlatform, CosmosServerPlugin } from '../cosmosPlugin/types.js';
 import { getPlaygroundUrl } from '../shared/playgroundUrl.js';
@@ -43,8 +44,9 @@ async function generateImportsFile(cosmosConfig: CosmosConfig) {
 
   const rendererConfig = {
     playgroundUrl: getPlaygroundUrl(cosmosConfig),
+    rendererUrl: cosmosConfig.rendererUrl,
   };
-  const fileSource = generateUserImports({
+  const fileSource = generateUserImports<CustomRendererConfig>({
     cosmosConfig,
     rendererConfig,
     relativeToDir: path.dirname(filePath),

packages/react-cosmos/src/cosmosPlugin/types.ts

@@ -1,10 +1,8 @@
 import express from 'express';
 import http from 'http';
-import { MessageType } from 'react-cosmos-core';
+import { CosmosCommand, MessageType } from 'react-cosmos-core';
 import { CosmosConfig } from '../cosmosConfig/types.js';
 
-export type CosmosCommand = 'dev' | 'export';
-
 export type CosmosPlatform = 'web' | 'native';
 
 export type CosmosConfigPluginArgs = {

packages/react-cosmos/src/getFixtures/getFixtures.ts

@@ -10,12 +10,12 @@ import {
   getFixtureFromExport,
   getFixtureListFromExports,
   getSortedDecoratorsForFixturePath,
+  pickRendererUrl,
   ReactDecorator,
   ReactFixture,
 } from 'react-cosmos-core';
 import { createFixtureNode, decorateFixture } from 'react-cosmos-renderer';
 import { CosmosConfig } from '../cosmosConfig/types.js';
-import { pickRendererUrl } from '../shared/pickRendererUrl.js';
 import { importUserModules } from '../userModules/importUserModules.js';
 
 export type FixtureApi = {

packages/react-cosmos/src/index.ts

@@ -7,7 +7,6 @@ export * from './cosmosPlugin/pluginConfigs.js';
 export * from './cosmosPlugin/types.js';
 export * from './getFixtures/getFixtures.js';
 export * from './shared/findNextAvailablePort.js';
-export * from './shared/pickRendererUrl.js';
 export * from './shared/playgroundUrl.js';
 export * from './shared/staticServer.js';
 export * from './testHelpers/cwd.js';

packages/react-cosmos/src/shared/playgroundHtml.ts

@@ -5,14 +5,14 @@ import { pkgUpSync } from 'pkg-up';
 import {
   CosmosPluginConfig,
   FixtureList,
+  pickRendererUrl,
   replaceKeys,
 } from 'react-cosmos-core';
 import { PlaygroundMountArgs } from 'react-cosmos-ui';
 import { CosmosConfig } from '../cosmosConfig/types.js';
 import { CosmosPlatform } from '../cosmosPlugin/types.js';
 import { findUserModulePaths } from '../userModules/findUserModulePaths.js';
 import { importKeyPath } from '../userModules/shared.js';
-import { pickRendererUrl } from './pickRendererUrl.js';
 import { getStaticPath } from './staticPath.js';
 
 export async function getDevPlaygroundHtml(