Support for TypeScript config

Ives van Hoorne · Ives van Hoorne · commit d75cc6f065dc · 2018-02-22T18:23:37.000+01:00
diff --git a/packages/app/src/app/components/CodeEditor/Monaco/index.js b/packages/app/src/app/components/CodeEditor/Monaco/index.js
@@ -51,6 +51,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   currentModule: $PropertyType<Props, 'currentModule'>;
   settings: $PropertyType<Props, 'settings'>;
   dependencies: ?$PropertyType<Props, 'dependencies'>;
+  tsconfig: ?$PropertyType<Props, 'tsconfig'>;
   disposeInitializer: ?() => void;
   syntaxWorker: ?Worker;
   lintWorker: ?Worker;
@@ -69,6 +70,8 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     this.settings = props.settings;
     this.dependencies = props.dependencies;
 
+    this.tsconfig = props.tsconfig;
+
     this.syntaxWorker = null;
     this.lintWorker = null;
     this.typingsFetcherWorker = null;
@@ -130,48 +133,13 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       });
     });
 
-    const hasNativeTypescript = this.hasNativeTypescript();
-
-    const compilerDefaults = {
-      jsxFactory: 'React.createElement',
-      reactNamespace: 'React',
-      jsx: monaco.languages.typescript.JsxEmit.React,
-      target: monaco.languages.typescript.ScriptTarget.ES2016,
-      allowNonTsExtensions: !hasNativeTypescript,
-      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-      module: hasNativeTypescript
-        ? monaco.languages.typescript.ModuleKind.ES2015
-        : monaco.languages.typescript.ModuleKind.System,
-      experimentalDecorators: true,
-      noEmit: true,
-      allowJs: true,
-      typeRoots: ['node_modules/@types'],
-
-      forceConsistentCasingInFileNames: hasNativeTypescript,
-      noImplicitReturns: hasNativeTypescript,
-      noImplicitThis: hasNativeTypescript,
-      noImplicitAny: hasNativeTypescript,
-      strictNullChecks: hasNativeTypescript,
-      suppressImplicitAnyIndexErrors: hasNativeTypescript,
-      noUnusedLocals: hasNativeTypescript,
-    };
-
     monaco.languages.typescript.typescriptDefaults.setMaximunWorkerIdleTime(-1);
     monaco.languages.typescript.javascriptDefaults.setMaximunWorkerIdleTime(-1);
-    monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
-      compilerDefaults
-    );
-    monaco.languages.typescript.javascriptDefaults.setCompilerOptions(
-      compilerDefaults
-    );
 
     monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
     monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
 
-    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-      noSemanticValidation: false,
-      noSyntaxValidation: !hasNativeTypescript,
-    });
+    this.setCompilerOptions();
 
     const sandbox = this.sandbox;
     const currentModule = this.currentModule;
@@ -236,6 +204,57 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     }
   };
 
+  setCompilerOptions = () => {
+    const hasNativeTypescript = this.hasNativeTypescript();
+    const existingConfig = this.tsconfig ? this.tsconfig.compilerOptions : {};
+
+    const compilerDefaults = {
+      jsxFactory: 'React.createElement',
+      reactNamespace: 'React',
+      jsx: this.monaco.languages.typescript.JsxEmit.React,
+      target: this.monaco.languages.typescript.ScriptTarget.ES2016,
+      allowNonTsExtensions: !hasNativeTypescript,
+      moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind
+        .NodeJs,
+      module: hasNativeTypescript
+        ? this.monaco.languages.typescript.ModuleKind.ES2015
+        : this.monaco.languages.typescript.ModuleKind.System,
+      experimentalDecorators: true,
+      noEmit: true,
+      allowJs: true,
+      typeRoots: ['node_modules/@types'],
+
+      forceConsistentCasingInFileNames:
+        hasNativeTypescript && existingConfig.forceConsistentCasingInFileNames,
+      noImplicitReturns:
+        hasNativeTypescript && existingConfig.noImplicitReturns,
+      noImplicitThis: hasNativeTypescript && existingConfig.noImplicitThis,
+      noImplicitAny: hasNativeTypescript && existingConfig.noImplicitAny,
+      strictNullChecks: hasNativeTypescript && existingConfig.strictNullChecks,
+      suppressImplicitAnyIndexErrors:
+        hasNativeTypescript && existingConfig.suppressImplicitAnyIndexErrors,
+      noUnusedLocals: hasNativeTypescript && existingConfig.noUnusedLocals,
+    };
+
+    this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
+      compilerDefaults
+    );
+    this.monaco.languages.typescript.javascriptDefaults.setCompilerOptions(
+      compilerDefaults
+    );
+
+    this.monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: !hasNativeTypescript,
+    });
+  };
+
+  setTSConfig = (config: Object) => {
+    this.tsconfig = config;
+
+    this.setCompilerOptions();
+  };
+
   changeModule = (
     newModule: Module,
     errors?: Array<ModuleError>,
diff --git a/packages/app/src/app/components/CodeEditor/index.js b/packages/app/src/app/components/CodeEditor/index.js
@@ -13,6 +13,7 @@ import type { Sandbox } from 'common/types';
 import { getModulePath } from 'common/sandbox/modules';
 import Tooltip from 'common/components/Tooltip';
 import UIIcon from 'react-icons/lib/md/dvr';
+import QuestionIcon from 'react-icons/lib/go/question';
 
 import type { Props } from './types';
 import Monaco from './Monaco';
@@ -149,7 +150,21 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
             </Icons>
           ) : (
             <Icons style={{ fontSize: '.875rem' }}>
-              Supported Configuration
+              {config.partialSupportDisclaimer ? (
+                <Tooltip
+                  position="bottom"
+                  title={config.partialSupportDisclaimer}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                  }}
+                >
+                  Partially Supported Config{' '}
+                  <QuestionIcon style={{ marginLeft: '.5rem' }} />
+                </Tooltip>
+              ) : (
+                <div>Supported Configuration</div>
+              )}
             </Icons>
           ))}
         <Editor {...props} dependencies={dependencies} />
