feat: proxies currentEnvironment in webpack plugin

Author: joelgallant

app-config-webpack/src/index.test.ts

@@ -160,6 +160,77 @@ describe('frontend-webpack-project example', () => {
     });
   });
 
+  it('fills in currentEnvironment function', async () => {
+    process.env.APP_CONFIG = JSON.stringify({ externalApiUrl: 'https://localhost:3999' });
+
+    await new Promise<void>((done, reject) => {
+      webpack([createOptions({}, true)], (err, stats) => {
+        if (err) return reject(err);
+        if (!stats) return reject(new Error('no stats'));
+        if (stats.hasErrors()) reject(stats.toString());
+
+        const { children } = stats.toJson({ source: true });
+        const [{ modules = [] }] = children || [];
+
+        expect(
+          modules.some(({ source }) => source?.includes('export function currentEnvironment()')),
+        ).toBe(true);
+        expect(modules.some(({ source }) => source?.includes('return "test";'))).toBe(true);
+
+        done();
+      });
+    });
+  });
+
+  it('fills in currentEnvironment function with custom environment', async () => {
+    process.env.APP_CONFIG = JSON.stringify({ externalApiUrl: 'https://localhost:3999' });
+    process.env.APP_CONFIG_ENV = 'foobar';
+
+    await new Promise<void>((done, reject) => {
+      webpack([createOptions({}, true)], (err, stats) => {
+        if (err) return reject(err);
+        if (!stats) return reject(new Error('no stats'));
+        if (stats.hasErrors()) reject(stats.toString());
+
+        const { children } = stats.toJson({ source: true });
+        const [{ modules = [] }] = children || [];
+
+        expect(
+          modules.some(({ source }) => source?.includes('export function currentEnvironment()')),
+        ).toBe(true);
+        expect(modules.some(({ source }) => source?.includes('return "foobar";'))).toBe(true);
+
+        done();
+      });
+    });
+  });
+
+  it('uses custom options for currentEnvironment', async () => {
+    process.env.APP_CONFIG = JSON.stringify({ externalApiUrl: 'https://localhost:3999' });
+    process.env.APP_CONFIG_ENV = 'test';
+
+    await new Promise<void>((done, reject) => {
+      webpack(
+        [createOptions({ loading: { environmentOverride: 'foobar' } }, true)],
+        (err, stats) => {
+          if (err) return reject(err);
+          if (!stats) return reject(new Error('no stats'));
+          if (stats.hasErrors()) reject(stats.toString());
+
+          const { children } = stats.toJson({ source: true });
+          const [{ modules = [] }] = children || [];
+
+          expect(
+            modules.some(({ source }) => source?.includes('export function currentEnvironment()')),
+          ).toBe(true);
+          expect(modules.some(({ source }) => source?.includes('return "foobar";'))).toBe(true);
+
+          done();
+        },
+      );
+    });
+  });
+
   it.skip('does not bundle the validateConfig function', async () => {
     process.env.APP_CONFIG = JSON.stringify({ externalApiUrl: 'https://localhost:3999' });
 

app-config-webpack/src/loader.ts

@@ -1,5 +1,6 @@
 import { getOptions, parseQuery } from 'loader-utils';
 import { loadValidatedConfig } from '@app-config/main';
+import { currentEnvironment, asEnvOptions } from '@app-config/node';
 import type { Options } from './index';
 
 type LoaderContext = Parameters<typeof getOptions>[0];
@@ -11,7 +12,7 @@ const loader = function AppConfigLoader(this: Loader) {
   if (this.cacheable) this.cacheable();
 
   const callback = this.async()!;
-  const { noGlobal = false, loading, schemaLoading }: Options = {
+  const { noGlobal = false, loading = {}, schemaLoading }: Options = {
     ...getOptions(this),
     ...parseQuery(this.resourceQuery),
   };
@@ -63,6 +64,18 @@ const loader = function AppConfigLoader(this: Loader) {
           `;
         }
 
+        const { environmentOverride, environmentAliases, environmentSourceNames } = loading;
+
+        generatedText = `${generatedText}
+          export function currentEnvironment() {
+            return ${JSON.stringify(
+              currentEnvironment(
+                asEnvOptions(environmentOverride, environmentAliases, environmentSourceNames),
+              ),
+            )};
+          }
+        `;
+
         return generatedText;
       };
 

tests/webpack-projects/webpack5/cypress/integration/main.spec.ts

@@ -45,4 +45,10 @@ describe('Config Loading', () => {
       `"longStringProperty": "some long string with a \\" char and '\\\\n"`,
     );
   });
+
+  it('renders currentEnvironment', () => {
+    cy.visit('/');
+
+    cy.get('body').should('contain', `Environment: production`);
+  });
 });

tests/webpack-projects/webpack5/src/index.ts

@@ -1,4 +1,4 @@
-import { config, validateConfig } from '@app-config/main';
+import { config, validateConfig, currentEnvironment } from '@app-config/main';
 
 validateConfig(config);
 
@@ -7,5 +7,8 @@ if (validateConfig.errors) {
     .map((err) => err.message)
     .join(', ')}`;
 } else {
-  document.body.innerHTML = `<pre>${JSON.stringify(config, null, 2)}</pre>`;
+  document.body.innerHTML = `
+    <pre>${JSON.stringify(config, null, 2)}</pre>
+    <pre>Environment: ${currentEnvironment()}</pre>
+  `;
 }