react-cosmos-plugin-vite 6.2.4-canary.fa66419.0 → 7.0.0-beta.0

package/dist/createCosmosViteConfig.d.ts

@@ -1,7 +1,7 @@
 import { CosmosConfig } from 'react-cosmos';
 export type CosmosViteConfig = {
     configPath: string | false;
-    indexPath: string | null;
+    mainScriptUrl: string | null;
     port: number;
 };
 type CosmosViteConfigInput = Partial<CosmosViteConfig>;

package/dist/createCosmosViteConfig.js

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import { fileExists, resolveFromSilent, resolveLoose, } from 'react-cosmos';
+import { fileExists, resolveFromSilent } from 'react-cosmos';
 export function createCosmosViteConfig(config) {
     const { rootDir } = config;
     const configInput = config.vite || {};
@@ -7,9 +7,7 @@ export function createCosmosViteConfig(config) {
     logViteConfigInfo(configPath);
     return {
         configPath,
-        indexPath: configInput.indexPath
-            ? resolveLoose(rootDir, configInput.indexPath)
-            : null,
+        mainScriptUrl: configInput.mainScriptUrl ?? null,
         port: getCosmosVitePort(configInput),
     };
 }
@@ -28,7 +26,7 @@ function getViteConfigPath({ configPath }, rootDir) {
             resolveFromSilent(rootDir, './vite.config.js') ||
             false);
     }
