Skip to content

Commit bc611a4

Browse files
christianalfonichristianalfoni
committed
moved instantiation of vscode to effect, written components, reviewed
1 parent 890136e commit bc611a4

File tree

31 files changed

+337
-301
lines changed

31 files changed

+337
-301
lines changed

‎packages/app/src/app/components/CodeEditor/Monaco/MonacoReactComponent.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react';
21
import FontFaceObserver from 'fontfaceobserver';
2+
import React from 'react';
33

44
function noop() {}
55

@@ -35,9 +35,10 @@ class MonacoEditor extends React.PureComponent {
3535
}
3636

3737
// eslint-disable-next-line global-require
38-
require('app/vscode/dev-bootstrap').default(false, [
39-
'vs/editor/editor.main',
40-
])(() => {
38+
require('app/overmind/effects/vscode/manager/dev-bootstrap').default(
39+
false,
40+
['vs/editor/editor.main']
41+
)(() => {
4142
this.initMonaco();
4243
});
4344
};

‎packages/app/src/app/components/CodeEditor/VSCode/MonacoReactComponent.js‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
1-
import React from 'react';
2-
import FontFaceObserver from 'fontfaceobserver';
3-
import { vscode } from 'app/vscode';
4-
51
import './icon-theme.css';
62
import './workbench-theme.css';
73

4+
import { manager } from 'app/overmind/effects/vscode/manager';
5+
import FontFaceObserver from 'fontfaceobserver';
6+
import React from 'react';
7+
88
// import { setSocketURL } from 'node-services/lib/net';
99

1010
function noop() {}
1111

12-
export type EditorAPI = {
13-
openFile(path: string): any,
14-
getActiveCodeEditor(): any,
15-
editorPart: any,
16-
textFileService: any,
17-
editorService: any,
18-
};
19-
2012
const fontPromise = new FontFaceObserver('dm').load().catch(() => {});
2113

2214
let editorPart;
@@ -45,16 +37,12 @@ class MonacoEditor extends React.PureComponent {
4537
};
4638

4739
afterViewInit = () => {
48-
// setSocketURL(`wss://${this.props.id}.sse.codesandbox.stream/cs-sse-ext`);
49-
// setSocketURL(`ws://localhost:7070`);
50-
51-
// eslint-disable-next-line global-require
52-
5340
this.initMonaco();
5441
};
5542

5643
initMonaco = () => {
5744
const context = this.props.context || window;
45+
5846
if (this.containerElement && typeof context.monaco !== 'undefined') {
5947
// Before initializing monaco editor
6048
this.editorWillMount(context.monaco);
@@ -87,12 +75,16 @@ class MonacoEditor extends React.PureComponent {
8775

8876
const container = document.createElement('div');
8977
const part = document.createElement('div');
78+
79+
part.id = 'vscode-editor';
80+
part.className = 'part editor has-watermark';
81+
9082
container.appendChild(part);
9183

9284
const rootEl = document.getElementById('vscode-container');
9385
rootEl.appendChild(container);
9486

95-
vscode.initializeEditor(
87+
manager.initializeEditor(
9688
container,
9789
this.props.customEditorAPI,
9890
services => {
@@ -101,8 +93,7 @@ class MonacoEditor extends React.PureComponent {
10193
);
10294

10395
container.className = 'monaco-workbench';
104-
part.id = 'vscode-editor';
105-
part.className = 'part editor has-watermark';
96+
10697
editorElement.className += ' monaco-workbench mac nopanel';
10798

10899
const instantiationService = services.get(IInstantiationService);
@@ -148,7 +139,7 @@ class MonacoEditor extends React.PureComponent {
148139
}
149140

150141
const editorApi = {
151-
openFile(path: string) {
142+
openFile(path) {
152143
fontPromise.then(() => {
153144
codeEditorService.openCodeEditor({
154145
resource: context.monaco.Uri.file('/sandbox' + path),

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8]
2929
/* eslint-enable import/no-webpack-loader-syntax */
3030
import { clone } from 'app/componentConnectors';
3131
import eventToTransform from '../Monaco/event-to-transform';
32-
import MonacoEditorComponent, { EditorAPI } from './MonacoReactComponent';
32+
import MonacoEditorComponent from './MonacoReactComponent';
3333
import { Container, GlobalStyles } from './elements';
3434
import getSettings from '../Monaco/settings';
3535

@@ -357,7 +357,7 @@ export class VSCode extends React.Component<Props> implements Editor {
357357
});
358358
};
359359

360-
configureEditor = async (editor: EditorAPI, monaco: any) => {
360+
configureEditor = async (editor: any, monaco: any) => {
361361
this.editor = editor;
362362
this.monaco = monaco;
363363

@@ -1166,7 +1166,6 @@ export class VSCode extends React.Component<Props> implements Editor {
11661166

11671167
render() {
11681168
const { width, height } = this.props;
1169-
11701169
const options = this.getEditorOptions();
11711170

11721171
return (

‎packages/app/src/app/index.js‎

Lines changed: 46 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,36 @@
1-
import React from 'react';
2-
import { render } from 'react-dom';
3-
import { ThemeProvider } from 'styled-components';
4-
import { Router } from 'react-router-dom';
5-
import { ApolloProvider } from 'react-apollo';
1+
import '@codesandbox/common/lib/global.css';
2+
import 'normalize.css';
3+
4+
import './split-pane.css';
5+
66
import { ApolloProvider as HooksProvider } from '@apollo/react-hooks';
7-
import _debug from '@codesandbox/common/lib/utils/debug';
8-
import { createOvermind } from 'overmind';
7+
import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
8+
import registerServiceWorker from '@codesandbox/common/lib/registerServiceWorker';
9+
import theme from '@codesandbox/common/lib/theme';
910
import {
1011
initializeSentry,
1112
logError,
1213
} from '@codesandbox/common/lib/utils/analytics';
13-
import '@codesandbox/common/lib/global.css';
14-
import history from 'app/utils/history';
15-
import { client } from 'app/graphql/client';
16-
import registerServiceWorker from '@codesandbox/common/lib/registerServiceWorker';
17-
import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
14+
import _debug from '@codesandbox/common/lib/utils/debug';
1815
import {
19-
notificationState,
2016
convertTypeToStatus,
17+
notificationState,
2118
} from '@codesandbox/common/lib/utils/notifications';
22-
import { NotificationStatus } from '@codesandbox/notifications';
23-
import 'normalize.css';
24-
import theme from '@codesandbox/common/lib/theme';
2519
import { isSafari } from '@codesandbox/common/lib/utils/platform';
26-
27-
// eslint-disable-next-line
28-
import * as childProcess from 'node-services/lib/child_process';
20+
import { NotificationStatus } from '@codesandbox/notifications';
21+
import { client } from 'app/graphql/client';
22+
import history from 'app/utils/history';
23+
import { createOvermind } from 'overmind';
2924
import { Provider as ActualOvermindProvider } from 'overmind-react';
30-
import { Routes as App } from './pages';
31-
import { Provider as OvermindProvider } from './overmind/Provider';
25+
import React from 'react';
26+
import { ApolloProvider } from 'react-apollo';
27+
import { render } from 'react-dom';
28+
import { Router } from 'react-router-dom';
29+
import { ThemeProvider } from 'styled-components';
30+
3231
import { config } from './overmind';
33-
import './split-pane.css';
34-
import { getTypeFetcher } from './vscode/extensionHostWorker/common/type-downloader';
35-
import { vscode } from './vscode';
36-
import {
37-
initializeThemeCache,
38-
initializeSettings,
39-
initializeExtensionsFolder,
40-
initializeCustomTheme,
41-
setVimExtensionEnabled,
42-
} from './vscode/initializers';
43-
import { EXTENSIONS_LOCATION } from './vscode/constants';
32+
import { Provider as OvermindProvider } from './overmind/Provider';
33+
import { Routes as App } from './pages';
4434

4535
const debug = _debug('cs:app');
4636

@@ -66,10 +56,29 @@ if (process.env.NODE_ENV === 'production') {
6656

6757
window.__isTouch = !matchMedia('(pointer:fine)').matches;
6858

69-
let getState;
70-
let getSignal;
59+
const overmind = createOvermind(config, {
60+
devtools:
61+
(window.opener && window.opener !== window) || !window.chrome
62+
? false
63+
: 'localhost:3031',
64+
name:
65+
'CodeSandbox - ' +
66+
(navigator.userAgent.indexOf('Chrome/76') > 0 ? 'Chrome' : 'Canary'),
67+
logProxies: true,
68+
});
7169

72-
async function boot(overmind) {
70+
/*
71+
Temporary global functions to grab state and actions, related to old
72+
Cerebral implementation
73+
*/
74+
window.getState = path =>
75+
path
76+
? path.split('.').reduce((aggr, key) => aggr[key], overmind.state)
77+
: overmind.state;
78+
window.getSignal = path =>
79+
path.split('.').reduce((aggr, key) => aggr[key], overmind.actions);
80+
81+
overmind.initialized.then(() => {
7382
requirePolyfills().then(() => {
7483
if (isSafari) {
7584
import('subworkers');
@@ -89,7 +98,7 @@ async function boot(overmind) {
8998
registerServiceWorker('/service-worker.js', {
9099
onUpdated: () => {
91100
debug('Updated SW');
92-
getSignal('setUpdateStatus')({ status: 'available' });
101+
window.getSignal('setUpdateStatus')({ status: 'available' });
93102

94103
notificationState.addNotification({
95104
title: 'CodeSandbox Update Available',
@@ -138,135 +147,4 @@ async function boot(overmind) {
138147
logError(e);
139148
}
140149
});
141-
}
142-
143-
async function initialize() {
144-
/*
145-
Configure Cerebral and Overmind
146-
*/
147-
148-
const overmind = createOvermind(config, {
149-
devtools:
150-
(window.opener && window.opener !== window) || !window.chrome
151-
? false
152-
: 'localhost:3031',
153-
name:
154-
'CodeSandbox - ' +
155-
(navigator.userAgent.indexOf('Chrome/76') > 0 ? 'Chrome' : 'Canary'),
156-
logProxies: true,
157-
});
158-
159-
getState = path =>
160-
path
161-
? path.split('.').reduce((aggr, key) => aggr[key], overmind.state)
162-
: overmind.state;
163-
getSignal = path =>
164-
path.split('.').reduce((aggr, key) => aggr[key], overmind.actions);
165-
166-
window.getState = getState;
167-
window.getSignal = getSignal;
168-
169-
// Configures BrowserFS to use the LocalStorage file system.
170-
window.BrowserFS.configure(
171-
{
172-
fs: 'MountableFileSystem',
173-
options: {
174-
'/': { fs: 'InMemory', options: {} },
175-
'/sandbox': {
176-
fs: 'CodeSandboxEditorFS',
177-
options: {
178-
api: {
179-
getState: () => ({
180-
modulesByPath: getState().editor.currentSandbox
181-
? getState().editor.modulesByPath
182-
: {},
183-
}),
184-
},
185-
},
186-
},
187-
'/sandbox/node_modules': {
188-
fs: 'CodeSandboxFS',
189-
options: getTypeFetcher().options,
190-
},
191-
'/vscode': {
192-
fs: 'LocalStorage',
193-
},
194-
'/home': {
195-
fs: 'LocalStorage',
196-
},
197-
'/extensions': {
198-
fs: 'BundledHTTPRequest',
199-
options: {
200-
index: EXTENSIONS_LOCATION + '/extensions/index.json',
201-
baseUrl: EXTENSIONS_LOCATION + '/extensions',
202-
bundle: EXTENSIONS_LOCATION + '/bundles/main.min.json',
203-
logReads: process.env.NODE_ENV === 'development',
204-
},
205-
},
206-
'/extensions/custom-theme': {
207-
fs: 'InMemory',
208-
},
209-
},
210-
},
211-
async e => {
212-
if (e) {
213-
console.error('Problems initializing FS', e);
214-
// An error happened!
215-
throw e;
216-
}
217-
218-
const isVSCode = getState().preferences.settings.experimentVSCode;
219-
220-
if (isVSCode) {
221-
// For first-timers initialize a theme in the cache so it doesn't jump colors
222-
initializeExtensionsFolder();
223-
initializeCustomTheme();
224-
initializeThemeCache();
225-
initializeSettings();
226-
setVimExtensionEnabled(
227-
localStorage.getItem('settings.vimmode') === 'true'
228-
);
229-
}
230-
231-
// eslint-disable-next-line global-require
232-
vscode.loadScript(
233-
[
234-
isVSCode
235-
? 'vs/editor/codesandbox.editor.main'
236-
: 'vs/editor/editor.main',
237-
],
238-
isVSCode,
239-
() => {
240-
if (process.env.NODE_ENV === 'development') {
241-
console.log('Loaded Monaco'); // eslint-disable-line
242-
}
243-
if (isVSCode) {
244-
vscode.acquireController({
245-
getSignal,
246-
getState,
247-
});
248-
249-
import(
250-
'worker-loader?publicPath=/&name=ext-host-worker.[hash:8].worker.js!./vscode/extensionHostWorker/bootstrappers/ext-host'
251-
).then(ExtHostWorkerLoader => {
252-
childProcess.addDefaultForkHandler(ExtHostWorkerLoader.default);
253-
// child_process.preloadWorker('/vs/bootstrap-fork');
254-
});
255-
256-
// import('worker-loader?publicPath=/&name=ext-host-worker.[hash:8].worker.js!./vscode/extensionHostWorker/services/searchService').then(
257-
// SearchServiceWorker => {
258-
// child_process.addForkHandler(
259-
// 'csb:search-service',
260-
// SearchServiceWorker.default
261-
// );
262-
// }
263-
// );
264-
}
265-
boot(overmind);
266-
}
267-
);
268-
}
269-
);
270-
}
271-
272-
initialize();
150+
});

0 commit comments

Comments
 (0)