react-cosmos-plugin-vite 6.0.0-alpha.9 → 6.0.0-beta.2

package/cosmos.plugin.json

@@ -1,5 +1,4 @@
 {
   "name": "Vite",
-  "devServer": "dist/viteDevServerPlugin.js",
-  "export": "dist/viteExportPlugin.js"
+  "server": "dist/viteServerPlugin.js"
 }

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const RENDERER_FILENAME = "renderer.html";

package/dist/constants.js

@@ -0,0 +1 @@
+export const RENDERER_FILENAME = 'renderer.html';

package/dist/createCosmosViteConfig.d.ts

@@ -0,0 +1,10 @@
+import { CosmosConfig } from 'react-cosmos';
+export type CosmosViteConfig = {
+    configPath: string | false;
+    indexPath: string | null;
+    port: number;
+};
+type CosmosViteConfigInput = Partial<CosmosViteConfig>;
+export declare function createCosmosViteConfig(cosmosConfig: CosmosConfig): CosmosViteConfig;
+export declare function getCosmosVitePort(cosmosViteConfig: CosmosViteConfigInput): number;
+export {};

package/dist/createCosmosViteConfig.js

@@ -0,0 +1,46 @@
+import path from 'node:path';
+import { fileExists, resolveFromSilent, resolveLoose, } from 'react-cosmos';
+export function createCosmosViteConfig(cosmosConfig) {
+    const { rootDir } = cosmosConfig;
+    const configInput = cosmosConfig.vite || {};
+    const configPath = getViteConfigPath(configInput, rootDir);
+    logViteConfigInfo(configPath);
+    return {
+        configPath,
+        indexPath: configInput.indexPath
+            ? resolveLoose(rootDir, configInput.indexPath)
+            : null,
+        port: getCosmosVitePort(configInput),
+    };
+}
+export function getCosmosVitePort(cosmosViteConfig) {
+    const { port = 5050 } = cosmosViteConfig;
+    return port;
+}
+function getViteConfigPath({ configPath }, rootDir) {
+    // User can choose to prevent automatical use of an existing vite.config.js
+    // file (relative to the root dir) by setting configPath to false
+    if (configPath === false) {
+        return false;
+    }
+    if (typeof configPath == 'undefined') {
+        return (resolveFromSilent(rootDir, './vite.config.ts') ||
+            resolveFromSilent(rootDir, './vite.config.js') ||
+            false);
+    }
+    const absPath = resolveLoose(rootDir, configPath);
+    if (!fileExists(absPath)) {
+        const relPath = path.relative(process.cwd(), absPath);
+        throw new Error(`Vite config not found at path: ${relPath}`);
+    }
+    return absPath;
+}
+function logViteConfigInfo(viteConfigPath) {
+    if (viteConfigPath) {
+        const relPath = path.relative(process.cwd(), viteConfigPath);
+        console.log(`[Cosmos] Using vite config found at ${relPath}`);
+    }
+    else {
+        console.log(`[Cosmos] No vite config found, using default settings`);
+    }
+}

package/dist/createViteRendererIndex.d.ts

@@ -1 +1 @@
-export declare function createViteRendererIndex(userDepsModuleId: string): string;
+export declare function createViteRendererIndex(userImportsModuleId: string): string;

package/dist/createViteRendererIndex.js

