Add env variables support (#22)

Author: adambrgmn

.changeset/stupid-shrimps-greet.md

@@ -0,0 +1,5 @@
+---
+'@fransvilhelm/wp-bundler': minor
+---
+
+Add env variable support similar to CRA

README.md

@@ -26,6 +26,9 @@ browsers as well.
 - [External dependencies](#external-dependencies)
 - [Translations](#translations)
   - [PHP and Twig translations](#php-and-twig-translations)
+- [Environment variables](#environment-variables)
+  - [Other injected variables](#other-injected-variables)
+  - [Other `.env` files](#other-env-files)
 - [Other WordPress focused bundlers](#other-wordpress-focused-bundlers)
 - [Roadmap](#roadmap)
 - [LICENSE](#license)
@@ -280,6 +283,40 @@ means you are no longer need to use `wp-cli i18n make-pot/make-json` to extract
 
 `.mo` files will also me compiled from all your `.po` files.
 
+## Environment variables
+
+You can define environment variables in a `.env` file located in the root of you project, right by you `package.json`
+file. `wp-bundler` will inject any env variable defined in those that starts with `WP_`.
+
+- `WP_API_KEY` => injected
+- `API_KEY` => not injected
+
+Then in your application code you can access those by reading `process.env.WP_API_KEY` (or whatever the variable was
+called).
+
+The variables defined in `.env` will not override any environment variables already set.
+
+### Other injected variables
+
+Except environment variable prefixed with `WP_` `wp-bundler` will also inject the following variables:
+
+- `process.env.NODE_ENV`: `'production'` during build, `'development'` in watch mode
+- `__DEV__`: `false` during build, `true` in watch mode
+- `__PROD__`: `true` during build, `false` in watch mode
+
+### Other `.env` files
+
+Except the `.env` file you can use a few other `.env` files to inject variables from. The list below defines which files
+are read during which script. Files to the left have more priority than files to the right. Meaning that variables
+coming from a file to the left will override a variable coming from a file to the right.
+
+- `wp-bundler` (or `--mode prod`): `.env.production.local` > `.env.local` > `.env.production` > `.env`
+- `wp-bundler --watch` (or `--mode dev`): `.env.development.local` > `.env.local` > `.env.development` > `.env`
+
+With this structure you could have a `.env` file tracked by `git` and then allow developers to override these defaults
+with their own `.env.local` files, which should not be checked into `git`. This is the same mechanism as
+[`create-react-app` uses](https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env).
+
 ## Other WordPress focused bundlers
 
 The following projects might interest you if `wp-bundler` doesn't meet your requirements.

example/src/app.tsx

@@ -19,3 +19,5 @@ ReactDOM.render(
   </React.Suspense>,
   document.getElementById('root'),
 );
+
+console.log(process.env.WP_TEST);

package.json

@@ -64,6 +64,7 @@
     "@xstate/react": "^1.6.1",
     "autoprefixer": "^10.3.7",
     "babel-eslint": "^10.1.0",
+    "dotenv": "^10.0.0",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^6.1.0",

src/plugins/define.ts

@@ -1,15 +1,28 @@
+import * as dotenv from 'dotenv';
+import * as fs from 'fs';
 import { BundlerPlugin } from '../types';
 
-export const define: BundlerPlugin = ({ mode }) => ({
+export const define: BundlerPlugin = ({ mode, project }) => ({
   name: 'wp-bundler-define',
   setup(build) {
-    const options = build.initialOptions;
-    options.define = options.define || {};
+    build.initialOptions.define = build.initialOptions.define ?? {};
 
-    options.define['process.env.NODE_ENV'] =
-      mode === 'prod' ? JSON.stringify('production') : JSON.stringify('development');
+    let NODE_ENV = mode === 'dev' ? 'development' : 'production';
+    build.initialOptions.define['process.env.NODE_ENV'] = JSON.stringify(NODE_ENV);
+    build.initialOptions.define['__DEV__'] = JSON.stringify(mode === 'dev');
+    build.initialOptions.define['__PROD__'] = JSON.stringify(mode === 'prod');
 
-    options.define['__DEV__'] = JSON.stringify(mode === 'dev');
-    options.define['__PROD__'] = JSON.stringify(mode === 'prod');
+    let envFiles = [`.env.${NODE_ENV}.local`, '.env.local', `.env.${NODE_ENV}`, '.env'];
+
+    for (let file of envFiles) {
+      if (fs.existsSync(file)) dotenv.config({ path: project.paths.absolute(file) });
+    }
+
+    let WP_ = /^WP_/i;
+    for (let key of Object.keys(process.env)) {
+      if (WP_.test(key)) {
+        build.initialOptions.define[`process.env.${key}`] = JSON.stringify(process.env[key]);
+      }
+    }
   },
 });

yarn.lock

@@ -2261,6 +2261,11 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+dotenv@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
+  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
+
 dotenv@^8.1.0:
   version "8.6.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"