refactor(cli): expand dotenv params (#7)

* docs, reorg how to use * dotenv, expose, app_index_prefix, html_index_dir
cdcabrera · Jan 10, 2024 · ae381ae · ae381ae
1 parent 0f1d643
commit ae381ae
Show file tree

Hide file tree

Showing 13 changed files with 270 additions and 90 deletions.
diff --git a/DOCS.md b/DOCS.md
diff --git a/README.md b/README.md
@@ -29,13 +29,13 @@ The basic requirements:
 NPM install...
 
   ```shell
-    $ npm i weldable
+    $ npm i weldable --save-dev
   ```
 
 or Yarn
 
   ```shell
-    $ yarn add weldable
+    $ yarn add weldable --dev
   ```
 
 ## How to use

diff --git a/__fixtures__/.env b/__fixtures__/.env
@@ -1,2 +1,3 @@
 MOCK_JS_VALUE=lorem ipsum
 MOCK_HTML_VALUE=dolor sit
+STATIC_DIR=public
diff --git a/__fixtures__/public/index.html b/__fixtures__/public/index.html
diff --git a/__fixtures__/public/static.js b/__fixtures__/public/static.js
@@ -0,0 +1 @@
+console.log('hello world, this is a static resource');
diff --git a/__fixtures__/src/index.html b/__fixtures__/src/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Fixture app html woot base template, %MOCK_HTML_VALUE%</title>
+  <script src="/static.js"></script>
+</head>
+<body></body>
+</html>
diff --git a/bin/cli.js b/bin/cli.js
@@ -88,7 +88,12 @@ OPTIONS._set = {
       process.env.NODE_ENV = nodeEnv;
     }
 
-    return setupDotenvFilesForEnv({ env: process.env.NODE_ENV, relativePath: this.contextPath, isMessaging: true });
+    return setupDotenvFilesForEnv({
+      env: process.env.NODE_ENV,
+      relativePath: this.contextPath,
+      isMessaging: true,
+      setExposedParams: true
+    });
   },
   isCreateTsConfig: function () {
     const isBaseTsConfig = typeof baseTsConfig === 'string';

diff --git a/src/README.md b/src/README.md
@@ -27,6 +27,7 @@
     * [~setupWebpackDotenvFile(filePath)](#module_dotenv..setupWebpackDotenvFile) ⇒ <code>undefined</code> \| <code>\*</code>
     * [~setupWebpackDotenvFilesForEnv(params)](#module_dotenv..setupWebpackDotenvFilesForEnv) ⇒ <code>Array</code>
     * [~setupDotenvFile(filePath)](#module_dotenv..setupDotenvFile) ⇒ <code>void</code>
+    * [~setDotenvParam(params)](#module_dotenv..setDotenvParam)
     * [~setupDotenvFilesForEnv(params)](#module_dotenv..setupDotenvFilesForEnv) ⇒ <code>object</code>
 
 <a name="module_dotenv..dotenv"></a>
@@ -93,32 +94,54 @@ Set up, and access, a dotenv file and the related set of parameters.
     </tr>  </tbody>
 </table>
 
+<a name="module_dotenv..setDotenvParam"></a>
+
+### dotenv~setDotenvParam(params)
+Set an array of dotenv params
+
+**Kind**: inner method of [<code>dotenv</code>](#module_dotenv)  
+<table>
+  <thead>
+    <tr>
+      <th>Param</th><th>Type</th>
+    </tr>
+  </thead>
+  <tbody>
+<tr>
+    <td>params</td><td><code>Array.&lt;{param: string, value: string, ignoreIfSet: boolean}&gt;</code></td>
+    </tr>  </tbody>
+</table>
+
 <a name="module_dotenv..setupDotenvFilesForEnv"></a>
 
 ### dotenv~setupDotenvFilesForEnv(params) ⇒ <code>object</code>
 A function for use with non-webpack configurations. Set up and access local and specific dotenv file parameters.
-Failed or missing parameters return an empty string.
+dotenv parameters are string based, failed or missing dotenv parameters return an empty string.
 
 **Kind**: inner method of [<code>dotenv</code>](#module_dotenv)  
 <table>
   <thead>
     <tr>
-      <th>Param</th><th>Type</th>
+      <th>Param</th><th>Type</th><th>Description</th>
     </tr>
   </thead>
   <tbody>
 <tr>
-    <td>params</td><td><code>object</code></td>
+    <td>params</td><td><code>object</code></td><td></td>
     </tr><tr>
-    <td>params.env</td><td><code>string</code></td>
+    <td>params.env</td><td><code>string</code></td><td></td>
+    </tr><tr>
+    <td>params.relativePath</td><td><code>string</code></td><td></td>
     </tr><tr>
-    <td>params.relativePath</td><td><code>string</code></td>
+    <td>params.dotenvNamePrefix</td><td><code>string</code></td><td><p>Add an internal prefix to dotenv parameters used for configuration to avoid overlap.</p>
+</td>
     </tr><tr>
-    <td>params.dotenvNamePrefix</td><td><code>string</code></td>
+    <td>params.setBuildDefaults</td><td><code>boolean</code></td><td></td>
     </tr><tr>
-    <td>params.setBuildDefaults</td><td><code>boolean</code></td>
+    <td>params.isMessaging</td><td><code>boolean</code></td><td></td>
     </tr><tr>
-    <td>params.isMessaging</td><td><code>boolean</code></td>
+    <td>params.setExposedParams</td><td><code>boolean</code></td><td><p>Ignore the potential for dotenv parameter overlap and attempt to set non-prefixed configuration parameters if not already set.</p>
+</td>
     </tr>  </tbody>
 </table>
 
@@ -474,8 +497,12 @@ Common webpack settings between environments.
 <tr>
     <td>dotenv</td><td><code>object</code></td>
     </tr><tr>
+    <td>dotenv._BUILD_APP_INDEX_PREFIX</td><td><code>string</code></td>
+    </tr><tr>
     <td>dotenv._BUILD_DIST_DIR</td><td><code>string</code></td>
     </tr><tr>
+    <td>dotenv._BUILD_HTML_INDEX_DIR</td><td><code>string</code></td>
+    </tr><tr>
     <td>dotenv._BUILD_PUBLIC_PATH</td><td><code>string</code></td>
     </tr><tr>
     <td>dotenv._BUILD_RELATIVE_DIRNAME</td><td><code>string</code></td>

diff --git a/src/__tests__/__snapshots__/dotenv.test.js.snap b/src/__tests__/__snapshots__/dotenv.test.js.snap
@@ -46,6 +46,7 @@ exports[`dotenv should return specific properties: specific properties 1`] = `
     "setupDotenvFilesForEnv": [Function],
     "setupWebpackDotenvFilesForEnv": [Function],
   },
+  "setDotenvParam": [Function],
   "setupDotenvFile": [Function],
   "setupDotenvFilesForEnv": [Function],
   "setupWebpackDotenvFile": [Function],

diff --git a/src/__tests__/wp.test.js b/src/__tests__/wp.test.js
@@ -7,6 +7,7 @@ describe('webpack', () => {
   const baseOptions = {
     dotenv: {
       NODE_ENV: 'development',
+      _BUILD_APP_INDEX_PREFIX: 'index',
       _BUILD_DIST_DIR: path.join(fixturePath, 'dist'),
       _BUILD_HOST: 'localhost',
       _BUILD_PORT: 3000,

diff --git a/src/__tests__/wpConfigs.test.js b/src/__tests__/wpConfigs.test.js
@@ -7,6 +7,7 @@ describe('webpackConfigs', () => {
   const baseOptions = {
     dotenv: {
       NODE_ENV: 'development',
+      _BUILD_APP_INDEX_PREFIX: 'index',
       _BUILD_DIST_DIR: path.join(fixturePath, 'dist'),
       _BUILD_HOST: 'localhost',
       _BUILD_PORT: 3000,

diff --git a/src/dotenv.js b/src/dotenv.js
@@ -67,24 +67,41 @@ const setupDotenvFile = filePath => {
   dotenvExpand(dotenvInitial);
 };
 
+/**
+ * Set an array of dotenv params
+ *
+ * @param {Array<{param: string, value: string, ignoreIfSet: boolean}>} params
+ */
+const setDotenvParam = (params = []) => {
+  params.forEach(({ param, value, ignoreIfSet } = {}) => {
+    if (ignoreIfSet && process.env[param]) {
+      return;
+    }
+
+    process.env[param] = value;
+  });
+};
+
 /**
  * A function for use with non-webpack configurations. Set up and access local and specific dotenv file parameters.
- * Failed or missing parameters return an empty string.
+ * dotenv parameters are string based, failed or missing dotenv parameters return an empty string.
  *
  * @param {object} params
  * @param {string} params.env
  * @param {string} params.relativePath
- * @param {string} params.dotenvNamePrefix
+ * @param {string} params.dotenvNamePrefix Add an internal prefix to dotenv parameters used for configuration to avoid overlap.
  * @param {boolean} params.setBuildDefaults
  * @param {boolean} params.isMessaging
+ * @param {boolean} params.setExposedParams Ignore the potential for dotenv parameter overlap and attempt to set non-prefixed configuration parameters if not already set.
  * @returns {object}
  */
 const setupDotenvFilesForEnv = ({
   env,
   relativePath,
   dotenvNamePrefix = 'BUILD',
   setBuildDefaults = true,
-  isMessaging = false
+  isMessaging = false,
+  setExposedParams = false
 } = {}) => {
   if (isMessaging) {
     consoleMessage.info(`Parsing dotenv files at: ${relativePath}`);
@@ -100,11 +117,17 @@ const setupDotenvFilesForEnv = ({
 
   if (setBuildDefaults) {
     // Core Build
+    const APP_INDEX_PREFIX =
+      process.env[`${dotenvNamePrefix}_APP_INDEX_PREFIX`] || process.env.APP_INDEX_PREFIX || 'index';
     const DIST_DIR = path.resolve(
       relativePath,
       process.env[`${dotenvNamePrefix}_DIST_DIR`] || process.env.DIST_DIR || 'dist'
     );
     const HOST = process.env[`${dotenvNamePrefix}_HOST`] || process.env.HOST || 'localhost';
+    const HTML_INDEX_DIR = path.resolve(
+      relativePath,
+      process.env[`${dotenvNamePrefix}_HTML_INDEX_DIR`] || process.env.HTML_INDEX_DIR || 'src'
+    );
     const OPEN_PATH = process.env[`${dotenvNamePrefix}_OPEN_PATH`] || process.env.OPEN_PATH || '';
     const PORT = process.env[`${dotenvNamePrefix}_PORT`] || process.env.PORT || '3000';
     const PUBLIC_PATH =
@@ -117,10 +140,9 @@ const setupDotenvFilesForEnv = ({
       relativePath,
       process.env[`${dotenvNamePrefix}_SRC_DIR`] || process.env.SRC_DIR || 'src'
     );
-    const STATIC_DIR = path.resolve(
-      relativePath,
-      process.env[`${dotenvNamePrefix}_STATIC_DIR`] || process.env.STATIC_DIR || 'public'
-    );
+
+    let STATIC_DIR = process.env[`${dotenvNamePrefix}_STATIC_DIR`] || process.env.STATIC_DIR || '';
+    STATIC_DIR = (STATIC_DIR && path.resolve(relativePath, STATIC_DIR)) || STATIC_DIR;
 
     // Build Extras - Display name, HTML title
     const UI_NAME = process.env[`${dotenvNamePrefix}_UI_NAME`] || process.env.UI_NAME || '';
@@ -138,16 +160,36 @@ const setupDotenvFilesForEnv = ({
       process.env.NODE_ENV = env;
     }
 
-    process.env[`_${dotenvNamePrefix}_ENV`] = process.env.NODE_ENV;
-    process.env[`_${dotenvNamePrefix}_STATIC_DIR`] = STATIC_DIR;
-    process.env[`_${dotenvNamePrefix}_RELATIVE_DIRNAME`] = relativePath;
-    process.env[`_${dotenvNamePrefix}_OPEN_PATH`] = OPEN_PATH;
-    process.env[`_${dotenvNamePrefix}_PUBLIC_PATH`] = PUBLIC_PATH;
-    process.env[`_${dotenvNamePrefix}_SRC_DIR`] = SRC_DIR;
-    process.env[`_${dotenvNamePrefix}_DIST_DIR`] = DIST_DIR;
-    process.env[`_${dotenvNamePrefix}_HOST`] = HOST;
-    process.env[`_${dotenvNamePrefix}_PORT`] = PORT;
-    process.env[`_${dotenvNamePrefix}_UI_NAME`] = UI_NAME;
+    setDotenvParam([
+      { param: `_${dotenvNamePrefix}_APP_INDEX_PREFIX`, value: APP_INDEX_PREFIX },
+      { param: `_${dotenvNamePrefix}_DIST_DIR`, value: DIST_DIR },
+      { param: `_${dotenvNamePrefix}_ENV`, value: process.env.NODE_ENV },
+      { param: `_${dotenvNamePrefix}_HOST`, value: HOST },
+      { param: `_${dotenvNamePrefix}_HTML_INDEX_DIR`, value: HTML_INDEX_DIR },
+      { param: `_${dotenvNamePrefix}_OPEN_PATH`, value: OPEN_PATH },
+      { param: `_${dotenvNamePrefix}_PORT`, value: PORT },
+      { param: `_${dotenvNamePrefix}_PUBLIC_PATH`, value: PUBLIC_PATH },
+      { param: `_${dotenvNamePrefix}_RELATIVE_DIRNAME`, value: relativePath },
+      { param: `_${dotenvNamePrefix}_SRC_DIR`, value: SRC_DIR },
+      { param: `_${dotenvNamePrefix}_STATIC_DIR`, value: STATIC_DIR },
+      { param: `_${dotenvNamePrefix}_UI_NAME`, value: UI_NAME }
+    ]);
+
+    if (setExposedParams) {
+      setDotenvParam([
+        { param: `APP_INDEX_PREFIX`, value: APP_INDEX_PREFIX, ignoreIfSet: true },
+        { param: `DIST_DIR`, value: DIST_DIR, ignoreIfSet: true },
+        { param: `HOST`, value: HOST, ignoreIfSet: true },
+        { param: `HTML_INDEX_DIR`, value: HTML_INDEX_DIR, ignoreIfSet: true },
+        { param: `OPEN_PATH`, value: OPEN_PATH, ignoreIfSet: true },
+        { param: `PORT`, value: PORT, ignoreIfSet: true },
+        { param: `PUBLIC_PATH`, value: PUBLIC_PATH, ignoreIfSet: true },
+        { param: `RELATIVE_DIRNAME`, value: relativePath, ignoreIfSet: true },
+        { param: `SRC_DIR`, value: SRC_DIR, ignoreIfSet: true },
+        { param: `STATIC_DIR`, value: STATIC_DIR, ignoreIfSet: true },
+        { param: `UI_NAME`, value: UI_NAME, ignoreIfSet: true }
+      ]);
+    }
   }
 
   return process.env;
@@ -162,6 +204,7 @@ const dotenv = { setupDotenvFilesForEnv, setupWebpackDotenvFilesForEnv };
 
 module.exports = {
   dotenv,
+  setDotenvParam,
   setupWebpackDotenvFile,
   setupWebpackDotenvFilesForEnv,
   setupDotenvFile,

diff --git a/src/wpConfigs.js b/src/wpConfigs.js
@@ -63,7 +63,9 @@ const preprocessLoader = ({ _BUILD_SRC_DIR: SRC_DIR = '' } = OPTIONS.dotenv || {
  * Common webpack settings between environments.
  *
  * @param {object} dotenv
+ * @param {string} dotenv._BUILD_APP_INDEX_PREFIX
  * @param {string} dotenv._BUILD_DIST_DIR
+ * @param {string} dotenv._BUILD_HTML_INDEX_DIR
  * @param {string} dotenv._BUILD_PUBLIC_PATH
  * @param {string} dotenv._BUILD_RELATIVE_DIRNAME
  * @param {string} dotenv._BUILD_SRC_DIR
@@ -76,7 +78,9 @@ const preprocessLoader = ({ _BUILD_SRC_DIR: SRC_DIR = '' } = OPTIONS.dotenv || {
  */
 const common = (
   {
+    _BUILD_APP_INDEX_PREFIX: APP_INDEX_PREFIX,
     _BUILD_DIST_DIR: DIST_DIR,
+    _BUILD_HTML_INDEX_DIR: HTML_INDEX_DIR = '',
     _BUILD_PUBLIC_PATH: PUBLIC_PATH,
     _BUILD_RELATIVE_DIRNAME: RELATIVE_DIRNAME,
     _BUILD_SRC_DIR: SRC_DIR = '',
@@ -91,15 +95,17 @@ const common = (
       let entryFiles;
       try {
         const entryFilesSet = new Set([
-          path.join(SRC_DIR, `index.js`),
-          path.join(SRC_DIR, `index.jsx`),
-          path.join(SRC_DIR, `index.${loader}`),
-          path.join(SRC_DIR, `index.${loader}x`)
+          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.js`),
+          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.jsx`),
+          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.${loader}`),
+          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.${loader}x`)
         ]);
         entryFiles = Array.from(entryFilesSet).filter(file => fs.existsSync(file));
 
         if (!entryFiles.length) {
-          consoleMessage.warn(`webpack app entry file error: Missing entry/app file. Expected index.(${loader}|x)`);
+          consoleMessage.warn(
+            `webpack app entry file error: Missing entry/app file. Expected ${APP_INDEX_PREFIX}.(${loader}|x)`
+          );
         }
       } catch (e) {
         consoleMessage.error(`webpack app entry file error: ${e.message}`);
@@ -157,7 +163,7 @@ const common = (
       directory: RELATIVE_DIRNAME
     }),
     ...(() => {
-      const staticFile = path.join(STATIC_DIR, 'index.html');
+      const staticFile = path.join(HTML_INDEX_DIR, 'index.html');
       if (fs.existsSync(staticFile)) {
         return [
           new HtmlWebpackPlugin({
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		console.log('hello world, this is a static resource');