React DevTools (codesandbox#2252)

* add syubmodule

* add tab

* make work

* deletre submodule

* add sandbox

* clean up file

* clean up elements

* remove console

* Update yarn.lock

* Add hidden state

* Make name for react devtools more specific

* Rename React Devtools to ⚛️ Components

* Use useState for current devtools

* Use new batched React render

* Remove second argument from root.render

* change color of devtools according to theme

* Retry new react dom render

* Update react to rc

* Open file in CodeSandbox

* Fix view source for React template

* bump to [email protected]

* fix yarn integrety

* only show devtools in react

* Remove debug code

* Upgrade devtools

* Fix types

* Move existing implementations to new helper function

* Fix missing rename

Author: SaraVieira

packages/app/package.json

@@ -187,7 +187,7 @@
     "http-browserify": "^1.7.0",
     "https-browserify": "^1.0.0",
     "humps": "CompuIves/humps",
-    "immer": "^0.8.5",
+    "immer": "^3.2.0",
     "immutability-helper": "^2.6.6",
     "instantsearch.css": "^7.1.0",
     "is-url": "^1.2.2",
@@ -227,17 +227,19 @@
     "qs": "^6.5.0",
     "querystring": "^0.2.0",
     "rc-slider": "^8.2.0",
-    "react": "^16.8.6",
+    "react": "^16.9.0",
     "react-addons-css-transition-group": "^15.6.0",
     "react-apollo": "^2.5.6",
     "react-color": "^2.17.3",
     "react-day-picker": "^7.2.4",
+    "react-devtools-inline": "^4.0.0",
     "react-dnd": "^7.0.2",
     "react-dnd-html5-backend": "^2.4.1",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.9.0",
     "react-draggable": "^3.0.5",
     "react-error-overlay": "^1.0.10",
     "react-icons": "^2.2.7",
+    "react-input-autosize": "^2.2.1",
     "react-inspector": "^2.2.0",
     "react-instantsearch": "^5.3.2",
     "react-loadable": "^3.3.1",

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

@@ -236,9 +236,8 @@ class MonacoEditor extends React.Component<Props> implements Editor {
       },
     ]);
 
