Skip to content

Commit 7db6b3b

Browse files
committed
Editor optimizations
1 parent 313a6f2 commit 7db6b3b

File tree

12 files changed

+117243
-93
lines changed

12 files changed

+117243
-93
lines changed

packages/app/config/webpack.common.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -450,6 +450,11 @@ module.exports = {
450450
to: 'public/13/vs',
451451
force: true,
452452
},
453+
{
454+
from: '../../standalone-packages/resolver/out',
455+
to: 'public/vscode',
456+
force: true,
457+
},
453458
__PROD__ && {
454459
from: '../../node_modules/monaco-editor/min-maps',
455460
to: 'public/min-maps',

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,11 @@ class MonacoEditor extends React.PureComponent {
3434
return;
3535
}
3636

37-
require('app/vscode/dev-bootstrap').default('vs/editor/editor.main')(() => {
38-
this.initMonaco();
39-
});
37+
require('app/vscode/dev-bootstrap').default(['vs/editor/editor.main'])(
38+
() => {
39+
this.initMonaco();
40+
}
41+
);
4042
};
4143

4244
initMonaco = () => {

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ class MonacoEditor extends React.PureComponent {
4141
afterViewInit = () => {
4242
const context = this.props.context || window;
4343

44-
require('app/vscode/dev-bootstrap').default(
45-
'vs/editor/codesandbox.editor.main'
46-
)(() => {
44+
require('app/vscode/dev-bootstrap').default([
45+
'vs/editor/codesandbox.editor.main',
46+
])(() => {
4747
this.initMonaco();
4848
});
4949
};
@@ -129,12 +129,11 @@ class MonacoEditor extends React.PureComponent {
129129
services => {
130130
const EditorPart = services.get(IEditorGroupsService);
131131
EditorPart.create(part);
132-
setTimeout(() => {
133-
EditorPart.layout({
134-
width: this.props.width,
135-
height: this.props.height,
136-
});
137-
}, 500);
132+
133+
EditorPart.layout({
134+
width: this.props.width,
135+
height: this.props.height,
136+
});
138137

139138
const codeEditorService = services.get(ICodeEditorService);
140139
const textFileService = services.get(ITextFileService);

packages/app/src/app/index.html

Lines changed: 32 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!doctype html>
22
<html lang="en">
3-
43
<head>
54
<meta charset="utf-8">
65
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -28,61 +27,20 @@
2827
for web applications.">
2928
<link rel="shortcut icon" href="/favicon.ico">
3029
<link rel="manifest" href="/manifest.json">
31-
3230
<script
3331
src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
3432
<script>
35-
WebFont.load({
36-
google: {
37-
families: ['Source Code Pro:500', 'Roboto:300,400,500,700']
38-
}
39-
});
40-
</script>
33+
WebFont.load({
34+
google: {
35+
families: ['Source Code Pro:500', 'Roboto:300,400,500,700']
36+
}
37+
});
38+
</script>
4139
<!-- Injected by server: -->
4240
<!-- {{OEMBED TAG}} -->
43-
4441
<title>CodeSandbox</title>
45-
46-
<script src="https://cdn.ravenjs.com/3.21.0/raven.min.js"
47-
crossorigin="anonymous"></script>
42+
<script src="https://cdn.ravenjs.com/3.21.0/raven.min.js" crossorigin="anonymous"></script>
4843
<link href="/static/fonts/dmvendor.css" rel="stylesheet">
49-
50-
<script>
51-
function loadStyle() {
52-
if (typeof document !== 'undefined') {
53-
var style = document.createElement('link');
54-
style.dataset.name = '13/vs/editor/editor.main';
55-
style.rel = 'stylesheet';
56-
style.href = "https://codesandbox.io/public/13/vs/editor/editor.main.css";
57-
document.head.appendChild(style);
58-
}
59-
}
60-
61-
function loadScript(path, callback) {
62-
if (typeof document !== 'undefined') {
63-
var script = document.createElement('script');
64-
script.onload = callback;
65-
script.type = 'text/javascript';
66-
script.src = path;
67-
document.head.appendChild(script);
68-
}
69-
}
70-
71-
// if (localStorage.getItem('settings.experimentVSCode') !== 'true') {
72-
// loadScript("https://codesandbox.io/public/13/vs/loader.js", () => {
73-
// window.require.config({
74-
// url: 'https://codesandbox.io/public/13/vs/loader.js',
75-
// paths: {
76-
// vs: 'https://codesandbox.io/public/13/vs',
77-
// },
78-
// });
79-
// loadStyle();
80-
// loadScript("https://codesandbox.io/public/13/vs/editor/editor.main.nls.js");
81-
// loadScript("https://codesandbox.io/public/13/vs/editor/editor.main.js");
82-
// });
83-
// }
84-
85-
</script>
8644
<!-- Google Tag Manager -->
8745
<script>
8846
(function (w, d, s, l, i) {
@@ -96,30 +54,33 @@
9654
</script>
9755
<!-- End Google Tag Manager -->
9856
<!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
99-
10057
<script async rel="prefetch" src="https://js.stripe.com/v3/"></script>
10158
<script src="<%= webpackConfig.output.publicPath %>static/browserfs/browserfs<%=process.env.NODE_ENV
102-
=== 'development' ? '' : '.min'%>.js"
103-
type="text/javascript"></script>
59+
=== 'development' ? '' : '.min'%>.js"
60+
type="text/javascript"></script>
10461

105-
<script>
106-
if (BrowserFS) {
107-
window.process = { nextTick: requestAnimationFrame };
108-
window.Buffer = BrowserFS.BFSRequire('buffer').Buffer;
109-
}
62+
<script>
63+
if (BrowserFS) {
64+
window.process = { nextTick: requestAnimationFrame };
65+
window.Buffer = BrowserFS.BFSRequire('buffer').Buffer;
66+
}
11067
</script>
111-
</head>
112-
113-
<body style="margin: 0; padding: 0;">
114-
<!-- Google Tag Manager (noscript) -->
115-
<noscript>
116-
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3L6RFK"
117-
height="0" width="0" style="display:none;visibility:hidden"></iframe>
118-
</noscript>
119-
<!-- End Google Tag Manager (noscript) -->
120-
<div class="vs-dark" id="root">
121-
122-
</div>
123-
</body>
12468

125-
</html>
69+
<link data-name="/vscode/out-editor/vs/editor/editor.main"
70+
rel="preload"
71+
as="style"
72+
href="/vscode/out-editor/vs/editor/editor.main.css">
73+
</link>
74+
<link rel="preload" as="script" href="/vscode/out-editor/vs/editor/editor.main.js"></link>
75+
</head>
76+
<body style="margin: 0; padding: 0;">
77+
<!-- Google Tag Manager (noscript) -->
78+
<noscript>
79+
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3L6RFK"
80+
height="0" width="0" style="display:none;visibility:hidden"></iframe>
81+
</noscript>
82+
<!-- End Google Tag Manager (noscript) -->
83+
<div class="vs-dark" id="root">
84+
</div>
85+
</body>
86+
</html>

packages/app/src/app/index.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,16 @@ BrowserFS.configure(
180180
throw e;
181181
}
182182

183-
// Otherwise, BrowserFS is ready-to-use!
184-
boot();
183+
require('app/vscode/dev-bootstrap').default(['vs/editor/editor.main'])(
184+
() => {
185+
if (localStorage.getItem('settings.experimentVSCode') === 'true') {
186+
window.require(['vs/editor/codesandbox.editor.main'], () => {
187+
boot();
188+
});
189+
} else {
190+
boot();
191+
}
192+
}
193+
);
185194
}
186195
);

packages/app/src/app/vscode/dev-bootstrap.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,11 @@ export default function(requiredModule: string) {
221221
if (IS_FILE_PROTOCOL) {
222222
resolvedPath = DIRNAME + '/../' + resolvedPath;
223223
} else {
224-
resolvedPath = '/monaco-editor/' + resolvedPath;
224+
if (resolvedPath.startsWith('../')) {
225+
resolvedPath = '/' + resolvedPath.replace('../', '');
226+
} else {
227+
resolvedPath = '/monaco-editor/' + resolvedPath;
228+
}
225229
}
226230
} else {
227231
if (IS_FILE_PROTOCOL) {
@@ -363,7 +367,10 @@ export default function(requiredModule: string) {
363367
};
364368

365369
function loadFiles() {
366-
var loaderPathsConfig = {};
370+
var loaderPathsConfig = {
371+
// 'vs/nls': '/vscode/out-build/vs/nls.build',
372+
// 'vs/css': '/vscode/out-build/vs/css.build',
373+
};
367374
if (!RESOLVED_CORE.isRelease()) {
368375
RESOLVED_PLUGINS.forEach(function(plugin) {
369376
plugin.generateLoaderConfig(loaderPathsConfig);
@@ -382,15 +389,18 @@ export default function(requiredModule: string) {
382389
initializeRequires();
383390

384391
console.log('setting config', AMDLoader);
392+
393+
// self.require.config({ requireToUrl, paths: { vs: '/public/vscode' } });
385394
self.require.config({
395+
// isBuild: true,
386396
paths: loaderPathsConfig,
387397
requireToUrl,
388398
});
389399
}
390400

391401
window.deps = new Set();
392402

393-
self.require([requiredModule], function() {
403+
self.require(requiredModule, function() {
394404
console.log('Loaded first files');
395405
if (!RESOLVED_CORE.isRelease()) {
396406
console.log('Loaded files');
@@ -410,7 +420,7 @@ export default function(requiredModule: string) {
410420
});
411421
}
412422

413-
if (requiresDefined) {
423+
if (window.require) {
414424
loadFiles();
415425
} else {
416426
loadScript(

packages/app/src/app/vscode/metadata.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const METADATA = {
22
CORE: {
33
paths: {
4-
src: '/vscode/out/vs',
4+
src: '/vscode/out-editor/vs',
55
'npm/dev': 'node_modules/monaco-editor-core/dev/vs',
66
'npm/min': 'node_modules/monaco-editor-core/min/vs',
77
built: '/vscode/out-monaco-editor-core/min/vs',

standalone-packages/resolver/deps.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

standalone-packages/resolver/gen-file.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@ deps.filter(p => p.indexOf('vscode/out/') > -1).forEach((path, i) => {
1717

1818
st += depst + '\n\n';
1919
});
20-
fs.writeFileSync('./genee.js', st);
20+
fs.writeFileSync(process.argv[2], st);
2121

2222
console.log(_.sortBy(depsizes, o => -o.size));

standalone-packages/resolver/out/editor.main.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)