Support dynamic typescript version from package.json (codesandbox#1843)

* Support dynamic typescript version from package.json

Fixes codesandbox#942
Fixes codesandbox#1683

* Fix typings

* Fix typings

* Allow for extension of package.json

Author: CompuIves

packages/app/src/sandbox/eval/transpilers/typescript/index.ts

@@ -4,6 +4,7 @@ import TypeScriptWorker from 'worker-loader?publicPath=/&name=typescript-transpi
 import WorkerTranspiler from '../worker-transpiler';
 import { LoaderContext } from '../../transpiled-module';
 import { TranspilerResult } from '..';
+import { getDependenciesFromConfig } from 'sandbox/eval/utils/get-dependencies';
 
 class TypeScriptTranspiler extends WorkerTranspiler {
   worker: Worker;
@@ -20,6 +21,7 @@ class TypeScriptTranspiler extends WorkerTranspiler {
       const path = loaderContext.path;
 
       let foundConfig = null;
+      let typescriptVersion = '3.4.1';
       if (
         loaderContext.options.configurations &&
         loaderContext.options.configurations.typescript &&
@@ -28,11 +30,19 @@ class TypeScriptTranspiler extends WorkerTranspiler {
         foundConfig = loaderContext.options.configurations.typescript.parsed;
       }
 
+      const dependencies = getDependenciesFromConfig(
+        loaderContext.options.configurations
+      );
+      if (dependencies && dependencies.typescript) {
+        typescriptVersion = dependencies.typescript;
+      }
+
       this.queueTask(
         {
           code,
           path,
           config: foundConfig,
+          typescriptVersion,
         },
         loaderContext._module.getId(),
         loaderContext,

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.7.2/typescript.min.js',
+  'https://cdnjs.cloudflare.com/ajax/libs/typescript/3.4.1/typescript.min.js',
 ]);
 
 self.postMessage('ready');
@@ -20,7 +20,13 @@ declare var ts: {
 };
 
 self.addEventListener('message', event => {
-  const { code, path, config } = event.data;
+  const { code, path, config, typescriptVersion } = event.data;
+
+  if (typescriptVersion !== '3.4.1') {
+    self.importScripts(
+      `https://unpkg.com/typescript@${typescriptVersion}/lib/typescript.js`
+    );
+  }
 
   const defaultConfig = {
     fileName: path,

packages/app/src/sandbox/eval/utils/get-dependencies.ts

@@ -0,0 +1,18 @@
+import { ParsedConfigurationFiles } from '@codesandbox/common/lib/templates/template';
+
+export function getDependenciesFromConfig(
+  configurations: ParsedConfigurationFiles
+) {
+  if (
+    configurations &&
+    configurations.package &&
+    configurations.package.parsed
+  ) {
+    return {
+      ...configurations.package.parsed.devDependencies,
+      ...configurations.package.parsed.dependencies,
+    };
+  }
+
+  return {};
+}

packages/common/src/templates/angular.ts

@@ -1,5 +1,3 @@
-
-
 import { absolute, join } from '../utils/path';
 
 import Template, { ParsedConfigurationFiles } from './template';
@@ -94,7 +92,7 @@ class AngularTemplate extends Template {
     if (!configurationFiles['angular-config'].generated) {
       const { parsed } = configurationFiles['angular-config'];
       entries = entries.concat(getAngularJSONHTMLEntry(parsed));
-    } else {
+    } else if (configurationFiles['angular-cli']) {
       const { parsed } = configurationFiles['angular-cli'];
       entries = entries.concat(getAngularCLIHTMLEntry(parsed));
     }

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

@@ -1,4 +1,3 @@
-
 import { Sandbox } from '../../types';
 
 export type ConfigurationFile = {
@@ -18,8 +17,8 @@ export type ConfigurationFile = {
   partialSupportDisclaimer?: string;
 };
 
-export type ParsedConfigurationFile = {
-  parsed?: any;
+export type ParsedConfigurationFile<T> = {
+  parsed?: T;
   code: string;
   generated: boolean;
   error?: Error;

packages/common/src/templates/template.ts

@@ -26,8 +26,16 @@ export type ConfigurationFiles = {
   [path: string]: ConfigurationFile;
 };
 
+export type Dependencies = { [name: string]: string };
+
 export type ParsedConfigurationFiles = {
-  [path: string]: ParsedConfigurationFile;
+  package?: ParsedConfigurationFile<{
+    main: string;
+    dependencies?: Dependencies;
+    devDependencies: Dependencies;
+    [otherProperties: string]: any | undefined;
+  }>;
+  [path: string]: ParsedConfigurationFile<any> | undefined;
 };
 
 const defaultConfigurations = {
@@ -180,7 +188,7 @@ export default class Template {
   }
 
   // eslint-disable-next-line no-unused-vars
-  getHTMLEntries(configurationFiles: { [type: string]: Object }): string[] {
+  getHTMLEntries(configurationFiles: ParsedConfigurationFiles): string[] {
     return ['/public/index.html', '/index.html'];
   }
 

packages/common/src/templates/vue.ts

@@ -1,4 +1,3 @@
-
 import Template, { ParsedConfigurationFiles } from './template';
 import { decorateSelector } from '../theme';
 import configurations from './configuration';
@@ -14,9 +13,7 @@ class VueTemplate extends Template {
   }
 
   // eslint-disable-next-line no-unused-vars
-  getHTMLEntries(configurationFiles: {
-    [type: string]: Object;
-  }): Array<string> {
+  getHTMLEntries(configurationFiles: ParsedConfigurationFiles): Array<string> {
     return ['/static/index.html', '/index.html'];
   }
 }

packages/common/src/utils/is-babel-7.ts

@@ -1,6 +1,10 @@
 import semver from 'semver';
+import { Dependencies } from '../templates/template';
 
-function isCRAVersion2(dependencies: object, devDependencies: object) {
+function isCRAVersion2(
+  dependencies: Dependencies,
+  devDependencies: Dependencies
+) {
   const reactScriptsVersion =
     dependencies['react-scripts'] || devDependencies['react-scripts'];
   if (reactScriptsVersion) {
@@ -14,7 +18,10 @@ function isCRAVersion2(dependencies: object, devDependencies: object) {
   return false;
 }
 
-export function isBabel7(dependencies = {}, devDependencies = {}) {
+export function isBabel7(
+  dependencies: Dependencies = {},
+  devDependencies: Dependencies = {}
+) {
   if (devDependencies['@vue/cli-plugin-babel']) {
     return true;
   }