@runtime-env/vite-plugin 0.0.1 → 0.1.1

package/README.md

@@ -18,15 +18,15 @@ Before using the plugin, ensure you have the following prerequisites in your pro
     {
       "type": "object",
       "properties": {
-        "API_URL": { "type": "string" }
+        "VITE_API_URL": { "type": "string" }
       },
-      "required": ["API_URL"]
+      "required": ["VITE_API_URL"]
     }
     ```
 2.  **Provide local environment variables**
     Create a `.env` (or `.env.local`, `.env.development`, etc.) file to provide values for development:
     ```env
-    API_URL=http://localhost:3000
+    VITE_API_URL=http://localhost:3000
     ```
 3.  **Load the runtime environment**
     Add a `<script>` tag to your `index.html` **before** your main entry point to load the generated environment variables:
@@ -55,14 +55,14 @@ export default defineConfig({
 
 ```ts
 // Variables are available globally
-const apiUrl = runtimeEnv.API_URL;
+const apiUrl = runtimeEnv.VITE_API_URL;
 ```
 
 **In `index.html` (Template Interpolation):**
 
 ```html
 <!-- Use lodash-style templates -->
-<script src="https://maps.googleapis.com/maps/api/js?key=<%= runtimeEnv.GOOGLE_MAPS_API_KEY %>"></script>
+<script src="https://maps.googleapis.com/maps/api/js?key=<%= runtimeEnv.VITE_GOOGLE_MAPS_API_KEY %>"></script>
 ```
 
 That's it! The plugin automatically handles the following:

package/dist/build.js

@@ -1,13 +1,30 @@
-import { isTypeScriptProject, runRuntimeEnvCommand } from "./utils.js";
+import { isTypeScriptProject, runRuntimeEnvCommand, validateSchema, logError, hasRuntimeEnvScript, } from "./utils.js";
 export function buildPlugin() {
+    let config;
     return {
         name: "runtime-env-build",
-        config(config, configEnv) {
-            if (configEnv.command === "build") {
-                if (isTypeScriptProject(config.root || process.cwd())) {
-                    runRuntimeEnvCommand("gen-ts", "src/runtime-env.d.ts");
+        apply: "build",
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+            const validation = validateSchema(config.root, config.envPrefix);
+            if (!validation.success) {
+                logError(config.logger, "Schema validation failed", validation.message);
+                process.exit(1);
+            }
+            if (isTypeScriptProject(config.root)) {
+                const result = runRuntimeEnvCommand("gen-ts", "src/runtime-env.d.ts");
+                if (!result.success) {
+                    logError(config.logger, "Failed to generate runtime-env.d.ts", result.stderr || result.stdout);
+                    process.exit(1);
                 }
             }
         },
+        transformIndexHtml(html) {
+            if (!hasRuntimeEnvScript(html, config.base)) {
+                logError(config.logger, `index.html is missing <script src="${config.base === "/" ? "" : config.base}/runtime-env.js"></script>. ` +
+                    "This script tag is mandatory for @runtime-env/vite-plugin to function correctly in production.");
+                process.exit(1);
+            }
+        },
     };
 }

package/dist/dev.js

@@ -1,22 +1,45 @@
 import { resolve } from "path";
 import { writeFileSync, readFileSync, rmSync, existsSync } from "fs";
-import { isTypeScriptProject, runRuntimeEnvCommand, getTempDir, getViteEnvFiles, } from "./utils.js";
+import { isTypeScriptProject, runRuntimeEnvCommand, getTempDir, getViteEnvFiles, validateSchema, logError, clearLastError, hasRuntimeEnvScript, } from "./utils.js";
 const schemaFile = ".runtimeenvschema.json";
 export function devPlugin() {
     return {
         name: "runtime-env-dev",
+        apply(config, { command, mode }) {
+            return command === "serve" && mode !== "test";
+        },
         configureServer(server) {
-            if (server.config.mode === "test")
-                return;
             const envDir = server.config.envDir || server.config.root;
             const envFiles = getViteEnvFiles(server.config.mode, envDir);
-            const watchFiles = [schemaFile, ...envFiles];
+            const watchFiles = [resolve(server.config.root, schemaFile), ...envFiles];
+            let hadError = false;
             function run() {
+                const validation = validateSchema(server.config.root, server.config.envPrefix);
+                if (!validation.success) {
+                    logError(server.config.logger, "Schema validation failed", validation.message, server);
+                    hadError = true;
+                    return;
+                }
+                if (isTypeScriptProject(server.config.root)) {
+                    const tsResult = runRuntimeEnvCommand("gen-ts", "src/runtime-env.d.ts");
+                    if (!tsResult.success) {
+                        logError(server.config.logger, "Failed to generate runtime-env.d.ts", tsResult.stderr || tsResult.stdout, server);
+                        hadError = true;
+                        return;
+                    }
+                }
                 const devOutputDir = getTempDir("dev");
                 const devOutputPath = resolve(devOutputDir, "runtime-env.js");
-                runRuntimeEnvCommand("gen-js", devOutputPath, envFiles);
-                if (isTypeScriptProject(server.config.root)) {
-                    runRuntimeEnvCommand("gen-ts", "src/runtime-env.d.ts");
+                const jsResult = runRuntimeEnvCommand("gen-js", devOutputPath, envFiles);
+                if (!jsResult.success) {
+                    logError(server.config.logger, "Failed to generate runtime-env.js", jsResult.stderr || jsResult.stdout, server);
+                    hadError = true;
+                    return;
+                }
+                if (hadError) {
+                    clearLastError();
+                    server.ws.send({ type: "full-reload" });
+                    hadError = false;
                 }
             }
             run();
@@ -43,14 +66,22 @@ export function devPlugin() {
             });
         },
         transformIndexHtml(html, ctx) {
-            if (ctx.server && ctx.server.config.command === "serve") {
+            if (ctx.server) {
                 const envDir = ctx.server.config.envDir || ctx.server.config.root;
                 const envFiles = getViteEnvFiles(ctx.server.config.mode, envDir);
+                if (!hasRuntimeEnvScript(html, ctx.server.config.base)) {
+                    logError(ctx.server.config.logger, `index.html is missing <script src="${ctx.server.config.base === "/" ? "" : ctx.server.config.base}/runtime-env.js"></script>. ` +
+                        "Runtime values will not be available. Please add the script tag.", undefined, ctx.server);
+                }
                 const tmpDir = getTempDir("dev-interpolate");
                 try {
                     const htmlFile = resolve(tmpDir, "index.html");
                     writeFileSync(htmlFile, html, "utf8");
-                    runRuntimeEnvCommand("interpolate", htmlFile, envFiles, htmlFile);
+                    const result = runRuntimeEnvCommand("interpolate", htmlFile, envFiles, htmlFile);
+                    if (!result.success) {
+                        logError(ctx.server.config.logger, "Failed to interpolate index.html", result.stderr || result.stdout, ctx.server);
+                        return html;
+                    }
                     html = readFileSync(htmlFile, "utf8");
                     return html;
                 }

package/dist/preview.js

@@ -1,9 +1,15 @@
 import { resolve } from "path";
 import { readFileSync, writeFileSync, existsSync, rmSync } from "fs";
-import { runRuntimeEnvCommand, getTempDir, getViteEnvFiles } from "./utils.js";
+import { runRuntimeEnvCommand, getTempDir, getViteEnvFiles, validateSchema, logError, } from "./utils.js";
 export function previewPlugin() {
     return {
         name: "runtime-env-preview",
+        apply(config, { command }) {
+            // preview command also uses 'serve' but it's often better to just let it be
+            // and rely on the hook itself if we don't have a specific command.
+            // However, to be consistent with others:
+            return command === "serve";
+        },
         configurePreviewServer(server) {
             server.middlewares.use((req, res, next) => {
                 const base = server.config.base || "/";
@@ -21,10 +27,21 @@ export function previewPlugin() {
                 const envFiles = getViteEnvFiles(server.config.mode, envDir);
                 // Serve runtime-env.js
                 if (path === "/runtime-env.js") {
+                    const validation = validateSchema(server.config.root, server.config.envPrefix);
+                    if (!validation.success) {
+                        logError(server.config.logger, "Schema validation failed", validation.message);
+                        next();
+                        return;
+                    }
                     const tmpDir = getTempDir("preview-gen-js");
                     const tmpPath = resolve(tmpDir, "runtime-env.js");
                     try {
-                        runRuntimeEnvCommand("gen-js", tmpPath, envFiles);
+                        const result = runRuntimeEnvCommand("gen-js", tmpPath, envFiles);
+                        if (!result.success) {
+                            logError(server.config.logger, "Failed to generate runtime-env.js", result.stderr || result.stdout);
+                            next();
+                            return;
+                        }
                         if (existsSync(tmpPath)) {
                             const content = readFileSync(tmpPath, "utf8");
                             res.setHeader("Content-Type", "application/javascript");
@@ -38,6 +55,10 @@ export function previewPlugin() {
                 }
                 // Intercept index.html
                 if (path === "/" || path === "/index.html") {
+                    const validation = validateSchema(server.config.root, server.config.envPrefix);
+                    if (!validation.success) {
+                        logError(server.config.logger, "Schema validation failed", validation.message);
+                    }
                     const outDir = server.config.build.outDir || "dist";
                     const distIndexHtml = resolve(server.config.root, outDir, "index.html");
                     if (existsSync(distIndexHtml)) {
@@ -46,7 +67,13 @@ export function previewPlugin() {
                             const tmpHtmlPath = resolve(tmpDir, "index.html");
                             const originalHtml = readFileSync(distIndexHtml, "utf8");
                             writeFileSync(tmpHtmlPath, originalHtml, "utf8");
-                            runRuntimeEnvCommand("interpolate", tmpHtmlPath, envFiles, tmpHtmlPath);
+                            const result = runRuntimeEnvCommand("interpolate", tmpHtmlPath, envFiles, tmpHtmlPath);
+                            if (!result.success) {
+                                logError(server.config.logger, "Failed to interpolate index.html", result.stderr || result.stdout);
+                                res.setHeader("Content-Type", "text/html");
+                                res.end(originalHtml);
+                                return;
+                            }
                             const interpolatedHtml = readFileSync(tmpHtmlPath, "utf8");
                             res.setHeader("Content-Type", "text/html");
                             res.end(interpolatedHtml);

package/dist/utils.d.ts

@@ -1,5 +1,21 @@
+import type { Logger, ViteDevServer } from "vite";
+/**
+ * Clears the last error message to allow it to be logged again.
+ * This should be called when the plugin recovers from an error state.
+ */
+export declare function clearLastError(): void;
+export declare function logError(logger: Logger | undefined, message: string, error?: any, server?: ViteDevServer): void;
+export declare function validateSchema(root: string, envPrefix?: string | string[]): {
+    success: boolean;
+    message?: string;
+};
 export declare function isTypeScriptProject(root: string): boolean;
 export declare function getViteEnvFiles(mode: string, envDir: string): string[];
 export declare function getRuntimeEnvCommandLineArgs(command: string, outputFile: string, envFiles?: string[], inputFile?: string): string[];
-export declare function runRuntimeEnvCommand(command: string, outputFile: string, envFiles?: string[], inputFile?: string): void;
+export declare function runRuntimeEnvCommand(command: string, outputFile: string, envFiles?: string[], inputFile?: string): {
+    success: boolean;
+    stdout: string;
+    stderr: string;
+};
 export declare function getTempDir(subDir: string): string;
+export declare function hasRuntimeEnvScript(html: string, base: string): boolean;

package/dist/utils.js

@@ -1,10 +1,84 @@
-import { existsSync, mkdirSync } from "fs";
+import { existsSync, mkdirSync, readFileSync } from "fs";
 import { resolve } from "path";
 import { spawnSync } from "child_process";
 import { createRequire } from "module";
 const require = createRequire(import.meta.url);
 const schemaFile = ".runtimeenvschema.json";
 const globalVariableName = "runtimeEnv";
+let lastErrorMessage = null;
+/**
+ * Clears the last error message to allow it to be logged again.
+ * This should be called when the plugin recovers from an error state.
+ */
+export function clearLastError() {
+    lastErrorMessage = null;
+}
+export function logError(logger, message, error, server) {
+    const prefix = "[@runtime-env/vite-plugin]";
+    const fullMessage = `${prefix} ${message}`;
+    const errorDetails = error
+        ? typeof error === "string"
+            ? error
+            : error instanceof Error
+                ? error.message
+                : JSON.stringify(error)
+        : "";
+    const completeErrorMessage = errorDetails
+        ? `${fullMessage}\n${errorDetails}`
+        : fullMessage;
+    if (completeErrorMessage !== lastErrorMessage) {
+        if (!logger) {
+            console.error(fullMessage);
+            if (error)
+                console.error(errorDetails);
+        }
+        else {
+            logger.error(fullMessage, { timestamp: true });
+            if (error) {
+                logger.error(errorDetails, { timestamp: true });
+            }
+        }
+        lastErrorMessage = completeErrorMessage;
+    }
+    if (server) {
+        server.ws.send({
+            type: "error",
+            err: {
+                message: completeErrorMessage,
+                stack: "",
+            },
+        });
+    }
+}
+export function validateSchema(root, envPrefix = "VITE_") {
+    const schemaPath = resolve(root, schemaFile);
+    if (!existsSync(schemaPath)) {
+        return { success: true };
+    }
+    try {
+        const schemaContent = readFileSync(schemaPath, "utf-8");
+        const schema = JSON.parse(schemaContent);
+        if (schema.type !== "object" || !schema.properties) {
+            return { success: true }; // Let the CLI handle invalid schema format
+        }
+        const keys = Object.keys(schema.properties);
+        const prefixes = Array.isArray(envPrefix) ? envPrefix : [envPrefix];
+        const invalidKeys = keys.filter((key) => !prefixes.some((prefix) => key.startsWith(prefix)));
+        if (invalidKeys.length > 0) {
+            return {
+                success: false,
+                message: `The following keys in ${schemaFile} do not match any of the allowed env prefixes (${prefixes.join(", ")}): ${invalidKeys.join(", ")}`,
+            };
+        }
+    }
+    catch (error) {
+        return {
+            success: false,
+            message: `Failed to parse ${schemaFile}: ${error instanceof Error ? error.message : String(error)}`,
+        };
+    }
+    return { success: true };
+}
 export function isTypeScriptProject(root) {
     return existsSync(resolve(root, "tsconfig.json"));
 }
@@ -45,7 +119,12 @@ export function runRuntimeEnvCommand(command, outputFile, envFiles = [], inputFi
         // Fallback to local node_modules/.bin if require.resolve fails (e.g. during development or in some monorepo setups)
         cliPath = resolve("node_modules", ".bin", "runtime-env");
     }
-    spawnSync("node", [cliPath, ...args]);
+    const result = spawnSync("node", [cliPath, ...args], { encoding: "utf8" });
+    return {
+        success: result.status === 0,
+        stdout: result.stdout,
+        stderr: result.stderr,
+    };
 }
 export function getTempDir(subDir) {
     const root = process.cwd();
@@ -53,3 +132,22 @@ export function getTempDir(subDir) {
     mkdirSync(tempDir, { recursive: true });
     return tempDir;
 }
+export function hasRuntimeEnvScript(html, base) {
+    // Normalize base: ensure it starts with / and doesn't end with / (unless it's just /)
+    const normalizedBase = base.startsWith("/") ? base : `/${base}`;
+    const finalBase = normalizedBase.endsWith("/") && normalizedBase.length > 1
+        ? normalizedBase.slice(0, -1)
+        : normalizedBase;
+    const expectedSrc = `${finalBase === "/" ? "" : finalBase}/runtime-env.js`;
+    // Regex to find script tag with src matching runtime-env.js
+    // It accounts for varying whitespace, attribute order, and quote types.
+    const scriptRegex = /<script\b[^>]*?\bsrc\s*=\s*(['"])([^'"]*\/runtime-env\.js)\1[^>]*?>\s*<\/script>/gi;
+    let match;
+    while ((match = scriptRegex.exec(html)) !== null) {
+        const src = match[2];
+        if (src === expectedSrc || src === "/runtime-env.js") {
+            return true;
+        }
+    }
+    return false;
+}

package/dist/vitest.d.ts

@@ -1,2 +1,3 @@
 import type { Plugin } from "vite";
+import "vitest/config";
 export declare function vitestPlugin(): Plugin;

package/dist/vitest.js

@@ -1,38 +1,60 @@
+import "vitest/config";
 import { resolve } from "path";
 import { rmSync } from "fs";
-import { isTypeScriptProject, runRuntimeEnvCommand, getTempDir, getViteEnvFiles, } from "./utils.js";
+import { isTypeScriptProject, runRuntimeEnvCommand, getTempDir, getViteEnvFiles, validateSchema, logError, } from "./utils.js";
 export function vitestPlugin() {
     return {
         name: "runtime-env-vitest",
-        config(config, configEnv) {
-            if (config.mode === "test") {
-                const root = config.root || process.cwd();
-                // Generate runtime-env.d.ts for Vitest type checking
-                if (isTypeScriptProject(root)) {
-                    runRuntimeEnvCommand("gen-ts", "src/runtime-env.d.ts");
-                }
-                const envDir = config.envDir || root;
-                const envFiles = getViteEnvFiles(config.mode, envDir);
-                // Generate runtime-env.js for Vitest runtime access
-                const vitestOutputDir = getTempDir("vitest");
-                const vitestOutputPath = resolve(vitestOutputDir, "runtime-env.js");
-                // Ensure directory is clean
-                rmSync(vitestOutputDir, { recursive: true, force: true });
-                getTempDir("vitest"); // Re-create it clean
-                runRuntimeEnvCommand("gen-js", vitestOutputPath, envFiles);
-                // Automatically inject setupFiles for Vitest
-                const vitestConfig = config.test || {};
-                const setupFiles = vitestConfig.setupFiles || [];
-                if (Array.isArray(setupFiles)) {
+        apply(_config, { mode }) {
+            return mode === "test";
+        },
+        config(config) {
+            // Generate runtime-env.js for Vitest runtime access
+            const vitestOutputDir = getTempDir("vitest");
+            const vitestOutputPath = resolve(vitestOutputDir, "runtime-env.js");
+            // Automatically inject setupFiles for Vitest
+            const vitestConfig = config.test || {};
+            const setupFiles = vitestConfig.setupFiles || [];
+            if (Array.isArray(setupFiles)) {
+                if (!setupFiles.includes(vitestOutputPath)) {
                     setupFiles.push(vitestOutputPath);
                 }
-                else {
-                    vitestConfig.setupFiles = [setupFiles, vitestOutputPath];
+            }
+            else {
+                vitestConfig.setupFiles = [setupFiles, vitestOutputPath];
+            }
+            config.test = {
+                ...vitestConfig,
+                setupFiles,
+            };
+        },
+        configResolved(config) {
+            const root = config.root || process.cwd();
+            const validation = validateSchema(root, config.envPrefix);
+            if (!validation.success) {
+                logError(config.logger, "Schema validation failed", validation.message);
+                process.exit(1);
+            }
+            // Generate runtime-env.d.ts for Vitest type checking
+            if (isTypeScriptProject(root)) {
+                const result = runRuntimeEnvCommand("gen-ts", "src/runtime-env.d.ts");
+                if (!result.success) {
+                    logError(config.logger, "Failed to generate runtime-env.d.ts", result.stderr || result.stdout);
+                    process.exit(1);
                 }
-                config.test = {
-                    ...vitestConfig,
-                    setupFiles,
-                };
+            }
+            const envDir = config.envDir || root;
+            const envFiles = getViteEnvFiles(config.mode, envDir);
+            // Generate runtime-env.js for Vitest runtime access
+            const vitestOutputDir = getTempDir("vitest");
+            const vitestOutputPath = resolve(vitestOutputDir, "runtime-env.js");
+            // Ensure directory is clean
+            rmSync(vitestOutputDir, { recursive: true, force: true });
+            getTempDir("vitest"); // Re-create it clean
+            const result = runRuntimeEnvCommand("gen-js", vitestOutputPath, envFiles);
+            if (!result.success) {
+                logError(config.logger, "Failed to generate runtime-env.js", result.stderr || result.stdout);
+                process.exit(1);
             }
         },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtime-env/vite-plugin",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "Opinionated Vite plugin for runtime-env",
   "license": "MIT",
   "author": "Ernest",
@@ -34,14 +34,20 @@
     "url": "https://github.com/runtime-env/runtime-env/issues"
   },
   "homepage": "https://github.com/runtime-env/runtime-env#readme",
-  "dependencies": {},
   "peerDependencies": {
     "@runtime-env/cli": "*",
-    "vite": "*"
+    "vite": "7.3.1",
+    "vitest": "4.0.17"
+  },
+  "peerDependenciesMeta": {
+    "vitest": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@runtime-env/cli": "^1.0.0",
-    "vite": "7.3.0"
+    "vite": "7.3.1",
+    "vitest": "4.0.17"
   },
   "type": "module"
 }