@@ -1,15 +1,18 @@
-export function createViteRendererIndex(userDepsModuleId) {
+export function createViteRendererIndex(userImportsModuleId) {
     return `
-import { mountDomRenderer } from 'react-cosmos-dom';
+import { mountDomRenderer } from 'react-cosmos-plugin-vite/dom';
 
 mount();
 
 async function mount() {
   // Use dynamic import to reload updated modules upon hot reloading
-  const args = await import('${userDepsModuleId}');
+  const args = await import('${userImportsModuleId}');
   mountDomRenderer(args);
 }
 
+// Fallback for when React Refresh isn't enabled.
+// Under normal conditions accepting HMR updates here isn't necessary because
+// individual React modules will be hot reloaded by React Refresh.
 if (import.meta.hot) {
   import.meta.hot.accept(() => {
     mount();

package/dist/dom.d.ts

@@ -0,0 +1 @@
+export * from 'react-cosmos-dom';

package/dist/dom.js

@@ -0,0 +1 @@
+export * from 'react-cosmos-dom';

package/dist/reactCosmosViteRollupPlugin.d.ts

@@ -1,5 +1,6 @@
-import { CosmosConfig } from 'react-cosmos/server.js';
+import { CosmosConfig } from 'react-cosmos';
 import { Plugin } from 'rollup';
-export declare const userDepsVirtualModuleId = "virtual:cosmos-userdeps";
-export declare const userDepsResolvedModuleId: string;
-export declare function reactCosmosViteRollupPlugin(cosmosConfig: CosmosConfig): Plugin;
+import { CosmosViteConfig } from './createCosmosViteConfig.js';
+export declare const userImportsVirtualModuleId = "virtual:cosmos-imports";
+export declare const userImportsResolvedModuleId: string;
+export declare function reactCosmosViteRollupPlugin(cosmosConfig: CosmosConfig, cosmosViteConfig: CosmosViteConfig): Plugin;

package/dist/reactCosmosViteRollupPlugin.js

@@ -1,29 +1,30 @@
-import path from 'path';
-import { generateUserDepsModule, getPlaygroundUrl, } from 'react-cosmos/server.js';
+import path from 'node:path';
+import { generateUserImports, getPlaygroundUrl, } from 'react-cosmos';
 import { createViteRendererIndex } from './createViteRendererIndex.js';
-export const userDepsVirtualModuleId = 'virtual:cosmos-userdeps';
-export const userDepsResolvedModuleId = '\0' + userDepsVirtualModuleId;
-const defaultIndexPattern = /^index\.(js|ts)x?$/;
-export function reactCosmosViteRollupPlugin(cosmosConfig) {
+export const userImportsVirtualModuleId = 'virtual:cosmos-imports';
+export const userImportsResolvedModuleId = '\0' + userImportsVirtualModuleId;
+const defaultIndexPattern = new RegExp(`^(src\\${path.sep})?(index|main)\.(js|ts)x?$`);
+export function reactCosmosViteRollupPlugin(cosmosConfig, cosmosViteConfig) {
     return {
         name: 'react-cosmos-vite-renderer',
         resolveId(id) {
-            if (id === userDepsVirtualModuleId) {
-                return userDepsResolvedModuleId;
+            if (id === userImportsVirtualModuleId) {
+                return userImportsResolvedModuleId;
             }
             else {
                 return null;
             }
         },
         load(id) {
-            if (id == userDepsResolvedModuleId) {
-                return generateUserDepsModule({
+            if (id == userImportsResolvedModuleId) {
+                return generateUserImports({
                     cosmosConfig,
                     rendererConfig: {
                         playgroundUrl: getPlaygroundUrl(cosmosConfig),
-                        // TODO: Allow passing dom.containerQuerySelector
+                        containerQuerySelector: cosmosConfig.dom.containerQuerySelector,
                     },
                     relativeToDir: null,
+                    typeScript: false,
                 });
             }
             else {
@@ -31,10 +32,14 @@ export function reactCosmosViteRollupPlugin(cosmosConfig) {
             }
         },
         transform(src, id) {
-            // TODO: Allow indexFile customization via cosmosConfig.vite.indexFile
-            if (path.relative(cosmosConfig.rootDir, id).match(defaultIndexPattern)) {
+            const isRendererIndex = cosmosViteConfig.indexPath
+                ? cosmosViteConfig.indexPath === id
+                : path.relative(cosmosConfig.rootDir, id).match(defaultIndexPattern);
+            if (isRendererIndex) {
+                const relPath = path.relative(process.cwd(), id);
+                console.log(`[Cosmos] Replacing vite index module at ${relPath}`);
                 return {
-                    code: createViteRendererIndex(userDepsVirtualModuleId),
+                    code: createViteRendererIndex(userImportsVirtualModuleId),
                     map: null,
                 };
             }

package/dist/viteConfigPlugin.d.ts

@@ -0,0 +1,2 @@
+import { CosmosConfig, CosmosConfigPluginArgs } from 'react-cosmos';
+export declare function viteConfigPlugin({ cosmosConfig, command, }: CosmosConfigPluginArgs): Promise<CosmosConfig>;

package/dist/viteConfigPlugin.js

@@ -0,0 +1,25 @@
+import path from 'node:path';
+import { findNextAvailablePort, } from 'react-cosmos';
+import { RENDERER_FILENAME } from './constants.js';
+import { getCosmosVitePort } from './createCosmosViteConfig.js';
+export async function viteConfigPlugin({ cosmosConfig, command, }) {
+    if (cosmosConfig.rendererUrl) {
+        return cosmosConfig;
+    }
+    if (command === 'export') {
+        return {
+            ...cosmosConfig,
+            rendererUrl: path.join(cosmosConfig.publicUrl, RENDERER_FILENAME),
+        };
+    }
+    const cosmosViteConfig = cosmosConfig.vite || {};
+    const port = await findNextAvailablePort(getCosmosVitePort(cosmosViteConfig), cosmosConfig.portRetries);
+    return {
+        ...cosmosConfig,
+        rendererUrl: `http://localhost:${port}`,
+        vite: {
+            ...cosmosViteConfig,
+            port: port,
+        },
+    };
+}