-  setupCodeSandboxAPIListener() {
-    // @ts-ignore
-    return listen(({ action, type, code, path, lineNumber, column }) => {
+  setupCodeSandboxAPIListener = () =>
+    listen(({ action, type, code, path, lineNumber, column }: any) => {
       if (type === 'add-extra-lib') {
         // TODO: bring this func back
         // const dtsPath = `${path}.d.ts`;
@@ -254,17 +253,18 @@ class MonacoEditor extends React.Component<Props> implements Editor {
         if (lineNumber || column) {
           options.selection = {
             startLineNumber: lineNumber,
-            startColumn: column,
+            startColumn: column || 0,
           };
         }
 
-        this.editor.codeEditorService.openCodeEditor({
-          resource: this.monaco.Uri.file('/sandbox' + path),
-          options,
-        });
+        if (this.editor) {
+          this.editor.codeEditorService.openCodeEditor({
+            resource: this.monaco.Uri.file('/sandbox' + path),
+            options,
+          });
+        }
       }
     });
-  }
 
   modelListeners: {
     [path: string]: {
@@ -933,7 +933,9 @@ class MonacoEditor extends React.Component<Props> implements Editor {
       ),
       options: {
         inlineClassName: classification.type
-          ? `${classification.kind} ${classification.type}-of-${classification.parentKind}`
+          ? `${classification.kind} ${classification.type}-of-${
+              classification.parentKind
+            }`
           : classification.kind,
       },
     }));

packages/app/src/app/components/Preview/DevTools/React-Devtools/elements.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: ${props =>
+    props.theme['panel.background'] || props.theme.background2};
+  width: 100%;
+  height: 100%;
+  color: ${props =>
+    props.theme['editor.foreground'] || 'rgba(255, 255, 255, 0.8)'};
+`;

packages/app/src/app/components/Preview/DevTools/React-Devtools/index.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { initialize } from 'react-devtools-inline/frontend';
+import { dispatch, actions } from 'codesandbox-api';
+import { ThemeContext } from 'styled-components';
+
+import { Container } from './elements';
+import { DevToolProps } from '..';
+
+const DevTools = (props: DevToolProps) => {
+  const [ReactDevTools, setDevTools] = useState(null);
+  const theme = useContext(ThemeContext);
+
+  useEffect(() => {
+    const iframe = document.getElementById(
+      'sandbox-preview'
+    ) as HTMLIFrameElement;
+    const contentWindow = iframe.contentWindow;
+
+    setDevTools(initialize(contentWindow));
+    iframe.onload = () => {
+      contentWindow.postMessage(
+        {
+          type: 'activate',
+        },
+        '*'
+      );
+    };
+  }, []);
+
+  if (props.hidden) {
+    return null;
+  }
+
+  const browserTheme = theme.light ? 'light' : 'dark';
+
+  function viewElementSourceFunction(id: string, data: any) {
+    const { source } = data;
+
+    if (source) {
+      dispatch(actions.editor.openModule(source.fileName, source.lineNumber));
+    }
+  }
+
+  return (
+    <Container>
+      {ReactDevTools && (
+        <ReactDevTools
+          viewElementSourceFunction={viewElementSourceFunction}
+          browserTheme={browserTheme}
+        />
+      )}
+    </Container>
+  );
+};
+
+export default {
+  id: 'codesandbox.react-devtools',
+  title: 'React DevTools',
+  Content: DevTools,
+  actions: [],
+};

packages/app/src/app/components/Preview/DevTools/index.tsx

@@ -9,6 +9,7 @@ import { ViewConfig } from '@codesandbox/common/lib/templates/template';
 import console from './Console';
 import Tabs, { ITabPosition } from './Tabs';
 import problems from './Problems';
+import reactDevTools from './React-Devtools';
 import terminal from './Terminal';
 import tests from './Tests';
 import { Container, Header, ContentContainer } from './elements';
@@ -77,6 +78,7 @@ const VIEWS: IViews = {
   [problems.id]: problems,
   [tests.id]: tests,
   [terminal.id]: terminal,
+  [reactDevTools.id]: reactDevTools,
 };
 
 type Props = {

packages/app/src/app/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { unstable_createSyncRoot as createSyncRoot } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
 import { Router } from 'react-router-dom';
 import { ApolloProvider } from 'react-apollo';
@@ -120,7 +120,8 @@ async function boot(state, signals, overmind) {
     });
 
     try {
-      render(
+      const root = createSyncRoot(rootEl);
+      root.render(
         <Signals.Provider value={signals}>
           <Store.Provider value={state}>
             <Provider store={state} signals={signals}>
@@ -137,8 +138,7 @@ async function boot(state, signals, overmind) {
               </ApolloProvider>
             </Provider>
           </Store.Provider>
-        </Signals.Provider>,
-        rootEl
+        </Signals.Provider>
       );
     } catch (e) {
       logError(e);

packages/app/src/app/overmind/internalActions.ts

@@ -12,7 +12,7 @@ import {
 } from '@codesandbox/common/lib/types';
 import { NotificationStatus } from '@codesandbox/notifications/lib/state';
 import { generateFileFromSandbox as generatePackageJsonFromSandbox } from '@codesandbox/common/lib/templates/configuration/package-json';
-import { parseConfigurations } from './utils/parse-configurations';
+import { parseSandboxConfigurations } from '@codesandbox/common/lib/templates/configuration/parse-sandbox-configurations';
 import { defaultOpenedModule, mainModule } from './utils/main-module';
 import getItems from './utils/items';
 import { createOptimisticModule } from './utils/common';
@@ -146,7 +146,7 @@ export const setCurrentSandbox: Action<Sandbox> = (
   state.editor.currentId = sandbox.id;
 
   let currentModuleShortid = state.editor.currentModuleShortid;
-  const parsedConfigs = parseConfigurations(sandbox);
+  const parsedConfigs = parseSandboxConfigurations(sandbox);
   const main = mainModule(sandbox, parsedConfigs);
 
   state.editor.mainModuleShortid = main.shortid;

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -11,7 +11,7 @@ import {
 } from '@codesandbox/common/lib/types';
 import { generateFileFromSandbox } from '@codesandbox/common/lib/templates/configuration/package-json';
 import { dirname } from 'path';
-import { parseConfigurations } from '../../utils/parse-configurations';
+import { parseSandboxConfigurations } from '@codesandbox/common/lib/templates/configuration/parse-sandbox-configurations';
 import {
   getModulePath,
   getDirectoryPath,
@@ -190,7 +190,7 @@ export const state: State = {
     const state: State = this;
 
     return state.currentSandbox
-      ? parseConfigurations(state.currentSandbox)
+      ? parseSandboxConfigurations(state.currentSandbox)
       : null;
   },
   get mainModule() {

packages/app/src/app/overmind/namespaces/files/internalActions.ts

@@ -49,7 +49,9 @@ export const recoverFiles: Action = ({ effects, actions, state }) => {
     });
 
     effects.notificationToast.add({
-      message: `We recovered ${recoveredList.length} unsaved files from a previous session`,
+      message: `We recovered ${
+        recoveredList.length
+      } unsaved files from a previous session`,
       status: NotificationStatus.NOTICE,
     });
   }

packages/app/src/app/overmind/namespaces/git/actions.ts

@@ -101,7 +101,9 @@ export const createPrClicked: AsyncAction = async ({ state, effects }) => {
 
   const user = state.user;
   const git = state.editor.currentSandbox.originalGit;
-  const url = `https://github.com/${git.username}/${git.repo}/compare/${git.branch}...${user.username}:${pr.newBranch}?expand=1`;
+  const url = `https://github.com/${git.username}/${git.repo}/compare/${
+    git.branch
+  }...${user.username}:${pr.newBranch}?expand=1`;
 
   state.git.pr.prURL = url;