Cross origin web worker support is now builtin

This commit is contained in:
Alex Dima 2021-11-16 22:59:38 +01:00
parent 23f5ddfe3a
commit e425abb5f5
No known key found for this signature in database
GPG key ID: 39563C1504FDD0C9
6 changed files with 2 additions and 133 deletions

View file

@ -32,7 +32,6 @@ It is recommended to develop against the `dev` version, and in production to use
- Learn how to integrate the editor with these [complete samples](./samples/). - Learn how to integrate the editor with these [complete samples](./samples/).
- [Integrate the AMD version](./monaco-editor/docs/integrate-amd.md). - [Integrate the AMD version](./monaco-editor/docs/integrate-amd.md).
- [Integrate the AMD version cross-domain](./monaco-editor/docs/integrate-amd-cross.md)
- [Integrate the ESM version](./monaco-editor/docs/integrate-esm.md) - [Integrate the ESM version](./monaco-editor/docs/integrate-esm.md)
- Learn how to use the editor API and try out your own customizations in the [playground](https://microsoft.github.io/monaco-editor/playground.html). - Learn how to use the editor API and try out your own customizations in the [playground](https://microsoft.github.io/monaco-editor/playground.html).
- Explore the [API docs](https://microsoft.github.io/monaco-editor/api/index.html) or read them straight from [`monaco.d.ts`](https://github.com/Microsoft/monaco-editor/blob/gh-pages/playground/monaco.d.ts.txt). - Explore the [API docs](https://microsoft.github.io/monaco-editor/api/index.html) or read them straight from [`monaco.d.ts`](https://github.com/Microsoft/monaco-editor/blob/gh-pages/playground/monaco.d.ts.txt).
@ -70,7 +69,7 @@ It is an AMD loader that we use in VS Code. Yes.
❓ **I see the warning "Could not create web worker". What should I do?** ❓ **I see the warning "Could not create web worker". What should I do?**
HTML5 does not allow pages loaded on `file://` to create web workers. Please load the editor with a web server on `http://` or `https://` schemes. Please also see the cross-domain case above. HTML5 does not allow pages loaded on `file://` to create web workers. Please load the editor with a web server on `http://` or `https://` schemes.
❓ **Is the editor supported in mobile browsers or mobile web app frameworks?** ❓ **Is the editor supported in mobile browsers or mobile web app frameworks?**

View file

@ -1,84 +0,0 @@
## Integrating the AMD version of the Monaco Editor in a cross-domain setup
Here is the most basic HTML page that embeds the editor, using AMD, in the case that the editor sources are hosted on a different domain (e.g. CDN) than the document origin.
More self-contained samples are available at [monaco-editor-samples](https://github.com/Microsoft/monaco-editor-samples).
If you are hosting your `.js` on a different domain (e.g. on a CDN) than the HTML, you should know that the Monaco Editor creates web workers for smart language features. Cross-domain web workers are not allowed, but here is how you can proxy their loading and get them to work:
Assuming the HTML lives on `www.mydomain.com` and the editor is hosted on `www.mycdn.com`.
---
# Option 1: Use a data: worker URI
- `https://www.mydomain.com/index.html`:
```html
<script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({
paths: { vs: 'http://www.mycdn.com/monaco-editor/min/vs' }
});
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
// the default worker url location (used when creating WebWorkers). The problem here is that
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
// a web worker through a same-domain script
window.MonacoEnvironment = {
getWorkerUrl: function (workerId, label) {
return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
self.MonacoEnvironment = {
baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
};
importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');`)}`;
}
};
require(['vs/editor/editor.main'], function () {
// ...
});
</script>
```
---
# Option 2: Host on your domain a worker proxy
- `https://www.mydomain.com/index.html`:
```html
<script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({
paths: { vs: 'http://www.mycdn.com/monaco-editor/min/vs' }
});
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
// the default worker url location (used when creating WebWorkers). The problem here is that
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
// a web worker through a same-domain script
window.MonacoEnvironment = {
getWorkerUrl: function (workerId, label) {
return 'monaco-editor-worker-loader-proxy.js';
}
};
require(['vs/editor/editor.main'], function () {
// ...
});
</script>
```
- `https://www.mydomain.com/monaco-editor-worker-loader-proxy.js`:
```js
self.MonacoEnvironment = {
baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
};
importScripts('www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');
```
---
That's it. You're good to go! :)

View file

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monaco Editor cross origin correct</h2>
<div style="clear: both"></div>
<div
id="container"
style="float: left; width: 800px; height: 450px; border: 1px solid grey"
></div>
<div style="clear: both"></div>
<script src="../../metadata.js"></script>
<script src="dev-setup.js"></script>
<script>
window.MonacoEnvironment = {
getWorkerUrl: function () {
return 'cross-origin-worker-proxy.js#http://localhost:8088' + RESOLVED_CORE_PATH;
}
};
</script>
<script>
loadEditor(function () {
monaco.editor.create(document.getElementById('container'), {
value: document.documentElement.innerHTML,
language: 'css'
});
}, 'http://localhost:8088');
</script>
</body>
</html>

View file

@ -1,10 +0,0 @@
var baseUrl = self.location.hash;
baseUrl = baseUrl.replace(/^#/, '');
baseUrl = baseUrl.replace(/vs$/, '');
console.log('WORKER BASE_URL: ' + baseUrl);
self.MonacoEnvironment = {
baseUrl: baseUrl
};
importScripts(baseUrl + 'vs/base/worker/workerMain.js');

View file

@ -20,9 +20,7 @@
&#160;|&#160; &#160;|&#160;
<a class="loading-opts" href="./colorize.html">[colorize element]</a> <a class="loading-opts" href="./colorize.html">[colorize element]</a>
&#160;|&#160; &#160;|&#160;
<a class="loading-opts" href="./cross-origin-broken.html">[cross origin broken]</a> <a class="loading-opts" href="./cross-origin.html">[cross origin]</a>
&#160;|&#160;
<a class="loading-opts" href="./cross-origin-good.html">[cross origin good]</a>
&#160;|&#160; &#160;|&#160;
<a class="loading-opts" href="./diff.html">[diff]</a> <a class="loading-opts" href="./diff.html">[diff]</a>
<br /><br /> <br /><br />