cleanup and started testing

Author: christianalfoni

packages/app/src/app/components/CodeEditor/VSCode/index.tsx

@@ -2,7 +2,6 @@ import getTemplate from '@codesandbox/common/lib/templates';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import theme from '@codesandbox/common/lib/theme';
 import { useOvermind } from 'app/overmind';
-import { json } from 'overmind';
 import React, { useEffect, useRef } from 'react';
 import { render } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
@@ -55,8 +54,6 @@ export const VSCode: React.FunctionComponent = () => {
         .className.split(' ')
         .filter(x => !['monaco-shell', 'vs-dark'].includes(x))
         .join(' ');
-
-      effects.vscode.unmount();
     };
   }, [effects.vscode, state.editor.currentSandbox.template]);
 

packages/app/src/app/components/CodeEditor/index.tsx

@@ -1,61 +1,14 @@
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
+import getDefinition from '@codesandbox/common/lib/templates';
+import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import React from 'react';
-import UIIcon from 'react-icons/lib/md/dvr';
 import QuestionIcon from 'react-icons/lib/go/question';
-import getUI from '@codesandbox/common/lib/templates/configuration/ui';
-import Centered from '@codesandbox/common/lib/components/flex/Centered';
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import isImage from '@codesandbox/common/lib/utils/is-image';
-import getDefinition from '@codesandbox/common/lib/templates';
-import { Sandbox } from '@codesandbox/common/lib/types';
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import { Title } from 'app/components/Title';
-import { SubTitle } from 'app/components/SubTitle';
-import Loadable from 'app/utils/Loadable';
-import { ImageViewer } from './ImageViewer';
-import { Configuration } from './Configuration';
-import { VSCode } from './VSCode';
-import MonacoDiff from './MonacoDiff';
-import { Props } from './types'; // eslint-disable-line
-import { Icons, Icon } from './elements';
-
-const CodeMirror = Loadable(() =>
-  import(/* webpackChunkName: 'codemirror-editor' */ './CodeMirror')
-);
-
-const Monaco = Loadable(() =>
-  import(/* webpackChunkName: 'codemirror-editor' */ './Monaco')
-);
-
-const getDependencies = (sandbox: Sandbox): { [key: string]: string } => {
-  const packageJSON = sandbox.modules.find(
-    m => m.title === 'package.json' && m.directoryShortid == null
-  );
-
-  if (packageJSON != null) {
-    try {
-      const { dependencies = {}, devDependencies = {} } = JSON.parse(
-        packageJSON.code || ''
-      );
-
-      const usedDevDependencies = {};
-      Object.keys(devDependencies).forEach(d => {
-        if (d.startsWith('@types')) {
-          usedDevDependencies[d] = devDependencies[d];
-        }
-      });
+import UIIcon from 'react-icons/lib/md/dvr';
 
-      return { ...dependencies, ...usedDevDependencies };
-    } catch (e) {
-      console.error(e);
-      return null;
-    }
-  } else {
-    return typeof sandbox.npmDependencies.toJS === 'function'
-      ? (sandbox.npmDependencies as any).toJS()
-      : sandbox.npmDependencies;
-  }
-};
+import { Icon, Icons } from './elements';
+import { Props } from './types'; // eslint-disable-line
+import { VSCode } from './VSCode';
 
 type State = {
   showConfigUI: boolean;
@@ -79,38 +32,7 @@ export class CodeEditor extends React.PureComponent<
   render() {
     const { props } = this;
 
-    const {
-      isModuleSynced,
-      currentTab,
-      sandbox,
-      currentModule: module,
-      settings,
-    } = props;
-
-    if (currentTab && currentTab.type === 'DIFF') {
-      return (
-        <div
-          style={{
-            height: props.height || '100%',
-            width: props.width || '100%',
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        >
-          <MonacoDiff
-            originalCode={currentTab.codeA}
-            modifiedCode={currentTab.codeB}
-            title={currentTab.fileTitle}
-            {...props}
-          />
-        </div>
-      );
-    }
-
-    const dependencies = getDependencies(sandbox);
+    const { isModuleSynced, sandbox, currentModule: module, settings } = props;
 
     const template = getDefinition(sandbox.template);
     const modulePath = getModulePath(
@@ -120,57 +42,6 @@ export class CodeEditor extends React.PureComponent<
     );
     const config = template.configurationFiles[modulePath];
 
-    if (
-      !settings.experimentVSCode &&
-      config &&
-      getUI(config.type) &&
-      this.state.showConfigUI
-    ) {
-      return (
-        <Configuration
-          {...props}
-          dependencies={dependencies}
-          config={config}
-          toggleConfigUI={this.toggleConfigUI}
-        />
-      );
-    }
-
-    if (!settings.experimentVSCode && module.isBinary) {
-      if (isImage(module.title)) {
-        return <ImageViewer {...props} dependencies={dependencies} />;
-      }
-
-      return (
-        <Margin
-          style={{
-            overflow: 'auto',
-            height: props.height || '100%',
-            width: props.width || '100%',
-          }}
-          top={2}
-        >
-          <Centered horizontal vertical>
-            <Title>This file is too big to edit</Title>
-            <SubTitle>
-              We will add support for this as soon as possible.
-            </SubTitle>
-
-            <a href={module.code} target="_blank" rel="noreferrer noopener">
-              Open file externally
-            </a>
-          </Centered>
-        </Margin>
-      );
-    }
-
-    let Editor: React.ComponentClass<Props> =
-      settings.codeMirror && !props.isLive ? CodeMirror : Monaco;
-
-    if (settings.experimentVSCode) {
-      Editor = VSCode;
-    }
-
     return (
       <div
         style={{
@@ -218,7 +89,7 @@ export class CodeEditor extends React.PureComponent<
               )}
             </Icons>
           ))}
-        <Editor {...props} dependencies={dependencies} />
+        <VSCode />
       </div>
     );
   }