Use Config file instead of Environment Variables

__fixtures__/test-config/.modular.js

@@ -0,0 +1,3 @@
+module.exports = {
+  useModularEsbuild: true,
+};

packages/modular-scripts/package.json

@@ -49,6 +49,7 @@
     "chalk": "4.1.2",
     "change-case": "4.1.2",
     "commander": "9.4.0",
+    "cosmiconfig": "^8.0.0",
     "cross-spawn": "7.0.3",
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "3.4.1",

packages/modular-scripts/src/__tests__/utils/config.test.ts

@@ -0,0 +1,51 @@
+import execa from 'execa';
+import { copyFileSync } from 'fs';
+import path from 'path';
+import { createModularTestContext } from '../../test/utils';
+import getModularRoot from '../../utils/getModularRoot';
+
+const modularRoot = getModularRoot();
+const configFixtures = path.join(modularRoot, '__fixtures__', 'test-config');
+
+/**
+ * Run modular with provided arguments in specified directory
+ */
+function modular(
+  args: string,
+  cwd: string,
+  opts: Record<string, unknown> = {},
+) {
+  return execa('yarnpkg', ['modular', ...args.split(' ')], {
+    cwd,
+    cleanup: true,
+    ...opts,
+  });
+}
+
+// Temporary test context paths set by createTempModularRepoWithTemplate()
+let tempModularRepo: string;
+
+describe('A simple modular repo with a .modular.js config file', () => {
+  beforeEach(async () => {
+    tempModularRepo = createModularTestContext();
+    await modular('add test-app --unstable-type app', tempModularRepo);
+    copyFileSync(
+      path.join(configFixtures, '.modular.js'),
+      path.join(tempModularRepo, '.modular.js'),
+    );
+  });
+  it('builds using esbuild as specified in config file', async () => {
+    const result = await modular(`build test-app --verbose`, tempModularRepo);
+    expect(result.stdout).toContain('Building with esbuild');
+    expect(result.exitCode).toBe(0);
+  });
+  it('builds using webpack if the environment variable is provided as it overrides the config', async () => {
+    const result = await modular(`build test-app --verbose`, tempModularRepo, {
+      env: {
+        USE_MODULAR_WEBPACK: 'true',
+      },
+    });
+    expect(result.stdout).toContain('Building with Webpack');
+    expect(result.exitCode).toBe(0);
+  });
+});

packages/modular-scripts/src/build/index.ts

@@ -37,24 +37,13 @@ import {
 } from './esbuildFileSizeReporter';
 import { getDependencyInfo } from '../utils/getDependencyInfo';
 import { isReactNewApi } from '../utils/isReactNewApi';
