@envin/cli 0.0.1 → 1.1.1

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@envin/cli",
-  "version": "0.0.1",
+  "version": "1.1.1",
+  "description": "Type-safe env validation with live previews",
   "keywords": [
     "turbostarter",
     "environment variables",
@@ -9,6 +10,10 @@
     "arktype",
     "valibot"
   ],
+  "homepage": "https://envin.turbostarter.dev",
+  "bugs": {
+    "url": "https://github.com/turbostarter/envin/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/turbostarter/envin.git",
@@ -26,7 +31,8 @@
     "dev": "tsup-node --watch",
     "dev:preview": "cd ../../apps/example && tsx ../../packages/cli/src/cli/index.ts dev",
     "start": "node dist/cli/index.mjs",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "prepack": "bun ../../scripts/replace-workspace-protocol.ts && bun ../../scripts/populate-readme.ts"
   },
   "dependencies": {
     "@babel/parser": "^7.27.0",
@@ -41,16 +47,21 @@
     "@radix-ui/react-tooltip": "^1.2.4",
     "@svgr/webpack": "^8.1.0",
     "chalk": "^5.4.1",
+    "chokidar": "^4.0.3",
     "commander": "^13.1.0",
+    "debounce": "^2.2.0",
     "dotenv": "^16.5.0",
-    "envin": "workspace:*",
+    "envin": "1.1.1",
     "esbuild": "^0.25.0",
     "log-symbols": "^7.0.0",
     "mime-types": "^3.0.1",
-    "next": "^15.3.1",
+    "next": "^15.3.3",
     "ora": "^8.2.0",
     "react-hook-form": "^7.56.4",
-    "zod": "^3.25.17"
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1",
+    "tsconfig-paths": "^4.2.0",
+    "zod": "^3.25.56"
   },
   "devDependencies": {
     "@babel/core": "7.26.10",
@@ -81,4 +92,4 @@
     "tw-animate-css": "^1.2.9",
     "typescript": "5.8.3"
   }
-}
+}

package/src/app/page.tsx

@@ -1,9 +1,18 @@
+import path from "node:path";
 import { Ban } from "lucide-react";
 import { Envin } from "@/components/envin";
-import { config } from "@/lib/config";
 import { getVariables } from "@/lib/variables";
