React Typescript (codesandbox#192)

* React Typescript

* Add typescript validation

* Tweaks

* Auto add @types to dependencies

* Fix typing fetching for embeds

Author: CompuIves

config/webpack.common.js

@@ -233,26 +233,32 @@ module.exports = {
     // See https://github.com/facebookincubator/create-react-app/issues/186
     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
     // Make the monaco editor work
-    new CopyWebpackPlugin([
-      {
-        from: __DEV__
-          ? 'node_modules/monaco-editor/dev/vs'
-          : 'node_modules/monaco-editor/min/vs',
-        to: 'public/vs',
-      },
-      {
-        from: 'node_modules/monaco-vue/release/min',
-        to: 'public/vs/language/vue',
-      },
-      {
-        from: 'static',
-        to: 'static',
-      },
-      {
-        from: 'src/homepage/static',
-        to: 'static',
-      },
-    ]),
+    new CopyWebpackPlugin(
+      [
+        {
+          from: __DEV__
+            ? 'node_modules/monaco-editor/dev/vs'
+            : 'node_modules/monaco-editor/min/vs',
+          to: 'public/vs',
+        },
+        __PROD__ && {
+          from: 'node_modules/monaco-editor/min-maps',
+          to: 'public/min-maps',
+        },
+        {
+          from: 'node_modules/monaco-vue/release/min',
+          to: 'public/vs/language/vue',
+        },
+        {
+          from: 'static',
+          to: 'static',
+        },
+        {
+          from: 'src/homepage/static',
+          to: 'static',
+        },
+      ].filter(x => x)
+    ),
     // Try to dedupe duplicated modules, if any:
     new webpack.optimize.CommonsChunkPlugin({
       name: 'common',

src/app/components/TypeScriptIcon.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import IconBase from 'react-icons/IconBase';
+
+export default () => (
+  <IconBase viewBox="0 0 32 32">
+    <title>file_type_typescript</title>
+    <path d="M23.827,8.243A4.424,4.424,0,0,1,26.05,9.524a5.853,5.853,0,0,1,.852,1.143c.011.045-1.534,1.083-2.471,1.662-.034.023-.169-.124-.322-.35a2.014,2.014,0,0,0-1.67-1c-1.077-.074-1.771.49-1.766,1.433a1.3,1.3,0,0,0,.153.666c.237.49.677.784,2.059,1.383,2.544,1.095,3.636,1.817,4.31,2.843a5.158,5.158,0,0,1,.416,4.333,4.764,4.764,0,0,1-3.932,2.815,10.9,10.9,0,0,1-2.708-.028,6.531,6.531,0,0,1-3.616-1.884,6.278,6.278,0,0,1-.926-1.371,2.655,2.655,0,0,1,.327-.208c.158-.09.756-.434,1.32-.761L19.1,19.6l.214.312a4.771,4.771,0,0,0,1.35,1.292,3.3,3.3,0,0,0,3.458-.175,1.545,1.545,0,0,0,.2-1.974c-.276-.395-.84-.727-2.443-1.422a8.8,8.8,0,0,1-3.349-2.055,4.687,4.687,0,0,1-.976-1.777,7.116,7.116,0,0,1-.062-2.268,4.332,4.332,0,0,1,3.644-3.374A9,9,0,0,1,23.827,8.243ZM15.484,9.726l.011,1.454h-4.63V24.328H7.6V11.183H2.97V9.755A13.986,13.986,0,0,1,3.01,8.289c.017-.023,2.832-.034,6.245-.028l6.211.017Z" />
+  </IconBase>
+);

src/app/components/sandbox/CodeEditor/CodeMirror.js

@@ -436,7 +436,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
     const { id, title, preferences } = this.props;
     const code = this.getCode();
     const mode = await this.getMode(title);
-    if (mode === 'jsx' || mode === 'css') {
+    if (mode === 'jsx' || mode === 'typescript' || mode === 'css') {
       try {
         const prettify = await import('app/utils/codemirror/prettify');
         const newCode = await prettify.default(

src/app/components/sandbox/CodeEditor/Monaco.js

@@ -6,6 +6,7 @@ import type { Preferences, ModuleError, Module, Directory } from 'common/types';
 import { getModulePath } from 'app/store/entities/sandboxes/modules/selectors';
 
 import theme from 'common/theme';
+import getTemplate from 'common/templates';
 
 /* eslint-disable import/no-webpack-loader-syntax */
 import SyntaxHighlightWorker from 'worker-loader!./monaco/workers/syntax-highlighter';
@@ -40,6 +41,8 @@ type Props = {
   directories: Array<Directory>,
   dependencies: ?Object,
   setCurrentModule: ?(sandboxId: string, moduleId: string) => void,
+  template: string,
+  addDependency: ?(sandboxId: string, dependency: string) => void,
 };
 
 const Container = styled.div`
@@ -199,6 +202,18 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
     this.typingsFetcherWorker.addEventListener('message', event => {
       const { path, typings } = event.data;
 
+      if (
+        path.startsWith('node_modules/@types') &&
+        this.hasNativeTypescript() &&
+        this.props.addDependency != null
+      ) {
+        const dependency = path.match(/node_modules\/(@types\/.*)\//)[1];
+
+        if (!Object.keys(this.props.dependencies).includes(dependency)) {
+          this.props.addDependency(this.props.sandboxId, dependency);
+        }
+      }
+
       if (
         !this.monaco.languages.typescript.typescriptDefaults.getExtraLibs()[
           `file:///${path}`
@@ -235,12 +250,15 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
     );
   };
 
-  updateLintWarnings = (markers: Array<Object>) => {
-    this.monaco.editor.setModelMarkers(
-      this.editor.getModel(),
-      'eslint',
-      markers
-    );
+  updateLintWarnings = async (markers: Array<Object>) => {
+    const mode = await this.getMode(this.props.title);
+    if (mode === 'javascript') {
+      this.monaco.editor.setModelMarkers(
+        this.editor.getModel(),
+        'eslint',
+        markers
+      );
+    }
   };
 
   shouldComponentUpdate(nextProps: Props, nextState: State) {
@@ -493,6 +511,11 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
     });
   };
 
+  hasNativeTypescript = () => {
+    const template = getTemplate(this.props.template);
+    return template.sourceConfig && template.sourceConfig.typescript;
+  };
+
   configureEditor = async (editor, monaco) => {
     this.editor = editor;
     this.monaco = monaco;
@@ -505,18 +528,28 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
 
     this.setupWorkers();
 
+    const hasNativeTypescript = this.hasNativeTypescript();
+
     const compilerDefaults = {
       jsxFactory: 'React.createElement',
       reactNamespace: 'React',
       jsx: monaco.languages.typescript.JsxEmit.React,
       target: monaco.languages.typescript.ScriptTarget.ES2016,
-      allowNonTsExtensions: true,
+      allowNonTsExtensions: !hasNativeTypescript,
       moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-      module: monaco.languages.typescript.ModuleKind.System,
-      experimentalDecorators: true,
+      module: monaco.languages.typescript.ModuleKind.ES2015,
+      experimentalDecorators: !hasNativeTypescript,
       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);
@@ -530,7 +563,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
 
     monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
       noSemanticValidation: false,
-      noSyntaxValidation: true,
+      noSyntaxValidation: !hasNativeTypescript,
     });
 
     await this.initializeModules();
@@ -615,7 +648,9 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
   };
 
   initializeModules = (modules = this.props.modules) =>
-    Promise.all(modules.map(module => this.createModel(module, modules)));
+    Promise.all(
+      modules.reverse().map(module => this.createModel(module, modules))
+    );
 
   resizeEditor = () => {
     this.editor.layout();
@@ -737,7 +772,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
     const code = this.getCode();
     const mode = await this.getMode(title);
 
-    if (mode === 'javascript' || mode === 'css') {
+    if (mode === 'javascript' || mode === 'typescript' || mode === 'css') {
       try {
         const prettify = await import('app/utils/codemirror/prettify');
         const newCode = await prettify.default(

src/app/components/sandbox/Preview/index.js

@@ -4,8 +4,7 @@ import styled from 'styled-components';
 
 import { debounce } from 'lodash';
 
-import type { Preferences } from 'app/store/preferences/reducer';
-import type { Module, Sandbox, Directory } from 'common/types';
+import type { Module, Sandbox, Preferences, Directory } from 'common/types';
 
 import { frameUrl } from 'app/utils/url-generator';
 import { findMainModule } from 'app/store/entities/sandboxes/modules/selectors';
@@ -215,8 +214,8 @@ export default class Preview extends React.PureComponent<Props, State> {
   };
 
   getRenderedModule = () => {
-    const { modules, module, isInProjectView } = this.props;
-    return isInProjectView ? findMainModule(modules) : module;
+    const { modules, module, template, isInProjectView } = this.props;
+    return isInProjectView ? findMainModule(modules, template) : module;
   };
 
   executeCodeImmediately = () => {

src/app/pages/Profile/Showcase/ShowcasePreview.js

@@ -54,7 +54,7 @@ class ShowcasePreview extends React.PureComponent {
       directories,
     } = this.props;
 
-    const mainModule = findMainModule(modules);
+    const mainModule = findMainModule(modules, sandbox.template);
 
     return (
       <Container>

src/app/pages/Sandbox/Editor/Content/Header/ShareView.js

@@ -177,7 +177,7 @@ class ShareView extends React.PureComponent {
   clearDefaultModule = () => this.setState({ defaultModule: null });
 
   getOptionsUrl = () => {
-    const { modules, directories } = this.props;
+    const { sandbox, modules, directories } = this.props;
     const {
       defaultModule,
       showEditor,
@@ -191,7 +191,7 @@ class ShareView extends React.PureComponent {
 
     const options = {};
 
-    const mainModuleId = findMainModule(modules).id;
+    const mainModuleId = findMainModule(modules, sandbox.template).id;
     if (defaultModule && defaultModule !== mainModuleId) {
       const modulePath = getModulePath(modules, directories, defaultModule);
       options.module = modulePath;
@@ -295,7 +295,7 @@ class ShareView extends React.PureComponent {
     } = this.state;
 
     const defaultModule =
-      this.state.defaultModule || findMainModule(modules).id;
+      this.state.defaultModule || findMainModule(modules, sandbox.template).id;
 
     return (
       <Container>

src/app/pages/Sandbox/Editor/Content/index.js

@@ -109,7 +109,7 @@ class EditorPreview extends React.PureComponent<Props, State> {
   saveCode = () => {
     const { sandbox, modules, sandboxActions } = this.props;
 
-    const mainModule = findMainModule(modules);
+    const mainModule = findMainModule(modules, sandbox.template);
     const { currentModule } = sandbox;
 
     // $FlowIssue
@@ -139,7 +139,7 @@ class EditorPreview extends React.PureComponent<Props, State> {
       previewApiActions,
     } = this.props;
 
-    const mainModule = findMainModule(modules);
+    const mainModule = findMainModule(modules, sandbox.template);
     if (!mainModule) throw new Error('Cannot find main module');
 
     const { currentModule: currentModuleId } = sandbox;
@@ -173,6 +173,8 @@ class EditorPreview extends React.PureComponent<Props, State> {
           sandboxId={sandbox.id}
           dependencies={sandbox.npmDependencies}
           setCurrentModule={sandboxActions.setCurrentModule}
+          addDependency={sandboxActions.addNPMDependency}
+          template={sandbox.template}
         />
       </FullSize>
     );

src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren.js

@@ -23,6 +23,7 @@ type Props = {
   parentShortid: string,
   isInProjectView: boolean,
   parentShortid: string,
+  sandboxTemplate: string,
 };
 
 export default class DirectoryChildren extends React.PureComponent<Props> {
@@ -40,6 +41,7 @@ export default class DirectoryChildren extends React.PureComponent<Props> {
       directories,
       parentShortid,
       sandboxId,
+      sandboxTemplate,
       modules,
       deleteEntry,
       currentModuleId,
@@ -59,6 +61,7 @@ export default class DirectoryChildren extends React.PureComponent<Props> {
               shortid={dir.shortid}
               title={dir.title}
               sandboxId={sandboxId}
+              sandboxTemplate={sandboxTemplate}
               modules={modules}
               directories={directories}
               currentModuleId={currentModuleId}
@@ -67,7 +70,7 @@ export default class DirectoryChildren extends React.PureComponent<Props> {
           ))}
         {modules.filter(x => x.directoryShortid === parentShortid).map(m => {
           const isActive = m.id === currentModuleId;
-          const mainModule = isMainModule(m);
+          const mainModule = isMainModule(m, sandboxTemplate);
           const type = getType(m);
 
           const hasError = m && m.errors.length;

src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons.js

@@ -11,6 +11,7 @@ import HTMLIcon from 'react-icons/lib/fa/html5';
 import ErrorIcon from 'react-icons/lib/md/error';
 import RawIcon from 'react-icons/lib/go/file-text';
 import ReactIcon from 'app/components/ReactIcon';
+import TypeScriptIcon from 'app/components/TypeScriptIcon';
 
 const NotSyncedIconWithMargin = styled(NotSyncedIcon)`
   margin-left: -20px;
@@ -53,6 +54,8 @@ const getIcon = (type, error, root) => {
       return <DirectoryIcon />;
     case 'css':
       return <CSSIcon />;
+    case 'ts':
+      return <TypeScriptIcon />;
     case 'html':
       return <HTMLIcon />;
     default: