Comments (13)
What is your definition of a simple repo? Since you need the Angular wrapper, the given one is as simple as one could provide it. I cannot really make it any smaller.
I understand that this issue may not be of your concern and I am positive that Angular somehow monkey-patches the global Promise in order to achieve its zone-aware change detection. It's not a Monaco issue per se.
With the knowledge about the ZoneAwarePromise, I will try to post this in the Angular repo. I myself am not able to pin down the actual root cause of the behavior.
Nevertheless, thanks for your input and the maintainance of the editor!
from monaco-editor.
Can you reproduce this in the monaco editor playground?
from monaco-editor.
- Playground works fine
- loader.js (AMD) in a single index.html works fine
- loader.js (AMD) with 0.44.0 in NG works
- loader.js (AMD) with 0.45.0 in NG does not work
I know one could say it's an NG problem, but something must have happend to the monaco code that is responsible for the incompatibility with NG since 0.44.0 works perfectly.
from monaco-editor.
We do have a call to .reduce
in quickInputList.ts:
https://github.com/microsoft/vscode/blob/42c45d4b8124d2c6fa11e5b461cf8df30749c332/src/vs/platform/quickinput/browser/quickInputList.ts#L674
but... I mean that hasn't changed in years. It seems like a reasonable claim that for some reason inputElements
isn't a typical array... but why would that be the case?
The only interesting call to setElements
is this one:
https://github.com/microsoft/vscode/blob/42c45d4b8124d2c6fa11e5b461cf8df30749c332/src/vs/platform/quickinput/browser/quickInput.ts#L1069
The getter & setter for this.items
is here:
https://github.com/microsoft/vscode/blob/42c45d4b8124d2c6fa11e5b461cf8df30749c332/src/vs/platform/quickinput/browser/quickInput.ts#L599-L615
and this._items
starts out as an empty array:
https://github.com/microsoft/vscode/blob/42c45d4b8124d2c6fa11e5b461cf8df30749c332/src/vs/platform/quickinput/browser/quickInput.ts#L507
The other side of the coin is if for some reason we fail to get the Commands ...and that somehow sets a non-array type...but that doesn't seem to be the case:
We return an array here:
https://github.com/microsoft/vscode/blob/42c45d4b8124d2c6fa11e5b461cf8df30749c332/src/vs/editor/contrib/quickAccess/browser/commandsQuickAccess.ts#L48
We return an array here:
https://github.com/microsoft/vscode/blob/42c45d4b8124d2c6fa11e5b461cf8df30749c332/src/vs/platform/quickinput/browser/commandsQuickAccess.ts#L187
and the only change that went in between 0.44.0 and 0.45.0 is this which wouldn't cause the issue:
microsoft/vscode#201015
Is it possible some mangling could be going on @FSDRE? Can you please provide a minimum repro so that it's easier to debug?
I'd also be curious if other quick picks, like symbols, also fail.
from monaco-editor.
@TylerLeonhardt Mangling is not used. Monaco gets copied 1:1 from node_modules to the assets folder:
{
"glob": "**/*",
"input": "node_modules/monaco-editor/min/vs",
"output": "assets/monaco/min/vs"
},
{
"glob": "**/*",
"input": "node_modules/monaco-editor/min-maps/vs",
"output": "assets/monaco/min-maps/vs"
}
This does not run through any of NG's build processes where minification or mangling is applied.
The LoaderService
uses the provided loader.js
in order to load Monaco from its original minified sources from the assets folder and provides the HTML element for the monaco.editor.create()
method. That's exactly the same call one would do without Angular.
Now here's the weird part:
I checked all your above mentioned links and you are right, I don't see any issues, too. But fact is, if I hit F1
in monaco and set a breakpoint at
this.elements = inputElements.reduce((result, item, index) => {
it gets called twice. On the first call inputElements
is an array with length 0. On the second call though, inputElements
is a Promise (???). And surely enough promises do not have reduce methods.
Now the question I cannot answer is, where does the Promise come from?
The Promise is even there if I run the LoaderService
and monaco.editor.create()
outside of the Angular Zone just to make sure there is no moneky-patching going on.
The provided repo is as minimal as it gets. It's the minimal size of a running NG-App.
If you run Chrome with --remote-debugging-port=9222
and hit F5
in VSCode, the debugger should attach.
I am also investing more time into the issue since I need it fixed and I really want to know what's going on. It's a weird one for sure 😄
from monaco-editor.
Ok I got to the culprit of it:
Don't call me insane, but this line gets called even if providedPicks
is a Promise.
if I put
providedPicks instanceof Promise
into the browser watch it returns false
. The prototype is Promise
, though.
This is a honest WTF-moment... what is going on here?
It might be that zone.js could be the issue, don't really know yet.
from monaco-editor.
If I use Monaco 0.44.0, providedPicks
is a ZoneAwarePromise
and providedPicks instanceof Promise
evaluates to true
.
As soon as I use 0.45.0, providedPicks
is a Promise
and providedPicks instanceof Promise
evaluates to false
.
from monaco-editor.
Wait in 0.45.0
you're saying Promise instance Promise
evaluates....... to false?
from monaco-editor.
I am confused and I am honstly not sure if I am understanding this correctly. I made 2 screenshots.
In 0.44.0 providedPicks
is shown as ZoneAwarePromise
and line 276 does NOT get hit. So !(providedPicks instanceof Promise)
evaluates to false
. 291 does get hit and awaitedPicks contains all the actions for the command palette.
In 0.45.0 providedPicks
is shown as Promise
and line 276 gets hit! So !(providedPicks instanceof Promise)
evaluates to true
resulting in the error with .reduce()
. After that line 291 does NOT get hit and the command palette is empty.
What confuses me is that in both cases the watcher shows providedPicks
as <not available>
. I don't know how to interpret that.
Can you make any sense of that?
from monaco-editor.
Honestly not sure what could be happening here. This is going to be tricky for us to track down without a simple repro. I can't say that we'll have the time to look deep into this... but if you find a solution and the PR is small we would for sure consider taking it. I'm very suspicious of some hijacking of the global Promise which is causing this.
from monaco-editor.
The problem occurres exactly since v0.45.0-dev-20231125.
The essential commit is this: microsoft/vscode@59787d6
Since zone.js has a big (still unsolved) problem with native async/await (angular/angular#31730) this change causes the Problem.
from monaco-editor.
The essential commit is this: microsoft/vscode@59787d6
We cannot revert that because of the angular zone library having issues with native promises.
I'm sorry that it broke for you, but this is yet another proof that we can only investigate issues that reproduce in the monaco editor playground.
from monaco-editor.
Thats fine for me.
But now we know, where the issue comes from and we have to deal without Angular 😢.
from monaco-editor.
Related Issues (20)
- Update Monaco's vendored TypeScript from v5.0.2 to support React JSX types and other language changes HOT 1
- [Feature Request] Add tools section to README.md
- [Bug] 0.47.0 TypeError: Cannot read properties of undefined (reading 'CI') HOT 1
- [Bug] No alternate for getDiffLineInformationForOriginal or getDiffLineInformationForModified in diff editor
- Adjust suggest filter in monaco editor
- [Bug] The setMonarchTokensProvider rule matches incorrectly
- [Bug] Setting tabFocusMode on initial monaco.editor.create does not properly set value
- [Bug] When multiple Monaco editors exist simultaneously, the theme of each editor is forced to be unified HOT 1
- How do I display the full suggestion detail directly HOT 1
- [Feature Request] Add support for X position of a line decoration
- [Feature Request] The monaco editor gets the configuration of the registration language
- [Feature Request] Keep ThirdPartyNotices.txt up to date
- [Bug] Paste in editor context menu broken on monaco-editor 0.47 HOT 1
- [Bug] Upgrading from 0.45.0 -> 0.46.0+ changes font to Courier
- [Feature request] Spell check
- [Bug] Color picker Disappears on web components integration HOT 1
- [Bug] Using wordWrap, when a line of code is too long, click on the editor, the editor content will scroll to the left, and the editor will display blank space
- [Bug] DiffEditor with glyphMargin: false, still renders glyphMargin when rendered side by side. HOT 1
- [Bug] Monaco does not render markers of the dedicated model after switching to this model. HOT 1
- [Bug] Tab only accept the empty space HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from monaco-editor.