Merge pull request #7 from expatfile/feat/colorized-terminal-messages

feat: ✨ next.js style terminal string styling

Author: HofmannZ

package.json

@@ -31,6 +31,9 @@
     "url": "https://github.com/expatfile/next-runtime-env/issues"
   },
   "homepage": "https://github.com/expatfile/next-runtime-env#readme",
+  "dependencies": {
+    "chalk": "4.1.2"
+  },
   "devDependencies": {
     "@types/eslint": "^8.37.0",
     "@types/jest": "^29.5.1",

pnpm-lock.yaml

@@ -1,5 +1,17 @@
+import chalk from 'chalk';
+
 import { getPublicEnv } from './get-public-env';
 
+const infoSpy = jest.spyOn(console, 'info');
+
+beforeAll(() => {
+  infoSpy.mockImplementation();
+});
+
+afterAll(() => {
+  infoSpy.mockRestore();
+});
+
 describe('getPublicEnv()', () => {
   afterEach(() => {
     delete process.env.FOO;
@@ -10,7 +22,17 @@ describe('getPublicEnv()', () => {
     delete process.env.NEXT_PUBLIC_BAZ;
   });
 
-  it('should return a allow-listed value', () => {
+  it('should show an info message after reading the environment', () => {
+    getPublicEnv();
+
+    expect(infoSpy).toHaveBeenCalledWith(
+      `${chalk.cyan(
+        `info`
+      )}  - [next-runtime-env] - Read environment variables prefixed with 'NEXT_PUBLIC_' from process.env.`
+    );
+  });
+
+  it('should return an allow-listed value', () => {
     process.env.NEXT_PUBLIC_FOO = 'foo';
 
     expect(getPublicEnv()).toEqual({

src/helpers/get-public-env.spec.ts

@@ -1,8 +1,10 @@
+import * as log from '../utils/log';
+
 /**
  * Gets a list of environment variables that start with `NEXT_PUBLIC_`.
  */
 export function getPublicEnv() {
-  return Object.keys(process.env)
+  const publicEnv = Object.keys(process.env)
     .filter((key) => /^NEXT_PUBLIC_/i.test(key))
     .reduce(
       (env, key) => ({
@@ -11,4 +13,10 @@ export function getPublicEnv() {
       }),
       {} as NodeJS.ProcessEnv
     );
+
+  log.info(
+    `Read environment variables prefixed with 'NEXT_PUBLIC_' from process.env.`
+  );
+
+  return publicEnv;
 }

src/helpers/get-public-env.ts

@@ -1,3 +1,4 @@
+import chalk from 'chalk';
 import fs from 'fs';
 
 import { writeBrowserEnv } from './write-browser-env';
@@ -7,6 +8,9 @@ const infoSpy = jest.spyOn(console, 'info');
 const base = fs.realpathSync(process.cwd());
 const path = `${base}/public`;
 const file = `${path}/__ENV.js`;
+const message = `${chalk.cyan(
+  `info`
+)}  - [next-runtime-env] - Wrote browser runtime environment variables to ${file}`;
 
 beforeAll(() => {
   infoSpy.mockImplementation();
@@ -28,10 +32,7 @@ describe('writeBrowserEnv()', () => {
   it('should write an empty env', () => {
     writeBrowserEnv({});
 
-    expect(infoSpy).toHaveBeenCalledWith(
-      '> [next-runtime-env] Writing browser runtime env',
-      file
-    );
+    expect(infoSpy).toHaveBeenCalledWith(message);
 
     const content = fs.readFileSync(file).toString();
 
@@ -43,10 +44,7 @@ describe('writeBrowserEnv()', () => {
       NEXT_PUBLIC_FOO: 'foo',
     });
 
-    expect(infoSpy).toHaveBeenCalledWith(
-      '> [next-runtime-env] Writing browser runtime env',
-      file
-    );
+    expect(infoSpy).toHaveBeenCalledWith(message);
 
     const content = fs.readFileSync(file).toString();
 
@@ -60,10 +58,7 @@ describe('writeBrowserEnv()', () => {
       NEXT_PUBLIC_BAZ: 'baz',
     });
 
-    expect(infoSpy).toHaveBeenCalledWith(
-      '> [next-runtime-env] Writing browser runtime env',
-      file
-    );
+    expect(infoSpy).toHaveBeenCalledWith(message);
 
     const content = fs.readFileSync(file).toString();
 

src/helpers/write-browser-env.spec.ts

@@ -1,5 +1,7 @@
 import fs from 'fs';
 
+import * as log from '../utils/log';
+
 /**
  * Writes the environment variables to the public __ENV.js file and make them
  * accessible under `window.__ENV`.
@@ -8,10 +10,9 @@ export function writeBrowserEnv(env: NodeJS.ProcessEnv) {
   const base = fs.realpathSync(process.cwd());
   const path = `${base}/public/__ENV.js`;
 
-  // eslint-disable-next-line no-console
-  console.info('> [next-runtime-env] Writing browser runtime env', path);
-
   const content = `window.__ENV = ${JSON.stringify(env)};`;
 
   fs.writeFileSync(path, content);
+
+  log.info(`Wrote browser runtime environment variables to ${path}`);
 }

src/helpers/write-browser-env.ts

@@ -1,13 +1,18 @@
+import chalk from 'chalk';
+
 import { makeEnvPublic } from './make-env-public';
 
 const warnSpy = jest.spyOn(console, 'warn');
+const infoSpy = jest.spyOn(console, 'info');
 
 beforeAll(() => {
   warnSpy.mockImplementation();
+  infoSpy.mockImplementation();
 });
 
 afterAll(() => {
   warnSpy.mockRestore();
+  infoSpy.mockRestore();
 });
 
 describe('makeEnvPublic()', () => {
@@ -38,19 +43,50 @@ describe('makeEnvPublic()', () => {
 
     expect(process.env.FOO).toEqual('foo');
     expect(process.env.NEXT_PUBLIC_FOO).toEqual('foo');
+
     expect(process.env.BAR).toEqual('bar');
     expect(process.env.NEXT_PUBLIC_BAR).toEqual('bar');
+
     expect(process.env.BAZ).toEqual('baz');
     expect(process.env.NEXT_PUBLIC_BAZ).toEqual('baz');
   });
 
+  it('should show an info message when env vars are prefixed', () => {
+    process.env.FOO = 'foo';
+    process.env.BAR = 'bar';
+    process.env.BAZ = 'baz';
+
+    makeEnvPublic('FOO');
+    makeEnvPublic(['BAR', 'BAZ']);
+
+    expect(infoSpy).toHaveBeenCalledWith(
+      `${chalk.cyan(
+        `info`
+      )}  - [next-runtime-env] - Prefixed environment variable 'FOO'.`
+    );
+
+    expect(infoSpy).toHaveBeenCalledWith(
+      `${chalk.cyan(
+        `info`
+      )}  - [next-runtime-env] - Prefixed environment variable 'BAR'.`
+    );
+
+    expect(infoSpy).toHaveBeenCalledWith(
+      `${chalk.cyan(
+        `info`
+      )}  - [next-runtime-env] - Prefixed environment variable 'BAZ'.`
+    );
+  });
+
   it('should warn when the env var already starts with NEXT_PUBLIC_', () => {
     process.env.NEXT_PUBLIC_FOO = 'foo';
 
     makeEnvPublic('NEXT_PUBLIC_FOO');
 
     expect(warnSpy).toHaveBeenCalledWith(
-      '> [next-runtime-env] The environment variable "NEXT_PUBLIC_FOO" is already public.'
+      `${chalk.yellow(
+        `warn`
+      )}  - [next-runtime-env] - Environment variable 'NEXT_PUBLIC_FOO' is already public.`
     );
   });
 });

src/make-env-public.spec.ts

@@ -1,15 +1,16 @@
+import * as log from './utils/log';
+
 function prefixKey(key: string) {
   // Check if the key already is already public.
   if (/^NEXT_PUBLIC_/i.test(key)) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `> [next-runtime-env] The environment variable "${key}" is already public.`
-    );
+    log.warn(`Environment variable '${key}' is already public.`);
   }
 
   const prefixedKey = `NEXT_PUBLIC_${key}`;
 
   process.env[prefixedKey] = process.env[key];
+
+  log.info(`Prefixed environment variable '${key}'.`);
 }
 
 /**

src/make-env-public.ts

@@ -0,0 +1,20 @@
+/* eslint-disable no-console */
+
+import chalk from 'chalk';
+
+const libraryName = '[next-runtime-env]';
+const librarySeperator = '-';
+const libraryPrefix = `${libraryName} ${librarySeperator}`;
+
+const prefixes = {
+  warn: `${chalk.yellow(`warn`)}  - ${libraryPrefix}`,
+  info: `${chalk.cyan(`info`)}  - ${libraryPrefix}`, // Double space before the dash aligns messages in the terminal and improves readability.
+};
+
+export function warn(message: string) {
+  console.warn(`${prefixes.warn} ${message}`);
+}
+
+export function info(message: string) {
+  console.info(`${prefixes.info} ${message}`);
+}