Overmind refactor: Round 2 (codesandbox#2137)

* refactored sandboxPageMounted with related stuff

* a lot of refactoring

* more refactoring

* jup, more refactor

* profile refactored

* update overmind

* refactored zeit, netlify, dashboard and deployment

* so much refactoring...

* refactored files namespace

* refactored git namespace

* refactored live some more

* final refactoring before testing

* hooking into components

* revert hooks to old API to support state transition

* overmind needs observer, does not work only with inject

* move hoc

* fix types and Observer

* fix last types

* fix linting issues

* remove old ot file and typecheck overmind as well

* Apply suggestions from code review

Co-Authored-By: Michaël De Boey <[email protected]>

* fix getState for VSCode

Author: christianalfoni

package.json

@@ -82,11 +82,11 @@
     "lerna": "^2.5.1",
     "prettier": "1.17.0",
     "pretty-quick": "^1.10.0",
-    "typescript": "3.5.2"
+    "typescript": "3.5.3"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^1.9.0",
-    "@typescript-eslint/parser": "^1.9.0",
+    "@typescript-eslint/eslint-plugin": "^1.13.0",
+    "@typescript-eslint/parser": "^1.13.0",
     "opencollective": "^1.0.3"
   },
   "collective": {

packages/app/config/babel.dev.js

@@ -22,9 +22,8 @@ module.exports = {
       },
     ],
     // JSX, Flow
-    require.resolve('@babel/preset-react'),
-
     require.resolve('@babel/preset-typescript'),
+    require.resolve('@babel/preset-react'),
   ].filter(Boolean),
   plugins: [
     require.resolve('@babel/plugin-transform-template-literals'),

packages/app/package.json

@@ -273,7 +273,7 @@
     "shortid": "^2.2.8",
     "store": "^2.0.12",
     "string-replace-loader": "^2.1.1",
-    "styled-components": "^4.2.0",
+    "styled-components": "^4.3.2",
     "subworkers": "^1.0.1",
     "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0",

packages/app/src/app/componentConnectors.ts

@@ -0,0 +1,25 @@
+import { inject as mobxInject, observer as mobxObserver } from 'mobx-react';
+import { observer as mobxHooksObserver } from 'mobx-react-lite';
+import { connect } from './overmind';
+
+const isOvermind = location.search.includes('overmind=true');
+
+export const inject: any = isOvermind
+  ? () => component => component
+  : mobxInject;
+
+export const observer: any = isOvermind ? connect : mobxObserver;
+
+export const hooksObserver: any = isOvermind ? connect : mobxHooksObserver;
+
+export const Observer = isOvermind
+  ? inject('store', 'signals')(
+      connect(({ store, signals, children }: any) =>
+        children({ store, signals })
+      )
+    )
+  : inject('store', 'signals')(
+      observer(({ store, signals, children }: any) =>
+        children({ store, signals })
+      )
+    );

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

@@ -3,46 +3,11 @@ import {
   Sandbox,
   ModuleError,
   ModuleCorrection,
+  Settings,
+  ModuleTab,
+  DiffTab,
 } from '@codesandbox/common/lib/types';
 
-export type Settings = {
-  autoCompleteEnabled: boolean;
-  autoDownloadTypes: boolean;
-  codeMirror: boolean;
-  clearConsoleEnabled: boolean;
-  fontFamily?: string;
-  fontSize: number;
-  lineHeight: number;
-  lintEnabled: boolean;
-  vimMode: boolean;
-  tabWidth: number;
-  enableLigatures: boolean;
-  forceRefresh: boolean;
-  experimentVSCode: boolean;
-  prettierConfig: Object;
-  zenMode: boolean;
-  livePreviewEnabled: boolean;
-  instantPreviewEnabled: boolean;
-};
-
-type ModuleTab = {
-  type: 'MODULE';
-  moduleShortid: string;
-  dirty: boolean;
-};
-
-type DiffTab = {
-  id: string;
-  type: 'DIFF';
-  codeA: string;
-  codeB: string;
-  titleA: string;
-  titleB: string;
-  fileTitle?: string;
-};
-
-export type Tab = ModuleTab | DiffTab;
-
 export interface Editor {
   changeSandbox?: (
     sandbox: Sandbox,
@@ -72,7 +37,7 @@ export interface Editor {
 
 export type Props = {
   currentModule: Module;
-  currentTab?: Tab;
+  currentTab?: ModuleTab | DiffTab;
   sandbox: Sandbox;
   isModuleSynced: (shortid: string) => boolean;
   customEditorAPI?: {

packages/app/src/app/components/Overlay/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'app/componentConnectors';
 
 import { Transition, animated, config } from 'react-spring/renderprops';
 import track from '@codesandbox/common/lib/utils/analytics';