package/dist/viteDevServerPlugin.d.ts

@@ -1,2 +1,2 @@
-import { DevServerPluginArgs } from 'react-cosmos/server.js';
-export default function viteDevServerPlugin({ platformType, cosmosConfig, }: DevServerPluginArgs): Promise<(() => void) | undefined>;
+import { DevServerPluginArgs } from 'react-cosmos';
+export declare function viteDevServerPlugin({ cosmosConfig, platform, }: DevServerPluginArgs): Promise<(() => void) | undefined>;

package/dist/viteDevServerPlugin.js

@@ -1,29 +1,35 @@
-import { startFixtureWatcher, } from 'react-cosmos/server.js';
+import { startFixtureWatcher } from 'react-cosmos';
+import { pickRendererUrl } from 'react-cosmos-core';
 import { createServer } from 'vite';
-import { reactCosmosViteRollupPlugin, userDepsResolvedModuleId, } from './reactCosmosViteRollupPlugin.js';
-export default async function viteDevServerPlugin({ platformType, cosmosConfig, }) {
-    if (platformType !== 'web')
+import { createCosmosViteConfig } from './createCosmosViteConfig.js';
+import { reactCosmosViteRollupPlugin, userImportsResolvedModuleId, } from './reactCosmosViteRollupPlugin.js';
+export async function viteDevServerPlugin({ cosmosConfig, platform, }) {
+    if (platform !== 'web')
         return;
-    const { rendererUrl } = cosmosConfig;
+    const rendererUrl = pickRendererUrl(cosmosConfig.rendererUrl, 'dev');
     if (!rendererUrl) {
-        throw new Error('Vite plugin requires cosmosConfig.rendererUrl to be set (eg. "http://localhost:5050")');
+        throw new Error('Vite plugin requires cosmosConfig.rendererUrl to be set');
     }
+    const { rootDir } = cosmosConfig;
+    const cosmosViteConfig = createCosmosViteConfig(cosmosConfig);
     const server = await createServer({
-        configFile: false,
-        root: cosmosConfig.rootDir,
+        // Last time I checked the config file is merged with this inline config:
+        // https://github.com/vitejs/vite/blob/07bd6d14e545d05c6a29cf341f117fcfe9536ba4/packages/vite/src/node/config.ts#L418
+        configFile: cosmosViteConfig.configPath,
+        root: rootDir,
+        base: cosmosConfig.publicUrl,
         server: {
             // https://vitejs.dev/config/server-options.html#server-host
             host: '0.0.0.0',
             port: parseInt(new URL(rendererUrl).port, 10),
         },
-        plugins: [reactCosmosViteRollupPlugin(cosmosConfig)],
+        plugins: [reactCosmosViteRollupPlugin(cosmosConfig, cosmosViteConfig)],
     });
     await server.listen();
-    server.printUrls();
     const watcher = await startFixtureWatcher(cosmosConfig, 'add', () => {
-        const module = server.moduleGraph.getModuleById(userDepsResolvedModuleId);
+        const module = server.moduleGraph.getModuleById(userImportsResolvedModuleId);
         if (!module) {
-            throw new Error(`Vite module graph doesn't contain module with id ${userDepsResolvedModuleId}`);
+            throw new Error(`Vite module graph doesn't contain module with id ${userImportsResolvedModuleId}`);
         }
         server.moduleGraph.invalidateModule(module);
         server.reloadModule(module);

package/dist/viteExportPlugin.d.ts

@@ -1,2 +1,2 @@
-import { ExportPluginArgs } from 'react-cosmos/server.js';
-export default function viteExportPlugin({ cosmosConfig, }: ExportPluginArgs): Promise<void>;
+import { ExportPluginArgs } from 'react-cosmos';
+export declare function viteExportPlugin({ cosmosConfig }: ExportPluginArgs): Promise<void>;

package/dist/viteExportPlugin.js

@@ -1,22 +1,23 @@
 import { rename } from 'node:fs/promises';
-import path from 'path';
-import { removeLeadingSlash } from 'react-cosmos-core';
-import { RENDERER_FILENAME } from 'react-cosmos/server.js';
+import path from 'node:path';
 import { build } from 'vite';
+import { RENDERER_FILENAME } from './constants.js';
+import { createCosmosViteConfig } from './createCosmosViteConfig.js';
 import { reactCosmosViteRollupPlugin } from './reactCosmosViteRollupPlugin.js';
-export default async function viteExportPlugin({ cosmosConfig, }) {
-    const { exportPath, publicUrl } = cosmosConfig;
+export async function viteExportPlugin({ cosmosConfig }) {
+    const { rootDir, exportPath, publicUrl } = cosmosConfig;
+    const cosmosViteConfig = createCosmosViteConfig(cosmosConfig);
+    const outDir = path.join(exportPath, publicUrl);
     await build({
-        configFile: false,
-        root: cosmosConfig.rootDir,
+        configFile: cosmosViteConfig.configPath,
+        root: rootDir,
         base: publicUrl,
         build: {
-            outDir: path.resolve(exportPath, removeLeadingSlash(publicUrl)),
+            outDir,
             emptyOutDir: false,
             minify: false,
         },
-        plugins: [reactCosmosViteRollupPlugin(cosmosConfig)],
+        plugins: [reactCosmosViteRollupPlugin(cosmosConfig, cosmosViteConfig)],
     });
-    // Make way for the Playground's index.html
-    await rename(path.resolve(exportPath, 'index.html'), path.resolve(exportPath, RENDERER_FILENAME));
+    await rename(path.join(outDir, 'index.html'), path.join(outDir, RENDERER_FILENAME));
 }

package/dist/viteServerPlugin.d.ts

@@ -0,0 +1,3 @@
+import { CosmosServerPlugin } from 'react-cosmos';
+declare const viteServerPlugin: CosmosServerPlugin;
+export default viteServerPlugin;

package/dist/viteServerPlugin.js

@@ -0,0 +1,10 @@
+import { viteConfigPlugin } from './viteConfigPlugin.js';
+import { viteDevServerPlugin } from './viteDevServerPlugin.js';
+import { viteExportPlugin } from './viteExportPlugin.js';
+const viteServerPlugin = {
+    name: 'vite',
+    config: viteConfigPlugin,
+    devServer: viteDevServerPlugin,
+    export: viteExportPlugin,
+};
+export default viteServerPlugin;

package/dom.js

@@ -0,0 +1 @@
+export * from './dist/dom.js';

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "react-cosmos-plugin-vite",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-beta.2",
   "description": "Vite plugin for React Cosmos",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-plugin-vite",
   "license": "MIT",
   "type": "module",
   "main": "cosmos.plugin.json",
   "dependencies": {
-    "react-cosmos-core": "^6.0.0-alpha.9",
-    "react-cosmos-dom": "^6.0.0-alpha.9"
+    "react-cosmos-core": "6.0.0-beta.2",
+    "react-cosmos-dom": "6.0.0-beta.2"
   },
   "peerDependencies": {
     "vite": "*"
   },
-  "gitHead": "b155b223f904f5cc29e2f13ac79ab7c4b302ed2b"
+  "gitHead": "f3e3893b0439132e083228f312c62e4379f39762"
 }