Add support for baseUrl in tsconfig/jsconfig for CRA (codesandbox#2296)

* Add support for baseUrl in tsconfig/jsconfig

* Fix checking on configuration

* Make stringify prettier

Author: CompuIves

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

@@ -557,6 +557,23 @@ export default class Manager {
       .replace(/.*\{\{sandboxRoot\}\}/, '');
   }
 
+  getModuleDirectories() {
+    const baseTSCompilerConfig = [
+      this.configurations.typescript,
+      this.configurations.jsconfig,
+    ].find(config => config && config.generated !== true);
+
+    const baseUrl =
+      baseTSCompilerConfig &&
+      baseTSCompilerConfig.parsed &&
+      baseTSCompilerConfig.parsed.compilerOptions &&
+      baseTSCompilerConfig.parsed.compilerOptions.baseUrl;
+
+    return ['node_modules', baseUrl, this.envVariables.NODE_PATH].filter(
+      Boolean
+    );
+  }
+
   // ALWAYS KEEP THIS METHOD IN SYNC WITH SYNC VERSION
   async resolveModuleAsync(
     path: string,
@@ -598,10 +615,7 @@ export default class Manager {
               isFile: this.isFile,
               readFileSync: this.readFileSync,
               packageFilter,
-              moduleDirectory: [
-                'node_modules',
-                this.envVariables.NODE_PATH,
-              ].filter(Boolean),
+              moduleDirectory: this.getModuleDirectories(),
             },
             (err, foundPath) => {
               if (err) {
@@ -702,9 +716,7 @@ export default class Manager {
           isFile: this.isFile,
           readFileSync: this.readFileSync,
           packageFilter,
-          moduleDirectory: ['node_modules', this.envVariables.NODE_PATH].filter(
-            Boolean
-          ),
+          moduleDirectory: this.getModuleDirectories(),
         });
 
         this.cachedPaths[dirredPath][path] = resolvedPath;

packages/common/src/templates/configuration/index.ts

@@ -7,6 +7,7 @@ import netlifyConfig from './netlify';
 import angularCli from './angular-cli';
 import angularJSON from './angular-json';
 import tsconfig from './tsconfig';
+import jsconfig from './jsconfig';
 import babelTranspiler from './babel-transpiler';
 import customCodeSandbox from './custom-codesandbox';
 
@@ -22,6 +23,7 @@ const configs = {
   customCodeSandbox,
   nowConfig,
   netlifyConfig,
+  jsconfig,
 };
 
 export default configs;

packages/common/src/templates/configuration/jsconfig/index.ts

@@ -0,0 +1,21 @@
+import { ConfigurationFile } from '../types';
+
+const config: ConfigurationFile = {
+  title: 'jsconfig.json',
+  type: 'jsconfig',
+  description:
+    'Configuration for how the editor (and sometimes the bundler) reads and parses JavaScript.',
+  moreInfoUrl: 'https://code.visualstudio.com/docs/languages/jsconfig',
+
+  getDefaultCode: (
+    template: string,
+    resolveModule: (path: string) => { code: string } | undefined
+  ) => JSON.stringify({ compilerOptions: { baseUrl: '.' } }, null, 2),
+
+  schema:
+    'https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/jsconfig.json',
+
+  partialSupportDisclaimer: `Only \`compilerOptions.baseUrl\` field is supported.`,
+};
+
+export default config;

packages/common/src/templates/react.ts

@@ -1,6 +1,8 @@
 import Template from './template';
 import { decorateSelector } from '../theme';
 
+import configurations from './configuration';
+
 export default new Template(
   'create-react-app',
   'React',
@@ -12,5 +14,9 @@ export default new Template(
     popular: true,
     main: true,
     mainFile: ['/src/index.js', '/src/index.tsx', '/src/index.ts'],
+    extraConfigurations: {
+      '/jsconfig.json': configurations.jsconfig,
+      '/tsconfig.json': configurations.tsconfig,
+    },
   }
 );