+import { getConfigFile } from "@/utils/get-config-file";
+import { envDirectoryAbsolutePath } from "./env";
+
+export const envConfigFilePath = path.join(
+  envDirectoryAbsolutePath ?? "",
+  "env.config.ts",
+);
 
 export default async function Home() {
+  const { config } = await getConfigFile(envConfigFilePath);
+
   if (!config) {
     return (
       <div className="flex grow h-full border-destructive border-dashed border-2 rounded-lg flex-col items-center justify-center">
@@ -18,7 +27,7 @@ export default async function Home() {
     );
   }
 
-  const variables = await getVariables();
+  const variables = await getVariables(config);
 
   return <Envin variables={variables} />;
 }

package/src/components/variables/context.tsx

@@ -1,14 +1,17 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import {
   createContext,
   useCallback,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import { useFilters } from "@/components/filters/context";
+import { useHotreload } from "@/lib/hooks/use-hot-reload";
 import type { StandardSchemaV1 } from "@/lib/standard";
 import { type FileValues, Status, type Variables } from "@/lib/types";
 import { validate } from "@/lib/validate";
@@ -37,8 +40,10 @@ export const VariablesProvider = ({
   children: React.ReactNode;
   variables: Variables;
 }) => {
+  const router = useRouter();
   const { query, status, environment } = useFilters();
   const [fileValues, setFileValues] = useState<FileValues>({});
+  const isResettingRef = useRef(false);
   const form = useForm({
     defaultValues: Object.fromEntries(
       Object.entries(variables).map(([key, value]) => [
@@ -50,19 +55,6 @@ export const VariablesProvider = ({
   const [issues, setIssues] = useState<VariablesContextType["issues"]>([]);
   const [filteredKeys, setFilteredKeys] = useState(Object.keys(variables));
 
-  useEffect(() => {
-    const { touchedFields } = form.formState;
-    const newValues = Object.fromEntries(
-      Object.entries(variables).map(([key, value]) => {
-        if (touchedFields[key]) {
-          return [key, form.getValues(key)];
-        }
-        return [key, fileValues[key]?.value ?? value.default ?? ""];
-      }),
-    );
-    form.reset(newValues, { keepDirtyValues: true });
-  }, [fileValues, variables, form]);
-
   const onValidate = useCallback(async (data: Record<string, unknown>) => {
     const result = await validate(data);
     setIssues(result.issues ?? []);
@@ -73,11 +65,13 @@ export const VariablesProvider = ({
       formState: {
         values: true,
       },
-      callback: (data) => onValidate(data.values),
+      callback: (data) => {
+        if (!isResettingRef.current) {
+          onValidate(data.values);
+        }
+      },
     });
 
-    onValidate(form.getValues());
-
     return () => unsubscribe();
   }, [form, onValidate]);
 
@@ -115,6 +109,10 @@ export const VariablesProvider = ({
     [variables],
   );
 
+  useHotreload(() => {
+    router.refresh();
+  });
+
   useEffect(() => {
     setFilteredKeys(
       filterByStatus(filterByQuery(Object.keys(variables), query), status),
@@ -122,8 +120,22 @@ export const VariablesProvider = ({
   }, [filterByStatus, filterByQuery, query, status, variables]);
 
   useEffect(() => {
-    getFileValues(environment).then(setFileValues);
-  }, [environment]);
+    getFileValues(environment).then((newFileValues) => {
+      setFileValues(newFileValues);
+      const newValues = Object.fromEntries(
+        Object.entries(variables).map(([key, value]) => [
+          key,
+          newFileValues[key]?.value ?? value.default ?? "",
+        ]),
+      );
+
+      isResettingRef.current = true;
+      form.reset(newValues, { keepDirtyValues: true });
+      isResettingRef.current = false;
+
+      onValidate(newValues);
+    });
+  }, [environment, variables, form, onValidate]);
 
   return (
     <VariablesContext.Provider

package/src/lib/config.ts

@@ -1,11 +1,9 @@
-import { readFileSync } from "node:fs";
 import path from "node:path";
-import { parse } from "dotenv";
 import { envDirectoryAbsolutePath } from "@/app/env";
 import { Environment } from "@/lib/types";
 import { getConfigFile } from "@/utils/get-config-file";
 
-const envConfigFilePath = path.join(
+export const envConfigFilePath = path.join(
   envDirectoryAbsolutePath ?? "",
   "env.config.ts",
 );
@@ -20,18 +18,3 @@ export const FILES = {
     ".env.production.local",
   ],
 } as const;
-
-export const files = Object.fromEntries(
-  Object.entries(FILES).map(([environment, files]) => [
-    environment,
-    files.map((file) => {
-      try {
-        return parse(
-          readFileSync(path.join(envDirectoryAbsolutePath ?? "", file), "utf8"),
-        );
-      } catch {
-        return {};
-      }
-    }),
-  ]),
-);

package/src/lib/hooks/use-hot-reload.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { io, type Socket } from "socket.io-client";
+import type { HotReloadChange } from "@/cli/utils/hot-reload/types";
+
+/**
+ * Hook that detects any "reload" event sent from the CLI's web socket
+ * and calls the received parameter callback
+ */
+export const useHotreload = (
+  onShouldReload: (changes: HotReloadChange[]) => void,
+) => {
+  const socketRef = useRef<Socket | null>(null);
+
+  useEffect(() => {
+    if (!socketRef.current) {
+      socketRef.current = io();
+    }
+    const socket = socketRef.current;
+
+    socket.on("reload", (changes: HotReloadChange[]) => {
+      console.debug("Reloading...");
+      void onShouldReload(changes);
+    });
+
+    return () => {
+      socket.off();
+    };
+  }, [onShouldReload]);
+};

package/src/lib/types.ts

@@ -32,6 +32,16 @@ export type Environment = (typeof Environment)[keyof typeof Environment];
 
 export const DEFAULT_PRESET = "root";
 
+export const FILES = {
+  [Environment.DEVELOPMENT]: [".env", ".env.development", ".env.local"],
+  [Environment.PRODUCTION]: [
+    ".env",
+    ".env.production",
+    ".env.local",
+    ".env.production.local",
+  ],
+} as const;
+
 export interface Variable {
   preset: string;
   group: VariableGroup;

package/src/lib/validate.ts

@@ -1,7 +1,8 @@
 "use server";
 
-import { config } from "@/lib/config";
+import { envConfigFilePath } from "@/app/page";
 import { parseWithDictionary, type StandardSchemaV1 } from "@/lib/standard";
+import { getConfigFile } from "@/utils/get-config-file";
 
 const toIssue = (issue: StandardSchemaV1.Issue) => {
   return {
@@ -11,6 +12,7 @@ const toIssue = (issue: StandardSchemaV1.Issue) => {
 };
 
 export const validate = async (variables: Record<string, unknown>) => {
+  const { config } = await getConfigFile(envConfigFilePath);
   if (!config?.env._schema) {
     return {
       issues: [],

package/src/lib/variables/index.ts

@@ -1,10 +1,15 @@
 "use server";
 
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { parse } from "dotenv";
 import type { TPreset } from "envin/types";
-import { config, FILES, files } from "@/lib/config";
+import { envDirectoryAbsolutePath } from "@/app/env";
 import {
+  type Config,
   DEFAULT_PRESET,
   Environment,
+  FILES,
   type FileValues,
   type Variable,
   VariableGroup,
@@ -12,7 +17,7 @@ import {
 import { getDefault } from "./default";
 import { getDescription } from "./description";
 
-export const getVariables = async () => {
+export const getVariables = async (config: Config) => {
   if (!config) {
     return {};
   }
@@ -93,13 +98,30 @@ const getVariable = (key: string, preset: TPreset): Variable | null => {
   };
 };
 
+const getFiles = () => {
+  return Object.fromEntries(
+    Object.entries(FILES).map(([environment, files]) => [
+      environment,
+      files.map((file) => {
+        try {
+          return parse(
+            readFileSync(
+              path.join(envDirectoryAbsolutePath ?? "", file),
+              "utf8",
+            ),
+          );
+        } catch {
+          return {};
+        }
+      }),
+    ]),
+  );
+};
+
 export const getFileValues = async (
   environment: Environment = Environment.DEVELOPMENT,
 ): Promise<FileValues> => {
-  if (!config) {
-    return {};
-  }
-
+  const files = getFiles();
   const variablesFromFiles = files[environment];
 
   const result: FileValues = {};

package/src/utils/get-config-file.ts

@@ -1,3 +1,5 @@
+"use server";
+
 import path from "node:path";
 import { type BuildFailure, build, type OutputFile } from "esbuild";
 import { z } from "zod";