-    const absPath = resolveLoose(rootDir, configPath);
+    const absPath = path.join(rootDir, configPath);
     if (!fileExists(absPath)) {
         const relPath = path.relative(process.cwd(), absPath);
         throw new Error(`Vite config not found at path: ${relPath}`);
@@ -38,9 +36,9 @@ function getViteConfigPath({ configPath }, rootDir) {
 function logViteConfigInfo(viteConfigPath) {
     if (viteConfigPath) {
         const relPath = path.relative(process.cwd(), viteConfigPath);
-        console.log(`[Cosmos] Using vite config found at ${relPath}`);
+        console.log(`[Cosmos] Using Vite config found at ${relPath}`);
     }
     else {
-        console.log(`[Cosmos] No vite config found, using default settings`);
+        console.log(`[Cosmos] No Vite config found, using default settings`);
     }
 }

package/dist/indexHtml/createIndexHtml.d.ts

@@ -0,0 +1 @@
+export declare function createIndexHtml(htmlPath: string): string;

package/dist/indexHtml/createIndexHtml.js

@@ -0,0 +1,22 @@
+import fs from 'node:fs';
+import { defaultMainScriptUrl } from './defaultMainScriptUrl.js';
+export function createIndexHtml(htmlPath) {
+    console.log(`[Cosmos] Vite index.html not found, creating a default one...`);
+    const html = generateViteIndexHtml();
+    fs.writeFileSync(htmlPath, html);
+    return html;
+}
+function generateViteIndexHtml() {
+    return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Cosmos Vite Renderer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="${defaultMainScriptUrl()}"></script>
+  </body>
+</html>\n`;
+}

package/dist/indexHtml/defaultMainScriptUrl.d.ts

@@ -0,0 +1 @@
+export declare function defaultMainScriptUrl(): string;

package/dist/indexHtml/defaultMainScriptUrl.js

@@ -0,0 +1,5 @@
+import { moduleExists } from 'react-cosmos';
+export function defaultMainScriptUrl() {
+    const ext = moduleExists('typescript') ? 'tsx' : 'jsx';
+    return `/src/main.${ext}`;
+}

package/dist/indexHtml/ensureMainScriptUrl.d.ts

@@ -0,0 +1 @@
+export declare function ensureMainScriptUrl(html: string): string;

package/dist/indexHtml/ensureMainScriptUrl.js

@@ -0,0 +1,9 @@
+import { defaultMainScriptUrl } from './defaultMainScriptUrl.js';
+import { getHtmlScriptUrls } from './getHtmlScriptUrls.js';
+export function ensureMainScriptUrl(html) {
+    const scripts = getHtmlScriptUrls(html);
+    if (scripts.length === 0) {
+        html = html.replace(/(\s+)?<\/body>/, `$1  <script type="module" src="${defaultMainScriptUrl()}"></script>$1</body>`);
+    }
+    return html;
+}

package/dist/indexHtml/findMainScriptUrl.d.ts

@@ -0,0 +1 @@
+export declare function findMainScriptUrl(html: string, mainScriptUrl?: string | null): string;

package/dist/indexHtml/findMainScriptUrl.js

@@ -0,0 +1,49 @@
+import { defaultMainScriptUrl } from './defaultMainScriptUrl.js';
+import { getHtmlScriptUrls } from './getHtmlScriptUrls.js';
+const mainUrlPattern = new RegExp(`/(src/)?(index|main)\\.(js|ts)x?$`);
+export function findMainScriptUrl(html, mainScriptUrl = null) {
+    const scripts = getHtmlScriptUrls(html).map(normalizeUrl);
+    if (mainScriptUrl !== null) {
+        const mainUrl = scripts.find(url => url === normalizeUrl(mainScriptUrl));
+        if (mainUrl)
+            return mainUrl;
+        throw new Error(`Script URL "${mainScriptUrl}" not found in index.html. ` +
+            `Add it or change vite.mainScriptUrl in your Cosmos config.`);
+    }
+    // NOTE: This assumes the html will also be transformed to include a script
+    // tag with the default main script URL.
+    if (scripts.length === 0)
+        return defaultMainScriptUrl();
+    if (scripts.length === 1)
+        return scripts[0];
+    const mainUrl = guessMainScriptUrl(scripts);
+    if (mainUrl)
+        return mainUrl;
+    throw new Error(`Multiple script paths found in index.html. ` +
+        `Please set vite.mainScriptUrl in your Cosmos config: ` +
+        `https://reactcosmos.org/docs/getting-started/vite#configuration`);
+}
+function normalizeUrl(url) {
+    // "src/main.tsx" => "/src/main.tsx"
+    // "./src/main.tsx" => "/src/main.tsx"
+    // "../src/main.tsx" => "/src/main.tsx"
+    return `/${url
+        .split('/')
+        .filter(p => !['', '.', '..'].includes(p))
+        .join('/')}`;
+}
+function guessMainScriptUrl(urls) {
+    // Find main script URL from multiple script tags based on common patterns
+    // and pick the longest match when multiple matches are found.
+    // Eg. Between "/src/main.tsx" and "/foo/main.tsx", pick "/src/index.tsx"
+    let bestUrl = null;
+    let bestUrlLength = 0;
+    for (const url of urls) {
+        const match = url.match(mainUrlPattern);
+        if (match && match[0].length > bestUrlLength) {
+            bestUrl = url;
+            bestUrlLength = match[0].length;
+        }
+    }
+    return bestUrl;
+}

package/dist/indexHtml/getHtmlScriptUrls.d.ts

@@ -0,0 +1 @@
+export declare function getHtmlScriptUrls(html: string): string[];

package/dist/indexHtml/getHtmlScriptUrls.js

@@ -0,0 +1,16 @@
+import * as parse5 from 'parse5';
+export function getHtmlScriptUrls(html) {
+    const document = parse5.parse(html);
+    const urls = [];
+    function walk(node) {
+        if ('tagName' in node && node.tagName === 'script') {
+            const srcAttr = node.attrs.find(attr => attr.name === 'src');
+            if (srcAttr)
+                urls.push(srcAttr.value);
+        }
+        if ('childNodes' in node)
+            node.childNodes.forEach(walk);
+    }
+    walk(document);
+    return urls.filter(url => !url.startsWith('/@vite'));
+}

package/dist/reactCosmosViteRollupPlugin.d.ts

@@ -1,7 +1,8 @@
 import { CosmosConfig } from 'react-cosmos';
 import { CosmosMode } from 'react-cosmos-core';
-import { Plugin } from 'rollup';
+import { Plugin } from 'vite';
 import { CosmosViteConfig } from './createCosmosViteConfig.js';
+export declare const rendererResolvedModuleId: string;
 export declare const userImportsVirtualModuleId = "virtual:cosmos-imports";
 export declare const userImportsResolvedModuleId: string;
 export declare function reactCosmosViteRollupPlugin(config: CosmosConfig, cosmosViteConfig: CosmosViteConfig, mode: CosmosMode): Plugin;

package/dist/reactCosmosViteRollupPlugin.js

@@ -1,61 +1,67 @@
+import fs from 'node:fs';
 import path from 'node:path';
-import { findUserModulePaths, generateUserImports, getWebSocketUrl, slash, } from 'react-cosmos';
+import { findUserModulePaths, generateUserImports, getWebSocketUrl, } from 'react-cosmos';
 import { createViteRendererIndex } from './createViteRendererIndex.js';
+import { createIndexHtml } from './indexHtml/createIndexHtml.js';
+import { ensureMainScriptUrl } from './indexHtml/ensureMainScriptUrl.js';
+import { findMainScriptUrl } from './indexHtml/findMainScriptUrl.js';
+export const rendererResolvedModuleId = '\0' + 'virtual:cosmos-renderer';
 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(config, cosmosViteConfig, mode) {
+    let mainScriptUrl;
     return {
         name: 'react-cosmos-vite-renderer',
+        enforce: 'pre',
+        async buildStart() {
+            const htmlPath = path.resolve(config.rootDir, 'index.html');
+            // Other plugins might intercept <root>/index.html and resolve it to
+            // a different path. We need to respect that and avoid generating a new
+            // index.html in the root if it already exists.
+            const resolved = await this.resolve(htmlPath);
+            const html = resolved
+                ? fs.readFileSync(resolved.id, 'utf-8')
+                : createIndexHtml(htmlPath);
+            mainScriptUrl = findMainScriptUrl(html, cosmosViteConfig.mainScriptUrl);
+        },
+        transformIndexHtml(html) {
+            // Redetect the main script URL when index.html changes
+            mainScriptUrl = findMainScriptUrl(html, cosmosViteConfig.mainScriptUrl);
+            return ensureMainScriptUrl(html);
+        },
         resolveId(id) {
-            if (id === userImportsVirtualModuleId) {
-                return userImportsResolvedModuleId;
-            }
-            else {
-                return null;
+            switch (id) {
+                case mainScriptUrl:
+                    return rendererResolvedModuleId;
+                case userImportsVirtualModuleId:
+                    return userImportsResolvedModuleId;
+                default:
+                    return null;
             }
         },
         async load(id) {
-            if (id == userImportsResolvedModuleId) {
-                const modulePaths = await findUserModulePaths(config);
-                return generateUserImports({
-                    config,
-                    modulePaths,
-                    rendererConfig: {
-                        webSocketUrl: mode === 'dev' ? getWebSocketUrl(config) : null,
-                        rendererUrl: null,
-                        containerQuerySelector: config.dom.containerQuerySelector,
-                    },
-                    relativeToDir: null,
-                    typeScript: false,
-                });
-            }
-            else {
-                return null;
-            }
-        },
-        transform(src, id) {
-            const absPath = cosmosViteConfig.indexPath &&
-                absoluteIndexPath(cosmosViteConfig.indexPath, config.rootDir);
-            const isRendererIndex = absPath
-                ? absPath === id
-                : path.relative(config.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(userImportsVirtualModuleId),
-                    map: null,
-                };
-            }
-            else {
-                return null;
+            switch (id) {
+                case rendererResolvedModuleId: {
+                    console.log(`[Cosmos] Loading Cosmos renderer at ${mainScriptUrl}`);
+                    return createViteRendererIndex(userImportsVirtualModuleId);
+                }
+                case userImportsResolvedModuleId: {
+                    const modulePaths = await findUserModulePaths(config);
+                    return generateUserImports({
+                        config,
+                        modulePaths,
+                        rendererConfig: {
+                            webSocketUrl: mode === 'dev' ? getWebSocketUrl(config) : null,
+                            rendererUrl: null,
+                            containerQuerySelector: config.dom.containerQuerySelector,
+                        },
+                        relativeToDir: null,
+                        typeScript: false,
+                    });
+                }
+                default:
+                    return null;
             }
         },
     };
 }
-function absoluteIndexPath(indexPath, rootDir) {
-    return indexPath.startsWith(rootDir)
-        ? indexPath
-        : slash(path.join(rootDir, indexPath));
-}

package/dist/tsconfig.build.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/constants.ts","../src/createCosmosViteConfig.ts","../src/createViteRendererIndex.ts","../src/dom.ts","../src/reactCosmosViteRollupPlugin.ts","../src/viteConfigPlugin.ts","../src/viteDevServerPlugin.ts","../src/viteExportPlugin.ts","../src/viteServerPlugin.ts"],"version":"5.7.3"}
+{"root":["../src/constants.ts","../src/createcosmosviteconfig.ts","../src/createviterendererindex.ts","../src/dom.ts","../src/reactcosmosviterollupplugin.ts","../src/viteconfigplugin.ts","../src/vitedevserverplugin.ts","../src/viteexportplugin.ts","../src/viteserverplugin.ts","../src/indexhtml/createindexhtml.ts","../src/indexhtml/defaultmainscripturl.ts","../src/indexhtml/ensuremainscripturl.ts","../src/indexhtml/findmainscripturl.ts","../src/indexhtml/gethtmlscripturls.ts"],"version":"5.8.3"}

package/dist/viteExportPlugin.js

@@ -6,10 +6,10 @@ import { createCosmosViteConfig } from './createCosmosViteConfig.js';
 import { reactCosmosViteRollupPlugin } from './reactCosmosViteRollupPlugin.js';
 export async function viteExportPlugin({ config }) {
     const { rootDir, exportPath, publicUrl } = config;
-    const viteConfig = createCosmosViteConfig(config);
+    const cosmosViteConfig = createCosmosViteConfig(config);
     const outDir = path.join(exportPath, publicUrl);
     await build({
-        configFile: viteConfig.configPath,
+        configFile: cosmosViteConfig.configPath,
         root: rootDir,
         base: publicUrl,
         build: {
@@ -17,7 +17,7 @@ export async function viteExportPlugin({ config }) {
             emptyOutDir: false,
             minify: false,
         },
-        plugins: [reactCosmosViteRollupPlugin(config, viteConfig, 'export')],
+        plugins: [reactCosmosViteRollupPlugin(config, cosmosViteConfig, 'export')],
     });
     await rename(path.join(outDir, 'index.html'), path.join(outDir, RENDERER_FILENAME));
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "react-cosmos-plugin-vite",
-  "version": "6.2.4-canary.fa66419.0+fa66419",
+  "version": "7.0.0-beta.0",
   "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.2.4-canary.fa66419.0+fa66419",
-    "react-cosmos-dom": "6.2.4-canary.fa66419.0+fa66419"
+    "react-cosmos-core": "7.0.0-beta.0",
+    "react-cosmos-dom": "7.0.0-beta.0"
   },
   "peerDependencies": {
     "vite": "*"
   },
-  "gitHead": "fa66419918274f7fac6da86521f44cf097eb17b9"
+  "gitHead": "c01fecbf8b3342846f24d5860bf2d5146801ae3e"
 }