env-flag 1.0.2 → 1.0.3

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Environment Flag - A lightweight library to display environment indicators
+ * @version 1.0.0
+ */
+declare global {
+    interface ImportMeta {
+        readonly env: ImportMetaEnv;
+    }
+    interface ImportMetaEnv {
+        readonly NODE_ENV?: string;
+        readonly VITE_NODE_ENV?: string;
+        readonly VITE_APP_NODE_ENV?: string;
+        readonly VITE_APP_ENV?: string;
+        readonly VITE_ENV?: string;
+        readonly REACT_APP_NODE_ENV?: string;
+        readonly REACT_APP_ENV?: string;
+        readonly VUE_APP_NODE_ENV?: string;
+        readonly VUE_APP_ENV?: string;
+        readonly [key: string]: string | undefined;
+    }
+}
+type Environment = "development" | "production" | "staging" | "test";
+type Position = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+type Size = "small" | "medium" | "large";
+interface EnvFlagConfig {
+    readonly productionColor?: string;
+    readonly developmentColor?: string;
+    readonly stagingColor?: string;
+    readonly testColor?: string;
+    readonly productionText?: string;
+    readonly developmentText?: string;
+    readonly stagingText?: string;
+    readonly testText?: string;
+    readonly position?: Position;
+    readonly size?: Size;
+    readonly autoDetectEnv?: boolean;
+    readonly forceEnv?: Environment;
+    readonly enabled?: boolean;
+    readonly debug?: boolean;
+}
+declare class EnvFlag {
+    private static readonly DEFAULT_CONFIG;
+    private static readonly ELEMENT_ID;
+    private static readonly Z_INDEX;
+    private readonly config;
+    private flagElement;
+    private eventListeners;
+    constructor(config?: EnvFlagConfig);
+    /**
+     * Initialize the environment flag
+     */
+    init: () => void;
+    /**
+     * Destroy the environment flag and clean up resources
+     */
+    destroy: () => void;
+    /**
+     * Update configuration and recreate flag
+     */
+    updateConfig: (newConfig: Partial<EnvFlagConfig>) => void;
+    /**
+     * Get current environment
+     */
+    getCurrentEnvironment: () => Environment;
+    private isValidEnvironment;
+    private detectEnvironment;
+    private getNodeEnv;
+    private getCustomEnv;
+    private isValidEnvironmentString;
+    private createFlag;
+    private applyStyles;
+    private getEnvironmentStyles;
+    private getEnvironmentText;
+    private getSizeStyles;
+    private getPositionStyles;
+    private getPositionCoordinates;
+    private attachEventListeners;
+    private handleClick;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleKeydown;
+    private removeEventListeners;
+    private removeFlagElement;
+}
+export default EnvFlag;
+export type { EnvFlagConfig, Environment, Position, Size };

package/dist/index.js