diff --git a/packages/app/src/app/components/CodeEditor/types.js b/packages/app/src/app/components/CodeEditor/types.js
@@ -38,6 +38,7 @@ export interface Editor {
   changeCode?: (code: string) => any;
 
   currentModule?: Module;
+  setTSConfig?: (tsConfig: Object) => void;
 }
 
 export type Props = {
@@ -54,4 +55,5 @@ export type Props = {
   hideNavigation?: boolean,
   dependencies?: ?{ [name: string]: string },
   highlightedLines?: Array<number>,
+  tsconfig?: Object,
 };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/index.js b/packages/app/src/app/pages/Sandbox/Editor/Content/index.js
@@ -171,7 +171,7 @@ class EditorPreview extends React.Component<Props, State> {
       }
     );
     const disposePackageHandler = reaction(
-      () => store.editor.parsedConfigurations,
+      () => store.editor.parsedConfigurations.package,
       () => {
         const { parsed } = store.editor.parsedConfigurations.package;
         if (parsed) {
@@ -183,6 +183,19 @@ class EditorPreview extends React.Component<Props, State> {
         }
       }
     );
+    const disposeTSConfigHandler = reaction(
+      () => store.editor.parsedConfigurations.typescript,
+      () => {
+        if (store.editor.parsedConfigurations.typescript) {
+          const { parsed } = store.editor.parsedConfigurations.typescript;
+          if (parsed) {
+            if (editor.setTSConfig) {
+              editor.setTSConfig(parsed);
+            }
+          }
+        }
+      }
+    );
     const disposeModuleHandler = reaction(
       () => [store.editor.currentModule, store.editor.currentModule.code],
       ([newModule]) => {
@@ -214,6 +227,7 @@ class EditorPreview extends React.Component<Props, State> {
       disposeModulesHandler();
       disposePreferencesHandler();
       disposePackageHandler();
+      disposeTSConfigHandler();
       disposeSandboxChangeHandler();
       disposeModuleHandler();
       disposeToggleDevtools();
@@ -330,6 +344,10 @@ class EditorPreview extends React.Component<Props, State> {
                   moduleShortid: currentModule.shortid,
                 })
               }
+              tsconfig={
+                store.editor.parsedConfigurations.typescript &&
+                store.editor.parsedConfigurations.typescript.parsed
+              }
             />
             <Preview width={this.state.width} height={this.state.height} />
           </div>
diff --git a/packages/app/src/sandbox/eval/transpilers/typescript/index.js b/packages/app/src/sandbox/eval/transpilers/typescript/index.js
@@ -15,10 +15,20 @@ class TypeScriptTranspiler extends WorkerTranspiler {
     return new Promise((resolve, reject) => {
       const path = loaderContext.path;
 
+      let foundConfig = loaderContext.options;
+      if (
+        loaderContext.options.configurations &&
+        loaderContext.options.configurations.typescript &&
+        loaderContext.options.configurations.typescript.parsed
+      ) {
+        foundConfig = loaderContext.options.configurations.typescript.parsed;
+      }
+
       this.queueTask(
         {
           code,
           path,
+          config: foundConfig,
         },
         loaderContext,
         (err, data) => {
diff --git a/packages/app/src/sandbox/eval/transpilers/typescript/typescript-worker.js b/packages/app/src/sandbox/eval/transpilers/typescript/typescript-worker.js
@@ -2,7 +2,7 @@ import { buildWorkerError } from '../utils/worker-error-handler';
 import getDependencies from './get-require-statements';
 
 self.importScripts([
-  'https://cdnjs.cloudflare.com/ajax/libs/typescript/2.5.0/typescript.min.js',
+  'https://cdnjs.cloudflare.com/ajax/libs/typescript/2.7.2/typescript.min.js',
 ]);
 
 self.postMessage('ready');
@@ -20,9 +20,9 @@ declare var ts: {
 };
 
 self.addEventListener('message', event => {
-  const { code, path } = event.data;
+  const { code, path, config } = event.data;
 
-  const config = {
+  const defaultConfig = {
     fileName: path,
     reportDiagnostics: true,
     compilerOptions: {
@@ -49,8 +49,19 @@ self.addEventListener('message', event => {
     },
   };
 
+  let finalConfig = defaultConfig;
+
+  if (config) {
+    finalConfig = { ...config };
+    finalConfig.compilerOptions = {
+      ...config.compilerOptions,
+      module: ts.ModuleKind.CommonJS,
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+    };
+  }
+
   try {
-    const { outputText: compiledCode } = ts.transpileModule(code, config);
+    const { outputText: compiledCode } = ts.transpileModule(code, finalConfig);
 
     const sourceFile = ts.createSourceFile(
       path,
diff --git a/packages/common/templates/configuration/eslintrc/index.js b/packages/common/templates/configuration/eslintrc/index.js
@@ -12,7 +12,9 @@ const config: ConfigurationFile = {
   },
 
   schema:
-    'https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/babelrc.json',
+    'https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/eslintrc.json',
+
+  partialSupportDisclaimer: `We can only read preinstalled rules (all from eslint, react, prettier, import and vue plugins).`,
 };
 
 export default config;
diff --git a/packages/common/templates/configuration/index.js b/packages/common/templates/configuration/index.js
@@ -4,13 +4,15 @@ import prettierRC from './prettierRC';
 import sandboxConfig from './sandbox';
 import babelrc from './babelrc';
 import angularCli from './angular-cli';
+import tsconfig from './tsconfig';
 
 const configs = {
   babelrc,
   packageJSON,
   prettierRC,
   sandboxConfig,
   angularCli,
+  tsconfig,
 };
 
 export default configs;
diff --git a/packages/common/templates/configuration/tsconfig/index.js b/packages/common/templates/configuration/tsconfig/index.js
@@ -0,0 +1,56 @@
+// @flow
+import type { ConfigurationFile } from '../types';
+
+const config: ConfigurationFile = {
+  title: 'tsconfig.json',
+  type: 'typescript',
+  description: 'Configuration for how TypeScript transpiles.',
+  moreInfoUrl: 'http://www.typescriptlang.org/docs/handbook/tsconfig-json.html',
+
+  getDefaultCode: (template: string) => {
+    if (template === 'create-react-app-typescript') {
+      return JSON.stringify(
+        {
+          compilerOptions: {
+            outDir: 'build/dist',
+            module: 'esnext',
+            target: 'es5',
+            lib: ['es6', 'dom'],
+            sourceMap: true,
+            allowJs: true,
+            jsx: 'react',
+            moduleResolution: 'node',
+            rootDir: 'src',
+            forceConsistentCasingInFileNames: true,
+            noImplicitReturns: true,
+            noImplicitThis: true,
+            noImplicitAny: true,
+            strictNullChecks: true,
+            suppressImplicitAnyIndexErrors: true,
+            noUnusedLocals: true,
+          },
+          exclude: [
+            'node_modules',
+            'build',
+            'scripts',
+            'acceptance-tests',
+            'webpack',
+            'jest',
+            'src/setupTests.ts',
+          ],
+        },
+        null,
+        2
+      );
+    }
+
+    return '{}';
+  },
+
+  schema:
+    'https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/tsconfig.json',
+
+  partialSupportDisclaimer: `Only \`compilerOptions\` field is supported.`,
+};
+
+export default config;
diff --git a/packages/common/templates/configuration/types.js b/packages/common/templates/configuration/types.js
@@ -20,4 +20,5 @@ export type ConfigurationFile = {
   },
 
   schema?: string,
+  partialSupportDisclaimer?: string,
 };
diff --git a/packages/common/templates/react-ts.js b/packages/common/templates/react-ts.js
@@ -1,6 +1,7 @@
 // @flow
 
 import ReactIcon from 'common/components/logos/React';
+import configurations from './configuration';
 
 import Template from './template';
 import { decorateSelector } from '../theme';
@@ -14,5 +15,8 @@ export default new Template(
   decorateSelector(() => '#009fff'),
   {
     isTypescript: true,
+    extraConfigurations: {
+      '/tsconfig.json': configurations.tsconfig,
+    },
   }
 );
