rails-vite-plugin 0.2.0 → 0.2.2

package/dist/index.js

@@ -2,9 +2,11 @@ import fs from 'fs';
 import path from 'path';
 import picomatch from 'picomatch';
 import { loadEnv, defaultAllowedOrigins, } from 'vite';
+import { ORIGIN_PLACEHOLDER } from './shared/types.js';
 import { resolveInput, detectEntrypointsDir, discoverEntrypointInputs, detectEntrypoint } from './shared/entries.js';
 import { resolveAlias } from './shared/alias.js';
-import { resolveDevServerUrl, isAddressInfo } from './shared/dev-server.js';
+import { resolveDevServerUrl, isAddressInfo, replaceOriginPlaceholder } from './shared/dev-server.js';
+import { resolveBundlerOptionsKey, getUserBundlerInput } from './shared/bundler-compat.js';
 import { ensureCommandShouldRunInEnvironment } from './shared/env-guard.js';
 import { refreshPaths, resolveRefreshPaths } from './shared/refresh.js';
 import { readDevServerIndexHtml } from './shared/dev-server-page.js';
@@ -16,32 +18,39 @@ export default function rails(options = {}) {
     const entrypointsDir = options.input === undefined ? detectEntrypointsDir(sourceDir) : null;
     const input = options.input ?? (entrypointsDir ? discoverEntrypointInputs(sourceDir, entrypointsDir) : detectEntrypoint(sourceDir));
     const publicDir = options.publicDir ?? 'public';
-    const buildDir = options.buildDir ?? 'vite';
+    const userBuildDir = options.buildDir;
     const devMetaPath = options.devMetaFile ?? path.join('tmp', 'rails-vite.json');
     const ssrOutDir = options.ssrOutDir ?? 'ssr';
     const resolvedInput = resolveInput(input, sourceDir);
     const resolvedSsr = options.ssr !== undefined ? resolveInput(options.ssr, sourceDir) : undefined;
     let resolvedConfig;
     let reactRefresh = false;
+    let devServerUrl = null;
+    let effectiveBuildDir;
     return {
         name: 'rails-vite',
         enforce: 'post',
         config(userConfig, { command, mode, isSsrBuild }) {
             const env = loadEnv(mode, userConfig.envDir || process.cwd(), '');
             ensureCommandShouldRunInEnvironment(command, env, 'rails-vite-plugin');
+            // @ts-expect-error -- `this.meta.rolldownVersion` exists in Vite 8+
+            const bundlerOptionsKey = resolveBundlerOptionsKey(this.meta);
+            const userBundlerInput = getUserBundlerInput(userConfig);
+            effectiveBuildDir = userBuildDir ?? (mode === 'test' ? 'vite-test' : 'vite');
             return {
-                base: userConfig.base ?? (command === 'build' ? `/${buildDir}/` : ''),
+                base: userConfig.base ?? (command === 'build' ? `/${effectiveBuildDir}/` : ''),
                 publicDir: userConfig.publicDir ?? false,
                 build: {
                     manifest: userConfig.build?.manifest ?? (isSsrBuild ? false : 'manifest.json'),
                     ssrManifest: userConfig.build?.ssrManifest ?? (isSsrBuild ? 'ssr-manifest.json' : false),
-                    outDir: userConfig.build?.outDir ?? (isSsrBuild ? ssrOutDir : path.join(publicDir, buildDir)),
-                    rollupOptions: {
-                        input: userConfig.build?.rollupOptions?.input ?? (isSsrBuild ? resolvedSsr : resolvedInput),
+                    outDir: userConfig.build?.outDir ?? (isSsrBuild ? ssrOutDir : path.join(publicDir, effectiveBuildDir)),
+                    [bundlerOptionsKey]: {
+                        input: userBundlerInput ?? (isSsrBuild ? resolvedSsr : resolvedInput),
                     },
                     assetsInlineLimit: userConfig.build?.assetsInlineLimit ?? 0,
                 },
                 server: {
+                    origin: command === 'serve' ? (userConfig.server?.origin ?? ORIGIN_PLACEHOLDER) : undefined,
                     cors: userConfig.server?.cors ?? {
                         origin: userConfig.server?.origin ?? defaultAllowedOrigins,
                     },
@@ -62,15 +71,20 @@ export default function rails(options = {}) {
             if (resolvedConfig.build.ssr)
                 return;
             const outDir = resolvedConfig.build.outDir;
-            fs.writeFileSync(path.join(outDir, 'rails-vite.json'), JSON.stringify(entrypointsDir ? { sourceDir, entrypointsDir } : { sourceDir }));
+            const meta = { sourceDir, buildDir: effectiveBuildDir };
+            if (entrypointsDir)
+                meta.entrypointsDir = entrypointsDir;
+            fs.writeFileSync(path.join(outDir, 'rails-vite.json'), JSON.stringify(meta));
+        },
+        transform(code) {
+            return replaceOriginPlaceholder(code, devServerUrl);
         },
         configureServer(server) {
             server.httpServer?.once('listening', () => {
                 const address = server.httpServer?.address();
                 if (isAddressInfo(address)) {
-                    const devServerUrl = resolveDevServerUrl(address, resolvedConfig);
-                    resolvedConfig.server.origin = devServerUrl;
-                    const meta = { url: devServerUrl, sourceDir };
+                    devServerUrl = resolveDevServerUrl(address, resolvedConfig);
+                    const meta = { url: devServerUrl, sourceDir, buildDir: effectiveBuildDir };
                     if (entrypointsDir)
                         meta.entrypointsDir = entrypointsDir;
                     if (reactRefresh)

package/dist/jsbundling.js

@@ -2,9 +2,11 @@ import fs from 'fs';
 import path from 'path';
 import picomatch from 'picomatch';
 import { loadEnv, defaultAllowedOrigins, } from 'vite';
+import { ORIGIN_PLACEHOLDER } from './shared/types.js';
 import { resolveEntries, entriesToRollupInput, prefixWithSourceDir, detectEntrypointsDir, discoverEntrypointInputs, detectEntrypoint, isEntrypointFile } from './shared/entries.js';
 import { resolveAlias } from './shared/alias.js';
-import { resolveDevServerUrl, isAddressInfo } from './shared/dev-server.js';
+import { resolveDevServerUrl, isAddressInfo, replaceOriginPlaceholder } from './shared/dev-server.js';
+import { resolveBundlerOptionsKey, getUserBundlerInput } from './shared/bundler-compat.js';
 import { ensureCommandShouldRunInEnvironment } from './shared/env-guard.js';
 import { refreshPaths, resolveRefreshPaths } from './shared/refresh.js';
 import { cssExtensions } from './shared/css.js';
@@ -30,6 +32,7 @@ export default function jsbundling(options = {}) {
     const ssrConfig = resolveSsrConfig(options.ssr, sourceDir, outputDir);
     let resolvedConfig;
     let reactRefresh = false;
+    let devServerUrl = null;
     // Track stubs written in dev so we can clean them up
     const writtenStubs = [];
     return {
@@ -38,6 +41,9 @@ export default function jsbundling(options = {}) {
         config(userConfig, { command, mode, isSsrBuild }) {
             const env = loadEnv(mode, userConfig.envDir || process.cwd(), '');
             ensureCommandShouldRunInEnvironment(command, env, 'rails-vite-plugin/jsbundling');
+            // @ts-expect-error -- `this.meta.rolldownVersion` exists in Vite 8+
+            const bundlerOptionsKey = resolveBundlerOptionsKey(this.meta);
+            const userBundlerInput = getUserBundlerInput(userConfig);
             // SSR builds get minimal config — just entry, outDir, base, and alias.
             // No asset pipeline stubs or client-specific settings.
             if (isSsrBuild) {
@@ -48,8 +54,8 @@ export default function jsbundling(options = {}) {
                         build: {
                             ssrManifest: userConfig.build?.ssrManifest ?? 'ssr-manifest.json',
                             outDir: userConfig.build?.outDir ?? ssrConfig.outDir,
-                            rollupOptions: {
-                                input: userConfig.build?.rollupOptions?.input ?? ssrConfig.entry,
+                            [bundlerOptionsKey]: {
+                                input: userBundlerInput ?? ssrConfig.entry,
                             },
                         },
                     } : {}),
@@ -61,25 +67,20 @@ export default function jsbundling(options = {}) {
                     },
                 };
             }
-            // In dev mode, write placeholder stubs immediately so Propshaft/Sprockets
-            // can discover them when Rails boots (both may start concurrently via bin/dev).
-            if (command === 'serve') {
-                writePlaceholderStubs(entries, assetPipelineDir, writtenStubs);
-            }
             return {
                 base: userConfig.base ?? (command === 'build' ? buildBase : ''),
                 publicDir: userConfig.publicDir ?? false,
                 build: {
                     manifest: userConfig.build?.manifest ?? false,
                     outDir: userConfig.build?.outDir ?? outputDir,
-                    rollupOptions: {
-                        input: userConfig.build?.rollupOptions?.input ?? rollupInput,
+                    [bundlerOptionsKey]: {
+                        input: userBundlerInput ?? rollupInput,
                         output: {
                             entryFileNames: (chunkInfo) => {
                                 if (chunkInfo.facadeModuleId && cssExtensions.test(chunkInfo.facadeModuleId)) {
                                     return `${CSS_FACADE_PREFIX}[name].js`;
                                 }
-                                return '[name].js';
+                                return '_[name]-[hash].js';
                             },
                             chunkFileNames: '[name]-[hash].js',
                             assetFileNames: '[name][extname]',
@@ -89,6 +90,7 @@ export default function jsbundling(options = {}) {
                     cssCodeSplit: true,
                 },
                 server: {
+                    origin: command === 'serve' ? (userConfig.server?.origin ?? ORIGIN_PLACEHOLDER) : undefined,
                     cors: userConfig.server?.cors ?? {
                         origin: userConfig.server?.origin ?? defaultAllowedOrigins,
                     },
@@ -118,19 +120,30 @@ export default function jsbundling(options = {}) {
             // SSR bundles are Node.js server code — not served to browsers.
             if (resolvedConfig.build.ssr)
                 return;
-            // Copy entry files (JS + CSS) to the asset pipeline directory
-            // so Propshaft/Sprockets can serve them via Rails helpers.
-            // Chunks stay in outputDir and are served directly by the web server.
             fs.mkdirSync(assetPipelineDir, { recursive: true });
             const outDir = resolvedConfig.build.outDir;
-            // Only copy CSS files that correspond to entries (entry CSS or CSS extracted
-            // from JS entries). Shared chunk CSS stays in outputDir.
             const entryNames = new Set(entries.map(e => e.name));
             for (const [fileName, chunk] of Object.entries(bundle)) {
                 const isEntryJs = chunk.type === 'chunk' && chunk.isEntry;
                 const isEntryCss = chunk.type === 'asset' && cssExtensions.test(fileName)
                     && entryNames.has(fileName.replace(/\.[^.]+$/, ''));
-                if (isEntryJs || isEntryCss) {
+                if (isEntryJs) {
+                    // JS entries are built as _[name]-[hash].js (content-hashed).
+                    // Write a thin shim as [name].js for the asset pipeline so that
+                    // Propshaft/Sprockets can serve it via javascript_include_tag.
+                    //
+                    // Why: Propshaft digests entry filenames (inertia.js → inertia-abc123.js)
+                    // but cannot rewrite import paths inside Vite's chunks. Without the shim,
+                    // the <script> tag and chunk imports resolve to different ES module
+                    // instances — duplicating React, Inertia, and other stateful singletons.
+                    // The shim ensures both paths chain to the same _[name]-[hash].js module.
+                    const shimName = chunk.name + '.js';
+                    const shim = `import "./${fileName}";export * from "./${fileName}";\n`;
+                    fs.writeFileSync(path.join(outDir, shimName), shim);
+                    fs.writeFileSync(path.join(assetPipelineDir, shimName), shim);
+                }
+                else if (isEntryCss) {
+                    // Copy entry CSS to the asset pipeline. Shared chunk CSS stays in outputDir.
                     const src = path.join(outDir, fileName);
                     const dest = path.join(assetPipelineDir, fileName);
                     fs.mkdirSync(path.dirname(dest), { recursive: true });
@@ -138,8 +151,10 @@ export default function jsbundling(options = {}) {
                 }
             }
         },
+        transform(code) {
+            return replaceOriginPlaceholder(code, devServerUrl);
+        },
         configureServer(server) {
-            let devServerUrl = null;
             let syncTimer = null;
             // Re-discover entries from the entrypoints dir and regenerate all stubs.
             // Called on initial listen and whenever entrypoint files are added/removed.
@@ -162,6 +177,13 @@ export default function jsbundling(options = {}) {
                     clearTimeout(syncTimer);
                 syncTimer = setTimeout(syncStubs, 100);
             };
+            // Write placeholder stubs so Propshaft/Sprockets can discover asset files
+            // at boot time, before the Vite dev server is ready with its URL.
+            // Only write when httpServer exists — skip for embedded Vite instances
+            // (e.g., Storybook) that would otherwise overwrite real dev stubs.
+            if (server.httpServer && !server.httpServer.listening) {
+                writePlaceholderStubs(entries, assetPipelineDir, writtenStubs);
+            }
             server.httpServer?.once('listening', () => {
                 const address = server.httpServer?.address();
                 if (isAddressInfo(address)) {

package/dist/shared/bundler-compat.d.ts

@@ -0,0 +1,5 @@
+import type { UserConfig } from 'vite';
+export declare function resolveBundlerOptionsKey(meta: {
+    rolldownVersion?: string;
+}): 'rolldownOptions' | 'rollupOptions';
+export declare function getUserBundlerInput(userConfig: UserConfig): unknown;

package/dist/shared/bundler-compat.js

@@ -0,0 +1,9 @@
+// Vite 8 (Rolldown) uses `rolldownOptions` instead of `rollupOptions`.
+// Detect at runtime to support both Vite 7 and 8.
+export function resolveBundlerOptionsKey(meta) {
+    return meta?.rolldownVersion ? 'rolldownOptions' : 'rollupOptions';
+}
+export function getUserBundlerInput(userConfig) {
+    // @ts-expect-error -- `rolldownOptions` exists in Vite 8+ only
+    return userConfig.build?.rolldownOptions?.input ?? userConfig.build?.rollupOptions?.input;
+}

package/dist/shared/dev-server.d.ts

@@ -3,3 +3,4 @@ import type { ResolvedConfig } from 'vite';
 import type { DevServerUrl } from './types.js';
 export declare function resolveDevServerUrl(address: AddressInfo, config: ResolvedConfig): DevServerUrl;
 export declare function isAddressInfo(x: string | AddressInfo | null | undefined): x is AddressInfo;
+export declare function replaceOriginPlaceholder(code: string, devServerUrl: string | null): string | undefined;

package/dist/shared/dev-server.js

@@ -1,3 +1,4 @@
+import { ORIGIN_PLACEHOLDER } from './types.js';
 export function resolveDevServerUrl(address, config) {
     const hmr = typeof config.server.hmr === 'object' ? config.server.hmr : null;
     const clientProtocol = hmr?.protocol
@@ -18,3 +19,8 @@ export function resolveDevServerUrl(address, config) {
 export function isAddressInfo(x) {
     return typeof x === 'object' && x !== null;
 }
+export function replaceOriginPlaceholder(code, devServerUrl) {
+    if (devServerUrl && code.includes(ORIGIN_PLACEHOLDER)) {
+        return code.replaceAll(ORIGIN_PLACEHOLDER, devServerUrl);
+    }
+}

package/dist/shared/types.d.ts

@@ -1,5 +1,6 @@
 export type InputOption = string | string[] | Record<string, string>;
 export type DevServerUrl = `${'http' | 'https'}://${string}:${number}`;
+export declare const ORIGIN_PLACEHOLDER = "http://__rails_vite_placeholder__.test";
 export interface ResolvedEntry {
     /** Output name (e.g., 'application', 'admin/index') */
     name: string;

package/dist/shared/types.js

@@ -1 +1,3 @@
-export {};
+// Placeholder URL used as `server.origin` during config resolution.
+// Replaced with the real dev server URL once the server starts listening.
+export const ORIGIN_PLACEHOLDER = 'http://__rails_vite_placeholder__.test';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rails-vite-plugin",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Vite plugin for Rails integration",
   "author": "Svyatoslav Kryukov <me@skryukov.dev>",
   "license": "MIT",