feat(#102): adds noGlobal option in webpack config

Author: joelgallant

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

@@ -86,6 +86,30 @@ describe('frontend-webpack-project example', () => {
     });
   });
 
+  it('doesnt use window._appConfig if using noGlobal', async () => {
+    process.env.APP_CONFIG = JSON.stringify({ externalApiUrl: 'https://localhost:3999' });
+
+    await new Promise<void>((done, reject) => {
+      webpack([createOptions({ noGlobal: true })], (err, stats) => {
+        if (err) reject(err);
+        if (stats.hasErrors()) reject(stats.toString());
+
+        const { children } = stats.toJson();
+        const [{ modules = [] }] = children || [];
+
+        expect(
+          modules.some(({ source }) =>
+            source?.includes('const config = {"externalApiUrl":"https://localhost:3999"};'),
+          ),
+        ).toBe(true);
+
+        expect(modules.some(({ source }) => source?.includes('_appConfig'))).toBe(false);
+
+        done();
+      });
+    });
+  });
+
   it('throws validation errors', async () => {
     process.env.APP_CONFIG = JSON.stringify({ externalApiUrl: 'not a uri' });
 

app-config-webpack/src/index.ts

@@ -9,17 +9,20 @@ const loader = require.resolve('./loader');
 
 export interface Options {
   headerInjection?: boolean;
+  noGlobal?: boolean;
   loading?: ConfigLoadingOptions;
   schemaLoading?: SchemaLoadingOptions;
 }
 
 export default class AppConfigPlugin {
   headerInjection: boolean;
+  noGlobal: boolean;
   loadingOptions?: ConfigLoadingOptions;
   schemaLoadingOptions?: SchemaLoadingOptions;
 
-  constructor({ headerInjection = false, loading, schemaLoading }: Options = {}) {
+  constructor({ headerInjection = false, noGlobal = false, loading, schemaLoading }: Options = {}) {
     this.headerInjection = headerInjection;
+    this.noGlobal = noGlobal;
     this.loadingOptions = loading;
     this.schemaLoadingOptions = schemaLoading;
   }

app-config-webpack/src/loader.ts

@@ -9,7 +9,8 @@ const loader: wp.loader.Loader = function AppConfigLoader() {
   if (this.cacheable) this.cacheable();
 
   const callback = this.async()!;
-  const { headerInjection = false, loading, schemaLoading }: Options = getOptions(this) || {};
+  const { headerInjection = false, noGlobal = false, loading, schemaLoading }: Options =
+    getOptions(this) || {};
 
   loadValidatedConfig(loading, schemaLoading)
     .then(({ fullConfig, filePaths, validationFunctionCode }) => {
@@ -18,18 +19,29 @@ const loader: wp.loader.Loader = function AppConfigLoader() {
       }
 
       const generateText = (config: string) => {
-        let generatedText = `
-          const configValue = ${config};
+        let generatedText: string;
 
-          const globalNamespace = window || globalThis || {};
+        if (noGlobal) {
+          generatedText = `
+            const config = ${config};
 
-          // if the global was already defined, use it (and define it if not)
-          const config = globalNamespace.${privateName} =
-            (globalNamespace.${privateName} || configValue);
+            export { config };
+            export default config;
+          `;
+        } else {
+          generatedText = `
+            const configValue = ${config};
+
+            const globalNamespace = window || globalThis || {};
+
+            // if the global was already defined, use it (and define it if not)
+            const config = globalNamespace.${privateName} =
+              (globalNamespace.${privateName} || configValue);
 
-          export { config };
-          export default config;
-        `;
+            export { config };
+            export default config;
+          `;
+        }
 
         if (validationFunctionCode) {
           generatedText = `${generatedText}