react-cosmos-plugin-rspack 1.0.3 → 2.0.1

package/dist/client/reactDevtoolsHook.js

@@ -1,8 +0,0 @@
-// src/client/reactDevtoolsHook.ts
-if (process.env.NODE_ENV === "development") {
-  try {
-    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  } catch (err) {
-    console.warn("Could not access parent React devtools hook");
-  }
-}

package/dist/client/userImports.js

@@ -1,13 +1,12 @@
-// src/client/userImports.ts
-var rendererConfig = {
-  playgroundUrl: "http://localhost:5000"
+//#region src/client/userImports.ts
+const rendererConfig = {
+	webSocketUrl: "ws://localhost:5000",
+	rendererUrl: null
 };
-var moduleWrappers = {
-  lazy: false,
-  fixtures: {},
-  decorators: {}
-};
-export {
-  moduleWrappers,
-  rendererConfig
+const moduleWrappers = {
+	lazy: false,
+	fixtures: {},
+	decorators: {}
 };
+//#endregion
+export { moduleWrappers, rendererConfig };

package/dist/server/rspackServerPlugin.mjs

@@ -0,0 +1,554 @@
+import { createRequire } from "node:module";
+import * as path from "node:path";
+import { fileExists, getCliArgs, importModule, moduleExists, serveStaticDir } from "react-cosmos";
+import webpackHotMiddleware from "webpack-hot-middleware";
+import rspack from "@rspack/core";
+//#region src/server/rspackConfig/constants.ts
+const RENDERER_FILENAME = "renderer.html";
+//#endregion
+//#region src/server/rspackConfigPlugin.ts
+async function rspackConfigPlugin({ config }) {
+	if (config.rendererUrl) return config;
+	return {
+		...config,
+		rendererUrl: path.join(config.publicUrl, RENDERER_FILENAME)
+	};
+}
+//#endregion
+//#region src/server/utils/isNodeError.ts
+function isNodeError(err) {
+	return err && err.stack && err.message;
+}
+//#endregion
+//#region src/server/utils/resolve.ts
+function resolve(moduleId) {
+	return createRequire(import.meta.url).resolve(moduleId);
+}
+function resolveFrom(fromDirectory, moduleId) {
+	return createRequire(import.meta.url).resolve(moduleId, { paths: [fromDirectory] });
+}
+//#endregion
+//#region src/server/utils/resolveSilent.ts
+function resolveFromSilent(fromDirectory, moduleId) {
+	try {
+		return resolveFrom(fromDirectory, moduleId);
+	} catch (err) {
+		if (!isNodeError(err) || err.code !== "MODULE_NOT_FOUND") console.log(err);
+		return null;
+	}
+}
+//#endregion
+//#region src/server/utils/resolveLoose.ts
+function resolveLoose(fromDirectory, moduleId) {
+	return path.isAbsolute(moduleId) ? moduleId : resolveFromSilent(fromDirectory, moduleId) || path.join(fromDirectory, moduleId);
+}
+//#endregion
+//#region src/server/cosmosConfig/createRspackCosmosConfig.ts
+function createRspackCosmosConfig(cosmosConfig) {
+	const { rootDir } = cosmosConfig;
+	const configInput = cosmosConfig.rspack || {};
+	return {
+		configPath: getRspackConfigPath(configInput, rootDir),
+		overridePath: getRspackOverridePath(configInput, rootDir),
+		includeHashInOutputFilename: getIncludeHashInOutputFilename(configInput),
+		hotReload: getHotReload(configInput),
+		reloadOnFail: getReloadOnFail(configInput)
+	};
+}
+function getRspackConfigPath({ configPath }, rootDir) {
+	if (typeof configPath === "undefined") return resolveLoose(rootDir, "rspack.config.js");
+	if (!configPath) return null;
+	const absPath = resolveLoose(rootDir, configPath);
+	if (!fileExists(absPath)) {
+		const relPath = path.relative(process.cwd(), absPath);
+		throw new Error(`rspack config not found at path: ${relPath}`);
+	}
+	return absPath;
+}
+function getRspackOverridePath({ overridePath }, rootDir) {
+	if (typeof overridePath === "undefined") return resolveLoose(rootDir, "rspack.override.js");
+	if (!overridePath) return null;
+	const absPath = resolveLoose(rootDir, overridePath);
+	if (!fileExists(absPath)) {
+		const relPath = path.relative(process.cwd(), absPath);
+		throw new Error(`rspack override module not found at path: ${relPath}`);
+	}
+	return absPath;
+}
+function getIncludeHashInOutputFilename({ includeHashInOutputFilename = false }) {
+	return includeHashInOutputFilename;
+}
+function getHotReload({ hotReload = true }) {
+	return hotReload;
+}
+function getReloadOnFail({ reloadOnFail = false }) {
+	return reloadOnFail;
+}
+//#endregion
+//#region src/server/utils/requireModule.ts
+function requireFrom(fromDirectory, moduleId) {
+	return createRequire(path.resolve(fromDirectory, "noop.js"))(moduleId);
+}
+//#endregion
+//#region src/server/utils/requireSilent.ts
+function requireFromSilent(fromDirectory, moduleId) {
+	try {
+		return requireFrom(fromDirectory, moduleId);
+	} catch (err) {
+		if (!isNodeError(err) || err.code !== "MODULE_NOT_FOUND") console.log(err);
+	}
+}
+//#endregion
+//#region src/server/getRspack.ts
+function getRspack(rootDir) {
+	const userRspack = requireFromSilent(rootDir, "@rspack/core");
+	if (!userRspack) {
+		console.warn("[Cosmos] rspack dependency missing!");
+		console.log("Install using \"yarn add --dev @rspack/core\" or \"npm install --save-dev @rspack/core\"");
+		return;
+	}
+	return userRspack.rspack;
+}
+//#endregion
+//#region src/server/rspackConfig/getRspackNodeEnv.ts
+function getRspackNodeEnv() {
+	return process.env.NODE_ENV === "production" ? "production" : "development";
+}
+//#endregion
+//#region src/server/rspackConfig/getDefaultRspackConfig.ts
+function getDefaultRspackConfig(rootDir) {
+	const postcssLoaderPath = resolveFromSilent(rootDir, "postcss-loader");
+	const mdxLoaderPath = resolveFromSilent(rootDir, "@mdx-js/loader");
+	const rules = [];
+	const plugins = [];
+	rules.push({
+		test: /\.(j|t)s$/,
+		exclude: [/[\\/]node_modules[\\/]/],
+		loader: "builtin:swc-loader",
+		options: {
+			sourceMaps: true,
+			jsc: { parser: { syntax: "typescript" } }
+		},
+		type: "javascript/auto"
+	});
+	rules.push({
+		test: /\.(j|t)sx$/,
+		loader: "builtin:swc-loader",
+		exclude: [/[\\/]node_modules[\\/]/],
+		options: {
+			sourceMaps: true,
+			jsc: {
+				parser: {
+					syntax: "typescript",
+					tsx: true
+				},
+				transform: { react: { runtime: "automatic" } }
+			}
+		},
+		type: "javascript/auto"
+	});
+	rules.push({
+		test: /\.css$/,
+		use: postcssLoaderPath ? [{ loader: postcssLoaderPath }] : [{ loader: "builtin:lightningcss-loader" }],
+		type: "css/auto"
+	});
+	if (mdxLoaderPath) rules.push({
+		test: /\.mdx$/,
+		loader: mdxLoaderPath,
+		exclude: [/[\\/]node_modules[\\/]/]
+	});
+	plugins.push(new rspack.HtmlRspackPlugin({
+		title: "React Cosmos",
+		filename: RENDERER_FILENAME
+	}));
+	return {
+		devtool: "cheap-module-source-map",
+		resolve: {
+			extensionAlias: { ".js": [
+				".ts",
+				".tsx",
+				".js"
+			] },
+			extensions: [
+				".js",
+				".jsx",
+				".ts",
+				".tsx"
+			]
+		},
+		module: { rules },
+		plugins,
+		stats: {
+			preset: "errors-only",
+			builtAt: true
+		},
+		infrastructureLogging: { level: "warn" },
+		experiments: { topLevelAwait: true },
+		mode: getRspackNodeEnv(),
+		optimization: { minimize: false }
+	};
+}
+//#endregion
+//#region src/server/rspackConfig/getUserRspackConfig.ts
+async function getUserRspackConfig(config) {
+	const baseRspackConfig = await getBaseRspackConfig(config);
+	const { overridePath } = createRspackCosmosConfig(config);
+	if (!overridePath || !moduleExists(overridePath)) {
+		console.log(`[Cosmos] Learn how to override rspack config for cosmos: https://github.com/react-cosmos/react-cosmos/tree/main/docs#webpack-config-override`);
+		return baseRspackConfig;
+	}
+	const relPath = path.relative(process.cwd(), overridePath);
+	console.log(`[Cosmos] Overriding rspack config at ${relPath}`);
+	const rspackOverride = (await importModule(overridePath)).default;
+	return rspackOverride(baseRspackConfig, getRspackNodeEnv());
+}
+async function getBaseRspackConfig(confg) {
+	const { rootDir } = confg;
+	const { configPath } = createRspackCosmosConfig(confg);
+	if (!configPath || !moduleExists(configPath)) {
+		console.log("[Cosmos] Using default rspack config");
+		return getDefaultRspackConfig(rootDir);
+	}
+	const relPath = path.relative(process.cwd(), configPath);
+	console.log(`[Cosmos] Using rspack config found at ${relPath}`);
+	const rspackConfig = (await importModule(configPath)).default;
+	const cliArgs = getCliArgs();
+	return typeof rspackConfig === "function" ? await rspackConfig(cliArgs.env || {}, cliArgs) : rspackConfig;
+}
+//#endregion
+//#region src/server/rspackConfig/resolveRspackClientPath.ts
+function resolveRspackClientPath(relPath) {
+	return createRequire(import.meta.url).resolve(`../client/${relPath}`);
+}
+//#endregion
+//#region src/server/rspackConfig/resolveRspackLoaderPath.ts
+function resolveRspackLoaderPath() {
+	return createRequire(import.meta.url).resolve("./userImportsLoader.cjs");
+}
+//#endregion
+//#region src/server/rspackConfig/getRspackConfigModule.ts
+function getRspackConfigModule(config, rspackConfig, mode) {
+	return {
+		...rspackConfig.module,
+		rules: getRules(config, rspackConfig, mode)
+	};
+}
+function getRules(config, { module }, mode) {
+	return [...module && module.rules || [], getUserImportsLoaderRule(config, mode)];
+}
+function getUserImportsLoaderRule(config, mode) {
+	return {
+		include: resolveRspackClientPath("userImports"),
+		use: {
+			loader: resolveRspackLoaderPath(),
+			options: {
+				config,
+				mode
+			}
+		}
+	};
+}
+//#endregion
+//#region src/server/rspackConfig/getRspackConfigResolve.ts
+function getRspackConfigResolve(config, rspackConfig) {
+	return resolveLocalReactDeps(config, rspackConfig.resolve);
+}
+function resolveLocalReactDeps(config, resolve = {}) {
+	const { rootDir } = config;
+	let alias = resolve.alias || {};
+	let reactAlias = hasAlias(alias, "react");
+	let reactDomAlias = hasAlias(alias, "react-dom");
+	if (reactAlias && reactDomAlias) {
+		console.log("[Cosmos] React and React DOM aliases found in rspack config");
+		return resolve;
+	}
+	if (reactAlias) console.log("[Cosmos] React alias found in rspack config");
+	else {
+		const reactPath = resolveFromSilent(rootDir, "react");
+		if (!reactPath) throw new Error(`[Cosmos] Local dependency not found: react`);
+		alias = addAlias(alias, "react", path.dirname(reactPath));
+	}
+	if (reactDomAlias) console.log("[Cosmos] React DOM alias found in rspack config");
+	else {
+		const reactDomPath = resolveFromSilent(rootDir, "react-dom");
+		if (!reactDomPath) throw new Error(`[Cosmos] Local dependency not found: react-dom`);
+		alias = addAlias(alias, "react-dom", path.dirname(reactDomPath));
+	}
+	return {
+		...resolve,
+		alias
+	};
+}
+function hasAlias(alias, name) {
+	if (!alias) return false;
+	const exactName = `${name}$`;
+	const keys = Object.keys(alias);
+	return keys.includes(name) || keys.includes(exactName);
+}
+function addAlias(alias, name, value) {
+	return {
+		...alias,
+		[name]: value
+	};
+}
+//#endregion
+//#region src/server/utils/omit.ts
+/**
+* A helper to strip certain fields from an object.
+*/
+function omit(o, fields) {
+	const result = { ...o };
+	for (const field of fields) delete result[field];
+	return result;
+}
+//#endregion
+//#region src/server/rspackConfig/plugins.ts
+function getGlobalsPlugin({ publicUrl }, userRspack, devServerOn) {
+	const cleanPublicUrl = removeTrailingSlash(publicUrl);
+	return new userRspack.DefinePlugin({
+		__DEV__: JSON.stringify(devServerOn),
+		"process.env.NODE_ENV": JSON.stringify(getRspackNodeEnv()),
+		"process.env.PUBLIC_URL": JSON.stringify(cleanPublicUrl)
+	});
+}
+function hasPlugin(plugins, pluginName) {
+	return plugins && plugins.filter((p) => isInstanceOfRspackPlugin(p, pluginName)).length > 0;
+}
+function isInstanceOfRspackPlugin(plugin, constructorName) {
+	return plugin.constructor && plugin.constructor.name === constructorName;
+}
+function ignoreEmptyRspackPlugins(plugins = []) {
+	return plugins.filter(Boolean);
+}
+function removeTrailingSlash(url) {
+	return url.replace(/\/$/, "");
+}
+//#endregion
+//#region src/server/rspackConfig/htmlPlugin.ts
+function ensureHtmlPlugin(plugins) {
+	if (hasPlugin(plugins, "HtmlWebpackPlugin")) return plugins.map((plugin) => isHtmlWebpackPlugin(plugin) ? changeHtmlPluginFilename(plugin) : plugin);
+	const htmlRspackPlugin = plugins.find(isHtmlRspackPlugin);
+	if (htmlRspackPlugin) {
+		const options = htmlRspackPlugin._args[0];
+		const safeOptions = omit(options, ["chunks"]);
+		return [...plugins.filter((plugin) => plugin !== htmlRspackPlugin), new rspack.HtmlRspackPlugin({
+			...safeOptions,
+			filename: RENDERER_FILENAME
+		})];
+	}
+	return [...plugins, new rspack.HtmlRspackPlugin({
+		title: "React Cosmos",
+		filename: RENDERER_FILENAME
+	})];
+}
+function isHtmlWebpackPlugin(plugin) {
+	return isInstanceOfRspackPlugin(plugin, "HtmlWebpackPlugin");
+}
+function isHtmlRspackPlugin(plugin) {
+	return isInstanceOfRspackPlugin(plugin, "HtmlRspackPlugin");
+}
+function changeHtmlPluginFilename(htmlPlugin) {
+	if (!isIndexHtmlWebpackPlugin(htmlPlugin)) return htmlPlugin;
+	const safeOptions = omit(htmlPlugin.userOptions || htmlPlugin.options, ["chunks"]);
+	return new htmlPlugin.constructor({
+		...safeOptions,
+		filename: RENDERER_FILENAME
+	});
+}
+function isIndexHtmlWebpackPlugin(htmlPlugin) {
+	const { filename } = htmlPlugin.userOptions || htmlPlugin.options;
+	return filename === "index.html" || typeof filename !== "string" || filename.endsWith("/index.html");
+}
+//#endregion
+//#region src/server/rspackConfig/rspackConfigTopLevelAwait.ts
+function ensureRspackConfigTopLevelAwait(baseWebpackConfig) {
+	const experiments = baseWebpackConfig.experiments || {};
+	if (!experiments.topLevelAwait) experiments.topLevelAwait = true;
+	return experiments;
+}
+//#endregion
+//#region src/server/rspackConfig/getDevRspackConfig.ts
+async function getDevRspackConfig(config, userRspack) {
+	const baseRspackConfig = await getUserRspackConfig(config);
+	const rspackConfig = {
+		...baseRspackConfig,
+		entry: getEntry$1(config),
+		output: getOutput$1(config),
+		module: getRspackConfigModule(config, baseRspackConfig, "dev"),
+		resolve: getRspackConfigResolve(config, baseRspackConfig),
+		plugins: getPlugins$1(config, baseRspackConfig, userRspack),
+		experiments: getExperiments$1(baseRspackConfig)
+	};
+	if (rspackConfig.optimization?.splitChunks) {
+		const { name } = rspackConfig.optimization.splitChunks;
+		if (name === false) delete rspackConfig.optimization.splitChunks.name;
+	}
+	return rspackConfig;
+}
+function getEntry$1(config) {
+	const { hotReload, reloadOnFail } = createRspackCosmosConfig(config);
+	const devtoolsHook = resolveRspackClientPath("reactDevtoolsHook");
+	const clientIndex = resolveRspackClientPath("index");
+	return hotReload ? [
+		devtoolsHook,
+		getHotMiddlewareEntry(reloadOnFail),
+		clientIndex
+	] : [devtoolsHook, clientIndex];
+}
+function getOutput$1({ publicUrl }) {
+	return {
+		filename: "[name].js",
+		publicPath: publicUrl,
+		devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")
+	};
+}
+function getPlugins$1(config, baseRspackConfig, userRspack) {
+	const existingPlugins = ignoreEmptyRspackPlugins(baseRspackConfig.plugins);
+	const globalsPlugin = getGlobalsPlugin(config, userRspack, true);
+	const noEmitErrorsPlugin = new userRspack.NoEmitOnErrorsPlugin();
+	let plugins = [
+		...existingPlugins,
+		globalsPlugin,
+		noEmitErrorsPlugin
+	];
+	const { hotReload } = createRspackCosmosConfig(config);
+	if (hotReload && !hasPlugin(plugins, "HotModuleReplacementPlugin")) {
+		const hmrPlugin = new userRspack.HotModuleReplacementPlugin();
+		plugins = [...plugins, hmrPlugin];
+	}
+	return ensureHtmlPlugin(plugins);
+}
+function getHotMiddlewareEntry(reloadOnFail) {
+	return `${resolve("webpack-hot-middleware/client")}?reload=${reloadOnFail}&overlay=false`;
+}
+function getExperiments$1(baseWebpackConfig) {
+	return ensureRspackConfigTopLevelAwait(baseWebpackConfig);
+}
+//#endregion
+//#region src/server/rspackDevServerPlugin.ts
+async function rspackDevServerPlugin({ config, platform, app, sendMessage }) {
+	if (platform !== "web") return;
+	const userRspack = getRspack(config.rootDir);
+	if (!userRspack) return;
+	const rspackConfig = await getDevRspackConfig(config, userRspack);
+	if (config.staticPath === null) {
+		const rspackDerivedStaticPath = getRspackStaticPath(rspackConfig);
+		if (rspackDerivedStaticPath !== null) serveStaticDir(app, path.resolve(config.rootDir, rspackDerivedStaticPath), config.publicUrl);
+	}
+	function sendBuildMessage(msg) {
+		sendMessage(msg);
+	}
+	const rspackCompiler = userRspack(rspackConfig);
+	rspackCompiler.hooks.invalid.tap("Cosmos", (filePath) => {
+		if (typeof filePath === "string") {
+			const relFilePath = path.relative(process.cwd(), filePath);
+			console.log("[Cosmos] rspack build invalidated by", relFilePath);
+		} else console.log("[Cosmos] rspack build invalidated by unknown file");
+		sendBuildMessage({ type: "buildStart" });
+	});
+	rspackCompiler.hooks.failed.tap("Cosmos", () => {
+		sendBuildMessage({ type: "buildError" });
+	});
+	const onCompilationDone = new Promise((resolve) => {
+		rspackCompiler.hooks.done.tap("Cosmos", (stats) => {
+			resolve();
+			if (stats.hasErrors()) sendBuildMessage({ type: "buildError" });
+			else sendBuildMessage({ type: "buildDone" });
+		});
+	});
+	console.log("[Cosmos] Building rspack...");
+	const wdmInst = (await import("webpack-dev-middleware")).default(rspackCompiler, { publicPath: config.publicUrl });
+	app.use(wdmInst);
+	const { hotReload } = createRspackCosmosConfig(config);
+	if (hotReload) app.use(webpackHotMiddleware(rspackCompiler));
+	await onCompilationDone;
+	return async () => {
+		await new Promise((res) => wdmInst.close(res));
+	};
+}
+function getRspackStaticPath({ devServer }) {
+	return devServer && typeof devServer.contentBase === "string" ? devServer.contentBase : null;
+}
+//#endregion
+//#region src/server/rspackConfig/getExportRspackConfig.ts
+async function getExportRspackConfig(config, userRspack) {
+	const baseRspackConfig = await getUserRspackConfig(config);
+	return {
+		...baseRspackConfig,
+		entry: getEntry(),
+		output: getOutput(config),
+		module: getRspackConfigModule(config, baseRspackConfig, "export"),
+		resolve: getRspackConfigResolve(config, baseRspackConfig),
+		plugins: getPlugins(config, baseRspackConfig, userRspack),
+		experiments: getExperiments(baseRspackConfig)
+	};
+}
+function getEntry() {
+	return [resolveRspackClientPath("reactDevtoolsHook"), resolveRspackClientPath("index")];
+}
+function getOutput(config) {
+	const { exportPath, publicUrl } = config;
+	const { includeHashInOutputFilename } = createRspackCosmosConfig(config);
+	return {
+		path: path.join(exportPath, publicUrl),
+		filename: includeHashInOutputFilename ? "[name].[contenthash].js" : "[name].js",
+		publicPath: publicUrl
+	};
+}
+function getPlugins(config, baseRspackConfig, userRspack) {
+	const existingPlugins = ignoreEmptyRspackPlugins(baseRspackConfig.plugins);
+	const globalsPlugin = getGlobalsPlugin(config, userRspack, false);
+	const noEmitErrorsPlugin = new userRspack.NoEmitOnErrorsPlugin();
+	return ensureHtmlPlugin([
+		...existingPlugins,
+		globalsPlugin,
+		noEmitErrorsPlugin
+	]);
+}
+function getExperiments(baseWebpackConfig) {
+	return ensureRspackConfigTopLevelAwait(baseWebpackConfig);
+}
+//#endregion
+//#region src/server/rspackExportPlugin.ts
+async function rspackExportPlugin({ config }) {
+	const userRspack = getRspack(config.rootDir);
+	if (!userRspack) return;
+	const rspackConfig = await getExportRspackConfig(config, userRspack);
+	try {
+		await runRspackCompiler(userRspack, rspackConfig);
+	} catch (err) {
+		const rspackError = err;
+		if (rspackError.rspackErrors) rspackError.rspackErrors.forEach((error) => {
+			console.error(`${error}\n`);
+		});
+		throw rspackError;
+	}
+}
+function runRspackCompiler(userRspack, rspackConfig) {
+	return new Promise((resolve, reject) => {
+		userRspack(rspackConfig).run((err, stats) => {
+			if (err) reject(err);
+			else if (stats?.hasErrors()) {
+				const error = new RspackCompilationError();
+				error.rspackErrors = stats.toJson().errors;
+				reject(error);
+			} else resolve(stats);
+		});
+	});
+}
+var RspackCompilationError = class extends Error {
+	rspackErrors;
+	constructor() {
+		super("Rspack errors occurred");
+	}
+};
+//#endregion
+//#region src/server/rspackServerPlugin.ts
+const rspackServerPlugin = {
+	name: "rspack",
+	config: rspackConfigPlugin,
+	devServer: rspackDevServerPlugin,
+	export: rspackExportPlugin
+};
+//#endregion
+export { rspackServerPlugin as default };

package/dist/server/userImportsLoader.cjs

@@ -4,7 +4,7 @@
 // dist folder as part of the build process
 module.exports = async function injectUserImports() {
   const cosmos = await import('react-cosmos');
-  const { cosmosConfig } = this.getOptions();
+  const { config, mode } = this.getOptions();
 
   // This ensures this loader is invalidated whenever a new file is added to or
   // removed from user's project, which in turn triggers findUserModulePaths
@@ -13,17 +13,18 @@ module.exports = async function injectUserImports() {
   // of require.context, which not only watches for file changes but also
   // automatically bundles new files that match the watcher's query.
   // https://github.com/webpack/webpack/issues/222#issuecomment-40691546
-  const watchDirs = cosmosConfig.watchDirs;
+  const watchDirs = config.watchDirs;
   watchDirs.forEach((watchDir) => this.addContextDependency(watchDir));
 
-  const { containerQuerySelector } = cosmosConfig.dom;
-  const modulePaths = await cosmos.findUserModulePaths(cosmosConfig);
+  const { containerQuerySelector } = config.dom;
+  const modulePaths = await cosmos.findUserModulePaths(config);
   const rendererConfig = {
-    playgroundUrl: cosmos.getPlaygroundUrl(cosmosConfig),
+    webSocketUrl: mode === 'dev' ? cosmos.getWebSocketUrl(config) : null,
+    rendererUrl: null,
     containerQuerySelector,
   };
   return cosmos.generateUserImports({
-    cosmosConfig,
+    config,
     modulePaths,
     rendererConfig,
     relativeToDir: null,

package/dist/ui/build.mjs

@@ -0,0 +1,42 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+//#region \0virtual:react
+var require__virtual_react = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = React;
+}));
+//#endregion
+//#region \0virtual:react-plugin
+var require__virtual_react_plugin = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = ReactPlugin;
+}));
+//#endregion
+//#region src/ui/WebpackRendererError.tsx
+var import__virtual_react = /* @__PURE__ */ __toESM(require__virtual_react());
+const { register, plug } = (0, require__virtual_react_plugin().createPlugin)({ name: "webpackRendererError" });
+plug("rendererError", () => {
+	return /* @__PURE__ */ import__virtual_react.default.createElement(import__virtual_react.default.Fragment, null, "If you use a custom webpack config,", " ", /* @__PURE__ */ import__virtual_react.default.createElement("strong", null, "make sure", /* @__PURE__ */ import__virtual_react.default.createElement("br", null), "your build is generating an index.html page."));
+});
+register();
+//#endregion
+export { register };