@@ -0,0 +1,326 @@
+/**
+ * Environment Flag - A lightweight library to display environment indicators
+ * @version 1.0.0
+ */
+class EnvFlag {
+    constructor(config = {}) {
+        this.flagElement = null;
+        this.eventListeners = [];
+        /**
+         * Initialize the environment flag
+         */
+        this.init = () => {
+            if (!this.isValidEnvironment())
+                return;
+            if (!this.config.enabled)
+                return;
+            this.destroy(); // Clean up any existing flag
+            this.createFlag();
+        };
+        /**
+         * Destroy the environment flag and clean up resources
+         */
+        this.destroy = () => {
+            this.removeEventListeners();
+            this.removeFlagElement();
+        };
+        /**
+         * Update configuration and recreate flag
+         */
+        this.updateConfig = (newConfig) => {
+            Object.assign(this.config, newConfig);
+            this.init();
+        };
+        /**
+         * Get current environment
+         */
+        this.getCurrentEnvironment = () => {
+            if (this.config.forceEnv)
+                return this.config.forceEnv;
+            if (!this.config.autoDetectEnv)
+                return "development";
+            return this.detectEnvironment();
+        };
+        this.isValidEnvironment = () => typeof window !== "undefined" && typeof document !== "undefined";
+        this.detectEnvironment = () => {
+            const indicators = {
+                hostname: window.location?.hostname || "",
+                nodeEnv: this.getNodeEnv(),
+                customEnv: this.getCustomEnv(),
+                userAgent: navigator?.userAgent || "",
+            };
+            // Priority 1: Custom environment variable (highest priority)
+            if (indicators.customEnv)
+                return indicators.customEnv;
+            // Priority 2: NODE_ENV from bundler
+            if (indicators.nodeEnv)
+                return indicators.nodeEnv;
+            // Priority 3: Hostname-based detection
+            // Production indicators
+            if (indicators.hostname.includes("prod") ||
+                (!indicators.hostname.includes("localhost") &&
+                    !indicators.hostname.includes("127.0.0.1") &&
+                    !indicators.hostname.includes("dev") &&
+                    !indicators.hostname.includes("staging") &&
+                    !indicators.hostname.includes("test") &&
+                    indicators.hostname.length > 0))
+                return "production";
+            // Staging indicators
+            if (indicators.hostname.includes("staging") ||
+                indicators.hostname.includes("stage"))
+                return "staging";
+            // Test indicators
+            if (indicators.hostname.includes("test"))
+                return "test";
+            return "development";
+        };
+        this.getNodeEnv = () => {
+            // Vite environment (import.meta.env)
+            if (typeof import.meta !== "undefined" && import.meta.env) {
+                const viteEnv = import.meta.env.NODE_ENV || import.meta.env.VITE_NODE_ENV;
+                if (viteEnv && this.isValidEnvironmentString(viteEnv)) {
+                    return viteEnv;
+                }
+            }
+            // Webpack/traditional bundler environment (process.env)
+            if (typeof globalThis !== "undefined" &&
+                globalThis.process?.env?.NODE_ENV) {
+                const nodeEnv = globalThis.process.env.NODE_ENV;
+                if (this.isValidEnvironmentString(nodeEnv))
+                    return nodeEnv;
+            }
+            return "";
+        };
+        this.getCustomEnv = () => {
+            const customEnvVars = [
+                "VITE_APP_NODE_ENV",
+                "VITE_APP_ENV",
+                "VITE_ENV",
+                "REACT_APP_NODE_ENV",
+                "REACT_APP_ENV",
+                "VUE_APP_NODE_ENV",
+                "VUE_APP_ENV",
+            ];
+            // Vite environment
+            if (typeof import.meta !== "undefined" && import.meta.env) {
+                for (const envVar of customEnvVars) {
+                    const value = import.meta.env[envVar];
+                    if (value && this.isValidEnvironmentString(value)) {
+                        if (this.config.debug) {
+                            console.log(`[EnvFlag] Found custom env variable ${envVar}:`, value);
+                        }
+                        return value;
+                    }
+                }
+            }
+            // Webpack/traditional bundler environment
+            if (typeof globalThis !== "undefined" && globalThis.process?.env) {
+                for (const envVar of customEnvVars) {
+                    const value = globalThis.process.env[envVar];
+                    if (value && this.isValidEnvironmentString(value)) {
+                        if (this.config.debug) {
+                            console.log(`[EnvFlag] Found custom env variable ${envVar}:`, value);
+                        }
+                        return value;
+                    }
+                }
+            }
+            return "";
+        };
+        this.isValidEnvironmentString = (env) => ["development", "production", "staging", "test"].includes(env);
+        this.createFlag = () => {
+            const environment = this.getCurrentEnvironment();
+            this.flagElement = document.createElement("div");
+            this.flagElement.id = EnvFlag.ELEMENT_ID;
+            this.flagElement.setAttribute("data-env", environment);
+            this.flagElement.setAttribute("role", "status");
+            this.flagElement.setAttribute("aria-label", `Environment: ${environment}`);
+            this.applyStyles(environment);
+            this.attachEventListeners();
+            // Use requestAnimationFrame for better performance
+            requestAnimationFrame(() => {
+                if (this.flagElement && document.body) {
+                    document.body.appendChild(this.flagElement);
+                }
+            });
+        };
+        this.applyStyles = (environment) => {
+            if (!this.flagElement)
+                return;
+            const styles = this.getEnvironmentStyles(environment);
+            const positionStyles = this.getPositionStyles();
+            const sizeStyles = this.getSizeStyles();
+            // Apply base styles
+            Object.assign(this.flagElement.style, {
+                // Content
+                textContent: this.getEnvironmentText(environment),
+                // Colors
+                backgroundColor: styles.backgroundColor,
+                color: styles.color,
+                // Typography
+                fontFamily: '"Segoe UI", system-ui, -apple-system, sans-serif',
+                fontWeight: "600",
+                fontSize: sizeStyles.fontSize,
+                lineHeight: "1",
+                textAlign: "center",
+                // Layout
+                position: "fixed",
+                zIndex: EnvFlag.Z_INDEX,
+                padding: sizeStyles.padding,
+                // Visual
+                borderRadius: positionStyles.borderRadius,
+                opacity: styles.opacity,
+                // Interaction
+                cursor: "pointer",
+                userSelect: "none",
+                transition: "all 0.2s ease-in-out",
+                // Positioning
+                ...this.getPositionCoordinates(),
+                // Accessibility
+                outline: "none",
+            });
+            this.flagElement.textContent = this.getEnvironmentText(environment);
+        };
+        this.getEnvironmentStyles = (environment) => {
+            const colorMap = {
+                production: this.config.productionColor,
+                development: this.config.developmentColor,
+                staging: this.config.stagingColor,
+                test: this.config.testColor,
+            };
+            return {
+                backgroundColor: colorMap[environment],
+                color: "#ffffff",
+                fontSize: this.getSizeStyles().fontSize,
+                padding: this.getSizeStyles().padding,
+                borderRadius: this.getPositionStyles().borderRadius,
+                opacity: "0.9",
+            };
+        };
+        this.getEnvironmentText = (environment) => ({
+            production: this.config.productionText,
+            development: this.config.developmentText,
+            staging: this.config.stagingText,
+            test: this.config.testText,
+        }[environment]);
+        this.getSizeStyles = () => ({
+            small: { fontSize: "10px", padding: "4px 8px" },
+            medium: { fontSize: "12px", padding: "6px 12px" },
+            large: { fontSize: "14px", padding: "8px 16px" },
+        }[this.config.size]);
+        this.getPositionStyles = () => ({
+            borderRadius: {
+                "top-right": "0 0 0 4px",
+                "top-left": "0 0 4px 0",
+                "bottom-left": "0 4px 0 0",
+                "bottom-right": "4px 0 0 0",
+            }[this.config.position],
+        });
+        this.getPositionCoordinates = () => ({
+            "top-right": { top: "0", right: "0" },
+            "top-left": { top: "0", left: "0" },
+            "bottom-left": { bottom: "0", left: "0" },
+            "bottom-right": { bottom: "0", right: "0" },
+        }[this.config.position]);
+        this.attachEventListeners = () => {
+            if (!this.flagElement)
+                return;
+            // Click to remove
+            const clickHandler = this.handleClick.bind(this);
+            this.flagElement.addEventListener("click", clickHandler);
+            this.eventListeners.push({
+                element: this.flagElement,
+                event: "click",
+                handler: clickHandler,
+            });
+            // Hover effects
+            const mouseEnterHandler = this.handleMouseEnter.bind(this);
+            const mouseLeaveHandler = this.handleMouseLeave.bind(this);
+            this.flagElement.addEventListener("mouseenter", mouseEnterHandler);
+            this.flagElement.addEventListener("mouseleave", mouseLeaveHandler);
+            this.eventListeners.push({
+                element: this.flagElement,
+                event: "mouseenter",
+                handler: mouseEnterHandler,
+            }, {
+                element: this.flagElement,
+                event: "mouseleave",
+                handler: mouseLeaveHandler,
+            });
+            // Keyboard accessibility
+            const keydownHandler = this.handleKeydown.bind(this);
+            this.flagElement.addEventListener("keydown", keydownHandler);
+            this.flagElement.setAttribute("tabindex", "0");
+            this.eventListeners.push({
+                element: this.flagElement,
+                event: "keydown",
+                handler: keydownHandler,
+            });
+        };
+        this.handleClick = () => this.destroy();
+        this.handleMouseEnter = () => {
+            if (this.flagElement) {
+                this.flagElement.style.opacity = "1";
+                this.flagElement.style.transform = "scale(1.05)";
+            }
+        };
+        this.handleMouseLeave = () => {
+            if (this.flagElement) {
+                this.flagElement.style.opacity = "0.9";
+                this.flagElement.style.transform = "scale(1)";
+            }
+        };
+        this.handleKeydown = (event) => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key === "Enter" || keyboardEvent.key === " ") {
+                keyboardEvent.preventDefault();
+                this.destroy();
+            }
+        };
+        this.removeEventListeners = () => {
+            this.eventListeners.forEach(({ element, event, handler }) => {
+                element.removeEventListener(event, handler);
+            });
+            this.eventListeners = [];
+        };
+        this.removeFlagElement = () => {
+            if (this.flagElement && document.body?.contains(this.flagElement)) {
+                document.body.removeChild(this.flagElement);
+                this.flagElement = null;
+            }
+        };
+        this.config = { ...EnvFlag.DEFAULT_CONFIG, ...config };
+    }
+}
+EnvFlag.DEFAULT_CONFIG = {
+    productionColor: "#f8285a",
+    developmentColor: "#17c653",
+    stagingColor: "#f39c12",
+    testColor: "#9b59b6",
+    productionText: "PROD",
+    developmentText: "DEV",
+    stagingText: "STAGING",
+    testText: "TEST",
+    position: "bottom-right",
+    size: "medium",
+    autoDetectEnv: true,
+    enabled: true,
+    debug: false,
+};
+EnvFlag.ELEMENT_ID = "env-flag-indicator";
+EnvFlag.Z_INDEX = "999999";
+// Auto-initialization for immediate testing
+if (typeof window !== "undefined") {
+    const autoEnvFlag = new EnvFlag({
+        debug: true, // Enable debug mode for testing
+    });
+    // Initialize when DOM is ready
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => autoEnvFlag.init());
+    }
+    else {
+        // DOM is already ready
+        autoEnvFlag.init();
+    }
+}
+export default EnvFlag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "env-flag",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",