Skip to content

Commit 782d7e2

Browse files
author
Ives van Hoorne
committed
Update
1 parent 0a39321 commit 782d7e2

File tree

14 files changed

+827
-300
lines changed

14 files changed

+827
-300
lines changed

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
static/
22
package.json
3+
standalone-packages/vscode

‎packages/app/config/env.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,6 @@ module.exports = Object.keys(process.env)
1818
'process.env.CODESANDBOX_HOST': JSON.stringify(getHost()),
1919
'process.env.LOCAL_SERVER': !!LOCAL_SERVER,
2020
'process.env.STAGING': 'STAGING_BRANCH' in process.env,
21+
'process.env.VSCODE': !!JSON.stringify(process.env.VSCODE),
2122
}
2223
);

‎packages/app/config/webpack.common.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -425,7 +425,7 @@ module.exports = {
425425
new CopyWebpackPlugin(
426426
[
427427
// Our own custom version of monaco
428-
{
428+
!process.env.VSCODE && {
429429
from: __DEV__
430430
? '../../standalone-packages/monaco-editor/release/dev/vs'
431431
: '../../standalone-packages/monaco-editor/release/min/vs',

‎packages/app/scripts/start.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,15 @@ function addMiddleware(devServer, index) {
208208
})
209209
);
210210
}
211+
if (process.env.VSCODE) {
212+
devServer.use(
213+
['/vscode**', '/node_modules**', '/monaco**'],
214+
proxy({
215+
target: 'http://localhost:8080',
216+
changeOrigin: true,
217+
})
218+
);
219+
}
211220
// Finally, by now we have certainly resolved the URL.
212221
// It may be /index.html, so let the dev server try serving it again.
213222
devServer.use(devServer.middleware);
@@ -226,7 +235,7 @@ function runDevServer(port, protocol, index) {
226235
publicPath: config.output.publicPath,
227236
// WebpackDevServer is noisy by default so we emit custom message instead
228237
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
229-
quiet: false,
238+
quiet: true,
230239
// Reportedly, this avoids CPU overload on some systems.
231240
// https://github.com/facebookincubator/create-react-app/issues/293
232241
watchOptions: {

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

Lines changed: 124 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,137 @@ class MonacoEditor extends React.PureComponent {
8383
);
8484

8585
appliedOptions.fontFamily = fonts.slice(1).join(', ');
86+
const r = context.require;
87+
88+
const [
89+
{ CodeSandboxCommandService },
90+
{ CodeSandboxHashService },
91+
{ CodeSandboxKeybindingService },
92+
{ CodeSandboxWindowsService },
93+
{ QuickOpenController },
94+
{ EditorPart },
95+
{ CodeSandboxWorkbench },
96+
{ CodeSandboxEnvironmentService },
97+
{ EditorService },
98+
{ UntitledEditorService },
99+
{ CodeSandboxFileService },
100+
{ StorageService },
101+
{ HistoryService },
102+
{ NullLifecycleService },
103+
{ TextFileService },
104+
{ WindowService },
105+
{ CodeSandboxBackupService },
106+
{ CodeSandboxExtensionService },
107+
{ FileDecorationsService },
108+
{ PreferencesService },
109+
{ JSONEditingService },
110+
{ CodeSandboxWorkspacesService },
111+
{ CodeSandboxSearchService },
112+
{ ViewletService },
113+
{ TextModelResolverService },
114+
] = [
115+
r('vs/codesandbox/commandService'),
116+
r('vs/codesandbox/hashService'),
117+
r('vs/codesandbox/keybindingService'),
118+
r('vs/codesandbox/windowsService'),
119+
r('vs/workbench/browser/parts/quickopen/quickOpenController'),
120+
r('vs/codesandbox/editorGroupsService'),
121+
r('vs/codesandbox/workbench'),
122+
r('vs/codesandbox/environmentService'),
123+
// r('vs/codesandbox/editorService'),
124+
r('vs/workbench/services/editor/browser/editorService'),
125+
r('vs/workbench/services/untitled/common/untitledEditorService'),
126+
r('vs/codesandbox/fileService'),
127+
r('vs/platform/storage/common/storageService'),
128+
r('vs/workbench/services/history/electron-browser/history'),
129+
r('vs/platform/lifecycle/common/lifecycle'),
130+
r('vs/workbench/services/textfile/electron-browser/textFileService'),
131+
r('vs/platform/windows/electron-browser/windowService'),
132+
r('vs/codesandbox/backupFileService'),
133+
r('vs/codesandbox/extensionService'),
134+
r('vs/workbench/services/decorations/browser/decorationsService'),
135+
r('vs/workbench/services/preferences/browser/preferencesService'),
136+
r('vs/workbench/services/configuration/node/jsonEditingService'),
137+
r('vs/codesandbox/workspacesService'),
138+
r('vs/codesandbox/searchService'),
139+
r('vs/workbench/services/viewlet/browser/viewletService'),
140+
r(
141+
'vs/workbench/services/textmodelResolver/common/textModelResolverService'
142+
),
143+
];
86144

87145
this.editor = context.monaco.editor[
88146
diffEditor ? 'createDiffEditor' : 'create'
89-
](this.containerElement, appliedOptions);
147+
](this.containerElement, appliedOptions, {
148+
backupFileService: i => i.createInstance(CodeSandboxBackupService),
149+
hashService: i => i.createInstance(CodeSandboxHashService),
150+
extensionService: i => i.createInstance(CodeSandboxExtensionService),
151+
lifecycleService: NullLifecycleService,
152+
windowsService: i => i.createInstance(CodeSandboxWindowsService),
153+
quickOpenService: i => i.createInstance(QuickOpenController),
154+
commandService: i => i.createInstance(CodeSandboxCommandService),
155+
IFileDecorationsService: i => i.createInstance(FileDecorationsService),
156+
textFileService: i => i.createInstance(TextFileService),
157+
fileService: i => i.createInstance(CodeSandboxFileService),
158+
keybindingService: i =>
159+
i.createInstance(CodeSandboxKeybindingService, window),
160+
editorGroupsService: i =>
161+
i.createInstance(EditorPart, 'codesandbox', false),
162+
untitledEditorService: i => i.createInstance(UntitledEditorService),
163+
partService: i => i.createInstance(CodeSandboxWorkbench),
164+
environmentService: i =>
165+
i.createInstance(CodeSandboxEnvironmentService),
166+
storageService: new StorageService(localStorage, localStorage),
167+
historyService: i => i.createInstance(HistoryService),
168+
editorService: i => i.createInstance(EditorService),
169+
windowService: i => i.createInstance(WindowService),
170+
preferencesService: i => i.createInstance(PreferencesService),
171+
jsonEditingService: i => i.createInstance(JSONEditingService),
172+
workspacesService: i => i.createInstance(CodeSandboxWorkspacesService),
173+
searchService: i => i.createInstance(CodeSandboxSearchService),
174+
viewletService: i =>
175+
i.createInstance(ViewletService, {
176+
onDidViewletOpen: () => true,
177+
onDidViewletClose: () => true,
178+
}),
179+
textModelService: i => i.createInstance(TextModelResolverService),
180+
});
181+
90182
if (theme) {
91183
context.monaco.editor.setTheme(theme);
92184
}
93185

94186
// After initializing monaco editor
95187
this.editorDidMount(this.editor, context.monaco);
188+
189+
setTimeout(() => {
190+
const container = document.createElement('div');
191+
const part = document.createElement('div');
192+
193+
container.className = 'vs-dark monaco-workbench';
194+
container.id = 'workbench.main.container';
195+
part.className = 'part editor';
196+
197+
container.appendChild(part);
198+
199+
const editor = document.getElementsByClassName(
200+
'react-monaco-editor-container'
201+
)[0];
202+
editor.parentNode.removeChild(editor);
203+
204+
const rootEl = document.getElementsByClassName(
205+
'elements__CodeContainer-ghvvch'
206+
)[0];
207+
rootEl.appendChild(container);
208+
window.EditorPart.create(part);
209+
210+
setTimeout(() => {
211+
window.EditorPart.layout({
212+
width: this.props.width,
213+
height: this.props.height,
214+
});
215+
}, 500);
216+
}, 3000);
96217
}
97218
};
98219

@@ -109,9 +230,9 @@ class MonacoEditor extends React.PureComponent {
109230
render() {
110231
const { width, height } = this.props;
111232
const fixedWidth =
112-
width.toString().indexOf('%') !== -1 ? width : `${width}px`;
233+
width && width.toString().indexOf('%') !== -1 ? width : `${width}px`;
113234
const fixedHeight =
114-
height.toString().indexOf('%') !== -1 ? height : `${height}px`;
235+
height && height.toString().indexOf('%') !== -1 ? height : `${height}px`;
115236
const style = {
116237
width: fixedWidth,
117238
height: fixedHeight,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1563,7 +1563,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
15631563
};
15641564

15651565
render() {
1566-
const { hideNavigation } = this.props;
1566+
const { hideNavigation, absoluteWidth, absoluteHeight } = this.props;
15671567

15681568
const sandbox = this.sandbox;
15691569
const currentModule = this.currentModule;
@@ -1582,8 +1582,8 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
15821582
/>
15831583
)}
15841584
<MonacoEditorComponent
1585-
width="100%"
1586-
height="100%"
1585+
width={absoluteWidth}
1586+
height={absoluteHeight}
15871587
theme="CodeSandbox"
15881588
options={options}
15891589
editorDidMount={this.configureEditor}

‎packages/app/src/app/index.html‎

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -41,35 +41,40 @@
4141
<script src="https://cdn.ravenjs.com/3.21.0/raven.min.js" crossorigin="anonymous"></script>
4242
<link href="/static/fonts/dmvendor.css" rel="stylesheet">
4343

44-
<!-- AMD Loader for Monaco -->
45-
<link data-name="13/vs/editor/editor.main" rel="stylesheet" href="/public/13/vs/editor/editor.main.css">
46-
<script src="/public/13/vs/loader.js"></script>
47-
<script>
48-
window.require.config({
49-
url: '/public/13/vs/loader.js',
50-
paths: {
51-
vs: '/public/13/vs',
52-
},
53-
});
54-
</script>
55-
<script src="/public/13/vs/editor/editor.main.nls.js"></script>
56-
<script src="/public/13/vs/editor/editor.main.js"></script>
57-
58-
<!-- Google Tag Manager -->
59-
<script>
60-
(function (w, d, s, l, i) {
61-
w[l] = w[l] || []; w[l].push({
62-
'gtm.start':
63-
new Date().getTime(), event: 'gtm.js'
64-
}); var f = d.getElementsByTagName(s)[0],
65-
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
66-
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
67-
})(window, document, 'script', 'dataLayer', 'GTM-T3L6RFK');
68-
</script>
69-
<!-- End Google Tag Manager -->
70-
<!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
44+
<%= !process.env.VSCODE ? `
45+
46+
<!-- AMD Loader for Monaco -->
47+
<link data-name="13/vs/editor/editor.main" rel="stylesheet" href="/public/13/vs/editor/editor.main.css">
48+
<script src="/public/13/vs/loader.js"></script>
49+
<script>
50+
window.require.config({
51+
url: '/public/13/vs/loader.js',
52+
paths: {
53+
vs: '/public/13/vs',
54+
},
55+
});
56+
</script>
57+
<script src="/public/13/vs/editor/editor.main.nls.js"></script>
58+
<script src="/public/13/vs/editor/editor.main.js"></script>
59+
60+
61+
62+
` : ''%>
63+
<!-- Google Tag Manager -->
64+
<script>
65+
(function (w, d, s, l, i) {
66+
w[l] = w[l] || []; w[l].push({
67+
'gtm.start':
68+
new Date().getTime(), event: 'gtm.js'
69+
}); var f = d.getElementsByTagName(s)[0],
70+
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
71+
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
72+
})(window, document, 'script', 'dataLayer', 'GTM-T3L6RFK');
73+
</script>
74+
<!-- End Google Tag Manager -->
75+
<!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
7176

72-
<script async rel="prefetch" src="https://js.stripe.com/v3/"></script>
77+
<script async rel="prefetch" src="https://js.stripe.com/v3/"></script>
7378
</head>
7479

7580
<body style="margin: 0; padding: 0;">

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

Lines changed: 52 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -83,49 +83,62 @@ if (process.env.NODE_ENV === 'production') {
8383

8484
window.__isTouch = !matchMedia('(pointer:fine)').matches;
8585

86-
requirePolyfills().then(() => {
87-
if (process.env.NODE_ENV === 'development') {
88-
window.controller = controller;
89-
}
86+
function boot() {
87+
requirePolyfills().then(() => {
88+
if (process.env.NODE_ENV === 'development') {
89+
window.controller = controller;
90+
}
9091

91-
const rootEl = document.getElementById('root');
92+
const rootEl = document.getElementById('root');
9293

93-
const showNotification = (message, type) =>
94-
controller.getSignal('notificationAdded')({
95-
type,
96-
message,
97-
});
94+
const showNotification = (message, type) =>
95+
controller.getSignal('notificationAdded')({
96+
type,
97+
message,
98+
});
9899

99-
window.showNotification = showNotification;
100+
window.showNotification = showNotification;
100101

101-
registerServiceWorker('/service-worker.js', {
102-
onUpdated: () => {
103-
debug('Updated SW');
104-
controller.getSignal('setUpdateStatus')({ status: 'available' });
105-
},
106-
onInstalled: () => {
107-
debug('Installed SW');
108-
showNotification(
109-
'CodeSandbox has been installed, it now works offline!',
110-
'success'
102+
registerServiceWorker('/service-worker.js', {
103+
onUpdated: () => {
104+
debug('Updated SW');
105+
controller.getSignal('setUpdateStatus')({ status: 'available' });
106+
},
107+
onInstalled: () => {
108+
debug('Installed SW');
109+
showNotification(
110+
'CodeSandbox has been installed, it now works offline!',
111+
'success'
112+
);
113+
},
114+
});
115+
116+
try {
117+
render(
118+
<Provider {...controller.provide()}>
119+
<ApolloProvider client={client}>
120+
<ThemeProvider theme={theme}>
121+
<Router history={history}>
122+
<App />
123+
</Router>
124+
</ThemeProvider>
125+
</ApolloProvider>
126+
</Provider>,
127+
rootEl
111128
);
112-
},
129+
} catch (e) {
130+
logError(e);
131+
}
113132
});
133+
}
114134

115-
try {
116-
render(
117-
<Provider {...controller.provide()}>
118-
<ApolloProvider client={client}>
119-
<ThemeProvider theme={theme}>
120-
<Router history={history}>
121-
<App />
122-
</Router>
123-
</ThemeProvider>
124-
</ApolloProvider>
125-
</Provider>,
126-
rootEl
127-
);
128-
} catch (e) {
129-
logError(e);
130-
}
131-
});
135+
if (process.env.NODE_ENV === 'development' && process.env.VSCODE) {
136+
console.log('hall');
137+
/* eslint-disable global-require */
138+
const METADATA = require('./vscode/metadata');
139+
require('./vscode/dev-bootstrap').default(METADATA.METADATA);
140+
/* eslint-enable */
141+
window.loadEditor(boot);
142+
} else {
143+
boot();
144+
}

0 commit comments

Comments
 (0)