+import { utilizeEsbuild } from '../utils/config';
 
 async function buildStandalone(
   target: string,
   type: Extract<ModularType, 'app' | 'esm-view'>,
 ) {
-  // True if there's no preference set - or the preference is for webpack.
-  const useWebpack =
-    !process.env.USE_MODULAR_WEBPACK ||
-    process.env.USE_MODULAR_WEBPACK === 'true';
-
-  // True if the preferene IS set and the preference is esbuid.
-  const useEsbuild =
-    process.env.USE_MODULAR_ESBUILD &&
-    process.env.USE_MODULAR_ESBUILD === 'true';
-
-  // If you want to use webpack then we'll always use webpack. But if you've indicated
-  // you want esbuild - then we'll switch you to the new fancy world.
-  const isEsbuild = !useWebpack || useEsbuild;
+  const isEsbuild = await utilizeEsbuild();
 
   // Setup Paths
   const modularRoot = getModularRoot();
@@ -132,6 +121,7 @@ async function buildStandalone(
   let cssEntryPoint: string | undefined;
 
   if (isEsbuild) {
+    logger.debug('Building with esbuild');
     const { default: buildEsbuildApp } = await import(
       '../esbuild-scripts/build'
     );
@@ -140,6 +130,7 @@ async function buildStandalone(
     cssEntryPoint = getEntryPoint(paths, result, '.css');
     assets = createEsbuildAssets(paths, result);
   } else {
+    logger.debug('Building with Webpack');
     // create-react-app doesn't support plain module outputs yet,
     // so --preserve-modules has no effect here
 

packages/modular-scripts/src/start.ts

@@ -16,6 +16,7 @@ import createEsbuildBrowserslistTarget from './utils/createEsbuildBrowserslistTa
 import prompts from 'prompts';
 import { getDependencyInfo } from './utils/getDependencyInfo';
 import { isReactNewApi } from './utils/isReactNewApi';
+import { utilizeEsbuild } from './utils/config';
 
 async function start(packageName: string): Promise<void> {
   let target = packageName;
@@ -61,16 +62,6 @@ async function start(packageName: string): Promise<void> {
 
   await checkBrowsers(targetPath);
 
-  // True if there's no preference set - or the preference is for webpack.
-  const useWebpack =
-    !process.env.USE_MODULAR_WEBPACK ||
-    process.env.USE_MODULAR_WEBPACK === 'true';
-
-  // True if the preference IS set and the preference is esbuild.
-  const useEsbuild =
-    process.env.USE_MODULAR_ESBUILD &&
-    process.env.USE_MODULAR_ESBUILD === 'true';
-
   // Retrieve dependency info for target to inform the build process
   const {
     importMap,
@@ -102,7 +93,7 @@ async function start(packageName: string): Promise<void> {
 
   // If you want to use webpack then we'll always use webpack. But if you've indicated
   // you want esbuild - then we'll switch you to the new fancy world.
-  if (!useWebpack || useEsbuild) {
+  if (await utilizeEsbuild()) {
     const { default: startEsbuildApp } = await import(
       './esbuild-scripts/start'
     );

packages/modular-scripts/src/test/utils.ts

@@ -98,6 +98,10 @@ export function createModularTestContext(): string {
         'last 1 safari version',
       ],
     },
+    dependencies: {
+      react: '^18.2.0',
+      'react-dom': '^18.2.0',
+    },
   };
 
   fs.writeJSONSync(path.join(tempModularRepo, 'package.json'), packageJson, {

packages/modular-scripts/src/utils/config.ts

@@ -0,0 +1,91 @@
+import { cosmiconfig } from 'cosmiconfig';
+import path from 'path';
+import getModularRoot from './getModularRoot';
+import * as logger from './logger';
+
+// Where cosmiconfig can look for the configuration
+const searchPlaces = [
+  '.modular.js',
+  'package.json',
+  `.modularrc`,
+  `.modularrc.json`,
+  `.modularrc.yaml`,
+  `.modularrc.yml`,
+  `.modularrc.js`,
+  `.modularrc.cjs`,
+  `modular.config.js`,
+  `modular.config.cjs`,
+];
+
+// Look for configuration file
+const modularRoot = getModularRoot();
+const explorer = cosmiconfig('modular', { searchPlaces });
+const configuration = explorer.search(path.join(modularRoot, 'package.json'));
+
+// Interface with all configurations
+interface ConfigObject {
+  useModularEsbuild: boolean;
+}
+
+type ConfigObjectKey = keyof ConfigObject;
+
+/**
+ * Get the configured value for a given configuration field.
+ * Rejects if no configuration file is present or the queired field is not present.
+ * @param configEntry Field containing the configuration variable to read
+ * @returns Value of configuration field queried if present
+ */
+export async function getConfiguration(
+  configEntry: ConfigObjectKey,
+): Promise<boolean> {
+  const loadedConfiguration = await configuration;
+  // Handle no or empty configuration - debug log? don't think we should error should we?
+  if (loadedConfiguration) {
+    // Error if configuration doesn't match our interface?
+    const config = loadedConfiguration.config as ConfigObject;
+    const value = config[configEntry];
+    if (value) {
+      return value;
+    } else {
+      throw new Error(
+        `No field ${configEntry.toString()} found in configuration file`,
+      );
+    }
+  } else {
+    throw new Error(
+      `Couldn't identify and load a valid modular configuration file`,
+    );
+  }
+}
+
+/**
+ * Reads env variables and configuration to understand if esbuild or Webpack should be used
+ * Webpack is used as default if no configuration is set or both are set to true
+ * Environment variables take precedence over config file
+ * @returns True if esbuild should be used or false if webpack should be used
+ */
+export async function utilizeEsbuild(): Promise<boolean> {
+  if (
+    process.env.USE_MODULAR_WEBPACK === 'true' ||
+    process.env.USE_MODULAR_ESBUILD === 'false'
+  ) {
+    return false;
+  }
+  if (
+    process.env.USE_MODULAR_ESBUILD === 'true' ||
+    process.env.USE_MODULAR_WEBPACK === 'false'
+  ) {
+    return true;
+  } else {
+    return await getConfiguration('useModularEsbuild')
+      .then((result) => {
+        return result;
+      })
+      // Debug logging the errors as it's reasonable for users not to have provided a configuration,
+      // but it's useful to know while trying to figure out what's going wrong
+      .catch((err: Error) => {
+        logger.debug(err.message);
+        return false;
+      });
+  }
+}

yarn.lock

@@ -4842,6 +4842,16 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.0.0.tgz#e9feae014eab580f858f8a0288f38997a7bebe97"
+  integrity sha512-da1EafcpH6b/TD8vDRaWV7xFINlHlF6zKsGwS1TsuVJTZRkquaS5HTMq7uq6h31619QjbsYl21gVDOm32KM1vQ==
+  dependencies:
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+
 create-jest-runner@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/create-jest-runner/-/create-jest-runner-0.6.0.tgz#9ca6583d969acc15cdc21cd07d430945daf83de6"