running step 2 of refactor

Author: christianalfoni

packages/app/package.json

@@ -150,9 +150,9 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^19.3.0-1569928101550",
+    "overmind": "^20.0.0-1570104917847",
     "overmind-devtools": "^19.0.0",
-    "overmind-react": "^20.3.0-1569928101550",
+    "overmind-react": "^21.0.0-1570104917847",
     "phoenix": "^1.3.0",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",

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

@@ -1,47 +1,43 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { ThemeProvider } from 'styled-components';
-import { TextOperation } from 'ot';
-import { debounce } from 'lodash-es';
+import DEFAULT_PRETTIER_CONFIG from '@codesandbox/common/lib/prettify-default-config';
 import {
   getModulePath,
   resolveModule,
 } from '@codesandbox/common/lib/sandbox/modules';
-import { listen, actions, dispatch } from 'codesandbox-api';
-
-import prettify from 'app/src/app/utils/prettify';
-import DEFAULT_PRETTIER_CONFIG from '@codesandbox/common/lib/prettify-default-config';
-import getUI from '@codesandbox/common/lib/templates/configuration/ui';
-
 import getTemplate from '@codesandbox/common/lib/templates';
+import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import theme from '@codesandbox/common/lib/theme';
 import {
   Module,
-  Sandbox,
-  ModuleError,
   ModuleCorrection,
+  ModuleError,
+  Sandbox,
 } from '@codesandbox/common/lib/types';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
-
+/* eslint-enable import/no-webpack-loader-syntax */
+import { clone } from 'app/componentConnectors';
+import prettify from 'app/src/app/utils/prettify';
+import { actions, dispatch, listen } from 'codesandbox-api';
+import { debounce } from 'lodash-es';
+import { TextOperation } from 'ot';
+import React from 'react';
+import { render } from 'react-dom';
+import { ThemeProvider } from 'styled-components';
 /* eslint-disable import/no-webpack-loader-syntax */
 // @ts-ignore
 import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8].worker.js!../Monaco/workers/linter';
-/* eslint-enable import/no-webpack-loader-syntax */
-import { clone } from 'app/componentConnectors';
-import eventToTransform from '../Monaco/event-to-transform';
-import MonacoEditorComponent from './MonacoReactComponent';
-import { Container, GlobalStyles } from './elements';
-import getSettings from '../Monaco/settings';
 
-import { Props, Editor } from '../types'; // eslint-disable-line
+import eventToTransform from '../Monaco/event-to-transform';
+import { updateUserSelections } from '../Monaco/live-decorations';
 import getMode from '../Monaco/mode';
-
 import {
-  lineAndColumnToIndex,
   indexToLineAndColumn,
+  lineAndColumnToIndex,
 } from '../Monaco/monaco-index-converter';
-import { updateUserSelections } from '../Monaco/live-decorations';
+import getSettings from '../Monaco/settings';
+import { Editor, Props } from '../types'; // eslint-disable-line
 import { Configuration } from './Configuration';
+import { Container, GlobalStyles } from './elements';
+import MonacoEditorComponent from './MonacoReactComponent';
 
 function getSelection(lines, selection) {
   const startSelection = lineAndColumnToIndex(

packages/app/src/app/components/CodeEditor/types.ts

@@ -1,11 +1,11 @@
 import {
+  DiffTab,
   Module,
-  Sandbox,
-  ModuleError,
   ModuleCorrection,
-  Settings,
+  ModuleError,
   ModuleTab,
-  DiffTab,
+  Sandbox,
+  Settings,
 } from '@codesandbox/common/lib/types';
 
 export interface Editor {
@@ -51,8 +51,8 @@ export type Props = {
   onNpmDependencyAdded?: (name: string) => void;
   onSave?: (code: string) => void;
   settings: Settings;
-  height?: string;
-  width?: string;
+  height?: number;
+  width?: number;
   hideNavigation?: boolean;
   dependencies?: { [name: string]: string };
   highlightedLines?: Array<number>;

packages/app/src/app/overmind/effects/fsSync.ts

@@ -3,6 +3,9 @@ import { getGlobal } from '@codesandbox/common/lib/utils/global';
 import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
 import { json } from 'overmind';
 
+import { EXTENSIONS_LOCATION } from './vscode/manager/constants';
+import { getTypeFetcher } from './vscode/manager/extensionHostWorker/common/type-downloader';
+
 const global = getGlobal() as Window & { BrowserFS: any };
 
 const fs = global.BrowserFS.BFSRequire('fs');
@@ -155,5 +158,57 @@ export default {
     });
 
     options.onModulesByPathChange(sendFiles);
+
+    return new Promise((resolve, reject) => {
+      window.BrowserFS.configure(
+        {
+          fs: 'MountableFileSystem',
+          options: {
+            '/': { fs: 'InMemory', options: {} },
+            '/sandbox': {
+              fs: 'CodeSandboxEditorFS',
+              options: {
+                api: {
+                  getState: () => ({
+                    modulesByPath: window.getState().editor.currentSandbox
+                      ? window.getState().editor.modulesByPath
+                      : {},
+                  }),
+                },
+              },
+            },
+            '/sandbox/node_modules': {
+              fs: 'CodeSandboxFS',
+              options: getTypeFetcher().options,
+            },
+            '/vscode': {
+              fs: 'LocalStorage',
+            },
+            '/home': {
+              fs: 'LocalStorage',
+            },
+            '/extensions': {
+              fs: 'BundledHTTPRequest',
+              options: {
+                index: EXTENSIONS_LOCATION + '/extensions/index.json',
+                baseUrl: EXTENSIONS_LOCATION + '/extensions',
+                bundle: EXTENSIONS_LOCATION + '/bundles/main.min.json',
+                logReads: process.env.NODE_ENV === 'development',
+              },
+            },
+            '/extensions/custom-theme': {
+              fs: 'InMemory',
+            },
+          },
+        },
+        async e => {
+          if (e) {
+            reject(e);
+          } else {
+            resolve();
+          }
+        }
+      );
+    });
   },
 };