Environment Variables & NODE_PATH support (codesandbox#321)

* Add .env support and NODE_PATH

* Support NODE_PATH for dynamic resolving

* Only enable for CRA

* Fix transpilation resolvement

Author: CompuIves

packages/app/src/sandbox/eval/loaders/eval.js

@@ -2,14 +2,21 @@
 import buildProcess from './utils/process';
 
 /* eslint-disable no-unused-vars */
-export default function(code: string, require: Function, exports: Object) {
+export default function(
+  code: string,
+  require: Function,
+  exports: Object,
+  env: Object = {}
+) {
   const module = { exports: {} };
   const global = window;
-  const process = buildProcess();
+  const process = buildProcess(env);
   window.global = global;
 
   try {
-    const newCode = `(function evaluate(require, module, exports, process, global) {${code}\n})`;
+    const newCode = `(function evaluate(require, module, exports, process, global) {${
+      code
+    }\n})`;
     (0, eval)(newCode)(require, module, exports, process, global); // eslint-disable-line no-eval
 
     // Choose either the export of __esModule or node

packages/app/src/sandbox/eval/loaders/utils/process.js

@@ -36,6 +36,7 @@ process.umask = function() {
   return 0;
 };
 
-export default function build() {
+export default function build(env) {
+  process.env = { NODE_ENV: 'development', ...env };
   return process;
 }

packages/app/src/sandbox/eval/manager.js

@@ -52,6 +52,7 @@ export default class Manager {
       },
     },
   };
+  envVariables: { [envName: string]: string } = {};
   preset: Preset;
   externals: Externals;
   modules: ModuleObject;
@@ -140,7 +141,6 @@ export default class Manager {
     this.transpiledModules[module.path].module = module;
 
     const transpiledModule = new TranspiledModule(module, query);
-
     this.transpiledModules[module.path].tModules[query] = transpiledModule;
 
     return transpiledModule;
@@ -200,11 +200,29 @@ export default class Manager {
     delete this.transpiledModules[module.path];
   }
 
+  setEnvironmentVariables() {
+    if (this.transpiledModules['/.env'] && this.preset.hasDotEnv) {
+      const envCode = this.transpiledModules['/.env'].module.code;
+
+      this.envVariables = {};
+      try {
+        envCode.split('\n').forEach(envLine => {
+          const [name, ...val] = envLine.split('=');
+
+          this.envVariables[name] = val.join('=');
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
   /**
    * Will transpile this module and all eventual children (requires) that go with it
    * @param {*} entry
    */
   transpileModules(entry: Module) {
+    this.setEnvironmentVariables();
     this.cachedPaths = {};
     const transpiledModule = this.getTranspiledModule(entry);
 
@@ -290,6 +308,9 @@ export default class Manager {
           extensions: defaultExtensions.map(ext => '.' + ext),
           isFile: this.isFile,
           readFileSync: this.readFileSync,
+          moduleDirectory: ['node_modules', this.envVariables.NODE_PATH].filter(
+            x => x
+          ),
         });
 
         this.cachedPaths[pathId] = resolvedPath;

packages/app/src/sandbox/eval/npm/fetch-npm-module.js

@@ -135,6 +135,10 @@ export default async function fetchModule(
       {
         filename: currentPath,
         extensions: defaultExtensions.map(ext => '.' + ext),
+        moduleDirectory: [
+          'node_modules',
+          manager.envVariables.NODE_PATH,
+        ].filter(x => x),
         isFile: (p, c) => c(null, !!manager.transpiledModules[p] || !!meta[p]),
         readFile: async (p, c, cb) => {
           const callback = cb || c;

packages/app/src/sandbox/eval/presets/create-react-app/index.js

@@ -5,13 +5,12 @@ import babelTranspiler from '../../transpilers/babel';
 import jsonTranspiler from '../../transpilers/json';
 import rawTranspiler from '../../transpilers/raw';
 
-const preset = new Preset('create-react-app', [
-  'web.js',
-  'js',
-  'json',
-  'web.jsx',
-  'jsx',
-]);
+const preset = new Preset(
+  'create-react-app',
+  ['web.js', 'js', 'json', 'web.jsx', 'jsx'],
+  {},
+  { hasDotEnv: true }
+);
 
 preset.registerTranspiler(module => /\.css$/.test(module.path), [
   { transpiler: stylesTranspiler },

packages/app/src/sandbox/eval/presets/index.js

@@ -33,16 +33,20 @@ export default class Preset {
   name: string;
   ignoredExtensions: Array<string>;
   alias: { [path: string]: string };
+  // Whether this preset supports .env files
+  hasDotEnv: boolean;
 
   constructor(
     name: string,
     ignoredExtensions: ?Array<string>,
-    alias: { [path: string]: string }
+    alias: { [path: string]: string },
+    { hasDotEnv }: { hasDotEnv: boolean } = {}
   ) {
     this.loaders = [];
     this.transpilers = new Set();
     this.name = name;
 
+    this.hasDotEnv = hasDotEnv || false;
     this.alias = alias || {};
     this.ignoredExtensions = ignoredExtensions || ['js', 'jsx', 'json'];
   }

packages/app/src/sandbox/eval/transpiled-module.js

@@ -483,7 +483,8 @@ export default class TranspiledModule {
       const exports = evaluate(
         this.source.compiledCode,
         require,
-        this.compilation.exports
+        this.compilation.exports,
+        manager.envVariables
       );
 
       this.compilation.exports = exports;